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

package/src/lib/design/system/action-press.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-press.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/action-press.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,kCAA8C;AAIjC,QAAA,aAAa,GAAG,kDAAkD,CAAC;AAEnE,QAAA,YAAY,GAAG,GAAG,CAAC;AAEhC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,+GAA+G;AAClG,QAAA,WAAW,GAAG;sHAC2F,CAAC;AAEvH,mHAAmH;AACtG,QAAA,mBAAmB,GAAG;;4FAEyD,CAAC;AAE7F,8FAA8F;AACvF,MAAM,MAAM,GAAG,CAAO,IAAU,EAAE,OAAe,EAAE,EAAE;IAC1D,MAAM,IAAI;SACP,eAAe,CACd;yDACmD,2BAAmB;;4CAEhC,cAAc;WAC/C,EACL,SAAS,EACT,EAAE,OAAO,EAAE,IAAA,0BAAmB,EAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAC1D;SACA,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAC5B,CAAC,CAAA,CAAC;AAZW,QAAA,MAAM,UAYjB;AAEF,mGAAmG;AAC5F,MAAM,cAAc,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,CAAC;;;;;;OAMT,CAAC,CAAC;AAPI,QAAA,cAAc,kBAOlB;AAET;;;GAGG;AACI,MAAM,WAAW,GAAG,CAAO,IAAU,EAAE,MAAqB,EAAE,EAAE;IACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAExC,MAAM,IAAI;SACP,eAAe,CACd;;;cAGQ,QAAQ,+BAA+B,QAAQ;;;;;2CAKlB,YAAY;WAC5C,EACL,SAAS,EACT,EAAE,OAAO,EAAE,oBAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAC1C;SACA,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAC1B,MAAM,IAAI,CAAC,QAAQ,CAAC,oCAAoC,CAAC,CAAC;AAC5D,CAAC,CAAA,CAAC;AApBW,QAAA,WAAW,eAoBtB;AAEF;;;GAGG;AACI,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC9C,IAAI,CAAC,QAAQ,CAAC;;;;OAIT,CAAC,CAAC;AALI,QAAA,iBAAiB,qBAKrB"}

package/src/lib/design/system/action-undeclared.d.ts

@@ -0,0 +1,34 @@
+import { RenderIssue } from './render-check';
+/** The rule an interactive design element breaks when it declares no `data-et-action`. */
+export declare const ACTION_UNDECLARED_RULE = "ACTION-UNDECLARED";
+/**
+ * A script for the frame's init: it records every element a click listener is added to, for the
+ * ACTION-UNDECLARED statements. It has to run before the drawing's `setup`.
+ */
+export declare const CLICK_LISTENER_INIT_SCRIPT = "(() => {\n  const clicked = new WeakSet();\n  const add = EventTarget.prototype.addEventListener;\n  Object.defineProperty(window, '__etClickListened', { value: clicked });\n  EventTarget.prototype.addEventListener = function (type, ...rest) {\n    if (type === 'click' && this instanceof Element) clicked.add(this);\n    return add.call(this, type, ...rest);\n  };\n})()";
+/**
+ * The statements of the ACTION-UNDECLARED check inside the frame script of `render-check`. They use `root`, `partRoot`,
+ * `options`, `report`, `ownedOf` and `textOf` of that script. A part whose root is the control leaves its action to the
+ * part that uses it, and a click listener on an element around other interactive ones delegates.
+ */
+export declare const ACTION_UNDECLARED_STATEMENTS: string;
+/** The ACTION-UNDECLARED summary of one part whose go still holds, for `design check` to warn with. */
+export type ActionUndeclaredWarning = {
+    product: string;
+    part: string;
+    line: string;
+};
+/**
+ * Splits the ACTION-UNDECLARED issues of the parts whose go still holds off `issues`, as one warning line per part with
+ * the hit count and the first element. The issues of every other part stay errors.
+ */
+export declare const actionUndeclaredUnderGoOf: (options: {
+    issues: RenderIssue[];
+    isGo: (at: {
+        product: string;
+        part: string;
+    }) => boolean;
+}) => {
+    issues: RenderIssue[];
+    warnings: ActionUndeclaredWarning[];
+};

