@wc-toolkit/cem-generator-cli 0.1.1 → 0.1.2

package/README.md

@@ -11,7 +11,7 @@ pnpm add -w @wc-toolkit/cem-generator-cli
 ## Usage
 
 ```bash
-# Create a config and choose framework plugins interactively
+# Create a config and choose parser plugins and integrations interactively
 cem init
 
 # Create a config with selected plugins without prompting
@@ -35,15 +35,33 @@ cem generate --no-inheritance
 
 ## Options
 
-`cem init` writes `cem-generator.config.mjs` and supports `--plugin <names...>`,
+`cem init` writes `cem-generator.config.mjs`. In interactive mode it first asks
+which parser plugins to use, then presents a multi-select list of integrations:
+`react-wrappers`, `jsx-types`, `vuejs-types`, and `svelte-types`. The type
+integrations use `./types` and strongly typed events by default. The command
+also supports `--plugin <names...>`,
 `--yes`, `--force`, and `--config <path>`.
 
+`cem generate` uses source-oriented include/exclude defaults when those flags
+are omitted. Supplying either flag replaces its defaults. The TypeScript
+configuration still controls which files enter the program.
+
+When `cem init` installs dependencies, CLI mode installs
+`@wc-toolkit/cem-generator-cli`, while code mode installs
+`@wc-toolkit/cem-generator` and `tsx`. Selected parser and integration
+packages are installed alongside the workflow package. The command prints the
+`package.json` script to add and the package-manager command to run it.
+
+In an interactive terminal, use the arrow keys to move through lists, Space to
+toggle checkbox selections, and Enter to confirm. Non-interactive input falls
+back to comma-separated selection numbers.
+
 | Option | Description | Default |
 |--------|-------------|---------|
 | `-c, --config <path>` | Path to tsconfig.json | `./tsconfig.json` |
 | `-o, --output <path>` | Output file path | `./custom-elements.json` |
-| `--include <patterns...>` | Glob patterns to include | - |
-| `--exclude <patterns...>` | Glob patterns to exclude | - |
+| `--include <patterns...>` | Glob patterns to include | `src/**/*.{ts,tsx,js,jsx}` when `src/` exists |
+| `--exclude <patterns...>` | Glob patterns to exclude | Tests, specs, stories, `dist/`, and `node_modules/` |
 | `--no-inheritance` | Disable inheritance materialization | - |
 | `--plugin <paths...>` | Additional plugin paths to load | - |
 | `--conflict-policy <policy>` | Detector conflict policy: `throw` \| `last-wins` | `last-wins` |

package/dist/cli.js

@@ -6,6 +6,7 @@ import fs from "node:fs";
 import readline from "node:readline/promises";
 import { stdin as input, stdout as output } from "node:process";
 import { spawnSync } from "node:child_process";
+import inquirer from "inquirer";
 import { generateCem, loadConfig, mergeConfig } from "@wc-toolkit/cem-generator";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -18,6 +19,40 @@ const PLUGIN_CHOICES = [
     { name: "solid", packageName: "@wc-toolkit/cem-generator-solid", factory: "solidPlugin" },
     { name: "svelte", packageName: "@wc-toolkit/cem-generator-svelte", factory: "sveltePlugin" },
 ];
+const INTEGRATION_CHOICES = [
+    {
+        name: "react-wrappers",
+        packageName: "@wc-toolkit/react-wrappers",
+        factory: "reactWrapperGeneratorPlugin",
+        options: { stronglyTypedEvents: true },
+    },
+    {
+        name: "jsx-types",
+        packageName: "@wc-toolkit/jsx-types",
+        factory: "jsxTypesGeneratorPlugin",
+        options: { outdir: "./types", stronglyTypedEvents: true },
+    },
+    {
+        name: "vuejs-types",
+        packageName: "@wc-toolkit/vuejs-types",
+        factory: "vuejsTypesGeneratorPlugin",
+        options: { outdir: "./types", stronglyTypedEvents: true },
+    },
+    {
+        name: "svelte-types",
+        packageName: "@wc-toolkit/svelte-types",
+        factory: "svelteTypesGeneratorPlugin",
+        options: { outdir: "./types", stronglyTypedEvents: true },
+    },
+];
+const DEFAULT_SOURCE_INCLUDE = ["src/**/*.{ts,tsx,js,jsx}"];
+const DEFAULT_SOURCE_EXCLUDE = [
+    "**/*.test.*",
+    "**/*.spec.*",
+    "**/*.stories.*",
+    "**/dist/**",
+    "**/node_modules/**",
+];
 const program = new Command();
 program
     .name("cem")
@@ -47,8 +82,8 @@ program
         });
         const cliOptions = {
             tsConfigPath: path.resolve(options.tsconfig),
-            include: options.include,
-            exclude: options.exclude,
+            include: options.include ?? getDefaultInclude(cwd),
+            exclude: options.exclude ?? DEFAULT_SOURCE_EXCLUDE,
             sort: options.sort !== false,
         };
         if (options.deprecatedLast) {
@@ -111,28 +146,47 @@ program
     .option("-c, --config <path>", "Config file path", "./cem-generator.config.mjs")
     .option("--mode <mode>", "How to run the generator: cli | code")
     .option("--output <path>", "Generated code file path", "./generate-cem.ts")
-    .option("--plugin <names...>", "Plugins to include (lit, fast, stencil, preact, vue, solid, svelte)")
+    .option("--plugin <names...>", "Parser plugins to include (lit, fast, stencil, preact, vue, solid, svelte)")
     .option("--install", "Install selected plugin packages")
     .option("--yes", "Create a config without prompting for plugins")
     .option("--force", "Overwrite existing output files")
     .action(async (options) => {
     try {
+        const cwd = process.cwd();
         let mode;
         let selectedNames;
+        let selectedIntegrationNames;
         if (options.yes) {
             mode = options.mode ? validateInitMode(options.mode) : "cli";
             selectedNames = [];
+            selectedIntegrationNames = [];
         }
         else if (options.mode) {
             mode = validateInitMode(options.mode);
-            selectedNames = options.plugin ? validatePluginNames(options.plugin) : await promptForPlugins();
+            if (options.plugin) {
+                selectedNames = validatePluginNames(options.plugin);
+                selectedIntegrationNames = [];
+            }
+            else {
+                ({ selectedNames, selectedIntegrationNames } = await promptForPluginsAndIntegrations());
+            }
         }
         else {
-            ({ mode, selectedNames } = options.plugin
+            ({ mode, selectedNames, selectedIntegrationNames } = options.plugin
                 ? await promptForModeAndPlugins(options.plugin)
                 : await promptForModeAndPlugins());
         }
         const selectedPlugins = PLUGIN_CHOICES.filter((plugin) => selectedNames.includes(plugin.name));
+        const selectedIntegrations = INTEGRATION_CHOICES.filter((integration) => selectedIntegrationNames.includes(integration.name));
+        const generatorPackage = mode === "cli"
+            ? "@wc-toolkit/cem-generator-cli"
+            : "@wc-toolkit/cem-generator";
+        const packagesToInstall = [
+            generatorPackage,
+            ...(mode === "code" ? ["tsx"] : []),
+            ...selectedPlugins.map((plugin) => plugin.packageName),
+            ...selectedIntegrations.map((integration) => integration.packageName),
+        ];
         const configPath = path.resolve(options.config);
         const outputPath = path.resolve(options.output);
         const targetPaths = mode === "cli" ? [configPath] : [configPath, outputPath];
@@ -140,18 +194,19 @@ program
         if (existingPath && !options.force) {
             throw new Error(`Output file already exists: ${existingPath}. Use --force to overwrite it.`);
         }
-        const shouldInstall = options.install ?? (!options.yes && !options.mode && selectedPlugins.length > 0
+        const shouldInstall = options.install ?? (!options.yes && !options.mode
             ? await promptForInstall()
             : false);
-        if (shouldInstall && selectedPlugins.length > 0) {
-            installPluginDependencies(selectedPlugins.map((plugin) => plugin.packageName));
+        if (shouldInstall) {
+            installPluginDependencies(packagesToInstall);
         }
-        fs.writeFileSync(configPath, createConfigSource(selectedPlugins), "utf-8");
+        fs.writeFileSync(configPath, createConfigSource(selectedPlugins, selectedIntegrations, getDefaultInclude(cwd), DEFAULT_SOURCE_EXCLUDE), "utf-8");
         console.log(`Created config file at ${configPath}`);
         if (mode === "code") {
             fs.writeFileSync(outputPath, createCodeSource(configPath, outputPath), "utf-8");
             console.log(`Created code file at ${outputPath}`);
         }
+        printNextSteps(mode, configPath, outputPath);
     }
     catch (error) {
         console.error("Error initializing project:", error instanceof Error ? error.message : error);
@@ -164,6 +219,9 @@ function validateInitMode(mode) {
     }
     return mode;
 }
+function getDefaultInclude(cwd) {
+    return fs.existsSync(path.join(cwd, "src")) ? DEFAULT_SOURCE_INCLUDE : undefined;
+}
 async function promptForMode(prompt) {
     const answer = await prompt.question("How will you run the generator? (1) CLI (2) code: ");
     if (answer.trim() === "1" || answer.trim().toLowerCase() === "cli")
@@ -174,7 +232,14 @@ async function promptForMode(prompt) {
 }
 async function promptForModeAndPlugins(pluginNames) {
     if (pluginNames) {
-        return { mode: await promptForModeWithInput(), selectedNames: validatePluginNames(pluginNames) };
+        return {
+            mode: await promptForModeWithInput(),
+            selectedNames: validatePluginNames(pluginNames),
+            selectedIntegrationNames: [],
+        };
+    }
+    if (isInteractiveTerminal()) {
+        return promptForInteractiveSelections();
     }
     const prompt = readline.createInterface({ input, output });
     const lines = prompt[Symbol.asyncIterator]();
@@ -191,13 +256,37 @@ async function promptForModeAndPlugins(pluginNames) {
         const pluginsLine = await lines.next();
         if (pluginsLine.done)
             throw new Error("No plugin selection provided.");
-        return { mode, selectedNames: parsePluginSelection(pluginsLine.value) };
+        const selectedNames = parsePluginSelection(pluginsLine.value);
+        console.log("Which project integrations should be included? (multi-select)");
+        INTEGRATION_CHOICES.forEach((integration, index) => console.log(`  ${index + 1}. ${integration.name}`));
+        console.log("Enter numbers separated by commas, or press Enter for no integrations.");
+        output.write("Integrations: ");
+        const integrationsLine = await lines.next();
+        if (integrationsLine.done)
+            throw new Error("No integration selection provided.");
+        return {
+            mode,
+            selectedNames,
+            selectedIntegrationNames: parseIntegrationSelection(integrationsLine.value),
+        };
     }
     finally {
         prompt.close();
     }
 }
 async function promptForModeWithInput() {
+    if (isInteractiveTerminal()) {
+        const { mode } = await inquirer.prompt({
+            type: "select",
+            name: "mode",
+            message: "How will you run the generator?",
+            choices: [
+                { name: "CLI", value: "cli" },
+                { name: "Code", value: "code" },
+            ],
+        });
+        return mode;
+    }
     const prompt = readline.createInterface({ input, output });
     try {
         return await promptForMode(prompt);
@@ -207,6 +296,15 @@ async function promptForModeWithInput() {
     }
 }
 async function promptForInstall() {
+    if (isInteractiveTerminal()) {
+        const { install } = await inquirer.prompt({
+            type: "confirm",
+            name: "install",
+            message: "Install selected plugin packages now?",
+            default: true,
+        });
+        return install;
+    }
     const prompt = readline.createInterface({ input, output });
     try {
         const answer = await prompt.question("Install selected plugin packages now? (Y/n): ");
@@ -231,6 +329,35 @@ function installPluginDependencies(packages) {
         throw new Error(`Failed to install plugin packages with ${packageManager}.`);
     }
 }
+function printNextSteps(mode, configPath, outputPath) {
+    console.log("\nNext steps:");
+    const packageManager = detectPackageManager();
+    if (mode === "cli") {
+        const defaultConfigPath = path.resolve(process.cwd(), "cem-generator.config.mjs");
+        const configArgument = configPath === defaultConfigPath ? "" : ` --config ${toCommandPath(configPath)}`;
+        printPackageScript(`cem generate${configArgument}`, packageManager);
+    }
+    else {
+        printPackageScript(`tsx ${toCommandPath(outputPath)}`, packageManager);
+    }
+}
+function printPackageScript(command, packageManager) {
+    const runCommand = packageManager === "npm"
+        ? "npm run cem"
+        : packageManager === "yarn"
+            ? "yarn cem"
+            : packageManager === "bun"
+                ? "bun run cem"
+                : "pnpm run cem";
+    console.log("  Add this script to package.json:");
+    console.log(`    \"cem\": \"${command}\"`);
+    console.log(`  Run it with: ${runCommand}`);
+}
+function toCommandPath(filePath) {
+    const relativePath = path.relative(process.cwd(), filePath).replaceAll(path.sep, "/");
+    const normalizedPath = relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+    return /\s/.test(normalizedPath) ? JSON.stringify(normalizedPath) : normalizedPath;
+}
 function detectPackageManager() {
     if (fs.existsSync(path.resolve("pnpm-lock.yaml")))
         return "pnpm";
@@ -248,41 +375,135 @@ function validatePluginNames(names) {
     }
     return [...new Set(names)];
 }
