@stencil/vitest 0.0.1-dev.20260109124515.90fb962

package/dist/setup/config-loader.js

@@ -0,0 +1,92 @@
+import { existsSync } from 'fs';
+import { resolve } from 'path';
+/**
+ * Load Stencil configuration from a file path
+ * Uses jiti to handle TypeScript files in Node.js
+ */
+export async function loadStencilConfig(configPath) {
+    const resolvedPath = resolve(process.cwd(), configPath);
+    if (!existsSync(resolvedPath)) {
+        console.warn(`Stencil config not found at ${resolvedPath}`);
+        return undefined;
+    }
+    try {
+        // Use jiti for loading TypeScript configs in Node.js
+        const { createJiti } = await import('jiti');
+        const jiti = createJiti(process.cwd(), {
+            interopDefault: true,
+            moduleCache: false,
+        });
+        const configModule = (await jiti.import(resolvedPath));
+        return configModule.config || configModule.default || configModule;
+    }
+    catch (error) {
+        console.error(`Failed to load Stencil config from ${resolvedPath}:`, error);
+        return undefined;
+    }
+}
+/**
+ * Get the source directory from Stencil config
+ */
+export function getStencilSrcDir(config) {
+    return config?.srcDir || 'src';
+}
+/**
+ * Get all output directories from Stencil config for exclusion
+ */
+export function getStencilOutputDirs(config) {
+    if (!config?.outputTargets) {
+        return ['dist', 'www', 'build', '.stencil'];
+    }
+    const outputDirs = new Set();
+    config.outputTargets.forEach((target) => {
+        // Add common output directories based on target type
+        if (target.dir) {
+            outputDirs.add(target.dir);
+        }
+        if (target.buildDir) {
+            outputDirs.add(target.buildDir);
+        }
+        // Handle Stencil default directories for output types that don't specify dir
+        // Based on Stencil's default behavior:
+        if (target.type === 'dist' || target.type === 'dist-custom-elements' || target.type === 'dist-hydrate-script') {
+            // These all default to 'dist' directory
+            if (!target.dir && !target.buildDir) {
+                outputDirs.add('dist');
+            }
+        }
+        if (target.type === 'www') {
+            // www defaults to 'www' directory
+            if (!target.dir && !target.buildDir) {
+                outputDirs.add('www');
+            }
+        }
+        // Note: esmLoaderPath is a relative import path like '../loader', not a directory
+        // We should NOT extract this as an exclude pattern
+    });
+    // Always include common output directories
+    outputDirs.add('.stencil');
+    // Filter out invalid paths (those that navigate up with ..)
+    const validDirs = Array.from(outputDirs).filter((dir) => !dir.includes('..'));
+    return validDirs.length > 0 ? validDirs : ['dist', 'www', 'build', '.stencil'];
+}
+/**
+ * Create resolve aliases from Stencil config
+ */
+export function getStencilResolveAliases(config) {
+    const srcDir = getStencilSrcDir(config);
+    const aliases = {
+        '@': resolve(process.cwd(), srcDir),
+    };
+    // Add component alias if components directory exists
+    const componentsDir = resolve(process.cwd(), srcDir, 'components');
+    if (existsSync(componentsDir)) {
+        aliases['@components'] = componentsDir;
+    }
+    // Add utils alias if utils directory exists
+    const utilsDir = resolve(process.cwd(), srcDir, 'utils');
+    if (existsSync(utilsDir)) {
+        aliases['@utils'] = utilsDir;
+    }
+    return aliases;
+}

package/dist/setup/happy-dom-setup.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Setup file for happy-dom environment
+ * Auto-loaded when using a project named 'happy-dom' or containing 'happy-dom'
+ *
+ * Configures happy-dom with Stencil-specific setup
+ * happy-dom generally has better built-in support than jsdom, so fewer polyfills are needed
+ */
+/**
+ * Main setup function for happy-dom environment
+ */
+export declare function setup(): Promise<void>;
+//# sourceMappingURL=happy-dom-setup.d.ts.map

package/dist/setup/happy-dom-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"happy-dom-setup.d.ts","sourceRoot":"","sources":["../../src/setup/happy-dom-setup.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;GAEG;AACH,wBAAsB,KAAK,kBAG1B"}

