feat(developer): prototype of ldml visual editor 🗼

developer/src/kmc/src/util/NodeCompilerCallbacks.ts

@@ -193,6 +193,11 @@ export class NodeCompilerCallbacks implements CompilerCallbacks {
     this.printMessage(event);
   }
 
+  /** Bottleneck for output */
+  protected writeString(str: string) {
+    process.stdout.write(str);
+  }
+
   private printMessage(event: CompilerEvent) {
     if(this.options.logFormat == 'tsv') {
       this.printTsvMessage(event);
@@ -202,7 +207,7 @@ export class NodeCompilerCallbacks implements CompilerCallbacks {
   }
 
   private printTsvMessage(event: CompilerEvent) {
-    process.stdout.write([
+    this.writeString([
       CompilerError.formatFilename(event.filename, {fullPath:true, forwardSlashes:false}),
       CompilerError.formatLine(event.line),
       CompilerError.formatSeverity(event.code),
@@ -214,7 +219,7 @@ export class NodeCompilerCallbacks implements CompilerCallbacks {
   private printFormattedMessage(event: CompilerEvent) {
     const severityColor = severityColors[CompilerError.severity(event.code)] ?? color.reset;
     const messageColor = this.messageSpecialColor(event) ?? color.reset;
-    process.stdout.write(
+    this.writeString(
       (
         event.filename
         ? color.cyan(CompilerError.formatFilename(event.filename)) +
@@ -228,7 +233,7 @@ export class NodeCompilerCallbacks implements CompilerCallbacks {
 
     if(event.code == InfrastructureMessages.INFO_ProjectBuiltSuccessfully) {
       // Special case: we'll add a blank line after project builds
-      process.stdout.write('\n');
+      this.writeString('\n');
     }
   }
 

developer/src/vscode-plugin/.gitignore

@@ -4,3 +4,5 @@ node_modules
 .vscode-test/
 *.vsix
 !.vscode
+/.parcel-cache
+/build

developer/src/vscode-plugin/.parcelrc

@@ -0,0 +1,6 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+      "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+    }
+}

developer/src/vscode-plugin/.vscode-test.mjs

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vscode/test-cli';
 
 export default defineConfig({
-	files: 'out/test/**/*.test.js',
+	files: 'out/test/**/*.tests.js',
 });

developer/src/vscode-plugin/README.md

@@ -21,8 +21,7 @@ There is also a `build.sh` which works the usual way.
 
 - Open this directory (`vscode-plugin`) in VSCode
 - From the Run and Debug toolbar, click Run Extension
-- A terminal will automatically open with `npm run watch` recompiling the project.
-- Choose a directory containing a .kpj file, and choose the **Terminal > Run Task…** menu item, or the **Tasks: Run Task** command.   Select "kpj" and the name, and the compilation should occur in a terminal window.
+- Choose a directory containing an .xml LDML file
 
 - You can use the **Developer: Reload Window** command to reload the `[extension development]` window with a new version of the plugin.
 

developer/src/vscode-plugin/app/App.css

@@ -0,0 +1,64 @@
+/*
+ * Keyman is copyright (C) SIL Global. MIT License.
+ */
+
+.App pre.code {
+  text-align: left;
+
+}
+
+.Key {
+  margin: 0.25em;
+  display: flow flex-shrink;
+  flex-grow: 1;
+  flex-basis: 3em;
+  white-space-collapse: preserve-spaces;
+  border: 2px solid gray;
+  border-radius: 0.25em;
+  background-color: azure;
+  padding: 0.25em;
+}
+
+.chosenKey {
+  background-color: navy;
+  color: white;
+}
+
+/*
+kbd.unchosenKey {
+}
+*/
+
+/* .keyBagContainer {
+  border: 2px solid blue;
+} */
+
+.keyList, .repertoire {
+  border: 1px solid gray;
+  padding: 0.25em;
+  width: 50em;
+  height: 11em;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+}
+
+.repertoireItem {
+  padding: 1em;
+  background-color: gainsboro;
+  margin: 0.25em;
+  vertical-align: middle;
+  box-shadow: .15em .15em gray;
+  border: 2px solid gray;
+  font-size: large;
+  display: flow flex-shrink;
+  flex-grow: 1;
+  flex-basis: 1em;
+  white-space-collapse: preserve-spaces;
+}
+
+.layoutRow {
+  display: flex;
+  width: fit-content;
+}
+