diff --git a/developer/src/vscode-plugin/.gitignore b/developer/src/vscode-plugin/.gitignore
index 890b4c93da8..9b9ed8610eb 100644
--- 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
new file mode 100644
index 00000000000..493161332b3
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..f109b9973be
--- /dev/null
+++ 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 (
+
+ Hello world!! 2+2 = ${count()}
+
+ );
+}
+
+export default App;
diff --git a/developer/src/vscode-plugin/app/index.html b/developer/src/vscode-plugin/app/index.html
new file mode 100644
index 00000000000..6bdf5f16289
--- /dev/null
+++ b/developer/src/vscode-plugin/app/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Editor
+
+
+
+
+
+
+
+
diff --git a/developer/src/vscode-plugin/app/index.js b/developer/src/vscode-plugin/app/index.js
new file mode 100644
index 00000000000..3e6650df5de
--- /dev/null
+++ 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(
+
+
+
+);
diff --git a/developer/src/vscode-plugin/build.sh b/developer/src/vscode-plugin/build.sh
index 84824e51bae..5ea90a0f314 100755
--- 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
index f47393d4d1a..d76597388ff 100644
--- a/developer/src/vscode-plugin/package.json
+++ b/developer/src/vscode-plugin/package.json
@@ -30,19 +30,21 @@
},
"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": {
@@ -50,6 +52,15 @@
"@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
index 77d48e3fa98..f211e11cdd1 100644
--- 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 {
-
-
+
LDML
- Hello, World!
- ${document.getText().replaceAll('<', '<').trim()}
+
+
+