@zikojs/notebook 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "",
   "type": "module",
   "publishConfig": {
@@ -45,16 +45,14 @@
     "@codemirror/view": "^6.43.11",
     "@zikojs/lucide": "^0.2.2",
     "acorn": "^8.18.0",
-    "canvas-confetti": "^1.9.4",
     "codemirror": "^6.0.2",
     "lucide": "^1.44.0",
-    "marked": "^18.0.12",
     "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.2",
     "vanjs-core": "^1.6.1",
     "zextra": "^1.15.0",
-    "ziko": "^2.0.0-beta.15.1"
+    "ziko": "^2.0.0-beta.16.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/codeEditor.js

@@ -5,15 +5,15 @@ import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
-import van from "vanjs-core";
+import { tags } from "ziko/dom";
 
-const { div } = van.tags;
+const { div } = tags;
 
 const languageFor = (type) =>
   type === "markdown" ? markdown() : javascript();
 
 export function createCodeEditor(app, cellData, actions) {
-  const editorDom = div({ class: "input-wrapper" });
+  const editorDom = div({ class: "input-wrapper" }).element;
 
   const languageCompartment = new Compartment();
   const readOnlyCompartment = new Compartment();

package/src/components.js

@@ -21,16 +21,17 @@ import {
   Loader2
 } from './icons.js';
 
-const { div, span, button } = van.tags;
+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 }) {
-  globalThis.tt = tags.div({ class : 'ghh'}, span('jjjj'))
-  const statusBadge = span({ class: "status-badge" }, Loader2(), span('kkk'));
+  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 }, Play(), "Add Code");
@@ -52,11 +53,11 @@ export function Header({ store, actions }) {
     div({ class: "toolbar" }, 
       runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
     )
-  );
+  ).element;
 }
 
 export function MarkdownView({ cellData, actions }) {
-  const content = tags.div().element;
+  const content = div().element;
   
   // Process Markdown asynchronously using Remark + Rehype
   remark()
@@ -71,12 +72,12 @@ export function MarkdownView({ cellData, actions }) {
     });
   
   const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
-  wrap.onclick = () => actions.editMarkdown();
-  return wrap;
+  wrap.onClick(() => actions.editMarkdown())
+  return wrap.element;
 }
 
 export function CellControls({ cellData, store, actions }) {
-  const controlsContainer = div({ class: "cell-controls" });
+  const controlsContainer = div({ class: "cell-controls" }).element;
 
   const renderButtons = () => {
     const isQueueRunning = store.get('executionQueueState').isRunning;
@@ -149,7 +150,7 @@ export function CellControls({ cellData, store, actions }) {
 }
 
 export function CellItem({ cellData, app, store }) {
-  const outputRef = div({ class: "output-area" });
+  const outputRef = div({ class: "output-area" }).element;
   if (cellData.outputNode) outputRef.appendChild(cellData.outputNode);
   cellData._outputRef = outputRef;
 
@@ -157,22 +158,23 @@ export function CellItem({ cellData, app, store }) {
   cellData._actions = actions;
   cellData._editor = createCodeEditor(app, cellData, actions);
 
-  const inPrompt = span({ class: "prompt" });
-  const outPrompt = span({ class: "prompt out" });
-  const bodySlot = div({ style: "display:contents;" });
+  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));
-  const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl);
+  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));
+  // root.onclick = () => app.setActiveCell(cellData.id);
 
-  cellData._dom = root;
+  cellData._dom = root.element;
   cellData._inPrompt = inPrompt;
   cellData._outPrompt = outPrompt;
   cellData._bodySlot = bodySlot;
   cellData._outputGrid = outputGrid;
 
   app._refreshCell(cellData);
-  return root;
+  return root.element;
 }

package/src/notebook.js

@@ -1,11 +1,9 @@
-import van from "vanjs-core";
 import { NotebookStore } from "./store.js";
 import { Header, CellItem, MarkdownView } from "./components.js";
 import { evaluateCodeAsync } from "./transform.js";
+import { tags, UIElement } from "ziko/dom";
 
