@describe-me/vitest 0.4.0 → 0.5.0-next.1

package/dist/setup.js

@@ -1,11 +1,13 @@
 /**
  * Vitest setup file for browser mode: `setupFiles: ['@describe-me/vitest/setup']`.
  * Patches Vitest's locators and userEvent so every interaction records a
- * frame, and registers the recording hooks. For jsdom use `./setup-dom`.
+ * frame, and registers the recording hooks. Which test files are recorded
+ * (`include` / `exclude`) comes from the plugin. For jsdom use `./setup-dom`.
  */
 import { patchLocators } from './patch-locators.js';
 import { patchUserEvent } from './patch-user-event.js';
+import { readRuntimeOptions } from './read-runtime-options.js';
 import { registerRecordingHooks } from './register-recording-hooks.js';
 patchLocators();
 patchUserEvent();
-registerRecordingHooks();
+registerRecordingHooks(readRuntimeOptions());

package/dist/split-stylesheet.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Split a stylesheet into chunks of about 4 KB, cut between top-level rules
+ * where their content decides, so a sheet that grows from test to test keeps
+ * most of its chunks. `chunks.join('')` is always the input, even for
+ * malformed CSS.
+ */
+export declare function splitStylesheet(css: string): string[];

package/dist/split-stylesheet.js

@@ -0,0 +1,114 @@
+/** A chunk is never closed below this length, so small rules do not end up in tiny files. */
+const MIN_CHUNK = 1024;
+/**
+ * A chunk is closed once it reaches this length. Only its last rule can take it
+ * past the limit, because a rule is never split.
+ */
+const MAX_CHUNK = 16384;
+/**
+ * Past `MIN_CHUNK`, a rule of `n` characters ends its chunk with a probability
+ * of about `n / BOUNDARY_SPACING`, decided by a hash of its text. Chunks then
+ * average about 4 KB, and where they end depends on content, not on offsets.
+ */
+const BOUNDARY_SPACING = 3072;
+/** Boundaries only need a cheap, stable hash, not sha1. */
+function fnv1a32(text) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) {
+        hash = Math.imul(hash ^ text.charCodeAt(i), 0x01000193);
+    }
+    return hash >>> 0;
+}
+function isBoundary(piece) {
+    return fnv1a32(piece) % BOUNDARY_SPACING < piece.length;
+}
+function endOfComment(css, start) {
+    const close = css.indexOf('*/', start + 2);
+    return close === -1 ? css.length : close + 2;
+}
+function endOfString(css, start) {
+    const quote = css[start];
+    let i = start + 1;
+    while (i < css.length) {
+        if (css[i] === '\\') {
+            i += 2;
+        }
+        else if (css[i] === quote) {
+            return i + 1;
+        }
+        else {
+            i++;
+        }
+    }
+    return css.length;
+}
+/**
+ * Cut a stylesheet after every top-level rule: after the `}` that closes a
+ * top-level block, or after a semicolon at depth 0 (`@import`). Strings,
+ * comments and escapes are skipped and nothing in parentheses counts, so
+ * `content: "}"` or an unquoted font URL with semicolons never ends a rule.
+ */
+function topLevelPieces(css) {
+    const pieces = [];
+    let start = 0;
+    let braces = 0;
+    let parens = 0;
+    let i = 0;
+    while (i < css.length) {
+        const char = css[i];
+        if (char === '\\') {
+            i += 2;
+            continue;
+        }
+        if (char === '/' && css[i + 1] === '*') {
+            i = endOfComment(css, i);
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            i = endOfString(css, i);
+            continue;
+        }
+        if (char === '(') {
+            parens++;
+        }
+        else if (char === ')') {
+            parens = Math.max(0, parens - 1);
+        }
+        else if (parens === 0 && char === '{') {
+            braces++;
+        }
+        else if (parens === 0 && char === '}') {
+            braces = Math.max(0, braces - 1);
+        }
+        i++;
+        if (parens === 0 && braces === 0 && (char === '}' || char === ';')) {
+            pieces.push(css.slice(start, i));
+            start = i;
+        }
+    }
+    if (start < css.length) {
+        pieces.push(css.slice(start));
+    }
+    return pieces;
+}
+/**
+ * Split a stylesheet into chunks of about 4 KB, cut between top-level rules
+ * where their content decides, so a sheet that grows from test to test keeps
+ * most of its chunks. `chunks.join('')` is always the input, even for
+ * malformed CSS.
+ */
+export function splitStylesheet(css) {
+    const chunks = [];
+    let current = '';
+    for (const piece of topLevelPieces(css)) {
+        current += piece;
+        if (current.length >= MAX_CHUNK || (current.length >= MIN_CHUNK && isBoundary(piece))) {
+            chunks.push(current);
+            current = '';
+        }
+    }
+    if (current !== '') {
+        chunks.push(current);
+    }
+    return chunks;
+}

