tosijs-ui 1.6.21 → 1.6.22

package/dist/live-example/component.js

@@ -33,38 +33,6 @@ 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
@@ -108,157 +76,9 @@ 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, 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.*
+Add the `iframe` attribute to render the preview inside an iframe for complete CSS isolation.
 
 ## Test Blocks
 
@@ -598,11 +418,8 @@ 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), and
-        // put the source editor in the dialect's mode — so a `tjs` example gets
-        // first-class tjs editing (highlighting + autocomplete), `ts` gets TypeScript.
+        // `js`, so everything referencing this.parts.js / this.js is unaffected).
         this.parts.js.setAttribute('name', this.dialect);
-        this.parts.js.mode = this.dialect;
         this.jsOutEditor = codeEditor({
             name: 'JS',
             mode: 'javascript',
@@ -622,9 +439,10 @@ export class LiveExample extends Component {
     updateUndo = () => {
         const { activeTab } = this;
         const { undo, redo } = this.parts;
-        if (activeTab instanceof CodeEditor) {
-            undo.disabled = !activeTab.canUndo();
-            redo.disabled = !activeTab.canRedo();
+        if (activeTab instanceof CodeEditor && activeTab.editor !== undefined) {
+            const undoManager = activeTab.editor.session.getUndoManager();
+            undo.disabled = !undoManager.hasUndo();
+            redo.disabled = !undoManager.hasRedo();
         }
         else {
             undo.disabled = true;
@@ -647,13 +465,13 @@ export class LiveExample extends Component {
     undo = () => {
         const { activeTab } = this;
         if (activeTab instanceof CodeEditor) {
-            activeTab.undo();
+            activeTab.editor.undo();
         }
     };
     redo = () => {
         const { activeTab } = this;
         if (activeTab instanceof CodeEditor) {
-            activeTab.redo();
+            activeTab.editor.redo();
         }
     };
     get isMaximized() {
@@ -943,11 +761,15 @@ export class LiveExample extends Component {
     }
     canUndo() {
         const t = this.activeTab;
-        return t instanceof CodeEditor && t.canUndo();
+        return (t instanceof CodeEditor &&
+            t.editor !== undefined &&
+            t.editor.session.getUndoManager().hasUndo());
     }
     canRedo() {
         const t = this.activeTab;
-        return t instanceof CodeEditor && t.canRedo();
+        return (t instanceof CodeEditor &&
+            t.editor !== undefined &&
+            t.editor.session.getUndoManager().hasRedo());
     }
     saveLocalEdit = () => {
         const key = this.localEditKey();