@zikojs/notebook 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {
@@ -44,7 +44,7 @@
     "@codemirror/state": "^6.7.4",
     "@codemirror/view": "^6.43.11",
     "@zikojs/lucide": "^0.2.2",
-    "@zikojs/console": "latest",
+    "@zikojs/console": "^0.8.0",
     "acorn": "^8.18.0",
     "codemirror": "^6.0.2",
     "lucide": "^1.44.0",
@@ -53,7 +53,7 @@
     "remark-rehype": "^11.1.2",
     "vanjs-core": "^1.6.1",
     "zextra": "^1.15.0",
-    "ziko": "latest"
+    "ziko": "2.0.0-beta.17.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/code-editor/index.js

@@ -1,6 +1,6 @@
 import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { EditorState, Compartment } from "@codemirror/state";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
@@ -9,13 +9,28 @@ import { tags } from "ziko/dom";
 
 const { div } = tags;
 
-const languageFor = (type) =>
-  type === "markdown" ? markdown() : javascript();
 
+const getRuntimePlugin = (runtime, runtimePlugins = []) =>
+  runtimePlugins.find((plugin) => plugin?.name === runtime);
+
+const languageFor = (type, runtime, runtimePlugins = []) => {
+  if (type === "markdown") return markdown();
+
+  const plugin = getRuntimePlugin(runtime, runtimePlugins);
+
+  return plugin?.language ?? javascript();
+};
+
+const themeFor = (runtime, runtimePlugins = []) => {
+  const plugin = getRuntimePlugin(runtime, runtimePlugins);
+
+  return plugin?.theme ?? [];
+};
 export function createCodeEditor(app, cellData, actions) {
   const editorDom = div({ class: "input-wrapper" });
 
   const languageCompartment = new Compartment();
+  const themeCompartment = new Compartment();
   const readOnlyCompartment = new Compartment();
   const editableCompartment = new Compartment();
 
@@ -84,10 +99,12 @@ export function createCodeEditor(app, cellData, actions) {
           return true;
         }
       },
+      indentWithTab,
       ...buildPluginKeymap(),
       ...closeBracketsKeymap,
       ...defaultKeymap,
-      ...historyKeymap
+      ...historyKeymap,
+      
     ]);
 
     const extraExtensions = Array.isArray(app.codeMirrorConfig)
