@percy/cli-command 1.32.2-beta.0 → 1.32.3-beta.0

package/dist/index.js

@@ -1,6 +1,5 @@
 export { default, command, _resetShutdownForTest } from './command.js';
 export { legacyCommand, legacyFlags as flags } from './legacy.js';
-export { applySmartSnap, SmartSnapBailError } from './smartsnap.js';
 // export common packages to avoid dependency resolution issues
 export { default as PercyConfig } from '@percy/config';
 export { default as logger } from '@percy/logger';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-command",
-  "version": "1.32.2-beta.0",
+  "version": "1.32.3-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -27,7 +27,6 @@
     ".": "./dist/index.js",
     "./flags": "./dist/flags.js",
     "./utils": "./dist/utils.js",
-    "./smartsnap": "./dist/smartsnap.js",
     "./test/helpers": "./test/helpers.js"
   },
   "scripts": {
@@ -37,14 +36,9 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/config": "1.32.2-beta.0",
-    "@percy/core": "1.32.2-beta.0",
-    "@percy/logger": "1.32.2-beta.0",
-    "glob-to-regexp": "^0.4.1",
-    "stream-json": "^1.8.0"
+    "@percy/config": "1.32.3-beta.0",
+    "@percy/core": "1.32.3-beta.0",
+    "@percy/logger": "1.32.3-beta.0"
   },
-  "optionalDependencies": {
-    "snyk-nodejs-lockfile-parser": "2.7.1"
-  },
-  "gitHead": "b9f4f5ccfa31695047c2b9b1a4549403af075f7a"
+  "gitHead": "e8af175695b4afdb78cdd48b67037710f5c8b1c9"
 }

package/dist/graphTrace.js

