@hpcc-js/markdown-it-plugins 1.5.5 → 1.5.6

package/src/render.ts

@@ -1,63 +1,63 @@
-import { Runtime, Library, Inspector as BaseInspector } from "@observablehq/runtime";
-import { compile, type ohq } from "@hpcc-js/observablehq-compiler";
-import { FenceInfo, renderExecutedSrc } from "./util.ts";
-
-class Inspector extends BaseInspector {
-
-    constructor(protected placeholder: HTMLElement) {
-        super(placeholder);
-    }
-
-    pending() {
-        super.pending();
-    }
-
-    fulfilled(value: any, _name?: string) {
-        switch (typeof value) {
-            case "string":
-                this.placeholder.innerText = value;
-                break;
-            default:
-                super.fulfilled(value);
-        }
-    }
-
-    rejected(error: Error) {
-        super.rejected(error);
-    }
-}
-
-export interface RenderNode extends FenceInfo {
-    id: string;
-    content: string;
-    innerHTML?: string;
-}
-
-export async function render(nodes: RenderNode[]) {
-    const displayIndex: { [key: string]: boolean } = {};
-    const nb: ohq.Notebook = { nodes: [], files: [] };
-    for (const node of nodes) {
-        nb.nodes.push({
-            id: node.id,
-            name: node.id,
-            mode: "js",
-            value: node.content
-        });
-        displayIndex[node.id] = renderExecutedSrc(node);
-    }
-    const define = await compile(nb);
-    const runtime = new Runtime(new Library());
-    runtime.module(define, () => {
-        define(runtime, (_name: string | undefined, id: string | number) => {
-            const placeholder = globalThis?.document?.getElementById("" + id);
-            if (placeholder && displayIndex[id]) {
-                return new Inspector(placeholder);
-            }
-            return {
-                pending() { },
-                fulfilled(_value: any, _name?: string) { },
-                rejected(_error: any, _name?: string) { }
-            };
-        });
-    });
-}
+import { Runtime, Library, Inspector as BaseInspector } from "@observablehq/runtime";
+import { compile, type ohq } from "@hpcc-js/observablehq-compiler";
+import { FenceInfo, renderExecutedSrc } from "./util.ts";
+
+class Inspector extends BaseInspector {
+
+    constructor(protected placeholder: HTMLElement) {
+        super(placeholder);
+    }
+
+    pending() {
+        super.pending();
+    }
+
+    fulfilled(value: any, _name?: string) {
+        switch (typeof value) {
+            case "string":
+                this.placeholder.innerText = value;
+                break;
+            default:
+                super.fulfilled(value);
+        }
+    }
+
+    rejected(error: Error) {
+        super.rejected(error);
+    }
+}
+
+export interface RenderNode extends FenceInfo {
+    id: string;
+    content: string;
+    innerHTML?: string;
+}
+
+export async function render(nodes: RenderNode[]) {
+    const displayIndex: { [key: string]: boolean } = {};
+    const nb: ohq.Notebook = { nodes: [], files: [] };
+    for (const node of nodes) {
+        nb.nodes.push({
+            id: node.id,
+            name: node.id,
+            mode: "js",
+            value: node.content
+        });
+        displayIndex[node.id] = renderExecutedSrc(node);
+    }
+    const define = await compile(nb);
+    const runtime = new Runtime(new Library());
+    runtime.module(define, () => {
+        define(runtime, (_name: string | undefined, id: string | number) => {
+            const placeholder = globalThis?.document?.getElementById("" + id);
+            if (placeholder && displayIndex[id]) {
+                return new Inspector(placeholder);
+            }
+            return {
+                pending() { },
+                fulfilled(_value: any, _name?: string) { },
+                rejected(_error: any, _name?: string) { }
+            };
+        });
+    });
+}

package/src/template-literal.ts

