@cube-nl/dmp-sdk 1.1.0-rc.1 → 1.1.0-rc.3

package/dist/ui/trial-banner.js

@@ -0,0 +1,199 @@
+import { clear, h } from './dom.js';
+import { BASE_CSS } from './styles.js';
+import { NL } from './texts.js';
+/** Spec section 7: every 5 s while the page is visible, every 60 s while it is hidden. */
+export const POLL_VISIBLE_MS = 5000;
+export const POLL_HIDDEN_MS = 60000;
+/** A 429's numeric Retry-After is honoured up to this long, and never past the expiry. */
+export const RETRY_AFTER_CAP_MS = 60000;
+/** A status request that hangs this long is given up as a network error, so the polling goes on. */
+export const STATUS_TIMEOUT_MS = 10000;
+const CSS = `
+.banner{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5rem 1rem;
+border-bottom:1px solid var(--cube-color-border);border-left:4px solid var(--cube-color-warning);
+background:var(--cube-color-surface);font-size:.875rem}
+.banner p{margin:0;flex:1 1 16rem}
+.banner[data-state=expired],.banner[data-state=closed]{border-left-color:var(--cube-color-danger)}
+`;
+/**
+ * Puts `cube-trial-banner` at the top of `<body>` and polls the trial's status: it says what the page is, ends when
+ * the trial does, and follows a newer version (by itself only when that one reads nothing more).
+ * Returns a function that stops the polling.
+ */
+export function showTrialBanner(scope, config) {
+    const doc = scope.document;
+    const now = scope.now ?? Date.now;
+    const expiresAt = Date.parse(config.expiresAt);
+    const known = Number.isFinite(expiresAt);
+    const time = known
+        ? new Intl.DateTimeFormat('nl-NL', { hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }).format(new Date(expiresAt))
+        : null;
+    const host = doc.createElement('cube-trial-banner');
+    const root = host.attachShadow({ mode: 'open' });
+    const sheets = [BASE_CSS, CSS].map((css) => {
+        const sheet = new scope.CSSStyleSheet();
+        sheet.replaceSync(css);
+        return sheet;
+    });
+    const message = h(doc, 'p', {}, NL.trial.banner(time, config.leest));
+    const region = h(doc, 'div', { class: 'banner', role: 'status', 'aria-live': 'polite' }, message);
+    let timer = null;
+    let ended = false;
+    let inFlight = false;
+    let abort = null;
+    /** Until when a 429 asked to wait; 0 when no back-off holds. */
+    let backOffUntil = 0;
+    root.adoptedStyleSheets = sheets;
+    root.appendChild(region);
+    const insert = () => {
+        doc.body.insertBefore(host, doc.body.firstChild);
+    };
+    const visible = () => doc.visibilityState !== 'hidden';
+    const stop = () => {
+        ended = true;
+        abort?.abort();
+        if (timer !== null)
+            scope.clearTimeout(timer);
+        timer = null;
+        doc.removeEventListener('visibilitychange', onVisibility);
+    };
+    const end = (state, action) => {
+        stop();
+        // The app may have replaced <body>'s children: without the banner the end state would go unseen.
+        if (!host.isConnected && doc.body !== null)
+            insert();
+        region.setAttribute('data-state', state);
+        clear(message);
+        message.appendChild(doc.createTextNode(NL.trial[state]));
+        if (action !== undefined) {
+            region.appendChild(h(doc, 'button', { type: 'button', onclick: action[1] }, action[0]));
+        }
+    };
+    const schedule = (beat = visible() ? POLL_VISIBLE_MS : POLL_HIDDEN_MS) => {
+        if (ended)
+            return;
+        if (timer !== null)
+            scope.clearTimeout(timer);
+        // Capped again: a wall clock that jumps back must not stretch the back-off.
+        const wait = Math.max(beat, Math.min(RETRY_AFTER_CAP_MS, backOffUntil - now()));
+        timer = scope.setTimeout(tick, known ? Math.max(0, Math.min(wait, expiresAt - now())) : wait);
+    };
+    const tick = async () => {
+        timer = null;
+        if (ended)
+            return;
+        // The hour is over: no request needed to know it.
+        if (known && now() >= expiresAt) {
+            end('expired');
+            return;
+        }
+        // A back-off governs only the request it delays; the answer to this one sets the next.
+        backOffUntil = 0;
+        inFlight = true;
+        const controller = scope.AbortController === undefined ? null : new scope.AbortController();
+        abort = controller;
+        const timeout = controller === null ? null : scope.setTimeout(() => controller.abort(), STATUS_TIMEOUT_MS);
+        try {
+            const response = await scope.fetch(config.statusUrl, {
+                headers: { Accept: 'application/json', Authorization: `Bearer ${config.token}` },
+                cache: 'no-store',
+                ...(controller === null ? {} : { signal: controller.signal }),
+            });
+            await answer(response);
+        }
+        catch {
+            // Offline for a moment, or the request hung and was aborted: try again on the next beat.
+            schedule();
+        }
+        finally {
+            inFlight = false;
+            abort = null;
+            if (timeout !== null)
+                scope.clearTimeout(timeout);
+        }
+    };
+    const answer = async (response) => {
+        if (ended)
+            return;
+        if (response.ok)
+            backOffUntil = 0;
+        if (response.status === 429) {
+            const seconds = (response.headers.get('Retry-After') ?? '').trim();
+            if (/^\d+$/.test(seconds))
+                backOffUntil = now() + Math.min(RETRY_AFTER_CAP_MS, Number(seconds) * 1000);
+        }
+        if (response.ok || response.status === 429 || response.status >= 500) {
+            schedule();
+            return;
+        }
+        let problem = {};
+        try {
+            const body = await response.json();
+            if (body !== null && typeof body === 'object')
+                problem = body;
+        }
+        catch {
+            // No problem body: treated as closed below.
+        }
+        const code = problem.code;
+        let newerUrl = null;
+        if (code === 'trial_expired') {
+            end('expired');
+        }
+        else if (code === 'trial_elsewhere') {
+            end('elsewhere', [NL.trial.reload, () => scope.location.reload()]);
+        }
+        else if (code === 'trial_replaced' && (newerUrl = trustedNewer(problem.newer, config.dmpUrl)) !== null) {
+            const newer = newerUrl.href;
+            if (problem.wider === false) {
+                end('refreshing');
+                scope.location.assign(newer);
+            }
+            else {
+                // Reads more than the open one: only the maker's click may widen what this tab reads.
+                end('wider', [NL.trial.load, () => scope.location.assign(newer)]);
+            }
+        }
+        else {
+            end('closed');
+        }
+    };
+    function onVisibility() {
+        if (ended || inFlight)
+            return;
+        if (!visible()) {
+            schedule();
+            return;
+        }
+        // Back in view during a back-off: wait out its rest.
+        if (backOffUntil > now()) {
+            schedule(0);
+            return;
+        }
+        // Back in view: ask right away instead of waiting out the hidden interval.
+        if (timer !== null)
+            scope.clearTimeout(timer);
+        void tick();
+    }
+    doc.addEventListener('visibilitychange', onVisibility);
+    if (doc.body === null) {
+        doc.addEventListener('DOMContentLoaded', insert, { once: true });
+    }
+    else {
+        insert();
+    }
+    schedule();
+    return stop;
+}
+/** Only the DMP's own open route: same origin as `dmpUrl`, under `/apps/proef/`. */
+function trustedNewer(newer, dmpUrl) {
+    if (typeof newer !== 'string')
+        return null;
+    try {
+        const url = new URL(newer);
+        return url.origin === new URL(dmpUrl).origin && url.pathname.startsWith('/apps/proef/') ? url : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/ui/write.d.ts

@@ -12,8 +12,8 @@ export declare function attemptFor(earlier: Attempt | null, fingerprint: string)
 export declare function showAlert(doc: Document, target: HTMLElement, message: string, action?: HTMLElement | null): void;
 /**
  * Shows why a write failed: a 422 on the fields it names, with the form-level line, and the messages for fields
- * without an editor listed in the alert (`label` names them); anything else as one line. Never the browser's own
- * (English) text of a network failure: stateFor would show a TypeError's message.
+ * without an editor listed in the alert (`label` names them); anything else as one line. Only the kind of stateFor
+ * is used: the alert never shows an error's own text.
  */
 export declare function showWriteFailure(doc: Document, alert: HTMLElement, error: unknown, editors: Editor[], label: (field: string) => string): void;
 /** Who is signed in, as a key: null when nobody is. A write must not go out as somebody who signed in since. */

package/dist/ui/write.js

@@ -29,8 +29,8 @@ export function showAlert(doc, target, message, action) {
 }
 /**
  * Shows why a write failed: a 422 on the fields it names, with the form-level line, and the messages for fields
- * without an editor listed in the alert (`label` names them); anything else as one line. Never the browser's own
- * (English) text of a network failure: stateFor would show a TypeError's message.
+ * without an editor listed in the alert (`label` names them); anything else as one line. Only the kind of stateFor
+ * is used: the alert never shows an error's own text.
  */
 export function showWriteFailure(doc, alert, error, editors, label) {
     const errors = fieldErrors(error);

package/dist/version.d.ts

@@ -1,4 +1,4 @@
 /** This package's version. A test holds it equal to package.json's. */
-export declare const VERSION = "1.1.0-rc.1";
+export declare const VERSION = "1.1.0-rc.3";
 /** The `"sdk"` value a `cube-app.json` manifest names for the API `CubeApp` offers here. */
 export declare const MANIFEST_SDK = "1";

package/dist/version.js

@@ -1,4 +1,4 @@
 /** This package's version. A test holds it equal to package.json's. */
-export const VERSION = '1.1.0-rc.1';
+export const VERSION = '1.1.0-rc.3';
 /** The `"sdk"` value a `cube-app.json` manifest names for the API `CubeApp` offers here. */
 export const MANIFEST_SDK = '1';

package/dist/wireframe.js

@@ -1,5 +1,5 @@
 import { DmpError } from './errors.js';
-import { PreviewStore } from './preview.js';
+import { compare, PreviewStore } from './preview.js';
 import { isoDate } from './ui/format.js';
 const FORMATS = {
     tekst: 'text',
@@ -11,6 +11,8 @@ const FORMATS = {
 };
 const filled = (value) => typeof value === 'string' && value !== '';
 const own = (row, key) => Object.prototype.hasOwnProperty.call(row, key);
+// `a, -b` and ['a', '-b'] alike: the items of a comma list, as the server reads it.
+const items = (value = []) => [value].flat().join(',').split(',').map((item) => item.trim());
 function isGap(value) {
     if (typeof value !== 'object' || value === null) {
         return false;
@@ -29,11 +31,12 @@ function isGap(value) {
 }
 /** The valid gap entries of `ontbreekt`; malformed ones are dropped with a single warning. */
 export function readGaps(value) {
-    if (!Array.isArray(value)) {
-        return [];
+    const gaps = [];
+    const dropped = [];
+    // Anything but a list is one malformed entry: a typo must not silently mean "nothing is missing".
+    for (const entry of Array.isArray(value) ? value : value == null ? [] : [value]) {
+        (isGap(entry) ? gaps : dropped).push(entry);
     }
-    const gaps = value.filter(isGap);
-    const dropped = value.filter((entry) => !isGap(entry));
     if (dropped.length > 0) {
         console.warn(`cube-app.json ontbreekt: ${dropped.length} malformed entries ignored`, dropped);
     }
@@ -73,10 +76,11 @@ export function withGaps(schema, gaps) {
     const names = added.map((field) => field.name);
     return {
         ...schema,
-        // Mock data may hold a missing field without its format: an amount there still shows as money.
+        // Money is not recognisable by its values, dates are (inferFormat): only an amount gets its format here, and a
+        // stale `datum` gap must not drop a live date-time's time.
         fields: [...schema.fields.map((field) => {
                 const gap = gaps.find(({ resource, veld }) => resource === schema.name && veld === field.name);
-                return gap !== undefined && field.format == null ? { ...field, format: shown(gap.type) } : field;
+                return gap?.type === 'bedrag' && field.format == null ? { ...field, format: 'currency' } : field;
             }), ...added],
         // An empty summary means "every field of a row", which already holds the invented ones.
         summary: schema.summary.length > 0 ? [...schema.summary, ...names] : schema.summary,
@@ -141,13 +145,14 @@ async function locally(name, rows, { filter = {}, sort = [] }) {
 export function mixedResource(live, gaps, mock, mockRows) {
     const { name } = live;
     const missing = new Map(gaps.filter((gap) => gap.resource === name && gap.veld !== undefined).map((gap) => [gap.veld, gap]));
-    // `-field`, `sum(field)` and `field.month` all name `field`.
-    const names = (item) => item.split(/[-+(),.]/).some((part) => missing.has(part));
+    // `-field`, `sum(field)` and `field.month` name `field`; `count` and `created_at.month` do not name a field
+    // called `count` or `month`.
+    const names = (item) => missing.has(/^[-+]?(?:\w+\()?([^.()]*)/.exec(item)?.[1] ?? '');
     const split = (query = {}) => {
         const selected = selection(query, name);
         const kept = selected?.filter((field) => !missing.has(field));
         const filters = Object.entries(query.filter ?? {});
-        const sort = [query.sort ?? []].flat();
+        const sort = items(query.sort).filter((item) => item !== '');
         // The live part names no missing field; the local part only missing ones.
         const part = (local) => ({
             filter: Object.fromEntries(filters.filter(([key]) => missing.has(key) === local)),
@@ -181,7 +186,15 @@ export function mixedResource(live, gaps, mock, mockRows) {
                 }
             }
         }
-        return { ...page, data: data };
+        const { meta } = page;
+        return {
+            ...page,
+            data: data,
+            // A filter on a missing field covers this page only, so the count and the last page say so too.
+            meta: Object.keys(local.filter).length > 0
+                ? { ...meta, page: { ...meta.page, total: data.length, pages: meta.page.number } }
+                : meta,
+        };
     };
     const list = async (query, init) => {
         const parts = split(query);
@@ -206,9 +219,15 @@ export function mixedResource(live, gaps, mock, mockRows) {
             const parts = split(query);
             const response = await live.get(id, parts.live, init);
             fill(response.data, parts.shown);
+            // The id was only asked for the invented values.
+            if (!parts.shown('id')) {
+                delete response.data.id;
+            }
             return response;
         },
-        aggregate: (query, init) => [query.fn, query.group ?? [], Object.keys(query.filter ?? {})].flat().some(names)
+        aggregate: (query, init) => [items(query.fn).map((fn) => fn.replace(/^\w+$/, '')), items(query.group), Object.keys(query.filter ?? {})]
+            .flat()
+            .some(names)
             ? mock.resource(name).aggregate(query)
             : live.aggregate(query, init),
     };
@@ -253,9 +272,27 @@ export function simulatedWrites(client, name) {
             .map((row) => local.get(key(row)) ?? row);
         const joined = fitting.filter((row) => !served.has(key(row)) && !listed.has(key(row)));
         const total = page.total - [...served].filter((id) => !fits.has(id)).length + joined.length;
+        let data = page.number === 1 ? [...joined, ...kept] : kept;
+        // No sort reads as one empty field, which no row has: then nothing moves.
+        const sorts = items(query.sort)
+            .map((item) => [item.replace(/^[-+]/, ''), item.startsWith('-') ? -1 : 1]);
+        // A row written here that the server did not list (created, or joining the list) or that changed in a sort
+        // field is placed by the sort; the others keep the server's order, whose collation may differ from ours.
+        const placed = (row) => local.has(key(row))
+            && (!listed.has(key(row)) || sorts.some(([field]) => origins.get(key(row))?.[field] !== row[field]));
+        const server = data.filter((row) => !placed(row));
+        // Only when the server's rows carry every sort field to compare on; a placed row without one sorts as empty.
+        if (sorts.every(([field]) => server.every((row) => own(row, field)))) {
+            for (const row of data.filter(placed)) {
+                // Before the first row (server or placed) it sorts before; -1 >>> 0 is past the end, so it appends.
+                const at = server.findIndex((other) => sorts.reduce((result, [field, sign]) => result || sign * compare(row[field], other[field]), 0) < 0);
+                server.splice(at >>> 0, 0, row);
+            }
+            data = server;
+        }
         return {
             ...response,
-            data: (page.number === 1 ? [...joined, ...kept] : kept).map((row) => pick(row, query)),
+            data: data.map((row) => pick(row, query)),
             meta: { ...response.meta, page: { ...page, total } },
         };
     };
@@ -268,7 +305,7 @@ export function simulatedWrites(client, name) {
         return copy === undefined ? client.get(id, query, init) : answer(200, pick(copy, query));
     };
     // The row as it is here; a real one's server copy is kept the first time it changes.
-    const own = async (id) => {
+    const current = async (id) => {
         const { data } = await get(id);
         if (!local.has(String(id))) {
             origins.set(String(id), data);
@@ -299,14 +336,14 @@ export function simulatedWrites(client, name) {
             return answer(201, { ...row });
         },
         async update(id, body) {
-            const data = await own(id);
+            const data = await current(id);
             const row = { ...data, ...body, id: data.id };
             local.set(String(id), row);
             return answer(200, { ...row });
         },
         // As the server: an id that is not there is a 404, and a delete never lowers a count for nothing.
         async delete(id) {
-            await own(id);
+            await current(id);
             local.delete(String(id));
             deleted.add(String(id));
             return answer(204, null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-nl/dmp-sdk",
-  "version": "1.1.0-rc.1",
+  "version": "1.1.0-rc.3",
   "description": "Dependency-free TypeScript client for the Cube DMP REST API (cube/api), with OAuth 2.1 + PKCE, and CubeApp for no-build apps (preview on mock data, live on the DMP).",
   "license": "MIT",
   "type": "module",
@@ -25,7 +25,10 @@
     "access": "public",
     "tag": "next"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/trial.js",
+    "./dist/cube-sdk.js"
+  ],
   "engines": {
     "node": ">=20"
   },