@ethlete/cli 3.0.0-next.25 → 3.0.0-next.26

package/design/motion-tokens.ts

@@ -0,0 +1,177 @@
+import { MotionTrack } from './motion-runtime';
+
+/** A CSS custom property declared on `:root`, with its computed value. */
+export type MotionToken = { name: string; value: string };
+
+/** A track with the names of the tokens whose value equals its duration or easing, in declaration order. */
+export type NamedMotionTrack = MotionTrack & { durationTokens?: string[]; easingTokens?: string[] };
+
+const KEYWORD_EASINGS: Record<string, string> = {
+  ease: 'cubic-bezier(0.25,0.1,0.25,1)',
+  'ease-in': 'cubic-bezier(0.42,0,1,1)',
+  'ease-out': 'cubic-bezier(0,0,0.58,1)',
+  'ease-in-out': 'cubic-bezier(0.42,0,0.58,1)',
+  'step-start': 'steps(1,jump-start)',
+  'step-end': 'steps(1,jump-end)',
+};
+
+const TIME = /^(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(ms|s)$/u;
+const EASING_FUNCTION = /^(cubic-bezier|linear|steps)\((.*)\)$/u;
+
+const roundedOf = (value: number) => String(Math.round(value * 10000) / 10000);
+
+const msOf = (value: string) => {
+  const match = TIME.exec(value.trim().toLowerCase());
+
+  return match ? Number(match[1]) * (match[2] === 's' ? 1000 : 1) : null;
+};
+
+const linearOf = (body: string) => {
+  const points: { output: number; input: number | null }[] = [];
+
+  for (const stop of body.split(',')) {
+    const [output = '', ...inputs] = stop.trim().split(/\s+/u);
+    const value = Number(output);
+
+    if (output === '' || !Number.isFinite(value) || inputs.length > 2) return null;
+
+    const percents = inputs.map((input) => (input.endsWith('%') ? Number(input.slice(0, -1)) : Number.NaN));
+
+    if (percents.some((percent) => !Number.isFinite(percent))) return null;
+
+    if (percents.length === 0) points.push({ output: value, input: null });
+    for (const percent of percents) points.push({ output: value, input: percent });
+  }
+
+  if (points.length < 2) return null;
+
+  const first = points[0];
+  const last = points[points.length - 1];
+
+  if (first && first.input === null) first.input = 0;
+  if (last && last.input === null) last.input = Math.max(100, ...points.map((point) => point.input ?? 0));
+
+  let highest = 0;
+
+  for (const point of points) {
+    if (point.input !== null) point.input = Math.max(point.input, highest);
+    highest = point.input ?? highest;
+  }
+
+  for (let index = 1; index < points.length; index++) {
+    if (points[index]?.input !== null) continue;
+
+    const before = index - 1;
+    let after = index;
+
+    while (points[after]?.input === null) after++;
+
+    const from = points[before]?.input ?? 0;
+    const to = points[after]?.input ?? 100;
+
+    for (let gap = index; gap < after; gap++) {
+      const point = points[gap];
+
+      if (point) point.input = from + ((to - from) * (gap - before)) / (after - before);
+    }
+  }
+
+  return `linear(${points.map((point) => `${roundedOf(point.output)} ${roundedOf(point.input ?? 0)}%`).join(',')})`;
+};
+
+/** An easing in one spelling, so `ease` equals `cubic-bezier(.25, .1, .25, 1)`; `null` when it is not an easing. */
+export const normalisedEasingOf = (value: string): string | null => {
+  const easing = value.trim().toLowerCase().replace(/\s+/gu, ' ');
+
+  if (easing === 'linear') return 'linear';
+  if (KEYWORD_EASINGS[easing]) return KEYWORD_EASINGS[easing];
+
+  const match = EASING_FUNCTION.exec(easing);
+
+  if (!match) return null;
+
+  const [, kind = '', body = ''] = match;
+
+  if (kind === 'linear') return linearOf(body);
+
+  const args = body.split(',').map((arg) => arg.trim());
+
+  if (kind === 'steps') return args.length === 1 || args.length === 2 ? `steps(${args[0]},${args[1] ?? 'end'})` : null;
+
+  const numbers = args.map(Number);
+
+  return numbers.length === 4 && numbers.every(Number.isFinite)
+    ? `cubic-bezier(${numbers.map(roundedOf).join(',')})`
+    : null;
+};
+
+/** What a token stands for: a time, an easing, or both as a `spring()` token stores them (`<duration>ms linear(...)`). */
+const meaningOf = (value: string) => {
+  const trimmed = value.trim();
+  const ms = msOf(trimmed);
+
+  if (ms !== null) return { ms, easing: null };
+
+  const [head = '', ...rest] = trimmed.split(/\s+/u);
+  const leading = msOf(head);
+
+  if (leading !== null) {
+    const easing = normalisedEasingOf(rest.join(' '));
+
+    return easing ? { ms: leading, easing } : null;
+  }
+
+  const easing = normalisedEasingOf(trimmed);
+
+  return easing ? { ms: null, easing } : null;
+};
+
+/**
+ * Adds the names of the `tokens` whose value equals a track's duration (`durationTokens`) or easing (`easingTokens`),
+ * in the order of `tokens`; a field without a match is left out.
+ */
+export const withTokenNames = (track: MotionTrack, tokens: readonly MotionToken[]): NamedMotionTrack => {
+  const easing = normalisedEasingOf(track.easing);
+  const durationTokens: string[] = [];
+  const easingTokens: string[] = [];
+
+  for (const token of tokens) {
+    const meaning = meaningOf(token.value);
+
+    if (!meaning) continue;
+    if (meaning.ms !== null && Math.abs(meaning.ms - track.duration) < 0.001) durationTokens.push(token.name);
+    if (meaning.easing !== null && easing !== null && meaning.easing === easing) easingTokens.push(token.name);
+  }
+
+  return {
+    ...track,
+    ...(durationTokens.length ? { durationTokens } : {}),
+    ...(easingTokens.length ? { easingTokens } : {}),
+  };
+};
+
+const rootNamesOf = (rules: CSSRuleList, names: Set<string>) => {
+  for (const rule of [...rules]) {
+    if (rule instanceof CSSStyleRule && /^(:root|html)$/u.test(rule.selectorText.trim()))
+      for (const property of [...rule.style]) if (property.startsWith('--')) names.add(property);
+
+    if ('cssRules' in rule && rule.cssRules instanceof CSSRuleList) rootNamesOf(rule.cssRules, names);
+  }
+};
+
+/** The custom properties declared on `:root` in the stylesheets of `document`, in declaration order, as computed there. */
+export const rootTokensOf = (document: Document): MotionToken[] => {
+  const names = new Set<string>();
+
+  for (const sheet of [...document.styleSheets]) {
+    try {
+      rootNamesOf(sheet.cssRules, names);
+    } catch {
+      continue;
+    }
+  }
+
+  const computed = getComputedStyle(document.documentElement);
+
+  return [...names].map((name) => ({ name, value: computed.getPropertyValue(name).trim() }));
+};

package/design/web/frame-fill.ts

@@ -0,0 +1,4 @@
+/** Paints `body` with the token `--<fill>` over the product's page colour, which shows when the product has no such token. */
+export const paintFill = (body: HTMLElement, fill: string) => {
+  body.style.backgroundImage = `linear-gradient(var(--${fill}), var(--${fill}))`;
+};

package/design/web/frame-scheme.ts

@@ -0,0 +1,44 @@
+export type ColorScheme = 'light' | 'dark';
+
+const SCHEME_FEATURE = /\(\s*prefers-color-scheme\s*:\s*(light|dark)\s*\)/giu;
+
+/** `media` with each `prefers-color-scheme` feature replaced by one that always or never matches, as `scheme` decides. */
+export const pinnedMediaText = (media: string, scheme: ColorScheme) =>
+  media.replace(SCHEME_FEATURE, (_, wanted: string) =>
+    wanted.toLowerCase() === scheme ? '(width >= 0)' : '(width < 0)',
+  );
+
+const pinRules = (rules: CSSRuleList, scheme: ColorScheme) => {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSMediaRule) {
+      const pinned = pinnedMediaText(rule.media.mediaText, scheme);
+
+      if (pinned !== rule.media.mediaText) rule.media.mediaText = pinned;
+    }
+
+    if ('cssRules' in rule) pinRules((rule as CSSGroupingRule).cssRules, scheme);
+  }
+};
+
+const pinSheets = (document: Document, scheme: ColorScheme) => {
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      pinRules(sheet.cssRules, scheme);
+    } catch {
+      // A cross-origin sheet hides its rules.
+    }
+  }
+};
+
+export const pinScheme = (document: Document, scheme: ColorScheme) => {
+  document.documentElement.style.colorScheme = scheme;
+  pinSheets(document, scheme);
+
+  new MutationObserver((records) => {
+    pinSheets(document, scheme);
+
+    for (const record of records)
+      for (const node of Array.from(record.addedNodes))
+        if (node instanceof HTMLLinkElement) node.addEventListener('load', () => pinSheets(document, scheme));
+  }).observe(document.head, { childList: true, subtree: true, characterData: true });
+};

