@luigisbox/luma 0.0.0-stage → 0.2.0

package/parity/behaviour.mjs

@@ -0,0 +1,379 @@
+// Behaviour parity (docs/PARITY.md, "Behaviour"): an interactive element can
+// look identical to theirs and do nothing (e.g. a link that sends another
+// product's id, such as `/wishlist/add?id=<id>`), yet a visual comparison
+// alone scores it as matching. So the map declares interactions per part (a
+// click, a tap, a check, a select), the engine takes each on both sides for
+// the same paired product and records its outcome (the navigation, the
+// requests, the watched state), and this module compares the outcomes:
+//   - an outcome that differs is MAJOR (another URL, another request, another
+//     product's id in it, a counter that moves otherwise);
+//   - an element that has an effect on theirs and none on ours, or that
+//     errors on ours, is CRITICAL;
+//   - a control of ours with no counterpart that does nothing is CRITICAL.
+// The safety rules (real actions on a live site) are here too: what is never
+// let through, and what is only recorded. And the hold check's result (a
+// reload of our page painting their listing). Pure,
+// unit-tested.
+import { decide } from './owner.mjs';
+import { WEIGHT, aggregate, scoreOf } from './compare.mjs';
+
+/** Never let through, whatever the map says: checkout, payment, login and account pages (their path), payment providers (their host). */
+export const NEVER = Object.freeze({
+  path: /(^|\/)(checkout|check-out|payment|payments|pay|login|log-in|logout|signin|sign-in|signup|sign-up|register|account|my-account|password|order|orders|kasse|pokladna|pokladňa|zahlung|betalen|afrekenen|inloggen|anmelden|prihlasenie|prihlaseni)(\/|$|[.?#-])/i,
+  host: /(^|\.)(stripe\.com|paypal\.com|adyen\.com|mollie\.com|klarna\.com|braintreegateway\.com|checkout\.com|gopay\.(cz|com)|payu\.(com|cz|pl)|comgate\.cz|thepay\.cz|besteron\.com)$/i,
+});
+/** Not sent unless the map says `"safe": true`: a POST (or any method but GET) to a cart, a compare list or a wishlist. */
+export const UNSAFE = /(cart|basket|bag|compare|comparison|wishlist|wish-list|favou?rites?|winkelwagen|vergelijk|kosik|košík|kos[ií]k|merkliste|warenkorb|panier|carrello)/i;
+/** Requests that are an action's own (not the assets a page loads). */
+const ACTION_TYPES = new Set(['document', 'xhr', 'fetch', 'ping', 'eventsource', 'other']);
+
+/**
+ * What happens to a request an action makes: `never` (aborted: checkout,
+ * payment, login), `intercept` (recorded, then aborted: compared, never
+ * sent) or `through` (sent). `safe`: the interaction's ("safe": true lets
+ * it through, false intercepts every request of the action; unset, a
+ * non-GET to a cart, a compare list or a wishlist is intercepted).
+ * @param {{ method: string, url: string, type?: string }} req @param {boolean | null} safe
+ * @returns {'never' | 'intercept' | 'through' | 'asset'}
+ */
+export const fateOf = (req, safe) => {
+  let u;
+  try {
+    u = new URL(req.url);
+  } catch {
+    return 'never';
+  }
+  if (NEVER.host.test(u.hostname) || NEVER.path.test(u.pathname)) return 'never';
+  if (req.type && !ACTION_TYPES.has(req.type)) return 'asset';
+  if (safe === true) return 'through';
+  if (safe === false) return 'intercept';
+  return req.method.toUpperCase() !== 'GET' && UNSAFE.test(`${u.pathname}${u.search}`) ? 'intercept' : 'through';
+};
+
+/**
+ * The product's ids an action may carry (their tile's id, the catalog
+ * record's values, each one's last segment: `product/42` is `42` too), the
+ * values a URL or a body is read for.
+ * @param {(string | number | null | undefined)[]} values @param {any} [hit] the catalog record
+ */
+export const knownIds = (values, hit = null) => {
+  const out = new Set();
+  const add = (v) => {
+    if (v == null) return;
+    const s = String(v).trim();
+    if (!s || s.length > 64 || !/\d/.test(s)) return;
+    out.add(s);
+    const tail = s.split(/[/:#]/).pop();
+    if (tail && tail !== s && /\d/.test(tail)) out.add(tail);
+  };
+  for (const v of values) add(v);
+  for (const [k, v] of Object.entries(hit ?? {})) {
+    if (/url|image|price|title|desc/i.test(k)) continue;
+    for (const x of Array.isArray(v) ? v.slice(0, 10) : [v]) if (typeof x === 'string' || typeof x === 'number') add(x);
+  }
+  return [...out].sort();
+};
+
+/**
+ * A URL as a pattern (path segments and query values that are one of the
+ * product's ids `{id}`, other numbers `{n}`; the query by its names), and the
+ * ids it carries, in order: `/wishlist/add?id=42` -> `/wishlist/add?id={id}`.
+ * @param {string} url @param {string[]} ids
+ */
+export const patternOf = (url, ids = []) => {
+  let u;
+  try {
+    u = new URL(url);
+  } catch {
+    return { pattern: String(url), ids: [] };
+  }
+  const found = [];
+  const one = (v) => {
+    let d = v;
+    try {
+      d = decodeURIComponent(v);
+    } catch {}
+    if (ids.includes(d)) {
+      found.push(d);
+      return '{id}';
+    }
+    return /^\d+$/.test(d) || /^[0-9a-f]{16,}$/i.test(d) || /^[0-9a-f-]{32,36}$/i.test(d) ? '{n}' : v;
+  };
+  const path = u.pathname.split('/').map((s) => (s ? one(s) : s)).join('/');
+  const q = [...u.searchParams].map(([k, v]) => [k, one(v)]).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+  const query = q.length ? `?${q.map(([k, v]) => `${k}=${v === '{id}' || v === '{n}' ? v : '…'}`).join('&')}` : '';
+  return { pattern: `${path}${query}`, ids: found };
+};
+
+/** The product's ids a request body carries (a JSON value, a form value), in order of appearance. @param {string | null | undefined} body @param {string[]} ids */
+export const bodyIds = (body, ids = []) => {
+  if (!body) return [];
+  const s = String(body);
+  const hits = [];
+  for (const id of ids) {
+    const re = new RegExp(`(^|[^\\w-])${id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}($|[^\\w-])`);
+    const m = re.exec(s);
+    if (m) hits.push({ id, at: m.index });
+  }
+  // The longest id at a place (product/42 over 42): the one the body names.
+  hits.sort((a, b) => a.at - b.at || b.id.length - a.id.length);
+  const out = [];
+  let last = -1;
+  for (const h of hits) if (h.at > last) (out.push(h.id), (last = h.at + h.id.length));
+  return out;
+};
+
+/** Whether a request is the shop's own (the page's host, its subdomains, its parent domain's), never Luigi's Box's. @param {string} page @param {string} url */
+export const ownSite = (page, url) => {
+  try {
+    const [p, u] = [new URL(page).hostname, new URL(url).hostname];
+    if (/(^|\.)luigisbox\.(ai|com|tech)$/i.test(u)) return false;
+    const base = p.split('.').slice(-2).join('.');
+    return u === p || u === base || u.endsWith(`.${base}`);
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * A navigation that stays on the page's own path (a filter, a sort, the
+ * next page: a full load on an MPA, pushState on ours): the page and the
+ * params it changed, by name (`(this page) +brand -page`), so our search
+ * page and their category listing compare alike (`names: false`: our search
+ * page against their category listing, whose params are named otherwise:
+ * `(this page) +param`). Null when it went elsewhere.
+ * @param {string} start @param {string} to @param {string[]} ids @param {{ names?: boolean }} [o]
+ */
+export const inPlace = (start, to, ids = [], { names = true } = {}) => {
+  try {
+    const [a, b] = [new URL(start), new URL(to)];
+    if (a.origin !== b.origin || a.pathname.replace(/\/+$/, '') !== b.pathname.replace(/\/+$/, '')) return null;
+    const changes = [];
+    const found = [];
+    for (const k of new Set([...a.searchParams.keys(), ...b.searchParams.keys()])) {
+      const [x, y] = [a.searchParams.getAll(k).join(), b.searchParams.getAll(k).join()];
+      if (x === y) continue;
+      changes.push(`${!a.searchParams.has(k) ? '+' : !b.searchParams.has(k) ? '-' : '~'}${names ? k : 'param'}`);
+      for (const v of b.searchParams.getAll(k)) if (ids.includes(v)) found.push(v);
+    }
+    return { pattern: `(this page)${changes.length ? ` ${changes.sort().join(' ')}` : ''}`, ids: found };
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * What an action did, from what the engine recorded on one side:
+ * `start` and `final` URLs, `navigations` (the main frame's), `requests` (the
+ * action's own: { method, url, type, body, status, failed, fate }), the
+ * watches before and after, the DOM changes after it (no navigation), the
+ * target's own state, an `error` (the action could not be taken, the page
+ * threw). The patterns follow the product's `ids`; `cross`: ours against
+ * another page of theirs (the params of a navigation in place by their kind).
+ * @param {any} raw @param {string[]} ids @param {{ cross?: boolean }} [o]
+ */
+export const outcomeOf = (raw, ids = [], { cross = false } = {}) => {
+  if (!raw) return null;
+  const same = (a, b) => {
+    try {
+      const [x, y] = [new URL(a), new URL(b)];
+      return x.origin === y.origin && x.pathname.replace(/\/+$/, '') === y.pathname.replace(/\/+$/, '') && x.search === y.search;
+    } catch {
+      return a === b;
+    }
+  };
+  const docs = (raw.requests ?? []).filter((r) => r.type === 'document');
+  const blocked = docs.find((r) => r.fate === 'never' || r.fate === 'intercept');
+  // A document loaded (a reload, another page), or the URL changed in place (pushState): a navigation.
+  const moved = !same(raw.start, raw.final);
+  const kind = blocked ? (blocked.fate === 'never' ? 'blocked' : 'intercepted') : docs.length ? (moved ? 'page' : 'reload') : moved && (raw.navigations ?? 0) > 0 ? 'page' : 'none';
+  const target = blocked ? blocked.url : raw.final;
+  const at = kind === 'page' || kind === 'blocked' || kind === 'intercepted' ? inPlace(raw.start, target, ids, { names: !cross }) ?? patternOf(target, ids) : { pattern: null, ids: [] };
+  // The document it asked for first, when it ended elsewhere (a redirect back: /wishlist/add?id=42 -> the page again).
+  const first = docs[0] && !blocked && !same(docs[0].url, raw.final) ? patternOf(docs[0].url, ids) : null;
+  // `document`: whether the page was loaded again (reported; an MPA's full load and an in-place update alike are compared by their URL).
+  const nav = { kind, pattern: at.pattern, via: first?.pattern ?? null, ids: [...(first?.ids ?? []), ...at.ids], document: docs.length > 0 };
+  // The shop's own requests (its host and subdomains); Luma's API and analytics are our machinery, a tracker's beacon no outcome.
+  const requests = (raw.requests ?? [])
+    .filter((r) => r.fate !== 'asset' && !(r.type === 'document' && r.fate === 'through') && ownSite(raw.start, r.url))
+    .map((r) => {
+      const p = patternOf(r.url, ids);
+      return { method: r.method, pattern: p.pattern, ids: [...p.ids, ...bodyIds(r.body, ids)], fate: r.fate, status: r.status ?? null, failed: r.failed ?? null };
+    })
+    .sort((a, b) => (`${a.method} ${a.pattern}` < `${b.method} ${b.pattern}` ? -1 : 1));
+  const watches = {};
+  // A navigation not let through: the page stays as it was (what is shown is the browser's error page).
+  for (const [name, before] of Object.entries(raw.before?.watches ?? {})) {
+    const after = blocked ? before : (raw.after?.watches?.[name] ?? null);
+    watches[name] = { before, after, changed: JSON.stringify(before) !== JSON.stringify(after) };
+  }
+  // A request of the action that failed (not ours to abort): the element errs.
+  const failed = (raw.requests ?? []).find((r) => r.fate === 'through' && r.type !== 'document' && ownSite(raw.start, r.url) && (r.failed || (r.status != null && r.status >= 400)) && !/INTERNET_DISCONNECTED/.test(r.failed ?? ''));
+  // What the page throws once we aborted a request (a rejected fetch, the error page of a navigation not let through) is ours, not the element's.
+  const aborted = (raw.requests ?? []).some((r) => r.fate === 'intercept' || r.fate === 'never');
+  const error = raw.error ?? (!aborted && raw.pageErrors?.length ? `the page threw: ${raw.pageErrors[0]}` : failed ? `${failed.method} ${patternOf(failed.url, ids).pattern} ${failed.failed ? `failed (${failed.failed})` : `answered ${failed.status}`}` : null);
+  return {
+    error,
+    navigation: nav,
+    requests,
+    watches,
+    mutations: kind === 'none' ? (raw.after?.mutations ?? 0) - (raw.before?.mutations ?? 0) : null,
+    checked: { before: raw.before?.target?.checked ?? null, after: raw.after?.target?.checked ?? null },
+    missed: (raw.requests ?? []).filter((r) => /INTERNET_DISCONNECTED/.test(r.failed ?? '')).length,
+  };
+};
+
+/**
+ * Whether an action did something a shopper sees or the shop keeps: it
+ * went to another page, a watched state changed, a request it made was
+ * recorded instead of sent (`intercept`: what it would have done), or,
+ * without a navigation, it changed the page (DOM changes). A reload that
+ * changes nothing watched is no effect (e.g. a link that sends another product's id).
+ * @param {ReturnType<typeof outcomeOf>} o
+ */
+export const effectOf = (o) => {
+  if (!o || o.error) return false;
+  if (o.navigation.kind === 'page' || o.navigation.kind === 'intercepted' || o.navigation.kind === 'blocked') return true;
+  if (o.requests.some((r) => r.fate === 'intercept' || r.fate === 'never')) return true;
+  if (Object.values(o.watches).some((w) => w.changed)) return true;
+  return o.navigation.kind === 'none' && (o.mutations ?? 0) > 0;
+};
+
+/** An outcome in a few words, for the report. @param {ReturnType<typeof outcomeOf>} o */
+export const describe = (o) => {
+  if (!o) return 'not taken';
+  if (o.error) return `error: ${o.error}`;
+  const out = [];
+  const n = o.navigation;
+  const via = n.via ? ` (via ${n.via}${n.ids.length ? ` [${n.ids.join(', ')}]` : ''})` : '';
+  out.push(n.kind === 'none' ? 'no navigation' : n.kind === 'reload' ? `reloaded the page${via}` : n.kind === 'page' ? `went to ${n.pattern}${via}` : `${n.kind === 'blocked' ? 'blocked' : 'intercepted'} navigation to ${n.pattern}`);
+  for (const r of o.requests) out.push(`${r.method} ${r.pattern}${r.ids.length ? ` [${r.ids.join(', ')}]` : ''}${r.fate === 'intercept' ? ' (recorded, not sent)' : r.fate === 'never' ? ' (never sent)' : ''}`);
+  for (const [name, w] of Object.entries(o.watches)) out.push(`${name} ${w.changed ? `${show(w.before)} -> ${show(w.after)}` : `unchanged (${show(w.before)})`}`);
+  if (n.kind === 'none' && !Object.keys(o.watches).length) out.push(`${o.mutations ?? 0} DOM changes`);
+  return out.join('; ');
+};
+const show = (w) => (w == null ? 'none' : w.text != null && w.text !== '' ? JSON.stringify(w.text) : w.checked != null ? (w.checked ? 'checked' : 'unchecked') : w.value != null ? JSON.stringify(w.value) : `${w.count} found`);
+const num = (w) => {
+  const m = /-?\d+(?:[.,]\d+)?/.exec(w?.text ?? '');
+  return m ? Number(m[0].replace(',', '.')) : null;
+};
+
+/**
+ * One interaction, theirs against ours (outcomeOf on each side): its
+ * differences (part: `<component>.<part>`).
+ * @param {ReturnType<typeof outcomeOf>} a theirs @param {ReturnType<typeof outcomeOf>} b ours @param {{ part: string }} at
+ */
+export const compareOutcome = (a, b, { part }) => {
+  const out = { checks: 0, weight: 0, diffs: /** @type {any[]} */ ([]) };
+  const add = (prop, theirs, ours, delta, severity, extra = {}) => {
+    const weight = severity === 'critical' ? WEIGHT.critical : WEIGHT.check;
+    out.diffs.push({ part, prop, theirs, ours, delta, severity, group: 'behaviour', weight, ...extra });
+    out.weight += weight;
+  };
+  out.checks += WEIGHT.critical;
+  if (!a || !b) return out;
+  // Ours errs (the element missing, the click never lands, the page throws, its request fails): CRITICAL.
+  // Theirs errs too (their script throws in this browser, their element gone): nothing to compare it with.
+  if (a.error) return out;
+  if (b.error) {
+    add('error', describe(a), describe(b), `errors on ours: ${b.error}`, 'critical');
+    return out;
+  }
+  const [ea, eb] = [effectOf(a), effectOf(b)];
+  if (ea && !eb) add('effect', describe(a), describe(b), 'does something on theirs, nothing on ours', 'critical');
+  out.checks += WEIGHT.check;
+  const nav = (n) => `${n.kind}${n.pattern ? ` ${n.pattern}` : ''}${n.via ? ` via ${n.via}` : ''}`;
+  if (nav(a.navigation) !== nav(b.navigation)) add('navigation', nav(a.navigation), nav(b.navigation), 'another navigation', 'major');
+  else if (a.navigation.ids.join() !== b.navigation.ids.join()) add('navigation', `${nav(a.navigation)} [${a.navigation.ids.join(', ')}]`, `${nav(b.navigation)} [${b.navigation.ids.join(', ')}]`, "another of the product's ids in the URL", 'major');
+  out.checks += WEIGHT.check;
+  const sig = (r) => `${r.method} ${r.pattern}`;
+  const [sa, sb] = [a.requests.map(sig), b.requests.map(sig)];
+  const only = (x, y) => x.filter((s, i) => x.indexOf(s) === i && x.filter((t) => t === s).length > y.filter((t) => t === s).length);
+  const [lostR, extraR] = [only(sa, sb), only(sb, sa)];
+  if (lostR.length || extraR.length) add('request', sa.join(' | ') || 'none', sb.join(' | ') || 'none', [lostR.length ? `missing on ours: ${lostR.join(', ')}` : '', extraR.length ? `only on ours: ${extraR.join(', ')}` : ''].filter(Boolean).join('; '), 'major');
+  else
+    for (const [i, r] of a.requests.entries()) {
+      const o = b.requests[i];
+      if (o && r.ids.join() !== o.ids.join()) add('request', `${sig(r)} [${r.ids.join(', ') || 'no id'}]`, `${sig(o)} [${o.ids.join(', ') || 'no id'}]`, `another of the product's ids in ${sig(r)}`, 'major');
+    }
+  for (const [name, w] of Object.entries(a.watches)) {
+    const v = b.watches[name];
+    if (!v) continue;
+    out.checks += WEIGHT.check;
+    const moved = (x) => (num(x.before) != null && num(x.after) != null ? num(x.after) - num(x.before) : null);
+    const differs = w.changed !== v.changed || (moved(w) != null && moved(v) != null && moved(w) !== moved(v)) || (w.after?.checked ?? null) !== (v.after?.checked ?? null);
+    if (differs) add(`watch-${String(name).replace(/[^a-z0-9]+/gi, '-').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`, `${name}: ${w.changed ? `${show(w.before)} -> ${show(w.after)}` : `unchanged (${show(w.before)})`}`, `${name}: ${v.changed ? `${show(v.before)} -> ${show(v.after)}` : `unchanged (${show(v.before)})`}`, `${name} ${v.changed ? 'changes otherwise' : 'does not change'} on ours`, 'major');
+  }
+  if (a.checked.after != null && b.checked.after != null) {
+    out.checks += WEIGHT.check;
+    if (a.checked.after !== b.checked.after) add('checked', a.checked.after ? 'checked' : 'unchecked', b.checked.after ? 'checked' : 'unchecked', 'another checked state after it', 'major');
+  }
+  return out;
+};
+
+/**
+ * Our controls without a counterpart, each probed (its requests recorded,
+ * never sent): one that does nothing is CRITICAL.
+ * @param {{ component: string, path: string, tag: string, label: string, outcome: ReturnType<typeof outcomeOf> }[]} stray
+ */
+export const compareStray = (stray) => {
+  const out = { checks: 0, weight: 0, diffs: /** @type {any[]} */ ([]) };
+  for (const s of stray) {
+    out.checks += WEIGHT.critical;
+    if (effectOf(s.outcome)) continue;
+    out.weight += WEIGHT.critical;
+    out.diffs.push({ part: `${s.component}.extra`, prop: 'dead', theirs: 'no such control', ours: `${s.tag} "${s.label}" (${s.path}): ${describe(s.outcome)}`, delta: 'a control only ours has, and it does nothing', severity: 'critical', group: 'behaviour', weight: WEIGHT.critical, hint: `${s.tag} "${s.label}" in our ${s.component} (${s.path}) has no counterpart on their page and does nothing: remove it from the integration's template, or make it work (and map it with its counterpart)` });
+  }
+  return out;
+};
+
+/**
+ * The behaviour of one page as a result (compareComponent's shape):
+ * component `behaviour`, its differences decided by `behaviour.<component>.<part>`.
+ * @param {{ page: string, viewport: number }} at @param {{ checks: number, weight: number, diffs: any[] }} r @param {{ decided?: Record<string, any>, interactions?: any[] }} [o]
+ */
+export const behaviourResult = (at, r, { decided = {}, interactions = [] } = {}) => {
+  const diffs = decide(r.diffs.map((d) => ({ ...d, owner: 'template' })), { component: 'behaviour', decided });
+  const templateWeight = diffs.filter((d) => d.owner === 'template').reduce((s, d) => s + d.weight, 0);
+  const score = scoreOf(r);
+  const templateScore = scoreOf({ checks: r.checks, weight: templateWeight });
+  return { component: 'behaviour', page: at.page, viewport: at.viewport, state: null, score, templateScore, instances: r.checks ? [{ key: 'page', score, templateScore, checks: r.checks, weight: r.weight, pixels: null }] : [], diffs: aggregate([diffs]), interactions };
+};
+
+/**
+ * The hold check (docs/PARITY.md, "The hold"): the frames of a reload of our
+ * page, the rules stored (the second load). A frame that painted their
+ * listing is CRITICAL: production, with the snippet first in <head>, never
+ * shows it. `snippet`: whether the snippet was on the page.
+ * @param {{ page: string, viewport: number }} at @param {{ n: number, theirs: boolean, ours: boolean }[] | null} frames @param {{ snippet?: boolean, decided?: Record<string, any> }} [o]
+ */
+export const holdResult = (at, frames, { snippet = true, decided = {} } = {}) => {
+  const painted = (frames ?? []).filter((f) => f.theirs).reduce((s, f) => s + f.n, 0);
+  // What the frames showed in order, repeats merged (['none', 'ours']; ['theirs', 'ours'] when it failed): repeatable, unlike the counts.
+  const states = [];
+  for (const f of frames ?? []) {
+    const s = f.theirs && f.ours ? 'both' : f.theirs ? 'theirs' : f.ours ? 'ours' : 'none';
+    if (states[states.length - 1] !== s) states.push(s);
+  }
+  const r = { checks: frames ? WEIGHT.critical : 0, weight: 0, diffs: /** @type {any[]} */ ([]) };
+  if (frames && painted) {
+    r.weight += WEIGHT.critical;
+    r.diffs.push({
+      part: 'listing',
+      prop: 'frames',
+      theirs: 'held (no frame of theirs)',
+      ours: `frames: ${states.join(' > ')}`,
+      delta: "a reload of our page painted their listing (the rules stored)",
+      severity: 'critical',
+      group: 'hold',
+      weight: WEIGHT.critical,
+      hint: snippet
+        ? 'their listing showed before ours although the early-hold snippet was first in <head>: the rules the build stores (localStorage lbx:early) do not match this route, or its CSS does not hide their listing (src/core/early-rules.ts; the route\'s hide selector in the integration\'s config)'
+        : 'the early-hold snippet was not on the page: put snippet/early-hold.min.js first in <head> (README), before the loader',
+    });
+  }
+  const diffs = decide(r.diffs.map((d) => ({ ...d, owner: 'template' })), { component: 'hold', decided });
+  const templateWeight = diffs.filter((d) => d.owner === 'template').reduce((s, d) => s + d.weight, 0);
+  const score = scoreOf(r);
+  return { component: 'hold', page: at.page, viewport: at.viewport, state: null, score, templateScore: scoreOf({ checks: r.checks, weight: templateWeight }), instances: r.checks ? [{ key: 'reload', score, templateScore: score, checks: r.checks, weight: r.weight, pixels: null }] : [], diffs: aggregate([diffs]), frames: frames ? states : null };
+};