@stencil/cli 5.0.0-alpha.6 → 5.0.0-alpha.7

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import { LogLevel } from "@stencil/core/compiler";
 /**
  * Supported CLI task commands
  */
-type TaskCommand = 'build' | 'docs' | 'generate' | 'g' | 'help' | 'info' | 'migrate' | 'prerender' | 'serve' | 'telemetry' | 'test' | 'version';
+type TaskCommand = 'build' | 'docs' | 'generate' | 'g' | 'help' | 'info' | 'init' | 'migrate' | 'prerender' | 'serve' | 'telemetry' | 'test' | 'version';
 //#endregion
 //#region src/config-flags.d.ts
 /**
@@ -150,4 +150,95 @@ declare const run: (init: d.CliInitOptions) => Promise<any>;
  */
 declare const runTask: (coreCompiler: CoreCompiler, config: d.Config, task: TaskCommand, sys: d.CompilerSystem, flags?: ConfigFlags) => Promise<void>;
 //#endregion
-export { BOOLEAN_CLI_FLAGS, type ConfigFlags, type TaskCommand, createConfigFlags, parseFlags, run, runTask };
+//#region src/wizard/types.d.ts
+/**
+ * Context passed to wizard steps at runtime.
+ */
+interface WizardContext {
+  /** Absolute path to the project root directory. */
+  rootDir: string;
+  /** True when `stencil.config.ts` did not previously exist (fresh scaffold). */
+  isNewProject: boolean;
+}
+/**
+ * A single file a plugin can offer during `stencil generate`.
+ */
+interface WizardFileTemplate {
+  /** Label shown in the generate prompt checkbox, e.g. `"Spec Test (.spec.tsx)"`. */
+  label: string;
+  /**
+   * File extension used to derive the filename and deduplicate contributions,
+   * e.g. `"spec.tsx"` or `"e2e.ts"`.
+   */
+  extension: string;
+  /**
+   * Subdirectory within the component directory where the file is placed.
+   * e.g. `'test'` to place alongside other test files. Omit for the component root.
+   */
+  subdirectory?: string;
+  /**
+   * Returns the file content. `className` is the PascalCase form of `tagName`.
+   */
+  template: (tagName: string, className: string) => string;
+  /** Pre-selected in the generate prompt. Defaults to `true`. */
+  selectedByDefault?: boolean;
+}
+/**
+ * Contribution a package can make to `stencil generate`.
+ */
+interface WizardGenerateContribution {
+  /**
+   * Files this plugin can generate alongside the component.
+   * Each entry appears as a checkbox in the generate prompt.
+   * A single plugin may contribute multiple entries (e.g. a vitest setup
+   * with several project configs, each producing a differently-scoped test file).
+   */
+  fileTemplates?: ReadonlyArray<WizardFileTemplate>;
+  /**
+   * Additional style extensions this package supports (e.g. `['sass', 'scss']`
+   * from `@stencil/sass`). The first entry is used as the default.
+   */
+  styleExtensions?: ReadonlyArray<string>;
+}
+/**
+ * Contribution a package can make to `stencil init`.
+ *
+ * The plugin owns its entire setup: prompts, peer dep installs, config file
+ * generation, example files, package.json script updates, etc.
+ */
+interface WizardInitContribution {
+  /** Stable identifier used to deduplicate across re-runs. */
+  id: string;
+  /** Human-readable name shown in the prompt list. */
+  displayName: string;
+  /** One-line description shown alongside the name. */
+  description: string;
+  /**
+   * Called by the CLI after packages are installed. The plugin is responsible
+   * for all further setup: additional prompts, peer dep installs, config file
+   * writes, example tests, `.gitignore` and `package.json` script updates, etc.
+   */
+  run: (context: WizardContext) => Promise<void>;
+}
+/**
+ * Interface a package exports to participate in `stencil init` and/or
+ * `stencil generate`.
+ *
+ * Declare the entry point in `package.json`:
+ * ```json
+ * { "stencil": { "wizard": "./dist/wizard.js" } }
+ * ```
+ *
+ * Export a named `wizard` constant from that module:
+ * ```ts
+ * export const wizard: StencilWizardPlugin = { ... };
+ * ```
+ */
+interface StencilWizardPlugin {
+  /** Contributions to `stencil generate`. */
+  generate?: WizardGenerateContribution;
+  /** Contributions to `stencil init`. */
+  init?: WizardInitContribution;
+}
+//#endregion
+export { BOOLEAN_CLI_FLAGS, type ConfigFlags, type StencilWizardPlugin, type TaskCommand, type WizardContext, type WizardFileTemplate, type WizardGenerateContribution, type WizardInitContribution, createConfigFlags, parseFlags, run, runTask };

package/dist/index.mjs

@@ -1,7 +1,16 @@
 import { LOG_LEVELS } from "@stencil/core/compiler";
 import { buildError, catchError, hasError, isFunction, isOutputTargetDocs, isOutputTargetSsr, isOutputTargetWww, isString, normalizePath, readOnlyArrayHasStringMember, result, shouldIgnoreError, toCamelCase, validateComponentTag } from "@stencil/core/compiler/utils";
-import { dirname, isAbsolute, join, parse, relative } from "path";
+import { dirname, isAbsolute, join, relative } from "path";
+import * as p from "@clack/prompts";
+import { cancel, isCancel, select } from "@clack/prompts";
 import ts from "typescript";
