@zoijs/core 1.3.2 → 1.5.0

package/package.json

@@ -1,63 +1,71 @@
-{
-  "name": "@zoijs/core",
-  "version": "1.3.2",
-  "description": "Zoijs — a beginner-friendly, no-build, no-Virtual-DOM frontend framework. Plain HTML, CSS, and JavaScript.",
-  "type": "module",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "default": "./src/index.js"
-    }
-  },
-  "files": [
-    "src",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "sideEffects": false,
-  "engines": {
-    "node": ">=18"
-  },
-  "author": "Zoijs contributors (https://zoijs.dev)",
-  "license": "MIT",
-  "homepage": "https://zoijs.dev",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Zoijs/zoijs.git",
-    "directory": "framework"
-  },
-  "bugs": {
-    "url": "https://github.com/Zoijs/zoijs/issues"
-  },
-  "keywords": [
-    "zoijs",
-    "framework",
-    "frontend",
-    "ui",
-    "reactive",
-    "reactivity",
-    "signals",
-    "no-build",
-    "no-jsx",
-    "no-virtual-dom",
-    "fine-grained",
-    "beginner-friendly",
-    "html",
-    "spa"
-  ],
-  "scripts": {
-    "test": "node --test --import ./tests/setup-dom.js",
-    "test:unit": "node --test",
-    "test:types": "tsc --noEmit -p tsconfig.json",
-    "test:browser": "playwright test",
-    "dev": "npx serve -l 7310 ."
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.61.1",
-    "jsdom": "^29.1.1",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "@zoijs/core",
+  "version": "1.5.0",
+  "description": "Zoijs — a beginner-friendly, no-build, no-Virtual-DOM frontend framework. Plain HTML, CSS, and JavaScript.",
+  "type": "module",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./devtools": {
+      "types": "./src/devtools.d.ts",
+      "default": "./src/reactivity/devtools.js"
+    },
+    "./server": {
+      "types": "./src/server.d.ts",
+      "default": "./src/server.js"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "author": "Zoijs contributors (https://zoijs.dev)",
+  "license": "MIT",
+  "homepage": "https://zoijs.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Zoijs/zoijs.git",
+    "directory": "framework"
+  },
+  "bugs": {
+    "url": "https://github.com/Zoijs/zoijs/issues"
+  },
+  "keywords": [
+    "zoijs",
+    "framework",
+    "frontend",
+    "ui",
+    "reactive",
+    "reactivity",
+    "signals",
+    "no-build",
+    "no-jsx",
+    "no-virtual-dom",
+    "fine-grained",
+    "beginner-friendly",
+    "html",
+    "spa"
+  ],
+  "scripts": {
+    "test": "node --test --import ./tests/setup-dom.js",
+    "test:unit": "node --test",
+    "test:types": "tsc --noEmit -p tsconfig.json",
+    "test:browser": "playwright test",
+    "dev": "npx serve -l 7310 ."
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.9.3"
+  }
+}

package/src/core/each.js

@@ -1,24 +1,24 @@
-// each() — keyed list rendering (Milestone 3).
-//
-// Returns a small marker object that the renderer recognizes in a text slot and
-// turns into a keyed list binding. Keeping this factory tiny (and separate from
-// the renderer) avoids a circular import — the renderer just checks the marker.
-//
-//   ${each(
-//     () => todos.get(),        // items: a reactive function (or a plain array)
-//     todo => todo.id,          // keyFn: a stable unique key per item
-//     todo => html`<li>...</li>` // renderFn: builds DOM for one item
-//   )}
-//
-// When the array changes, items with matching keys reuse their DOM nodes (moved
-// if reordered); new keys are inserted; removed keys are disposed and removed.
-
-/**
- * @param {Function|Array} items    a function returning the array, or an array
- * @param {Function} keyFn          item -> unique key
- * @param {Function} renderFn       item -> html() result
- * @returns {{ __zoijsEach: true, items: any, keyFn: Function, renderFn: Function }}
- */
-export function each(items, keyFn, renderFn) {
-  return { __zoijsEach: true, items, keyFn, renderFn };
-}
+// each() — keyed list rendering (Milestone 3).
+//
+// Returns a small marker object that the renderer recognizes in a text slot and
+// turns into a keyed list binding. Keeping this factory tiny (and separate from
+// the renderer) avoids a circular import — the renderer just checks the marker.
+//
+//   ${each(
+//     () => todos.get(),        // items: a reactive function (or a plain array)
+//     todo => todo.id,          // keyFn: a stable unique key per item
+//     todo => html`<li>...</li>` // renderFn: builds DOM for one item
+//   )}
+//
+// When the array changes, items with matching keys reuse their DOM nodes (moved
+// if reordered); new keys are inserted; removed keys are disposed and removed.
+
+/**
+ * @param {Function|Array} items    a function returning the array, or an array
+ * @param {Function} keyFn          item -> unique key
+ * @param {Function} renderFn       item -> html() result
+ * @returns {{ __zoijsEach: true, items: any, keyFn: Function, renderFn: Function }}
+ */
+export function each(items, keyFn, renderFn) {
+  return { __zoijsEach: true, items, keyFn, renderFn };
+}

package/src/core/html.js

@@ -7,8 +7,10 @@
 // attribute value, an event, etc. Dynamic values are kept in a separate channel
 // from the static HTML; a value can never change the template's structure.
 //
-// Output of the parse (cached per `strings`):
-//   template : a <template> element with unique markers
+// Output of the parse (cached per `strings`) is DOM-free — a static HTML string
+// plus part descriptors. The <template> element is built lazily on first client
+// render; on a server, @zoijs/ssr reads the static HTML + parts directly.
+//   html     : the static HTML string, with unique markers (no DOM)
 //   parts    : ordered list of binding descriptors
 //      { type: "child" }                          ← a comment-marker anchor
 //      { type: "element", attrs: [AttrPart] }     ← element carrying data-zoijs-bind
@@ -29,10 +31,24 @@ const cache = new WeakMap();
 export function html(strings, ...values) {
   let compiled = cache.get(strings);
   if (!compiled) {
-    compiled = compile(strings);
+    compiled = compile(strings); // pure: a static HTML string + parts, NO DOM
     cache.set(strings, compiled);
   }
-  return { template: compiled.template, parts: compiled.parts, hasElements: compiled.hasElements, values };
+  // The <template> element is created lazily, on first client render — so html()
+  // itself touches no DOM and works on a server (where @zoijs/ssr reads the static
+  // HTML + parts instead). The brand lets consumers detect a result without
+  // tripping the getter.
+  return {
+    __zoijsTemplate: true,
+    parts: compiled.parts,
+    hasElements: compiled.hasElements,
+    __staticHTML: compiled.html,
+    get template() {
+      if (!compiled.template) compiled.template = createTemplate(compiled.html);
+      return compiled.template;
+    },
+    values,
+  };
 }
 
 // ---- scanner ----------------------------------------------------------------
@@ -239,5 +255,8 @@ function compile(strings) {
   }
 
   const hasElements = parts.some((p) => p.type === "element");
-  return { template: createTemplate(out), parts, hasElements };
+  // Pure output: the static HTML string and the part descriptors. The DOM
+  // <template> is built later, lazily (see html()), so compile() needs no DOM and
+  // its result can be serialized on a server.
+  return { html: out, parts, hasElements, template: null };
 }