@zikojs/notebook 0.8.0 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.8.0",
-  "description": "",
+  "version": "0.10.0",
+  "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -44,6 +44,7 @@
     "@codemirror/state": "^6.7.4",
     "@codemirror/view": "^6.43.11",
     "@zikojs/lucide": "^0.2.2",
+    "@zikojs/console": "latest",
     "acorn": "^8.18.0",
     "codemirror": "^6.0.2",
     "lucide": "^1.44.0",
@@ -52,7 +53,7 @@
     "remark-rehype": "^11.1.2",
     "vanjs-core": "^1.6.1",
     "zextra": "^1.15.0",
-    "ziko": "^2.0.0-beta.16.0"
+    "ziko": "latest"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/compiler/evaluate.js

@@ -1,6 +1,4 @@
-import {
-  transformImportsAndScope,
-} from "./transform.js";
+import { transformImportsAndScope } from "./transform.js";
 
 export const evaluateCodeAsync = async (
   code,
@@ -8,6 +6,7 @@ export const evaluateCodeAsync = async (
   {
     importMap = {},
     plugins = [],
+    runtime = null,
   } = {},
   scope,
 ) => {
@@ -19,11 +18,34 @@ export const evaluateCodeAsync = async (
     scope: validScope,
     importMap,
     plugins,
+    runtime,
   };
 
+  const selectedPlugin = plugins.find(
+    p => p.name === runtime,
+  );
+
+  // Runtime-specific evaluator
+  if (
+    selectedPlugin &&
+    selectedPlugin.evaluate
+  ) {
+    return await selectedPlugin.evaluate(
+      code,
+      context,
+    );
+  }
+
   let compiledCode = code;
 
   for (const plugin of plugins) {
+    if (
+      selectedPlugin &&
+      plugin.name !== runtime
+    ) {
+      continue;
+    }
+
     if (plugin.transform) {
       compiledCode = await plugin.transform(
         compiledCode,
@@ -32,20 +54,29 @@ export const evaluateCodeAsync = async (
     }
   }
 
-  compiledCode = transformImportsAndScope(
-    compiledCode,
-    importMap,
-  );
+  compiledCode =
+    transformImportsAndScope(
+      compiledCode,
+      importMap,
+    );
 
   const runCell = new Function(
     "TARGET",
     "__scope__",
     `
-      return (async () => {
-        with (__scope__) {
+    // Bind the active TARGET for this cell evaluation
+    if (typeof __Ziko__ !== "undefined" && __Ziko__.__Config__) {
+      __Ziko__.__Config__.default.target = TARGET;
+      __Ziko__.__Config__.default.autoMount = true;
+    }
+
+    return (async () => {
+      with (__scope__) {
+        return await (async () => {
           ${compiledCode}
-        }
-      })();
+        })();
+      }
+    })();
     `,
   );
 
@@ -55,6 +86,13 @@ export const evaluateCodeAsync = async (
   );
 
   for (const plugin of plugins) {
+    if (
+      selectedPlugin &&
+      plugin.name !== runtime
+    ) {
+      continue;
+    }
+
     if (plugin.afterEvaluate) {
       result = await plugin.afterEvaluate(
         result,

package/src/components/CellItem/index.js

@@ -29,13 +29,21 @@ export function CellItem({ cellData, app, store }) {
   const actions = app._cellActions(cellData);
   cellData._actions = actions;
   cellData._editor = createCodeEditor(app, cellData, actions);
+  
   /* Check ziko */
-  const [In, setIn] = useState(0)
-  globalThis.setIn = setIn
+  const [In, setIn] = useState(0);
+  globalThis.setIn = setIn;
   const inPrompt = span({ class: "prompt" }, In);
   const outPrompt = span({ class: "prompt out" });
-  const bodySlot = div().style({ display : 'contents'});
-  const controlsEl = CellControls({ cellData, store, actions });
+  const bodySlot = div().style({ display: 'contents' });
+  
+  // Pass runtimePlugins from app into CellControls
+  const controlsEl = CellControls({ 
+    cellData, 
+    store, 
+    actions, 
+    runtimePlugins: app.runtimePlugins 
+  });
 
   const outputGrid = div({ class: "cell-output-grid" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
   const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl);
@@ -47,13 +55,12 @@ export function CellItem({ cellData, app, store }) {
   cellData._outPrompt = outPrompt.element;
   cellData._bodySlot = bodySlot.element;
   cellData._outputGrid = outputGrid.element;
-  cellData._setIn = setIn
+  cellData._setIn = setIn;
 
   app._refreshCell(cellData);
   return root.element;
 }
-
-export function CellControls({ cellData, store, actions }) {
+export function CellControls({ cellData, store, actions, runtimePlugins = [] }) {
   const controlsContainer = div({ class: "cell-controls" }).element;
 
   const renderButtons = () => {
@@ -61,7 +68,38 @@ export function CellControls({ cellData, store, actions }) {
     const isMaxCellsReached = store.get('cells').length >= store.get('maxCells');
     const isCopied = cellData._copiedFlag === true;
 
-    controlsContainer.replaceChildren(
+    // Build the runtime selector dropdown for code cells using native DOM options
+    let runtimeSelectEl = null;
+    if (cellData.type === "code") {
+      const selectElement = document.createElement("select");
+      selectElement.className = "runtime-select";
+      selectElement.title = "Select Cell Runtime";
+      selectElement.disabled = cellData.readonly;
+      
+      selectElement.onchange = (e) => {
+        actions.setRuntime(e.target.value === "" ? null : e.target.value);
+      };
+
+      // Default JS option
+      const optJs = document.createElement("option");
+      optJs.value = "";
+      optJs.textContent = "JS";
+      selectElement.appendChild(optJs);
+
+      // Runtime plugin options
+      for (const p of runtimePlugins) {
+        const opt = document.createElement("option");
+        opt.value = p.name;
+        opt.textContent = p.name.charAt(0).toUpperCase() + p.name.slice(1);
+        selectElement.appendChild(opt);
+      }
+
+      // Explicitly set the active value
+      selectElement.value = cellData.runtime || "";
+      runtimeSelectEl = selectElement;
+    }
+
+    const children = [
       Button({ 
         class: `btn-icon ${isCopied ? "btn-active" : ""}`, 
         title: isCopied ? "Copied!" : "Copy Cell Content", 
@@ -117,7 +155,13 @@ export function CellControls({ cellData, store, actions }) {
         disabled: isQueueRunning, 
         onclick: actions.deleteCell 
       }, Trash2())
-    );
+    ];
+
+    if (runtimeSelectEl) {
+      children.unshift(runtimeSelectEl);
+    }
+
+    controlsContainer.replaceChildren(...children);
   };
 
   renderButtons();

package/src/components/Header/index.js

@@ -1,4 +1,4 @@
-import van from "vanjs-core";
+import van from 'vanjs-core';
 
 import {
   FileText,
@@ -16,20 +16,20 @@ import { tags } from 'ziko/dom'
 
 const { div, span } = tags
 
-export const Button = ({ class: className = "", title = "", disabled = false, onclick }, ...children) =>
+export const Button = ({ class: className = '', title = '', disabled = false, onclick }, ...children) =>
   button({ class: `btn ${className}`, title, disabled, onclick }, ...children);
 
 export function Header({ store, actions }) {
-  const statusBadge = span({ class: "status-badge" }, Loader2(), span('Loading ...'));
-  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 }, Plus(), "Add Code");
-  const addMdBtn = Button({ onclick: actions.addMarkdown }, FileText(), "Add Markdown");
-  const deleteActiveBtn = Button({ onclick: actions.deleteActive }, Trash2(), "Delete Active");
-  const exportBtn = Button({ onclick: actions.exportData }, Download(), "Export Data");
+  const statusBadge = span({ class: 'status-badge' }, Loader2(), span('Loading ...'));
+  const runAllBtn = Button({ class: 'btn-primary', onclick: actions.runAll, title : 'Run All' }, PlayForward());
+  const clearBtn = Button({ onclick: actions.clearOutputs, title : 'Clear Outputs' }, Eraser());
+  const addCodeBtn = Button({ onclick: actions.addCode, title : 'Add Code'}, Plus());
+  const addMdBtn = Button({ onclick: actions.addMarkdown, title : 'Add Markdown' }, FileText());
+  const deleteActiveBtn = Button({ onclick: actions.deleteActive, title : 'Delete Active cell' }, Trash2());
+  const exportBtn = Button({ onclick: actions.exportData, title : 'Export Data' }, Download());
 
   store.on('change:executionQueueState', (q) => {
-    statusBadge.style({display :q.isRunning ? "inline-flex" : "none" })
+    statusBadge.style({display :q.isRunning ? 'inline-flex' : 'none' })
     statusBadge.element.lastChild.textContent = `Executing Queue (${q.currentIndex + 1}/${q.total})`;
     [runAllBtn, clearBtn, deleteActiveBtn].forEach(b => { b.disabled = q.isRunning; });
     const maxReached = store.get('cells').length >= store.get('maxCells');
@@ -37,9 +37,9 @@ export function Header({ store, actions }) {
     addMdBtn.disabled = q.isRunning || maxReached;
   });
 
-  return div({ class: "header" },
-    div({ class: "brand" }, "</>", statusBadge),
-    div({ class: "toolbar" }, 
+  return div({ class: 'header' },
+    // div({ class: 'brand' }, '</>', statusBadge),
+    div({ class: 'toolbar' }, 
       runAllBtn, clearBtn, addCodeBtn, addMdBtn, deleteActiveBtn, exportBtn
     )
   ).element;

package/src/components/MarkdownView/index.js

@@ -2,27 +2,132 @@ import { remark } from "remark";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
 
+import { tags } from "ziko/dom";
 
-import { tags } from 'ziko/dom'
+const { div } = tags;
 
-const { div } = tags
-
-export function MarkdownView({ cellData, actions }) {
+export function MarkdownView({
+  cellData,
+  actions,
+  remarkPlugins = [],
+  rehypePlugins = [],
+}) {
   const content = div();
-  
-  // Process Markdown asynchronously using Remark + Rehype
+
   remark()
+    .use(remarkPlugins)
     .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypePlugins)
     .use(rehypeStringify)
     .process(cellData.code || "*Empty Markdown Cell*")
     .then((file) => {
       content.element.innerHTML = String(file);
     })
     .catch((err) => {
-      content.element.innerHTML = `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
+      content.element.innerHTML =
+        `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
     });
-  
-  const wrap = div({ class: "markdown-rendered-cell markdown-body" }, content);
-  wrap.onClick(() => actions.editMarkdown())
+
+  const wrap = div(
+    { class: "markdown-rendered-cell markdown-body" },
+    content
+  );
+
+  wrap.onClick(() => actions.editMarkdown());
+
   return wrap.element;
-}
+}
+
+
+
+// import { remark } from "remark";
+// import remarkRehype from "remark-rehype";
+// import rehypeStringify from "rehype-stringify";
+
+// import { tags } from "ziko/dom";
+
+// const { div } = tags;
+
+// /**
+//  * Activate elements inserted through innerHTML.
+//  *
+//  * Scripts created by innerHTML are inert, so recreate them
+//  * as real DOM nodes. This also handles external scripts.
+//  */
+// async function activateHTML(container) {
+//   const scripts = [
+//     ...container.querySelectorAll("script"),
+//   ];
+
+//   for (const oldScript of scripts) {
+//     const script = document.createElement("script");
+
+//     for (const attribute of oldScript.attributes) {
+//       script.setAttribute(
+//         attribute.name,
+//         attribute.value
+//       );
+//     }
+
+//     script.textContent = oldScript.textContent;
+
+//     oldScript.replaceWith(script);
+
+//     if (script.src) {
+//       await new Promise((resolve, reject) => {
+//         script.addEventListener(
+//           "load",
+//           resolve,
+//           { once: true }
+//         );
+
+//         script.addEventListener(
+//           "error",
+//           reject,
+//           { once: true }
+//         );
+//       });
+//     }
+//   }
+// }
+
+// export function MarkdownView({
+//   cellData,
+//   actions,
+//   remarkPlugins = [],
+//   rehypePlugins = [],
+// }) {
+//   const content = div();
+
+//   remark()
+//     .use(remarkPlugins)
+//     .use(remarkRehype, {
+//       allowDangerousHtml: true,
+//     })
+//     .use(rehypePlugins)
+//     .use(rehypeStringify)
+//     .process(cellData.code || "*Empty Markdown Cell*")
+//     .then(async (file) => {
+//       content.element.innerHTML = String(file);
+
+//       await activateHTML(content.element);
+//     })
+//     .catch((err) => {
+//       content.element.innerHTML = `
+//         <div class="error-output">
+//           Markdown rendering error: ${err.message}
+//         </div>
+//       `;
+//     });
+
+//   const wrap = div(
+//     {
+//       class: "markdown-rendered-cell markdown-body",
+//     },
+//     content
+//   );
+
+//   wrap.onClick(() => actions.editMarkdown());
+
+//   return wrap.element;
+// }

package/src/components/index.css

@@ -1,4 +1,21 @@
 @import url('./ErrorOutput/index.css');
 @import url('./Button/index.css');
 @import url('./Header/index.css');
-@import url('./MarkdownView//index.css');
+@import url('./MarkdownView//index.css');
+
+.ziko-notebook .runtime-select {
+  font-family: inherit;
+  font-size: 11px;
+  padding: 2px 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: #ffffff;
+  color: #1e293b;
+  cursor: pointer;
+  height: 24px;
+}
+
+.ziko-notebook .runtime-select:focus {
+  outline: none;
+  border-color: var(--primary);
+}

package/src/index.css

@@ -141,7 +141,7 @@
 
   .ziko-notebook .toolbar {
     width: 100%;
-    justify-content: flex-start;
+    justify-content: center;
   }
 
   .ziko-notebook .cell-input-grid {

package/src/index.d.ts

@@ -1,5 +1,97 @@
-import type { UIElement } from 'ziko/dom/UIElement' 
-export declare class UINotebook extends UIElement{
 
+import type { UIElement } from "ziko/dom/UIElement";
+
+export type MaybePromise<T> = T | PromiseLike<T>;
+
+export interface NotebookCell {
+  id?: number;
+  type?: "code" | "markdown";
+  code?: MaybePromise<string>;
+  readonly?: boolean;
+  runtime?: string | null;
+  isEditingMarkdown?: boolean;
+  execCount?: number | null;
+  outputNode?: HTMLElement | null;
+  hasDomOutput?: boolean;
+}
+
+export type NotebookCells = MaybePromise<NotebookCell[]>;
+
+export interface NotebookOptions {
+  /**
+   * Initial cells, or a Promise resolving to the cells.
+   */
+  cells?: NotebookCells;
+
+  importMap?: Record<string, string>;
+  runCells?: boolean;
+  minLines?: number;
+  maxCells?: number;
+  showHeader?: boolean;
+  codeMirrorConfig?: unknown[] | Record<string, unknown>;
+  codeMirrorPlugins?: unknown[];
+  runtimePlugins?: Array<{
+    name: string;
+    [key: string]: unknown;
+  }>;
+  remarkPlugins?: unknown[];
+  rehypePlugins?: unknown[];
+}
+
+export declare class UINotebook extends UIElement {
+  constructor(options?: NotebookOptions);
+
+  /**
+   * Resolves when initial cells and Promise-based cell code
+   * have finished loading.
+   *
+   * Rejects if the initial cells source fails or does not
+   * resolve to an array. Individual code-source failures are
+   * displayed in their respective cells.
+   */
+  readonly ready: Promise<this>;
+
+  readonly id: string;
+
+  importMap: Record<string, string>;
+  runtimePlugins: NotebookOptions["runtimePlugins"];
+  codeMirrorConfig: NotebookOptions["codeMirrorConfig"];
+  codeMirrorPlugins: unknown[];
+  remarkPlugins: unknown[];
+  rehypePlugins: unknown[];
+  minLines: number;
+  maxCells: number;
+
+  runCell(id: number): Promise<void>;
+  runAllCells(): Promise<void>;
+
+  addCell(
+    type?: "code" | "markdown",
+    initialCode?: MaybePromise<string> | null,
+    afterId?: number | null,
+    readonly?: boolean
+  ): number | null;
+
+  deleteCell(id: number): void;
+  setActiveCell(id: number): void;
+  focusCell(id: number): void;
+  clearOutputs(): void;
+  resetScope(): Record<string, unknown>;
+  getScope(): Record<string, unknown>;
+
+  getNotebookData(options?: {
+    inputs?: boolean;
+    outputs?: boolean;
+  }): Array<{
+    id: number;
+    type: "code" | "markdown";
+    readonly: boolean;
+    order: number | null;
+    code?: string;
+    outputHtml?: string | null;
+  }>;
 }
-export declare function Notebook() : UINotebook
+
+export declare function Notebook(
+  options?: NotebookOptions
+): UINotebook;