@@ -1,113 +1,113 @@
-import type MarkdownIt from "markdown-it";
-import type { Options } from "markdown-it";
-import type Token from "markdown-it/lib/token.mjs";
-import type Renderer from "markdown-it/lib/renderer.mjs";
-import type { RuleCore } from "markdown-it/lib/parser_core.mjs";
-import type { RuleInline } from "markdown-it/lib/parser_inline.mjs";
-import { generatePlaceholders } from "./util.ts";
-
-function renderObservable(tokens: Token[], idx: number, _options: Options, env: any, _self: Renderer) {
-    return generatePlaceholders(tokens[idx].content, { type: "js", exec: true }, env);
-}
-
-const DOLLAR = 0x24;
-const CURLEY_OPEN = 0x7B;
-const CURLEY_CLOSE = 0x7D;
-
-function* parsePlaceholderInline(src: string, pos: number = 0, posMax: number = src.length) {
-    if (src.charCodeAt(pos) === DOLLAR && src.charCodeAt(pos + 1) === CURLEY_OPEN) {
-        pos += 2;
-
-        const observableStart = pos;
-        let nestedCurly = 0;
-        let done = false;
-        while (!done && pos < posMax) {
-            switch (src.charCodeAt(pos)) {
-                case CURLEY_OPEN:
-                    nestedCurly++;
-                    break;
-                case CURLEY_CLOSE:
-                    if (nestedCurly === 0) {
-                        done = true;
-                        --pos;
-                    } else {
-                        nestedCurly--;
-                    }
-                    break;
-            }
-            pos++;
-        }
-        const observableEnd = pos;
-        if (pos >= posMax || observableStart == observableEnd) return;
-        if (src.charCodeAt(pos) !== CURLEY_CLOSE) return;
-        pos++;
-
-        const observableJs = src.slice(observableStart, observableEnd).trim();
-        yield { type: "placeholder", content: observableJs, pos };
-    }
-}
-
-function* parsePlaceholderBlock(src: string) {
-    let pos = 0;
-    let prevPos = 0;
-    const posMax = src.length;
-    while (pos < posMax) {
-        if (src.charCodeAt(pos) === DOLLAR && src.charCodeAt(pos + 1) === CURLEY_OPEN) {
-            yield ({ type: "html_block", content: src.slice(prevPos, pos) });
-            for (const placeholder of parsePlaceholderInline(src, pos, posMax)) {
-                yield placeholder;
-                pos = placeholder.pos;
-                prevPos = pos;
-            }
-        } else {
-            pos++;
-        }
-    }
-    if (pos > prevPos) {
-        yield ({ type: "html_block", content: src.slice(prevPos, pos) });
-    }
-}
-
-const transformPlaceholderInline: RuleInline = (state, silent) => {
-    if (silent || state.pos + 2 > state.posMax) return false;
-    const marker1 = state.src.charCodeAt(state.pos);
-    const marker2 = state.src.charCodeAt(state.pos + 1);
-    if (marker1 !== DOLLAR || marker2 !== CURLEY_OPEN) return false;
-    for (const { type, content, pos } of parsePlaceholderInline(state.src, state.pos, state.posMax)) {
-        if (type !== "placeholder") break;
-        const token = state.push(type, "", 0);
-        token.content = content;
-        state.pos = pos;
-        return true;
-    }
-    return false;
-};
-
-const transformPlaceholderCore: RuleCore = (state) => {
-    const { tokens } = state;
-    for (let i = 0, n = tokens.length; i < n; ++i) {
-        const token = tokens[i];
-        if (token.type === "html_block") {
-            const children: Token[] = [];
-            for (const { type, content } of parsePlaceholderBlock(token.content)) {
-                const child = new state.Token(type, "", 0);
-                child.content = content;
-                children.push(child);
-            }
-            if (children.length === 1 && children[0].type === "html_block") {
-                tokens[i].content = children[0].content;
-            } else {
-                const inline = new state.Token("inline", "", 0);
-                inline.children = children;
-                tokens[i] = inline;
-            }
-        }
-    }
-};
-
-export function hookTemplateLiterals(md: MarkdownIt) {
-    md.inline.ruler.push("placeholder", transformPlaceholderInline);
-    md.core.ruler.after("inline", "placeholder", transformPlaceholderCore);
-    md.renderer.rules.placeholder = (tokens: Token[], idx: number, options: any, env: any, self: Renderer) => renderObservable(tokens, idx, options, env, self);
-}
-
+import type MarkdownIt from "markdown-it";
+import type { Options } from "markdown-it";
+import type Token from "markdown-it/lib/token.mjs";
+import type Renderer from "markdown-it/lib/renderer.mjs";
+import type { RuleCore } from "markdown-it/lib/parser_core.mjs";
+import type { RuleInline } from "markdown-it/lib/parser_inline.mjs";
+import { generatePlaceholders } from "./util.ts";
+
+function renderObservable(tokens: Token[], idx: number, _options: Options, env: any, _self: Renderer) {
+    return generatePlaceholders(tokens[idx].content, { type: "js", exec: true }, env);
+}
+
+const DOLLAR = 0x24;
+const CURLEY_OPEN = 0x7B;
+const CURLEY_CLOSE = 0x7D;
+
+function* parsePlaceholderInline(src: string, pos: number = 0, posMax: number = src.length) {
+    if (src.charCodeAt(pos) === DOLLAR && src.charCodeAt(pos + 1) === CURLEY_OPEN) {
+        pos += 2;
+
+        const observableStart = pos;
+        let nestedCurly = 0;
+        let done = false;
+        while (!done && pos < posMax) {
+            switch (src.charCodeAt(pos)) {
+                case CURLEY_OPEN:
+                    nestedCurly++;
+                    break;
+                case CURLEY_CLOSE:
+                    if (nestedCurly === 0) {
+                        done = true;
+                        --pos;
+                    } else {
+                        nestedCurly--;
+                    }
+                    break;
+            }
+            pos++;
+        }
+        const observableEnd = pos;
+        if (pos >= posMax || observableStart == observableEnd) return;
+        if (src.charCodeAt(pos) !== CURLEY_CLOSE) return;
+        pos++;
+
+        const observableJs = src.slice(observableStart, observableEnd).trim();
+        yield { type: "placeholder", content: observableJs, pos };
+    }
+}
+
+function* parsePlaceholderBlock(src: string) {
+    let pos = 0;
+    let prevPos = 0;
+    const posMax = src.length;
+    while (pos < posMax) {
+        if (src.charCodeAt(pos) === DOLLAR && src.charCodeAt(pos + 1) === CURLEY_OPEN) {
+            yield ({ type: "html_block", content: src.slice(prevPos, pos) });
+            for (const placeholder of parsePlaceholderInline(src, pos, posMax)) {
+                yield placeholder;
+                pos = placeholder.pos;
+                prevPos = pos;
+            }
+        } else {
+            pos++;
+        }
+    }
+    if (pos > prevPos) {
+        yield ({ type: "html_block", content: src.slice(prevPos, pos) });
+    }
+}
+
+const transformPlaceholderInline: RuleInline = (state, silent) => {
+    if (silent || state.pos + 2 > state.posMax) return false;
+    const marker1 = state.src.charCodeAt(state.pos);
+    const marker2 = state.src.charCodeAt(state.pos + 1);
+    if (marker1 !== DOLLAR || marker2 !== CURLEY_OPEN) return false;
+    for (const { type, content, pos } of parsePlaceholderInline(state.src, state.pos, state.posMax)) {
+        if (type !== "placeholder") break;
+        const token = state.push(type, "", 0);
+        token.content = content;
+        state.pos = pos;
+        return true;
+    }
+    return false;
+};
+
+const transformPlaceholderCore: RuleCore = (state) => {
+    const { tokens } = state;
+    for (let i = 0, n = tokens.length; i < n; ++i) {
+        const token = tokens[i];
+        if (token.type === "html_block") {
+            const children: Token[] = [];
+            for (const { type, content } of parsePlaceholderBlock(token.content)) {
+                const child = new state.Token(type, "", 0);
+                child.content = content;
+                children.push(child);
+            }
+            if (children.length === 1 && children[0].type === "html_block") {
+                tokens[i].content = children[0].content;
+            } else {
+                const inline = new state.Token("inline", "", 0);
+                inline.children = children;
+                tokens[i] = inline;
+            }
+        }
+    }
+};
+
+export function hookTemplateLiterals(md: MarkdownIt) {
+    md.inline.ruler.push("placeholder", transformPlaceholderInline);
+    md.core.ruler.after("inline", "placeholder", transformPlaceholderCore);
+    md.renderer.rules.placeholder = (tokens: Token[], idx: number, options: any, env: any, self: Renderer) => renderObservable(tokens, idx, options, env, self);
+}
+

