ngx-json-render 0.5.1 → 0.7.0

package/fesm2022/ngx-json-render.mjs

@@ -1,7 +1,7 @@
 import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, Injectable, inject, computed, untracked, effect, isDevMode, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
-import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, autoFixSpec, validateSpec, createDirectiveRegistry, resolveRepeatStatePath, resolveRepeatItemStatePath, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
+import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, resolveRepeatStatePath, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, autoFixSpec, validateSpec, createDirectiveRegistry, resolveRepeatItemStatePath, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
 export { autoFixSpec, createStateStore, formatSpecIssues, nestedToFlat, validateSpec } from '@json-render/core';
 import { flattenToPointers } from '@json-render/core/store-utils';
 
@@ -967,6 +967,169 @@ function injectDevtoolsActive() {
     return active.asReadonly();
 }
 
+/**
+ * The state paths an element's expressions can read, or `null` when that
+ * can't be known from the spec.
+ *
+ * Worked out from the spec alone, before anything resolves, so that an element
+ * can depend on those paths rather than on the whole state. The answer may
+ * name more paths than a given resolution reads — both branches of a `$cond`,
+ * say — but never fewer: a path left out would be a write the element misses,
+ * and it would keep showing the old value with nothing in the console.
+ *
+ * `null` is the safe answer, and it is given whenever the spec holds something
+ * this reader does not model:
+ *
+ * - a registered directive, whose `resolve` receives the whole context and may
+ *   read any path at all;
+ * - a `$bindState` or `$bindItem` prop — the renderer keeps two-way bound
+ *   elements resolving on every write, see `JrElement.resolvedElement`;
+ * - a `$`-prefixed key it doesn't recognise, which is what an expression added
+ *   to core after this was written would look like;
+ * - a read of the whole state (`''` or `'/'`), and a condition it can't parse.
+ *
+ * The walk mirrors core's `resolvePropValue` and `evaluateVisibility`, in the
+ * same order, because the order decides which expression an object is.
+ */
+function collectStateReads(element, directives, repeatBasePath) {
+    const reader = new StateReader(directives, repeatBasePath);
+    const understood = reader.condition(element.visible) &&
+        Object.values(element.props ?? {}).every((value) => reader.value(value));
+    return understood ? reader.paths : null;
+}
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
+/** Comparison operators a single condition may carry, as core reads them. */
+const COMPARISONS = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'];
+class StateReader {
+    directives;
+    repeatBasePath;
+    paths = new Set();
+    constructor(directives, repeatBasePath) {
+        this.directives = directives;
+        this.repeatBasePath = repeatBasePath;
+    }
+    /** A prop value. Returns false when it can read state this can't name. */
+    value(value) {
+        if (!isObject(value))
+            return true;
+        if (typeof value['$state'] === 'string')
+            return this.state(value['$state']);
+        if (typeof value['$item'] === 'string')
+            return this.item(value['$item']);
+        if ('$index' in value && value['$index'] === true)
+            return true;
+        if (typeof value['$bindState'] === 'string')
+            return false;
+        if (typeof value['$bindItem'] === 'string')
+            return false;
+        if ('$cond' in value && '$then' in value && '$else' in value) {
+            return (this.condition(value['$cond']) &&
+                this.value(value['$then']) &&
+                this.value(value['$else']));
+        }
+        if (typeof value['$computed'] === 'string') {
+            // The function is handed its resolved arguments and nothing else.
+            const args = value['args'];
+            return (!args || Object.values(Object(args)).every((arg) => this.value(arg)));
+        }
+        if (typeof value['$template'] === 'string') {
+            return this.template(value['$template']);
+        }
+        if (Array.isArray(value))
+            return value.every((item) => this.value(item));
+        if (this.directives) {
+            for (const name of this.directives.keys()) {
+                if (name in value)
+                    return false;
+            }
+        }
+        for (const [key, entry] of Object.entries(value)) {
+            if (key.startsWith('$') || !this.value(entry))
+                return false;
+        }
+        return true;
+    }
+    /** A `visible` condition, or the condition of a `$cond`. */
+    condition(condition) {
+        if (condition === undefined || typeof condition === 'boolean')
+            return true;
+        if (Array.isArray(condition)) {
+            return condition.every((single) => this.singleCondition(single));
+        }
+        if (!isObject(condition))
+            return false;
+        for (const group of ['$and', '$or']) {
+            if (group in condition) {
+                const children = condition[group];
+                return (Array.isArray(children) &&
+                    children.every((child) => this.condition(child)));
+            }
+        }
+        return this.singleCondition(condition);
+    }
+    singleCondition(condition) {
+        if (!isObject(condition))
+            return false;
+        let understood;
+        if ('$index' in condition) {
+            understood = true;
+        }
+        else if ('$item' in condition) {
+            const item = condition['$item'];
+            understood = typeof item === 'string' && this.item(item);
+        }
+        else {
+            // Core reads `$state` here without checking it: anything but a string
+            // path reads the whole state.
+            const path = condition['$state'];
+            understood = typeof path === 'string' && this.state(path);
+        }
+        // Core looks only at the first operator present. Reading all of them is
+        // a superset of that.
+        for (const operator of COMPARISONS) {
+            const operand = condition[operator];
+            if (isObject(operand) && typeof operand['$state'] === 'string') {
+                understood = this.state(operand['$state']) && understood;
+            }
+        }
+        return understood;
+    }
+    template(template) {
+        for (const [, placeholder] of template.matchAll(/\$\{([^}]+)\}/g)) {
+            if (placeholder.startsWith('/')) {
+                if (!this.state(placeholder))
+                    return false;
+                continue;
+            }
+            // Core tries the repeat item first and falls back to a state path of
+            // the same name when the item has nothing there.
+            if (!this.item(placeholder) || !this.state(`/${placeholder}`)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    state(path) {
+        if (path === '' || path === '/')
+            return false;
+        this.paths.add(path);
+        return true;
+    }
+    /**
+     * A read of the repeat item, as the state path it sits at. The item value
+     * reaches the element on its own, but only as the same object when an
+     * external store edits it in place, so the path is what notices the edit.
+     */
+    item(itemPath) {
+        if (this.repeatBasePath === undefined)
+            return true;
+        const path = resolveRepeatStatePath({ $item: itemPath }, this.repeatBasePath);
+        return path !== undefined && this.state(path);
+    }
+}
+
 /**
  * The render context of the element currently being rendered.
  * Provided by the renderer for every catalog component instance.
@@ -992,6 +1155,15 @@ const REPEAT_SCOPE = new InjectionToken('ngx-json-render REPEAT_SCOPE');
  * `renderLimits.maxDepth`.
  */
 const RENDER_PATH = new InjectionToken('ngx-json-render RENDER_PATH');
+/**
+ * Whether an element that skipped a state write checks that it was right to:
+ * that resolving it against the whole state would not give anything else.
+ * On in dev mode, off in production.
+ *
+ * @internal Not part of the public API. The check calls `$computed`
+ * functions again, so tests that count those calls turn it off.
+ */
+const CHECK_SKIPPED_WRITES = new InjectionToken('ngx-json-render CHECK_SKIPPED_WRITES', { providedIn: 'root', factory: () => isDevMode() });
 /**
  * Inject the render context inside a catalog component.
  *
@@ -1117,6 +1289,49 @@ function sameValues(a, b, objectsByIdentity) {
     }
     return true;
 }
+/**
+ * Whether two resolved values hold the same content, however they are built.
+ *
+ * For the dev-mode check on skipped writes, which compares a fresh resolution
+ * with an old one: a `$computed` function returns a new object every time,
+ * so identity says nothing there. What it can't see into — functions, a `Map`,
+ * a class instance — it counts as the same, because a check that warns about
+ * a correct element is worse than one that misses a case.
+ */
+function sameContent(a, b, seen = new Set()) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a === 'function' && typeof b === 'function')
+        return true;
+    if (typeof a !== 'object' || typeof b !== 'object' || !a || !b)
+        return false;
+    if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b))
+        return false;
+    if (a instanceof Date)
+        return a.getTime() === b.getTime();
+    const plain = Array.isArray(a) || Object.getPrototypeOf(a) === Object.prototype;
+    if (!plain || seen.has(a))
+        return true;
+    seen.add(a);
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    return keys.every((key) => Object.hasOwn(b, key) &&
+        sameContent(a[key], b[key], seen));
+}
+/** Element keys already warned about by the check on skipped writes. */
+const warnedSkippedWrites = new Set();
+const EMPTY_READS = new Set();
+function sameReads(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || a.size !== b.size)
+        return false;
+    for (const path of a)
+        if (!b.has(path))
+            return false;
+    return true;
+}
 /** The chain from the root down to `path`, as a line a human can follow. */
 function describePath(path) {
     const keys = [];
@@ -1142,11 +1357,71 @@ class JrElement {
     devtoolsActive = injectDevtoolsActive();
     /** The raw (unresolved) element from the spec. */
     rawElement = computed(() => this.root.spec()?.elements?.[this.elementKey()], ...(ngDevMode ? [{ debugName: "rawElement" }] : /* istanbul ignore next */ []));
+    /**
+     * The state paths this element's expressions can read, or null when the
+     * spec doesn't say — see {@link collectStateReads} for when that is.
+     */
+    stateReads = computed(() => {
+        const el = this.rawElement();
+        if (!el)
+            return EMPTY_READS;
+        return collectStateReads(el, this.root.directiveRegistry(), this.repeatScope?.basePath());
+    }, { ...(ngDevMode ? { debugName: "stateReads" } : /* istanbul ignore next */ {}), equal: sameReads });
+    /**
+     * One signal per path this element reads, each holding the value at that
+     * path. They are rebuilt only when the paths change, and a cell that stays
+     * keeps its last value, so a path that didn't change is not a change.
+     *
+     * A cell compares like a resolved prop does: primitives by value, objects
+     * by reference with the internal store (which copies every path it writes)
+     * and never equal with an external `store`, which may write into its
+     * snapshot in place.
+     */
+    stateCells = (() => {
+        let cells = new Map();
+        return computed(() => {
+            const reads = this.stateReads();
+            if (reads === null)
+                return null;
+            const next = new Map();
+            for (const path of reads) {
+                next.set(path, cells.get(path) ??
+                    computed(() => getByPath(this.state.state(), path), {
+                        equal: (a, b) => Object.is(a, b) &&
+                            (typeof a !== 'object' ||
+                                a === null ||
+                                !untracked(this.root.store)),
+                    }));
+            }
+            cells = next;
+            return next;
+        });
+    })();
+    /**
+     * How many times {@link readableState} has taken a snapshot. The dev-mode
+     * check compares it between state writes to tell which ones were skipped.
+     */
+    snapshotsTaken = 0;
+    /**
+     * The state to resolve against: the whole snapshot, but only as fresh as
+     * the paths this element reads. A write elsewhere doesn't reach it, so the
+     * element doesn't resolve anything for it. An element whose reads are
+     * unknown follows every write, as all elements did before.
+     */
+    readableState = computed(() => {
+        this.snapshotsTaken++;
+        const cells = this.stateCells();
+        if (cells === null)
+            return this.state.state();
+        for (const cell of cells.values())
+            cell();
+        return untracked(this.state.state);
+    }, { ...(ngDevMode ? { debugName: "readableState" } : /* istanbul ignore next */ {}), equal: () => false });
     /** Prop/visibility resolution context (state + repeat scope + extensions). */
     resolutionCtx = computed(() => {
         const scope = this.repeatScope;
         return {
-            stateModel: this.state.state(),
+            stateModel: this.readableState(),
             ...(scope
                 ? {
                     repeatItem: scope.item(),
@@ -1288,6 +1563,25 @@ class JrElement {
                 console.warn(`[ngx-json-render] renderLimits.maxDepth (${untracked(this.root.limits)?.maxDepth}) reached at ${describePath(path)}. "${path.key}" and anything below it do not render.`);
             }
         });
+        // Dev mode: after a state write this element skipped, check that it was
+        // right to. Resolving against the whole state has to give what the element
+        // already shows; anything else is a read the spec analysis didn't name.
+        if (inject(CHECK_SKIPPED_WRITES)) {
+            let snapshotsSeen = -1;
+            effect(() => {
+                this.state.state();
+                const shown = this.resolvedElement();
+                const shownVisible = this.visible();
+                const reads = this.stateReads();
+                untracked(() => {
+                    const skipped = this.snapshotsTaken === snapshotsSeen;
+                    snapshotsSeen = this.snapshotsTaken;
+                    if (skipped && shown && reads !== null) {
+                        this.checkSkippedWrite(shown, shownVisible, reads);
+                    }
+                });
+            });
+        }
         // Warn (once per type) about unknown component types.
         const warnedTypes = new Set();
         effect(() => {
@@ -1349,6 +1643,37 @@ class JrElement {
             onCleanup(unsubscribe);
         });
     }
+    /**
+     * Resolve this element against the whole current state and warn, once per
+     * element key, when that differs from what it shows after skipping a write.
+     *
+     * It only reports, and leaves the element as it is: correcting it here would
+     * make dev mode render what production doesn't.
+     */
+    checkSkippedWrite(shown, shownVisible, reads) {
+        const key = this.elementKey();
+        const el = this.rawElement();
+        if (!el || warnedSkippedWrites.has(key))
+            return;
+        const ctx = this.liveResolutionCtx();
+        let props;
+        let visible;
+        try {
+            props = resolveElementProps(el.props ?? {}, ctx);
+            visible = el.visible === undefined || evaluateVisibility(el.visible, ctx);
+        }
+        catch {
+            return;
+        }
+        const differs = Object.keys({ ...props, ...shown.props }).filter((prop) => !sameContent(props[prop], shown.props[prop]));
+        if (visible !== shownVisible)
+            differs.push('visible');
+        if (differs.length === 0)
+            return;
+        warnedSkippedWrites.add(key);
+        const paths = reads.size > 0 ? [...reads].join(', ') : 'no state paths';
+        console.warn(`[ngx-json-render] "${key}" did not resolve again after a state write, but resolving it now changes ${differs.join(', ')}. It resolves only when a state path it reads changes, and it reads ${paths}. Either a $computed function in it depends on something besides its args, or the renderer missed a read — please report the spec at https://github.com/shteynu/ngx-json-render/issues. This check runs in dev mode only.`);
+    }
     /**
      * Resolution context with a live state snapshot, so `$state` references in
      * later actions of a chain see mutations from earlier ones.
@@ -1573,63 +1898,219 @@ function depthIssue(depth, limit) {
     };
 }
 /**
- * Check a spec against a catalog: the component types it names, and then the
- * catalog's own schema.
+ * Check a spec against a catalog: the component types it names, then the
+ * catalog's spec schema, then each element's props against its own
+ * component's schema.
+ *
+ * The props need that pass of their own. Core builds one schema for the whole
+ * spec, and it gives an element's props a component's schema only when the
+ * catalog has exactly one component; with more, every element's props are an
+ * open record, whatever its `type`. So `catalog.validate` holds an element to
+ * its shape — `children`, a `type` from the catalog — and not to its props.
+ *
+ * Whatever that schema did say about the props of an element checked here is
+ * dropped: with a one-component catalog it would be reported twice, and it
+ * judges expressions this pass knows to leave alone.
  *
- * The schema pass is skipped while a type is unknown. A catalog schema keys
- * its element shapes off `type`, so one name it does not recognise turns into
- * a pile of prop errors describing a component that was never the point.
+ * The schema passes are skipped while a type is unknown. That is an error on
+ * its own, and the spec schema would only restate it as a `type` outside the
+ * ones it accepts.
  */
 function catalogIssues(spec, catalog) {
-    const issues = [];
+    const elements = Object.entries(spec.elements ?? {});
     const known = new Set(catalog.componentNames);
-    for (const [key, element] of Object.entries(spec.elements ?? {})) {
+    const unknown = [];
+    for (const [key, element] of elements) {
         if (known.has(element.type))
             continue;
-        issues.push({
+        unknown.push({
             severity: 'error',
             code: 'unknown_component',
             elementKey: key,
             message: `Element "${key}" has type "${element.type}", which this catalog does not define. Nothing renders for it.`,
         });
     }
-    if (issues.length > 0)
-        return issues;
-    const result = catalog.validate(spec);
+    if (unknown.length > 0)
+        return unknown;
+    const schemas = new Map();
+    for (const [key, element] of elements) {
+        const schema = propsSchemaOf(catalog.data, element.type);
+        if (schema)
+            schemas.set(key, schema);
+    }
+    const found = specSchemaIssues(spec, catalog).filter(({ path }) => !(path[0] === 'elements' &&
+        typeof path[1] === 'string' &&
+        schemas.has(path[1]) &&
+        path[2] === 'props'));
+    for (const [key, element] of elements) {
+        const room = MAX_REPORTED_PROP_ISSUES - found.length;
+        if (room <= 0)
+            break;
+        const schema = schemas.get(key);
+        if (schema)
+            found.push(...propsIssues(key, element, schema, room));
+    }
+    return found.slice(0, MAX_REPORTED_PROP_ISSUES).map(toSpecCheckIssue);
+}
+/**
+ * The props schema a catalog declares for a component type, if it declares
+ * one that can be called.
+ */
+function propsSchemaOf(data, type) {
+    const components = data
+        ?.components;
+    if (typeof components !== 'object' ||
+        components === null ||
+        !Object.hasOwn(components, type)) {
+        return undefined;
+    }
+    const props = components[type]?.props;
+    return typeof props
+        ?.safeParse === 'function'
+        ? props
+        : undefined;
+}
+/** What the catalog's spec schema reported, with paths rooted at the spec. */
+function specSchemaIssues(spec, catalog) {
+    try {
+        const result = catalog.validate(spec);
+        return result.success ? [] : readIssues(result.error);
+    }
+    catch (error) {
+        return [{ path: [], message: threwMessage('the catalog schema', error) }];
+    }
+}
+/**
+ * What an element's component schema says about its props, leaving out what
+ * it says about expressions, with paths rooted at the spec.
+ *
+ * A schema that throws counts as a rejection, not a crash. Real ones do:
+ * `ValidationConfigSchema`, which every Material input's `validation` prop
+ * uses, recurses through `enabled` and overflows the stack a thousand
+ * `$and`s deep.
+ */
+function propsIssues(key, element, schema, room) {
+    const at = ['elements', key, 'props'];
+    let result;
+    try {
+        result = schema.safeParse(element.props);
+    }
+    catch (error) {
+        return [
+            {
+                path: at,
+                message: threwMessage(`the "${element.type}" schema`, error),
+            },
+        ];
+    }
     if (result.success)
-        return issues;
-    return propIssues(result.error);
+        return [];
+    const issues = [];
+    for (const { path, message } of readIssues(result.error)) {
+        if (issues.length >= room)
+            break;
+        if (reachesExpression(element.props, path))
+            continue;
+        issues.push({ path: [...at, ...path], message });
+    }
+    return issues;
+}
+/**
+ * Whether a props issue is about an expression: it sits on one, inside one,
+ * or on a value holding one.
+ *
+ * `{"$state": "/title"}` where the schema wants a string is not a defect.
+ * Core resolves every such value before the component sees it, so the schema
+ * would be judging something that never renders. Any `$`-prefixed key counts
+ * — directive names must start with `$`, and so would an expression added to
+ * core later. A value merely holding one is left alone too, since a union or
+ * a refinement over it ran on the unresolved value.
+ *
+ * The props object itself is not an expression: core resolves the values
+ * inside it, never the object.
+ */
+function reachesExpression(props, path) {
+    let value = props;
+    for (const segment of path) {
+        if (typeof value !== 'object' || value === null)
+            return false;
+        value = value[segment];
+        if (isExpression(value))
+            return true;
+    }
+    return holdsExpression(value);
+}
+/** A value core resolves at render time — or will, once it knows the key. */
+function isExpression(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.keys(value).some((key) => key.startsWith('$')));
 }
 /**
- * Turn whatever the catalog's schema reported into issues.
+ * Whether anything nested inside `value` is an expression.
+ *
+ * Iterative, and it remembers what it has seen, for the same reason as
+ * {@link analyseSpecGraph}: props are as attacker-shaped as the rest of the
+ * spec, and a check that overflowed or looped on them would be a second way
+ * to crash.
+ */
+function holdsExpression(value) {
+    const pending = [value];
+    const seen = new Set();
+    while (pending.length > 0) {
+        const current = pending.pop();
+        if (typeof current !== 'object' || current === null)
+            continue;
+        if (seen.has(current))
+            continue;
+        seen.add(current);
+        for (const child of Object.values(current)) {
+            if (isExpression(child))
+                return true;
+            pending.push(child);
+        }
+    }
+    return false;
+}
+/**
+ * Read what a schema reported.
  *
  * Read defensively rather than typed against the schema library: the shape
  * below (`issues`, each with `path` and `message`) is what every version of
  * it has produced, and a renderer that threw while explaining a bad spec
  * would be the worse failure.
  */
-function propIssues(error) {
+function readIssues(error) {
     const raw = error?.issues;
     if (!Array.isArray(raw))
         return [];
-    return raw.slice(0, MAX_REPORTED_PROP_ISSUES).map((entry) => {
+    return raw.map((entry) => {
         const item = entry;
-        const path = Array.isArray(item.path) ? item.path : [];
-        const message = typeof item.message === 'string' ? item.message : 'is not valid';
-        // Paths are rooted at the spec, so `elements.<key>.props.<prop>` names the
-        // element in its second segment.
-        const elementKey = path[0] === 'elements' && typeof path[1] === 'string'
-            ? path[1]
-            : undefined;
-        const where = path.length > 0 ? path.join('.') : 'spec';
+        const path = item?.path;
+        const message = item?.message;
         return {
-            severity: 'error',
-            code: 'invalid_props',
-            ...(elementKey === undefined ? {} : { elementKey }),
-            message: `${where}: ${message}`,
+            path: Array.isArray(path) ? path : [],
+            message: typeof message === 'string' ? message : 'is not valid',
         };
     });
 }
+function threwMessage(schema, error) {
+    const reason = error instanceof Error ? ` (${error.name}: ${error.message})` : '';
+    return `${schema} threw instead of answering${reason}, so this counts as rejected`;
+}
+function toSpecCheckIssue({ path, message }) {
+    // Paths are rooted at the spec, so `elements.<key>.props.<prop>` names the
+    // element in its second segment.
+    const elementKey = path[0] === 'elements' && typeof path[1] === 'string' ? path[1] : undefined;
+    const where = path.length > 0 ? path.map(String).join('.') : 'spec';
+    return {
+        severity: 'error',
+        code: 'invalid_props',
+        ...(elementKey === undefined ? {} : { elementKey }),
+        message: `${where}: ${message}`,
+    };
+}
 
 const CLEAN = {
     spec: null,
@@ -1814,7 +2295,11 @@ class JsonRenderer {
     /**
      * The catalog the spec was generated for. Given one, `validate` also checks
      * what structure alone cannot: that every `type` is a component the catalog
-     * defines, and that the props match its schema.
+     * defines, that every element has the shape the catalog's spec schema asks
+     * for — a `children` array, even on a leaf — and that its props match its
+     * component's schema. A prop written as an expression — `$state`,
+     * `$bindState`, `$template`, a directive — has no value until render time,
+     * so it is not checked.
      *
      * Only read when `validate` is on, and — like the rest of the check —
      * skipped while `loading`.