chore: Remove references to observable-md

Update tests and web component. Signed-off-by: Gordon Smith <[email protected]>
hpcc-systems · Feb 16, 2024 · 2d3b676 · 2d3b676
1 parent 4c775be
commit 2d3b676
Show file tree

Hide file tree

Showing 21 changed files with 6,502 additions and 3,493 deletions.
diff --git a/components/observable/.vscode/launch.json b/components/observable/.vscode/launch.json
@@ -0,0 +1,52 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Dev",
+            "type": "chrome",
+            "request": "launch",
+            "url": "file:///${workspaceRoot}/index.html",
+            "runtimeArgs": [
+                "--allow-file-access-from-files",
+                "--disable-web-security"
+            ],
+            "webRoot": "${workspaceRoot}"
+        },
+        {
+            "name": "lws",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:8080/../packages/graph/index.html",
+            "runtimeArgs": [
+                "--allow-file-access-from-files",
+                "--disable-web-security"
+            ],
+            "webRoot": "${workspaceRoot}"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "index.md",
+            "url": "${workspaceFolder}/../../website/index.html?debug=1#packages/graph/docs/index.md",
+            "runtimeArgs": [
+                "--allow-file-access-from-files",
+                "--disable-web-security"
+            ],
+            "webRoot": "${workspaceFolder}/../../website"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "http index.md",
+            "url": "http://localhost:8080/${workspaceFolder}/../../website/index.html?debug=1#packages/graph/docs/index.md",
+            "runtimeArgs": [
+                "--allow-file-access-from-files",
+                "--disable-web-security"
+            ],
+            "webRoot": "${workspaceFolder}/../../website"
+        }
+    ]
+}
diff --git a/tests/test-observable-md/.vscode/tasks.json → components/observable/.vscode/tasks.json b/tests/test-observable-md/.vscode/tasks.json → components/observable/.vscode/tasks.json
diff --git a/components/observable/package.json b/components/observable/package.json
@@ -29,8 +29,9 @@
     "update": "npx --yes npm-check-updates -u -t minor"
   },
   "dependencies": {
-    "@hpcc-js/observable-md": "^2.54.18",
     "@hpcc-js/wc-core": "^0.4.10",
+    "@hpcc-js/observablehq-compiler": "^1.2.10",
+    "@observablehq/runtime": "5.9.7",
     "tslib": "2.6.2"
   },
   "repository": {
@@ -46,4 +47,4 @@
     "url": "https://github.com/hpcc-systems/Visualization/issues"
   },
   "homepage": "https://github.com/hpcc-systems/Visualization#readme"
-}
+}
diff --git a/components/observable/src/observable.ts b/components/observable/src/observable.ts
@@ -1,5 +1,6 @@
 import { ChangeMap, HPCCResizeElement, css, customElement, display, html, ref, attribute, property, WebComponent } from "@hpcc-js/wc-core";
-import { OJSRuntime, OMDRuntime, OJSRuntimeError, OJSSyntaxError } from "@hpcc-js/observable-md";
+import { compile, ojs2notebook, omd2notebook } from "@hpcc-js/observablehq-compiler";
+import { Inspector, Library, Runtime } from "@observablehq/runtime";
 import { IObserverHandle } from "@hpcc-js/util";
 
 const template = html<HPCCObservableElement>`\
@@ -71,13 +72,6 @@ export class HPCCObservableElement extends HPCCResizeElement {
 
     @property _content: string = "";
 
-    private _watcher: IObserverHandle;
-
-    private _errors: OJSRuntimeError[] = [];
-    protected errors(): OJSRuntimeError[] {
-        return this._errors;
-    }
-
     protected _div: HTMLDivElement;
     protected _slot: HTMLSlotElement;
 
@@ -105,80 +99,19 @@ export class HPCCObservableElement extends HPCCResizeElement {
         if (changes._content) {
             this._div.innerHTML = "";
 
-            const context = this;
-            const runtimeUpdated = throttle(function () {
-                context.runtimeUpdated();
-            }, 500);
-
-            const runtime = this.mode === "observablescript" ? new OJSRuntime(this._div, this.plugins) : new OMDRuntime(this._div, this.plugins);
-            if (this._watcher) {
-                this._watcher.release();
-            }
-
-            this._watcher = runtime.watch(async () => {
-                const vars = runtime.latest();
-                this._errors = vars.map(n => {
-                    const { start, end } = n.variable.pos();
-                    return new OJSRuntimeError(n.type, start, end, stringify(n.value));
+            const nb = this.mode === "observablescript" ? ojs2notebook(this._content) : omd2notebook(this._content);
+            compile(nb).then(compiledNB => {
+                const library = new Library();
+                const runtime = new Runtime(library);
+                compiledNB(runtime, name => {
+                    const div = document.createElement("div");
+                    this._div.appendChild(div);
+                    return new Inspector(div);
                 });
-                runtimeUpdated();
             });
 
-            runtime.evaluate("", this._content, ".")
-                .catch((e: OJSSyntaxError) => {
-                    this._errors = [new OJSRuntimeError("error", e.start, e.end, e.message)];
-                    this.runtimeUpdated();
-                });
         }
     }
-
-    //  Events  ---
-    runtimeUpdated() {
-    }
-
-}
-
-function throttle(func, interval) {
-    let timeout;
-    return function (this) {
-        const context = this;
-        const args = arguments;
-        const later = function () {
-            timeout = false;
-        };
-        if (!timeout) {
-            func.apply(context, args);
-            timeout = true;
-            setTimeout(later, interval);
-        }
-    };
-}
-
-function stringify(value: any): string {
-    if (value instanceof Element) {
-        return value.outerHTML;
-    }
-    const type = typeof value;
-    switch (type) {
-        case "function":
-            return "ƒ()";
-        case "object":
-            if (Array.isArray(value)) {
-                return "[Array]";
-            }
-            break;
-        case "string":
-        case "number":
-        case "bigint":
-        case "boolean":
-        case "symbol":
-        case "undefined":
-            break;
-    }
-    if (value?.toString) {
-        return value.toString();
-    }
-    return value;
 }
 
 declare global {

diff --git a/demos/storyboard/package.json b/demos/storyboard/package.json
@@ -41,7 +41,6 @@
         "@hpcc-js/layout": "^2.49.13",
         "@hpcc-js/map": "^2.77.12",
         "@hpcc-js/marshaller": "^2.25.31",
-        "@hpcc-js/observable-md": "^2.54.14",
         "@hpcc-js/other": "^2.15.13",
         "@hpcc-js/phosphor": "^2.17.0",
         "@hpcc-js/util": "^2.50.6"