package/src/util.ts

@@ -1,81 +1,81 @@
-import { ojs2notebook } from "@hpcc-js/observablehq-compiler";
-import { RenderNode } from "./render.ts";
-
-export interface FenceInfo {
-    type: "js" | "javascript" | string;
-    exec?: boolean;
-    echo?: boolean;
-    hide?: boolean;
-}
-
-export const fenceInfoDefaults: Readonly<FenceInfo> = {
-    type: "js",
-    exec: false,
-    echo: undefined,
-    hide: undefined
-};
-
-export function showSrc(fetchInfo: FenceInfo): boolean {
-    if (fetchInfo.exec === true) {
-        return fetchInfo.echo === true;
-    }
-    return fetchInfo.echo !== false;
-}
-
-export function executeSrc(fenceInfo: FenceInfo): boolean {
-    return fenceInfo.exec === true;
-}
-
-export function renderExecutedSrc(fetchInfo: FenceInfo): boolean {
-    return fetchInfo.exec == true && fetchInfo.hide !== true;
-}
-
-let idx = 0;
-export function createId(suffix?: string | number): string {
-    return `fence-${++idx}${suffix ? `-${suffix}` : ""}`;
-}
-
-function calcPlaceholders(content: string, fenceInfo: FenceInfo): RenderNode[] {
-    const retVal: RenderNode[] = [];
-    try {
-        const cellNb = ojs2notebook(content);
-        for (let i = 0; i < cellNb.nodes.length; ++i) {
-            const id = createId(i + 1);
-            const content = cellNb.nodes[i].value;
-            retVal.push({
-                ...fenceInfo,
-                id,
-                content,
-                innerHTML: `\
-<span id="${id}" >
-    ${renderExecutedSrc(fenceInfo) ? "..." : ""}
-</span>`
-            });
-        }
-    } catch (e: any) {
-        const id = `fence-${idx}-error`;
-        retVal.push({
-            ...fenceInfo,
-            id,
-            content: JSON.stringify(e),
-            innerHTML: `\
-<span id="${id}" class="red">
-    ${JSON.stringify(e)}
-</span>`
-        });
-    }
-    return retVal;
-}
-
-export const ENV_KEY = "ENV_OBSERVABLE";
-
-export function generatePlaceholders(content: string, fenceInfo: FenceInfo, env: any): string {
-    if (!env[ENV_KEY]) {
-        env[ENV_KEY] = [];
-    }
-    return calcPlaceholders(content, fenceInfo).reduce((acc, cur) => {
-        env[ENV_KEY]!.push({ ...cur, innerHTML: undefined });
-        return acc + cur.innerHTML;
-    }, "");
-}
-
+import { ojs2notebook } from "@hpcc-js/observablehq-compiler";
+import { RenderNode } from "./render.ts";
+
+export interface FenceInfo {
+    type: "js" | "javascript" | string;
+    exec?: boolean;
+    echo?: boolean;
+    hide?: boolean;
+}
+
+export const fenceInfoDefaults: Readonly<FenceInfo> = {
+    type: "js",
+    exec: false,
+    echo: undefined,
+    hide: undefined
+};
+
+export function showSrc(fetchInfo: FenceInfo): boolean {
+    if (fetchInfo.exec === true) {
+        return fetchInfo.echo === true;
+    }
+    return fetchInfo.echo !== false;
+}
+
+export function executeSrc(fenceInfo: FenceInfo): boolean {
+    return fenceInfo.exec === true;
+}
+
+export function renderExecutedSrc(fetchInfo: FenceInfo): boolean {
+    return fetchInfo.exec == true && fetchInfo.hide !== true;
+}
+
+let idx = 0;
+export function createId(suffix?: string | number): string {
+    return `fence-${++idx}${suffix ? `-${suffix}` : ""}`;
+}
+
+function calcPlaceholders(content: string, fenceInfo: FenceInfo): RenderNode[] {
+    const retVal: RenderNode[] = [];
+    try {
+        const cellNb = ojs2notebook(content);
+        for (let i = 0; i < cellNb.nodes.length; ++i) {
+            const id = createId(i + 1);
+            const content = cellNb.nodes[i].value;
+            retVal.push({
+                ...fenceInfo,
+                id,
+                content,
+                innerHTML: `\
+<span id="${id}" >
+    ${renderExecutedSrc(fenceInfo) ? "..." : ""}
+</span>`
+            });
+        }
+    } catch (e: any) {
+        const id = `fence-${idx}-error`;
+        retVal.push({
+            ...fenceInfo,
+            id,
+            content: JSON.stringify(e),
+            innerHTML: `\
+<span id="${id}" class="red">
+    ${JSON.stringify(e)}
+</span>`
+        });
+    }
+    return retVal;
+}
+
+export const ENV_KEY = "ENV_OBSERVABLE";
+
+export function generatePlaceholders(content: string, fenceInfo: FenceInfo, env: any): string {
+    if (!env[ENV_KEY]) {
+        env[ENV_KEY] = [];
+    }
+    return calcPlaceholders(content, fenceInfo).reduce((acc, cur) => {
+        env[ENV_KEY]!.push({ ...cur, innerHTML: undefined });
+        return acc + cur.innerHTML;
+    }, "");
+}
+

