npm - tutuca - Versions diffs - 0.9.111 → 0.9.113 - Mend

tutuca 0.9.111 → 0.9.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/tutuca-cli.js +55 -11
package/dist/tutuca-dev.ext.js +9 -4
package/dist/tutuca-dev.js +9 -4
package/dist/tutuca-dev.min.js +2 -2
package/dist/tutuca-extra.ext.js +9 -4
package/dist/tutuca-extra.js +9 -4
package/dist/tutuca-extra.min.js +2 -2
package/dist/tutuca-storybook.js +106 -7
package/dist/tutuca.ext.js +9 -4
package/dist/tutuca.js +9 -4
package/dist/tutuca.min.js +2 -2
package/package.json +2 -2
package/skill/tutuca/margaui.md +39 -0
package/skill/tutuca/storybook.md +26 -0
package/skill/tutuca/testing.md +8 -2
package/skill/tutuca-source/tutuca.ext.js +9 -4

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tutuca",
-  "version": "0.9.111",
+  "version": "0.9.113",
   "type": "module",
   "description": "SPA framework with immutable state and virtual DOM; dependency-free browser bundle",
   "main": "./dist/tutuca.js",
@@ -34,7 +34,7 @@
     "sync-docs-storybook": "bun scripts/sync-docs-storybook.js",
     "build-skill": "bun scripts/build-skill.js",
     "clean-skill": "rm -rf skill",
-    "test": "bun test test/*.test.js",
+    "test": "bun run dist && bun run dist-ext && bun test test/*.test.js",
     "test-watch": "bun test --watch test/*.test.js",
     "format": "bunx @biomejs/biome format --write",
     "lint": "bunx @biomejs/biome lint",

package/skill/tutuca/margaui.md CHANGED Viewed

@@ -68,6 +68,45 @@ that reason):
 Trade-off: no runtime network dependency and a frozen version, at the
 cost of updating the vendored files by hand.
+## Dark mode and the other palettes
+A margaui theme is a block of CSS custom properties (`--color-*`, `--radius-*`,
+…) under a `[data-theme="<name>"]` selector, and every class it compiles reads
+those through `var(--color-*)`. So switching theme is **one attribute flip on
+`<html>`** — the compiled stylesheet never changes:
+```js
+document.documentElement.dataset.theme = "dark";
+```
+Two things to know, both of which bite if you assume otherwise:
+- **Dark mode never turns itself on.** `dark.css` is keyed on
+  `[data-theme="dark"]` alone — there is no `prefers-color-scheme` fallback and
+  no `.dark` class. Link `theme.css` and do nothing else and the page is light
+  forever, on every machine. Following the OS is your job:
+  ```js
+  const dark = matchMedia("(prefers-color-scheme: dark)");
+  document.documentElement.dataset.theme = dark.matches ? "dark" : "light";
+  ```
+- **`theme.css` is only light + dark.** It is literally
+  `@import"./light.css";@import"./dark.css";`. margaui ships ~33 more palettes
+  (dracula, nord, cyberpunk, …) as sibling files, each linked separately and
+  each cheap:
+  ```html
+  <link rel="stylesheet" href="https://marianoguerra.github.io/margaui/themes/dracula.css" />
+  ```
+  Link it **after** `theme.css`: `light.css` claims plain `:root` as well as
+  `[data-theme=light]`, which ties on specificity with `[data-theme=dracula]`,
+  so a palette only wins by coming later in the cascade.
+`tutuca storybook` does all of this for you — see the Themes section of
+[storybook.md](./storybook.md).
 ## Wire it into tutuca
 However you obtained `compile`, the integration is the same: register

package/skill/tutuca/storybook.md CHANGED Viewed

@@ -215,6 +215,32 @@ version-pinned CDN. `--out` always pins the CDN so the artifact is portable —
 host it from the project root so `/*.dev.js` paths resolve. See [cli.md](./cli.md)
 for the exhaustive flag list and exit codes.
+## Themes
+The page starts in the theme the URL asks for (`?theme=dracula`), else the one
+the OS prefers, and the sidebar has a switcher for margaui's palettes. Picking
+one sets `?theme=`, so a themed storybook is shareable and survives a reload.
+That OS step is on us, not margaui: its `dark.css` is keyed on
+`[data-theme="dark"]` alone, with **no** `prefers-color-scheme` fallback, so a
+page that only links `theme.css` renders light forever. See
+[margaui.md](./margaui.md).
+Embedding the storybook yourself? The switcher is opt-in through the `themes`
+option, which — like `compileCss` — is injected, so the library still never
+imports margaui:
+```js
+mountStorybook("#app", modules, {
+  compileCss: (app) => compileClassesToStyleText(app, compile),
+  // The directory your theme.css lives in. Every other palette is a sibling
+  // file there; only the one selected is fetched, and only the first time.
+  themes: { baseUrl: "https://marianoguerra.github.io/margaui/themes/" },
+});
+```
+Omit `themes` (what `--no-margaui` does) and no switcher renders — there would
+be no theme CSS to switch to.
 ## Footguns
 - ⚠️ `value` must be a real instance (`Comp.make(...)`), not a plain object or

package/skill/tutuca/testing.md CHANGED Viewed

@@ -157,8 +157,10 @@ you want to test them as a pipeline: filter + loop-data + enrichment
 together produce a list of bindings the view sees. Use
 `collectIterBindings` for that — a functional implementation only ships
 in the dev build (`tutuca/dev`); the core `tutuca` build exports a no-op
-stub. `tutuca test` redirects the bare `tutuca` import to the dev build
-automatically, so test modules can import it as below:
+stub that returns `[]`. Both commands that run `getTests()` in the
+terminal — `tutuca test` and `tutuca storybook` (including `--dry-run`) —
+redirect the bare `tutuca` import to the dev build automatically, as does
+the browser storybook's import map. So test modules can import it as below:
 ```js
 import { collectIterBindings } from "tutuca";
@@ -180,6 +182,10 @@ const r = collectIterBindings(MyComp, c, c.items, {
 - The `compInstance` is `this` for every handler. Pass
   `MyComp.make({ field: ... })` so handlers that read `this.field` see
   the value you want.
+- The redirect uses Node's `module.register`, which is how the `tutuca`
+  bin runs. Under a Bun-driven CLI it degrades to the no-op stub — if you
+  see `collectIterBindings` return `[]`, import it from `tutuca/dev`
+  explicitly.
 Example:

package/skill/tutuca-source/tutuca.ext.js CHANGED Viewed

@@ -540,7 +540,6 @@ var PREDICATES = {
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -2086,7 +2085,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -2269,7 +2268,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -2469,6 +2468,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events = new NodeEvents(id);
@@ -2900,7 +2905,7 @@ class Stack {
     return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();