Use esbuild in example

smikhalevski · Jun 12, 2024 · 6cf46a4 · 6cf46a4
1 parent 7d33c80
commit 6cf46a4
Show file tree

Hide file tree

Showing 16 changed files with 1,012 additions and 1,873 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,17 +15,18 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "rollup": "4.11.0",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "rollup": "^4.18.0",
+    "ts-jest": "^29.1.4",
+    "tslib": "^2.6.3",
     "typedoc": "^0.25.13",
     "typedoc-custom-css": "github:smikhalevski/typedoc-custom-css#master",
+    "typedoc-plugin-mdn-links": "^3.1.29",
     "typescript": "^5.4.5"
   }
 }
diff --git a/web/example/esbuild.config.mjs b/web/example/esbuild.config.mjs
@@ -0,0 +1,56 @@
+import esbuild from 'esbuild';
+import path from 'path';
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+const outputPath = path.resolve('dist');
+const archivePath = path.join(outputPath, 'bundle.zip');
+
+fs.mkdirSync(outputPath, { recursive: true });
+
+fs.writeFileSync(
+  path.join(outputPath, 'index.html'),
+  `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <script src="/index.js"></script>
+</body>
+</html>`
+);
+
+const zipPlugin = {
+  name: 'zip',
+
+  setup(build) {
+    build.onEnd(() => {
+      fs.rmSync(archivePath, { force: true });
+
+      execSync(`zip -r ${archivePath} .`, { cwd: outputPath });
+    });
+  },
+};
+
+const ctx = await esbuild.context({
+  entryPoints: ['./src/index.tsx'],
+  bundle: true,
+  outdir: outputPath,
+  plugins: [zipPlugin],
+});
+
+if (!process.argv.includes('--watch')) {
+  await ctx.rebuild();
+  process.exit();
+}
+
+await ctx.watch();
+
+await ctx.serve({
+  port: 10001,
+  servedir: outputPath,
+});
+
+console.log(`Serving on http://localhost:10001`);
diff --git a/web/example/jointly.config.json b/web/example/jointly.config.json
@@ -0,0 +1,18 @@
+[
+  {
+    "label": "esbuild",
+    "command": "node",
+    "args": [
+      "esbuild.config.mjs",
+      "--watch"
+    ]
+  },
+  {
+    "command": "tsc",
+    "args": [
+      "--watch",
+      "--preserveWatchOutput",
+      "--pretty"
+    ]
+  }
+]
diff --git a/web/example/package.json b/web/example/package.json
@@ -1,33 +1,25 @@
 {
   "name": "example",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "rollup --config rollup.config.js",
-    "watch": "rollup --config rollup.config.js --watch",
-    "clean": "rimraf dist",
-    "test": "exit 0"
+    "build": "tsc && node esbuild.config.mjs",
+    "watch": "jointly",
+    "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-html": "^1.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "rollup": "4.11.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^2.0.3",
-    "rollup-plugin-zip": "^1.0.3",
-    "tslib": "^2.6.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "esbuild": "^0.21.5",
+    "jointly": "^0.0.2",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5"
   },
   "dependencies": {
     "@racehorse/react": "^1.2.0",
     "abortcontroller-polyfill": "^1.7.5",
     "racehorse": "^1.6.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }
diff --git a/web/example/rollup.config.js b/web/example/rollup.config.js
diff --git a/web/example/src/examples/ActivityExample.tsx b/web/example/src/examples/ActivityExample.tsx
@@ -44,10 +44,8 @@ export function ActivityExample() {
         <i>{'Open WebView console to observe activity state changes'}</i>
       </p>
 
-      <p>
-        {'Activity info: '}
-        <FormattedJSON value={activityInfo} />
-      </p>
+      {'Activity info: '}
+      <FormattedJSON value={activityInfo} />
 
       <p>
         <button

diff --git a/web/example/src/examples/ContactsExample.tsx b/web/example/src/examples/ContactsExample.tsx
@@ -29,10 +29,8 @@ export function ContactsExample() {
         </p>
       )}
 
-      <p>
-        {'Contact: '}
-        <FormattedJSON value={contact} />
-      </p>
+      {'Contact: '}
+      <FormattedJSON value={contact} />
     </>
   );
 }
