@zikojs/notebook 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.11.0",
+  "version": "0.13.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)
@@ -166,62 +187,51 @@ export function createCodeEditor(app, cellData, actions) {
         ? view.state.doc.toString()
         : cellData.code,
 
-    
-sync: (isActive, isMarkdownView) => {
-  if (!isMarkdownView) {
-    if (!view) {
-      requestAnimationFrame(() => {
-        initEditor();
-
-        // The editor may only become available after initialization.
-        // Check the current active cell, not a potentially stale
-        // isActive value captured by this callback.
-        if (
-          app.store.get("activeCellId") === cellData.id &&
-          !cellData.readonly &&
-          view
-        ) {
-          view.focus();
-        }
-      });
-    } else {
-      view.dispatch({
-        effects: [
-          languageCompartment.reconfigure(
-            languageFor(cellData.type)
-          ),
-          readOnlyCompartment.reconfigure(
-            EditorState.readOnly.of(cellData.readonly)
-          ),
-          editableCompartment.reconfigure(
-            EditorView.editable.of(!cellData.readonly)
-          )
-        ]
-      });
-
-      const currentValue = view.state.doc.toString();
-
-      if (currentValue !== cellData.code) {
-        view.dispatch({
-          changes: {
-            from: 0,
-            to: currentValue.length,
-            insert: cellData.code
+    sync: (isActive, isMarkdownView) => {
+      if (!isMarkdownView) {
+        if (!view) {
+          requestAnimationFrame(() => initEditor());
+        } else {
+          view.dispatch({
+            effects: [
+              languageCompartment.reconfigure(
+                languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
+              ),
+
+              themeCompartment.reconfigure(
+                themeFor(cellData.runtime, app.runtimePlugins)
+              ),
+
+              readOnlyCompartment.reconfigure(
+                EditorState.readOnly.of(cellData.readonly)
+              ),
+
+              editableCompartment.reconfigure(
+                EditorView.editable.of(!cellData.readonly)
+              )
+            ]
+          });
+
+          const currentValue = view.state.doc.toString();
+
+          if (currentValue !== cellData.code) {
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: currentValue.length,
+                insert: cellData.code
+              }
+            });
           }
-        });
-      }
+        }
 
-      if (
-        isActive &&
-        !cellData.readonly
-      ) {
-        requestAnimationFrame(() => view?.focus());
+        if (isActive && view && !cellData.readonly) {
+          requestAnimationFrame(() => view.focus());
+        }
+      } else if (view) {
+        view.destroy();
+        view = null;
       }
     }
-  } else if (view) {
-    view.destroy();
-    view = null;
-  }
-}
   };
 }

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/index.css

@@ -108,10 +108,14 @@
 .ziko-notebook .cell-controls {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  grid-column: 1 / -1;
   gap: 4px;
   flex-shrink: 0;
   flex-wrap: wrap;
-  max-width: 60px;
+  /* border-bottom: 1px solid #f1f5f9; */
+  padding-bottom: 6px;
+  margin-bottom: 2px;
 }
 
 .ziko-notebook .cm-line{
@@ -149,15 +153,6 @@
     grid-template-rows: auto auto;
   }
 
-  .ziko-notebook .cell-controls {
-    grid-column: 1 / -1;
-    justify-content: flex-end;
-    border-bottom: 1px solid #f1f5f9;
-    padding-bottom: 6px;
-    margin-bottom: 2px;
-    max-width: 100%;
-  }
-
   .ziko-notebook .cell-output-grid {
     grid-template-columns: 42px 1fr;
   }

package/src/main.js

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