@zikojs/notebook 0.8.0 → 0.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.8.0",
-  "description": "",
+  "version": "0.9.0",
+  "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {
     "access": "public"

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,10 +54,11 @@ export const evaluateCodeAsync = async (
     }
   }
 
-  compiledCode = transformImportsAndScope(
-    compiledCode,
-    importMap,
-  );
+  compiledCode =
+    transformImportsAndScope(
+      compiledCode,
+      importMap,
+    );
 
   const runCell = new Function(
     "TARGET",
@@ -55,6 +78,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/notebook.js

@@ -21,12 +21,15 @@ export class UINotebook extends UIElement{
     cells: initialCells = [],
     importMap = {},
     runCells = true,
-    codeMirrorConfig = {},
-    codeMirrorPlugins = [],
     minLines = 3,
     maxCells = Infinity,
     showHeader = true,
-    runtimePlugins = []
+    codeMirrorConfig = {},
+    codeMirrorPlugins = [],
+    runtimePlugins = [],
+    remarkPlugins = [],
+    rehypePlugins = []
+
   } = {}) {
     super({ element : 'div'})
     this.setAttr({class : 'ziko-notebook'})
@@ -41,6 +44,8 @@ export class UINotebook extends UIElement{
     this.runtimePlugins = runtimePlugins;
     this.codeMirrorConfig = codeMirrorConfig;
     this.codeMirrorPlugins = codeMirrorPlugins;
+    this.remarkPlugins = remarkPlugins;
+    this.rehypePlugins = rehypePlugins;
     this.minLines = minLines;
     this.maxCells = maxCells;
 
@@ -53,6 +58,7 @@ export class UINotebook extends UIElement{
         type: cell.type || "code",
         code: cell.code || "",
         readonly: cell.readonly ?? false,
+        runtime: cell.runtime || null,
         isEditingMarkdown: cell.readonly ? false : (cell.isEditingMarkdown ?? true),
         execCount: cell.execCount ?? null,
         outputNode: cell.outputNode || null,
@@ -142,12 +148,13 @@ export class UINotebook extends UIElement{
             {
               importMap: app.importMap,
               plugins: app.runtimePlugins,
+              runtime: cellData.runtime // <-- Passed dynamically from the cell configuration
             },
             scope,
           );
         } catch (err) {
           hasError = true;
-          ErrorOutput(err).mount(cellData._outputRef)
+          ErrorOutput(err).mount(cellData._outputRef);
         }
 
         const counter = this.store.get('executionCounter');
@@ -192,7 +199,11 @@ export class UINotebook extends UIElement{
         app._refreshCell(cellData);
       },
       addBelow: () => app.addCell(cellData.type, null, cellData.id),
-      deleteCell: () => app.deleteCell(cellData.id)
+      deleteCell: () => app.deleteCell(cellData.id),
+      setRuntime: (newRuntime) => {
+        cellData.runtime = newRuntime;
+        app._refreshCell(cellData);
+      },
     };
   }
 
@@ -212,7 +223,12 @@ export class UINotebook extends UIElement{
 
     cellData._editor.sync(isActive, isMarkdownView);
     cellData._bodySlot.replaceChildren(
-      isMarkdownView ? MarkdownView({ cellData, actions: cellData._actions }) : cellData._editor.dom
+      isMarkdownView ? MarkdownView({ 
+        cellData, 
+        actions: cellData._actions,
+        remarkPlugins : this.remarkPlugins,
+        rehypePlugins : this.rehypePlugins
+      }) : cellData._editor.dom
     );
 
     const showOutput = cellData.type === "code" && cellData.hasDomOutput;
@@ -226,20 +242,34 @@ export class UINotebook extends UIElement{
   }
 
   setActiveCell(id) {
-    const currentActiveId = this.store.get('activeCellId');
-    if (currentActiveId === id) return;
+  const cells = this.store.get('cells');
+  const target = cells.find(c => c.id === id);
 
-    // Check all cells and close editing mode for any markdown cells that are losing focus
-    this.store.get('cells').forEach(c => {
-      if (c.type === "markdown" && c.isEditingMarkdown) {
-        c.isEditingMarkdown = false;
-        this._refreshCell(c);
-      }
-    });
+  if (!target) return;
+
+  const currentActiveId = this.store.get('activeCellId');
 
-    this.store.set('activeCellId', id);
+  if (currentActiveId === id) {
+    return;
   }
 
+  // Only one cell can be active.
+  cells.forEach(cell => {
+    if (cell.id !== id && cell.type === "markdown") {
+      cell.isEditingMarkdown = false;
+    }
+  });
+
+  this.store.set('activeCellId', id);
+
+  // Refresh every cell so the previous active cell loses "active".
+  cells.forEach(cell => {
+    if (cell._dom) {
+      this._refreshCell(cell);
+    }
+  });
+}
+
   focusCell(targetId) {
     // Close editing on other markdown cells before focusing
     this.store.get('cells').forEach(c => {
@@ -268,6 +298,7 @@ export class UINotebook extends UIElement{
     const newCell = {
       id: newId, type, code: initialCode !== null ? initialCode : defaultText, readonly,
       isEditingMarkdown: !readonly && type === "markdown" && initialCode === null,
+      runtime: null,
       execCount: null, outputNode: null, hasDomOutput: false, _copiedFlag: false,
       _dom: null, _editor: null, _actions: null,
       _inPrompt: null, _outPrompt: null, _bodySlot: null, _outputGrid: null, _outputRef: null