@stencil/vitest 1.12.1 → 1.13.0

package/README.md

@@ -479,7 +479,7 @@ All examples so far have mentioned setting up tests against **pre-built dist out
 1. `vi.mock()` cannot intercept imports made by your components, because the dependency is already bundled away before Vitest gets involved.
 2. Coverage reports will not work out-of-the-box without additional configuration (`sourceMap: true` / [3rd party tools](https://github.com/cenfun/vitest-monocart-coverage)) and even then, may not be accurate.
 
-The experimental `stencilVitestPlugin` solves this by hooking into Vite's transform pipeline: Stencil files are compiled on-the-fly before Vitest imports them; each component file becomes its own entry in Vitest's module graph — and its imports are independently resolvable and mockable.
+The experimental `stencilVitestPlugin` solves this by hooking into Vite's transform pipeline: Stencil files are compiled on-the-fly before Vitest imports them; each component file becomes its own entry in Vitest's module graph - and its imports are independently resolvable and mockable.
 
 ### Setup
 
@@ -497,7 +497,7 @@ export default defineVitestConfig({
         test: {
           name: 'plugin',
           include: ['src/**/*.plugin.spec.{ts,tsx}'],
-          // No dist setup file needed — each component source file registers
+          // No dist setup file needed - each component source file registers
 
           environment: 'stencil',
           // ^^ you can use the plugin with any setup - even browser tests!
@@ -535,7 +535,7 @@ It can then be imported and tested with mocked dependencies:
 import { describe, it, expect, vi } from 'vitest';
 import { render, h } from '@stencil/vitest';
 
-// vi.mock() is hoisted — the mock is in place before any imports resolve
+// vi.mock() is hoisted - the mock is in place before any imports resolve
 vi.mock('../utils/index.js', () => ({
   capitalize: vi.fn((s: string) => `[mocked:${s}]`),
 }));
@@ -561,7 +561,7 @@ it('renders using the mocked utility', async () => {
 In Stencil v4 `transpile()` (used within the plugin) is a single-file compiler. When a component class `extends` a base class that lives in a separate file, `transpile()` cannot follow the import to merge the parent's metadata and will throw an error.
 
 ```tsx
-// ❌ Will fail — base class is in a separate file
+// ❌ Will fail - base class is in a separate file
 import { FormBase } from './form-base.js';
 
 @Component({ tag: 'my-input', shadow: true })

package/dist/__tests__/wizard.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=wizard.spec.d.ts.map

package/dist/__tests__/wizard.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/wizard.spec.ts"],"names":[],"mappings":""}

package/dist/__tests__/wizard.spec.js

@@ -0,0 +1,359 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mkdtempSync, writeFileSync, rmSync, readFileSync, existsSync, mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { wizard } from '../wizard.js';
+function makeTmpDir() {
+    return mkdtempSync(join(tmpdir(), 'wizard-test-'));
+}
+const noCancel = () => false;
+async function callFileTemplates(ctx) {
+    const ft = wizard.generate.fileTemplates;
+    return typeof ft === 'function' ? [...(await ft(ctx))] : [...(ft ?? [])];
+}
+function makeSpinner() {
+    return { start: vi.fn(), stop: vi.fn() };
+}
+/**
+ * Builds a minimal mock WizardContext. `text`, `select`, and `confirm` are
+ * called in the order the wizard invokes them, so their return values must be
+ * queued with `.mockResolvedValueOnce(...)` before calling `run`.
+ */
+function makeInitCtx(rootDir, outputTargets = [], isNewProject = false) {
+    return {
+        config: { rootDir, fsNamespace: 'my-lib', outputTargets },
+        isNewProject,
+        nypm: { addDependency: vi.fn().mockResolvedValue(undefined) },
+        prompts: {
+            intro: vi.fn(),
+            outro: vi.fn(),
+            text: vi.fn(),
+            select: vi.fn(),
+            confirm: vi.fn(),
+            isCancel: noCancel,
+            cancel: vi.fn(),
+            spinner: vi.fn().mockReturnValue(makeSpinner()),
+            log: { warn: vi.fn(), info: vi.fn(), error: vi.fn() },
+        },
+    };
+}
+describe('wizard.generate.fileTemplates', () => {
+    let tmpDir;
+    beforeEach(() => {
+        tmpDir = makeTmpDir();
+    });
+    afterEach(() => {
+        rmSync(tmpDir, { recursive: true, force: true });
+    });
+    it('returns two default templates when no vitest.config.ts exists', async () => {
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        expect(templates).toHaveLength(2);
+        expect(templates[0].extension).toBe('spec.tsx');
+        expect(templates[0].selectedByDefault).toBe(true);
+        expect(templates[1].extension).toBe('browser.spec.ts');
+        expect(templates[1].selectedByDefault).toBe(false);
+    });
+    it('default spec template includes a component import', async () => {
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        const content = templates[0].template('my-button');
+        expect(content).toContain("import './my-button'");
+        expect(content).toContain("describe('my-button'");
+        expect(content).toContain('<my-button />');
+    });
+    it('default browser template has no component import', async () => {
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        const content = templates[1].template('my-button');
+        expect(content).not.toContain("import './my-button'");
+        expect(content).toContain("describe('my-button'");
+    });
+    it('passes subdirectory to templates', async () => {
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue('__tests__'), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        expect(templates[0].subdirectory).toBe('__tests__');
+    });
+    it('uses project-based templates when vitest.config.ts has a node project', async () => {
+        writeFileSync(join(tmpDir, 'vitest.config.ts'), `export default {
+  test: {
+    projects: [
+      {
+        plugins: [{}],
+        test: { name: 'unit', include: ['**/*.spec.{ts,tsx}'] },
+      },
+    ],
+  },
+};\n`);
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        expect(templates).toHaveLength(1);
+        expect(templates[0].extension).toBe('spec.tsx');
+        expect(templates[0].label).toContain('Unit');
+        expect(templates[0].selectedByDefault).toBe(true);
+    });
+    it('marks browser project templates as not selected by default', async () => {
+        writeFileSync(join(tmpDir, 'vitest.config.ts'), `export default {
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'browser',
+          include: ['**/*.browser.spec.{ts,tsx}'],
+          browser: { enabled: true },
+        },
+      },
+    ],
+  },
+};\n`);
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        expect(templates).toHaveLength(1);
+        expect(templates[0].selectedByDefault).toBe(false);
+    });
+});
+describe('wizard.init.run', () => {
+    let tmpDir;
+    beforeEach(() => {
+        tmpDir = makeTmpDir();
+        writeFileSync(join(tmpDir, 'package.json'), JSON.stringify({ name: 'test-lib', scripts: {} }, null, 2) + '\n');
+    });
+    afterEach(() => {
+        rmSync(tmpDir, { recursive: true, force: true });
+    });
+    it('cancels when existing config exists and user declines overwrite', async () => {
+        writeFileSync(join(tmpDir, 'vitest.config.ts'), 'export default {};\n');
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.confirm.mockResolvedValueOnce(false); // decline overwrite
+        await wizard.init.run(ctx);
+        expect(ctx.prompts.cancel).toHaveBeenCalledWith('Skipping Vitest setup - existing config kept.');
+        expect(readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8')).toBe('export default {};\n');
+    });
+    it('proceeds when existing config exists and user accepts overwrite', async () => {
+        writeFileSync(join(tmpDir, 'vitest.config.ts'), 'export default {};\n');
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.confirm
+            .mockResolvedValueOnce(true) // accept overwrite
+            .mockResolvedValueOnce(false); // don't add another
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        await wizard.init.run(ctx);
+        expect(ctx.prompts.cancel).not.toHaveBeenCalled();
+        const configContent = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(configContent).toContain("name: 'unit'");
+    });
+    it('creates vitest.config.ts with stencilVitestPlugin for a node+plugin project', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(config).toContain('stencilVitestPlugin()');
+        expect(config).toContain("name: 'unit'");
+        expect(config).toContain("include: ['**/*.spec.{ts,tsx}']");
+        expect(config).not.toContain('setupFiles');
+    });
+    it('creates vitest.config.ts without plugin for a node+full-build project', async () => {
+        const ctx = makeInitCtx(tmpDir, [{ type: 'loader-bundle', dir: join(tmpDir, 'dist/loader-bundle') }]);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('node')
+            .mockResolvedValueOnce('happy-dom')
+            .mockResolvedValueOnce('full-build');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(config).not.toContain('stencilVitestPlugin');
+        expect(config).toContain("setupFiles: ['./vitest-setup.ts']");
+        expect(config).toContain("domEnvironment: 'happy-dom'");
+    });
+    it('creates vitest-setup.ts with loader import for a full-build+loader-bundle project', async () => {
+        const ctx = makeInitCtx(tmpDir, [{ type: 'loader-bundle', dir: join(tmpDir, 'dist/loader-bundle') }]);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('node')
+            .mockResolvedValueOnce('mock-doc')
+            .mockResolvedValueOnce('full-build');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(existsSync(join(tmpDir, 'vitest-setup.ts'))).toBe(true);
+        const setup = readFileSync(join(tmpDir, 'vitest-setup.ts'), 'utf8');
+        expect(setup).toContain('my-lib/my-lib.js');
+    });
+    it('does not overwrite an existing vitest-setup.ts', async () => {
+        const originalSetup = "import './existing-loader';\n";
+        writeFileSync(join(tmpDir, 'vitest-setup.ts'), originalSetup);
+        const ctx = makeInitCtx(tmpDir, [{ type: 'loader-bundle', dir: join(tmpDir, 'dist/loader-bundle') }]);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('node')
+            .mockResolvedValueOnce('mock-doc')
+            .mockResolvedValueOnce('full-build');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(readFileSync(join(tmpDir, 'vitest-setup.ts'), 'utf8')).toBe(originalSetup);
+    });
+    it('installs jsdom for a jsdom node project', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('jsdom').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', 'jsdom']), expect.objectContaining({ dev: true }));
+    });
+    it('installs playwright packages for a browser+playwright project', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('browser').mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('browser').mockResolvedValueOnce('playwright');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', '@vitest/browser', '@vitest/browser-playwright', 'playwright']), expect.objectContaining({ dev: true }));
+    });
+    it('installs wdio packages for a browser+webdriverio project', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('browser').mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('browser').mockResolvedValueOnce('wdio');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', '@vitest/browser', '@vitest/browser-webdriverio']), expect.objectContaining({ dev: true }));
+        expect(ctx.nypm.addDependency).not.toHaveBeenCalledWith(expect.arrayContaining(['playwright']), expect.anything());
+    });
+    it('writes test and test:<name> scripts to package.json', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const pkg = JSON.parse(readFileSync(join(tmpDir, 'package.json'), 'utf8'));
+        expect(pkg.scripts.test).toBe('vitest run');
+        expect(pkg.scripts['test:unit']).toBe('vitest run --project unit');
+    });
+    it('uses stencil-test script for a full-build project', async () => {
+        const ctx = makeInitCtx(tmpDir, [{ type: 'loader-bundle', dir: join(tmpDir, 'dist/loader-bundle') }]);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('node')
+            .mockResolvedValueOnce('mock-doc')
+            .mockResolvedValueOnce('full-build');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const pkg = JSON.parse(readFileSync(join(tmpDir, 'package.json'), 'utf8'));
+        expect(pkg.scripts.test).toBe('stencil-test');
+        expect(pkg.scripts['test:unit']).toBe('stencil-test --project unit');
+    });
+    it('does not overwrite existing package.json test scripts', async () => {
+        writeFileSync(join(tmpDir, 'package.json'), JSON.stringify({ name: 'test-lib', scripts: { test: 'my-custom-test' } }, null, 2) + '\n');
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const pkg = JSON.parse(readFileSync(join(tmpDir, 'package.json'), 'utf8'));
+        expect(pkg.scripts.test).toBe('my-custom-test');
+    });
+    it('generates example spec files for components when isNewProject is true', async () => {
+        const componentDir = join(tmpDir, 'src', 'components', 'my-button');
+        mkdirSync(componentDir, { recursive: true });
+        writeFileSync(join(componentDir, 'my-button.tsx'), `import { Component, h } from '@stencil/core';
+@Component({ tag: 'my-button', shadow: true })
+export class MyButton { render() { return <button />; } }
+`);
+        const ctx = makeInitCtx(tmpDir, [], true);
+        ctx.prompts.text
+            .mockResolvedValueOnce('unit') // project name
+            .mockResolvedValueOnce('**/*.spec.{ts,tsx}') // pattern
+            .mockResolvedValueOnce(''); // subdirectory (empty = co-locate)
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const specFile = join(componentDir, 'my-button.spec.tsx');
+        expect(existsSync(specFile)).toBe(true);
+        const spec = readFileSync(specFile, 'utf8');
+        expect(spec).toContain("describe('my-button'");
+        expect(spec).toContain('<my-button />');
+    });
+    it('generates example spec files into a subdirectory for new projects', async () => {
+        const componentDir = join(tmpDir, 'src', 'components', 'my-button');
+        mkdirSync(componentDir, { recursive: true });
+        writeFileSync(join(componentDir, 'my-button.tsx'), `import { Component, h } from '@stencil/core';
+@Component({ tag: 'my-button', shadow: true })
+export class MyButton { render() { return <button />; } }
+`);
+        const ctx = makeInitCtx(tmpDir, [], true);
+        ctx.prompts.text
+            .mockResolvedValueOnce('unit')
+            .mockResolvedValueOnce('**/*.spec.{ts,tsx}')
+            .mockResolvedValueOnce('__tests__');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const specFile = join(componentDir, '__tests__', 'my-button.spec.tsx');
+        expect(existsSync(specFile)).toBe(true);
+    });
+    it('skips example test generation when isNewProject is false', async () => {
+        const componentDir = join(tmpDir, 'src', 'components', 'my-button');
+        mkdirSync(componentDir, { recursive: true });
+        writeFileSync(join(componentDir, 'my-button.tsx'), `import { Component, h } from '@stencil/core';
+@Component({ tag: 'my-button', shadow: true })
+export class MyButton { render() { return <button />; } }
+`);
+        const ctx = makeInitCtx(tmpDir, [], false);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(existsSync(join(componentDir, 'my-button.spec.tsx'))).toBe(false);
+    });
+    it('includes stencilConfig option when stencil.config.ts is present', async () => {
+        writeFileSync(join(tmpDir, 'stencil.config.ts'), 'export const config = {};\n');
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
+        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(config).toContain("stencilConfig: './stencil.config.ts'");
+    });
+    it('generates correct config for two projects', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text
+            .mockResolvedValueOnce('unit')
+            .mockResolvedValueOnce('**/*.spec.{ts,tsx}')
+            .mockResolvedValueOnce('browser')
+            .mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('node')
+            .mockResolvedValueOnce('mock-doc')
+            .mockResolvedValueOnce('plugin')
+            .mockResolvedValueOnce('browser')
+            .mockResolvedValueOnce('playwright');
+        ctx.prompts.confirm
+            .mockResolvedValueOnce(true) // add another
+            .mockResolvedValueOnce(false); // stop
+        await wizard.init.run(ctx);
+        const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(config).toContain("name: 'unit'");
+        expect(config).toContain("name: 'browser'");
+        expect(config).toContain('stencilVitestPlugin()');
+        expect(config).toContain('playwright()');
+    });
+});

package/dist/config.d.ts

@@ -1,5 +1,5 @@
 import { type ViteUserConfig } from 'vitest/config';
-import type { Config as StencilConfig } from '@stencil/core/internal';
+import type { Config as StencilConfig } from '@stencil/core';
 /**
  * Define a Vitest configuration for Stencil component testing
  *

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAQlE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,GAAE,cAAc,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CAAO,GACvE,OAAO,CAAC,cAAc,CAAC,CAqBzB"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAQlE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAM7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,GAAE,cAAc,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CAAO,GACvE,OAAO,CAAC,cAAc,CAAC,CAqBzB"}

package/dist/config.js

@@ -1,3 +1,5 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitest/config';
 import { loadStencilConfig, getStencilSrcDir, getStencilOutputDirs, getStencilResolveAliases, getStencilHydratedFlag, } from './setup/config-loader.js';
@@ -118,6 +120,30 @@ function generateCoverageExcludes(testIncludes, srcDir) {
     }
     return excludes;
 }
+/**
+ * Read JSX options from the nearest tsconfig.json.
+ * Returns 'automatic' mode when the project uses `"jsx": "react-jsx"` so that
+ * Vite's transformer honours jsxImportSource instead of forcing classic `h`.
+ */
+function readTsConfigJsxOptions(cwd) {
+    const tsconfigPath = join(cwd, 'tsconfig.json');
+    if (!existsSync(tsconfigPath))
+        return { mode: 'classic' };
+    try {
+        // tsconfig is JSONC — strip line and block comments before parsing
+        const raw = readFileSync(tsconfigPath, 'utf-8');
+        const stripped = raw.replace(/\/\/[^\n]*/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+        const tsconfig = JSON.parse(stripped);
+        const jsx = tsconfig?.compilerOptions?.jsx;
+        if (jsx === 'react-jsx' || jsx === 'react-jsxdev') {
+            return { mode: 'automatic', importSource: tsconfig?.compilerOptions?.jsxImportSource };
+        }
+    }
+    catch {
+        // ignore unreadable / malformed tsconfig
+    }
+    return { mode: 'classic' };
+}
 /**
  * Apply Stencil-specific defaults to Vitest config
  */
@@ -142,24 +168,29 @@ function applyStencilDefaults(config, stencilConfig) {
             ...result.define,
         };
     }
-    // Add JSX config for the active transformer
-    // Vite 7+ uses oxc by default, older versions use esbuild
-    if (result.oxc) {
-        // oxc is explicitly configured - set JSX options on it
+    // Add JSX config for the active transformer, honouring the project's tsconfig.
+    // Vite 7+ uses oxc by default, older versions use esbuild.
+    const jsxOpts = readTsConfigJsxOptions(process.cwd());
+    // oxc is Vite 8+'s default transformer; esbuild is the fallback for older Vite.
+    // Set oxc jsx unless the user explicitly disabled it (`oxc: false`), in which
+    // case esbuild is still active and needs the jsx settings instead.
+    const oxcDisabled = result.oxc === false;
+    if (!oxcDisabled) {
+        if (!result.oxc) {
+            result.oxc = {};
+        }
         if (!result.oxc.jsx) {
-            result.oxc.jsx = {
-                runtime: 'classic',
-                pragma: 'h',
-                pragmaFrag: 'Fragment',
-            };
+            result.oxc.jsx =
+                jsxOpts.mode === 'automatic'
+                    ? { runtime: 'automatic', importSource: jsxOpts.importSource }
+                    : { runtime: 'classic', pragma: 'h', pragmaFrag: 'Fragment' };
         }
     }
     else if (!result.esbuild) {
-        // No oxc config, set esbuild JSX options (for older Vite versions)
-        result.esbuild = {
-            jsxFactory: 'h',
-            jsxFragment: 'Fragment',
-        };
+        result.esbuild =
+            jsxOpts.mode === 'automatic'
+                ? { jsx: 'automatic', jsxImportSource: jsxOpts.importSource }
+                : { jsxFactory: 'h', jsxFragment: 'Fragment' };
     }
     // Add resolve aliases from Stencil config if not present
     if (!result.resolve) {

package/dist/environments/env/happy-dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"happy-dom.d.ts","sourceRoot":"","sources":["../../../src/environments/env/happy-dom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;wBAEtC,kBAAkB;AAAlC,wBAgBE"}
+{"version":3,"file":"happy-dom.d.ts","sourceRoot":"","sources":["../../../src/environments/env/happy-dom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;wBAEtC,kBAAkB;AAAlC,wBAiDE"}

package/dist/environments/env/happy-dom.js

@@ -6,6 +6,33 @@ export default (async function (_global, options) {
         ...options.happyDom,
     };
     const window = new (GlobalWindow || Window)(happyDomOptions);
+    // happy-dom does not implement the Custom Element upgrade algorithm.
+    // When the lazy-loader pattern is used (elements created before customElements.define
+    // is called), browsers and jsdom automatically upgrade those elements by changing their
+    // prototype and firing connectedCallback. Patch define() to emulate that step.
+    const origDefine = window.customElements.define.bind(window.customElements);
+    window.customElements.define = function (name, elementClass, options) {
+        console.log(`[happy-dom-upgrade] customElements.define called for <${name}>`);
+        origDefine(name, elementClass, options);
+        const existing = Array.from(window.document.querySelectorAll(name));
+        console.log(`[happy-dom-upgrade] found ${existing.length} existing <${name}> element(s) to upgrade`);
+        for (const el of existing) {
+            console.log(`[happy-dom-upgrade] upgrading <${name}>: isConnected=${el.isConnected}, has __s_ghr=${!!el.__s_ghr}, proto=${Object.getPrototypeOf(el)?.constructor?.name}`);
+            if (el.__s_ghr) {
+                console.log(`[happy-dom-upgrade] skipping — already initialised by Stencil`);
+                continue;
+            }
+            Object.setPrototypeOf(el, elementClass.prototype);
+            console.log(`[happy-dom-upgrade] prototype set, has __registerHost=${typeof el.__registerHost === 'function'}, has __attachShadow=${typeof el.__attachShadow === 'function'}, has connectedCallback=${typeof el.connectedCallback === 'function'}`);
+            if (typeof el.__registerHost === 'function')
+                el.__registerHost();
+            if (typeof el.__attachShadow === 'function')
+                el.__attachShadow();
+            if (el.isConnected && typeof el.connectedCallback === 'function')
+                el.connectedCallback();
+            console.log(`[happy-dom-upgrade] done upgrading <${name}>`);
+        }
+    };
     return {
         window,
         teardown() {

package/dist/plugin.d.ts

@@ -5,7 +5,7 @@ import type { Plugin } from 'vitest/config';
  *
  * The compiled output uses `componentExport: 'customelement'`, which appends a
  * `customElements.define()` call at the end of the transformed file. The component
- * registers itself the moment the module is imported — no dist loader or setup file
+ * registers itself the moment the module is imported - no dist loader or setup file
  * required. Works with `@stencil/core` v4 and v5.
  *
  * @example
@@ -23,7 +23,7 @@ import type { Plugin } from 'vitest/config';
  *           name: 'stencil',
  *           environment: 'stencil',
  *           include: ['**\/*.spec.tsx'],
- *           // No dist loader needed — import components from source directly
+ *           // No dist loader needed - import components from source directly
  *         },
  *       },
  *     ],

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAgGxE"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAkC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAkGxE"}

package/dist/plugin.js

@@ -1,13 +1,45 @@
 import { transpile } from '@stencil/core/compiler';
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+// TypeScript JsxEmit enum values — stable across versions
+const JSX_EMIT = {
+    react: 2,
+    'react-jsx': 4,
+    'react-jsxdev': 5,
+    preserve: 1,
+    'react-native': 3,
+};
+let cachedJsxOpts;
+function readJsxOptsFromTsConfig(cwd) {
+    if (cachedJsxOpts !== undefined)
+        return cachedJsxOpts;
+    const tsconfigPath = join(cwd, 'tsconfig.json');
+    if (!existsSync(tsconfigPath))
+        return (cachedJsxOpts = {});
+    try {
+        const raw = readFileSync(tsconfigPath, 'utf-8');
+        const stripped = raw.replace(/\/\/[^\n]*/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+        const tsconfig = JSON.parse(stripped);
+        const jsxStr = tsconfig?.compilerOptions?.jsx?.toLowerCase();
+        if (jsxStr && jsxStr in JSX_EMIT) {
+            return (cachedJsxOpts = {
+                jsx: JSX_EMIT[jsxStr],
+                jsxImportSource: tsconfig?.compilerOptions?.jsxImportSource,
+            });
+        }
+    }
+    catch {
+        // ignore unreadable / malformed tsconfig
+    }
+    return (cachedJsxOpts = {});
+}
 /**
  * A Vite/Vitest plugin that transforms Stencil component source files (.tsx) on-the-fly,
  * enabling module mocking and direct source imports during tests.
  *
  * The compiled output uses `componentExport: 'customelement'`, which appends a
  * `customElements.define()` call at the end of the transformed file. The component
- * registers itself the moment the module is imported — no dist loader or setup file
+ * registers itself the moment the module is imported - no dist loader or setup file
  * required. Works with `@stencil/core` v4 and v5.
  *
  * @example
@@ -25,7 +57,7 @@ import { dirname, resolve } from 'node:path';
  *           name: 'stencil',
  *           environment: 'stencil',
  *           include: ['**\/*.spec.tsx'],
- *           // No dist loader needed — import components from source directly
+ *           // No dist loader needed - import components from source directly
  *         },
  *       },
  *     ],
@@ -88,10 +120,11 @@ export function stencilVitestPlugin(opts = {}) {
                 return null;
             }
             try {
+                const jsxOpts = readJsxOptsFromTsConfig(process.cwd());
                 const result = await transpile(code, {
                     file: id,
                     // 'customelement' appends a customElements.define() call so the component
-                    // self-registers the moment this module is imported — no loader needed.
+                    // self-registers the moment this module is imported - no loader needed.
                     componentExport: 'customelement',
                     componentMetadata: 'runtimestatic',
                     currentDirectory: process.cwd(),
@@ -101,8 +134,9 @@ export function stencilVitestPlugin(opts = {}) {
                     style: opts.css ? 'static' : null,
                     styleImportData: opts.css ? 'queryparams' : null,
                     target: 'es2017',
-                    // Don't rewrite import paths — let Vite handle resolution via aliases
+                    // Don't rewrite import paths - let Vite handle resolution via aliases
                     transformAliasedImportPaths: false,
+                    ...jsxOpts,
                 });
                 const errors = result.diagnostics?.filter((d) => d.level === 'error') ?? [];
                 if (errors.length > 0) {

package/dist/wizard.d.ts

@@ -0,0 +1,3 @@
+import type { StencilWizardPlugin } from '@stencil/cli';
+export declare const wizard: StencilWizardPlugin;
+//# sourceMappingURL=wizard.d.ts.map

package/dist/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../src/wizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkC,mBAAmB,EAAiB,MAAM,cAAc,CAAC;AAqcvG,eAAO,MAAM,MAAM,EAAE,mBAkIpB,CAAC"}

package/dist/wizard.js

@@ -0,0 +1,488 @@
+import { access, mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { join, relative } from 'node:path';
+/** Reads the existing vitest.config.ts (if any) and extracts project name/pattern/type metadata. */
+async function loadVitestProjects(rootDir) {
+    const configPath = join(rootDir, 'vitest.config.ts');
+    if (!(await fileExists(configPath)))
+        return [];
+    try {
+        const { createJiti } = await import('jiti');
+        const jiti = createJiti(rootDir, { interopDefault: true, moduleCache: false });
+        const mod = (await jiti.import(configPath));
+        const config = await (mod?.default ?? mod);
+        const projects = config?.test?.projects ?? [];
+        return projects.flatMap((p) => {
+            const test = p?.test ?? {};
+            const name = test.name;
+            const pattern = test.include?.[0];
+            if (!name || !pattern)
+                return [];
+            if (test.browser?.enabled === true) {
+                return [{ type: 'browser', name, pattern }];
+            }
+            const loadMethod = Array.isArray(p.plugins) && p.plugins.length > 0 ? 'plugin' : 'full-build';
+            return [{ type: 'node', name, pattern, loadMethod }];
+        });
+    }
+    catch {
+        return [];
+    }
+}
+async function fileExists(path) {
+    try {
+        await access(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Returns the relative import path for the component loader to use in vitest-setup.ts.
+ * Prefers loader-bundle (works in dev + prod); falls back to standalone's dev-mode loader.
+ * Returns null if neither output target is configured or the standalone loader is disabled.
+ */
+function resolveLoaderImport(config) {
+    const ns = config.fsNamespace;
+    const outputs = config.outputTargets;
+    const loaderBundle = outputs.find((o) => o.type === 'loader-bundle');
+    if (loaderBundle) {
+        // buildDir resolves to dir by default; the browser CDN build lands at {buildDir}/{namespace}/
+        const buildDir = loaderBundle.buildDir ?? loaderBundle.dir ?? 'dist/loader-bundle';
+        return `./${relative(config.rootDir, buildDir)}/${ns}/${ns}.js`;
+    }
+    const standalone = outputs.find((o) => o.type === 'standalone');
+    if (standalone) {
+        if (standalone.autoLoader === false)
+            return null;
+        const dir = standalone.dir ?? 'dist/standalone';
+        const fileName = typeof standalone.autoLoader === 'object' ? (standalone.autoLoader.fileName ?? 'loader') : 'loader';
+        return `./${relative(config.rootDir, dir)}/${fileName}.js`;
+    }
+    return null;
+}
+/** Checks which distribution output targets are present, to drive the load-method prompt. */
+function detectOutputTargets(config) {
+    const outputs = config.outputTargets;
+    const hasLoaderBundle = outputs.some((o) => o.type === 'loader-bundle' || o.type === 'dist');
+    const hasStandalone = outputs.some((o) => o.type === 'standalone' || o.type === 'dist-custom-elements');
+    if (!hasLoaderBundle && !hasStandalone)
+        return { hasLoaderBundle: true, hasStandalone: false };
+    return { hasLoaderBundle, hasStandalone };
+}
+function defaultPattern(name) {
+    if (name === 'unit')
+        return '**/*.spec.{ts,tsx}';
+    return `**/*.${name}.spec.{ts,tsx}`;
+}
+/** Runs the interactive prompts for a single Vitest project and returns its configuration. */
+async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askSubdirectory) {
+    const { text, select, isCancel, cancel, log } = prompts;
+    const rawName = await text({
+        message: 'Project name? (label for this group of tests - e.g. unit, browser, jsdom)',
+        placeholder: isFirst ? 'unit' : 'e.g. unit, browser, jsdom',
+        defaultValue: isFirst ? 'unit' : '',
+        validate: (v) => (!v?.trim() && !isFirst ? 'Name is required' : undefined),
+    });
+    if (isCancel(rawName)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    const name = rawName;
+    const projectType = await select({
+        message: 'Node-based or browser-based?',
+        options: [
+            { value: 'node', label: 'Node', hint: 'unit / component tests - mock or emulated DOM' },
+            { value: 'browser', label: 'Browser', hint: 'real Chromium - interactions, screenshots, visual' },
+        ],
+    });
+    if (isCancel(projectType)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    const patternDefault = defaultPattern(name);
+    const rawPattern = await text({
+        message: 'Test file pattern?',
+        placeholder: patternDefault,
+        defaultValue: patternDefault,
+    });
+    if (isCancel(rawPattern)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    const pattern = rawPattern;
+    if (usedPatterns.has(pattern)) {
+        log.warn(`"${pattern}" is already claimed by another project - files will run in both.`);
+    }
+    usedPatterns.add(pattern);
+    let subdirectory;
+    if (askSubdirectory) {
+        const rawSubdir = await text({
+            message: 'Test file subdirectory? (leave blank to co-locate with component)',
+            placeholder: 'e.g. __tests__',
+            defaultValue: '',
+        });
+        if (isCancel(rawSubdir)) {
+            cancel('Setup cancelled.');
+            process.exit(0);
+        }
+        subdirectory = rawSubdir.trim() || undefined;
+    }
+    if (projectType === 'browser') {
+        const provider = await select({
+            message: 'Browser provider?',
+            options: [
+                { value: 'playwright', label: 'Playwright', hint: 'chromium / firefox / webkit' },
+                { value: 'wdio', label: 'WebdriverIO', hint: 'selenium-compatible, more browser variety' },
+            ],
+        });
+        if (isCancel(provider)) {
+            cancel('Setup cancelled.');
+            process.exit(0);
+        }
+        return { type: 'browser', name, pattern, subdirectory, provider: provider };
+    }
+    // Node-based
+    const env = await select({
+        message: 'DOM environment?',
+        options: [
+            { value: 'mock-doc', label: 'mock-doc', hint: 'Fastest - Stencil-native' },
+            { value: 'jsdom', label: 'jsdom', hint: 'Full DOM emulation' },
+            { value: 'happy-dom', label: 'happy-dom', hint: 'Faster than jsdom' },
+        ],
+    });
+    if (isCancel(env)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    const loadMethod = await select({
+        message: 'How should components be loaded?',
+        options: [
+            { value: 'plugin', label: 'Plugin (source)', hint: 'compile on-the-fly - module mocking, accurate coverage' },
+            { value: 'full-build', label: 'Full build (dist)', hint: 'test the actual output - no mocking, no coverage' },
+        ],
+    });
+    if (isCancel(loadMethod)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    let outputTarget = null;
+    if (loadMethod === 'full-build') {
+        if (outputTargets.hasLoaderBundle && outputTargets.hasStandalone) {
+            const ot = await select({
+                message: 'Which output to load from?',
+                options: [
+                    { value: 'loader-bundle', label: 'loader-bundle', hint: 'lazy loader path - defineCustomElements()' },
+                    { value: 'standalone', label: 'standalone', hint: 'direct imports - components auto-register on import' },
+                ],
+            });
+            if (isCancel(ot)) {
+                cancel('Setup cancelled.');
+                process.exit(0);
+            }
+            outputTarget = ot;
+        }
+        else {
+            outputTarget = outputTargets.hasStandalone ? 'standalone' : 'loader-bundle';
+        }
+    }
+    return {
+        type: 'node',
+        name,
+        pattern,
+        subdirectory,
+        env: env,
+        loadMethod: loadMethod,
+        outputTarget,
+    };
+}
+/** Returns the set of npm packages that need to be installed for the chosen projects. */
+function collectDeps(projects) {
+    const deps = new Set(['vitest']);
+    for (const p of projects) {
+        if (p.type === 'node') {
+            if (p.env === 'jsdom')
+                deps.add('jsdom');
+            if (p.env === 'happy-dom')
+                deps.add('happy-dom');
+        }
+        else {
+            deps.add('@vitest/browser');
+            if (p.provider === 'playwright') {
+                deps.add('@vitest/browser-playwright');
+                deps.add('playwright');
+            }
+            else {
+                deps.add('@vitest/browser-webdriverio');
+            }
+        }
+    }
+    return [...deps];
+}
+/** Renders a single Vitest workspace project block for vitest.config.ts. */
+function generateProjectBlock(project, excludePatterns) {
+    const excludeLine = excludePatterns.length > 0 ? `\n          exclude: [${excludePatterns.map((p) => `'${p}'`).join(', ')}],` : '';
+    if (project.type === 'browser') {
+        const providerExpr = project.provider === 'playwright' ? 'playwright()' : 'webdriverio()';
+        return `      {
+        test: {
+          name: '${project.name}',
+          include: ['${project.pattern}'],${excludeLine}
+          setupFiles: ['./vitest-setup.ts'],
+          browser: {
+            enabled: true,
+            provider: ${providerExpr},
+            headless: true,
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      }`;
+    }
+    const envOptions = project.env !== 'mock-doc'
+        ? `
+          environmentOptions: {
+            stencil: { domEnvironment: '${project.env}' },
+          },`
+        : '';
+    const pluginsLine = project.loadMethod === 'plugin' ? '\n        plugins: [stencilVitestPlugin()],' : '';
+    const setupLine = project.loadMethod === 'full-build' ? `\n          setupFiles: ['./vitest-setup.ts'],` : '';
+    return `      {${pluginsLine}
+        test: {
+          name: '${project.name}',
+          environment: 'stencil',${envOptions}${setupLine}
+          include: ['${project.pattern}'],${excludeLine}
+        },
+      }`;
+}
+/** Generates the full vitest.config.ts file content for the chosen set of projects. */
+function generateVitestConfig(projects, hasStencilConfig) {
+    const needsPlugin = projects.some((p) => p.type === 'node' && p.loadMethod === 'plugin');
+    const needsPlaywright = projects.some((p) => p.type === 'browser' && p.provider === 'playwright');
+    const needsWdio = projects.some((p) => p.type === 'browser' && p.provider === 'wdio');
+    const imports = [
+        `import { defineVitestConfig } from '@stencil/vitest/config';`,
+        needsPlugin ? `import { stencilVitestPlugin } from '@stencil/vitest/plugin';` : null,
+        needsPlaywright ? `import { playwright } from '@vitest/browser-playwright';` : null,
+        needsWdio ? `import { webdriverio } from '@vitest/browser-webdriverio';` : null,
+    ]
+        .filter(Boolean)
+        .join('\n');
+    const stencilConfigOption = hasStencilConfig ? `\n  stencilConfig: './stencil.config.ts',` : '';
+    const projectBlocks = projects
+        .map((project, i) => {
+        const currentBase = parsePattern(project.pattern)?.replace(/[^.]+$/, '');
+        const excludePatterns = projects
+            .filter((_, j) => j !== i)
+            .filter((other) => {
+            if (!currentBase)
+                return false;
+            const otherBase = parsePattern(other.pattern)?.replace(/[^.]+$/, '');
+            return !!otherBase && otherBase.endsWith(currentBase);
+        })
+            .map((p) => p.pattern);
+        return generateProjectBlock(project, excludePatterns);
+    })
+        .join(',\n');
+    return `${imports}
+
+export default defineVitestConfig({${stencilConfigOption}
+  test: {
+    projects: [
+${projectBlocks},
+    ],
+  },
+});
+`;
+}
+function specTemplate(tagName, importComponent = false, subdirectory) {
+    const importPath = subdirectory ? `'../${tagName}'` : `'./${tagName}'`;
+    const componentImport = importComponent ? `import ${importPath};\n` : '';
+    return `import { describe, it, expect, render } from '@stencil/vitest';
+${componentImport}
+describe('${tagName}', () => {
+  it('renders', async () => {
+    const { root } = await render(<${tagName} />);
+    expect(root).toBeDefined();
+  });
+});
+`;
+}
+// Returns the file suffix for a pattern like **/*.browser.spec.{ts,tsx},
+// preferring tsx when available. Returns null for patterns that can't be
+// reduced to a simple **/* glob (e.g. tests/**/*.spec.ts).
+function parsePattern(pattern) {
+    const match = pattern.match(/^\*\*\/\*([^{*]+)(?:\{([^}]+)\})?$/);
+    if (!match)
+        return null;
+    const base = match[1];
+    const exts = match[2];
+    if (!exts)
+        return base;
+    const extList = exts.split(',').map((e) => e.trim());
+    return base + (extList.includes('tsx') ? 'tsx' : extList[0]);
+}
+/** Writes a starter spec file alongside each existing component for new projects. */
+async function generateExampleTests(rootDir, projects) {
+    const componentsDir = join(rootDir, 'src', 'components');
+    const entries = await readdir(componentsDir, { withFileTypes: true }).catch(() => []);
+    for (const entry of entries) {
+        if (!entry.isDirectory())
+            continue;
+        const componentFile = join(componentsDir, entry.name, `${entry.name}.tsx`);
+        if (!(await fileExists(componentFile)))
+            continue;
+        const source = await readFile(componentFile, 'utf8');
+        if (!source.includes('@Component'))
+            continue;
+        const tagMatch = source.match(/tag:\s*['"]([^'"]+)['"]/);
+        const tagName = tagMatch?.[1] ?? entry.name;
+        for (const project of projects) {
+            const suffix = parsePattern(project.pattern);
+            if (!suffix)
+                continue;
+            const dir = project.subdirectory
+                ? join(componentsDir, entry.name, project.subdirectory)
+                : join(componentsDir, entry.name);
+            const specFile = join(dir, `${tagName}${suffix}`);
+            if (await fileExists(specFile))
+                continue;
+            if (project.subdirectory)
+                await mkdir(dir, { recursive: true });
+            const content = project.type === 'browser'
+                ? specTemplate(tagName, false, project.subdirectory)
+                : specTemplate(tagName, project.loadMethod === 'plugin', project.subdirectory);
+            await writeFile(specFile, content, 'utf8');
+        }
+    }
+}
+function needsBuild(project) {
+    return project.type === 'browser' || (project.type === 'node' && project.loadMethod === 'full-build');
+}
+/** Adds `test` and `test:<name>` scripts to package.json if they don't already exist. */
+async function updatePackageJsonScripts(rootDir, projects) {
+    const pkgPath = join(rootDir, 'package.json');
+    const content = await readFile(pkgPath, 'utf8');
+    const pkg = JSON.parse(content);
+    pkg['scripts'] ??= {};
+    const anyFullBuild = projects.some(needsBuild);
+    if (!pkg['scripts']['test'])
+        pkg['scripts']['test'] = anyFullBuild ? 'stencil-test' : 'vitest run';
+    for (const p of projects) {
+        const key = `test:${p.name}`;
+        const cmd = needsBuild(p) ? `stencil-test --project ${p.name}` : `vitest run --project ${p.name}`;
+        if (!pkg['scripts'][key])
+            pkg['scripts'][key] = cmd;
+    }
+    await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+}
+export const wizard = {
+    init: {
+        id: '@stencil/vitest',
+        displayName: 'Vitest',
+        description: 'Unit + component testing',
+        async run({ config, isNewProject, prompts, nypm }) {
+            const { intro, outro, confirm, isCancel, cancel, spinner } = prompts;
+            const rootDir = config.rootDir;
+            intro('Vitest - unit + component testing for Stencil');
+            const vitestConfigPath = join(rootDir, 'vitest.config.ts');
+            if (!isNewProject && (await fileExists(vitestConfigPath))) {
+                const overwrite = await confirm({
+                    message: 'vitest.config.ts already exists. Overwrite it?',
+                    initialValue: false,
+                });
+                if (isCancel(overwrite) || !overwrite) {
+                    cancel('Skipping Vitest setup - existing config kept.');
+                    return;
+                }
+            }
+            const outputTargets = detectOutputTargets(config);
+            const hasStencilConfig = await fileExists(join(rootDir, 'stencil.config.ts'));
+            const projects = [];
+            const usedPatterns = new Set();
+            let isFirst = true;
+            let keepAdding = true;
+            while (keepAdding) {
+                const project = await promptProject(prompts, usedPatterns, outputTargets, isFirst, isNewProject);
+                projects.push(project);
+                isFirst = false;
+                const addAnother = await confirm({ message: 'Add another project?', initialValue: false });
+                keepAdding = !isCancel(addAnother) && addAnother;
+            }
+            const deps = collectDeps(projects);
+            if (deps.length > 0) {
+                const s = spinner();
+                s.start('Installing dependencies');
+                await nypm.addDependency(deps, { cwd: rootDir, dev: true });
+                s.stop('Dependencies installed');
+            }
+            const needsSetupFile = projects.some((p) => p.type === 'browser' || (p.type === 'node' && p.loadMethod === 'full-build'));
+            if (needsSetupFile) {
+                const setupPath = join(rootDir, 'vitest-setup.ts');
+                if (!(await fileExists(setupPath))) {
+                    const loaderImport = resolveLoaderImport(config);
+                    if (loaderImport === null) {
+                        prompts.log.warn('Could not determine a loader path — no loader-bundle or standalone output target found.\n' +
+                            'Create vitest-setup.ts manually and import your component loader.');
+                    }
+                    else {
+                        await writeFile(setupPath, `import '${loaderImport}';\n`, 'utf8');
+                    }
+                }
+            }
+            await writeFile(vitestConfigPath, generateVitestConfig(projects, hasStencilConfig), 'utf8');
+            await updatePackageJsonScripts(rootDir, projects);
+            if (isNewProject) {
+                await generateExampleTests(rootDir, projects);
+            }
+            outro('Vitest configured');
+        },
+    },
+    generate: {
+        fileTemplates: async (ctx) => {
+            const { prompts, config } = ctx;
+            const projects = await loadVitestProjects(config.rootDir);
+            const rawSubdir = await prompts.text({
+                message: 'Test file subdirectory? (leave blank to co-locate with component)',
+                placeholder: 'e.g. __tests__',
+                defaultValue: '',
+            });
+            const subdirectory = !prompts.isCancel(rawSubdir) ? rawSubdir.trim() || undefined : undefined;
+            if (projects.length === 0) {
+                return [
+                    {
+                        label: 'Spec test (.spec.tsx)',
+                        extension: 'spec.tsx',
+                        subdirectory,
+                        selectedByDefault: true,
+                        template: (tagName) => specTemplate(tagName, true, subdirectory),
+                    },
+                    {
+                        label: 'Browser test (.browser.spec.ts)',
+                        extension: 'browser.spec.ts',
+                        subdirectory,
+                        selectedByDefault: false,
+                        template: (tagName) => specTemplate(tagName, false, subdirectory),
+                    },
+                ];
+            }
+            return projects.flatMap((project) => {
+                const suffix = parsePattern(project.pattern);
+                if (!suffix)
+                    return [];
+                const ext = suffix.replace(/^\./, '');
+                const label = `${project.name[0].toUpperCase()}${project.name.slice(1)} (${ext})`;
+                return [
+                    {
+                        label,
+                        extension: ext,
+                        subdirectory,
+                        selectedByDefault: project.type === 'node',
+                        template: project.type === 'browser'
+                            ? (tagName) => specTemplate(tagName, false, subdirectory)
+                            : (tagName) => specTemplate(tagName, project.loadMethod === 'plugin', subdirectory),
+                    },
+                ];
+            });
+        },
+    },
+};

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -13,7 +13,14 @@
   "bin": {
     "stencil-test": "./dist/bin/stencil-test.js"
   },
+  "stencil": {
+    "wizard": "./dist/wizard.js"
+  },
   "exports": {
+    "./wizard": {
+      "types": "./dist/wizard.d.ts",
+      "import": "./dist/wizard.js"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -104,7 +111,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "1.12.1"
+    "vitest-environment-stencil": "1.13.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -112,6 +119,7 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@stencil/core": "^4.0.0",
+    "@stencil/cli": "5.0.0-alpha.8",
     "@types/node": "24.10.4",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
@@ -119,7 +127,6 @@
     "eslint": "^9.39.2",
     "installed-check": "^9.3.0",
     "knip": "^5.76.3",
-    "playwright-core": "^1.57.0",
     "prettier": "^3.7.4",
     "semantic-release": "^25.0.2",
     "typescript": "~5.8.3",