chore(developer): add react/parcel 🗼

- Glued in now. Or at least duct taped. - parcel builds into build/ which is picked up by the app Fixes: #12789
keymanapp · Dec 5, 2024 · 8f354f7 · 8f354f7
1 parent 6c62ecc
commit 8f354f7
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/developer/src/vscode-plugin/app/App.tsx b/developer/src/vscode-plugin/app/App.tsx
@@ -1,9 +1,16 @@
+import React from 'react';
 import './App.css';
 
+let a : number = 3;
+
+function count() : number {
+  return (++a);
+}
+
 function App() {
   return (
     <div className="App">
-      Hello world!
+      Hello world!! 2+2 = ${count()}
     </div>
   );
 }

diff --git a/developer/src/vscode-plugin/build.sh b/developer/src/vscode-plugin/build.sh
@@ -23,7 +23,7 @@ builder_describe_outputs \
 builder_parse "$@"
 
 function do_clean() {
-  rm -rf ./out/ ./tsconfig.tsbuildinfo .vscode-test
+  rm -rf ./out/ ./tsconfig.tsbuildinfo .vscode-test ./build .parcel-cache
 }
 
 function do_configure() {

diff --git a/developer/src/vscode-plugin/package.json b/developer/src/vscode-plugin/package.json
@@ -52,7 +52,7 @@
     "pretest": "npm run compile && npm run build && npm run lint",
     "lint": "eslint src",
     "test": "vscode-test",
-    "build": "parcel build --target=default --cache-dir=.parcel-cache"
+    "build": "parcel build --target=default --cache-dir=.parcel-cache --no-content-hash"
   },
   "devDependencies": {
     "@types/mocha": "^10.0.0",
@@ -69,10 +69,10 @@
     "@keymanapp/kmc-kmn": "file:../kmc-kmn",
     "@keymanapp/kmc-ldml": "file:../kmc-ldml",
     "@keymanapp/kmc-package": "file:../kmc-package",
+    "process": "^0.11.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
   "targets": {
     "default": {
       "source": "app/index.html",

diff --git a/developer/src/vscode-plugin/src/ldmleditor.ts b/developer/src/vscode-plugin/src/ldmleditor.ts
@@ -100,9 +100,9 @@ export class LdmlEditorProvider implements vscode.CustomTextEditorProvider {
 
         const { webview } = webviewPanel;
 
-        const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'ldmleditor.css'));
-        // const manifest = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'build', 'asset-manifest.json'));
-        const mainScript = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'build', 'main.js'));
+        // 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();
 
@@ -113,14 +113,13 @@ 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">
 
@@ -129,10 +128,7 @@ export class LdmlEditorProvider implements vscode.CustomTextEditorProvider {
             <body>
                 <noscript>JavaScript is required for this application…</noscript>
                 <div id="root"></div>
-                <!-- <h1>Hello, World! </h1>
-                 <pre>${document.getText().replaceAll('<', '&lt;').trim()}</pre>
-                   -->
-                <script nonce="${nonce}" src="${mainScript}"></script>
+                <script nonce="${nonce}" src="${scriptUri}"></script>
             </body>
             </html>
         `.trim();

diff --git a/package-lock.json b/package-lock.json