@zikojs/notebook 0.14.2 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {
@@ -41,16 +41,15 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/commands": "^6.11.0",
-    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-javascript": "latest",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.4",
     "@codemirror/view": "^6.43.11",
-    "@zikojs/lucide": "^0.2.2",
     "@zikojs/console": "^0.8.0",
+    "@zikojs/lucide": "^0.2.2",
     "acorn": "^8.18.0",
     "codemirror": "^6.0.2",
-    "lucide": "^1.44.0",
     "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.2",

package/src/code-editor/index.js

@@ -74,6 +74,43 @@ export function createCodeEditor(app, cellData, actions) {
     if (view) return;
 
     const shortcutKeymap = keymap.of([
+      {
+        key: "Ctrl-ArrowDown",
+        run: () => actions.moveToAdjacentCell(1),
+      },
+      {
+        key: "Ctrl-ArrowUp",
+        run: () => actions.moveToAdjacentCell(-1),
+      },
+      {
+        key: "ArrowDown",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (
+            selection.empty &&
+            line.number === editorView.state.doc.lines
+          ) {
+            return actions.moveToAdjacentCell(1);
+          }
+
+          return false;
+        },
+      },
+      {
+        key: "ArrowUp",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (selection.empty && line.number === 1) {
+            return actions.moveToAdjacentCell(-1);
+          }
+
+          return false;
+        },
+      },
       {
         key: "Shift-Enter",
         run: () => {
@@ -195,6 +232,22 @@ export function createCodeEditor(app, cellData, actions) {
 
     getValue: () => (view ? view.state.doc.toString() : cellData.code),
 
+    focusAt: (position) => {
+      requestAnimationFrame(() => {
+        if (!view) return;
+
+        const cursor = Math.max(
+          0,
+          Math.min(position, view.state.doc.length),
+        );
+
+        view.dispatch({
+          selection: { anchor: cursor },
+        });
+        view.focus();
+      });
+    },
+
     sync: (isActive, isMarkdownView) => {
       if (!isMarkdownView) {
         if (!view) {

package/src/compiler/evaluate.js

@@ -17,12 +17,14 @@ export const evaluateCodeAsync = async (
     importMap = {},
     plugins = [],
     runtime = null,
+    cdnFallback = true,
   } = {},
   scope,
 ) => {
   const validScope = scope || Object.create(null);
+  const importScope = Object.create(null);
 
-  scope.console = Console
+  validScope.console = Console;
 
   const context = {
     TARGET,
@@ -30,6 +32,7 @@ export const evaluateCodeAsync = async (
     importMap,
     plugins,
     runtime,
+    cdnFallback
   };
 
   const selectedPlugin = plugins.find(
@@ -70,6 +73,8 @@ export const evaluateCodeAsync = async (
   {
     importMap,
     plugins,
+    cdnFallback,
+    importScopeIdentifier: "__imports__",
   },
 );
 // console.log(compiledCode)
@@ -77,6 +82,7 @@ export const evaluateCodeAsync = async (
   const runCell = new Function(
     "TARGET",
     "__scope__",
+    "__imports__",
     `
     // Bind the active TARGET for this cell evaluation
     if (typeof __Ziko__ !== "undefined" && __Ziko__.__Config__) {
@@ -89,9 +95,11 @@ export const evaluateCodeAsync = async (
     return (async () => {
       with (__scope__) {
         return await (async () => {
-          ${compiledCode}
+          with (__imports__) {
+            ${compiledCode}
+          }
         })();
-      }
+        }
     })();
     `,
   );
@@ -99,6 +107,7 @@ export const evaluateCodeAsync = async (
   let result = await runCell(
     TARGET,
     validScope,
+    importScope,
   );
 
   for (const plugin of plugins) {

package/src/compiler/imports.js

@@ -1,5 +1,42 @@
 
 const CDN = "https://esm.sh/";
+const MANIFEST_FILE = "ziko-notebook-imports.json";
+const isProductionBuild =
+  typeof import.meta.env !== "undefined" && import.meta.env.PROD;
+
+let buildImportMapPromise;
+
+const loadBuildImportMap = () => {
+  if (!isProductionBuild || typeof document === "undefined") {
+    return Promise.resolve({});
+  }
+
+  if (!buildImportMapPromise) {
+    const manifestUrl = new URL(MANIFEST_FILE, document.baseURI);
+
+    buildImportMapPromise = fetch(manifestUrl).then(async (response) => {
+      if (response.status === 404) {
+        return {};
+      }
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to load the notebook import map: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const imports = await response.json();
+
+      if (!imports || typeof imports !== "object" || Array.isArray(imports)) {
+        throw new TypeError("The notebook import map must be a JSON object.");
+      }
+
+      return imports;
+    });
+  }
+
+  return buildImportMapPromise;
+};
 
 const isURL = (source) =>
   /^(?:https?:\/\/|data:|blob:)/i.test(source);
@@ -16,8 +53,10 @@ export const resolveImport = async (
     importMap = {},
     plugins = [],
     resolverEndpoint = "/__notebook_resolve",
+    cdnFallback = true,
   } = {},
 ) => {
+  // Preserve explicit mappings, including package subpaths.
   if (importMap[source]) {
     return importMap[source];
   }
@@ -26,6 +65,7 @@ export const resolveImport = async (
     return source;
   }
 
+  // Preserve runtime-specific and custom resolution hooks.
   for (const plugin of plugins) {
     if (typeof plugin.resolveImport !== "function") {
       continue;
@@ -38,8 +78,17 @@ export const resolveImport = async (
     }
   }
 
+  const buildImportMap = await loadBuildImportMap();
+
+  if (typeof buildImportMap[source] === "string") {
+    return buildImportMap[source];
+  }
+
+  // Ask the host dev server to resolve installed packages.
   try {
-    const params = new URLSearchParams({ specifier: source });
+    const params = new URLSearchParams({
+      specifier: source,
+    });
 
     const response = await fetch(
       `${resolverEndpoint}?${params.toString()}`,
@@ -56,9 +105,19 @@ export const resolveImport = async (
     // The Vite endpoint may not be available outside development.
   }
 
-  return `${CDN}${source}`;
+  if (cdnFallback) {
+    return `${CDN}${source}`;
+  }
+
+  throw new Error(
+    `Cannot resolve "${source}" locally. ` +
+    `Install the package or provide an importMap entry. ` +
+    `CDN fallback is disabled.`,
+  );
 };
 
+// Keep your existing rewriteImportNode implementation below.
+
 export const rewriteImportNode = async (
   node,
   code,
@@ -68,6 +127,8 @@ export const rewriteImportNode = async (
     node.source.value,
     context,
   );
+  const importScope =
+    context.importScopeIdentifier || "__scope__";
 
   // Safely quote the URL in generated JavaScript.
   const url = JSON.stringify(source);
@@ -96,7 +157,7 @@ export const rewriteImportNode = async (
 
   if (namespaceId) {
     return (
-      `__scope__.${namespaceId} = ` +
+      `${importScope}.${namespaceId} = ` +
       `await import(${url});`
     );
   }
@@ -109,17 +170,19 @@ export const rewriteImportNode = async (
 
   if (defaultImportName) {
     lines.push(
-      `__scope__.${defaultImportName} = ` +
+      `${importScope}.${defaultImportName} = ` +
       `${tmp}.default ?? ${tmp};`,
     );
   }
 
   for (const { imported, local } of namedImports) {
     lines.push(
-      `__scope__.${local} = ` +
+      `${importScope}.${local} = ` +
       `${tmp}[${JSON.stringify(imported)}] !== undefined ` +
       `? ${tmp}[${JSON.stringify(imported)}] ` +
-      `: (${tmp}.default ?? ${tmp});`,
+      `: (${tmp}.default?.[${JSON.stringify(imported)}] !== undefined ` +
+      `? ${tmp}.default[${JSON.stringify(imported)}] ` +
+      `: (${tmp}.default ?? ${tmp}));`,
     );
   }
 

package/src/compiler/transform.js

@@ -17,6 +17,7 @@ export const transformImportsAndScope = async (
     importMap = {},
     plugins = [],
     resolverEndpoint,
+    importScopeIdentifier = "__scope__",
   } = {},
 ) => {
   try {
@@ -30,6 +31,7 @@ export const transformImportsAndScope = async (
       importMap,
       plugins,
       resolverEndpoint,
+      importScopeIdentifier,
     };
 
     const modifications = [];
@@ -95,6 +97,8 @@ export const transformImportsAndScope = async (
         transformedCode.slice(modification.end);
     }
 
+    console.log(transformedCode)
+
     return transformedCode;
   } catch (error) {
     if (

package/src/components/MarkdownView/index.js

@@ -33,7 +33,9 @@ export function MarkdownView({
     content
   );
 
-  wrap.onClick(() => actions.editMarkdown());
+  wrap.element.addEventListener("dblclick", () =>
+    actions.editMarkdown()
+  );
 
   return wrap.element;
 }

package/src/index.css

@@ -23,6 +23,10 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: auto;
+  /* max-height: 100vh; */
+  /* scrollbar-color: rebeccapurple transparent; */
+  /* scrollbar-color: var(--prompt-in) transparent; */
 }
 
 .ziko-notebook .cell {

package/src/notebook.js

@@ -33,6 +33,7 @@ export class UINotebook extends UIElement {
   constructor({
     cells: initialCells = [],
     importMap = {},
+    cdnFallback = true,
     runCells = true,
     minLines = 3,
     maxCells = Infinity,
@@ -58,6 +59,7 @@ export class UINotebook extends UIElement {
     this.resetScope();
 
     this.importMap = importMap;
+    this.cdnFallback = cdnFallback;
     this.runtimePlugins = runtimePlugins;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
@@ -312,6 +314,23 @@ export class UINotebook extends UIElement {
     return {
       setActive: () => app.setActiveCell(cellData.id),
 
+      moveToAdjacentCell: (direction) => {
+        const cells = app.store.get("cells");
+        const index = cells.findIndex(
+          (cell) => cell.id === cellData.id
+        );
+        const target = cells[index + direction];
+
+        if (!target) return false;
+
+        app.focusCell(target.id);
+        target._editor.focusAt(
+          direction > 0 ? 0 : target._editor.getValue().length
+        );
+
+        return true;
+      },
+
       runCode: async (autoNext = true) => {
         // If this cell's code is still loading, wait for it.
         await app._resolveCellCode(cellData);
@@ -349,6 +368,7 @@ export class UINotebook extends UIElement {
             cellData._outputRef,
             {
               importMap: app.importMap,
+              cdnFallback: app.cdnFallback,
               plugins: app.runtimePlugins,
               runtime: cellData.runtime,
             },
@@ -542,7 +562,11 @@ export class UINotebook extends UIElement {
   }
 
   this.store.set("activeCellId", id);
-  this._refreshCell(cell);
+  cells.forEach((currentCell) => {
+    if (currentCell._dom) {
+      this._refreshCell(currentCell);
+    }
+  });
 
   // Scroll the target cell into view when it is outside the viewport.
   requestAnimationFrame(() => {