adds webpack based react build

coilysiren · Nov 24, 2023 · 048986c · 048986c
1 parent 74df7d8
commit 048986c
Show file tree

Hide file tree

Showing 13 changed files with 5,153 additions and 12,924 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,23 +5,34 @@
     "build": "webpack --config webpack.config.js",
     "start": "webpack-dev-server"
   },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
+  },
   "devDependencies": {
-    "@types/node": "^10.9.4",
-    "@types/webassembly-js-api": "0.0.1",
-    "ajv": "^6.5.3",
-    "concurrently": "^3.6.1",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/node": "^20.9.5",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@types/webassembly-js-api": "^0.0.1",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^5.1.2",
+    "css-loader": "^6.8.1",
     "galaxy_gen_backend": "file:pkg",
-    "html-webpack-plugin": "^3.2.0",
-    "rxjs": "^6.3.2",
-    "ts-loader": "^4.5.0",
-    "tslint": "^5.11.0",
-    "typescript": "^2.9.2",
-    "webpack-serve": "^1.0.4",
-    "zone.js": "^0.8.26",
-    "hello-wasm-pack": "^0.1.0",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.5",
-    "copy-webpack-plugin": "^5.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.1",
+    "tslint": "^5.20.1",
+    "typescript": "^5.3.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }
diff --git a/readme.md b/readme.md
@@ -37,14 +37,6 @@ the files there are compiled to `galaxy_gen_backend` as `wasm` + `js`
 
 ## js
 
-`js/*` handles rendering the data created by the rust backend
+`src/js/*` handles rendering the data created by the rust backend
 
-The `wasm` + `js` apis are loaded into the main application [typescript](https://www.typescriptlang.org/) via async imports `await import(.*[wasm|js])'`
-
-## js files
-
-`setup.js` handles loading the js binds + wasm binary into `main.ts`. `setup.js` has to be a `js` file rather than `ts` because of a quirk of how `typescript@^2.8` compiles `async import(...`
-
-`main.ts` is [typescript](https://www.typescriptlang.org/) because typescript is good and pure :sparkles:
-
-`tests/*` are [mocha](https://mochajs.org/) tests in a [karma](https://karma-runner.github.io/) runner, they run a chrome browser and execute the `wasm` + `js` there.
+The `wasm` + `js` apis are loaded into the main application [typescript](https://www.typescriptlang.org/) via async imports
diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js
diff --git a/src/js/index.html b/src/js/index.html
@@ -3,9 +3,12 @@
   <head>
     <meta charset="utf-8">
     <title>Hello wasm-pack!</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
   </head>
   <body>
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
-    <script src="./bootstrap.js"></script>
+    <div id="root"></div>
+    <script src="./index.js"></script>
   </body>
 </html>
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import * as ReactDOM from "react-dom/client";
+import App from "./lib/interface";
+
+// A dependency graph that contains any wasm must all be imported asynchronously.
+import("./lib/galaxy").catch((e) =>
+  console.error("Error importing `main`:", e)
+);
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
diff --git a/src/js/main.ts → src/js/lib/galaxy.ts b/src/js/main.ts → src/js/lib/galaxy.ts
diff --git a/src/js/lib/interface.tsx b/src/js/lib/interface.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import "./styles.css";
+
+function MyButton() {
+  return <button type="button" className="btn btn-primary">"I'm a button"</button>;
+}
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>Welcome to my app</h1>
+      <MyButton />
+    </div>
+  );
+}
diff --git a/src/js/lib/styles.css b/src/js/lib/styles.css
@@ -0,0 +1,48 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 22px;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 20px;
+}
+
+h3 {
+  margin-top: 0;
+  font-size: 18px;
+}
+
+h4 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+h5 {
+  margin-top: 0;
+  font-size: 14px;
+}
+
+h6 {
+  margin-top: 0;
+  font-size: 12px;
+}
+
+code {
+  font-size: 1.2em;
+}
+
+ul {
+  padding-inline-start: 20px;
+}
+