-async function promptForPlugins(prompt) {
-    console.log("Which framework plugins should be included?");
-    PLUGIN_CHOICES.forEach((plugin, index) => console.log(`  ${index + 1}. ${plugin.name}`));
-    console.log("Enter numbers separated by commas, or press Enter for vanilla only.");
-    const ownPrompt = prompt ? undefined : readline.createInterface({ input, output });
-    const answer = await (prompt ?? ownPrompt).question("Plugins: ");
-    ownPrompt?.close();
-    return parsePluginSelection(answer);
+function validateIntegrationNames(names) {
+    const validNames = new Set(INTEGRATION_CHOICES.map((integration) => integration.name));
+    const invalidNames = names.filter((name) => !validNames.has(name));
+    if (invalidNames.length > 0) {
+        throw new Error(`Unknown integration(s): ${invalidNames.join(", ")}. Choose from: ${[...validNames].join(", ")}`);
+    }
+    return [...new Set(names)];
+}
+async function promptForPluginsAndIntegrations() {
+    if (isInteractiveTerminal()) {
+        const { plugin, integrations } = await inquirer.prompt([
+            {
+                type: "select",
+                name: "plugin",
+                message: "Which framework plugins should be included?",
+                choices: PLUGIN_CHOICES.map((plugin) => ({ name: plugin.name, value: plugin.name })),
+            },
+            {
+                type: "checkbox",
+                name: "integrations",
+                message: "Which project integrations should be included?",
+                choices: INTEGRATION_CHOICES.map((integration) => ({
+                    name: integration.name,
+                    value: integration.name,
+                })),
+            },
+        ]);
+        return { selectedNames: [plugin], selectedIntegrationNames: integrations };
+    }
+    const prompt = readline.createInterface({ input, output });
+    const lines = prompt[Symbol.asyncIterator]();
+    try {
+        console.log("Which framework plugins should be included?");
+        PLUGIN_CHOICES.forEach((plugin, index) => console.log(`  ${index + 1}. ${plugin.name}`));
+        console.log("Enter numbers separated by commas, or press Enter for vanilla only.");
+        output.write("Plugins: ");
+        const pluginsLine = await lines.next();
+        if (pluginsLine.done)
+            throw new Error("No plugin selection provided.");
+        console.log("Which project integrations should be included? (multi-select)");
+        INTEGRATION_CHOICES.forEach((integration, index) => console.log(`  ${index + 1}. ${integration.name}`));
+        console.log("Enter numbers separated by commas, or press Enter for no integrations.");
+        output.write("Integrations: ");
+        const integrationsLine = await lines.next();
+        if (integrationsLine.done)
+            throw new Error("No integration selection provided.");
+        return {
+            selectedNames: parsePluginSelection(pluginsLine.value),
+            selectedIntegrationNames: parseIntegrationSelection(integrationsLine.value),
+        };
+    }
+    finally {
+        prompt.close();
+    }
+}
+async function promptForInteractiveSelections() {
+    const { mode, plugin, integrations } = await inquirer.prompt([
+        {
+            type: "select",
+            name: "mode",
+            message: "How will you run the generator?",
+            choices: [
+                { name: "CLI", value: "cli" },
+                { name: "Code", value: "code" },
+            ],
+        },
+        {
+            type: "select",
+            name: "plugin",
+            message: "Which framework plugins should be included?",
+            choices: PLUGIN_CHOICES.map((plugin) => ({ name: plugin.name, value: plugin.name })),
+        },
+        {
+            type: "checkbox",
+            name: "integrations",
+            message: "Which project integrations should be included?",
+            choices: INTEGRATION_CHOICES.map((integration) => ({
+                name: integration.name,
+                value: integration.name,
+            })),
+        },
+    ]);
+    return { mode, selectedNames: [plugin], selectedIntegrationNames: integrations };
+}
+function isInteractiveTerminal() {
+    return Boolean(input.isTTY && output.isTTY);
 }
 function parsePluginSelection(answer) {
+    return parseSelection(answer, PLUGIN_CHOICES, "plugin");
+}
+function parseIntegrationSelection(answer) {
+    return validateIntegrationNames(parseSelection(answer, INTEGRATION_CHOICES, "integration"));
+}
+function parseSelection(answer, choices, label) {
     const values = answer
         .split(",")
         .map((value) => value.trim())
         .filter(Boolean);
     const names = values.map((value) => {
         const index = Number(value) - 1;
-        if (!Number.isInteger(index) || index < 0 || index >= PLUGIN_CHOICES.length) {
-            throw new Error(`Invalid plugin selection: ${value}`);
+        if (!Number.isInteger(index) || index < 0 || index >= choices.length) {
+            throw new Error(`Invalid ${label} selection: ${value}`);
         }
-        return PLUGIN_CHOICES[index].name;
+        return choices[index].name;
     });
-    return validatePluginNames(names);
+    return names;
 }
-function createConfigSource(plugins) {
-    const imports = plugins.map((plugin) => `import { ${plugin.factory} } from "${plugin.packageName}";`);
-    const factories = plugins.map((plugin) => `    ${plugin.factory}(),`);
+function createConfigSource(plugins, integrations = [], include, exclude = DEFAULT_SOURCE_EXCLUDE) {
+    const choices = [...plugins, ...integrations];
+    const imports = choices.map((plugin) => `import { ${plugin.factory} } from "${plugin.packageName}";`);
+    const factories = choices.map((plugin) => `    ${plugin.factory}(${getPluginOptionsSource(plugin)}),`);
     return [
         ...imports,
         imports.length ? "" : undefined,
         "export default {",
+        ...(include ? [`  include: ${JSON.stringify(include)},`] : []),
+        `  exclude: ${JSON.stringify(exclude)},`,
         ...(factories.length ? ["  plugins: [", ...factories, "  ],"] : []),
         "};",
         "",
     ].filter((line) => line !== undefined).join("\n");
 }
+function getPluginOptionsSource(plugin) {
+    if (!("options" in plugin) || !plugin.options)
+        return "";
+    return `{ ${Object.entries(plugin.options)
+        .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+        .join(", ")} }`;
+}
 function createCodeSource(configPath, outputPath) {
     let configImport = path.relative(path.dirname(outputPath), configPath).replaceAll(path.sep, "/");
     if (!configImport.startsWith("."))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wc-toolkit/cem-generator-cli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI for generating Custom Elements Manifests.",
   "license": "MIT",
   "repository": {
@@ -34,8 +34,9 @@
   "dependencies": {
     "commander": "^12.1.0",
     "custom-elements-manifest": "^2.1.0",
-    "@wc-toolkit/cem-generator": "0.1.1",
-    "@wc-toolkit/cem-generator-utils": "0.1.0"
+    "inquirer": "^14.2.2",
+    "@wc-toolkit/cem-generator": "0.1.2",
+    "@wc-toolkit/cem-generator-utils": "0.1.1"
   },
   "devDependencies": {
     "@types/node": "^26.4.1",