@curvenote/renderers 0.5.2 → 0.5.3

package/dist/any/index.d.ts

@@ -0,0 +1,5 @@
+import type { NodeRenderers } from '@myst-theme/providers';
+export * from './models.js';
+export * from './types.js';
+export declare const ANY_RENDERERS: NodeRenderers;
+//# sourceMappingURL=index.d.ts.map

package/dist/any/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/any/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAK3D,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAU3B,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC"}

package/dist/any/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MyST } from 'myst-to-react';
+import { AnyRenderer } from './renderers.js';
+export * from './models.js';
+export * from './types.js';
+function Block({ node }) {
+    return (_jsx("div", { children: _jsx(MyST, { ast: node.children }) }));
+}
+export const ANY_RENDERERS = {
+    block: {
+        base: Block,
+        'block[kind=any:bundle]': AnyRenderer,
+    },
+};

package/dist/any/models.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Forked from https://github.com/manzt/anymyst/commit/d0b2c105397f5b1a0344b4b467c3790c498a84c6
+ *
+ * A shim for the anywidget model interface
+ * @see {@link https://github.com/manzt/anywidget/tree/main/packages/types}
+ */
+export declare class MystAnyModel {
+    #private;
+    constructor(state: Record<string, unknown>);
+    get(name: string): unknown;
+    set(key: string, value: unknown): void;
+    on(name: string, cb: () => void | Promise<void>): void;
+    off(_name: string, _cb: () => void | Promise<void>): void;
+    save_changes(): void;
+    send(_msg: unknown, _callbacks?: unknown, _buffers?: ArrayBuffer[]): void;
+    get widget_manager(): void;
+}
+//# sourceMappingURL=models.d.ts.map

package/dist/any/models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../src/any/models.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,YAAY;;gBAGX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAG1C,GAAG,CAAC,IAAI,EAAE,MAAM;IAGhB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO;IAK/B,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAG/C,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAGlD,YAAY;IAGZ,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,EAAE;IAGlE,IAAI,cAAc,SAEjB;CACF"}

package/dist/any/models.js

@@ -0,0 +1,49 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MystAnyModel_state, _MystAnyModel_target;
+/**
+ * Forked from https://github.com/manzt/anymyst/commit/d0b2c105397f5b1a0344b4b467c3790c498a84c6
+ *
+ * A shim for the anywidget model interface
+ * @see {@link https://github.com/manzt/anywidget/tree/main/packages/types}
+ */
+export class MystAnyModel {
+    constructor(state) {
+        _MystAnyModel_state.set(this, void 0);
+        _MystAnyModel_target.set(this, new EventTarget());
+        __classPrivateFieldSet(this, _MystAnyModel_state, state, "f");
+    }
+    get(name) {
+        return __classPrivateFieldGet(this, _MystAnyModel_state, "f")[name];
+    }
+    set(key, value) {
+        __classPrivateFieldGet(this, _MystAnyModel_state, "f")[key] = value;
+        __classPrivateFieldGet(this, _MystAnyModel_target, "f").dispatchEvent(new CustomEvent(`change:${key}`, { detail: value }));
+        __classPrivateFieldGet(this, _MystAnyModel_target, "f").dispatchEvent(new CustomEvent('change', { detail: value }));
+    }
+    on(name, cb) {
+        __classPrivateFieldGet(this, _MystAnyModel_target, "f").addEventListener(name, cb);
+    }
+    off(_name, _cb) {
+        // TODO: should keep ref to listeners and then remove here
+    }
+    save_changes() {
+        // nothing to sync but necessary
+    }
+    send(_msg, _callbacks, _buffers) {
+        throw new Error('MystAnyModel.send not implemented yet.');
+    }
+    get widget_manager() {
+        throw new Error('MystAnyModel.widget_manager does not exist.');
+    }
+}
+_MystAnyModel_state = new WeakMap(), _MystAnyModel_target = new WeakMap();

package/dist/any/renderers.d.ts

@@ -0,0 +1,5 @@
+import type { AnyMystDirective } from './types.js';
+export declare function AnyRenderer({ node }: {
+    node: AnyMystDirective;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=renderers.d.ts.map

package/dist/any/renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../src/any/renderers.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,2CAwF/D"}

package/dist/any/renderers.js

@@ -0,0 +1,84 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Forked from https://github.com/manzt/anymyst/commit/d0b2c105397f5b1a0344b4b467c3790c498a84c6
+ *
+ * A custom renderer for Myst to support anywidget front-end modules
+ * @module
+ *
+ * @example
+ * ```
+ * <Document renderers={{ ...renderers, any:  AnyMystRenderer }}></Document>
+ * ```
+ */
+import * as React from 'react';
+import { MystAnyModel } from './models.js';
+export function AnyRenderer({ node }) {
+    var _a;
+    // basic validation
+    const validImport = node.data.import &&
+        typeof node.data.import === 'string' &&
+        (node.data.import.startsWith('https://') || node.data.import.startsWith('http://'));
+    const validJson = node.data.json && typeof node.data.json === 'object';
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        // @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#implementing_an_abortable_api
+        const controller = new AbortController();
+        // if already aborted just ignore
+        if (controller.signal.aborted) {
+            return;
+        }
+        let maybeCleanupInitialize = undefined;
+        let maybeCleanupRender = undefined;
+        controller.signal.addEventListener('abort', () => __awaiter(this, void 0, void 0, function* () {
+            yield (maybeCleanupRender === null || maybeCleanupRender === void 0 ? void 0 : maybeCleanupRender());
+            yield (maybeCleanupInitialize === null || maybeCleanupInitialize === void 0 ? void 0 : maybeCleanupInitialize());
+        }));
+        // TODO: validation for import & styles URLs
+        import(node.data.import).then((mod) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            if (!ref.current)
+                return;
+            const widget = mod.default;
+            // TODO: validate the widget
+            const model = new MystAnyModel(node.data.json);
+            maybeCleanupInitialize = yield ((_a = widget.initialize) === null || _a === void 0 ? void 0 : _a.call(widget, { model }));
+            // clear current contents
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.replaceChildren();
+            // apply container classes
+            (_c = node.data.class) === null || _c === void 0 ? void 0 : _c.split(' ').forEach((c) => {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add(c);
+            });
+            // apply styles
+            const shadowRoot = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.attachShadow({ mode: 'open' });
+            const shadowEl = document.createElement('div');
+            shadowRoot.appendChild(shadowEl);
+            if (node.data.styles) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = node.data.styles;
+                shadowRoot.appendChild(link);
+            }
+            maybeCleanupRender = yield ((_e = widget.render) === null || _e === void 0 ? void 0 : _e.call(widget, {
+                model,
+                el: shadowEl,
+            }));
+        }));
+        return () => {
+            controller === null || controller === void 0 ? void 0 : controller.abort();
+        };
+    }, [node]);
+    if (!validImport || !validJson) {
+        return (_jsxs("div", { className: "p-3 space-y-2 border border-red-500 rounded-md", children: [_jsxs("div", { children: ["Invalid ", _jsx("code", { children: "any:bundle" }), " directive."] }), !validImport && (_jsxs("div", { className: "px-1", children: [_jsx("div", { children: "Invalid import URL" }), _jsx("div", { className: "text-sm text-gray-500", children: node.data.import })] })), !validJson && (_jsxs("div", { className: "px-1", children: [_jsx("div", { children: "Invalid JSON data" }), _jsx("div", { className: "text-sm text-gray-500", children: (_a = node.data.json) === null || _a === void 0 ? void 0 : _a.toString() })] }))] }));
+    }
+    return _jsx("div", { className: "relative w-full", ref: ref });
+}

