Import

Author: elnardu

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

Makefile

@@ -0,0 +1,10 @@
+start:
+	npm run start
+build:
+	npm run build
+test:
+	npm run test
+clean:
+	npm run clean
+
+.PHONY: build test clean

README.md

@@ -0,0 +1,17 @@
+# React `use c`
+
+Use C in your React!
+
+<img width="590" alt="image" src="https://github.com/elnardu/react-use-c/assets/8999001/495c39d6-3fb1-437d-9af0-03020c215159">
+
+https://github.com/elnardu/react-use-c/assets/8999001/24a433d9-af89-4962-a0a1-ba6533092d0b
+
+## TODO
+
+- [ ] Add more folders and files with code that does nothing to look more professional
+- [ ] Create `create-react-use-c` package cuz this ecosystem is broken
+- [ ] Add typescript support
+- [ ] Make somebody else figure out publishing this to npm (I am still not over it)
+- [ ] Remove typescript support
+- [ ] Tell windows ppl to just use WSL
+- [ ] esbuild is not cursed enough, gotta switch to something else

build.js

@@ -0,0 +1,76 @@
+const esbuild = require("esbuild");
+const fs = require("fs/promises");
+const fsButWihtoutPromises = require("fs");
+const path = require("path");
+
+function findClosingBrace(string) {
+  let c = 0;
+  let i = 0;
+  // prob doesn't work with unicode
+  while (i < string.length) {
+    const ch = string[i];
+    if (ch === "{") c++;
+    else if (ch === "}") c--;
+    if (c == -1) return i;
+    i++;
+  }
+  return null;
+}
+
+function transformToUseC(args) {
+  const content = fsButWihtoutPromises.readFileSync(args.path, "utf8");
+  const splits = content.split(/["']use c["'];/);
+  let result = splits[0];
+  for (let i = 1; i < splits.length; i++) {
+    const endOfCCode = findClosingBrace(splits[i]);
+    const cCode = splits[i].slice(0, endOfCCode);
+    result += `return runC("${encodeURIComponent(cCode)}");`;
+    result += splits[i].slice(endOfCCode, splits[i].length);
+  }
+  return result;
+}
+
+const useCPlugin = {
+  name: "use-c",
+  setup(build) {
+    build.onLoad({ filter: /.js$/ }, (args) => ({
+      contents: transformToUseC(args),
+      loader: "js",
+    }));
+
+    build.onLoad({ filter: /.jsx$/ }, (args) => ({
+      contents: transformToUseC(args),
+      loader: "jsx",
+    }));
+  },
+};
+
+function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+async function build() {
+  await fs.rm("dist", { recursive: true, force: true });
+  await fs.mkdir("dist", { recursive: true });
+
+  console.log("Building project");
+  await sleep(Math.random() * 5000); // gotta keep up with the trends
+
+  await esbuild.build({
+    entryPoints: ["client.jsx"],
+    outfile: "dist/js.js",
+    minify: true,
+    bundle: true,
+    sourcemap: true,
+    plugins: [useCPlugin],
+  });
+
+  await fs.cp("index.html", "dist/index.html");
+}
+
+build().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

client.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+
+// I haven't used any of this bs in a year, hopefully it still the same
+
+/// Look mum! I am so cool, I put strings into a different file
+function css(strings) {
+  let style = document.getElementById("css-in-js-style-thing");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "css-in-js-style-thing";
+    document.head.appendChild(style);
+  }
+
+  const randomClassId = Math.random().toString(36).slice(2);
+  style.textContent += `
+.${randomClassId} {
+${strings[0]}
+}`;
+  return randomClassId;
+}
+
+async function runC(code) {
+  const res = await fetch("/rpc/rce", {
+    method: "POST",
+    body: JSON.stringify({ code: code }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  return await res.json();
+}
+
+const appStyles = css`
+  margin: 3rem auto;
+  max-width: 600px;
+  padding: 0 1rem;
+`;
+
+const App = () => (
+  <div className={appStyles}>
+    <h1>React use C demo</h1>
+    <Demo />
+  </div>
+);
+
+const Demo = () => {
+  const [output, setOutput] = useState(null);
+  const cHelloWorld = async () => {
+    "use c";
+    #include <stdio.h>
+    int main() {
+      printf("Hello from C!\n");
+      return 0;
+    }
+  };
+  const onClick = async () => {
+    const out = await cHelloWorld();
+    setOutput(out.stdout);
+  };
+
+  return (
+    <div>
+      <button onClick={onClick}>Run C code!</button>
+      <p>Output from C:</p>
+      <pre>{ output }</pre>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById("app"));

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React use C demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/js.js"></script>
+  </body>
+</html>