@hpcc-js/observablehq-compiler 1.1.0

package/src/cst.ts

@@ -0,0 +1,172 @@
+import { parseCell as ohqParseCell, ancestor, walk } from "@hpcc-js/observable-shim";
+import { createFunction, Refs } from "./util";
+
+function calcRefs(cellAst, cellStr): Refs {
+    if (cellAst.references === undefined) return { inputs: [], args: [], patches: [] };
+
+    const dedup = {};
+    cellAst.references.forEach(r => dedup[cellStr.substring(r.start, r.end)] = true);
+    const retVal: Refs = {
+        inputs: Object.keys(dedup),
+        args: Object.keys(dedup).map(r => r.split(" ").join("_")),
+        patches: []
+    };
+    const pushPatch = (node, newText) => retVal.patches.push({ start: node.start - cellAst.body.start, end: node.end - cellAst.body.start, newText });
+    if (cellAst.body) {
+        ancestor(cellAst.body, {
+            Identifier(node) {
+                const value = cellStr.substring(node.start, node.end);
+                if (dedup[value]) {
+                }
+            },
+            MutableExpression(node) {
+                const value = cellStr.substring(node.start, node.end);
+                const newText = value.split(" ").join("_") + ".value";
+                pushPatch(node, newText);
+            },
+            ViewExpression(node) {
+                const value = cellStr.substring(node.start, node.end);
+                const newText = value.split(" ").join("_");
+                pushPatch(node, newText);
+            },
+            ThisExpression(node, ancestors: acorn.Node[]) {
+                const value = cellStr.substring(node.start, node.end);
+                if (value === "this" && !ancestors.find(n => n.type === "FunctionExpression")) {
+                    pushPatch(node, "((this === globalThis || this === globalThis.window)? undefined : this?.valueOf())");
+                }
+            }
+        }, walk);
+    }
+    return retVal;
+}
+
+export interface ParsedCell {
+    type: "import" | "viewof" | "mutable" | "variable" | "identifier"
+}
+
+export interface ParsedImportCell extends ParsedCell {
+    type: "import"
+    src: string;
+    specifiers: { view: boolean, name: string, alias?: string }[];
+    injections: { name: string, alias: string }[];
+}
+
+function parseImportExpression(cellAst): ParsedImportCell {
+    return {
+        type: "import",
+        src: cellAst.body.source.value,
+        specifiers: cellAst.body.specifiers?.map(spec => {
+            return {
+                view: spec.view,
+                name: spec.imported.name,
+                alias: (spec.local?.name && spec.imported.name !== spec.local.name) ? spec.local.name : spec.imported.name
+            };
+        }) ?? [],
+        injections: cellAst.body.injections?.map(inj => {
+            return {
+                name: inj.imported.name,
+                alias: inj.local?.name ?? inj.imported.name
+            };
+        }) ?? [],
+    };
+}
+
+export interface ParsedVariable extends ParsedCell {
+    type: "variable"
+    id?: string,
+    inputs: string[],
+    func: any,
+}
+
+export interface ParsedViewCell extends ParsedCell {
+    type: "viewof",
+    variable: ParsedVariable;
+    variableValue: ParsedVariable;
+}
+
+function parseViewExpression(cellStr: string, cellAst, refs: Refs, bodyStr?: string): ParsedViewCell {
+    const id = cellAst.id && cellStr.substring(cellAst.id.start, cellAst.id.end);
+    return {
+        type: "viewof",
+        variable: {
+            type: "variable",
+            id,
+            inputs: refs.inputs,
+            func: createFunction(refs, cellAst.async, cellAst.generator, cellAst.body.type === "BlockStatement", bodyStr)
+        },
+        variableValue: {
+            type: "variable",
+            id: cellAst?.id?.id?.name,
+            inputs: ["Generators", id],
+            func: (G, _) => G.input(_)
+        }
+    };
+}
+
+interface ParsedMutableCell extends ParsedCell {
+    type: "mutable",
+    initial: ParsedVariable;
+    variable: ParsedVariable;
+    variableValue: ParsedVariable;
+}
+
+function parseMutableExpression(cellStr: string, cellAst, refs: Refs, bodyStr?: string): ParsedMutableCell {
+    const id = cellAst.id && cellStr.substring(cellAst.id.start, cellAst.id.end);
+    const initialValueId = cellAst?.id?.id?.name;
+    const initialId = `initial ${initialValueId}`;
+    return {
+        type: "mutable",
+        initial: {
+            type: "variable",
+            id: initialId,
+            inputs: refs.inputs,
+            func: createFunction(refs, cellAst.async, cellAst.generator, cellAst.body.type === "BlockStatement", bodyStr)
+        },
+        variable: {
+            type: "variable",
+            id,
+            inputs: ["Mutable", initialId],
+            func: (M, _) => new M(_)
+        },
+        variableValue: {
+            type: "variable",
+            id: initialValueId,
+            inputs: [id],
+            func: _ => _.generator
+        }
+    };
+}
+
+interface ParsedVariableCell extends ParsedCell {
+    type: "variable",
+    id: string,
+    inputs: string[],
+    func: any,
+}
+
+function parseVariableExpression(cellStr: string, cellAst, refs: Refs, bodyStr?: string): ParsedVariableCell {
+    return {
+        type: "variable",
+        id: cellAst.id && cellStr.substring(cellAst.id?.start, cellAst.id?.end),
+        inputs: refs.inputs,
+        func: createFunction(refs, cellAst.async, cellAst.generator, cellAst.body.type === "BlockStatement", bodyStr)
+    };
+}
+
+export function parseCell(cellStr: string): ParsedImportCell | ParsedViewCell | ParsedMutableCell | ParsedVariableCell {
+    const cellAst = ohqParseCell(cellStr);
+    if ((cellAst.body)?.type == "ImportDeclaration") {
+        return parseImportExpression(cellAst);
+    }
+    const refs = calcRefs(cellAst, cellStr);
+
+    const bodyStr = cellAst.body && cellStr.substring(cellAst.body.start, cellAst.body.end);
+    switch (cellAst.id?.type) {
+        case "ViewExpression":
+            return parseViewExpression(cellStr, cellAst, refs, bodyStr);
+        case "MutableExpression":
+            return parseMutableExpression(cellStr, cellAst, refs, bodyStr);
+        default:
+            return parseVariableExpression(cellStr, cellAst, refs, bodyStr);
+    }
+}

