@zikojs/notebook 0.7.3 → 0.9.0

package/src/notebook.js

@@ -1,20 +1,35 @@
 import { NotebookStore } from "./store.js";
-import { Header, CellItem, MarkdownView } from "./components.js";
-import { evaluateCodeAsync } from "./transform.js";
+import { 
+  Header, 
+  CellItem, 
+  MarkdownView,
+  ErrorOutput
+} from "./components/index.js";
+import { evaluateCodeAsync } from "./compiler/index.js";
 import { tags, UIElement } from "ziko/dom";
 import { call_with_optional_props } from 'ziko/dom/internal-utils'
-
+import { useState, useDerived } from "ziko/hooks";
 const { div } = tags
+// const [st, setSt] = useState('hh')
+// globalThis.mm = useDerived((n)=>n, [st])
+// globalThis.pp = tags.p({}, mm).mount(document.body)
+// globalThis.st = st
+// globalThis.setSt = setSt
+
 export class UINotebook extends UIElement{
   constructor({
     cells: initialCells = [],
     importMap = {},
     runCells = true,
-    codeMirrorConfig = {},
-    codeMirrorPlugins = [],
     minLines = 3,
     maxCells = Infinity,
-    showHeader = true
+    showHeader = true,
+    codeMirrorConfig = {},
+    codeMirrorPlugins = [],
+    runtimePlugins = [],
+    remarkPlugins = [],
+    rehypePlugins = []
+
   } = {}) {
     super({ element : 'div'})
     this.setAttr({class : 'ziko-notebook'})
@@ -26,8 +41,11 @@ export class UINotebook extends UIElement{
     this.resetScope();
 
     this.importMap = importMap;
+    this.runtimePlugins = runtimePlugins;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
+    this.remarkPlugins = remarkPlugins;
+    this.rehypePlugins = rehypePlugins;
     this.minLines = minLines;
     this.maxCells = maxCells;
 
@@ -40,6 +58,7 @@ export class UINotebook extends UIElement{
         type: cell.type || "code",
         code: cell.code || "",
         readonly: cell.readonly ?? false,
+        runtime: cell.runtime || null,
         isEditingMarkdown: cell.readonly ? false : (cell.isEditingMarkdown ?? true),
         execCount: cell.execCount ?? null,
         outputNode: cell.outputNode || null,
@@ -123,10 +142,19 @@ export class UINotebook extends UIElement{
 
         try {
           const scope = app.getScope();
-          await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
+          await evaluateCodeAsync(
+            code,
+            cellData._outputRef,
+            {
+              importMap: app.importMap,
+              plugins: app.runtimePlugins,
+              runtime: cellData.runtime // <-- Passed dynamically from the cell configuration
+            },
+            scope,
+          );
         } catch (err) {
           hasError = true;
-          div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
+          ErrorOutput(err).mount(cellData._outputRef);
         }
 
         const counter = this.store.get('executionCounter');
@@ -140,19 +168,17 @@ export class UINotebook extends UIElement{
         cellData._outputRef.appendChild(container);
 
         if (autoNext && !hasError) app.nextCell(cellData.id, "code");
-        else app._refreshCell(cellData);
+        app._refreshCell(cellData);
       },
       copyCode: async () => {
         const textToCopy = cellData._editor.getValue() || cellData.code;
         try {
           await navigator.clipboard.writeText(textToCopy);
         } catch (err) {
-          const textArea = document.createElement("textarea");
-          textArea.value = textToCopy;
-          document.body.appendChild(textArea);
-          textArea.select();
+          const temporary = tags.textarea(textToCopy).mount(document.body)
+          temporary.element.select()
           document.execCommand("copy");
-          document.body.removeChild(textArea);
+          temporary.unmount()
         }
       },
       toggleReadonly: () => {
@@ -173,7 +199,11 @@ export class UINotebook extends UIElement{
         app._refreshCell(cellData);
       },
       addBelow: () => app.addCell(cellData.type, null, cellData.id),
-      deleteCell: () => app.deleteCell(cellData.id)
+      deleteCell: () => app.deleteCell(cellData.id),
+      setRuntime: (newRuntime) => {
+        cellData.runtime = newRuntime;
+        app._refreshCell(cellData);
+      },
     };
   }
 
@@ -193,7 +223,12 @@ export class UINotebook extends UIElement{
 
     cellData._editor.sync(isActive, isMarkdownView);
     cellData._bodySlot.replaceChildren(
-      isMarkdownView ? MarkdownView({ cellData, actions: cellData._actions }) : cellData._editor.dom
+      isMarkdownView ? MarkdownView({ 
+        cellData, 
+        actions: cellData._actions,
+        remarkPlugins : this.remarkPlugins,
+        rehypePlugins : this.rehypePlugins
+      }) : cellData._editor.dom
     );
 
     const showOutput = cellData.type === "code" && cellData.hasDomOutput;
@@ -207,20 +242,34 @@ export class UINotebook extends UIElement{
   }
 
   setActiveCell(id) {
-    const currentActiveId = this.store.get('activeCellId');
-    if (currentActiveId === id) return;
+  const cells = this.store.get('cells');
+  const target = cells.find(c => c.id === id);
 
-    // Check all cells and close editing mode for any markdown cells that are losing focus
-    this.store.get('cells').forEach(c => {
-      if (c.type === "markdown" && c.isEditingMarkdown) {
-        c.isEditingMarkdown = false;
-        this._refreshCell(c);
-      }
-    });
+  if (!target) return;
+
+  const currentActiveId = this.store.get('activeCellId');
 
-    this.store.set('activeCellId', id);
+  if (currentActiveId === id) {
+    return;
   }
 
+  // Only one cell can be active.
+  cells.forEach(cell => {
+    if (cell.id !== id && cell.type === "markdown") {
+      cell.isEditingMarkdown = false;
+    }
+  });
+
+  this.store.set('activeCellId', id);
+
+  // Refresh every cell so the previous active cell loses "active".
+  cells.forEach(cell => {
+    if (cell._dom) {
+      this._refreshCell(cell);
+    }
+  });
+}
+
   focusCell(targetId) {
     // Close editing on other markdown cells before focusing
     this.store.get('cells').forEach(c => {
@@ -249,6 +298,7 @@ export class UINotebook extends UIElement{
     const newCell = {
       id: newId, type, code: initialCode !== null ? initialCode : defaultText, readonly,
       isEditingMarkdown: !readonly && type === "markdown" && initialCode === null,
+      runtime: null,
       execCount: null, outputNode: null, hasDomOutput: false, _copiedFlag: false,
       _dom: null, _editor: null, _actions: null,
       _inPrompt: null, _outPrompt: null, _bodySlot: null, _outputGrid: null, _outputRef: null

package/src/transform.js

@@ -1,116 +0,0 @@
-import * as acorn from "acorn";
-
-export const rewriteImportNode = (node, code, importMapConfig) => {
-  let source = node.source.value;
-  if (importMapConfig && importMapConfig[source]) {
-    source = importMapConfig[source];
-  } else if (!source.startsWith("http://") && !source.startsWith("https://") && !source.startsWith("./") && !source.startsWith("../")) {
-    source = `https://esm.sh/${source}`;
-  }
-
-  if (node.specifiers.length === 0) return `await import("${source}");`;
-
-  let defaultImportName = null;
-  let namespaceId = null;
-  let namedImports = [];
-
-  node.specifiers.forEach(spec => {
-    if (spec.type === "ImportNamespaceSpecifier") namespaceId = spec.local.name;
-    else if (spec.type === "ImportDefaultSpecifier") defaultImportName = spec.local.name;
-    else if (spec.type === "ImportSpecifier") namedImports.push({ imported: spec.imported.name, local: spec.local.name });
-  });
-
-  if (namespaceId) return `__scope__.${namespaceId} = await import("${source}");`;
-
-  const tmp = `__mod_${node.start}`;
-  let lines = [`const ${tmp} = await import("${source}");`];
-
-  if (defaultImportName && namedImports.length === 0) {
-    lines.push(`__scope__.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
-    return lines.join("\n");
-  }
-
-  if (defaultImportName) lines.push(`__scope__.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
-  namedImports.forEach(({ imported, local }) => {
-    lines.push(`__scope__.${local} = ${tmp}.${imported} !== undefined ? ${tmp}.${imported} : (${tmp}.default ?? ${tmp});`);
-  });
-
-  return lines.join("\n");
-};
-
-export const transformImportsAndScope = (code, importMapConfig) => {
-  try {
-    const ast = acorn.parse(code, { ecmaVersion: "latest", sourceType: "module", allowReturnOutsideFunction: true });
-    let modifications = [];
-
-    ast.body.forEach(node => {
-      if (node.type === "ImportDeclaration") {
-        modifications.push({ start: node.start, end: node.end, replacement: rewriteImportNode(node, code, importMapConfig) });
-      } else if (node.type === "VariableDeclaration") {
-        let replacementCode = "";
-        node.declarations.forEach(decl => {
-          if (decl.id.type === "Identifier") {
-            const varName = decl.id.name;
-            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
-            replacementCode += `__scope__.${varName} = ${initCode};\n`;
-          } else if (decl.id.type === "ObjectPattern") {
-            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
-            const tempVar = `__destruct_obj_${decl.start}`;
-            replacementCode += `(() => { const ${tempVar} = ${initCode}; `;
-            decl.id.properties.forEach(prop => {
-              if (prop.value && prop.value.type === "Identifier") {
-                const localName = prop.value.name;
-                const keyName = prop.key.type === "Identifier" ? prop.key.name : prop.key.value;
-                replacementCode += `__scope__.${localName} = ${tempVar}.${keyName}; `;
-              }
-            });
-            replacementCode += `})();\n`;
-          } else if (decl.id.type === "ArrayPattern") {
-            const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
-            const tempVar = `__destruct_arr_${decl.start}`;
-            replacementCode += `(() => { const ${tempVar} = ${initCode}; `;
-            decl.id.elements.forEach((elem, index) => {
-              if (elem && elem.type === "Identifier") {
-                const localName = elem.name;
-                replacementCode += `__scope__.${localName} = ${tempVar}[${index}]; `;
-              }
-            });
-            replacementCode += `})();\n`;
-          }
-        });
-        modifications.push({ start: node.start, end: node.end, replacement: replacementCode });
-      } else if (node.type === "FunctionDeclaration" && node.id) {
-        const funcName = node.id.name;
-        const funcBody = code.slice(node.start, node.end);
-        modifications.push({ start: node.start, end: node.end, replacement: `__scope__.${funcName} = ${funcBody.replace(/^function\s+\w+/, "function")}` });
-      } else if (node.type === "ClassDeclaration" && node.id) {
-        const className = node.id.name;
-        const classBody = code.slice(node.start, node.end);
-        modifications.push({ start: node.start, end: node.end, replacement: `__scope__.${className} = ${classBody.replace(/^class\s+\w+/, "class")}` });
-      }
-    });
-
-    modifications.sort((a, b) => b.start - a.start);
-    let transformedCode = code;
-    modifications.forEach(mod => { transformedCode = transformedCode.slice(0, mod.start) + mod.replacement + transformedCode.slice(mod.end); });
-    return transformedCode;
-  } catch (e) {
-    if (code.trim().startsWith("import ") || code.includes("\nimport ")) throw new SyntaxError("Invalid code module layout syntax.");
-    return code;
-  }
-};
-
-export const evaluateCodeAsync = async (code, TARGET, importMapConfig, scope) => {
-  const validScope = scope || Object.create(null);
-  const compiledCode = transformImportsAndScope(code, importMapConfig);
-
-  const runCell = new Function("TARGET", "__scope__", `
-    return (async () => {
-      with (__scope__) {
-        ${compiledCode}
-      }
-    })();
-  `);
-
-  const result = await runCell(TARGET, validScope);
-};