@zikojs/notebook 0.7.2 → 0.8.0

package/src/components.js

@@ -1,180 +0,0 @@
-import van from "vanjs-core";
-import { remark } from "remark";
-import remarkRehype from "remark-rehype";
-import rehypeStringify from "rehype-stringify";
-import { createCodeEditor } from "./codeEditor.js";
-
-import {
-  Check,
-  Copy,
-  Lock,
-  Unlock,
-  Code2,
-  FileText,
-  Pencil,
-  Play,
-  Plus,
-  Trash2,
-  PlayForward,
-  Eraser,
-  Download,
-  Loader2
-} from './icons.js';
-
-const { button } = van.tags;
-
-import { tags } from 'ziko/dom'
-
-const { div, span } = tags
-
-export const Button = ({ class: className = "", title = "", disabled = false, onclick }, ...children) =>
-  button({ class: `btn ${className}`, title, disabled, onclick }, ...children);
-
-export function Header({ store, actions }) {
-  const statusBadge = span({ class: "status-badge" }, Loader2(), span('Loading ...')).element;
-  const runAllBtn = Button({ class: "btn-primary", onclick: actions.runAll }, PlayForward(), "Run All");
-  const clearBtn = Button({ onclick: actions.clearOutputs }, Eraser(), "Clear Outputs");
-  const addCodeBtn = Button({ onclick: actions.addCode }, Plus(), "Add Code");
-  const addMdBtn = Button({ onclick: actions.addMarkdown }, FileText(), "Add Markdown");
-  const deleteActiveBtn = Button({ onclick: actions.deleteActive }, Trash2(), "Delete Active");
-  const exportBtn = Button({ onclick: actions.exportData }, Download(), "Export Data");
-
-  store.on('change:executionQueueState', (q) => {
-    statusBadge.style.display = q.isRunning ? "inline-flex" : "none";
-    statusBadge.lastChild.textContent = `Executing Queue (${q.currentIndex + 1}/${q.total})`;
-    [runAllBtn, clearBtn, deleteActiveBtn].forEach(b => { b.disabled = q.isRunning; });
-    const maxReached = store.get('cells').length >= store.get('maxCells');
-    addCodeBtn.disabled = q.isRunning || maxReached;
-    addMdBtn.disabled = q.isRunning || maxReached;
-  });
-
-  return div({ class: "header" },
-    div({ class: "brand" }, "</>", statusBadge),
-    div({ class: "toolbar" }, 
-      runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
-    )
-  ).element;
-}
-
-export function MarkdownView({ cellData, actions }) {
-  const content = div().element;
-  
-  // Process Markdown asynchronously using Remark + Rehype
-  remark()
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(rehypeStringify)
-    .process(cellData.code || "*Empty Markdown Cell*")
-    .then((file) => {
-      content.innerHTML = String(file);
-    })
-    .catch((err) => {
-      content.innerHTML = `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
-    });
-  
-  const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
-  wrap.onClick(() => actions.editMarkdown())
-  return wrap.element;
-}
-
-export function CellControls({ cellData, store, actions }) {
-  const controlsContainer = div({ class: "cell-controls" }).element;
-
-  const renderButtons = () => {
-    const isQueueRunning = store.get('executionQueueState').isRunning;
-    const isMaxCellsReached = store.get('cells').length >= store.get('maxCells');
-    const isCopied = cellData._copiedFlag === true;
-
-    controlsContainer.replaceChildren(
-      Button({ 
-        class: `btn-icon ${isCopied ? "btn-active" : ""}`, 
-        title: isCopied ? "Copied!" : "Copy Cell Content", 
-        onclick: async () => {
-          await actions.copyCode();
-          cellData._copiedFlag = true;
-          renderButtons();
-          setTimeout(() => { 
-            cellData._copiedFlag = false; 
-            renderButtons(); 
-          }, 1500);
-        }
-      }, isCopied ? Check() : Copy()),
-
-      Button({ 
-        class: `btn-icon ${cellData.readonly ? "btn-active" : ""}`, 
-        title: cellData.readonly ? "Make Editable" : "Make Read-Only", 
-        disabled: isQueueRunning, 
-        onclick: actions.toggleReadonly, 
-      }, cellData.readonly ? Lock() : Unlock()),
-
-      Button({ 
-        class: `btn-icon ${cellData.type === "markdown" ? "btn-active" : ""}`, 
-        title: `Switch to ${cellData.type === "code" ? "Markdown" : "JS Code"}`, 
-        disabled: isQueueRunning || cellData.readonly, 
-        onclick: actions.toggleType, 
-      }, cellData.type === "code" ? FileText() : Code2()),
-
-      (cellData.type === "markdown" && !cellData.isEditingMarkdown)
-        ? Button({ 
-            class: "btn-icon", 
-            title: "Edit Markdown", 
-            disabled: isQueueRunning || cellData.readonly, 
-            onclick: actions.editMarkdown 
-          }, Pencil())
-        : Button({ 
-            class: "btn-icon btn-primary", 
-            title: "Run & Advance (Shift+Enter)", 
-            disabled: isQueueRunning, 
-            onclick: () => actions.runCode(true) 
-          }, Play()),
-
-      Button({ 
-        class: "btn-icon", 
-        title: "Add Cell Below", 
-        disabled: isQueueRunning || isMaxCellsReached, 
-        onclick: actions.addBelow 
-      }, Plus()),
-
-      Button({ 
-        class: "btn-icon", 
-        title: "Delete Cell", 
-        disabled: isQueueRunning, 
-        onclick: actions.deleteCell 
-      }, Trash2())
-    );
-  };
-
-  renderButtons();
-  store.on('change', renderButtons);
-
-  return controlsContainer;
-}
-
-export function CellItem({ cellData, app, store }) {
-  const outputRef = div({ class: "output-area" }).element;
-  if (cellData.outputNode) outputRef.appendChild(cellData.outputNode);
-  cellData._outputRef = outputRef;
-
-  const actions = app._cellActions(cellData);
-  cellData._actions = actions;
-  cellData._editor = createCodeEditor(app, cellData, actions);
-
-  const inPrompt = span({ class: "prompt" }).element;
-  const outPrompt = span({ class: "prompt out" }).element;
-  const bodySlot = div().style({ display : 'contents'}).element;
-  const controlsEl = CellControls({ cellData, store, actions });
-
-  const outputGrid = div({ class: "cell-output-grid" }, outPrompt, div({ class: "output-wrapper" }, outputRef)).element;
-  const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl).element;
-  const root = div({ class: "cell" }, inputGrid, outputGrid);
-  root.onClick(() => app.setActiveCell(cellData.id));
-  // root.onclick = () => app.setActiveCell(cellData.id);
-
-  cellData._dom = root.element;
-  cellData._inPrompt = inPrompt;
-  cellData._outPrompt = outPrompt;
-  cellData._bodySlot = bodySlot;
-  cellData._outputGrid = outputGrid;
-
-  app._refreshCell(cellData);
-  return root.element;
-}

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);
-};