@@ -114,8 +131,12 @@ export function createCodeEditor(app, cellData, actions) {
         EditorState.tabSize.of(2),
 
         languageCompartment.of(
-          languageFor(cellData.type)
-        ),
+  languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
+),
+
+themeCompartment.of(
+  themeFor(cellData.runtime, app.runtimePlugins)
+),
 
         readOnlyCompartment.of(
           EditorState.readOnly.of(cellData.readonly)
@@ -174,7 +195,11 @@ export function createCodeEditor(app, cellData, actions) {
           view.dispatch({
             effects: [
               languageCompartment.reconfigure(
-                languageFor(cellData.type)
+                languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
+              ),
+
+              themeCompartment.reconfigure(
+                themeFor(cellData.runtime, app.runtimePlugins)
               ),
 
               readOnlyCompartment.reconfigure(

package/src/compiler/evaluate.js

@@ -1,4 +1,14 @@
 import { transformImportsAndScope } from "./transform.js";
+import { Console as _Console } from '@zikojs/console'
+import { tags } from 'ziko/dom'
+const { div } = tags
+
+const Console = {
+  log : (...args) => div(_Console.log(...args)),
+  table : (...args) => div(_Console.table(...args)),
+  warn : (...args) => div(_Console.warn(...args)),
+  error : (...args) => div(_Console.error(...args))
+}
 
 export const evaluateCodeAsync = async (
   code,
@@ -10,8 +20,9 @@ export const evaluateCodeAsync = async (
   } = {},
   scope,
 ) => {
-  const validScope =
-    scope || Object.create(null);
+  const validScope = scope || Object.create(null);
+
+  scope.console = Console
 
   const context = {
     TARGET,
@@ -54,11 +65,14 @@ export const evaluateCodeAsync = async (
     }
   }
 
-  compiledCode =
-    transformImportsAndScope(
-      compiledCode,
-      importMap,
-    );
+  compiledCode = await transformImportsAndScope(
+  compiledCode,
+  {
+    importMap,
+    plugins,
+  },
+);
+// console.log(compiledCode)
 
   const runCell = new Function(
     "TARGET",
@@ -70,6 +84,8 @@ export const evaluateCodeAsync = async (
       __Ziko__.__Config__.default.autoMount = true;
     }
 
+
+
     return (async () => {
       with (__scope__) {
         return await (async () => {

package/src/compiler/imports.js

@@ -1,77 +1,110 @@
-export const resolveImport = (
+
+const CDN = "https://esm.sh/";
+
+const isURL = (source) =>
+  /^(?:https?:\/\/|data:|blob:)/i.test(source);
+
+const isBareSpecifier = (source) =>
+  !source.startsWith(".") &&
+  !source.startsWith("/") &&
+  !source.startsWith("#") &&
+  !isURL(source);
+
+export const resolveImport = async (
   source,
   {
     importMap = {},
     plugins = [],
+    resolverEndpoint = "/__notebook_resolve",
   } = {},
 ) => {
   if (importMap[source]) {
     return importMap[source];
   }
 
+  if (!isBareSpecifier(source)) {
+    return source;
+  }
+
   for (const plugin of plugins) {
-    if (plugin.resolveImport) {
-      const resolved = plugin.resolveImport(
-        source,
-      );
+    if (typeof plugin.resolveImport !== "function") {
+      continue;
+    }
 
-      if (resolved) {
-        return resolved;
-      }
+    const resolved = await plugin.resolveImport(source);
+
+    if (typeof resolved === "string" && resolved) {
+      return resolved;
     }
   }
 
-  if (
-    source.startsWith("http://") ||
-    source.startsWith("https://") ||
-    source.startsWith("./") ||
-    source.startsWith("../")
-  ) {
-    return source;
+  try {
+    const params = new URLSearchParams({ specifier: source });
+
+    const response = await fetch(
+      `${resolverEndpoint}?${params.toString()}`,
+    );
+
+    if (response.ok) {
+      const result = await response.json();
+
+      if (typeof result.url === "string" && result.url) {
+        return result.url;
+      }
+    }
+  } catch {
+    // The Vite endpoint may not be available outside development.
   }
 
-  return `https://esm.sh/${source}`;
+  return `${CDN}${source}`;
 };
 
-export const rewriteImportNode = (
+export const rewriteImportNode = async (
   node,
   code,
   context,
 ) => {
-  const source = resolveImport(
+  const source = await resolveImport(
     node.source.value,
     context,
   );
 
+  // Safely quote the URL in generated JavaScript.
+  const url = JSON.stringify(source);
+
   if (node.specifiers.length === 0) {
-    return `await import("${source}");`;
+    return `await import(${url});`;
   }
 
   let defaultImportName = null;
   let namespaceId = null;
   const namedImports = [];
 
-  node.specifiers.forEach((spec) => {
+  for (const spec of node.specifiers) {
     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,
+        imported:
+          spec.imported.name ?? spec.imported.value,
         local: spec.local.name,
       });
     }
-  });
+  }
 
   if (namespaceId) {
-    return `__scope__.${namespaceId} = await import("${source}");`;
+    return (
+      `__scope__.${namespaceId} = ` +
+      `await import(${url});`
+    );
   }
 
   const tmp = `__mod_${node.start}`;
 
   const lines = [
-    `const ${tmp} = await import("${source}");`,
+    `const ${tmp} = await import(${url});`,
   ];
 
   if (defaultImportName) {
@@ -81,14 +114,14 @@ export const rewriteImportNode = (
     );
   }
 
-  namedImports.forEach(({ imported, local }) => {
+  for (const { imported, local } of namedImports) {
     lines.push(
       `__scope__.${local} = ` +
-      `${tmp}.${imported} !== undefined ` +
-      `? ${tmp}.${imported} ` +
+      `${tmp}[${JSON.stringify(imported)}] !== undefined ` +
+      `? ${tmp}[${JSON.stringify(imported)}] ` +
       `: (${tmp}.default ?? ${tmp});`,
     );
-  });
+  }
 
   return lines.join("\n");
 };

package/src/compiler/transform.js

@@ -10,11 +10,13 @@ import {
   rewriteClassDeclaration,
 } from "./scope.js";
 
-export const transformImportsAndScope = (
+
+export const transformImportsAndScope = async (
   code,
   {
     importMap = {},
     plugins = [],
+    resolverEndpoint,
   } = {},
 ) => {
   try {
@@ -27,36 +29,34 @@ export const transformImportsAndScope = (
     const context = {
       importMap,
       plugins,
+      resolverEndpoint,
     };
 
     const modifications = [];
 
-    ast.body.forEach((node) => {
+    for (const node of ast.body) {
       if (node.type === "ImportDeclaration") {
         modifications.push({
           start: node.start,
           end: node.end,
-          replacement: rewriteImportNode(
+          replacement: await rewriteImportNode(
             node,
             code,
             context,
           ),
         });
 
-        return;
+        continue;
       }
 
       if (node.type === "VariableDeclaration") {
         modifications.push({
           start: node.start,
           end: node.end,
-          replacement: rewriteVariableDeclaration(
-            node,
-            code,
-          ),
+          replacement: rewriteVariableDeclaration(node, code),
         });
 
-        return;
+        continue;
       }
 
       if (
@@ -66,13 +66,10 @@ export const transformImportsAndScope = (
         modifications.push({
           start: node.start,
           end: node.end,
-          replacement: rewriteFunctionDeclaration(
-            node,
-            code,
-          ),
+          replacement: rewriteFunctionDeclaration(node, code),
         });
 
-        return;
+        continue;
       }
 
       if (
@@ -82,31 +79,21 @@ export const transformImportsAndScope = (
         modifications.push({
           start: node.start,
           end: node.end,
-          replacement: rewriteClassDeclaration(
-            node,
-            code,
-          ),
+          replacement: rewriteClassDeclaration(node, code),
         });
       }
-    });
+    }
 
-    modifications.sort(
-      (a, b) => b.start - a.start,
-    );
+    modifications.sort((a, b) => b.start - a.start);
 
     let transformedCode = code;
 
-    modifications.forEach((modification) => {
+    for (const modification of modifications) {
       transformedCode =
-        transformedCode.slice(
-          0,
-          modification.start,
-        ) +
+        transformedCode.slice(0, modification.start) +
         modification.replacement +
-        transformedCode.slice(
-          modification.end,
-        );
-    });
+        transformedCode.slice(modification.end);
+    }
 
     return transformedCode;
   } catch (error) {
@@ -116,9 +103,7 @@ export const transformImportsAndScope = (
     ) {
       throw new SyntaxError(
         "Invalid code module layout syntax.",
-        {
-          cause: error,
-        },
+        { cause: error },
       );
     }
 

package/src/components/CellItem/index.js

@@ -10,6 +10,7 @@ import {
   FileText,
   Pencil,
   Play,
+  Refresh,
   Plus,
   Trash2,
 } from '../icons/index.js';
@@ -135,12 +136,20 @@ export function CellControls({ cellData, store, actions, runtimePlugins = [] })
             disabled: isQueueRunning || cellData.readonly, 
             onclick: actions.editMarkdown 
           }, Pencil())
-        : Button({ 
+        : div(
+          Button({ 
+            class: "btn-icon", 
+            title: "Run (Shift+Enter)", 
+            disabled: isQueueRunning, 
+            onclick: () => actions.runCode(false) 
+          }, Refresh()),
+          Button({ 
             class: "btn-icon btn-primary", 
             title: "Run & Advance (Shift+Enter)", 
             disabled: isQueueRunning, 
             onclick: () => actions.runCode(true) 
-          }, Play()),
+          }, Play())
+        ).style({ display : 'contents'}).element,
 
       Button({ 
         class: "btn-icon", 

package/src/components/Header/index.js

@@ -37,6 +37,8 @@ export function Header({ store, actions }) {
     addMdBtn.disabled = q.isRunning || maxReached;
   });
 
+  statusBadge.unmount()
+
   return div({ class: 'header' },
     // div({ class: 'brand' }, '</>', statusBadge),
     div({ class: 'toolbar' }, 

package/src/components/icons/index.js

@@ -6,6 +6,7 @@ import _Code2 from '@zikojs/lucide/Code2'
 import _FileText from '@zikojs/lucide/FileText'
 import _Pencil from '@zikojs/lucide/Pencil'
 import _Play from '@zikojs/lucide/Play'
+import _Refresh from '@zikojs/lucide/RefreshCcw'
 import _Plus from '@zikojs/lucide/Plus'
 import _Trash2 from '@zikojs/lucide/Trash2'
 import _PlayForward from '@zikojs/lucide/StepForward'
@@ -21,6 +22,7 @@ export const Code2 = () => _Code2({ class: 'icon', stroke : 'currentColor' }).el
 export const FileText = () => _FileText({ class: 'icon', stroke : 'currentColor' }).element
 export const Pencil = () => _Pencil({ class: 'icon', stroke : 'currentColor' }).element
 export const Play = () => _Play({ class: 'icon', stroke : 'currentColor' }).element
+export const Refresh = () => _Refresh({ class: 'icon', stroke : 'currentColor' }).element
 export const Plus = () => _Plus({ class: 'icon', stroke : 'currentColor' }).element
 export const Trash2 = () => _Trash2({ class: 'icon', stroke : 'currentColor' }).element
 export const PlayForward = () => _PlayForward({ class: 'icon', stroke : 'currentColor' }).element

package/src/main.js

@@ -1 +1 @@
-export { UINotebook } from './notebook.js';
+export * from './notebook.js';

package/src/notebook.js

@@ -424,8 +424,10 @@ export class UINotebook extends UIElement {
         app._refreshCell(cellData);
       },
 
-      addBelow: () =>
-        app.addCell(cellData.type, null, cellData.id),
+      addBelow: () => {
+        app.setActiveCell(cellData.id);
+        app.addCell(cellData.type, null, cellData.id);
+      },
 
       deleteCell: () => app.deleteCell(cellData.id),
 
@@ -523,117 +525,111 @@ export class UINotebook extends UIElement {
     });
   }
 
-  focusCell(targetId) {
-    this.store.get("cells").forEach((cell) => {
-      if (
-        cell.type === "markdown" &&
-        cell.isEditingMarkdown &&
-        cell.id !== targetId
-      ) {
-        cell.isEditingMarkdown = false;
-        this._refreshCell(cell);
-      }
-    });
+  focusCell(id) {
+  const cells = this.store.get("cells");
+  const cell = cells.find((c) => c.id === id);
 
-    const target = this.store
-      .get("cells")
-      .find((cell) => cell.id === targetId);
+  if (!cell) return;
 
-    if (
-      target &&
-      target.type === "markdown" &&
-      !target.readonly
-    ) {
-      target.isEditingMarkdown = true;
+  for (const c of cells) {
+    if (c.type === "markdown" && c.id !== id) {
+      c.isEditingMarkdown = false;
     }
+  }
 
-    this.store.set("activeCellId", targetId);
+  if (cell.type === "markdown" && !cell.readonly) {
+    cell.isEditingMarkdown = true;
   }
 
-  addCell(
-    type = "code",
-    initialCode = null,
-    afterId = null,
-    readonly = false
-  ) {
-    const cells = [...this.store.get("cells")];
-
-    if (cells.length >= this.maxCells) {
-      console.warn(
-        `Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`
-      );
+  this.store.set("activeCellId", id);
+  this._refreshCell(cell);
+
+  // Scroll the target cell into view when it is outside the viewport.
+  requestAnimationFrame(() => {
+    const element = cell._dom;
 
-      return null;
+    if (!element?.isConnected) return;
+
+    const rect = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+
+    if (rect.top < 0 || rect.bottom > viewportHeight) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: rect.top < 0 ? "start" : "nearest",
+      });
     }
+  });
+}
 
-    const newId = this.nextCellId++;
-
-    const defaultText =
-      type === "markdown"
-        ? "### New Markdown Cell\nClick to edit..."
-        : "";
-
-    const source =
-      initialCode !== null ? initialCode : defaultText;
-
-    const pendingCode = isPromiseLike(source)
-      ? Promise.resolve(source)
-      : null;
-
-    const newCell = {
-      id: newId,
-      type,
-      code: pendingCode
-        ? ""
-        : typeof source === "string"
-          ? source
-          : "",
-      _codePromise: pendingCode,
-      _codeLoadError: null,
-
-      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,
-    };
+  
+
+addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
+  const cells = [...this.store.get("cells")];
 
-    if (afterId === null) {
+  if (cells.length >= this.maxCells) {
+    console.warn(
+      `Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`
+    );
+    return null;
+  }
+
+  // Prefer the cell associated with the clicked "+" button.
+  // Fall back to the last focused cell, then the last cell.
+  const sourceCell =
+    (afterId !== null
+      ? cells.find((cell) => cell.id === afterId)
+      : null) ??
+    cells.find(
+      (cell) => cell.id === this.store.get("activeCellId")
+    ) ??
+    cells.at(-1);
+
+  const newId = this.nextCellId++;
+  const defaultText =
+    type === "markdown"
+      ? "### New Markdown Cell\nClick to edit..."
+      : "";
+
+  const newCell = {
+    id: newId,
+    type,
+    code: initialCode !== null ? initialCode : defaultText,
+    readonly,
+    isEditingMarkdown:
+      !readonly && type === "markdown" && initialCode === null,
+    runtime: sourceCell?.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,
+  };
+
+  if (afterId === null) {
+    cells.push(newCell);
+  } else {
+    const index = cells.findIndex((cell) => cell.id === afterId);
+    if (index === -1) {
       cells.push(newCell);
     } else {
-      const index = cells.findIndex(
-        (cell) => cell.id === afterId
-      );
-
       cells.splice(index + 1, 0, newCell);
     }
+  }
 
-    this.store.set("cells", cells);
-    this._renderAllCells();
-    this.focusCell(newId);
-
-    // Resolve newly added Promise-based code without blocking
-    // the synchronous addCell() API.
-    if (pendingCode) {
-      this._resolveCellCode(newCell);
-    }
+  this.store.set("cells", cells);
+  this._renderAllCells();
+  this.focusCell(newId);
 
-    return newId;
-  }
+  return newId;
+}
 
   deleteCell(id) {
     const cells = this.store.get("cells");
@@ -656,19 +652,26 @@ export class UINotebook extends UIElement {
     this.focusCell(updatedCells[nextActiveIndex].id);
   }
 
-  nextCell(currentId, defaultType) {
-    const cells = this.store.get("cells");
-    const index = cells.findIndex(
-      (cell) => cell.id === currentId
-    );
+  
+nextCell(currentId, defaultType) {
+  const cells = this.store.get("cells");
+  const index = cells.findIndex((cell) => cell.id === currentId);
+
+  if (index === -1) return;
 
-    if (index === cells.length - 1) {
-      this.addCell(defaultType, null, currentId);
-    } else if (index >= 0) {
-      this.focusCell(cells[index + 1].id);
+  if (index === cells.length - 1) {
+    const newId = this.addCell(defaultType, null, currentId);
+
+    if (newId !== null) {
+      this.focusCell(newId);
     }
+
+    return;
   }
 
+  this.focusCell(cells[index + 1].id);
+}
+
   async runCell(id) {
     await this.ready;
 
@@ -761,31 +764,30 @@ export class UINotebook extends UIElement {
     return window.__notebook_scope_map.get(this.id);
   }
 
-  getNotebookData({
-    inputs = true,
-    outputs = true,
-  } = {}) {
-    return this.store.get("cells").map((cell) => {
-      const exportedCell = {
-        id: cell.id,
-        type: cell.type,
-        readonly: cell.readonly,
-        order: cell.execCount,
-      };
+  
+getNotebookData({ inputs = true, outputs = true } = {}) {
+  return this.store.get("cells").map((cell) => {
+    const exportedCell = {
+      id: cell.id,
+      type: cell.type,
+      readonly: cell.readonly,
+      runtime: cell.runtime ?? null,
+      order: cell.execCount,
+    };
 
-      if (inputs) {
-        exportedCell.code = cell.code;
-      }
+    if (inputs) {
+      exportedCell.code = cell._editor?.getValue() ?? cell.code;
+    }
 
-      if (outputs) {
-        exportedCell.outputHtml = cell.outputNode
-          ? cell.outputNode.innerHTML
-          : null;
-      }
+    if (outputs) {
+      exportedCell.outputHtml = cell.outputNode
+        ? cell.outputNode.innerHTML
+        : cell._outputRef?.innerHTML ?? null;
+    }
 
-      return exportedCell;
-    });
-  }
+    return exportedCell;
+  });
+}
 }
 
 export const Notebook = call_with_optional_props(UINotebook);