+import { basename, dirname as dirname$1, join as join$1, parse, relative as relative$1, resolve } from "node:path";
+import { getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase } from "@stencil/templates";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { pathToFileURL } from "node:url";
+import { existsSync } from "node:fs";
+import { installDependencies } from "nypm";
+import { isCI } from "std-env";
 import { start } from "@stencil/dev-server";
 //#region src/config-flags.ts
 /**
@@ -440,7 +449,7 @@ const findConfig = async (opts) => {
 	else configPath = normalizePath(configPath);
 	else configPath = rootDir;
 	const results = {
-		configPath,
+		configPath: null,
 		rootDir: normalizePath(cwd)
 	};
 	const stat = await sys.stat(configPath);
@@ -455,12 +464,15 @@ const findConfig = async (opts) => {
 	if (stat.isFile) {
 		results.configPath = configPath;
 		results.rootDir = sys.platformPath.dirname(configPath);
-	} else if (stat.isDirectory) for (const configName of ["stencil.config.ts", "stencil.config.js"]) {
-		const testConfigFilePath = sys.platformPath.join(configPath, configName);
-		if ((await sys.stat(testConfigFilePath)).isFile) {
-			results.configPath = testConfigFilePath;
-			results.rootDir = sys.platformPath.dirname(testConfigFilePath);
-			break;
+	} else if (stat.isDirectory) {
+		results.rootDir = configPath;
+		for (const configName of ["stencil.config.ts", "stencil.config.js"]) {
+			const testConfigFilePath = sys.platformPath.join(configPath, configName);
+			if ((await sys.stat(testConfigFilePath)).isFile) {
+				results.configPath = testConfigFilePath;
+				results.rootDir = sys.platformPath.dirname(testConfigFilePath);
+				break;
+			}
 		}
 	}
 	return result.ok(results);
@@ -904,6 +916,53 @@ const externalRuntimeRule = {
 	}
 };
 //#endregion
+//#region src/migrations/rules/extras-to-compat.ts
+/**
+* Migration rule: rename the top-level `extras` config key to `compat`.
+*
+* In v5, `extras` is replaced by `compat` (framework/bundler compatibility flags).
+*/
+const extrasToCompatRule = {
+	id: "extras-to-compat",
+	name: "Extras → Compat Rename",
+	description: "Rename top-level 'extras' config key to 'compat'",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
+				if (node.name.text === "extras") {
+					const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+					matches.push({
+						node,
+						message: "'extras' has been renamed to 'compat'",
+						line: line + 1,
+						column: character + 1
+					});
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		let text = sourceFile.getFullText();
+		const sorted = [...matches].sort((a, b) => b.node.getStart() - a.node.getStart());
+		for (const match of sorted) {
+			const node = match.node;
+			if (node.name.text === "extras") {
+				const keyStart = node.name.getStart();
+				const keyEnd = node.name.getEnd();
+				text = text.slice(0, keyStart) + "compat" + text.slice(keyEnd);
+			}
+		}
+		return text;
+	}
+};
+//#endregion
 //#region src/migrations/rules/form-associated.ts
 /**
 * Migration rule for formAssociated → @AttachInternals.
@@ -1769,6 +1828,64 @@ const rolldownConfigRule = {
 	}
 };
 //#endregion
+//#region src/migrations/rules/service-worker-default.ts
+/**
+* Migration rule for `serviceWorker: null` / `serviceWorker: false` on `www` output targets.
+*
+* In Stencil v5, `serviceWorker` defaults to `null` (disabled). Explicit `null` or `false`
+* values on `www` output targets are now redundant and can be removed.
+*/
+const serviceWorkerDefaultRule = {
+	id: "service-worker-default",
+	name: "Service Worker Default Cleanup",
+	description: "Remove redundant 'serviceWorker: null' / 'serviceWorker: false' from www output targets - null is now the default",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) && node.name.text === "serviceWorker") {
+				const init = node.initializer;
+				if (init.kind === ts.SyntaxKind.NullKeyword || init.kind === ts.SyntaxKind.FalseKeyword) {
+					const parent = node.parent;
+					if (ts.isObjectLiteralExpression(parent)) {
+						if (parent.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type" && ts.isStringLiteral(p.initializer) && p.initializer.text === "www")) {
+							const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+							matches.push({
+								node,
+								message: `'serviceWorker: ${init.kind === ts.SyntaxKind.NullKeyword ? "null" : "false"}' is now the default on www output targets and can be removed`,
+								line: line + 1,
+								column: character + 1
+							});
+						}
+					}
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		let text = sourceFile.getFullText();
+		for (const match of [...matches].reverse()) {
+			const node = match.node;
+			let start = node.getFullStart();
+			const end = node.getEnd();
+			let removeEnd = end;
+			const trailingComma = text.slice(end).match(/^\s*,/);
+			if (trailingComma) removeEnd = end + trailingComma[0].length;
+			else {
+				const leadingComma = text.slice(0, start).match(/,\s*$/);
+				if (leadingComma) start -= leadingComma[0].length;
+			}
+			text = text.slice(0, start) + text.slice(removeEnd);
+		}
+		return text;
+	}
+};
+//#endregion
 //#region src/migrations/index.ts
 /**
 * Build a map of local import names to their original names from @stencil/core.
@@ -1814,9 +1931,11 @@ const migrationRules = [
 	devModeRule,
 	globalStyleInjectRule,
 	lightDomPatchesRule,
+	extrasToCompatRule,
 	externalRuntimeRule,
 	hashFileNamesRule,
-	rolldownConfigRule
+	rolldownConfigRule,
+	serviceWorkerDefaultRule
 ];
 /**
 * Get all migration rules for a specific version upgrade.
@@ -2126,7 +2245,7 @@ function uuidv4() {
 * @param path the path on the file system to read and parse
 * @returns the parsed JSON
 */