@@ -1,157 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import url from 'url';
-
-// Template resolution mirrors core/utils.js's secretPatterns.yml lookup:
-// resolves relative to this file's URL so it works under src/ (dev) and
-// dist/ (installed) without bundler help. The .html file is copied alongside
-// by babel's copyFiles when cli-command is built.
-const TEMPLATE_PATH = path.resolve(url.fileURLToPath(import.meta.url), '../graphTraceTemplate.html');
-
-// Maps a (raw kind, changed) pair to the kind value the template expects:
-// 'package' | 'component' | 'story' | 'is_relevant'. `changed: true` wins
-// over the underlying kind so any node touched in the diff renders purple.
-function templateKindOf(v) {
-  if (v.changed) return 'is_relevant';
-  switch (v.kind) {
-    case 'dependency':
-      return 'package';
-    case 'component':
-      return 'component';
-    case 'story':
-      return 'story';
-    default:
-      return 'component';
-  }
-}
-
-// Sort order within a column: packages left, components middle, stories right.
-// `is_relevant` shares rank with components so a changed node doesn't jump
-// out of its own group — it just recolors.
-const KIND_RANK = {
-  package: 0,
-  component: 1,
-  is_relevant: 1,
-  story: 2
-};
-
-// Layout algorithm (ported from the original Ruby renderer):
-//   1. col = longest-path depth reaching the vertex (read from the
-//      transitive-closure triples the API sends), with dependencies pinned
-//      to col 0.
-//   2. Propagate over edges so col[target] > col[source]. Bounded loop
-//      guards against degenerate inputs.
-//   3. Stories pushed past the rightmost non-story column.
-//   4. Within each column, sort by (kind-rank, name) and assign row.
-function computeLayout(rawVertices, edges, transitiveClosure) {
-  const n = rawVertices.length;
-  const vertices = rawVertices.map((v, i) => ({
-    index: i,
-    name: v.file_path,
-    kind: v.kind,
-    changed: !!v.changed,
-    row: 0,
-    col: 0
-  }));
-
-  // 1. Seed col from incoming transitive-closure lengths.
-  const incomingMax = new Array(n).fill(0);
-  for (const triple of transitiveClosure) {
-    const [u, v, val] = triple;
-    if (u === v || val <= 0) continue;
-    if (v < 0 || v >= n) continue;
-    if (val > incomingMax[v]) incomingMax[v] = val;
-  }
-  for (let i = 0; i < n; i++) {
-    vertices[i].col = vertices[i].kind === 'dependency' ? 0 : incomingMax[i] + 1;
-  }
-
-  // 2. Propagate edge constraint. n+2 iterations is enough for any DAG
-  // and bounds the work on accidentally-cyclic input.
-  const iterations = n + 2;
-  for (let iter = 0; iter < iterations; iter++) {
-    let changed = false;
-    for (const [s, t] of edges) {
-      if (s < 0 || s >= n || t < 0 || t >= n) continue;
-      if (vertices[s].col < vertices[t].col) continue;
-      vertices[t].col = vertices[s].col + 1;
-      changed = true;
-    }
-    if (!changed) break;
-  }
-
-  // 3. Stories rightmost. Two passes: max across non-stories first, then
-  // push every story past that boundary. Folding into one loop would let
-  // stories visited before the last non-story keep a stale max.
-  let furthestNonStory = 0;
-  for (const v of vertices) {
-    if (v.kind === 'story') continue;
-    if (v.col > furthestNonStory) furthestNonStory = v.col;
-  }
-  for (const v of vertices) {
-    if (v.kind !== 'story') continue;
-    if (v.col < furthestNonStory + 1) v.col = furthestNonStory + 1;
-  }
-
-  // 4. Group by column, sort by (kind-rank, name), assign row.
-  const groups = new Map();
-  for (const v of vertices) {
-    let list = groups.get(v.col);
-    if (!list) groups.set(v.col, list = []);
-    list.push(v);
-  }
-  const rankOf = v => {
-    const r = KIND_RANK[templateKindOf(v)];
-    /* istanbul ignore next: templateKindOf always returns a kind present in
-       KIND_RANK, so the `=== undefined` fallback is defensive */
-    return r === undefined ? 99 : r;
-  };
-  for (const list of groups.values()) {
-    list.sort((a, b) => {
-      const ra = rankOf(a);
-      const rb = rankOf(b);
-      if (ra !== rb) return ra - rb;
-      // Byte-wise compare on name to match Ruby's String#<=> behaviour.
-      if (a.name < b.name) return -1;
-      if (a.name > b.name) return 1;
-      return 0;
-    });
-    list.forEach((v, row) => {
-      v.row = row;
-    });
-  }
-
-  // 5. Final shape the template consumes: drop `changed`, fold it into kind.
-  return vertices.map(v => ({
-    index: v.index,
-    name: v.name,
-    row: v.row,
-    col: v.col,
-    kind: templateKindOf(v)
-  }));
-}
-
-// Escapes characters that have meaning inside a <script> block so user-derived
-// strings (e.g. a vertex file_path) can't break out of the surrounding tag.
-// `</` covers `</script>`; `<!--`/`-->` cover HTML comment confusion; U+2028
-// and U+2029 are valid JSON but illegal in JS string literals pre-ES2019 and
-// have historically been XSS sinks.
-const LS = String.fromCharCode(0x2028);
-const PS = String.fromCharCode(0x2029);
-function safeJson(obj) {
-  return JSON.stringify(obj).replace(/<\//g, '<\\/').replace(/<!--/g, '<\\!--').replace(/--(!?)>/g, '--$1\\>').split(LS).join('\\u2028').split(PS).join('\\u2029');
-}
-
-// Populates the trace template with the three JSON payloads the page needs.
-// Input shape matches the API's graph data: `vertices` carries `kind`,
-// `file_path`, `changed`; `edges` and `transitive_closure_matrix_sparse`
-// are arrays of integer tuples.
-export function renderGraphTraceHtml({
-  vertices,
-  edges,
-  transitiveClosureMatrixSparse
-}) {
-  const laidOutVertices = computeLayout(vertices || [], edges || [], transitiveClosureMatrixSparse || []);
-  const template = fs.readFileSync(TEMPLATE_PATH, 'utf8');
-  return template.replace('__VERTICES_JSON__', safeJson(laidOutVertices)).replace('__EDGES_JSON__', safeJson(edges || [])).replace('__TRANSITIVE_CLOSURE_JSON__', safeJson(transitiveClosureMatrixSparse || []));
-}

package/dist/graphTraceTemplate.html

@@ -1,349 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Smartsnap Graph</title>
-    <link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/drawflow@0.0.60/dist/drawflow.min.css"
-        integrity="sha384-IFh+Q6zh+LRcTjqVmAKetdGY59dT485vtvWT5DAKQy8iv5+fYWHXisHP7mFKcFqV"
-        crossorigin="anonymous">
-    <script
-        src="https://cdn.jsdelivr.net/npm/drawflow@0.0.60/dist/drawflow.min.js"
-        integrity="sha384-JsnM4f1X8b5e9VbQCj6Bt6840HQNDYVKohzbXJnqOetMno8i6cmKNLVkyK3snqSw"
-        crossorigin="anonymous"></script>
-    <style>
-        html, body {
-            margin: 0; padding: 0;
-            font-family: sans-serif; background: #fafafa;
-            width: 100%; height: 100%; overflow: hidden;
-        }
-        #drawflow {
-            position: fixed;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background: #fafafa;
-        }
-        #legend {
-            position: fixed; top: 8px; right: 8px;
-            background: rgba(255,255,255,0.95);
-            padding: 8px 12px; border: 1px solid #999;
-            font-size: 12px; z-index: 100;
-        }
-        #legend span {
-            display: inline-block; width: 12px; height: 12px;
-            vertical-align: middle; margin-right: 4px; border: 1px solid #333;
-        }
-        #controls {
-            position: fixed; top: 8px; left: 8px;
-            background: rgba(255,255,255,0.95);
-            border: 1px solid #999; z-index: 100;
-            display: flex; gap: 2px;
-        }
-        #controls button {
-            border: 0; background: transparent;
-            padding: 6px 10px; cursor: pointer;
-            font-size: 14px; font-family: inherit;
-        }
-        #controls button:hover { background: #eee; }
-
-        .drawflow .drawflow-node {
-            width: max-content;
-            min-width: 0; max-width: none;
-            height: auto; min-height: 0;
-            padding: 8px 14px;
-            white-space: nowrap;
-            font-size: 12px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-            background: #fff;
-            border: 2px solid #333;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: opacity 150ms;
-        }
-        .drawflow .drawflow-node .drawflow_content_node {
-            width: max-content;
-            white-space: nowrap;
-        }
-        .drawflow .drawflow-node.package    { background: #d4e5f7; border-color: #2a6db5; }
-        .drawflow .drawflow-node.component  { background: #daf0c1; border-color: #4a8e1f; }
-        .drawflow .drawflow-node.story      { background: #fce4b6; border-color: #b07310; }
-        .drawflow .drawflow-node.is-relevant { background: #d9b3ff; border-color: #6f30b0; }
-
-        .drawflow .drawflow-node .input,
-        .drawflow .drawflow-node .output {
-            width: 10px !important;
-            height: 10px !important;
-            border-width: 1px !important;
-        }
-
-        .drawflow .connection,
-        .drawflow .connection *,
-        .drawflow svg.connection,
-        .drawflow svg.connection * { pointer-events: none !important; }
-
-        .drawflow .drawflow-node.is-dim { opacity: 0.25; }
-        .drawflow .connection.is-dim { visibility: hidden; }
-
-        .drawflow .drawflow-node.is-selected {
-            box-shadow: 0 0 0 3px #2a6db5, 0 2px 8px rgba(0,0,0,0.2);
-        }
-
-        .measure-node {
-            position: absolute;
-            top: -9999px; left: -9999px;
-            opacity: 0;
-            pointer-events: none;
-            white-space: nowrap;
-            padding: 8px 14px;
-            font-size: 12px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-            border: 2px solid transparent;
-        }
-    </style>
-</head>
-<body>
-<div id="controls">
-    <button id="zoom-in" title="Zoom in">+</button>
-    <button id="zoom-out" title="Zoom out">-</button>
-    <button id="zoom-reset" title="Reset">reset</button>
-</div>
-<div id="legend">
-    <div><span style="background:#d4e5f7"></span>Package Dependency</div>
-    <div><span style="background:#daf0c1"></span>Component</div>
-    <div><span style="background:#fce4b6"></span>Story</div>
-    <div><span style="background:#d9b3ff"></span>Changed file</div>
-</div>
-<div id="drawflow"></div>
-<script type="module">
-// ---------------------------------------------------------------------------
-// Payload populated by the CLI before this template is written to disk.
-// Tokens are replaced by graphTrace.js via plain string substitution.
-//   vertices:                         [{ index, name, row, col, kind }, ...]
-//   edges:                            [[srcIndex, tgtIndex], ...]
-//   transitive_closure_matrix_sparse: [[srcIndex, tgtIndex, length], ...]
-// `kind` is one of: 'package' | 'component' | 'story' | 'is_relevant'.
-// ---------------------------------------------------------------------------
-const vertices = __VERTICES_JSON__;
-const edges = __EDGES_JSON__;
-const transitive_closure_matrix_sparse = __TRANSITIVE_CLOSURE_JSON__;
-const n = vertices.length;
-
-// ---------------------------------------------------------------------------
-// Width measurement: each node grows to fit its file path. We need the
-// rendered width (DOM-dependent) to lay out columns without overlap.
-// ---------------------------------------------------------------------------
-function measureWidth(text) {
-    const el = document.createElement('div');
-    el.className = 'measure-node';
-    el.textContent = text;
-    document.body.appendChild(el);
-    const w = el.offsetWidth;
-    el.remove();
-    return w;
-}
-
-// Drawflow adds port circles on each side (~25px) + border; pad generously.
-const PORT_PAD = 60;
-const nodeWidth = vertices.map(v => measureWidth(v.name) + PORT_PAD);
-
-// ---------------------------------------------------------------------------
-// Column X positions (cumulative by max width per column).
-// ---------------------------------------------------------------------------
-const PAD_X = 60, PAD_Y = 60, COL_GAP = 140, ROW_HEIGHT = 70;
-
-const colMaxWidth = {};
-for (let i = 0; i < n; i++) {
-    const c = vertices[i].col;
-    if (!colMaxWidth[c] || nodeWidth[i] > colMaxWidth[c]) colMaxWidth[c] = nodeWidth[i];
-}
-const sortedCols = Object.keys(colMaxWidth).map(Number).sort((a, b) => a - b);
-const colX = {};
-let cursor = PAD_X;
-for (const c of sortedCols) {
-    colX[c] = cursor;
-    cursor += colMaxWidth[c] + COL_GAP;
-}
-
-// ---------------------------------------------------------------------------
-// Boot Drawflow.
-// ---------------------------------------------------------------------------
-const container = document.getElementById('drawflow');
-const editor = new Drawflow(container);
-editor.reroute = false;
-editor.start();
-
-function escapeHtml(s) {
-    return String(s)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-// CSS classes per kind. `is_relevant` becomes `is-relevant` so it matches
-// the stylesheet rule.
-function cssClassFor(kind) {
-    if (kind === 'is_relevant') return 'is-relevant';
-    return kind;
-}
-
-// ---------------------------------------------------------------------------
-// Add nodes. row/col come from the server; pixel positions are computed
-// here using the measured widths so columns never overlap.
-// ---------------------------------------------------------------------------
-const nodeIds = new Array(n);
-for (let i = 0; i < n; i++) {
-    const v = vertices[i];
-    const id = editor.addNode(
-        'node',
-        1, 1,
-        colX[v.col],
-        PAD_Y + v.row * ROW_HEIGHT,
-        cssClassFor(v.kind),
-        { index: v.index, kind: v.kind, name: v.name },
-        escapeHtml(v.name),
-    );
-    nodeIds[i] = id;
-}
-
-// ---------------------------------------------------------------------------
-// Connections.
-// ---------------------------------------------------------------------------
-for (const e of edges) {
-    editor.addConnection(nodeIds[e[0]], nodeIds[e[1]], 'output_1', 'input_1');
-}
-
-editor.editor_mode = 'fixed';
-
-// ---------------------------------------------------------------------------
-// Arrowheads on connection paths.
-// ---------------------------------------------------------------------------
-const SVG_NS = 'http://www.w3.org/2000/svg';
-function addArrowhead(svg) {
-    if (svg.querySelector('marker')) return;
-    let defs = svg.querySelector('defs');
-    if (!defs) {
-        defs = document.createElementNS(SVG_NS, 'defs');
-        svg.insertBefore(defs, svg.firstChild);
-    }
-    const marker = document.createElementNS(SVG_NS, 'marker');
-    marker.setAttribute('id', 'arrowhead');
-    marker.setAttribute('viewBox', '0 0 10 10');
-    marker.setAttribute('refX', '9');
-    marker.setAttribute('refY', '5');
-    marker.setAttribute('markerWidth', '5');
-    marker.setAttribute('markerHeight', '5');
-    marker.setAttribute('orient', 'auto');
-    const tip = document.createElementNS(SVG_NS, 'path');
-    tip.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
-    tip.setAttribute('fill', '#4ea9ff');
-    marker.appendChild(tip);
-    defs.appendChild(marker);
-    const path = svg.querySelector('path.main-path') || svg.querySelector('path');
-    if (path) path.setAttribute('marker-end', 'url(#arrowhead)');
-}
-container.querySelectorAll('svg.connection').forEach(addArrowhead);
-
-new MutationObserver((muts) => {
-    for (const m of muts) {
-        for (const node of m.addedNodes) {
-            if (node.nodeType !== 1) continue;
-            if (node.matches && node.matches('svg.connection')) addArrowhead(node);
-            if (node.querySelectorAll) {
-                node.querySelectorAll('svg.connection').forEach(addArrowhead);
-            }
-        }
-    }
-}).observe(container, { subtree: true, childList: true });
-
-// ---------------------------------------------------------------------------
-// Click-to-select with bidirectional reachability highlight.
-//
-// Reachability comes straight from transitive_closure_matrix_sparse: for a click
-// on vertex `start`, anything appearing as the target of a triple
-// (start, j, _) is reachable from `start`, and anything appearing as the
-// source of a triple (i, start, _) can reach `start`. No adjacency list —
-// we just iterate the triples each time. With small click counts and a
-// sparse matrix this is fast enough and avoids carrying redundant graph
-// state in the page.
-// ---------------------------------------------------------------------------
-const idxByDfId = new Map();
-for (let i = 0; i < n; i++) {
-    if (nodeIds[i] !== undefined) idxByDfId.set(nodeIds[i], i);
-}
-
-function connectedTo(start) {
-    const seen = new Set([start]);
-    for (const transitive_edge of transitive_closure_matrix_sparse) {
-        if (transitive_edge[0] === start) seen.add(transitive_edge[1]);
-        else if (transitive_edge[1] === start) seen.add(transitive_edge[0]);
-    }
-    return seen;
-}
-
-function parseEndpointIds(svg) {
-    let outId = null, inId = null;
-    for (const cls of svg.classList) {
-        if (cls.startsWith('node_out_node-')) outId = parseInt(cls.slice('node_out_node-'.length), 10);
-        else if (cls.startsWith('node_in_node-')) inId = parseInt(cls.slice('node_in_node-'.length), 10);
-    }
-    return { outId, inId };
-}
-
-let currentSelected = null;
-
-function clearSelection() {
-    container.querySelectorAll('.drawflow-node.is-dim, .drawflow-node.is-selected')
-        .forEach(el => el.classList.remove('is-dim', 'is-selected'));
-    container.querySelectorAll('svg.connection.is-dim')
-        .forEach(el => el.classList.remove('is-dim'));
-}
-
-function applySelection(startIdx) {
-    const connected = connectedTo(startIdx);
-
-    for (let i = 0; i < n; i++) {
-        const el = document.getElementById('node-' + nodeIds[i]);
-        if (!el) continue;
-        el.classList.toggle('is-dim', !connected.has(i));
-        el.classList.toggle('is-selected', i === startIdx);
-    }
-
-    container.querySelectorAll('svg.connection').forEach((svg) => {
-        const { outId, inId } = parseEndpointIds(svg);
-        const s = idxByDfId.get(outId);
-        const t = idxByDfId.get(inId);
-        const keep = (s !== undefined && t !== undefined
-                      && connected.has(s) && connected.has(t));
-        svg.classList.toggle('is-dim', !keep);
-    });
-}
-
-container.addEventListener('click', (evt) => {
-    const nodeEl = evt.target.closest('.drawflow-node');
-    if (!nodeEl) return;
-    const m = nodeEl.id.match(/^node-(\d+)$/);
-    if (!m) return;
-    const dfId = parseInt(m[1], 10);
-    const idx = idxByDfId.get(dfId);
-    if (idx === undefined) return;
-
-    if (currentSelected === idx) {
-        currentSelected = null;
-        clearSelection();
-    } else {
-        currentSelected = idx;
-        applySelection(idx);
-    }
-});
-
-// ---------------------------------------------------------------------------
-// Toolbar.
-// ---------------------------------------------------------------------------
-document.getElementById('zoom-in').onclick    = () => editor.zoom_in();
-document.getElementById('zoom-out').onclick   = () => editor.zoom_out();
-document.getElementById('zoom-reset').onclick = () => { editor.zoom_reset(); currentSelected = null; clearSelection(); };
-</script>
-</body>
-</html>