@zikojs/notebook 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "",
   "type": "module",
   "publishConfig": {
@@ -54,7 +54,7 @@
     "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

@@ -114,7 +114,7 @@ export const evaluateCodeAsync = async (code, TARGET, importMapConfig, scope) =>
   `);
 
   const result = await runCell(TARGET, van, validScope);
-  if (result !== undefined && result !== null) {
-    van.add(TARGET, result);
-  }
+  // if (result !== undefined && result !== null) {
+  //   van.add(TARGET, result);
+  // }
 };