-async function readJson(sys, path) {
+async function readJson$1(sys, path) {
 	const file = await sys.readFile(path);
 	return file ? JSON.parse(file) : null;
 }
@@ -2148,8 +2267,8 @@ function hasVerbose(flags) {
 }
 //#endregion
 //#region src/ionic-config.ts
-const isTest$1 = () => process.env.JEST_WORKER_ID !== void 0;
-const defaultConfig = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic/${isTest$1() ? "tmp-config.json" : "config.json"}`);
+const isTest = () => process.env.JEST_WORKER_ID !== void 0;
+const defaultConfig = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic/${isTest() ? "tmp-config.json" : "config.json"}`);
 const defaultConfigDirectory = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic`);
 /**
 * Reads an Ionic configuration file from disk, parses it, and performs any necessary corrections to it if certain
@@ -2158,7 +2277,7 @@ const defaultConfigDirectory = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic
 * @returns the config read from disk that has been potentially been updated
 */
 async function readConfig(sys) {
-	let config = await readJson(sys, defaultConfig(sys));
+	let config = await readJson$1(sys, defaultConfig(sys));
 	if (!config) {
 		config = {
 			"tokens.telemetry": uuidv4(),
@@ -2396,7 +2515,7 @@ async function getInstalledPackages(sys, flags) {
 	const yarn = isUsingYarn(sys);
 	try {
 		const appRootDir = sys.getCurrentDirectory();
-		const packageJson = await tryFn(readJson, sys, sys.resolvePath(appRootDir + "/package.json"));
+		const packageJson = await tryFn(readJson$1, sys, sys.resolvePath(appRootDir + "/package.json"));
 		if (!packageJson) return {
 			packages,
 			packagesNoVersions
@@ -2431,7 +2550,7 @@ async function getInstalledPackages(sys, flags) {
 */
 async function npmPackages(sys, ionicPackages) {
 	const appRootDir = sys.getCurrentDirectory();
-	const packageLockJson = await tryFn(readJson, sys, sys.resolvePath(appRootDir + "/package-lock.json"));
+	const packageLockJson = await tryFn(readJson$1, sys, sys.resolvePath(appRootDir + "/package-lock.json"));
 	return ionicPackages.map(([k, v]) => {
 		let version = packageLockJson?.dependencies[k]?.version ?? packageLockJson?.devDependencies[k]?.version ?? v;
 		version = version.includes("file:") ? sanitizeDeclaredVersion(v) : version;
@@ -2653,31 +2772,28 @@ async function promptForMigration(config, migrationResult, context) {
 	logger.info("");
 	if (context === "pre-build") logger.info("Your config contains deprecated options that must be migrated before building.");
 	else logger.info("These migrations may help resolve the build errors above.");
-	const prompt = (await import("prompts")).default;
-	const response = await prompt({
-		name: "action",
-		type: "select",
+	const action = await select({
 		message: "What would you like to do?",
-		choices: [
+		options: [
 			{
-				title: "Run migration",
 				value: "run",
-				description: "Apply migrations and re-run build"
+				label: "Run migration",
+				hint: "Apply migrations and re-run build"
 			},
 			{
-				title: "Dry run",
 				value: "dry-run",
-				description: "Preview changes without modifying files"
+				label: "Dry run",
+				hint: "Preview changes without modifying files"
 			},
 			{
-				title: "Exit",
 				value: "exit",
-				description: "Exit without making changes"
+				label: "Exit",
+				hint: "Exit without making changes"
 			}
 		]
 	});
-	if (response.action === void 0) return "exit";
-	return response.action;
+	if (isCancel(action)) return "exit";
+	return action;
 }
 //#endregion
 //#region src/task-docs.ts
@@ -2691,277 +2807,197 @@ const taskDocs = async (coreCompiler, config) => {
 	await compiler.destroy();
 };
 //#endregion
-//#region src/task-generate.ts
+//#region src/wizard/clack.ts
 /**
-* Task to generate component boilerplate and write it to disk. This task can
-* cause the program to exit with an error under various circumstances, such as
-* being called in an inappropriate place, being asked to overwrite files that
-* already exist, etc.
+* Exits cleanly if the user cancelled a prompt (Ctrl+C).
+* Narrows the type from `T | symbol` to `T` for callers.
 *
-* @param config the user-supplied config, which we need here to access `.sys`.
-* @param flags the CLI flags (owned by CLI, not part of core config)
-* @returns a void promise
+* @param value - Return value from a `@clack/prompts` prompt call.
 */
+function cancelIfAborted(value) {
+	if (isCancel(value)) {
+		cancel("Cancelled.");
+		process.exit(0);
+	}
+}
+//#endregion
+//#region src/wizard/discover.ts
+function toStringRecord(val) {
+	return val !== null && typeof val === "object" ? val : {};
+}
+async function readJson(filePath) {
+	try {
+		return JSON.parse(await readFile(filePath, "utf8"));
+	} catch {
+		return null;
+	}
+}
+async function loadOne(rootDir, packageName, loader) {
+	const wizardEntry = ((await readJson(join$1(rootDir, "node_modules", packageName, "package.json")))?.stencil)?.wizard;
+	if (!wizardEntry) return null;
+	const wizardPath = join$1(rootDir, "node_modules", packageName, wizardEntry);
+	let mod;
+	try {
+		mod = await loader(pathToFileURL(wizardPath).href);
+	} catch {
+		console.warn(`[stencil] ${packageName} declares stencil.wizard but the module failed to load: ${wizardPath}`);
+		return null;
+	}
+	const plugin = mod.wizard;
+	if (!plugin || typeof plugin !== "object") {
+		console.warn(`[stencil] ${packageName} declares stencil.wizard but does not export a 'wizard' object`);
+		return null;
+	}
+	return {
+		packageName,
+		plugin
+	};
+}
+/**
+* Scans the project's declared dependencies for packages that expose a
+* `stencil.wizard` entry in their `package.json` and dynamically imports
+* each matching module.
+*
+* @param rootDir - Absolute path to the project root (where `package.json` lives).
+* @param loader  - Module loader; injectable for testing. Defaults to `import()`.
+* @returns Array of successfully loaded plugins, in dependency declaration order.
+*/
+async function discoverPlugins(rootDir, loader = (url) => import(url)) {
+	const pkg = await readJson(join$1(rootDir, "package.json"));
+	if (!pkg) return [];
+	const depNames = [...new Set([...Object.keys(toStringRecord(pkg.dependencies)), ...Object.keys(toStringRecord(pkg.devDependencies))])];
+	const plugins = (await Promise.allSettled(depNames.map((name) => loadOne(rootDir, name, loader)))).filter((r) => r.status === "fulfilled" && r.value !== null).map((r) => r.value);
+	const devPath = process.env.STENCIL_WIZARD_DEV;
+	if (devPath) {
+		const devPlugin = await loadDevPlugin(resolve(rootDir, devPath), loader);
+		if (devPlugin) plugins.unshift(devPlugin);
+	}
+	return plugins;
+}
+async function findDevPackageName(wizardPath) {
+	const dir = dirname$1(wizardPath);
+	for (const candidate of [dir, resolve(dir, "..")]) {
+		const pkg = await readJson(join$1(candidate, "package.json"));
+		if (typeof pkg?.name === "string") return pkg.name;
+	}
+	return basename(dir);
+}
+async function loadDevPlugin(wizardPath, loader) {
+	const packageName = await findDevPackageName(wizardPath);
+	let mod;
+	try {
+		mod = await loader(pathToFileURL(wizardPath).href);
+	} catch {
+		console.warn(`[stencil] STENCIL_WIZARD_DEV: failed to load ${wizardPath}`);
+		return null;
+	}
+	const plugin = mod.wizard;
+	if (!plugin || typeof plugin !== "object") {
+		console.warn(`[stencil] STENCIL_WIZARD_DEV: ${wizardPath} does not export a 'wizard' object`);
+		return null;
+	}
+	return {
+		packageName,
+		plugin
+	};
+}
+//#endregion
+//#region src/task-generate.ts
 const taskGenerate = async (config, flags) => {
 	if (!config.configPath) {
 		config.logger.error("Please run this command in your root directory (i. e. the one containing stencil.config.ts).");
 		return config.sys.exit(1);
 	}
-	const absoluteSrcDir = config.srcDir;
-	if (!absoluteSrcDir) {
+	const srcDir = config.srcDir;
+	if (!srcDir) {
 		config.logger.error(`Stencil's srcDir was not specified.`);
 		return config.sys.exit(1);
 	}