package/src/vitepress/RenderComponent.vue

@@ -1,33 +1,33 @@
-<template>
-    <div>
-    </div>
-</template>
-
-<script>
-import { render } from "@hpcc-js/markdown-it-plugins";
-
-export default {
-    name: 'RenderComponent',
-    props: {
-        content: {
-            type: String,
-            required: true
-        },
-    },
-    data() {
-        return {
-            loading: true
-        };
-    },
-    async created() {
-        setTimeout(() => {
-            this.loading = false;
-            render(JSON.parse(decodeURI(this.content)));
-        }, 0);
-    }
-}
-</script>
-
-<style scoped>
-/* Add your styles here */
+<template>
+    <div>
+    </div>
+</template>
+
+<script>
+import { render } from "@hpcc-js/markdown-it-plugins";
+
+export default {
+    name: 'RenderComponent',
+    props: {
+        content: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            loading: true
+        };
+    },
+    async created() {
+        setTimeout(() => {
+            this.loading = false;
+            render(JSON.parse(decodeURI(this.content)));
+        }, 0);
+    }
+}
+</script>
+
+<style scoped>
+/* Add your styles here */
 </style>

package/src/vitepress/card.css

@@ -1,44 +1,44 @@
-div.card {
-    background: var(--theme-background-alt);
-    border: solid 1px var(--theme-foreground-faintest);
-    border-radius: 0.75rem;
-    padding: 1rem;
-    margin: 1rem 0;
-    font: 14px var(--sans-serif);
-}
-
-.grid>div.card {
-    margin: 0;
-}
-
-div.card> :first-child,
-div.card> :first-child> :first-child {
-    margin-top: 0;
-}
-
-div.card> :last-child,
-div.card> :last-child> :last-child {
-    margin-bottom: 0;
-}
-
-div.card h2,
-div.card h3 {
-    font-size: inherit;
-}
-
-div.card h2 {
-    font-weight: 500;
-    font-size: 15px;
-}
-
-div.card h3 {
-    font-weight: 400;
-    color: var(--theme-foreground-muted);
-}
-
-div.card h2~svg,
-div.card h3~svg,
-div.card h2~p,
-div.card h3~p {
-    margin-top: 1rem;
+div.card {
+    background: var(--theme-background-alt);
+    border: solid 1px var(--theme-foreground-faintest);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    font: 14px var(--sans-serif);
+}
+
+.grid>div.card {
+    margin: 0;
+}
+
+div.card> :first-child,
+div.card> :first-child> :first-child {
+    margin-top: 0;
+}
+
+div.card> :last-child,
+div.card> :last-child> :last-child {
+    margin-bottom: 0;
+}
+
+div.card h2,
+div.card h3 {
+    font-size: inherit;
+}
+
+div.card h2 {
+    font-weight: 500;
+    font-size: 15px;
+}
+
+div.card h3 {
+    font-weight: 400;
+    color: var(--theme-foreground-muted);
+}
+
+div.card h2~svg,
+div.card h3~svg,
+div.card h2~p,
+div.card h3~p {
+    margin-top: 1rem;
 }