diff --git a/web/example/src/examples/FacebookLoginExample.tsx b/web/example/src/examples/FacebookLoginExample.tsx
@@ -17,10 +17,9 @@ export function FacebookLoginExample() {
           />
         </p>
       )}
-      <p>
-        {'Access token:'}
-        <FormattedJSON value={accessToken} />
-      </p>
+      {'Access token:'}
+      <FormattedJSON value={accessToken} />
+      <p />
       <button
         onClick={() => {
           facebookLoginManager.logIn().then(setAccessToken);

diff --git a/web/example/src/examples/FsExample.tsx b/web/example/src/examples/FsExample.tsx
@@ -40,7 +40,12 @@ export function FsExample() {
           }}
         >
           {Object.values(Directory).map(uri => (
-            <option value={uri}>{uri}</option>
+            <option
+              value={uri}
+              key={uri}
+            >
+              {uri}
+            </option>
           ))}
         </select>
       </p>
@@ -70,6 +75,7 @@ export function FsExample() {
 
         {files?.map(file => (
           <a
+            key={file.uri}
             href={'#'}
             onClick={event => {
               event.preventDefault();

diff --git a/web/example/src/examples/GoogleSignInExample.tsx b/web/example/src/examples/GoogleSignInExample.tsx
@@ -17,10 +17,9 @@ export function GoogleSignInExample() {
           />
         </p>
       )}
-      <p>
-        {'Account:'}
-        <FormattedJSON value={account} />
-      </p>
+      {'Account:'}
+      <FormattedJSON value={account} />
+      <p />
       <button
         onClick={() => {
           googleSignInManager.silentSignIn().then(setAccount);

diff --git a/web/example/src/examples/KeyboardExample.tsx b/web/example/src/examples/KeyboardExample.tsx
@@ -11,10 +11,8 @@ export function KeyboardExample() {
 
       <input placeholder={'Set focus here'} />
 
-      <p>
-        {'Status: '}
-        <FormattedJSON value={keyboardStatus} />
-      </p>
+      {'Status: '}
+      <FormattedJSON value={keyboardStatus} />
     </>
   );
 }
diff --git a/web/example/src/index.tsx b/web/example/src/index.tsx
@@ -4,6 +4,12 @@ import { App } from './App';
 import { eventBridge } from 'racehorse';
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
 
+if (process.env.NODE_ENV !== 'production') {
+  new EventSource('http://10.0.2.2:10001/esbuild').addEventListener('change', () => {
+    window.location.reload();
+  });
+}
+
 eventBridge.connect().then(() => {
   createRoot(document.body.appendChild(document.createElement('div'))).render(<App />);
 });
diff --git a/web/example/tsconfig.json b/web/example/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
+    "noEmit": true,
     "moduleResolution": "Node",
-    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
     "target": "ES5",
     "module": "ESNext",
-    "rootDir": ".",
-    "jsx": "react-jsx"
+    "jsx": "react"
   },
   "include": [
     "./src/**/*"

diff --git a/web/racehorse/package.json b/web/racehorse/package.json
@@ -39,6 +39,6 @@
   "homepage": "https://github.com/smikhalevski/racehorse#readme",
   "dependencies": {
     "locale-matcher": "^2.0.0",
-    "parallel-universe": "^5.0.1"
+    "parallel-universe": "^6.1.0"
   }
 }
diff --git a/web/react/package.json b/web/react/package.json
@@ -40,10 +40,10 @@
   "homepage": "https://github.com/smikhalevski/racehorse#readme",
   "peerDependencies": {
     "racehorse": "^1.5.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0"
+    "@testing-library/react": "^16.0.0"
   }
 }