@tiaforge-ui/sinter 0.1.0 → 0.3.0

package/dist/runtime/app.js

@@ -30,11 +30,10 @@ const after = (el) => {
 const ET = EventTarget.prototype;
 /** Per-element registries, kept on the element (cheaper than WeakMaps on the row creation path). */
 const HANDLERS = Symbol('sinter.on'), MODEL = Symbol('sinter.model'), STATE = Symbol('sinter.state');
-const dialogsIn = new WeakMap(), indexReaders = new WeakMap();
+const indexReaders = new WeakMap();
 /** row templates: whether each holds one element (see oneElement()) */
 const prepared = new WeakMap();
 const simple = new WeakMap(), SIMPLE = new Set(['text', 'attr', 'class', 'style', 'show', 'prop', 'on']);
-const hasDialog = (tpl) => dialogsIn.get(tpl) ?? (dialogsIn.set(tpl, !!tpl.content.querySelector('dialog')), dialogsIn.get(tpl));
 /** The instance mount() created on `root`; throws if none. */
 export function instance(root) {
     const app = instances.get(root);
@@ -56,6 +55,8 @@ export function mount(root, o) {
     const types = new Set(), selects = new Set(), deferred = new Set();
     const listeners = new Map(), cleanups = [];
     const shared = new Map();
+    /** `showModal(id)`, `close(id)`: the dialog of this mount root with that id */
+    const dialog = (id) => [...root.querySelectorAll('dialog')].find((d) => d.id === id);
     const rootRbs = [], rootScopes = [], found = new Map();
     let dirty = [], cur = [], scheduled = false, flushing = false, round = 0;
     const res = (name) => {
@@ -76,6 +77,27 @@ export function mount(root, o) {
     };
     /** Elements written through callbacks (`$.$m(row, …)`) since the last flush. */
     const marked = new Set();
+    /** debounced handlers' pending timers */
+    const timers = new WeakMap();
+    /** action calls' signal: aborts when the page is hidden */
+    let hide = new AbortController();
+    /** runs an action function; it counts as busy (for the testing module's settle) while it runs */
+    async function invoke(run, args, ctx) {
+        app.busy++;
+        try {
+            return await fns[run](args, ctx);
+        }
+        finally {
+            app.busy--;
+        }
+    }
+    /** a failed call: SinterErrors as they are, anything else with status null */
+    const callError = (e) => {
+        if (e instanceof SinterError)
+            return e;
+        const detail = (e instanceof Error ? e.message : typeof e == 'string' ? e : '') || null;
+        return new SinterError(null, e, detail ?? String(e), detail);
+    };
     /** Per flush round: how dirty paths reach a template's rows (0 not, 1 only marked elements, 2 any row). */
     let rowHits = new Map();
     /**
@@ -127,7 +149,7 @@ export function mount(root, o) {
         return false;
     };
     const app = {
-        ir, fns, env, req, transport: o.transport ?? (() => undefined), ext: {},
+        ir, fns, env, req, root, transport: o.transport ?? (() => undefined), ext: {},
         beforeFlush: [], afterFlush: [], onListen: [], states: [], busy: 0,
         get isDirty() { return dirty.length > 0 || scheduled; },
         dev: false,
@@ -170,6 +192,7 @@ export function mount(root, o) {
                 c();
             instances.delete(root);
         },
+        scopeOf: (i) => (i < 0 ? app.page : rootScopes[i] ?? app.page),
         url(tpl, s) {
             let out = '', query = false, dropped = false;
             tpl.forEach((p, i) => {
@@ -251,12 +274,14 @@ export function mount(root, o) {
             } };
         },
         storeFns: (el) => ({
+            showModal: (id) => { const d = dialog(id); if (d && !d.open)
+                d.showModal(); },
             refresh: (n) => res(n).refetch(),
             upsert: forward('upsert'),
             patch: forward('patch'),
             remove: forward('remove'),
             page: (n, t) => app.ext.paginate.page(n, t),
-            close: () => el?.closest('dialog')?.close(),
+            close: (id) => (id ? dialog(id) : el?.closest('dialog'))?.close(),
             reset: () => {
                 const form = el?.closest('form');
                 if (!form)
@@ -298,6 +323,10 @@ export function mount(root, o) {
     }
     for (const def of ir.resources)
         createLoader(def);
+    // action calls see the page leave through ctx.signal
+    if (ir.actions.some((x) => x.call) || ir.resources.some((x) => x.call)) {
+        app.addCleanup(env.listen('pagehide', () => { hide.abort(); hide = new AbortController(); }));
+    }
     // listeners for every event type the page binds, rows included
     listen('toggle');
     for (const nd of [...ir.roots, ...ir.templates.flatMap((t) => t.nodes)])
@@ -390,10 +419,10 @@ export function mount(root, o) {
         cleanups.push(() => ET.removeEventListener.call(root, type, dispatch, true));
     }
     /**
-     * `dialogs`: whether these elements can sit in a closed dialog of their own block. Rows only
-     * need the check when their template contains a dialog; outer dialogs defer the whole list.
+     * Only elements the compiler marked as in a dialog of their own block (`dl`) are checked for a
+     * closed dialog; dialogs outside a template defer the whole list.
      */
-    function bindNodes(defs, els, base, rbs, dialogs = true) {
+    function bindNodes(defs, els, base, rbs) {
         // scopes of elements that declare state (and their descendants); most rows have none
         let scopes = null;
         for (let i = 0; i < defs.length; i++) {
@@ -416,7 +445,7 @@ export function mount(root, o) {
                 rootScopes[i] = s;
             if (el)
                 for (const b of nd.b) {
-                    const rb = { b, el, s, v: UNSET, c: dialogs };
+                    const rb = { b, el, s, v: UNSET, c: !!nd.dl };
                     if (b.k == 'on') {
                         const h = el[HANDLERS];
                         el[HANDLERS] = h == null ? rb : Array.isArray(h) ? (h.push(rb), h) : [h, rb];
@@ -484,7 +513,7 @@ export function mount(root, o) {
     /** Evaluates and writes one binding if needed; false while it waits in a closed dialog. */
     function process(rb, level) {
         const force = level == 2 || (level == 1 && !!rb.b.i);
-        if (!force && !deferred.has(rb) && !(rb.b.d && hit(depsOf(rb.b, rb.b.d), rb.s)))
+        if (!force && !(deferred.size && deferred.has(rb)) && !(rb.b.d && hit(rb.d ??= depsOf(rb.b, rb.b.d), rb.s)))
             return true;
         if (rb.c && rb.el.closest('dialog:not([open])')) {
             deferred.add(rb);
@@ -762,7 +791,7 @@ export function mount(root, o) {
                 els[k] = node && node.localName == defs[k].tag ? node : null;
             }
         }
-        if (isSimple(tpl, t)) {
+        if (isSimple(t)) {
             // only value bindings and handlers: bind and write each once, as walk(rbs, 2) would
             for (let k = 0; k < defs.length; k++) {
                 const el = els[k];
@@ -782,7 +811,7 @@ export function mount(root, o) {
             }
         }
         else {
-            bindNodes(defs, els, s, rbs, hasDialog(tpl));
+            bindNodes(defs, els, s, rbs);
             walk(rbs, 2);
         }
         const nodes = [];
@@ -804,10 +833,10 @@ export function mount(root, o) {
         return one;
     }
     /** A row template whose elements only have value bindings and handlers (no state, model, nested template or dialog). */
-    function isSimple(tpl, t) {
+    function isSimple(t) {
         let v = simple.get(t);
         if (v == null) {
-            v = !hasDialog(tpl) && t.nodes.every((nd) => nd.state == null && nd.b.every((b) => SIMPLE.has(b.k)));
+            v = t.nodes.every((nd) => !nd.dl && nd.state == null && nd.b.every((b) => SIMPLE.has(b.k)));
             simple.set(t, v);
         }
         return v;
@@ -843,7 +872,7 @@ export function mount(root, o) {
             const h = el[HANDLERS], hs = h && (Array.isArray(h) ? h : [h]).filter((x) => x.b.n == e.type);
             if (hs?.length) {
                 for (const h of hs)
-                    h.b.x != null ? trigger(h, e) : handle(h, h.b.f, e, h.b.w);
+                    h.b.x != null ? trigger(h, e) : h.b.ms ? later(h, e) : handle(h, h.b.f, e, h.b.w);
                 return;
             }
             if (el == root)
@@ -864,6 +893,16 @@ export function mount(root, o) {
         if (writes?.some((w) => w.startsWith('$url')))
             writeUrl();
     }
+    /** A debounced handler: runs once `ms` after the last event, with that event. */
+    function later(rb, e) {
+        const t = timers.get(rb);
+        if (t) {
+            env.clearTimeout(t);
+            app.busy--;
+        }
+        app.busy++;
+        timers.set(rb, env.setTimeout(() => { timers.delete(rb); app.busy--; handle(rb, rb.b.f, e, rb.b.w); }, rb.b.ms, 'debounce'));
+    }
     // ---- actions
     function trigger(rb, e) {
         const a = ir.actions[rb.b.x], el = rb.el;
@@ -889,29 +928,49 @@ export function mount(root, o) {
         if (!get && a.concurrency == 'block' && st.n)
             return;
         const s = child(rb.s, { $el: rb.el, $event: e });
-        let url, body;
+        let url = '', body;
         try {
-            url = app.url(a.url, s);
-            body = a.body != null ? fns[a.body](s) : a.form && !get && a.method != 'DELETE' ? serialize(rb.el) : undefined;
+            // a call's arguments are taken when it is triggered, like a request's URL and body
+            if (a.call)
+                body = fns[a.call.args](s);
+            else {
+                url = app.url(a.url, s);
+                const fields = a.form && !get && a.method != 'DELETE';
+                body = a.body != null ? fns[a.body](s) : fields ? (a.enc == 'form' ? formFields(rb.el) : serialize(rb.el)) : undefined;
+                if (a.enc == 'form')
+                    body = formBody(body);
+            }
         }
         catch (err) {
             return unhandled(toError(err), rb.el);
         }
-        const drop = a.optimistic != null ? app.ext.optimistic.begin(a.optimistic, s) : () => { };
-        if (get) {
-            st.c?.abort();
-            return void send(rb, a, st, url, body, drop, (st.c = new AbortController()));
-        }
-        const run = () => void send(rb, a, st, url, body, drop);
-        if (!st.n)
-            run();
-        else if (a.concurrency == 'latest') {
-            st.w ? st.w.drop() : app.busy++;
-            st.w = { run, drop };
+        // a question first: the action runs only when the user agrees
+        const question = a.confirm != null ? fns[a.confirm](s) : null;
+        if (question) {
+            const yes = config.confirm(String(question));
+            if (yes instanceof Promise)
+                return void yes.then((y) => y && go());
+            if (!yes)
+                return;
         }
-        else {
-            app.busy++;
-            st.q.push(run);
+        go();
+        function go() {
+            const drop = a.optimistic != null ? app.ext.optimistic.begin(a.optimistic, s) : () => { };
+            if (get) {
+                st.c?.abort();
+                return void send(rb, a, st, url, body, drop, (st.c = new AbortController()));
+            }
+            const run = () => void send(rb, a, st, url, body, drop);
+            if (!st.n)
+                run();
+            else if (a.concurrency == 'latest') {
+                st.w ? st.w.drop() : app.busy++;
+                st.w = { run, drop };
+            }
+            else {
+                app.busy++;
+                st.q.push(run);
+            }
         }
     }
     async function send(rb, a, st, url, body, drop, c) {
@@ -924,7 +983,9 @@ export function mount(root, o) {
                 x.disabled = true;
         }
         try {
-            const result = await req.send(url, { method: a.method, body, signal: c?.signal });
+            const result = a.call
+                ? await invoke(a.call.run, body, { signal: hide.signal, request: (u, i) => req.send(u, i), el })
+                : await req.send(url, { method: a.method, body, signal: c?.signal });
             if (c && st.c != c)
                 return;
             drop();
@@ -935,7 +996,7 @@ export function mount(root, o) {
             drop();
             if (isAbort(err) || (c && st.c != c))
                 return;
-            const error = toError(err);
+            const error = a.call ? callError(err) : toError(err);
             a.catch != null ? handle(rb, a.catch, null, a.w, { $error: error }) : unhandled(error, el);
         }
         finally {
@@ -968,14 +1029,34 @@ export function mount(root, o) {
     }
     // ---- resources
     function createLoader(def) {
-        const r = createResource(def.name, { key: def.key, order: def.order, locale: () => config.locale?.get(), warn, prep: (x) => (app.prep ? app.prep(x) : x) });
+        const r = createResource(def.name, { key: def.key, order: def.order, locale: () => config.locale?.get(), warn, prep: (x) => (app.prep ? app.prep(x) : x), freeze: app.dev });
         r.onDirty = (what) => app.mark((what == 'data' ? '$r.' : '$meta.') + def.name);
         resources.set(def.name, r);
         Object.defineProperty(app.page.$r, def.name, { get: r.value, enumerable: true });
         app.page.$meta[def.name] = r.meta;
         let url = null, c = null, seq = 0, again = null;
+        const scope = () => app.scopeOf(def.scope);
+        /** `call`: the arguments of the current load; the identity of a load is its arguments' JSON */
+        let args = [], calls = 0;
         const resolve = () => {
-            const s = def.scope < 0 ? app.page : rootScopes[def.scope] ?? app.page;
+            const s = scope();
+            if (def.call) {
+                try {
+                    if (def.when != null && !fns[def.when](s))
+                        return null;
+                    args = fns[def.call.args](s);
+                    try {
+                        return 'call:' + JSON.stringify(args);
+                    }
+                    catch {
+                        return `call:#${++calls}`;
+                    }
+                }
+                catch (e) {
+                    warn(17, def.name, e.message);
+                    return null;
+                }
+            }
             try {
                 return def.when != null && !fns[def.when](s) ? null : app.url(def.src, s);
             }
@@ -1010,8 +1091,23 @@ export function mount(root, o) {
         };
         /** the request URL for the current page of `u` */
         const request = (u, m = l.pager?.current()) => withParams(u, m ? l.pager.params(m) : null);
+        const fail = (e) => {
+            const error = toError(e);
+            r.meta.error = error;
+            r.onDirty('meta');
+            unhandled(error, null, def.name);
+        };
         const l = {
             def, res: r, app, pager: null,
+            scope, get: loadShared, failed: fail, loading,
+            items(body) {
+                let items = pick(def.items, body);
+                if (!Array.isArray(items)) {
+                    warn(12, def.name, def.items ?? '(response)');
+                    items = [];
+                }
+                return items.map(clean);
+            },
             start() {
                 const el = def.data != null ? found.get(def.data) : null;
                 let data;
@@ -1069,7 +1165,9 @@ export function mount(root, o) {
                 loading(true);
                 try {
                     const req = withParams(url, m ? l.pager.params(m) : null);
-                    const body = await loadShared(req, ctl.signal);
+                    const body = def.call
+                        ? await invoke(def.call.run, args, { signal: ctl.signal, request: (u, i) => app.req.send(u, i), el: null })
+                        : await loadShared(req, ctl.signal);
                     if (n != seq)
                         return;
                     store(body, req, m);
@@ -1080,10 +1178,7 @@ export function mount(root, o) {
                 catch (e) {
                     if (n != seq || isAbort(e))
                         return;
-                    const error = toError(e);
-                    r.meta.error = error;
-                    r.onDirty('meta');
-                    unhandled(error, null, def.name);
+                    fail(def.call ? callError(e) : e);
                 }
                 finally {
                     // writes made while this load ran win over its (older) response
@@ -1095,6 +1190,8 @@ export function mount(root, o) {
                 }
             },
         };
+        if (def.each)
+            app.ext.each.fanOut(l);
         if (def.paginate)
             l.pager = app.ext.paginate.pager(l);
         r.loader = l;
@@ -1156,6 +1253,47 @@ export function lis(seq) {
     return keep;
 }
 /** Serializes a form's named controls to nested JSON, or FormData if it has a file input. */
+/**
+ * A body as form fields (`data-sn-encoding="form"`): a form's own fields, or an object's keys with
+ * arrays as repeated keys; null and undefined values are left out. Files stay multipart.
+ */
+export function formBody(body) {
+    if (body == null)
+        return null;
+    if (body instanceof FormData) {
+        const out = new URLSearchParams();
+        for (const [k, v] of body) {
+            if (typeof v != 'string')
+                return body;
+            out.append(k, v);
+        }
+        return out;
+    }
+    if (body instanceof URLSearchParams)
+        return body;
+    const out = new URLSearchParams();
+    for (const [k, v] of Object.entries(body)) {
+        for (const x of Array.isArray(v) ? v : [v])
+            if (x != null)
+                out.append(k, typeof x == 'object' ? JSON.stringify(x) : String(x));
+    }
+    return out;
+}
+/** A form's fields as browsers submit them; with a file input, multipart. */
+function formFields(form) {
+    const out = new URLSearchParams();
+    for (const c of form.elements) {
+        if (!c.name || c.disabled || /^(submit|button|reset|image|fieldset|output)$/.test(c.type))
+            continue;
+        if (c.type == 'file')
+            return new FormData(form);
+        if ((c.type == 'checkbox' || c.type == 'radio') && !c.checked)
+            continue;
+        for (const v of c.type == 'select-multiple' ? [...c.selectedOptions].map((o) => o.value) : [c.value])
+            out.append(c.name, v);
+    }
+    return out;
+}
 export function serialize(form) {
     const controls = [...form.elements];
     if (controls.some((c) => c.type == 'file'))

package/dist/runtime/config.d.ts

@@ -13,17 +13,24 @@ export interface Config {
     origins: string[];
     /** the transport for a `<sn-sync>` stream URL; `undefined` (or no function) means EventSource */
     transport: ((url: string) => Transport | undefined) | null;
+    /** `data-sn-confirm`: asks the question; the action runs on true (window.confirm by default) */
+    confirm: (question: string) => boolean | Promise<boolean>;
     env: Env;
 }
 export declare const config: Config;
 export declare function configure(options: Partial<Omit<Config, 'env'>> & {
     env?: Partial<Env>;
 }): void;
-/** `$error`: a non-2xx response, a network error (status 0) or a refused request. */
+/** `$error`: a non-2xx response, a network error (status 0), a refused request, or a failed action call (status null). */
 export declare class SinterError extends Error {
-    readonly status: number;
+    readonly status: number | null;
     readonly body: unknown;
-    constructor(status: number, body: unknown, message: string);
+    readonly detail: string | null;
+    /**
+     * @param detail what went wrong in words: the server's message or text, or a thrown error's
+     *   message; null when there is none (`message` then falls back to the HTTP status)
+     */
+    constructor(status: number | null, body: unknown, message: string, detail?: string | null);
 }
 /** page-load cache entries (`cache` on `<sn-resource>`), in sessionStorage */
 export declare const CACHE_PREFIX = "sn:c:";

package/dist/runtime/config.js

@@ -2,7 +2,8 @@
 // comes only from configure() in JavaScript, never from the DOM.
 import { defaultEnv } from './env.js';
 export const config = {
-    request: [], sessionProbe: null, onError: null, locale: null, urlSchemes: [], origins: [], transport: null, env: defaultEnv,
+    request: [], sessionProbe: null, onError: null, locale: null, urlSchemes: [], origins: [], transport: null,
+    confirm: (question) => globalThis.confirm(question), env: defaultEnv,
 };
 export function configure(options) {
     const { env, ...rest } = options;
@@ -10,14 +11,20 @@ export function configure(options) {
     if (env)
         config.env = { ...config.env, ...env };
 }
-/** `$error`: a non-2xx response, a network error (status 0) or a refused request. */
+/** `$error`: a non-2xx response, a network error (status 0), a refused request, or a failed action call (status null). */
 export class SinterError extends Error {
     status;
     body;
-    constructor(status, body, message) {
+    detail;
+    /**
+     * @param detail what went wrong in words: the server's message or text, or a thrown error's
+     *   message; null when there is none (`message` then falls back to the HTTP status)
+     */
+    constructor(status, body, message, detail = null) {
         super(message);
         this.status = status;
         this.body = body;
+        this.detail = detail;
         this.name = 'SinterError';
     }
 }

package/dist/runtime/request.d.ts

@@ -3,7 +3,7 @@ import type { Env } from './env.js';
 export declare const TIMEOUT = 30000;
 export interface SendInit {
     method?: string;
-    /** JSON-serialized unless FormData */
+    /** JSON-serialized unless FormData or URLSearchParams (sent form-encoded) */
     body?: unknown;
     headers?: Record<string, string>;
     signal?: AbortSignal | undefined;

package/dist/runtime/request.js

@@ -44,6 +44,10 @@ export function createRequestLayer(env, chain) {
         let body = init.body;
         if (body == null || method == 'GET')
             body = undefined;
+        else if (body instanceof URLSearchParams) {
+            body = body.toString();
+            headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
+        }
         else if (!(body instanceof FormData)) {
             body = JSON.stringify(body);
             headers.set('Content-Type', 'application/json');
@@ -71,7 +75,8 @@ export function createRequestLayer(env, chain) {
         const res = await raw(url, init), body = await parseBody(res);
         if (!res.ok) {
             const b = body, m = typeof body == 'string' ? body.length < 200 && body.trim() : b?.message ?? b?.error;
-            throw new SinterError(res.status, body, typeof m == 'string' && m ? m : `${res.status} ${res.statusText}`.trim());
+            const detail = typeof m == 'string' && m ? m : null;
+            throw new SinterError(res.status, body, detail ?? `${res.status} ${res.statusText}`.trim(), detail);
         }
         return body;
     }

package/dist/runtime/store.d.ts

@@ -29,14 +29,14 @@ export type Op = {
 export interface Meta {
     loading: boolean;
     error: {
-        status: number;
+        status: number | null;
         body: unknown;
         message: string;
     } | null;
     loadedAt: number | null;
     pending: number;
     total: number | null;
-    page?: number;
+    page?: number | null;
     pages?: number | null;
     from?: number | null;
     to?: number | null;
@@ -50,6 +50,8 @@ export interface ResourceOptions {
     warn?: (code: number, ...args: unknown[]) => void;
     /** applied to every stored item (dev builds freeze them) */
     prep?: <T>(item: T) => T;
+    /** hand out frozen lists (dev builds) */
+    freeze?: boolean;
 }
 /** The public store handle (`app.resource(name)`), plus the hooks loaders and features use. */
 export interface Resource<T extends object = any> {
@@ -66,7 +68,8 @@ export interface Resource<T extends object = any> {
     upsert(item: T): void;
     patch(key: string | T, fields: Partial<T>): void;
     remove(key: string | T): void;
-    refetch(): Promise<void>;
+    /** `hint`: a server event's payload; an `each` resource reloads only the source it names */
+    refetch(hint?: object): Promise<void>;
     subscribe(fn: (change: Change<T>) => void): () => void;
     keyOf(item: string | T): string;
     /**
@@ -86,7 +89,7 @@ export interface Resource<T extends object = any> {
     /** while set, upsert/patch/remove are recorded instead of applied */
     recording: Op[] | null;
     loader: {
-        refetch(): Promise<void>;
+        refetch(hint?: object): Promise<void>;
     } | null;
     onDirty(what: 'data' | 'meta'): void;
 }