-const { div } = van.tags;
-
-export class UINotebook {
+export class UINotebook extends UIElement{
   constructor({
     cells: initialCells = [],
     importMap = {},
@@ -15,6 +13,7 @@ export class UINotebook {
     minLines = 3,
     maxCells = Infinity
   } = {}) {
+    super({ element : 'div'})
     this.id = crypto.randomUUID ? crypto.randomUUID() : 'nb_' + Math.random().toString(36).substring(2, 9);
     
     if (!window.__notebook_scope_map) {
@@ -59,7 +58,7 @@ export class UINotebook {
       addCodeBelow: () => this.addCell("code", "", this.store.get('activeCellId'))
     };
 
-    this.cellsContainer = div({ class: "cells-container" });
+    this.cellsContainer = tags.div({ class: "cells-container" }).element;
     this.header = Header({
       store: this.store,
       actions: {
@@ -72,7 +71,11 @@ export class UINotebook {
       }
     });
 
-    this.element = div(this.header, div({ class: "notebook" }, this.cellsContainer));
+    this.append(
+      this.header, 
+      tags.div({ class: "notebook" }, 
+      this.cellsContainer)  
+    )
 
     this._renderAllCells();
 
@@ -117,7 +120,7 @@ export class UINotebook {
           await evaluateCodeAsync(code, cellData._outputRef, app.importMap, scope);
         } catch (err) {
           hasError = true;
-          van.add(cellData._outputRef, div({ class: "error-output" }, err.toString()));
+          tags.div({ class: "error-output" }, err.toString()).mount(cellData._outputRef)
         }
 
         const counter = this.store.get('executionCounter');
@@ -125,7 +128,7 @@ export class UINotebook {
         cellData.execCount = counter;
         cellData.hasDomOutput = cellData._outputRef.childNodes.length > 0 || hasError;
 
-        const container = div({ class: "output-area" });
+        const container = tags.div({ class: "output-area" }).element;
         while (cellData._outputRef.firstChild) container.appendChild(cellData._outputRef.firstChild);
         cellData.outputNode = container;
         cellData._outputRef.appendChild(container);

package/src/transform.js

@@ -1,4 +1,3 @@
-import van from "vanjs-core";
 import * as acorn from "acorn";
 
 export const rewriteImportNode = (node, code, importMapConfig) => {
@@ -21,19 +20,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 `__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(`__scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+    lines.push(`__scope__.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
     return lines.join("\n");
   }
 
-  if (defaultImportName) lines.push(`__scope.${defaultImportName} = ${tmp}.default ?? ${tmp};`);
+  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});`);
+    lines.push(`__scope__.${local} = ${tmp}.${imported} !== undefined ? ${tmp}.${imported} : (${tmp}.default ?? ${tmp});`);
   });
 
   return lines.join("\n");
@@ -53,7 +52,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 += `__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 +61,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 += `__scope.${localName} = ${tempVar}.${keyName}; `;
+                replacementCode += `__scope__.${localName} = ${tempVar}.${keyName}; `;
               }
             });
             replacementCode += `})();\n`;
@@ -73,7 +72,7 @@ export const transformImportsAndScope = (code, importMapConfig) => {
             decl.id.elements.forEach((elem, index) => {
               if (elem && elem.type === "Identifier") {
                 const localName = elem.name;
-                replacementCode += `__scope.${localName} = ${tempVar}[${index}]; `;
+                replacementCode += `__scope__.${localName} = ${tempVar}[${index}]; `;
               }
             });
             replacementCode += `})();\n`;
@@ -83,11 +82,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: `__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: `__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")}` });
       }
     });
 
@@ -105,16 +104,13 @@ 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", "__scope", `
+  const runCell = new Function("TARGET", "__scope__", `
     return (async () => {
-      with (__scope) {
+      with (__scope__) {
         ${compiledCode}
       }
     })();
   `);
 
-  const result = await runCell(TARGET, van, validScope);
-  if (result !== undefined && result !== null) {
-    van.add(TARGET, result);
-  }
+  const result = await runCell(TARGET, validScope);
 };