package/src/index.css

@@ -0,0 +1,460 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
+
+:root {
+    --syntax-normal: #1b1e23;
+    --syntax-comment: #828282;
+    --syntax-number: #20a5ba;
+    --syntax-keyword: #c30771;
+    --syntax-atom: #10a778;
+    --syntax-string: #008ec4;
+    --syntax-error: #ffbedc;
+    --syntax-unknown-variable: #838383;
+    --syntax-known-variable: #005f87;
+    --syntax-matchbracket: #20bbfc;
+    --syntax-key: #6636b4;
+    --mono-fonts: 82%/1.5 Menlo, Consolas, monospace;
+}
+
+.observablehq--expanded,
+.observablehq--collapsed,
+.observablehq--function,
+.observablehq--import,
+.observablehq--string:before,
+.observablehq--string:after,
+.observablehq--gray {
+    color: var(--syntax-normal);
+}
+
+.observablehq--collapsed,
+.observablehq--expanded.observablehq--inspect a {
+    cursor: pointer;
+}
+
+.observablehq--field {
+    text-indent: -1em;
+    margin-left: 1em;
+}
+
+.observablehq--empty {
+    color: var(--syntax_comment);
+}
+
+a[href],
+.observablehq--keyword,
+.observablehq--blue {
+    color: #3182bd;
+}
+
+.hljs-deletion,
+.hljs-variable,
+.observablehq--forbidden,
+.observablehq--pink {
+    color: #e377c2;
+}
+
+.observablehq--orange {
+    color: #e6550d;
+}
+
+.observablehq--null,
+.observablehq--undefined,
+.observablehq--boolean,
+.hljs-literal {
+    color: var(--syntax-atom);
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-bullet,
+.hljs-link,
+.observablehq--bigint,
+.observablehq--number,
+.observablehq--date,
+.observablehq--regexp,
+.observablehq--symbol,
+.observablehq--green {
+    color: var(--syntax-number);
+}
+
+.observablehq--index,
+.observablehq--key {
+    color: var(--syntax-key);
+}
+
+.observablehq--prototype-key {
+    color: #aaa;
+}
+
+.observablehq--empty {
+    font-style: oblique;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-symbol,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition,
+.observablehq--string,
+.observablehq--purple {
+    color: var(--syntax-string);
+}
+
+.observablehq--error,
+.observablehq--red {
+    color: #e7040f;
+}
+
+.observablehq:empty:after,
+.observablehq>link:only-child,
+.observablehq>style:only-child,
+.observablehq--inspect {
+    font: var(--monospace-font);
+    overflow-x: auto;
+    display: block;
+    padding: 4px 0;
+    white-space: pre;
+}
+
+.observablehq--error .observablehq--inspect {
+    word-break: break-all;
+    white-space: pre-wrap;
+}
+
+:root {
+    --syntax-diff: #24292e;
+    --syntax-diff-bg: #ffffff;
+    --hr: rgba(0, 0, 0, 0.05);
+    --monospace: Menlo, Consolas, monospace;
+    --monospace-font: 14px/1.5 var(--monospace);
+    --serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
+        "Palatino Linotype", "Times New Roman", "Droid Serif", Times, serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
+        helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
+        sans-serif;
+}
+
+html {
+    font: 17px/1.5 var(--serif);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #1b1e23;
+}
+
+body {
+    margin: 0 14px;
+}
+
+body.fullscreen {
+    margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: #333;
+    font-weight: 700;
+    line-height: 1.15;
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+}
+
+h2~p,
+h3~p,
+h4~p,
+h2~table,
+h3~table,
+h4~table {
+    margin-top: 0;
+}
+
+.observablehq:first-of-type h1+h2 {
+    font-size: 20px;
+    font-style: italic;
+    font-weight: normal;
+    margin-bottom: 1rem;
+    /* see h2 ~ p */
+}
+
+a[href] {
+    text-decoration: none;
+}
+
+a[href]:hover {
+    text-decoration: underline;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+    font-size: 90%;
+}
+
+pre,
+code,
+tt {
+    font-family: var(--monospace);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+img {
+    max-width: calc(100vw - 28px);
+}
+
+p,
+table,
+figure,
+figcaption,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.katex-display {
+    max-width: 640px;
+}
+
+blockquote,
+ol,
+ul {
+    max-width: 600px;
+}
+
+blockquote {
+    margin: 1rem 1.5rem;
+}
+
+ul,
+ol {
+    padding-left: 28px;
+}
+
+hr {
+    height: 1px;
+    margin: 1rem 0;
+    padding: 1rem 0;
+    border: none;
+    background: no-repeat center/100% 1px linear-gradient(to right, var(--hr), var(--hr));
+}
+
+pre {
+    padding: 2px 0;
+}
+
+.observablehq--md-pre {
+    overflow-x: auto;
+}
+
+input:not([type]),
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="range"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"] {
+    width: 240px;
+}
+
+input,
+canvas,
+button {
+    vertical-align: middle;
+}
+
+button,
+input,
+textarea {
+    accent-color: #3b5fc0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font: 13px/1.2 var(--sans-serif);
+}
+
+table pre,
+table code,
+table tt {
+    font-size: inherit;
+    line-height: inherit;
+}
+
+th>pre:only-child,
+td>pre:only-child {
+    margin: 0;
+    padding: 0;
+}
+
+th {
+    color: #111;
+    text-align: left;
+    vertical-align: bottom;
+}
+
+td {
+    color: #444;
+    vertical-align: top;
+}
+
+th,
+td {
+    padding: 3px 6.5px 3px 0;
+}
+
+th:last-child,
+td:last-child {
+    padding-right: 0;
+}
+
+tr:not(:last-child) {
+    border-bottom: solid 1px #eee;
+}
+
+thead tr {
+    border-bottom: solid 1px #ccc;
+}
+
+figure,
+table {
+    margin: 1rem 0;
+}
+
+figure img {
+    max-width: 100%;
+}
+
+figcaption {
+    font: small var(--sans-serif);
+    color: var(--syntax-unknown-variable);
+}
+
+.observablehq--caret {
+    margin-right: 4px;
+    vertical-align: baseline;
+}
+
+.observablehq--field {
+    text-indent: -1rem;
+    margin-left: 1rem;
+}
+
+.observablehq--prototype-key,
+.observablehq--empty,
+.hljs-comment {
+    color: var(--syntax-comment);
+}
+
+.hljs-built_in {
+    color: var(--syntax-known-variable);
+}
+
+.observablehq--unknown {
+    color: var(--syntax-unknown-variable);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-strong {
+    color: var(--syntax-keyword);
+}
+
+.observablehq {
+    position: relative;
+    margin: 17px 0;
+    min-height: 1.5rem;
+    /* the standard line-height */
+}
+
+.observablehq:before {
+    content: "";
+    position: absolute;
+    left: -14px;
+    top: 0;
+    bottom: 1px;
+    width: 4px;
+    transition: background-color 250ms linear;
+}
+
+.observablehq--running:before,
+.observablehq--changed:before {
+    background-color: hsl(217, 13%, 70%);
+    transition: none;
+}
+
+.observablehq--error:before {
+    background-color: #e7040f;
+}
+
+.observablehq:not(.observablehq--running):empty:after {
+    content: "<detached>";
+    color: var(--syntax-comment);
+    font-style: oblique;
+}
+
+.observablehq>link:only-child,
+.observablehq>style:only-child {
+    visibility: hidden;
+    white-space: nowrap;
+    color: var(--syntax-keyword);
+}
+
+.observablehq>link:only-child:before {
+    content: "<link>";
+    visibility: visible;
+    text-decoration: none;
+    pointer-events: none;
+}
+
+.observablehq>style:only-child:before {
+    content: "<style>";
+    visibility: visible;
+}
+
+.observablehq--inspect.observablehq--import {
+    white-space: normal;
+}
+
+.observablehq--inspect::-webkit-scrollbar {
+    display: none;
+}
+
+.observablehq--string-expand {
+    margin-left: 6px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 80%;
+    background: #eee;
+    color: var(--syntax-normal);
+    cursor: pointer;
+    vertical-align: middle;
+    position: sticky;
+    right: 0;
+}
+
+.observablehq--string-expand:hover {
+    background: #ddd;
+}
+
+.observablehq--string-expand:active {
+    background: #ddd;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export type { ohq } from "@hpcc-js/observable-shim";
+
+export * from "./compiler";
+export { ojs2notebook, omd2notebook, download } from "./util";
+export * from "./writer";
+
+import "../src/index.css";