package/src/lib/design/system/action-undeclared.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionUndeclaredUnderGoOf = exports.ACTION_UNDECLARED_STATEMENTS = exports.CLICK_LISTENER_INIT_SCRIPT = exports.ACTION_UNDECLARED_RULE = void 0;
+const actions_1 = require("./actions");
+const render_check_1 = require("./render-check");
+/** The rule an interactive design element breaks when it declares no `data-et-action`. */
+exports.ACTION_UNDECLARED_RULE = 'ACTION-UNDECLARED';
+const DRAWN_INTERACTIVE_SELECTOR = `:is(${actions_1.INTERACTIVE_SELECTOR}, [aria-expanded])`;
+/**
+ * A script for the frame's init: it records every element a click listener is added to, for the
+ * ACTION-UNDECLARED statements. It has to run before the drawing's `setup`.
+ */
+exports.CLICK_LISTENER_INIT_SCRIPT = `(() => {
+  const clicked = new WeakSet();
+  const add = EventTarget.prototype.addEventListener;
+  Object.defineProperty(window, '__etClickListened', { value: clicked });
+  EventTarget.prototype.addEventListener = function (type, ...rest) {
+    if (type === 'click' && this instanceof Element) clicked.add(this);
+    return add.call(this, type, ...rest);
+  };
+})()`;
+/**
+ * The statements of the ACTION-UNDECLARED check inside the frame script of `render-check`. They use `root`, `partRoot`,
+ * `options`, `report`, `ownedOf` and `textOf` of that script. A part whose root is the control leaves its action to the
+ * part that uses it, and a click listener on an element around other interactive ones delegates.
+ */
+exports.ACTION_UNDECLARED_STATEMENTS = `
+  if (options.part !== null) {
+    const interactive = ${JSON.stringify(DRAWN_INTERACTIVE_SELECTOR)};
+    const clicked = window.__etClickListened;
+    const candidates = [...root.querySelectorAll('*')].filter((element) =>
+      element.matches(interactive) || (clicked?.has(element) && !element.querySelector(interactive)));
+    const embedded = (element) => {
+      for (let at = element.closest('[data-et-control]'); at; at = at.parentElement?.closest('[data-et-control]') ?? null)
+        if (options.embedControls.includes(at.getAttribute('data-et-control'))) return true;
+      return false;
+    };
+    for (const element of candidates) {
+      if (element.hasAttribute('data-et-action') || element.getClientRects().length === 0 || !ownedOf(element)) continue;
+      if (element.matches(':disabled, [aria-disabled="true"]') || element.closest('[inert], [aria-hidden="true"]')) continue;
+      if (element === partRoot || embedded(element)) continue;
+      const text = (element.getAttribute('aria-label') || textOf(element).trim()).replace(/\\s+/g, ' ');
+      const cls = [...element.classList].find((name) => !/^et-(surface|color)--/.test(name));
+      const named = element.tagName.toLowerCase() + (cls ? '.' + cls : '') + (text ? ' "' + (text.length > 32 ? text.slice(0, 31) + '…' : text) + '"' : '');
+      report('${exports.ACTION_UNDECLARED_RULE}', element, named + ' is interactive but declares no action - add data-et-action="<state>" or "emit:<output>"');
+    }
+  }
+`;
+/**
+ * Splits the ACTION-UNDECLARED issues of the parts whose go still holds off `issues`, as one warning line per part with
+ * the hit count and the first element. The issues of every other part stay errors.
+ */
+const actionUndeclaredUnderGoOf = (options) => {
+    var _a;
+    const issues = [];
+    const groups = new Map();
+    for (const issue of options.issues) {
+        const at = { product: issue.product, part: (0, render_check_1.ownerPartOf)(issue) };
+        if (issue.rule !== exports.ACTION_UNDECLARED_RULE || !options.isGo(at)) {
+            issues.push(issue);
+            continue;
+        }
+        const key = JSON.stringify([at.product, at.part]);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : Object.assign(Object.assign({}, at), { found: [] });
+        group.found.push(issue);
+        groups.set(key, group);
+    }
+    const warnings = [...groups.values()].map(({ product, part, found }) => {
+        const [first] = found;
+        const elements = new Set(found.map((issue) => JSON.stringify([issue.part, issue.path]))).size;
+        const named = first.detail.split(' - ')[0];
+        return {
+            product,
+            part,
+            line: `WARNING ${exports.ACTION_UNDECLARED_RULE} ${product} ${part}: ${found.length} hit${found.length === 1 ? '' : 's'} on ${elements} element${elements === 1 ? '' : 's'}, unchanged since its go - first ${first.path}: ${named}`,
+        };
+    });
+    return { issues, warnings };
+};
+exports.actionUndeclaredUnderGoOf = actionUndeclaredUnderGoOf;
+//# sourceMappingURL=action-undeclared.js.map

