@stencil/vitest 0.0.5 → 0.1.2

package/dist/testing/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/testing/happy-dom-setup.d.ts.map

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

package/dist/testing/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/testing/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/test-utils/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/testing/jsdom-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsdom-setup.d.ts","sourceRoot":"","sources":["../../src/testing/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/testing/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/test-utils/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/testing/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/testing/mock-doc-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-doc-setup.d.ts","sourceRoot":"","sources":["../../src/testing/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/testing/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/utils/config-loader.d.ts

@@ -0,0 +1,19 @@
+import type { Config as StencilConfig } from '@stencil/core/internal';
+/**
+ * Load Stencil configuration from a file path
+ * Uses jiti to handle TypeScript files in Node.js
+ */
+export declare function loadStencilConfig(configPath: string): Promise<StencilConfig | undefined>;
+/**
+ * Get the source directory from Stencil config
+ */
+export declare function getStencilSrcDir(config?: StencilConfig): string;
+/**
+ * Get all output directories from Stencil config for exclusion
+ */
+export declare function getStencilOutputDirs(config?: StencilConfig): string[];
+/**
+ * Create resolve aliases from Stencil config
+ */
+export declare function getStencilResolveAliases(config?: StencilConfig): Record<string, string>;
+//# sourceMappingURL=config-loader.d.ts.map

package/dist/utils/config-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-loader.d.ts","sourceRoot":"","sources":["../../src/utils/config-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAItE;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC,CAsB9F;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAE/D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,CAyCrE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBvF"}

package/dist/utils/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/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "0.0.5",
+  "version": "0.1.2",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -56,20 +56,6 @@
     "web components",
     "component testing"
   ],
-  "scripts": {
-    "build": "tsc && tsc -p tsconfig.bin.json",
-    "dev": "tsc --watch",
-    "test": "pnpm --filter test-project test",
-    "test:engines": "pnpm installed-check --no-workspaces --ignore-dev",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier --check .",
-    "format:fix": "prettier --write .",
-    "knip": "knip",
-    "quality": "pnpm format && pnpm lint && pnpm knip",
-    "quality:fix": "pnpm format:fix && pnpm lint:fix && pnpm knip",
-    "release": "semantic-release"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -106,7 +92,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "workspace:*"
+    "vitest-environment-stencil": "0.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -130,5 +116,18 @@
   "engines": {
     "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
   },
-  "packageManager": "pnpm@10.26.0"
-}
+  "scripts": {
+    "build": "tsc && tsc -p tsconfig.bin.json",
+    "dev": "tsc --watch",
+    "test": "pnpm --filter test-project test",
+    "test:engines": "pnpm installed-check --no-workspaces --ignore-dev",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "knip": "knip",
+    "quality": "pnpm format && pnpm lint && pnpm knip",
+    "quality:fix": "pnpm format:fix && pnpm lint:fix && pnpm knip",
+    "release": "semantic-release"
+  }
+}