package/dist/style-store.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Content-addressed store for the stylesheets rrweb copies into every capture,
+ * living in `<outDir>/styles`. A sheet is stored once, in chunks, so one that
+ * grows from test to test shares most of them.
+ */
+export declare class StyleStore {
+    private readonly outDir;
+    private readonly dir;
+    /** Snapshots are content-addressed, so a cached entry never goes stale. */
+    private readonly referencesBySnapshot;
+    constructor(outDir: string);
+    /**
+     * Replace each long `_cssText` in a serialized snapshot with a reference to
+     * its chunks, writing the ones not stored yet. Idempotent.
+     */
+    extract(json: string): string;
+    /**
+     * Drop the chunks no kept snapshot refers to, and return the kept ones as
+     * sorted `styles/<hash>.css` paths for the asset store. Paths are relative to
+     * the output directory, as the manifest stores them.
+     */
+    collectGarbage(snapshotFiles: Iterable<string>): string[];
+    private write;
+    private referencesIn;
+}

package/dist/style-store.js

@@ -0,0 +1,90 @@
+import { createHash } from 'node:crypto';
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync, } from 'node:fs';
+import { join } from 'node:path';
+import { STYLE_URL_PREFIX } from '@describe-me/core/types';
+import { splitStylesheet } from './split-stylesheet.js';
+/** Shorter sheets stay inline, where they cost less than a reference and a file of their own. */
+const MIN_EXTRACTED_LENGTH = 256;
+/**
+ * Inside a JSON string every `"` is escaped, so only a real `_cssText` key
+ * matches. Unrolled, because `(?:[^"\\]|\\.)*` is much slower on
+ * megabyte-long sheets.
+ */
+const CSS_TEXT_MEMBER = /"_cssText":"([^"\\]*(?:\\.[^"\\]*)*)"/g;
+const STYLE_REFERENCE = new RegExp(`${STYLE_URL_PREFIX}([0-9a-f]{16}(?:\\+[0-9a-f]{16})*)`, 'g');
+/**
+ * Content-addressed store for the stylesheets rrweb copies into every capture,
+ * living in `<outDir>/styles`. A sheet is stored once, in chunks, so one that
+ * grows from test to test shares most of them.
+ */
+export class StyleStore {
+    outDir;
+    dir;
+    /** Snapshots are content-addressed, so a cached entry never goes stale. */
+    referencesBySnapshot = new Map();
+    constructor(outDir) {
+        this.outDir = outDir;
+        this.dir = join(outDir, 'styles');
+        mkdirSync(this.dir, { recursive: true });
+    }
+    /**
+     * Replace each long `_cssText` in a serialized snapshot with a reference to
+     * its chunks, writing the ones not stored yet. Idempotent.
+     */
+    extract(json) {
+        return json.replace(CSS_TEXT_MEMBER, (member, escaped) => {
+            const css = JSON.parse(`"${escaped}"`);
+            if (css.length < MIN_EXTRACTED_LENGTH || css.startsWith(STYLE_URL_PREFIX)) {
+                return member;
+            }
+            const hashes = splitStylesheet(css).map((chunk) => this.write(chunk));
+            return `"_cssText":"${STYLE_URL_PREFIX}${hashes.join('+')}"`;
+        });
+    }
+    /**
+     * Drop the chunks no kept snapshot refers to, and return the kept ones as
+     * sorted `styles/<hash>.css` paths for the asset store. Paths are relative to
+     * the output directory, as the manifest stores them.
+     */
+    collectGarbage(snapshotFiles) {
+        const keep = new Set();
+        for (const snapshotFile of snapshotFiles) {
+            for (const hash of this.referencesIn(snapshotFile)) {
+                keep.add(`${hash}.css`);
+            }
+        }
+        const kept = [];
+        for (const file of readdirSync(this.dir)) {
+            if (keep.has(file)) {
+                kept.push(`styles/${file}`);
+            }
+            else {
+                rmSync(join(this.dir, file), { force: true });
+            }
+        }
+        return kept.sort();
+    }
+    write(chunk) {
+        const hash = createHash('sha1').update(chunk).digest('hex').slice(0, 16);
+        const file = join(this.dir, `${hash}.css`);
+        // Not remembered in memory: in watch mode, GC can delete the file between runs.
+        if (!existsSync(file)) {
+            writeFileSync(file, chunk);
+        }
+        return hash;
+    }
+    referencesIn(snapshotFile) {
+        const cached = this.referencesBySnapshot.get(snapshotFile);
+        if (cached) {
+            return cached;
+        }
+        const path = join(this.outDir, snapshotFile);
+        if (!statSync(path, { throwIfNoEntry: false })?.isFile()) {
+            return [];
+        }
+        const json = readFileSync(path, 'utf8');
+        const hashes = Array.from(json.matchAll(STYLE_REFERENCE), (match) => match[1].split('+')).flat();
+        this.referencesBySnapshot.set(snapshotFile, hashes);
+        return hashes;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@describe-me/vitest",
-  "version": "0.4.0",
+  "version": "0.5.0-next.1",
   "description": "Vitest integration for describe-me: plugin, setup file and reporter",
   "keywords": [
     "vitest",
@@ -58,12 +58,13 @@
     "./dist/setup-dom.js"
   ],
   "dependencies": {
-    "@describe-me/core": "^0.4.0"
+    "picomatch": "^4.0.3",
+    "@describe-me/core": "^0.5.0-next.1"
   },
   "peerDependencies": {
-    "vitest": ">=4",
-    "typescript": ">=5.0",
-    "@testing-library/user-event": ">=14"
+    "vitest": "^4.0.0 || ^5.0.0",
+    "typescript": "^5.0.0 || ^6.0.0",
+    "@testing-library/user-event": "^14.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -78,7 +79,8 @@
     "@types/node": "^22",
     "typescript": "^6",
     "@testing-library/user-event": "^14.6.1",
-    "@testing-library/dom": "^10.4.0"
+    "@testing-library/dom": "^10.4.0",
+    "@types/picomatch": "^4.0.3"
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.json"

package/dist/element-label.d.ts

@@ -1,6 +0,0 @@
-/**
- * A readable target for a frame label, e.g. `button "show details"`.
- * Testing Library hands interactions a real `Element` rather than a Vitest
- * locator, so the label is read off the element instead of a selector string.
- */
-export declare function elementLabel(target: unknown): string | undefined;

package/dist/element-label.js

@@ -1,34 +0,0 @@
-/** Attributes that name an element better than its text, in order of preference. */
-const NAME_ATTRIBUTES = ['aria-label', 'name', 'placeholder', 'title'];
-function roleOf(element) {
-    const explicit = element.getAttribute('role');
-    if (explicit) {
-        return explicit;
-    }
-    const tag = element.tagName.toLowerCase();
-    if (tag === 'input') {
-        return element.getAttribute('type') ?? 'input';
-    }
-    return tag;
-}
-function nameOf(element) {
-    for (const attribute of NAME_ATTRIBUTES) {
-        const value = element.getAttribute(attribute);
-        if (value) {
-            return value;
-        }
-    }
-    return (element.textContent ?? '').trim().slice(0, 40);
-}
-/**
- * A readable target for a frame label, e.g. `button "show details"`.
- * Testing Library hands interactions a real `Element` rather than a Vitest
- * locator, so the label is read off the element instead of a selector string.
- */
-export function elementLabel(target) {
-    if (typeof Element === 'undefined' || !(target instanceof Element)) {
-        return undefined;
-    }
-    const name = nameOf(target);
-    return name ? `${roleOf(target)} "${name}"` : roleOf(target);
-}