package/dist/setup/happy-dom-setup.js

@@ -0,0 +1,16 @@
+/**
+ * Setup file for happy-dom environment
+ * Auto-loaded when using a project named 'happy-dom' or containing 'happy-dom'
+ *
+ * Configures happy-dom with Stencil-specific setup
+ * happy-dom generally has better built-in support than jsdom, so fewer polyfills are needed
+ */
+/**
+ * Main setup function for happy-dom environment
+ */
+export async function setup() {
+    // happy-dom is generally more complete than jsdom out of the box
+    // Add polyfills here as needed when issues are discovered
+}
+// Auto-run setup
+setup();

package/dist/setup/jsdom-setup.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Setup jsdom environment for Stencil component testing
+ *
+ * This module provides polyfills and initialization for testing Stencil components
+ * in a jsdom environment. It handles:
+ * - Polyfilling adoptedStyleSheets for Shadow DOM
+ * - Polyfilling CSS support detection
+ * - Polyfilling requestAnimationFrame and related APIs
+ * - Loading and initializing Stencil lazy loader
+ *
+ * @example
+ * ```ts
+ * // vitest.config.ts
+ * export default defineVitestConfig({
+ *   test: {
+ *     setupFiles: ['@stencil/vitest/jsdom-setup'],
+ *   },
+ * });
+ * ```
+ */
+/**
+ * Apply polyfills to a jsdom window object for Stencil components
+ * This function is reused by both the setup file and the custom environment
+ */
+export declare function applyJsdomPolyfills(window: Window & typeof globalThis): void;
+/**
+ * Initialize jsdom environment for Stencil testing
+ */
+export declare function setup(): Promise<void>;
+//# sourceMappingURL=jsdom-setup.d.ts.map

package/dist/setup/jsdom-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsdom-setup.d.ts","sourceRoot":"","sources":["../../src/setup/jsdom-setup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,UAAU,QA2DrE;AAED;;GAEG;AACH,wBAAsB,KAAK,kBAa1B"}

package/dist/setup/jsdom-setup.js

@@ -0,0 +1,95 @@
+/**
+ * Setup jsdom environment for Stencil component testing
+ *
+ * This module provides polyfills and initialization for testing Stencil components
+ * in a jsdom environment. It handles:
+ * - Polyfilling adoptedStyleSheets for Shadow DOM
+ * - Polyfilling CSS support detection
+ * - Polyfilling requestAnimationFrame and related APIs
+ * - Loading and initializing Stencil lazy loader
+ *
+ * @example
+ * ```ts
+ * // vitest.config.ts
+ * export default defineVitestConfig({
+ *   test: {
+ *     setupFiles: ['@stencil/vitest/jsdom-setup'],
+ *   },
+ * });
+ * ```
+ */
+/**
+ * Apply polyfills to a jsdom window object for Stencil components
+ * This function is reused by both the setup file and the custom environment
+ */
+export function applyJsdomPolyfills(window) {
+    // Polyfill adoptedStyleSheets for Shadow DOM
+    if (!window.document.adoptedStyleSheets) {
+        Object.defineProperty(window.document, 'adoptedStyleSheets', {
+            value: [],
+            writable: true,
+            configurable: true,
+        });
+    }
+    if (typeof window.ShadowRoot !== 'undefined' &&
+        !Object.prototype.hasOwnProperty.call(window.ShadowRoot.prototype, 'adoptedStyleSheets')) {
+        Object.defineProperty(window.ShadowRoot.prototype, 'adoptedStyleSheets', {
+            get() {
+                if (!this._adoptedStyleSheets) {
+                    this._adoptedStyleSheets = [];
+                }
+                return this._adoptedStyleSheets;
+            },
+            set(value) {
+                this._adoptedStyleSheets = value;
+            },
+            configurable: true,
+        });
+    }
+    // Polyfill CSS support
+    if (!window.CSS) {
+        window.CSS = {
+            supports: () => true,
+        };
+    }
+    // Polyfill scrollTo
+    window.scrollTo = () => { };
+    // Add requestAnimationFrame and related APIs
+    if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = (cb) => {
+            return setTimeout(cb, 0);
+        };
+    }
+    if (!window.cancelAnimationFrame) {
+        window.cancelAnimationFrame = (id) => {
+            clearTimeout(id);
+        };
+    }
+    if (!window.requestIdleCallback) {
+        window.requestIdleCallback = (cb) => {
+            return setTimeout(cb, 0);
+        };
+    }
+    if (!window.cancelIdleCallback) {
+        window.cancelIdleCallback = (id) => {
+            clearTimeout(id);
+        };
+    }
+}
+/**
+ * Initialize jsdom environment for Stencil testing
+ */
+export async function setup() {
+    // Only run in jsdom environment (Node.js with DOM)
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+    // Skip if running in actual browser (Playwright, WebdriverIO, etc.)
+    // In actual browsers, process is undefined or doesn't have cwd
+    if (typeof process === 'undefined' || typeof process.cwd !== 'function') {
+        return;
+    }
+    applyJsdomPolyfills(window);
+}
+// Auto-run setup when imported
+setup();