package/design/web/frame.ts

@@ -1,7 +1,11 @@
 import { CallVariant, Drawing, fitOutOfFlow, mountDrawing, placeOverlays } from '../define-call';
-import { Part } from '../define-part';
+import { Motion, Part } from '../define-part';
 import { applyEmbed, fitEmbed } from '../embed-page';
+import { paintFill } from './frame-fill';
+import { pinScheme } from './frame-scheme';
+import { createMotionDriver, emulateReducedMotion, motionDriveMessageOf } from '../motion-drive';
 import { runRules, stepMotion, SteppedMotion } from '../motion-runtime';
+import { rootTokensOf, withTokenNames } from '../motion-tokens';
 import { calls } from 'virtual:design-explore';
 import { loadEnv, loadProductEnv } from 'virtual:design-explore/env';
 import { parts, sketchParts, sketchTokens, tokens } from 'virtual:design-explore/system';
@@ -40,7 +44,11 @@ const fill = params.get('fill');
 // On <html> a theme class ties with the `:root` defaults of the theme CSS, which come later and win.
 if (surface) root.classList.add(`et-surface--${surface}`);
 if (color) root.classList.add(`et-color--${color}`);
-if (fill) document.body.style.background = `var(--${fill})`;
+if (fill) paintFill(document.body, fill);
+
+const scheme = params.get('scheme');
+
+if (scheme === 'light' || scheme === 'dark') pinScheme(document, scheme);
 if (fit) {
   document.documentElement.style.overflow = 'hidden';
   root.style.width = 'max-content';
@@ -66,6 +74,12 @@ const fail = (message: string) => {
   return null;
 };
 
+const failMissing = (message: string) => {
+  document.documentElement.setAttribute('data-et-missing', '');
+
+  return fail(message);
+};
+
 const showSetupError = (message: string) => {
   markFailed(message);
 
@@ -96,10 +110,10 @@ let drawnPart: { part: Part<unknown>; states: Record<string, unknown> } | null =
 
 const drawCall = async (): Promise<Drawing | null> => {
   const call = calls[slug];
-  if (!call) return fail(`design-explore: no call "${slug}"`);
+  if (!call) return failMissing(`design-explore: no call "${slug}"`);
 
   const variant: CallVariant | undefined = (await call()).default.variants.find((o) => o.key === key);
-  if (!variant) return fail(`design-explore: call "${slug}" has no variant "${key}"`);
+  if (!variant) return failMissing(`design-explore: call "${slug}" has no variant "${key}"`);
 
   return variant.load().then(
     (module) => module.default,
@@ -110,7 +124,7 @@ const drawCall = async (): Promise<Drawing | null> => {
 const drawPart = async (name: string): Promise<Drawing | null> => {
   const load = sketch ? sketchParts[name]?.[sketch]?.[sketchVariant]?.[partKey] : parts[name]?.[partKey];
   if (!load)
-    return fail(
+    return failMissing(
       sketch
         ? `design-explore: variant "${sketchVariant}" of the sketch on ${sketch} in product "${name}" has no part "${partKey}"`
         : `design-explore: product "${name}" has no part "${partKey}"`,
@@ -118,14 +132,14 @@ const drawPart = async (name: string): Promise<Drawing | null> => {
 
   const loadProps = propsSketch ? sketchParts[name]?.[propsSketch]?.[propsVariant]?.[partKey] : load;
   if (!loadProps)
-    return fail(
+    return failMissing(
       `design-explore: variant "${propsVariant}" of the sketch on ${propsSketch} in product "${name}" has no part "${partKey}"`,
     );
 
   try {
     const [{ default: part }, { default: holder }] = await Promise.all([retried(load), retried(loadProps)]);
 
-    if (!(key in holder.states)) return fail(`design-explore: part "${partKey}" has no state "${key}"`);
+    if (!(key in holder.states)) return failMissing(`design-explore: part "${partKey}" has no state "${key}"`);
 
     drawnPart = { part: part as Part<unknown>, states: holder.states };
 
@@ -181,6 +195,11 @@ const report = () => {
   );
 };
 
+const reportPainted = () =>
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => parent.postMessage({ type: 'design-explore:painted', variant: key }, '*')),
+  );
+
 const stateMarkupOf = ({ part, states }: NonNullable<typeof drawnPart>, styles: string) => {
   const sheets = new Set([styles]);
 
@@ -218,11 +237,53 @@ const exposeStepped = (options: { start: () => Promise<SteppedMotion>; interrupt
         }),
       seek: (ms: number) => steppedOf().seek(ms),
       bounds: () => steppedOf().bounds(),
-      timeline: () => ({ end: steppedOf().end(), tracks: steppedOf().tracks(), interrupt: options.interrupt }),
+      timeline: () => {
+        const tokens = rootTokensOf(document);
+
+        return {
+          end: steppedOf().end(),
+          tracks: steppedOf()
+            .tracks()
+            .map((track) => withTokenNames(track, tokens)),
+          interrupt: options.interrupt,
+        };
+      },
     },
   });
 };
 
+const motionStartOf = (options: {
+  drawn: NonNullable<typeof drawnPart>;
+  motion: Motion;
+  markupOf: (state: string) => Promise<string>;
+  switching?: () => void;
+}) => {
+  const { drawn, motion, markupOf } = options;
+
+  return () =>
+    Promise.all([markupOf(motion.to), motion.interrupt === undefined ? null : markupOf(motion.from)]).then(
+      ([markup, back]) => {
+        options.switching?.();
+
+        return stepMotion({
+          root,
+          markup,
+          motion,
+          ...(back === null
+            ? {}
+            : {
+                reverse: {
+                  markup: back,
+                  motion: Object.values(drawn.part.motions ?? {}).find(
+                    (other) => other.from === motion.to && other.to === motion.from,
+                  ),
+                },
+              }),
+        });
+      },
+    );
+};
+
 const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: string; styles: string }) => {
   const { drawn, name, styles } = options;
   const motion = drawn.part.motions?.[name];
@@ -235,29 +296,57 @@ const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: str
     return;
   }
 
-  const markupOf = stateMarkupOf(drawn, styles);
-
   exposeStepped({
     interrupt: motion.interrupt ?? null,
-    start: () =>
-      Promise.all([markupOf(motion.to), motion.interrupt === undefined ? null : markupOf(motion.from)]).then(
-        ([markup, back]) =>
-          stepMotion({
-            root,
-            markup,
-            motion,
-            ...(back === null
-              ? {}
-              : {
-                  reverse: {
-                    markup: back,
-                    motion: Object.values(drawn.part.motions ?? {}).find(
-                      (other) => other.from === motion.to && other.to === motion.from,
-                    ),
-                  },
-                }),
-          }),
-      ),
+    start: motionStartOf({ drawn, motion, markupOf: stateMarkupOf(drawn, styles) }),
+  });
+};
+
+const settleAnimations = () => {
+  for (const animation of document.getAnimations()) {
+    if (Number.isFinite(animation.effect?.getComputedTiming().endTime)) animation.finish();
+    else animation.cancel();
+  }
+};
+
+const listenForDrive = (drawn: NonNullable<typeof drawnPart>, styles: string) => {
+  const markupOf = stateMarkupOf(drawn, styles);
+  const drawnMarkup = root.innerHTML;
+  let restore: () => void = () => undefined;
+
+  const driver = createMotionDriver({
+    document,
+    reply: (answer) => parent.postMessage({ ...answer, variant: key }, '*'),
+    released: () => {
+      restore();
+      restore = () => undefined;
+    },
+    start: (name, reduced) => {
+      const motion = drawn.part.motions?.[name];
+
+      if (!motion) return Promise.reject(new Error(`design-explore: part "${partKey}" has no motion "${name}"`));
+      if (motion.from !== key)
+        return Promise.reject(new Error(`design-explore: motion "${name}" starts at "${motion.from}", not "${key}"`));
+
+      settleAnimations();
+      restore();
+      root.innerHTML = drawnMarkup;
+
+      return motionStartOf({
+        drawn,
+        motion,
+        markupOf,
+        switching: () => {
+          restore = emulateReducedMotion(document, reduced);
+        },
+      })();
+    },
+  });
+
+  addEventListener('message', (event) => {
+    const message = event.source === parent ? motionDriveMessageOf(event.data) : null;
+
+    if (message) void driver.handle(message);
   });
 };
 
@@ -337,6 +426,8 @@ const drawFrame = async () => {
     if (flowTo && product) exposeFlowLine({ product, to: flowTo, styles: loaded.styles ?? '' });
     else if (motionName && drawnPart) exposeMotion({ drawn: drawnPart, name: motionName, styles: loaded.styles ?? '' });
     else if (drawnPart?.part.rules?.length) runPartRules(drawnPart, loaded.styles ?? '');
+
+    if (!flowTo && !motionName && drawnPart) listenForDrive(drawnPart, loaded.styles ?? '');
   }
 
   const place = () => {
@@ -355,6 +446,7 @@ const drawFrame = async () => {
   if (fit) reported.observe(root);
   reporting = true;
   report();
+  reportPainted();
 
   addEventListener('keydown', (event) => {
     if (event.key === 'Escape') parent.postMessage({ type: 'design-explore:escape', variant: key }, '*');
@@ -371,4 +463,5 @@ void drawFrame().catch((error: unknown) => {
   fail(`design-explore: frame failed\n${messageOf(error)}`);
   reporting = true;
   report();
+  reportPainted();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cli",
-  "version": "3.0.0-next.25",
+  "version": "3.0.0-next.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/design/calls-tsconfig.d.ts

@@ -16,4 +16,6 @@ export declare const DRAWING_COMPILER_OPTIONS: {
  * this config for itself. The same config goes to `.ethlete/design/tsconfig.json`, the nearest
  * tsconfig an editor finds for a call file.
  */
+/** Writes `text` unless the file already holds it: Vite reloads every frame on any write to a tsconfig it watches. */
+export declare const writeTsconfigText: (path: string, text: string) => void;
 export declare const writeCallsTsconfig: (target: string) => string;

package/src/lib/design/calls-tsconfig.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.writeCallsTsconfig = exports.DRAWING_COMPILER_OPTIONS = void 0;
+exports.writeCallsTsconfig = exports.writeTsconfigText = exports.DRAWING_COMPILER_OPTIONS = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
 const paths_1 = require("./paths");
@@ -23,6 +23,13 @@ exports.DRAWING_COMPILER_OPTIONS = {
  * this config for itself. The same config goes to `.ethlete/design/tsconfig.json`, the nearest
  * tsconfig an editor finds for a call file.
  */
+/** Writes `text` unless the file already holds it: Vite reloads every frame on any write to a tsconfig it watches. */
+const writeTsconfigText = (path, text) => {
+    if ((0, fs_1.existsSync)(path) && (0, fs_1.readFileSync)(path, 'utf8') === text)
+        return;
+    (0, fs_1.writeFileSync)(path, text);
+};
+exports.writeTsconfigText = writeTsconfigText;
 const writeCallsTsconfig = (target) => {
     const work = (0, paths_1.workRootOf)(target);
     const path = (0, path_1.resolve)(work, 'tsconfig.json');
@@ -36,9 +43,9 @@ const writeCallsTsconfig = (target) => {
     const text = `${JSON.stringify(config, null, 2)}\n`;
     const editorPath = (0, path_1.resolve)(target, paths_1.DESIGN_DIR, 'tsconfig.json');
     (0, fs_1.mkdirSync)(work, { recursive: true });
-    (0, fs_1.writeFileSync)(path, text);
+    (0, exports.writeTsconfigText)(path, text);
     (0, fs_1.mkdirSync)((0, path_1.dirname)(editorPath), { recursive: true });
-    (0, fs_1.writeFileSync)(editorPath, text);
+    (0, exports.writeTsconfigText)(editorPath, text);
     return path;
 };
 exports.writeCallsTsconfig = writeCallsTsconfig;

package/src/lib/design/calls-tsconfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAA8C;AAC9C,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAkE;AAErD,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,IAAA,kCAAgB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAA,kBAAU,EAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9G,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,kBAAa,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEhC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}
+{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAAwE;AACxE,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAkE;AAErD,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACH,sHAAsH;AAC/G,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,EAAE;IAC9D,IAAI,IAAA,eAAU,EAAC,IAAI,CAAC,IAAI,IAAA,iBAAY,EAAC,IAAI,EAAE,MAAM,CAAC,KAAK,IAAI;QAAE,OAAO;IAEpE,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAC5B,CAAC,CAAC;AAJW,QAAA,iBAAiB,qBAI5B;AAEK,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,IAAA,kCAAgB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAA,kBAAU,EAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9G,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,yBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC9B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,yBAAiB,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEpC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}

package/src/lib/design/check.d.ts

@@ -4,6 +4,7 @@
  * error draws an overlay on top of the drawing, so a screenshot of one looks like a design -
  * never screenshot before this says `ok`. With `--call`, the call's status follows the check, but
  * a check that cannot run (no browser, no server, a stale server) leaves the status it found.
+ * `--receipt <path>` also writes what the check said and whether it passed to that file.
  */
 export declare const checkDesign: (options: {
     target: string;

package/src/lib/design/check.js

@@ -11,6 +11,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkDesign = void 0;
 const child_process_1 = require("child_process");
+const fs_1 = require("fs");
+const path_1 = require("path");
 const browser_1 = require("./browser");
 const calls_tsconfig_1 = require("./calls-tsconfig");
 const paths_1 = require("./paths");
@@ -186,7 +188,7 @@ const runChecks = (options) => __awaiter(void 0, void 0, void 0, function* () {
     const wanted = (_c = flags['--variant']) === null || _c === void 0 ? void 0 : _c[0];
     const tsconfig = '--tsconfig' in flags ? ((_e = (_d = flags['--tsconfig']) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : (0, calls_tsconfig_1.writeCallsTsconfig)(target)) : null;
     if (lintFiles.length === 0 && !tsconfig && !slug) {
-        console.error(`usage: ${invocation} check [--lint <file>…] [--tsconfig [path]] [--call <slug> [--variant <key>]]`);
+        console.error(`usage: ${invocation} check [--lint <file>…] [--tsconfig [path]] [--call <slug> [--variant <key>]] [--receipt <path>]`);
         return 2;
     }
     if (lintFiles.length > 0) {
@@ -218,28 +220,83 @@ const runChecks = (options) => __awaiter(void 0, void 0, void 0, function* () {
     const base = (_f = process.env['DE_URL']) !== null && _f !== void 0 ? _f : `http://localhost:${config ? (0, paths_1.portOf)(config) : paths_1.DEFAULT_PORT}`;
     return runBrowser({ target, base, slug, wanted, fails });
 });
+const receiptArgvOf = (argv) => {
+    var _a;
+    const index = argv.indexOf('--receipt');
+    if (index === -1)
+        return { receipt: null, rest: argv };
+    return { receipt: (_a = argv[index + 1]) !== null && _a !== void 0 ? _a : null, rest: [...argv.slice(0, index), ...argv.slice(index + 2)] };
+};
+const writeReceipt = (options) => {
+    var _a, _b, _c, _d;
+    const flags = parse(options.argv, ['--lint', '--tsconfig', '--call', '--variant', '--product']);
+    (0, fs_1.mkdirSync)((0, path_1.dirname)(options.path), { recursive: true });
+    (0, fs_1.writeFileSync)(options.path, JSON.stringify({
+        call: (_b = (_a = flags['--call']) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null,
+        variant: (_d = (_c = flags['--variant']) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null,
+        ok: options.ok,
+        at: Math.floor(Date.now() / 1000),
+        said: options.said.trim(),
+    }));
+};
 /**
  * Finds out why a call does not render, in the cheapest order: eslint on the named files, then
  * `tsc --noEmit` over the checkout's calls, then the live page in a headless browser. A compile
  * error draws an overlay on top of the drawing, so a screenshot of one looks like a design -
  * never screenshot before this says `ok`. With `--call`, the call's status follows the check, but
  * a check that cannot run (no browser, no server, a stale server) leaves the status it found.
+ * `--receipt <path>` also writes what the check said and whether it passed to that file.
  */
 const checkDesign = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { receipt, rest } = receiptArgvOf(options.argv);
+    if (!receipt)
+        return checkWithStatus(options);
+    const said = [];
+    const log = console.log;
+    const error = console.error;
+    const tee = (write) => (...lines) => {
+        said.push(lines.map(String).join(' '));
+        write(...lines);
+    };
+    console.log = tee(log);
+    console.error = tee(error);
+    try {
+        const code = yield checkWithStatus(Object.assign(Object.assign({}, options), { argv: rest }));
+        writeReceipt({ path: receipt, argv: rest, ok: code === 0, said: said.join('\n') });
+        return code;
+    }
+    catch (thrown) {
+        said.push(thrown instanceof Error ? thrown.message : String(thrown));
+        writeReceipt({ path: receipt, argv: rest, ok: false, said: said.join('\n') });
+        throw thrown;
+    }
+    finally {
+        console.log = log;
+        console.error = error;
+    }
+});
+exports.checkDesign = checkDesign;
+const checkWithStatus = (options) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b;
-    const { target, argv, invocation } = options;
+    const { target, invocation } = options;
+    const complete = options.argv.includes('--complete');
+    const argv = options.argv.filter((argument) => argument !== '--complete');
     const flags = parse(argv, ['--lint', '--tsconfig', '--call', '--variant', '--product']);
     const products = flags['--product'];
     if (products) {
         if (products.length === 0) {
-            console.error(`usage: ${invocation} check --product <name>…`);
+            console.error(`usage: ${invocation} check --product <name>… [--complete]`);
             return 2;
         }
-        return (0, check_system_1.checkSystemRendered)({ target, config: (_a = (0, paths_1.readConfig)(target)) !== null && _a !== void 0 ? _a : {}, products });
+        return (0, check_system_1.checkSystemRendered)({ target, config: (_a = (0, paths_1.readConfig)(target)) !== null && _a !== void 0 ? _a : {}, products, complete });
     }
     const config = argv.length === 0 ? (0, paths_1.readConfig)(target) : null;
     if ((config === null || config === void 0 ? void 0 : config.products) && Object.keys(config.products).length > 0)
-        return (0, check_system_1.checkSystemRendered)({ target, config, products: Object.keys(config.products) });
+        return (0, check_system_1.checkSystemRendered)({ target, config, products: Object.keys(config.products), complete });
+    if (complete) {
+        console.error(`usage: ${invocation} check [--product <name>…] --complete - --complete checks products only`);
+        return 2;
+    }
     const slug = (_b = flags['--call']) === null || _b === void 0 ? void 0 : _b[0];
     let failure = '';
     let blocked = false;
@@ -280,5 +337,4 @@ const checkDesign = (options) => __awaiter(void 0, void 0, void 0, function* ()
         throw error;
     }
 });
-exports.checkDesign = checkDesign;
 //# sourceMappingURL=check.js.map