effectweb 0.3.0 → 0.4.0

package/dist/dom.js

@@ -1,11 +1,13 @@
 import attributeData from './dom-attributes.json' with { type: 'json' };
+import * as Effect from 'effect/Effect';
 import { validateIdentities } from './collection.js';
 import { runAll, reportError, reportSafely } from './errors.js';
 import { eventEffects } from './effectEvent.js';
 import { traceBinding } from './diagnostics.js';
-import { shareData } from './sharing.js';
 import { jsxComponent } from './jsx.js';
-import { startMount } from './mount.js';
+import { Settlement } from './settlement.js';
+import { prepareMount } from './mount.js';
+const bindingLocation = (source) => typeof source === 'function' ? source() : source;
 const equal = (a, b) => a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
 // A model publication reconciles DOM first and controlled dependent properties second.
 // Nested child scopes join the same synchronous commit; there is no reactive graph.
@@ -36,43 +38,27 @@ export class Scope {
     value;
     send;
     report;
+    settlement;
     jobs = [];
     cleanups = [];
     disposed = false;
-    revision = 0;
-    constructor(value, send, report = reportError) {
+    constructor(value, send, report = reportError, settlement = new Settlement()) {
         this.value = value;
         this.send = send;
         this.report = report;
-    }
-    derive(dependencies, compute, source) {
-        let previous;
-        let value;
-        let revision = -1;
-        return () => {
-            if (revision === this.revision)
-                return value;
-            const next = dependencies();
-            if (!previous || !equal(previous, next)) {
-                value = previous ? shareData(value, compute()) : compute();
-                traceBinding(source, previous, next, 'derive');
-                previous = next;
-            }
-            revision = this.revision;
-            return value;
-        };
+        this.settlement = settlement;
     }
     watch(dependencies, apply, source) {
         let previous = dependencies();
         apply();
-        traceBinding(source, undefined, previous, 'binding');
+        traceBinding(bindingLocation(source), undefined, previous, 'binding');
         if (!previous.length)
             return;
         const run = () => {
             const next = dependencies();
             if (!equal(previous, next)) {
                 apply();
-                traceBinding(source, previous, next, 'binding');
+                traceBinding(bindingLocation(source), previous, next, 'binding');
                 previous = next;
             }
         };
@@ -83,7 +69,6 @@ export class Scope {
             return;
         commitDom(() => {
             this.value = value;
-            this.revision++;
             for (const job of this.jobs) {
                 if (this.disposed)
                     break;
@@ -104,18 +89,18 @@ export class Scope {
         runAll(this.cleanups.splice(0).reverse(), this.report);
     }
 }
-/** Compiler marker for mounting a view with an explicit model and message dispatcher. */
-export const ViewBinding = /* @__PURE__ */ Object.assign(function ViewBinding(_props) {
-    throw new Error('ViewBinding reached runtime without the EffectWeb JSX compiler');
+/** Mount a view with an explicit model and message dispatcher. */
+export const ViewBinding = /* @__PURE__ */ Object.assign(function ViewBinding(props) {
+    return new SlotPlacement(viewContent(props.view), { model: props.model, send: props.send });
 }, { [jsxComponent]: true });
 /** Untyped callers get an actionable failure instead of silently losing child messages. */
 export function unboundSend(_message) {
     throw new Error('This view needs a dispatcher. Mount it through ViewBinding with model and send.');
 }
 const contentBrand = Symbol('compiled content');
-/** Compiler marker: declare inside view(), or directly in a compiled component prop. */
-export function slot(_render) {
-    throw new Error('EffectWeb slot reached runtime without the EffectWeb JSX compiler');
+/* @__NO_SIDE_EFFECTS__ */
+export function slot(render) {
+    return render;
 }
 // Placement values are opaque to structural sharing, which only traverses plain data.
 class SlotPlacement {
@@ -132,60 +117,83 @@ function isContent(value) {
         (typeof value === 'object' || typeof value === 'function') &&
         contentBrand in value);
 }
-/** Compiler output. Captures follow their declaring scope; placements own independent scopes. */
-export function compiledSlot(owner, build) {
-    const placements = new Set();
-    owner.jobs.push(() => {
-        for (const scope of placements)
-            scope.set(scope.value);
-    });
-    owner.cleanups.push(() => {
-        for (const scope of placements)
-            scope.dispose();
-        placements.clear();
+/** Evaluate ordinary synchronous JavaScript for each immutable model publication. */
+/* @__NO_SIDE_EFFECTS__ */
+export function view(render) {
+    return compiled((scope, parent, before) => {
+        const read = () => render(scope.value, scope.send);
+        text(scope, parent, before, () => [scope.value], read);
     });
-    const definition = {
-        mount(parent, before, value) {
-            if (owner.disposed)
-                throw new Error('Cannot mount content after its declaring view disposed');
-            const scope = new Scope(value, owner.send, owner.report);
+}
+/* @__NO_SIDE_EFFECTS__ */
+export function compiled(build) {
+    const definition = Object.assign((props) => new SlotPlacement(viewContent(definition), { model: props, send: unboundSend }), { build, [jsxComponent]: true });
+    return definition;
+}
+const viewDefinitions = new WeakMap();
+function viewContent(definition) {
+    let content = viewDefinitions.get(definition);
+    if (!content) {
+        content = contentDefinition((scope, parent, before) => {
+            const childScope = new Scope(scope.value.model, (message) => scope.value.send(message), scope.report, scope.settlement);
+            scope.cleanups.push(() => childScope.dispose());
+            definition.build(childScope, parent, before);
+            scope.jobs.push(() => childScope.set(scope.value.model));
+        });
+        viewDefinitions.set(definition, content);
+    }
+    return content;
+}
+function contentDefinition(build) {
+    return {
+        mount(parent, before, value, report, settlement) {
+            const scope = new Scope(value, unboundSend, report, settlement);
             const fragment = buildFragment(parent);
             const range = markers(fragment, null);
             scope.cleanups.push(() => remove(range.start, range.end));
             try {
                 build(scope, fragment, range.end);
-                parent.insertBefore(fragment, before);
-                placements.add(scope);
+                if (!scope.disposed)
+                    parent.insertBefore(fragment, before);
             }
             catch (error) {
                 scope.dispose();
                 throw error;
             }
-            return {
-                set(value) {
-                    if (!Object.is(scope.value, value))
-                        scope.set(value);
-                },
-                dispose() {
-                    placements.delete(scope);
-                    scope.dispose();
-                },
-            };
+            return { set: (value) => scope.set(value), dispose: () => scope.dispose() };
         },
     };
-    return Object.assign((value) => new SlotPlacement(definition, value), {
-        [contentBrand]: true,
-        definition,
-    });
 }
-/** This declaration is a compiler marker, never a component setup callback. */
-export function view(_render) {
-    throw new Error('EffectWeb view reached runtime without the EffectWeb JSX compiler');
+const markupDefinitions = new Map();
+/** JSX factories preserve host identity by element type; source locations are metadata only. */
+export function markup(tag, sources) {
+    let definition = markupDefinitions.get(tag);
+    if (!definition) {
+        definition = contentDefinition((scope, parent, before) => {
+            const node = element(parent, before, tag);
+            bindAttributes(scope, node, () => [scope.value.props], () => {
+                const { children: _children, ...attributes } = scope.value.props;
+                return attributes;
+            }, () => scope.value.sources);
+            text(scope, node, null, () => [scope.value.props.children], () => scope.value.props.children, () => scope.value.sources?.children);
+        });
+        markupDefinitions.set(tag, definition);
+    }
+    return (props) => new SlotPlacement(definition, { props, sources });
+}
+export function renderComponent(component, props) {
+    return component(props);
 }
-export function compiled(build) {
-    return Object.assign(() => {
-        throw new Error('Mount compiled views with mountView or inside another compiled view');
-    }, { build, [jsxComponent]: true });
+const listDefinition = contentDefinition((scope, parent, before) => {
+    each(scope, parent, before, () => scope.value.rows, () => [scope.value.render], true, (row, parent, before) => {
+        // The explicit list operation owns callback evaluation and keyed row lifetimes.
+        const update = () => scope.value.render(row.value[0], row.value[1]);
+        text(row, parent, before, () => [row.value, scope.value.render], update);
+    });
+});
+/** Preserve collection identity (or array reference identity) while rendering rows. */
+export function list(rows, render) {
+    return new SlotPlacement(listDefinition, { rows, render });
 }
 /** Owned content in an element target, defaulting to the document body. */
 export const Portal = /* @__PURE__ */ compiled((scope) => {
@@ -257,22 +265,39 @@ export function mountView(parent, definition, source, options = {}) {
         const { start, end } = markers(parent, null);
         const scope = new Scope(source.model(), source.send, options.onError);
         let unsubscribe = () => { };
+        let ready = false;
+        let latest = scope.value;
         try {
+            unsubscribe = source.subscribe((model) => {
+                latest = model;
+                if (ready)
+                    scope.set(model);
+            });
             const fragment = buildFragment(parent);
             definition.build(scope, fragment, null);
             parent.insertBefore(fragment, end);
-            unsubscribe = source.subscribe((model) => scope.set(model));
+            ready = true;
+            if (!Object.is(latest, scope.value))
+                scope.set(latest);
         }
         catch (error) {
-            scope.dispose();
-            remove(start, end);
+            runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
             throw error;
         }
-        return () => {
+        const dispose = () => {
             if (scope.disposed)
                 return;
             runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
         };
+        return Object.assign(dispose, {
+            dispose,
+            close: () => {
+                return Effect.suspend(() => {
+                    dispose();
+                    return scope.settlement.wait();
+                });
+            },
+        });
     });
 }
 export function element(parent, before, tag) {
@@ -372,7 +397,7 @@ export function bindAttribute(scope, element, name, dependencies, read, source)
     let previous = dependencies();
     let value = read();
     attribute(element, name, value);
-    traceBinding(source, undefined, previous, 'binding');
+    traceBinding(bindingLocation(source), undefined, previous, 'binding');
     if (!previous.length)
         return;
     // Keep the value cache in the dependency job itself, without an extra closure
@@ -386,7 +411,7 @@ export function bindAttribute(scope, element, name, dependencies, read, source)
             attribute(element, name, nextValue);
             value = nextValue;
         }
-        traceBinding(source, previous, next, 'binding');
+        traceBinding(bindingLocation(source), previous, next, 'binding');
         previous = next;
     });
 }
@@ -506,16 +531,20 @@ export function text(scope, parent, before, dependencies, read, source) {
         let value = read();
         if (Array.isArray(value)) {
             validateContent(value);
-            value = { [contentBrand]: true, definition: arrayContent, value };
+            value = new SlotPlacement(arrayContent, value);
         }
         if (isContent(value)) {
-            node.data = '';
+            if (node.data !== '')
+                node.data = '';
             if (content?.definition === value.definition) {
                 content.mounted.set(value.value);
                 return;
             }
-            content?.mounted.dispose();
+            const previous = content;
             content = undefined;
+            previous?.mounted.dispose();
+            if (scope.disposed)
+                return;
             if (start)
                 clear(start, node);
             else {
@@ -523,10 +552,11 @@ export function text(scope, parent, before, dependencies, read, source) {
                 scope.cleanups.push(() => content?.mounted.dispose());
                 node.parentNode.insertBefore(start, node);
             }
-            content = {
-                definition: value.definition,
-                mounted: value.definition.mount(node.parentNode, node, value.value, scope.report),
-            };
+            const mounted = value.definition.mount(node.parentNode, node, value.value, scope.report, scope.settlement);
+            if (scope.disposed)
+                mounted.dispose();
+            else
+                content = { definition: value.definition, mounted };
             return;
         }
         if (value != null && typeof value === 'object')
@@ -557,32 +587,44 @@ function validateContent(value, active = new Set()) {
     }
 }
 const arrayContent = {
-    mount: (_parent, before, value, report) => mountArray(report, before, value),
+    mount: (_parent, before, value, report, settlement) => mountArray(report, before, value, settlement),
 };
 /** Runtime content arrays are positional; domain lists retain the explicit collection contract. */
-function mountArray(report, before, initial) {
+function mountArray(report, before, initial, settlement) {
     const cells = [];
+    let disposed = false;
     const disposeCell = (cell) => {
         cell.scope.dispose();
         remove(cell.start, cell.end);
     };
     const set = (input) => {
+        if (disposed)
+            return;
         const values = input;
         validateContent(values);
-        while (cells.length > values.length)
+        while (cells.length > values.length) {
             disposeCell(cells.pop());
+            if (disposed)
+                return;
+        }
         for (let index = 0; index < values.length; index++) {
             const cell = cells[index];
             if (cell) {
                 if (!Object.is(cell.scope.value, values[index]))
                     cell.scope.set(values[index]);
+                if (disposed)
+                    return;
                 continue;
             }
-            const scope = new Scope(values[index], unboundSend, report);
+            const scope = new Scope(values[index], unboundSend, report, settlement);
             const fragment = buildFragment(before.parentNode);
             const range = markers(fragment, null);
             try {
                 text(scope, fragment, range.end, () => [scope.value], () => scope.value);
+                if (disposed) {
+                    scope.dispose();
+                    return;
+                }
                 before.parentNode.insertBefore(fragment, before);
                 cells.push({ scope, ...range });
             }
@@ -593,6 +635,9 @@ function mountArray(report, before, initial) {
         }
     };
     const dispose = () => {
+        if (disposed)
+            return;
+        disposed = true;
         for (const cell of cells.splice(0))
             disposeCell(cell);
     };
@@ -617,7 +662,7 @@ export function event(scope, element, name, handler) {
             try {
                 const result = handler(event);
                 if (result !== null && typeof result === 'object' && !scope.disposed) {
-                    effects ??= eventEffects(scope.report);
+                    effects ??= eventEffects(scope.report, scope.settlement);
                     effects.accept(result);
                 }
             }
@@ -639,29 +684,28 @@ export function event(scope, element, name, handler) {
         effects?.dispose();
     });
 }
-/** One handler identity owns its requests, regardless of the JSX attribute spelling. */
+/** The event binding owns its requests; snapshot renders may replace its callback. */
 export function bindEvent(scope, element, name, dependencies, read) {
     let current;
     let owned;
     scope.cleanups.push(() => owned?.dispose());
     scope.watch(dependencies, () => {
         const next = read();
-        if (next != null && typeof next !== 'function')
-            throw new TypeError(`Event ${name} must be a synchronous handler.`);
         if (Object.is(current, next))
             return;
-        owned?.dispose();
-        owned = undefined;
         current = next;
-        if (typeof next === 'function') {
-            const handler = next;
-            owned = new Scope(next, scope.send, scope.report);
-            event(owned, element, name, handler);
+        if (!next) {
+            owned?.dispose();
+            owned = undefined;
+        }
+        else if (!owned) {
+            owned = new Scope(next, scope.send, scope.report, scope.settlement);
+            event(owned, element, name, (event) => current?.(event));
         }
     });
 }
 /** Reconcile merged JSX attributes. Each host, event and control owns its cleanup. */
-export function bindAttributes(scope, element, dependencies, read) {
+export function bindAttributes(scope, element, dependencies, read, sources) {
     const bindings = new Map();
     let previous = {};
     const isEvent = (name) => /^on[A-Z]/u.test(name);
@@ -676,8 +720,6 @@ export function bindAttributes(scope, element, dependencies, read) {
         for (const name of Object.keys(next)) {
             if (['key', 'ref', 'innerHTML', 'children'].includes(name))
                 throw new Error(`Spread attribute ${name} is unsupported. Use collections, DOM hosts, or JSX children.`);
-            if (isEvent(name) && next[name] != null && typeof next[name] !== 'function')
-                throw new Error(`Spread event ${name} must be a synchronous handler.`);
         }
         for (const name of Object.keys(previous)) {
             if (Object.hasOwn(next, name))
@@ -688,8 +730,11 @@ export function bindAttributes(scope, element, dependencies, read) {
                 attribute(element, name, undefined);
         }
         for (const [name, value] of Object.entries(next)) {
+            if (!Object.hasOwn(previous, name) || !Object.is(previous[name], value))
+                traceBinding(sources?.()?.[name], Object.hasOwn(previous, name) ? [previous[name]] : undefined, [value], 'binding');
             if (name !== 'use' && !isEvent(name) && !isControl(name)) {
-                attribute(element, name, value);
+                if (!Object.hasOwn(previous, name) || !Object.is(previous[name], value))
+                    attribute(element, name, value);
                 continue;
             }
             let binding = bindings.get(name);
@@ -699,7 +744,7 @@ export function bindAttributes(scope, element, dependencies, read) {
                 binding.set(value);
                 continue;
             }
-            const owned = new Scope(value, scope.send, scope.report);
+            const owned = new Scope(value, scope.send, scope.report, scope.settlement);
             bindings.set(name, owned);
             if (name === 'use')
                 attach(owned, element, () => [owned.value], () => owned.value);
@@ -726,7 +771,7 @@ export function branch(scope, parent, before, choose, yes, no) {
         if (active !== next) {
             child?.dispose();
             clear(start, end);
-            child = new Scope(scope.value, scope.send, scope.report);
+            child = new Scope(scope.value, scope.send, scope.report, scope.settlement);
             const fragment = buildFragment(end.parentNode);
             try {
                 (next ? yes : no)(child, fragment, null);
@@ -754,6 +799,8 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
     let previousOuter = [];
     let previousIdentities = [];
     const update = () => {
+        if (scope.disposed)
+            return;
         const target = end.parentNode;
         const next = read();
         const nextOuter = outer();
@@ -774,8 +821,11 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
             target instanceof Element &&
             target.firstChild === rows.get(previousIdentities[0])?.start &&
             target.lastChild === end) {
-            for (const row of rows.values())
+            for (const row of rows.values()) {
                 row.scope.dispose();
+                if (scope.disposed)
+                    return;
+            }
             target.replaceChildren(end);
             rows.clear();
             previousList = next;
@@ -783,28 +833,25 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
             previousIdentities = [];
             return;
         }
-        const identities = validateIdentities(items, (item, index) => {
-            const key = collection ? collection.identity(item, index) : item;
-            if (typeof key !== 'string' && typeof key !== 'number')
-                throw new Error('Object lists need domain identity. Declare collection(identity) once; do not add JSX keys.');
-            return key;
-        });
+        const identities = validateIdentities(items, (item, index) => collection ? collection.identity(item, index) : item);
         const keep = new Set(identities);
         for (const [key, row] of rows) {
             if (keep.has(key))
                 continue;
             row.scope.dispose();
+            if (scope.disposed)
+                return;
             remove(row.start, row.end);
             rows.delete(key);
         }
         for (let index = 0; index < items.length; index++) {
             const key = identities[index];
             const row = rows.get(key);
-            const item = row ? shareData(row.scope.value[0], items[index]) : items[index];
+            const item = items[index];
             if (!row) {
                 const fragment = buildFragment(target);
                 const range = markers(fragment, null);
-                const child = new Scope([item, index], scope.send, scope.report);
+                const child = new Scope([item, index], scope.send, scope.report, scope.settlement);
                 try {
                     build(child, fragment, range.end);
                 }
@@ -812,6 +859,10 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
                     child.dispose();
                     throw error;
                 }
+                if (scope.disposed) {
+                    child.dispose();
+                    return;
+                }
                 // A single element is its own stable range. Keep markers for dynamic/multiple roots.
                 const root = range.start.nextSibling;
                 const single = root instanceof Element && root.nextSibling === range.end;
@@ -830,6 +881,8 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
                 row.scope.value[0] !== item ||
                 (indexUsed && row.scope.value[1] !== index)) {
                 row.scope.set([item, index]);
+                if (scope.disposed)
+                    return;
             }
         }
         // Retained prefixes are already ordered. New tail rows were appended above and
@@ -879,18 +932,8 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
     });
     update();
 }
-export function invoke(scope, parent, before, dependencies, read, build) {
-    const child = new Scope(read(), scope.send, scope.report);
-    scope.cleanups.push(() => child.dispose());
-    build(child, parent, before);
-    scope.watch(dependencies, () => {
-        const next = read();
-        if (!equal(child.value, next))
-            child.set(next);
-    });
-}
 export function child(scope, parent, before, definition, dependencies, model, send) {
-    const child = new Scope(model(), send, scope.report);
+    const child = new Scope(model(), send, scope.report, scope.settlement);
     scope.cleanups.push(() => child.dispose());
     definition.build(child, parent, before);
     scope.watch(dependencies, () => {
@@ -900,11 +943,12 @@ export function child(scope, parent, before, definition, dependencies, model, se
     });
 }
 /** A late-bound compiled definition owns one replaceable DOM region. */
-export function viewRegion(scope, parent, before) {
+export function viewRegion(scope, parent, before, options = {}) {
     const { start, end } = markers(parent, before);
     let active;
     let definition;
-    scope.jobs.push(() => active?.set(scope.value));
+    if (!options.manual)
+        scope.jobs.push(() => active?.set(scope.value));
     scope.cleanups.push(() => {
         active?.dispose();
         remove(start, end);
@@ -925,7 +969,7 @@ export function viewRegion(scope, parent, before) {
         clear(start, end);
         if (!next)
             return;
-        const child = new Scope(scope.value, scope.send, scope.report);
+        const child = new Scope(scope.value, scope.send, options.report ?? scope.report, scope.settlement);
         const fragment = buildFragment(end.parentNode);
         active = child;
         definition = next;
@@ -965,14 +1009,19 @@ export function attach(scope, element, dependencies, read) {
             return;
         queueMicrotask(() => {
             if (!scope.disposed && token === generation) {
+                const finished = scope.settlement.begin();
                 try {
-                    const acquired = startMount(element, mount, scope.report);
+                    const acquired = prepareMount(element, mount, scope.report);
+                    Effect.runFork(acquired.closed).addObserver(finished);
                     if (scope.disposed || token !== generation)
                         acquired.dispose();
-                    else
+                    else {
                         active = acquired;
+                        acquired.start();
+                    }
                 }
                 catch (error) {
+                    finished();
                     reportSafely(scope.report, error);
                 }
             }
@@ -998,7 +1047,7 @@ export function portal(scope, build, mount = () => undefined) {
                 ? target.ownerDocument.createElementNS(svgNamespace, 'g')
                 : target.ownerDocument.createElement('div');
             host.style.display = 'contents';
-            child = new Scope(scope.value, scope.send, scope.report);
+            child = new Scope(scope.value, scope.send, scope.report, scope.settlement);
             target.appendChild(host);
             build(child, host, null);
             return;

package/dist/effectEvent.d.ts

@@ -1,5 +1,6 @@
-import { Effect } from 'effect';
+import * as Effect from 'effect/Effect';
 import { type ReportError } from './errors.js';
+import type { Settlement } from './settlement.js';
 import { type UiRuntime } from './runtime.js';
 declare const tag: unique symbol;
 export interface EffectEventRequest {
@@ -10,9 +11,9 @@ export interface EffectEventRequest {
 /** Capture/prevent native events on every call; the policy gates only Effect execution. */
 export declare function effectEvent<EventType extends Event, E>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E>): (event: EventType) => EffectEventRequest;
 export declare function effectEvent<EventType extends Event, E, R>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E, R>, runtime: UiRuntime<R>): (event: EventType) => EffectEventRequest;
-/** Internal listener owner, allocated only when an event returns a value needing inspection. */
-export declare function eventEffects(report: ReportError): {
-    accept(value: unknown): void;
+/** Internal listener owner, allocated only when an event returns an owned request. */
+export declare function eventEffects(report: ReportError, settlement?: Settlement): {
+    accept(request: EffectEventRequest): void;
     dispose(): void;
 };
 export {};