@curvenote/renderers 0.6.8 → 0.6.9

package/dist/any/renderers.d.ts

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

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

@@ -1 +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,2CA4G/D"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../src/any/renderers.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,2CAyIjE"}

package/dist/any/renderers.js

@@ -22,14 +22,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { MystAnyModel } from './models.js';
 export function AnyRenderer({ node }) {
-    var _a;
+    var _a, _b;
     // basic validation
-    const validImport = node.data.import &&
-        typeof node.data.import === 'string' &&
-        (node.data.import.startsWith('https://') || node.data.import.startsWith('http://'));
+    const esmModuleUrl = (_a = node.data.esm) !== null && _a !== void 0 ? _a : node.data.import; // supports legacy import URL
+    const isESMModuleUrlValid = esmModuleUrl &&
+        typeof esmModuleUrl === 'string' &&
+        (esmModuleUrl.startsWith('https://') || esmModuleUrl.startsWith('http://'));
     const validJson = node.data.json && typeof node.data.json === 'object';
     const ref = React.useRef(null);
+    const [error, setError] = React.useState(null);
     React.useEffect(() => {
+        // Reset error state on node change
+        setError(null);
         // @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#implementing_an_abortable_api
         const controller = new AbortController();
         // if already aborted just ignore
@@ -43,9 +47,10 @@ export function AnyRenderer({ node }) {
             yield (maybeCleanupInitialize === null || maybeCleanupInitialize === void 0 ? void 0 : maybeCleanupInitialize());
         }));
         // TODO: validation for import & styles URLs
-        console.debug('AnyRenderer importing:', node.data.import);
-        import(node.data.import).then((mod) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f;
+        console.debug('AnyRenderer importing:', esmModuleUrl);
+        import(esmModuleUrl)
+            .then((mod) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!ref.current)
                 return;
             console.debug('AnyRenderer imported', mod);
@@ -56,7 +61,7 @@ export function AnyRenderer({ node }) {
             // clear current contents
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.replaceChildren();
             // apply container classes
-            if (((_c = node.data.class) === null || _c === void 0 ? void 0 : _c.trim().length) > 0) {
+            if (node.data.class && ((_c = node.data.class) === null || _c === void 0 ? void 0 : _c.trim().length) > 0) {
                 (_d = node.data.class) === null || _d === void 0 ? void 0 : _d.trim().split(' ').forEach((c) => {
                     var _a;
                     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add(c);
@@ -65,36 +70,44 @@ export function AnyRenderer({ node }) {
             // apply styles
             let rootEl = ref.current;
             const shadow = true;
-            if (node.data.styles) {
+            const css = (_e = node.data.css) !== null && _e !== void 0 ? _e : node.data.styles; // supports legacy styles
+            if (css) {
                 if (shadow) {
-                    const shadowRoot = (_e = rootEl.shadowRoot) !== null && _e !== void 0 ? _e : rootEl.attachShadow({ mode: 'open' });
+                    const shadowRoot = (_f = rootEl.shadowRoot) !== null && _f !== void 0 ? _f : rootEl.attachShadow({ mode: 'open' });
                     shadowRoot.replaceChildren();
                     const shadowEl = document.createElement('div');
                     shadowRoot.appendChild(shadowEl);
                     const link = document.createElement('link');
                     link.rel = 'stylesheet';
-                    link.href = node.data.styles;
+                    link.href = css;
                     shadowRoot.appendChild(link);
                     rootEl = shadowEl;
                 }
                 else {
                     const link = document.createElement('link');
                     link.rel = 'stylesheet';
-                    link.href = node.data.styles;
+                    link.href = css;
                     rootEl.appendChild(link);
                 }
             }
-            maybeCleanupRender = yield ((_f = widget.render) === null || _f === void 0 ? void 0 : _f.call(widget, {
+            maybeCleanupRender = yield ((_g = widget.render) === null || _g === void 0 ? void 0 : _g.call(widget, {
                 model,
                 el: rootEl,
             }));
-        }));
+        }))
+            .catch((err) => {
+            console.error('AnyRenderer failed to import module:', err);
+            setError(err instanceof Error ? err : new Error(String(err)));
+        });
         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() })] }))] }));
+    if (error) {
+        return (_jsxs("details", { className: "p-3 bg-gray-100 rounded border border-gray-300 cursor-pointer", children: [_jsxs("summary", { className: "text-sm text-gray-600 select-none", children: ["Failed to load ", _jsx("code", { className: "text-xs", children: "any:bundle" }), " module."] }), _jsxs("div", { className: "pt-2 mt-2 space-y-1 text-xs border-t border-gray-200", children: [_jsxs("div", { className: "text-gray-500", children: [_jsx("span", { className: "font-medium", children: "Bundle URL:" }), " ", esmModuleUrl] }), _jsxs("div", { className: "text-gray-700", children: [_jsx("span", { className: "font-medium", children: "Error:" }), " ", error.message] })] })] }));
+    }
+    if (!isESMModuleUrlValid || !validJson) {
+        return (_jsxs("div", { className: "p-3 space-y-2 rounded-md border border-red-500", children: [_jsxs("div", { children: ["Invalid ", _jsx("code", { children: "any:bundle" }), " directive."] }), !isESMModuleUrlValid && (_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: (_b = node.data.json) === null || _b === void 0 ? void 0 : _b.toString() })] }))] }));
     }
     return _jsx("div", { className: "relative w-full", ref: ref });
 }

package/dist/any/types.d.ts

@@ -1,4 +1,4 @@
-export type AnyMystDirective = {
+export type AnyBundleDirective = {
     /** The type of the directive */
     type: 'block';
     /** The kind of the directive */
@@ -6,13 +6,17 @@ export type AnyMystDirective = {
     /** The data to pass to the model */
     data: {
         /** The ES module to import */
+        esm: string;
         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>;
+        /** URL to a css stylesheet to load for the widget */
+        css?: string;
+        styles?: string;
+        /** Tailwind classes to apply to the container element */
+        class?: string;
+        /** A static file path, folder path or glob pattern to static files to make available to the module */
+        static?: string;
     };
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/any/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,gCAAgC;IAChC,IAAI,EAAE,YAAY,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE;QACJ,8BAA8B;QAC9B,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,6CAA6C;QAC7C,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9B,qDAAqD;QACrD,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yDAAyD;QACzD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,sGAAsG;QACtG,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curvenote/renderers",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "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/ext-blog": "^0.6.8",
-    "@curvenote/ext-footer": "^0.6.8",
-    "@curvenote/ext-landing": "^0.6.8",
-    "@curvenote/ext-person": "^0.6.8",
-    "@curvenote/theme": "^0.6.8",
+    "@curvenote/ext-blog": "^0.6.9",
+    "@curvenote/ext-footer": "^0.6.9",
+    "@curvenote/ext-landing": "^0.6.9",
+    "@curvenote/ext-person": "^0.6.9",
+    "@curvenote/theme": "^0.6.9",
     "@heroicons/react": "^2.1.5",
     "@myst-theme/providers": "^0.14.1",
     "@scienceicons/myst": "^1.0.4",