@zikojs/notebook 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "type": "module",
   "publishConfig": {

package/src/index.d.ts

@@ -0,0 +1,2 @@
+import type { UIElement } from 'ziko/dom/UIElement' 
+export declare function Notebook() : UIElement

package/src/index.js

@@ -4,6 +4,7 @@ import { marked } from "marked";
 import { Button } from "./ui.js";
 import { createCodeEditor } from "./codeEditor.js";
 import { evaluateCodeAsync } from "./transform.js";
+import { call_with_optional_props } from 'ziko/dom/internal-utils'
 
 import {
   Check,
@@ -28,7 +29,7 @@ export function Header({ state, actions }) {
   const { runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn, statusBadge, statusText } = state;
 
   return div({ class: "header" },
-    div({ class: "brand" }, "Jupyter VanJS Notebook", statusBadge),
+    div({ class: "brand" }, "</>", statusBadge),
     div({ class: "toolbar" }, 
       runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
     )
@@ -146,9 +147,7 @@ export function CellItem({ cellData, app }) {
   return root;
 }
 
-// --- MAIN NOTEBOOK APP CLASS ---
-
-export class NotebookApp {
+export class UINotebook {
   constructor({
     cells: initialCells = [],
     importMap = {},
@@ -159,6 +158,17 @@ export class NotebookApp {
     minLines = 3,
     maxCells = Infinity
   } = {}) {
+    // 1. Generate unique UUID for this notebook instance
+    this.id = crypto.randomUUID ? crypto.randomUUID() : 'nb_' + Math.random().toString(36).substring(2, 9);
+    
+    // 2. Initialize the global scope map if not already present
+    if (!window.__notebook_scope_map) {
+      window.__notebook_scope_map = new Map();
+    }
+    
+    // 3. Register this instance's isolated scope
+    this.resetScope();
+
     this.importMap = importMap;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
@@ -290,7 +300,11 @@ export class NotebookApp {
         let hasError = false;
 
         try {
-          await evaluateCodeAsync(code, cellData._outputRef, app.importMap);
+          // Retrieve this specific instance's compatible scope from window.__notebook_scope_map
+          const scope = app.getScope();
+          
+          // Pass either the scope object or the instance ID (app.id) to evaluateCodeAsync
+          await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
         } catch (err) {
           hasError = true;
           van.add(cellData._outputRef, div({ class: "error-output" }, err.toString()));
@@ -376,7 +390,7 @@ export class NotebookApp {
     cellData._controlsEl.replaceChildren(...buttons);
   }
 
-  // --- STATE MUTATORS ---
+  // --- STATE & SCOPE MUTATORS ---
 
   _renderAllCells() {
     this.cellsContainer.replaceChildren(...this.cells_state.map(c => c._dom || this._buildCellDom(c)));
@@ -486,7 +500,19 @@ export class NotebookApp {
   }
 
   resetScope() {
-    window.__notebook_scope = Object.create(null);
+    if (!window.__notebook_scope_map) {
+      window.__notebook_scope_map = new Map();
+    }
+    const newScope = Object.create(null);
+    window.__notebook_scope_map.set(this.id, newScope);
+    return newScope;
+  }
+
+  getScope() {
+    if (!window.__notebook_scope_map || !window.__notebook_scope_map.has(this.id)) {
+      return this.resetScope();
+    }
+    return window.__notebook_scope_map.get(this.id);
   }
 
   getNotebookData({ inputs = true, outputs = true } = {}) {
@@ -497,4 +523,7 @@ export class NotebookApp {
       return exportedCell;
     });
   }
-}
+}
+
+
+export const Notebook = call_with_optional_props(UINotebook)

package/src/transform.js

@@ -21,19 +21,19 @@ export const rewriteImportNode = (node, code, importMapConfig) => {
     else if (spec.type === "ImportSpecifier") namedImports.push({ imported: spec.imported.name, local: spec.local.name });
   });
 
-  if (namespaceId) return `window.__notebook_scope.${namespaceId} = await import("${source}");`;
+  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(`window.__notebook_scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+    lines.push(`__scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
     return lines.join("\n");
   }
 
-  if (defaultImportName) lines.push(`window.__notebook_scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+  if (defaultImportName) lines.push(`__scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
   namedImports.forEach(({ imported, local }) => {
-    lines.push(`window.__notebook_scope.${local} = ${tmp}.${imported} !== undefined ? ${tmp}.${imported} : (${tmp}.default ?? ${tmp});`);
+    lines.push(`__scope.${local} = ${tmp}.${imported} !== undefined ? ${tmp}.${imported} : (${tmp}.default ?? ${tmp});`);
   });
 
   return lines.join("\n");
@@ -53,7 +53,7 @@ export const transformImportsAndScope = (code, importMapConfig) => {
           if (decl.id.type === "Identifier") {
             const varName = decl.id.name;
             const initCode = decl.init ? code.slice(decl.init.start, decl.init.end) : "undefined";
-            replacementCode += `window.__notebook_scope.${varName} = ${initCode};\n`;
+            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}`;
@@ -62,7 +62,7 @@ export const transformImportsAndScope = (code, importMapConfig) => {
               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 += `window.__notebook_scope.${localName} = ${tempVar}.${keyName}; `;
+                replacementCode += `__scope.${localName} = ${tempVar}.${keyName}; `;
               }
             });
             replacementCode += `})();\n`;
@@ -73,7 +73,7 @@ export const transformImportsAndScope = (code, importMapConfig) => {
             decl.id.elements.forEach((elem, index) => {
               if (elem && elem.type === "Identifier") {
                 const localName = elem.name;
-                replacementCode += `window.__notebook_scope.${localName} = ${tempVar}[${index}]; `;
+                replacementCode += `__scope.${localName} = ${tempVar}[${index}]; `;
               }
             });
             replacementCode += `})();\n`;
@@ -83,11 +83,11 @@ export const transformImportsAndScope = (code, importMapConfig) => {
       } 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: `window.__notebook_scope.${funcName} = ${funcBody.replace(/^function\s+\w+/, "function")}` });
+        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: `window.__notebook_scope.${className} = ${classBody.replace(/^class\s+\w+/, "class")}` });
+        modifications.push({ start: node.start, end: node.end, replacement: `__scope.${className} = ${classBody.replace(/^class\s+\w+/, "class")}` });
       }
     });
 
@@ -101,18 +101,19 @@ export const transformImportsAndScope = (code, importMapConfig) => {
   }
 };
 
-export const evaluateCodeAsync = async (code, TARGET, importMapConfig) => {
+export const evaluateCodeAsync = async (code, TARGET, importMapConfig, scope) => {
+  const validScope = scope || Object.create(null);
   const compiledCode = transformImportsAndScope(code, importMapConfig);
 
-  const runCell = new Function("TARGET", "van", `
+  const runCell = new Function("TARGET", "van", "__scope", `
     return (async () => {
-      with (window.__notebook_scope) {
+      with (__scope) {
         ${compiledCode}
       }
     })();
   `);
 
-  const result = await runCell(TARGET, van);
+  const result = await runCell(TARGET, van, validScope);
   if (result !== undefined && result !== null) {
     van.add(TARGET, result);
   }