tosijs-ui 1.6.20 → 1.6.21

package/dist/live-example/code-transform.js

@@ -61,7 +61,7 @@ export async function executeCode(code, context, transform) {
 // self-contained) and is loaded only for `ts` examples; from-ts in turn fetches
 // the TypeScript compiler lazily at runtime, so tsc is never pulled in until a TS
 // example actually transforms. Pinned to match the dev dep.
-const TJS_VERSION = '0.8.7';
+const TJS_VERSION = '0.9.0';
 // Where to fetch a tjs-lang browser bundle from, in priority order:
 //  1. SAME-ORIGIN — the doc-site build copies the bundles next to the iife and
 //     sets `__TJS_LOCAL_BASE`, so the transpiler ships in lockstep with the page,

package/dist/live-example/component.js

@@ -33,6 +33,38 @@ preview.append('Try editing some code and hitting refresh…')
 }
 ```
 
+## How examples run: one shared page (read this)
+
+By default every example on a page runs **inline — in the page's own document and
+JavaScript realm**, not in a sandbox. Each example gets its own `preview` element
+(and its `css` is scoped to that preview), but they all share the one `tosijs`
+module, so **`tosi()` state singletons are shared across every example on the page**.
+
+This is a deliberate choice, and it buys two things:
+
+1. It's a live demonstration of how clean tosi's isolation is — many independent
+   components mount into one page and coexist without stepping on each other's DOM.
+2. You can drive any demo from the console (or from another example) through the same
+   global singleton — the state is right there, not walled off in a frame.
+
+The trade-off is the gotcha to know about: **examples can see and clobber each
+other's state.** Two examples that both do `tosi({ app: … })` bind to the *same*
+`app` singleton (the tosi registry is keyed by the top-level name), so one overwrites
+the other — and you get "impossible" bugs where an example misbehaves only when some
+*other* example happens to be on the same page. Worth it, but plan for it:
+
+- **Namespace your state.** Give each example a unique top-level key
+  (`tosi({ ratingDemo: … })`, not a generic `tosi({ app: … })`).
+- Prefer local variables and `preview`-scoped DOM over shared singletons when a demo
+  doesn't need to be globally reachable.
+- In `test` blocks, assert with **counts / deltas**, not presence/absence — other
+  examples may have left their elements in the DOM.
+
+For real isolation of the **DOM and CSS**, add the `iframe` attribute (below). Note
+it does **not** isolate tosijs *state*: the `tosijs`/`tosijs-ui` handed to an iframe
+example are still the host page's module instances, so `tosi()` singletons stay
+shared. Namespacing is the fix for state; `iframe` is the fix for DOM/CSS bleed.
+
 ## Source dialects: `js`, `tjs`, `ts`
 
 The executable block's fence language picks how the source is compiled before it
@@ -76,9 +108,157 @@ example the equivalent is written inside a comment (so it survives `tsc`) — bu
 that comment form can't appear inside a doc comment like this one, since the
 test's own closing delimiter would end the doc comment.
 
+## Inline WebAssembly (SIMD)
+
+A `tjs` example can drop a hot loop into **WebAssembly** with a `wasm { … } fallback
+{ … }` block — compiled to bytecode *at transpile time*, embedded as base64, and run
+in your browser. No Emscripten, no `.wasm` file, no build step, no server.
+
+WASM earns its keep with **SIMD**: scalar WASM roughly ties the JS JIT, but a
+branchless `f32x4` kernel does four values per instruction. Below, a field of a few
+thousand particles is held on a grid by springs and pushed aside by your pointer —
+every particle's position updated four at a time in WASM SIMD. **Click the button to
+toggle WASM ↔ JavaScript** and watch the per-step time — the same code, one path
+compiled to SIMD bytecode:
+
+```tjs
+// One physics step for the whole field, 4 particles per iteration with f32x4 SIMD:
+// a spring pulls each particle to its home cell, and an inverse-square push shoves
+// it away from the pointer. Pure arithmetic — no per-lane branches (tjs's f32x4 has
+// no compare/select yet), which is exactly what SIMD wants. `fallback { }` is the
+// scalar-JS twin.
+function step(! px: Float32Array, py: Float32Array, vx: Float32Array, vy: Float32Array, hx: Float32Array, hy: Float32Array, n: 0, tx: 0.0, ty: 0.0) {
+  wasm {
+    let txv = f32x4_splat(tx)
+    let tyv = f32x4_splat(ty)
+    let spring = f32x4_splat(0.03)
+    let damp = f32x4_splat(0.86)
+    let repel = f32x4_splat(1600.0)
+    let soft = f32x4_splat(140.0)
+    for (let i = 0; i < n; i = i + 4) {
+      let off = i * 4
+      let x = f32x4_load(px, off)
+      let y = f32x4_load(py, off)
+      let sx = f32x4_mul(f32x4_sub(f32x4_load(hx, off), x), spring)
+      let sy = f32x4_mul(f32x4_sub(f32x4_load(hy, off), y), spring)
+      let rx = f32x4_sub(x, txv)
+      let ry = f32x4_sub(y, tyv)
+      let push = f32x4_div(repel, f32x4_add(f32x4_add(f32x4_mul(rx, rx), f32x4_mul(ry, ry)), soft))
+      let nvx = f32x4_mul(f32x4_add(f32x4_load(vx, off), f32x4_add(sx, f32x4_mul(rx, push))), damp)
+      let nvy = f32x4_mul(f32x4_add(f32x4_load(vy, off), f32x4_add(sy, f32x4_mul(ry, push))), damp)
+      f32x4_store(vx, off, nvx)
+      f32x4_store(vy, off, nvy)
+      f32x4_store(px, off, f32x4_add(x, nvx))
+      f32x4_store(py, off, f32x4_add(y, nvy))
+    }
+  } fallback {
+    for (let i = 0; i < n; i++) {
+      const sx = (hx[i] - px[i]) * 0.03, sy = (hy[i] - py[i]) * 0.03
+      const rx = px[i] - tx, ry = py[i] - ty
+      const push = 1600.0 / (rx * rx + ry * ry + 140.0)
+      const nvx = (vx[i] + sx + rx * push) * 0.86, nvy = (vy[i] + sy + ry * push) * 0.86
+      vx[i] = nvx; vy[i] = nvy; px[i] += nvx; py[i] += nvy
+    }
+  }
+}
+
+const W = 480, H = 300, cols = 100, rows = 60, N = cols * rows
+const px = new Float32Array(N), py = new Float32Array(N)
+const vx = new Float32Array(N), vy = new Float32Array(N)
+const hx = new Float32Array(N), hy = new Float32Array(N)
+for (let i = 0; i < N; i++) {
+  const c = i % cols, r = (i / cols) | 0
+  hx[i] = (c + 0.5) * W / cols
+  hy[i] = (r + 0.5) * H / rows
+  px[i] = hx[i]
+  py[i] = hy[i]
+}
+
+const canvas = document.createElement('canvas')
+canvas.width = W
+canvas.height = H
+canvas.style.cssText = 'width:100%;max-width:480px;border-radius:8px;display:block;background:#0b0e14;touch-action:none;cursor:crosshair'
+const ctx = canvas.getContext('2d')
+
+let tx = W / 2, ty = H / 2, idle = 0, frame = 0
+canvas.addEventListener('pointermove', (e) => {
+  const r = canvas.getBoundingClientRect()
+  tx = (e.clientX - r.left) / r.width * W
+  ty = (e.clientY - r.top) / r.height * H
+  idle = 0
+})
+
+// tjs registers the compiled function as globalThis.__tjs_wasm_0; nulling it makes
+// step() fall to its JS twin. (A public WASM on/off toggle would be tidier — noted
+// in TJS-FEEDBACK.md.)
+let useWasm = true, savedWasm = null
+const btn = document.createElement('button')
+btn.style.cssText = 'margin:8px 0;padding:6px 12px;border-radius:6px;cursor:pointer'
+const readout = document.createElement('p')
+function applyMode() {
+  if (useWasm && savedWasm) { globalThis.__tjs_wasm_0 = savedWasm; savedWasm = null }
+  if (!useWasm && globalThis.__tjs_wasm_0) { savedWasm = globalThis.__tjs_wasm_0; globalThis.__tjs_wasm_0 = null }
+  btn.textContent = useWasm ? '⚡ WebAssembly SIMD — click for JavaScript' : '🐢 JavaScript — click for WASM SIMD'
+}
+btn.onclick = () => { useWasm = !useWasm; applyMode() }
+
+let acc = 0, frames = 0
+function loop() {
+  if (!document.body.contains(canvas)) return // example removed → stop
+  frame++
+  idle++
+  if (idle > 45) {
+    tx = W / 2 + Math.cos(frame * 0.02) * W * 0.32
+    ty = H / 2 + Math.sin(frame * 0.031) * H * 0.32
+  }
+  const t0 = performance.now()
+  step(px, py, vx, vy, hx, hy, N, tx, ty)
+  acc += performance.now() - t0
+  frames++
+  ctx.fillStyle = 'rgba(11,14,20,0.3)'
+  ctx.fillRect(0, 0, W, H)
+  ctx.fillStyle = useWasm ? '#4fd1c5' : '#f6ad55'
+  for (let i = 0; i < N; i++) ctx.fillRect(px[i], py[i], 1.6, 1.6)
+  if (frames >= 20) {
+    readout.textContent = N.toLocaleString() + ' particles · ' + (acc / frames).toFixed(3) +
+      ' ms/step (' + (useWasm ? 'WASM SIMD' : 'JS') + ') · move the pointer'
+    acc = 0
+    frames = 0
+  }
+  requestAnimationFrame(loop)
+}
+
+;(async () => {
+  // The wasm bootstrap is async — wait for the compiled function before starting,
+  // so the first frames run in WASM rather than the fallback.
+  const t0 = performance.now()
+  while (!globalThis.__tjs_wasm_0 && performance.now() - t0 < 3000) {
+    await new Promise((r) => setTimeout(r, 0))
+  }
+  applyMode()
+  requestAnimationFrame(loop)
+})()
+
+preview.append(canvas, btn, readout)
+```
+
 ## CSS Isolation with `iframe`
 
-Add the `iframe` attribute to render the preview inside an iframe for complete CSS isolation.
+Add the `iframe` attribute to render the preview inside an iframe, giving the example
+its own document, CSS scope, and custom-element registry. Reach for it when a demo's
+styles would otherwise leak into (or get leaked on by) the rest of the page.
+
+It isolates **DOM and CSS, not state.** The `tosijs`/`tosijs-ui` modules injected
+into the iframe are the host page's own instances, so `tosi()` singletons remain
+shared across every example (see "How examples run" above). Namespace your state to
+keep examples from stomping each other; use `iframe` when you need visual/DOM
+isolation.
+
+*Fully-isolated examples (a separate module realm, so even `tosi()` state and
+imported dependencies are sandboxed — the way tjs-lang's playgrounds do it with a
+service worker intercepting imports) are a possible future option. For **actual
+examples** the shared-page default is usually the nicer behavior: it shows off tosi's
+isolation and lets you poke demos through the live global state.*
 
 ## Test Blocks
 
@@ -418,8 +598,11 @@ export class LiveExample extends Component {
         this.productTabsReady = true;
         const { editors } = this.parts;
         // Relabel the source tab from "js" to the actual dialect (the `part` stays
-        // `js`, so everything referencing this.parts.js / this.js is unaffected).
+        // `js`, so everything referencing this.parts.js / this.js is unaffected), and
+        // put the source editor in the dialect's mode — so a `tjs` example gets
+        // first-class tjs editing (highlighting + autocomplete), `ts` gets TypeScript.
         this.parts.js.setAttribute('name', this.dialect);
+        this.parts.js.mode = this.dialect;
         this.jsOutEditor = codeEditor({
             name: 'JS',
             mode: 'javascript',