-	const { prompt } = await import("prompts");
-	const input = flags.unknownArgs.find((arg) => !arg.startsWith("-")) || (await prompt({
-		name: "tagName",
-		type: "text",
-		message: "Component tag name (dash-case):"
-	})).tagName;
-	if (void 0 === input) return;
+	const generateContribs = (await discoverPlugins(config.rootDir)).flatMap((d) => d.plugin.generate ? [d.plugin.generate] : []);
+	p.intro("stencil generate");
+	const rawInput = flags.unknownArgs.find((arg) => !arg.startsWith("-"));
+	let input;
+	if (rawInput) input = rawInput;
+	else {
+		const tagName = await p.text({
+			message: "Component tag name (dash-case):",
+			validate: (value) => validateComponentTag(value ?? "")
+		});
+		cancelIfAborted(tagName);
+		input = tagName;
+	}
 	const { dir, base: componentName } = parse(input);
 	const tagError = validateComponentTag(componentName);
 	if (tagError) {
 		config.logger.error(tagError);
 		return config.sys.exit(1);
 	}
-	let cssExtension = "css";
-	if (config.plugins?.find((plugin) => plugin.name === "sass")) cssExtension = await chooseSassExtension();
-	else if (config.plugins?.find((plugin) => plugin.name === "less")) cssExtension = "less";
-	const filesToGenerateExt = await chooseFilesToGenerate(cssExtension);
-	if (!filesToGenerateExt) return;
-	const extensionsToGenerate = ["tsx", ...filesToGenerateExt];
-	const testFolder = extensionsToGenerate.some(isTest) ? "test" : "";
-	const outDir = join(absoluteSrcDir, "components", dir, componentName);
-	await config.sys.createDir(normalizePath(join(outDir, testFolder)), { recursive: true });
-	const filesToGenerate = extensionsToGenerate.map((extension) => ({
-		extension,
-		path: getFilepathForFile(outDir, componentName, extension)
-	}));
-	await checkForOverwrite(filesToGenerate, config);
-	const writtenFiles = await Promise.all(filesToGenerate.map((file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes("css") || extensionsToGenerate.includes("sass") || extensionsToGenerate.includes("scss") || extensionsToGenerate.includes("less"), file, cssExtension))).catch((error) => config.logger.error(error));
-	if (!writtenFiles) return config.sys.exit(1);
-	console.log();
-	console.log(`${config.logger.gray("$")} stencil generate ${input}`);
-	console.log();
-	console.log(config.logger.bold("The following files have been generated:"));
-	const absoluteRootDir = config.rootDir;
-	writtenFiles.map((file) => console.log(`  - ${relative(absoluteRootDir, file)}`));
-};
-/**
-* Show a checkbox prompt to select the files to be generated.
-*
-* @param cssExtension the extension of the CSS file to be generated
-* @returns a read-only array of `GeneratableExtension`, the extensions that the user has decided
-* to generate
-*/
-const chooseFilesToGenerate = async (cssExtension) => {
-	const { prompt } = await import("prompts");
-	return (await prompt({
-		name: "filesToGenerate",
-		type: "multiselect",
-		message: "Which additional files do you want to generate?",
-		choices: [
-			{
-				value: cssExtension,
-				title: `Stylesheet (.${cssExtension})`,
-				selected: true
-			},
-			{
-				value: "spec.tsx",
-				title: "Spec Test  (.spec.tsx)",
-				selected: true
-			},
-			{
-				value: "e2e.ts",
-				title: "E2E Test (.e2e.ts)",
-				selected: true
-			}
-		]
-	})).filesToGenerate;
-};
-const chooseSassExtension = async () => {
-	const { prompt } = await import("prompts");
-	return (await prompt({
-		name: "sassFormat",
-		type: "select",
-		message: "Which Sass format would you like to use? (More info: https://sass-lang.com/documentation/syntax/#the-indented-syntax)",
-		choices: [{
-			value: "sass",
-			title: `*.sass Format`,
-			selected: true
-		}, {
-			value: "scss",
-			title: "*.scss Format"
-		}]
-	})).sassFormat;
-};
-/**
-* Get a filepath for a file we want to generate!
-*
-* The filepath for a given file depends on the path, the user-supplied
-* component name, the extension, and whether we're inside of a test directory.
-*
-* @param filePath      path to where we're going to generate the component
-* @param componentName the user-supplied name for the generated component
-* @param extension     the file extension
-* @returns the full filepath to the component (with a possible `test` directory
-* added)
-*/
-const getFilepathForFile = (filePath, componentName, extension) => isTest(extension) ? normalizePath(join(filePath, "test", `${componentName}.${extension}`)) : normalizePath(join(filePath, `${componentName}.${extension}`));
-/**
-* Get the boilerplate for a file and write it to disk
-*
-* @param config        the current config, needed for file operations
-* @param componentName the component name (user-supplied)
-* @param withCss       are we generating CSS?
-* @param file          the file we want to write
-* @param styleExtension extension used for styles
-* @returns a `Promise<string>` which holds the full filepath we've written to,
-* used to print out a little summary of our activity to the user.
-*/
-const getBoilerplateAndWriteFile = async (config, componentName, withCss, file, styleExtension) => {
-	const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss, styleExtension);
-	await config.sys.writeFile(normalizePath(file.path), boilerplate);
-	return file.path;
-};
-/**
-* Check to see if any of the files we plan to write already exist and would
-* therefore be overwritten if we proceed, because we'd like to not overwrite
-* people's code!
-*
-* This function will check all the filepaths and if it finds any files log an
-* error and exit with an error code. If it doesn't find anything it will just
-* peacefully return `Promise<void>`.
-*
-* @param files  the files we want to check
-* @param config the Config object, used here to get access to `sys.readFile`
-*/
-const checkForOverwrite = async (files, config) => {
-	const alreadyPresent = [];
-	await Promise.all(files.map(async ({ path }) => {
-		if (await config.sys.readFile(path) !== void 0) alreadyPresent.push(path);
-	}));
-	if (alreadyPresent.length > 0) {
-		config.logger.error("Generating code would overwrite the following files:", ...alreadyPresent.map((path) => "	" + normalizePath(path)));
-		await config.sys.exit(1);
+	const styleOptions = [
+		{
+			value: "css",
+			label: "CSS (.css)"
+		},
+		...[...new Set(generateContribs.flatMap((c) => c.styleExtensions ?? []))].map((ext) => ({
+			value: ext,
+			label: `${ext.toUpperCase()} (.${ext})`
+		})),
+		{
+			value: "",
+			label: "None"
+		}
+	];
+	const stylePick = await p.select({
+		message: "Stylesheet format:",
+		options: styleOptions
+	});
+	cancelIfAborted(stylePick);
+	const styleExtension = stylePick || void 0;
+	const allFileTemplates = generateContribs.flatMap((c) => c.fileTemplates ?? []);
+	let pickedExtensions = [];
+	if (allFileTemplates.length > 0) {
+		const filePick = await p.multiselect({
+			message: "Additional files:",
+			options: allFileTemplates.map((ft) => ({
+				value: ft.extension,
+				label: ft.label
+			})),
+			initialValues: allFileTemplates.filter((ft) => ft.selectedByDefault !== false).map((ft) => ft.extension),
+			required: false
+		});
+		cancelIfAborted(filePick);
+		pickedExtensions = filePick;
 	}
-};
-/**
-* Check if an extension is for a test
-*
-* @param extension the extension we want to check
-* @returns a boolean indicating whether or not its a test
-*/
-const isTest = (extension) => {
-	return extension === "e2e.ts" || extension === "spec.tsx";
-};
-/**
-* Get the boilerplate for a file by its extension.
-*
-* @param tagName the name of the component we're generating
-* @param extension the file extension we want boilerplate for (.css, tsx, etc)
-* @param withCss a boolean indicating whether we're generating a CSS file
-* @param styleExtension extension used for styles
-* @returns a string container the file boilerplate for the supplied extension
-*/
-const getBoilerplateByExtension = (tagName, extension, withCss, styleExtension) => {
-	switch (extension) {
-		case "tsx": return getComponentBoilerplate(tagName, withCss, styleExtension);
-		case "css":
-		case "less":
-		case "sass":
-		case "scss": return getStyleUrlBoilerplate(styleExtension);
-		case "spec.tsx": return getSpecTestBoilerplate(tagName);
-		case "e2e.ts": return getE2eTestBoilerplate(tagName);
-		default: throw new Error(`Unkown extension "${extension}".`);
+	const outDir = join$1(srcDir, "components", dir, componentName);
+	const className = toPascalCase(componentName);
+	const filesToWrite = [];
+	filesToWrite.push({
+		absPath: normalizePath(join$1(outDir, `${componentName}.tsx`)),
+		content: getComponentBoilerplate(componentName, styleExtension)
+	});
+	if (styleExtension) filesToWrite.push({
+		absPath: normalizePath(join$1(outDir, `${componentName}.${styleExtension}`)),
+		content: getStyleBoilerplate(styleExtension)
+	});
+	for (const ext of pickedExtensions) {
+		const tmpl = allFileTemplates.find((ft) => ft.extension === ext);
+		const absPath = normalizePath(join$1(outDir, tmpl.subdirectory ?? "", `${componentName}.${ext}`));
+		filesToWrite.push({
+			absPath,
+			content: tmpl.template(componentName, className)
+		});
 	}
+	const wouldOverwrite = (await Promise.all(filesToWrite.map(async ({ absPath }) => await config.sys.readFile(absPath) !== void 0 ? absPath : null))).filter((f) => f !== null);
+	if (wouldOverwrite.length > 0) {
+		config.logger.error("Generating code would overwrite the following files:", ...wouldOverwrite.map((path) => "	" + normalizePath(path)));
+		await config.sys.exit(1);
+		return;
+	}
+	const dirs = [...new Set(filesToWrite.map(({ absPath }) => normalizePath(join$1(absPath, ".."))))];
+	await Promise.all(dirs.map((d) => config.sys.createDir(d, { recursive: true })));
+	await Promise.all(filesToWrite.map(({ absPath, content }) => config.sys.writeFile(absPath, content)));
+	p.note(filesToWrite.map(({ absPath }) => relative$1(config.rootDir, absPath)).join("\n"), "Generated");
+	p.outro(`stencil generate ${input}`);
 };
-/**
-* Get the boilerplate for a file containing the definition of a component
-* @param tagName the name of the tag to give the component
-* @param hasStyle designates if the component has an external stylesheet or not
-* @param styleExtension extension used for styles
-* @returns the contents of a file that defines a component
-*/
-const getComponentBoilerplate = (tagName, hasStyle, styleExtension) => {
-	const decorator = [`{`];
-	decorator.push(`  tag: '${tagName}',`);
-	if (hasStyle) decorator.push(`  styleUrl: '${tagName}.${styleExtension}',`);
-	decorator.push(`  shadow: true,`);
-	decorator.push(`}`);
-	return `import { Component, Host, h } from '@stencil/core';
-
-@Component(${decorator.join("\n")})
-export class ${toPascalCase(tagName)} {
-  render() {
-    return (
-      <Host>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
-`;
-};
-/**
-* Get the boilerplate for style for a generated component
-* @param ext extension used for styles
-* @returns a boilerplate CSS block
-*/
-const getStyleUrlBoilerplate = (ext) => ext === "sass" ? `:host
-  display: block
-` : `:host {
-  display: block;
-}
-`;
-/**
-* Get the boilerplate for a file containing a spec (unit) test for a component
-* @param tagName the name of the tag associated with the component under test
-* @returns the contents of a file that unit tests a component
-*/
-const getSpecTestBoilerplate = (tagName) => `import { newSpecPage } from '@stencil/core/testing';
-import { ${toPascalCase(tagName)} } from '../${tagName}';
-
-describe('${tagName}', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [${toPascalCase(tagName)}],
-      html: \`<${tagName}></${tagName}>\`,
-    });
-    expect(page.root).toEqualHtml(\`
-      <${tagName}>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </${tagName}>
-    \`);
-  });
-});
-`;
-/**
-* Get the boilerplate for a file containing an end-to-end (E2E) test for a component
-* @param tagName the name of the tag associated with the component under test
-* @returns the contents of a file that E2E tests a component
-*/
-const getE2eTestBoilerplate = (tagName) => `import { newE2EPage } from '@stencil/core/testing';
-
-describe('${tagName}', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<${tagName}></${tagName}>');
-
-    const element = await page.find('${tagName}');
-    expect(element).toHaveClass('hydrated');
-  });
-});
-`;
-/**
-* Convert a dash case string to pascal case.
-* @param str the string to convert
-* @returns the converted input as pascal case
-*/
-const toPascalCase = (str) => str.split("-").reduce((res, part) => res + part[0].toUpperCase() + part.slice(1), "");
 //#endregion
 //#region src/task-telemetry.ts
 /**
@@ -3075,6 +3111,317 @@ const taskInfo = (coreCompiler, sys, logger) => {
 	console.log(``);
 };
 //#endregion
+//#region src/wizard/init/apply.ts
+/**
+* Copy component-starter template into rootDir, interpolating project name and namespace.
+*
+* @param rootDir - Destination directory (typically `process.cwd()`).
+* @param projectName - Value to substitute for `{{PROJECT_NAME}}` placeholders.
+* @param namespace - Value to substitute for `{{NAMESPACE}}` placeholders.
+*/
+async function copyTemplate(rootDir, projectName, namespace) {
+	const templateDir = getTemplatePath("component-starter");
+	const entries = await readdir(templateDir, {
+		recursive: true,
+		withFileTypes: true
+	});
+	for (const entry of entries) {
+		if (!entry.isFile()) continue;
+		const srcPath = join$1(entry.parentPath, entry.name);
+		const destPath = join$1(rootDir, relative$1(templateDir, srcPath));
+		await mkdir(dirname$1(destPath), { recursive: true });
+		await writeFile(destPath, (await readFile(srcPath, "utf8")).replace(/\{\{PROJECT_NAME\}\}/g, projectName).replace(/\{\{NAMESPACE\}\}/g, namespace), "utf8");
+	}
+}
+/**
+* Inject integration package names into the project's package.json devDependencies.
+* Versions are set to 'latest' so the subsequent install resolves them from the registry.
+*
+* @param rootDir - Absolute path to the project root.
+* @param integrations - npm package names to add as devDependencies.
+*/
+async function patchPackageJson(rootDir, integrations) {
+	if (integrations.length === 0) return;
+	const pkgPath = join$1(rootDir, "package.json");
+	const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
+	const devDeps = pkg.devDependencies ?? {};
+	for (const name of integrations) devDeps[name] = "latest";
+	pkg.devDependencies = devDeps;
+	await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
+}
+//#endregion
+//#region src/wizard/init/steps.ts
+/** Well-known integrations the CLI can offer before any packages are installed. */
+const KNOWN_INTEGRATIONS = [
+	{
+		package: "@stencil/vitest",
+		displayName: "Vitest",
+		description: "Unit / Spec / Integration / Browser testing",
+		group: "Testing"
+	},
+	{
+		package: "@stencil/playwright",
+		displayName: "Playwright",
+		description: "E2E testing",
+		group: "Testing"
+	},
+	{
+		package: "@stencil/sass",
+		displayName: "Sass",
+		description: "Sass/SCSS styles",
+		group: "Styling"
+	},
+	{
+		package: "@stencil/eslint-plugin",
+		displayName: "ESLint Plugin",
+		description: "Stencil-aware lint rules (ESLint, oxlint, Biome)",
+		group: "Linting"
+	},
+	{
+		package: "@stencil/storybook-plugin",
+		displayName: "Storybook",
+		description: "Component development & documentation",
+		group: "Tooling"
+	},
+	{
+		package: "@stencil/types-output-target",
+		displayName: "Types",
+		description: "TypeScript types for React, Vue, Solid, Svelte, Preact",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/react-output-target",
+		displayName: "React",
+		description: "React component wrappers",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/angular-output-target",
+		displayName: "Angular",
+		description: "Angular component wrappers",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/vue-output-target",
+		displayName: "Vue",
+		description: "Vue component wrappers",
+		group: "Framework integrations"
+	}
+];
+async function promptProjectName() {
+	const name = await p.text({
+		message: "Project name:",
+		defaultValue: "my-stencil-library",
+		validate: (v) => {
+			if (!v?.trim()) return "Project name is required";
+		}
+	});
+	cancelIfAborted(name);
+	return name;
+}
+function buildGroupedOptions(integrations) {
+	const groups = {};
+	for (const i of integrations) (groups[i.group] ??= []).push({
+		value: i.package,
+		label: i.displayName,
+		hint: i.description
+	});
+	return groups;
+}
+async function promptIntegrations() {
+	const picks = await p.groupMultiselect({
+		message: "Add integrations (optional):",
+		options: buildGroupedOptions(KNOWN_INTEGRATIONS),
+		required: false
+	});
+	cancelIfAborted(picks);
+	return KNOWN_INTEGRATIONS.filter((i) => picks.includes(i.package));
+}
+/**
+* Prompt for actions on an existing project: install new integrations and/or
+* run init wizards for already-installed packages with wizard contributions.
+*
+* @param installable - KNOWN_INTEGRATIONS not yet present in the project.
+* @param configurable - Already-installed plugins that declare an `init` contribution.
+* @returns Selected integrations to install and plugins to configure.
+*/
+async function promptAddCapabilities(installable, configurable) {
+	const options = {};
+	if (installable.length > 0) options["Install new integrations"] = installable.map((i) => ({
+		value: `install:${i.package}`,
+		label: i.displayName,
+		hint: i.description
+	}));
+	if (configurable.length > 0) options["Configure existing integrations"] = configurable.map((d) => ({
+		value: `configure:${d.packageName}`,
+		label: d.plugin.init.displayName,
+		hint: d.plugin.init.description
+	}));
+	const picks = await p.groupMultiselect({
+		message: "What would you like to do?",
+		options,
+		required: false
+	});
+	cancelIfAborted(picks);
+	const pickedSet = new Set(picks);
+	return {
+		toInstall: installable.filter((i) => pickedSet.has(`install:${i.package}`)),
+		toConfigure: configurable.filter((d) => pickedSet.has(`configure:${d.packageName}`))
+	};
+}
+//#endregion
+//#region src/wizard/splash.ts
+const noColor = !process.stdout.isTTY || "NO_COLOR" in process.env;
+const RESET = noColor ? "" : "\x1B[0m";
+const BG = noColor ? "" : "\x1B[38;2;60;44;255m";
+const RAW = `\
+              .............              
+           ...................          
+        .........................        
+     ..............................     
+    .................................    
+   ..............████████████.........   
+  .............████████████............  
+ ............████████████............... 
+...........***************...............
+.........████████████████████████████....
+.......████████████████████████████......
+.....████████████████████████████........
+...████████████████████████████..........
+...............**************............
+ ..............████████████.............
+ ............████████████.............. 
+  .........████████████...............  
+    .................................   
+     ..............................     
+       ..........................       
+         ......................         
+            ................`;
+function colorize(raw) {
+	if (noColor) return raw;
+	let out = "";
+	let style = "";
+	for (const ch of raw) {
+		const next = ".*".includes(ch) ? BG : "";
+		if (next !== style) {
+			if (style) out += RESET;
+			if (next) out += next;
+			style = next;
+		}
+		out += ch;
+	}
+	return style ? out + RESET : out;
+}
+const SPLASH = colorize(RAW);
+function printSplash() {
+	if (!process.stdout.isTTY) return;
+	process.stdout.write("\n" + SPLASH + "\n\n");
+}
+//#endregion
+//#region src/task-init.ts
+async function taskInit() {
+	const cwd = process.cwd();
+	const isExistingProject = existsSync(join$1(cwd, "stencil.config.ts"));
+	printSplash();
+	p.intro("stencil init");
+	if (process.env.STENCIL_WIZARD_DEV) p.log.warn(`Dev mode: loading wizard from ${process.env.STENCIL_WIZARD_DEV}`);
+	if (isCI) {
+		p.log.warn("Running in CI - non-interactive mode is not yet supported for `stencil init`.");
+		process.exit(1);
+	}
+	if (isExistingProject) {
+		await addCapabilities(cwd);
+		return;
+	}
+	const projectName = await promptProjectName();
+	const namespace = toNamespace(projectName);
+	const selectedIntegrations = await promptIntegrations();
+	const summaryLines = [
+		`Template:  component-starter`,
+		`Name:      ${projectName}`,
+		`Namespace: ${namespace}`
+	];
+	if (selectedIntegrations.length > 0) summaryLines.push(`Add:       ${selectedIntegrations.map((i) => i.displayName).join(", ")}`);
+	p.note(summaryLines.join("\n"), "Summary");
+	const confirmed = await p.confirm({ message: "Scaffold project in current directory?" });
+	cancelIfAborted(confirmed);
+	if (!confirmed) {
+		p.cancel("Cancelled.");
+		process.exit(0);
+	}
+	const s1 = p.spinner();
+	s1.start("Scaffolding project files");
+	await copyTemplate(cwd, projectName, namespace);
+	s1.stop("Project files created");
+	if (selectedIntegrations.length > 0) await patchPackageJson(cwd, selectedIntegrations.map((i) => i.package));
+	const s2 = p.spinner();
+	s2.start("Installing dependencies");
+	await installDependencies({
+		cwd,
+		silent: true
+	});
+	s2.stop("Dependencies installed");
+	if (selectedIntegrations.length > 0) {
+		const discovered = await discoverPlugins(cwd);
+		const selectedPkgs = new Set(selectedIntegrations.map((i) => i.package));
+		const context = {
+			rootDir: cwd,
+			isNewProject: true
+		};
+		for (const d of discovered) if (selectedPkgs.has(d.packageName) && d.plugin.init?.run) await d.plugin.init.run(context);
+	}
+	p.outro("Your project is ready! Run: pnpm run dev");
+}
+async function addCapabilities(cwd) {
+	const raw = JSON.parse(await readFile(join$1(cwd, "package.json"), "utf8"));
+	const installed = new Set([...Object.keys(raw.dependencies ?? {}), ...Object.keys(raw.devDependencies ?? {})]);
+	const discovered = await discoverPlugins(cwd);
+	const configurable = discovered.filter((d) => d.plugin.init);
+	const installable = KNOWN_INTEGRATIONS.filter((i) => !installed.has(i.package));
+	if (installable.length === 0 && configurable.length === 0) {
+		p.log.info("All known integrations are already installed and configured.");
+		p.outro("Nothing to do.");
+		return;
+	}
+	const { toInstall, toConfigure } = await promptAddCapabilities(installable, configurable);
+	if (toInstall.length === 0 && toConfigure.length === 0) {
+		p.outro("No changes made.");
+		return;
+	}
+	const summaryLines = [];
+	for (const i of toInstall) summaryLines.push(`Install:   ${i.displayName}`);
+	for (const d of toConfigure) summaryLines.push(`Configure: ${d.plugin.init.displayName}`);
+	p.note(summaryLines.join("\n"), "Summary");
+	const confirmed = await p.confirm({ message: "Apply changes?" });
+	cancelIfAborted(confirmed);
+	if (!confirmed) {
+		p.cancel("Cancelled.");
+		process.exit(0);
+	}
+	if (toInstall.length > 0) {
+		await patchPackageJson(cwd, toInstall.map((i) => i.package));
+		const s = p.spinner();
+		s.start("Installing dependencies");
+		await installDependencies({
+			cwd,
+			silent: true
+		});
+		s.stop("Dependencies installed");
+	}
+	const allDiscovered = toInstall.length > 0 ? await discoverPlugins(cwd) : discovered;
+	const newlyInstalledPkgs = new Set(toInstall.map((i) => i.package));
+	const toRun = [...allDiscovered.filter((d) => newlyInstalledPkgs.has(d.packageName)), ...toConfigure].filter((d) => d.plugin.init?.run);
+	const context = {
+		rootDir: cwd,
+		isNewProject: false
+	};
+	for (const d of toRun) await d.plugin.init.run(context);
+	p.outro("Done! Run pnpm run dev to continue.");
+}
+function toNamespace(name) {
+	return toPascalCase(name.replace(/^@[^/]+\//, "").replace(/[/_]/g, "-"));
+}
+//#endregion
 //#region src/task-serve.ts
 const taskServe = async (config, flags) => {
 	config.suppressLogs = true;
@@ -3130,6 +3477,10 @@ const run = async (init) => {
 			}), logger, sys);
 			return;
 		}
+		if (task === "init") {
+			await taskInit();
+			return;
+		}
 		startupLog(logger, task);
 		const findConfigResults = await findConfig({
 			sys,
@@ -3150,7 +3501,7 @@ const run = async (init) => {
 		const configWithFlags = mergeFlags({}, flags);
 		const validated = await coreCompiler.loadConfig({
 			config: configWithFlags,
-			configPath: foundConfig.configPath,
+			configPath: foundConfig.configPath ?? void 0,
 			logger,
 			sys
 		});
@@ -3200,6 +3551,9 @@ const runTask = async (coreCompiler, config, task, sys, flags) => {
 		case "help":
 			await taskHelp(resolvedFlags, strictConfig.logger, sys);
 			break;
+		case "init":
+			await taskInit();
+			break;
 		case "migrate":
 			await taskMigrate(coreCompiler, strictConfig, resolvedFlags);
 			break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/cli",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "description": "CLI for Stencil - Web component compiler",
   "keywords": [
     "components",
@@ -37,15 +37,17 @@
     "./cli": "./bin/stencil.mjs"
   },
   "dependencies": {
-    "prompts": "^2.0.0",
-    "@stencil/dev-server": "5.0.0-alpha.6"
+    "@clack/prompts": "^1.5.1",
+    "nypm": "^0.3.12",
+    "std-env": "^3.8.0",
+    "@stencil/templates": "5.0.0-alpha.7",
+    "@stencil/dev-server": "5.0.0-alpha.7"
   },
   "devDependencies": {
-    "@types/prompts": "^2.4.9",
     "tsdown": ">=0.21.0 <1.0.0",
     "typescript": ">4.0.0 <7.0.0",
     "vitest": "^4.1.7",
-    "@stencil/core": "5.0.0-alpha.6"
+    "@stencil/core": "5.0.0-alpha.7"
   },
   "peerDependencies": {
     "@stencil/core": "^5.0.0-0"
@@ -55,7 +57,8 @@
   },
   "scripts": {
     "build": "tsdown",
-    "test": "vitest run",
+    "test": "vitest run && pnpm test:e2e",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "typecheck": "tsc --noEmit"
   }
 }