package/src/lib/design/system/action-undeclared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-undeclared.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/action-undeclared.ts"],"names":[],"mappings":";;;AAAA,uCAAiD;AACjD,iDAA0D;AAE1D,0FAA0F;AAC7E,QAAA,sBAAsB,GAAG,mBAAmB,CAAC;AAE1D,MAAM,0BAA0B,GAAG,OAAO,8BAAoB,oBAAoB,CAAC;AAEnF;;;GAGG;AACU,QAAA,0BAA0B,GAAG;;;;;;;;KAQrC,CAAC;AAEN;;;;GAIG;AACU,QAAA,4BAA4B,GAAG;;0BAElB,IAAI,CAAC,SAAS,CAAC,0BAA0B,CAAC;;;;;;;;;;;;;;;;gBAgBpD,8BAAsB;;;CAGrC,CAAC;AAKF;;;GAGG;AACI,MAAM,yBAAyB,GAAG,CAAC,OAGzC,EAAE,EAAE;;IACH,MAAM,MAAM,GAAkB,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmE,CAAC;IAE1F,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,IAAA,0BAAW,EAAC,KAAK,CAAC,EAAE,CAAC;QAEhE,IAAI,KAAK,CAAC,IAAI,KAAK,8BAAsB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAC/D,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnB,SAAS;QACX,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,mEAAS,EAAE,KAAE,KAAK,EAAE,EAAE,GAAE,CAAC;QAEtD,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,MAAM,QAAQ,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAA2B,EAAE;QAC9F,MAAM,CAAC,KAAK,CAAC,GAAG,KAAwC,CAAC;QACzD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9F,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3C,OAAO;YACL,OAAO;YACP,IAAI;YACJ,IAAI,EAAE,WAAW,8BAAsB,IAAI,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,WAAW,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,oCAAoC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;SAC7N,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC9B,CAAC,CAAC;AAnCW,QAAA,yBAAyB,6BAmCpC"}

package/src/lib/design/system/actions-command.d.ts

@@ -0,0 +1,101 @@
+import { DesignConfig, DesignPreset } from '../paths';
+import { Browser } from '../thumb';
+import { ActionInput } from './actions';
+import { checkLiveActions } from './live-actions';
+import { StartHarnessServer } from './harness-server';
+import { ResolvedProduct } from './resolve-product';
+export declare const ACTIONS_USAGE = "actions <layer>/<name> --product <name> [--url <app dev server url>] [--state <name>] | actions [<layer>/<name>] --product <name> --live [--url <app build url>]";
+/** A state the check starts from: its harness props, and the trigger a click opens first when the state is an open surface. */
+export type ActionStart = {
+    state: string;
+    props: unknown;
+    opener: string | null;
+};
+type Line = {
+    state: string;
+    element: string;
+    input: ActionInput | null;
+    failure: string | null;
+    warning?: string | null;
+};
+/**
+ * Loads the harness page of `start`, clicks its opener, then presses `input` on the element `pick` names and returns
+ * the outputs it fired, whether its keydown default was prevented, and the host shot when `shoot` asks for one. The
+ * outputs include those of the components under the `listen` selectors; `expanded` adds each element's
+ * `aria-expanded` after the press. The wait for outputs ends as soon as `output` fired or the page settled.
+ */
+export declare const runActionInput: (options: {
+    browser: Browser;
+    url: string;
+    start: ActionStart;
+    pick: {
+        key: string;
+        occurrence: number;
+    };
+    input: ActionInput;
+    size: DesignPreset | null;
+    shoot: {
+        room: boolean;
+    } | null;
+    timeout: number;
+    listen?: string[];
+    expanded?: boolean;
+    output?: string | null;
+    focused?: boolean;
+}) => Promise<{
+    after?: {
+        key: string;
+        expanded: string | null;
+    }[] | undefined;
+    emitted: string[];
+    prevented: boolean;
+    app: Buffer<ArrayBufferLike> | null;
+}>;
+/** Presses each interactive element of each start state of a part on the app's harness page and checks its declared action. */
+export declare const checkActions: (options: {
+    target: string;
+    config: DesignConfig;
+    product: ResolvedProduct;
+    part: string;
+    url: string;
+    only: string | null;
+    onLine?: (line: Line) => void;
+}) => Promise<{
+    lines: Line[];
+    pictures: string | null;
+    embedders?: string[];
+    hosts?: string[];
+} | string>;
+/** The line `design actions` prints for one checked element and input. */
+export declare const actionLineOf: ({ state, element, input, failure, warning }: Line) => string;
+/** The line the action check prints once per run for a declared host component it skipped in a state. */
+export declare const hostLineOf: (host: string) => string;
+/** The failed lines `design actions` prints for a part, or why the check could not run. */
+export declare const partActionFailuresOf: (options: {
+    target: string;
+    config: DesignConfig;
+    product: ResolvedProduct;
+    part: string;
+    url?: string;
+    start?: StartHarnessServer;
+    check?: typeof checkActions;
+    checkLive?: typeof checkLiveActions;
+    onNote?: (line: string) => void;
+}) => Promise<string[] | {
+    unavailable: string;
+}>;
+/** The note a ready refusal adds when the action check ran on the part harness only. */
+export declare const PART_HARNESS_ONLY = "checked on the part harness only - pass --url <studio build> to check the live pages too";
+/**
+ * `et design actions <layer>/<name> …` clicks and presses Enter and Space on each interactive element of a part in the
+ * app's harness page and fails unless each reaches the state or fires the output its design's `data-et-action` declares.
+ */
+export declare const designActions: (options: {
+    target: string;
+    argv: string[];
+    invocation: string;
+    check?: typeof checkActions;
+    checkLive?: typeof checkLiveActions;
+    start?: StartHarnessServer;
+}) => Promise<0 | 1 | 2>;
+export {};