package/dist/setup/mock-doc-setup.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Setup for mock-doc environment
+ * This file is automatically loaded when using the mock-doc environment in Node.js
+ *
+ * IMPORTANT: This should only be imported/executed in Node.js runtime, not in browsers.
+ * The projects-based config ensures this is only loaded for node:mock-doc projects.
+ */
+import { setupGlobal, teardownGlobal } from '@stencil/core/mock-doc';
+/**
+ * Apply polyfills to a window object for Stencil components
+ * This function is reused by both the setup file and the custom environment
+ */
+export declare function applyMockDocPolyfills(win: any): void;
+declare let win: any;
+declare let doc: any;
+export { win, doc, setupGlobal, teardownGlobal };
+//# sourceMappingURL=mock-doc-setup.d.ts.map

package/dist/setup/mock-doc-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-doc-setup.d.ts","sourceRoot":"","sources":["../../src/setup/mock-doc-setup.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAc,WAAW,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEjF;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,GAAG,QAmD7C;AAOD,QAAA,IAAI,GAAG,EAAE,GAAG,CAAC;AACb,QAAA,IAAI,GAAG,EAAE,GAAG,CAAC;AA6Bb,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

package/dist/setup/mock-doc-setup.js

@@ -0,0 +1,90 @@
+/**
+ * Setup for mock-doc environment
+ * This file is automatically loaded when using the mock-doc environment in Node.js
+ *
+ * IMPORTANT: This should only be imported/executed in Node.js runtime, not in browsers.
+ * The projects-based config ensures this is only loaded for node:mock-doc projects.
+ */
+import { MockWindow, setupGlobal, teardownGlobal } from '@stencil/core/mock-doc';
+/**
+ * Apply polyfills to a window object for Stencil components
+ * This function is reused by both the setup file and the custom environment
+ */
+export function applyMockDocPolyfills(win) {
+    // Set baseURI manually
+    Object.defineProperty(win.document, 'baseURI', {
+        value: 'http://localhost:3000/',
+        writable: false,
+        configurable: true,
+    });
+    // Setup global with mock-doc globals
+    setupGlobal(win);
+    // Add MessageEvent if it doesn't exist (needed by Node's undici)
+    if (!win.MessageEvent) {
+        win.MessageEvent = class MessageEvent extends win.Event {
+            constructor(type, eventInitDict) {
+                super(type, eventInitDict);
+            }
+        };
+    }
+    // Add AbortController if it doesn't exist
+    if (!win.AbortController) {
+        win.AbortController = class AbortController {
+            constructor() {
+                this.signal = {
+                    aborted: false,
+                    addEventListener: () => { },
+                    removeEventListener: () => { },
+                    dispatchEvent: () => true,
+                };
+            }
+            abort() {
+                this.signal.aborted = true;
+            }
+        };
+    }
+    // Add requestAnimationFrame and related APIs
+    win.requestAnimationFrame = (cb) => {
+        return setTimeout(cb, 0);
+    };
+    win.cancelAnimationFrame = (id) => {
+        clearTimeout(id);
+    };
+    win.requestIdleCallback = (cb) => {
+        return setTimeout(cb, 0);
+    };
+    win.cancelIdleCallback = (id) => {
+        clearTimeout(id);
+    };
+}
+// Only setup mock-doc if we're actually in Node.js (not a real browser)
+// Check for Node.js-specific globals that don't exist in browsers
+const isNodeEnvironment = typeof process !== 'undefined' && process?.versions?.node !== undefined && typeof window === 'undefined';
+let win;
+let doc;
+if (!isNodeEnvironment) {
+    // We're in a real browser, skip mock-doc setup and export real globals
+    win = typeof window !== 'undefined' ? window : undefined;
+    doc = typeof document !== 'undefined' ? document : undefined;
+}
+else {
+    // We're in Node.js, setup mock-doc
+    // Create mock window with URL
+    win = new MockWindow('http://localhost:3000/');
+    doc = win.document;
+    // Apply polyfills
+    applyMockDocPolyfills(win);
+    // Assign to globalThis
+    globalThis.window = win;
+    globalThis.document = doc;
+    globalThis.HTMLElement = win.HTMLElement;
+    globalThis.CustomEvent = win.CustomEvent;
+    globalThis.Event = win.Event;
+    globalThis.Element = win.Element;
+    globalThis.Node = win.Node;
+    globalThis.DocumentFragment = win.DocumentFragment;
+    globalThis.requestAnimationFrame = win.requestAnimationFrame;
+    globalThis.cancelAnimationFrame = win.cancelAnimationFrame;
+}
+// Export the mock window for use in custom setup
+export { win, doc, setupGlobal, teardownGlobal };

