chore(developer): add react/parcel 🗼

- add React 19 - parcel builds into build/ which is picked up by the app Fixes: #12789
keymanapp · Dec 10, 2024 · ac57afe · ac57afe
1 parent e7bf987
commit ac57afe
Show file tree

Hide file tree

Showing 9 changed files with 3,523 additions and 216 deletions.
diff --git a/developer/src/vscode-plugin/.gitignore b/developer/src/vscode-plugin/.gitignore
@@ -4,3 +4,5 @@ node_modules
 .vscode-test/
 *.vsix
 !.vscode
+/.parcel-cache
+/build
diff --git a/developer/src/vscode-plugin/app/App.css b/developer/src/vscode-plugin/app/App.css
@@ -0,0 +1,3 @@
+.App {
+  text-align: center;
+}
diff --git a/developer/src/vscode-plugin/app/App.tsx b/developer/src/vscode-plugin/app/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import './App.css';
+
+let a : number = 3;
+
+function count() : number {
+  return (++a);
+}
+
+function App() {
+  return (
+    <div className="App">
+      Hello world!! 2+2 = ${count()}
+    </div>
+  );
+}
+
+export default App;
diff --git a/developer/src/vscode-plugin/app/index.html b/developer/src/vscode-plugin/app/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Editor</title>
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <div id="root" />
+</body>
+
+</html>
diff --git a/developer/src/vscode-plugin/app/index.js b/developer/src/vscode-plugin/app/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+// bootstrap react app
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/developer/src/vscode-plugin/build.sh b/developer/src/vscode-plugin/build.sh
@@ -24,7 +24,7 @@ builder_describe_outputs \
 
 builder_parse "$@"
 
-builder_run_action clean           rm -rf ./out/ ./tsconfig.tsbuildinfo .vscode-test
+builder_run_action clean           rm -rf ./out/ ./tsconfig.tsbuildinfo .vscode-test ./build .parcel-cache
 builder_run_action configure       verify_npm_setup
 builder_run_action build           npm run compile
 builder_run_action test            npm test

diff --git a/developer/src/vscode-plugin/package.json b/developer/src/vscode-plugin/package.json
@@ -30,26 +30,37 @@
   },
   "scripts": {
     "vscode:prepublish": "npm run compile",
-    "compile": "tsc -b ./",
+    "compile": "tsc -b ./ && npm run build",
     "watch": "tsc -watch -b ./",
     "pretest": "npm run compile && npm run lint",
     "lint": "eslint src",
     "test": "echo use 'ui-test' to run the test - TODO-LDML-EDITOR",
-    "ui-test": "vscode-test"
+    "ui-test": "vscode-test",
+    "build": "parcel build --target=default --cache-dir=.parcel-cache --no-content-hash"
   },
   "devDependencies": {
     "@types/mocha": "^10.0.0",
     "@types/node": "20.4.1",
     "@types/vscode": "^1.93.0",
     "@vscode/test-cli": "^0.0.10",
-    "@vscode/test-electron": "^2.4.1"
+    "@vscode/test-electron": "^2.4.1",
+    "parcel": "^2.13.2"
   },
   "license": "MIT",
   "dependencies": {
     "@keymanapp/common-types": "*",
     "@keymanapp/developer-utils": "*",
     "@keymanapp/kmc-kmn": "*",
     "@keymanapp/kmc-ldml": "*",
-    "@keymanapp/kmc-package": "*"
+    "@keymanapp/kmc-package": "*",
+    "process": "^0.11.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "targets": {
+    "default": {
+      "source": "app/index.html",
+      "distDir": "./build"
+    }
   }
 }
diff --git a/developer/src/vscode-plugin/src/ldmleditor.ts b/developer/src/vscode-plugin/src/ldmleditor.ts
@@ -100,7 +100,9 @@ export class LdmlEditorProvider implements vscode.CustomTextEditorProvider {
 
         const { webview } = webviewPanel;
 
-        const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'ldml.css'));
+        // these are fixed IDs as parcel is set to not do content hashing
+        const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'build', 'index.89a9d63e.css'));
+        const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'build', 'index.2f8490e0.js'));
 
         const nonce = crypto.randomUUID().toString();
 
@@ -111,22 +113,22 @@ export class LdmlEditorProvider implements vscode.CustomTextEditorProvider {
 			<head>
 				<meta charset="UTF-8">
 
-
 				<!--
 				Use a content security policy to only allow loading images from https or from our extension directory,
 				and only allow scripts that have a specific nonce.
 				-->
 				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 
-                <link href="${styleMainUri}" rel="stylesheet" />
+                <link href="${styleUri}" rel="stylesheet" />
 
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
                 <title>LDML</title>
             </head>
             <body>
-                <h1>Hello, World! </h1>
-                <pre>${document.getText().replaceAll('<', '&lt;').trim()}</pre>
+                <noscript>JavaScript is required for this application…</noscript>
+                <div id="root"></div>
+                <script nonce="${nonce}" src="${scriptUri}"></script>
             </body>
             </html>
         `.trim();