package/dist/any/types.d.ts

@@ -0,0 +1,18 @@
+export type AnyMystDirective = {
+    /** The type of the directive */
+    type: 'block';
+    /** The kind of the directive */
+    kind: 'any:bundle';
+    /** The data to pass to the model */
+    data: {
+        /** The ES module to import */
+        import: string;
+        /** Tailwind classes to apply to the container element */
+        class: string;
+        /** URL to a css stylesheet to load for the widget */
+        styles: string;
+        /** The JSON data to initialize the widget */
+        json: Record<string, unknown>;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/any/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/any/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,gCAAgC;IAChC,IAAI,EAAE,YAAY,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE;QACJ,8BAA8B;QAC9B,MAAM,EAAE,MAAM,CAAC;QACf,yDAAyD;QACzD,KAAK,EAAE,MAAM,CAAC;QACd,qDAAqD;QACrD,MAAM,EAAE,MAAM,CAAC;QACf,6CAA6C;QAC7C,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC"}

package/dist/any/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,kBAAkB,+CAQ7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,+CAS7B,CAAC"}

package/dist/index.js

@@ -6,6 +6,7 @@ import { OUTPUT_RENDERERS } from '@curvenote/bridge-jupyter';
 import LANDING_RENDERERS from '@curvenote/ext-landing/react';
 import FOOTER_RENDERERS from '@curvenote/ext-footer/react';
 import SCIENCEICON_RENDERERS from '@scienceicons/myst/react';
+import { ANY_RENDERERS } from './any/index.js';
 export const curvenoteRenderers = mergeRenderers([
     OUTPUT_RENDERERS,
     CITE_RENDERERS,
@@ -14,4 +15,5 @@ export const curvenoteRenderers = mergeRenderers([
     LANDING_RENDERERS,
     FOOTER_RENDERERS,
     SCIENCEICON_RENDERERS,
+    ANY_RENDERERS,
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curvenote/renderers",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,11 +21,11 @@
     "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
-    "@curvenote/bridge-jupyter": "^0.5.2",
-    "@curvenote/ext-blog": "^0.5.2",
-    "@curvenote/ext-footer": "^0.5.2",
-    "@curvenote/ext-landing": "^0.5.2",
-    "@curvenote/ext-person": "^0.5.2",
+    "@curvenote/bridge-jupyter": "^0.5.3",
+    "@curvenote/ext-blog": "^0.5.3",
+    "@curvenote/ext-footer": "^0.5.3",
+    "@curvenote/ext-landing": "^0.5.3",
+    "@curvenote/ext-person": "^0.5.3",
     "@heroicons/react": "^2.1.5",
     "@myst-theme/providers": "^0.13.6",
     "@scienceicons/myst": "^1.0.4",