package/dist/testing/html-serializer.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared HTML serialization utilities for Stencil components
+ * Used by both matchers and snapshot serializers
+ */
+export interface SerializeOptions {
+    /** Whether to include shadow DOM in serialization */
+    serializeShadowRoot?: boolean;
+    /** Whether to prettify the output */
+    pretty?: boolean;
+    /** Whether to exclude style tags */
+    excludeStyles?: boolean;
+}
+/**
+ * Serialize HTML element to string
+ * Works across mock-doc, jsdom, and happy-dom environments
+ * Uses consistent <mock:shadow-root> format across all environments
+ */
+export declare function serializeHtml(input: HTMLElement | ShadowRoot | DocumentFragment | string, options?: SerializeOptions): string;
+/**
+ * Custom HTML prettifier
+ */
+export declare function prettifyHtml(html: string): string;
+/**
+ * Normalize HTML for comparison by removing extra whitespace
+ */
+export declare function normalizeHtml(html: string): string;
+//# sourceMappingURL=html-serializer.d.ts.map

package/dist/testing/html-serializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/html-serializer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,MAAM,EAC3D,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAWR;AAuFD;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAkDjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD"}

package/dist/testing/html-serializer.js

@@ -0,0 +1,152 @@
+/**
+ * Shared HTML serialization utilities for Stencil components
+ * Used by both matchers and snapshot serializers
+ */
+/**
+ * Serialize HTML element to string
+ * Works across mock-doc, jsdom, and happy-dom environments
+ * Uses consistent <mock:shadow-root> format across all environments
+ */
+export function serializeHtml(input, options = {}) {
+    const { serializeShadowRoot = true, pretty = true, excludeStyles = true } = options;
+    // If input is already a string, just normalize and return
+    if (typeof input === 'string') {
+        return input;
+    }
+    // Use custom serialization for consistent <mock:shadow-root> format across all environments
+    const html = serializeElementWithShadow(input, excludeStyles, serializeShadowRoot);
+    return pretty ? prettifyHtml(html) : html;
+}
+/**
+ * Recursively serialize an element and its shadow DOM for jsdom/happy-dom
+ * Note: Pretty printing is done at the top level only, not during recursion
+ */
+function serializeElementWithShadow(element, excludeStyles, serializeShadowRoot = true) {
+    // Handle DocumentFragment
+    if (element.nodeType === 11) {
+        let html = '';
+        const children = Array.from(element.childNodes);
+        for (const child of children) {
+            if (child.nodeType === 1) {
+                // Element node
+                html += serializeElementWithShadow(child, excludeStyles, serializeShadowRoot);
+            }
+            else if (child.nodeType === 3) {
+                // Text node - include to match mock-doc
+                const text = child.textContent;
+                if (text)
+                    html += text;
+            }
+        }
+        return html;
+    }
+    const elem = element;
+    const tagName = elem.tagName.toLowerCase();
+    // Build opening tag with attributes
+    let html = `<${tagName}`;
+    // Add attributes
+    if (elem.attributes) {
+        for (let i = 0; i < elem.attributes.length; i++) {
+            const attr = elem.attributes[i];
+            html += ` ${attr.name}="${attr.value}"`;
+        }
+    }
+    html += '>';
+    // Add shadow DOM if present and requested
+    if (serializeShadowRoot && 'shadowRoot' in elem && elem.shadowRoot) {
+        // Use mock:shadow-root format to match mock-doc's output
+        html += '<mock:shadow-root>';
+        // Serialize shadow DOM children
+        const shadowChildren = Array.from(elem.shadowRoot.childNodes);
+        for (const child of shadowChildren) {
+            if (child.nodeType === 1) {
+                // Element node - check if it's a style tag
+                const childElem = child;
+                if (excludeStyles && childElem.tagName.toLowerCase() === 'style') {
+                    continue; // Skip style tags
+                }
+                html += serializeElementWithShadow(childElem, excludeStyles, serializeShadowRoot);
+            }
+            else if (child.nodeType === 3) {
+                // Text node - include it (matches mock-doc behavior)
+                const text = child.textContent;
+                if (text)
+                    html += text;
+            }
+        }
+        html += '</mock:shadow-root>';
+    }
+    // Add light DOM children
+    const children = Array.from(elem.childNodes);
+    for (const child of children) {
+        if (child.nodeType === 1) {
+            // Element node
+            html += serializeElementWithShadow(child, excludeStyles, serializeShadowRoot);
+        }
+        else if (child.nodeType === 3) {
+            // Text node - include it to match mock-doc behavior
+            const text = child.textContent;
+            if (text)
+                html += text;
+        }
+    }
+    html += `</${tagName}>`;
+    return html;
+}
+/**
+ * Custom HTML prettifier
+ */
+export function prettifyHtml(html) {
+    const indentSize = 2;
+    let indentLevel = 0;
+    const lines = [];
+    // Normalize whitespace
+    html = html.replace(/\s+/g, ' ').replace(/>\s*</g, '><').trim();
+    // Split on tag boundaries while preserving tags
+    const parts = html.split(/(<[^>]+>)/);
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i].trim();
+        if (!part)
+            continue;
+        if (part.startsWith('<')) {
+            // This is a tag
+            if (part.startsWith('</')) {
+                // Closing tag - decrease indent first
+                indentLevel = Math.max(0, indentLevel - 1);
+                // Check if we should merge with previous line (empty element)
+                const tagName = part.match(/<\/([^>\s]+)/)?.[1];
+                const lastLine = lines[lines.length - 1];
+                if (lastLine && tagName) {
+                    const openTagPattern = new RegExp(`^\\s*<${tagName.replace(/:/g, '\\:')}[^>]*>$`);
+                    if (openTagPattern.test(lastLine)) {
+                        // Empty element - append closing tag to same line
+                        lines[lines.length - 1] = lastLine + part;
+                        continue;
+                    }
+                }
+                lines.push(' '.repeat(indentLevel * indentSize) + part);
+            }
+            else if (part.endsWith('/>')) {
+                // Self-closing tag
+                lines.push(' '.repeat(indentLevel * indentSize) + part);
+            }
+            else {
+                // Opening tag
+                lines.push(' '.repeat(indentLevel * indentSize) + part);
+                // Increase indent for next content
+                indentLevel++;
+            }
+        }
+        else {
+            // Text content - add on its own line with current indentation
+            lines.push(' '.repeat(indentLevel * indentSize) + part);
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Normalize HTML for comparison by removing extra whitespace
+ */
+export function normalizeHtml(html) {
+    return html.replace(/\s+/g, ' ').replace(/>\s+</g, '><').trim();
+}