create-packkit 0.4.0 → 0.5.0

package/README.md

@@ -34,8 +34,9 @@ No install needed: **[danmat.github.io/create-packkit](https://danmat.github.io/
 |---|---|
 | **Language** | TypeScript (strict) · JavaScript (ESM) |
 | **Module format** | ESM · CJS · dual (proper `exports` map) |
-| **Target** | Library · CLI tool · **HTTP service (Hono)** · any combination |
-| **Framework** | None · **React** (component library — JSX, peer deps, jsdom tests) |
+| **Target** | Library · CLI tool · **HTTP service (Hono)** · **App (Vite SPA)** · any combination |
+| **Framework** | None · **React** · **Vue** · **Svelte** (component libraries or apps) |
+| **Storybook** | optional, for React / Vue / Svelte component libraries |
 | **Bundler** | tsup · tsdown · unbuild · rollup · none (tsc) · optional **minify** |
 | **Tests** | Vitest · Jest · node:test · none (+ coverage) |
 | **Lint/format** | ESLint + Prettier · Biome · oxlint · none |
@@ -48,7 +49,7 @@ No install needed: **[danmat.github.io/create-packkit](https://danmat.github.io/
 
 ## Presets
 
-`ts-lib` · `js-lib` · `ts-cli` / `cli` · `react-lib` · `react-lib-js` · `node-service` · `oss` · `minimal` · `full` — named bundles of the options above. See the [roadmap](ROADMAP.md) for what's next.
+`ts-lib` · `js-lib` · `ts-cli` / `cli` · `react-lib` · `react-lib-js` · `react-app` · `vue-lib` · `svelte-lib` · `node-service` · `oss` · `minimal` · `full` — named bundles of the options above. See the [roadmap](ROADMAP.md) for what's next.
 
 ## How it works
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packkit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Highly configurable scaffolder for modern npm packages and CLIs — pick your stack (TS/JS, bundler, tests, linter, CI, releases) from a CLI or a web configurator.",
   "type": "module",
   "bin": {

package/src/cli/args.js

@@ -42,6 +42,8 @@ export function parseCliArgs(argv) {
       minify: { type: 'boolean' },
       target: { type: 'string', multiple: true },
       workflows: { type: 'string', multiple: true },
+      minify: { type: 'boolean' },
+      storybook: { type: 'boolean' },
       help: { type: 'boolean', short: 'h' },
       version: { type: 'boolean', short: 'v' },
       ...Object.fromEntries(Object.keys(OVERRIDE_FLAGS).map((k) => [k, { type: 'string' }])),
@@ -62,6 +64,7 @@ export function parseCliArgs(argv) {
   if (values.target) overrides.target = values.target;
   if (values.workflows) overrides.workflows = values.workflows;
   if (values.minify) overrides.minify = true;
+  if (values.storybook) overrides.storybook = true;
   for (const [flag, key] of Object.entries(NEGATABLE)) {
     if (values[flag]) overrides[key] = false;
   }

package/src/cli/index.js

@@ -33,8 +33,8 @@ Options:
   --no-install        Skip dependency install
   --no-git            Skip git init
   --pm <manager>      npm | pnpm | yarn | bun
-  --language <ts|js>  --module <esm|cjs|dual>  --framework <none|react>
-  --target <library|cli|service>   (repeatable)
+  --language <ts|js>  --module <esm|cjs|dual>  --framework <none|react|vue|svelte>
+  --target <library|cli|service|app>   (repeatable)   --storybook
   --bundler <tsup|tsdown|unbuild|rollup|none>   --minify
   --test <vitest|jest|node|none>  --lint <eslint-prettier|biome|oxlint|none>
   --hooks <simple-git-hooks|husky|lefthook|none>  --release <changesets|release-it|np|none>
@@ -98,8 +98,8 @@ export async function run(argv = process.argv.slice(2)) {
   const next = [
     args.here ? null : `cd ${rel}`,
     config.install ? null : `${config.packageManager} install`,
-    summary.stack.includes('tsup') || summary.stack.includes('tsdown') ? `${runWord(config)} build` : null,
-    summary.stack.some((s) => ['vitest', 'jest'].includes(s)) ? `${runWord(config)} test` : null,
+    config.hasApp ? `${runWord(config)} dev` : config.hasBuild ? `${runWord(config)} build` : null,
+    config.test !== 'none' ? `${runWord(config)} test` : null,
   ].filter(Boolean);
 
   const done = `Created ${summary.name} — ${summary.fileCount} files · ${summary.stack.join(' · ')}`;

package/src/core/features/agents.js

@@ -12,7 +12,7 @@ export default {
     if (cfg.isTs) commands.push(`- Type-check: \`${run('typecheck')}\``);
     if (cfg.lint !== 'none') commands.push(`- Lint: \`${run('lint')}\``);
     if (cfg.test !== 'none') commands.push(`- Test: \`${test}\``);
-    if (cfg.bundler !== 'none' || cfg.isTs) commands.push(`- Build: \`${run('build')}\``);
+    if (cfg.hasBuild) commands.push(`- Build: \`${run('build')}\``);
 
     const stack = [
       `- Language: ${cfg.isTs ? 'TypeScript (strict)' : 'JavaScript (ESM)'}`,

package/src/core/features/bundler.js

@@ -3,7 +3,7 @@
 
 export default {
   id: 'bundler',
-  active: () => true,
+  active: (cfg) => !cfg.customBuild, // Vite / Svelte-lib own their own build wiring
   apply(cfg) {
     const files = {};
     const pkg = { scripts: {} };

package/src/core/features/frameworks.js

@@ -0,0 +1,156 @@
+// React / Vue / Svelte source + dependencies, for both component libraries and
+// Vite apps. The Vite build wiring lives in vite.js; here we emit the source
+// files, the runtime deps (peer for libs, direct for apps), and — for Svelte
+// libraries, which ship uncompiled source — the package entry points.
+
+export default {
+  id: 'frameworks',
+  active: (cfg) => cfg.hasFramework,
+  apply(cfg) {
+    const files = {};
+    const pkg = { devDependencies: {}, scripts: {} };
+    const forApp = cfg.hasApp;
+
+    if (cfg.isReact) react(cfg, files, pkg, forApp);
+    else if (cfg.isVue) vue(cfg, files, pkg, forApp);
+    else if (cfg.isSvelte) svelte(cfg, files, pkg, forApp);
+
+    return { files, pkg };
+  },
+};
+
+/* --------------------------------- React --------------------------------- */
+function react(cfg, files, pkg, forApp) {
+  const x = cfg.isTs ? 'tsx' : 'jsx';
+  if (forApp) {
+    files['index.html'] = htmlShell(cfg, `/src/main.${x}`);
+    files[`src/main.${x}`] = [
+      `import { StrictMode } from 'react';`,
+      `import { createRoot } from 'react-dom/client';`,
+      `import { App } from './App.${x === 'tsx' ? 'js' : 'js'}';`,
+      ``,
+      `createRoot(document.getElementById('root')${cfg.isTs ? '!' : ''}).render(`,
+      `\t<StrictMode><App /></StrictMode>,`,
+      `);`,
+      ``,
+    ].join('\n');
+    files[`src/App.${x}`] = [
+      `export function App() {`,
+      `\treturn <h1>Hello from ${cfg.name}</h1>;`,
+      `}`,
+      ``,
+    ].join('\n');
+    pkg.dependencies = { react: '^18.3.0', 'react-dom': '^18.3.0' };
+  } else {
+    files[`src/index.${x}`] = cfg.isTs
+      ? [
+          `export interface ButtonProps {`,
+          `\tlabel: string;`,
+          `\tonClick?: () => void;`,
+          `}`,
+          ``,
+          `export function Button({ label, onClick }: ButtonProps) {`,
+          `\treturn <button onClick={onClick}>{label}</button>;`,
+          `}`,
+          ``,
+        ].join('\n')
+      : [`export function Button({ label, onClick }) {`, `\treturn <button onClick={onClick}>{label}</button>;`, `}`, ``].join('\n');
+    pkg.peerDependencies = { react: '>=18', 'react-dom': '>=18' };
+    pkg.devDependencies.react = '^18.3.0';
+    pkg.devDependencies['react-dom'] = '^18.3.0';
+  }
+  if (cfg.isTs) {
+    pkg.devDependencies['@types/react'] = '^18.3.0';
+    pkg.devDependencies['@types/react-dom'] = '^18.3.0';
+  }
+}
+
+/* ---------------------------------- Vue ---------------------------------- */
+function vue(cfg, files, pkg, forApp) {
+  const script = cfg.isTs ? `<script setup lang="ts">` : `<script setup>`;
+  if (forApp) {
+    files['index.html'] = htmlShell(cfg, `/src/main.${cfg.ext}`);
+    files[`src/main.${cfg.ext}`] = [
+      `import { createApp } from 'vue';`,
+      `import App from './App.vue';`,
+      ``,
+      `createApp(App).mount('#root');`,
+      ``,
+    ].join('\n');
+    files['src/App.vue'] = [script, `</script>`, ``, `<template>`, `\t<h1>Hello from ${cfg.name}</h1>`, `</template>`, ``].join('\n');
+    pkg.dependencies = { vue: '^3.4.0' };
+  } else {
+    files[`src/index.${cfg.ext}`] = `export { default as Button } from './Button.vue';\n`;
+    files['src/Button.vue'] = [
+      script,
+      `defineProps${cfg.isTs ? '<{ label: string }>()' : "(['label'])"};`,
+      `</script>`,
+      ``,
+      `<template>`,
+      `\t<button><slot>{{ label }}</slot></button>`,
+      `</template>`,
+      ``,
+    ].join('\n');
+    pkg.peerDependencies = { vue: '>=3' };
+    pkg.devDependencies.vue = '^3.4.0';
+  }
+}
+
+/* -------------------------------- Svelte --------------------------------- */
+function svelte(cfg, files, pkg, forApp) {
+  const script = cfg.isTs ? `<script lang="ts">` : `<script>`;
+  // Shared by the Vite app build and the Vitest (test) config; enables TS in SFCs.
+  files['svelte.config.js'] = `import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nexport default { preprocess: vitePreprocess() };\n`;
+  pkg.devDependencies['@sveltejs/vite-plugin-svelte'] = '^4.0.0';
+  if (cfg.isTs) pkg.devDependencies['svelte-check'] = '^4.0.0';
+  if (forApp) {
+    files['index.html'] = htmlShell(cfg, `/src/main.${cfg.ext}`);
+    files[`src/main.${cfg.ext}`] = [
+      `import { mount } from 'svelte';`,
+      `import App from './App.svelte';`,
+      ``,
+      `const app = mount(App, { target: document.getElementById('root')${cfg.isTs ? '!' : ''} });`,
+      `export default app;`,
+      ``,
+    ].join('\n');
+    files['src/App.svelte'] = [script, `</script>`, ``, `<h1>Hello from ${cfg.name}</h1>`, ``].join('\n');
+    pkg.dependencies = { svelte: '^5.0.0' };
+  } else {
+    // Svelte libraries ship uncompiled source; the consumer's bundler compiles.
+    files[`src/index.${cfg.ext}`] = `export { default as Button } from './Button.svelte';\n`;
+    files['src/Button.svelte'] = [
+      script,
+      cfg.isTs ? `\tinterface Props { label: string; }` : ``,
+      cfg.isTs ? `\tconst { label }: Props = $props();` : `\tconst { label } = $props();`,
+      `</script>`,
+      ``,
+      `<button>{label}</button>`,
+      ``,
+    ].filter((l) => l !== ``).join('\n') + '\n';
+    pkg.peerDependencies = { svelte: '>=5' };
+    pkg.devDependencies.svelte = '^5.0.0';
+    // Ship source; point consumers at it.
+    pkg.svelte = `./src/index.${cfg.ext}`;
+    pkg.exports = { '.': { svelte: `./src/index.${cfg.ext}`, default: `./src/index.${cfg.ext}` } };
+    pkg.files = ['src'];
+    pkg.type = 'module';
+  }
+}
+
+function htmlShell(cfg, entry) {
+  return [
+    `<!doctype html>`,
+    `<html lang="en">`,
+    `\t<head>`,
+    `\t\t<meta charset="UTF-8" />`,
+    `\t\t<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
+    `\t\t<title>${cfg.name}</title>`,
+    `\t</head>`,
+    `\t<body>`,
+    `\t\t<div id="root"></div>`,
+    `\t\t<script type="module" src="${entry}"></script>`,
+    `\t</body>`,
+    `</html>`,
+    ``,
+  ].join('\n');
+}

package/src/core/features/index.js

@@ -4,7 +4,8 @@
 import meta from './meta.js';
 import bundler from './bundler.js';
 import typescript from './typescript.js';
-import react from './react.js';
+import frameworks from './frameworks.js';
+import vite from './vite.js';
 import service from './service.js';
 import test from './test.js';
 import lint from './lint.js';
@@ -12,6 +13,7 @@ import githooks from './githooks.js';
 import release from './release.js';
 import cli from './cli.js';
 import workflows from './workflows.js';
+import storybook from './storybook.js';
 import community from './community.js';
 import agents from './agents.js';
 import vscode from './vscode.js';
@@ -21,7 +23,8 @@ export default [
   meta,
   bundler,
   typescript,
-  react,
+  frameworks,
+  vite,
   service,
   test,
   lint,
@@ -29,6 +32,7 @@ export default [
   release,
   cli,
   workflows,
+  storybook,
   community,
   agents,
   vscode,

package/src/core/features/meta.js

@@ -23,10 +23,11 @@ export default {
       pkg.homepage = `${cfg.repo.replace(/\.git$/, '')}#readme`;
     }
 
-    // Source entry point.
-    files[`src/index.${cfg.srcExt}`] = cfg.hasLibrary
-      ? libraryEntry(cfg)
-      : `// ${cfg.name}\n`;
+    // Source entry point — only the plain library entry lives here; framework
+    // and app/cli/service modules write their own source.
+    if (cfg.hasLibrary && !cfg.hasFramework) {
+      files[`src/index.${cfg.ext}`] = libraryEntry(cfg);
+    }
 
     // README
     files['README.md'] = readme(cfg);
@@ -34,8 +35,15 @@ export default {
     // Node version pin
     files['.nvmrc'] = `${cfg.nodeVersion}\n`;
 
-    // A typecheck script for TS projects regardless of bundler.
-    if (cfg.isTs) pkg.scripts.typecheck = 'tsc --noEmit';
+    // A typecheck script for TS projects — framework-aware (plain tsc can't
+    // resolve .vue/.svelte modules).
+    if (cfg.isTs) {
+      pkg.scripts.typecheck = cfg.isVue
+        ? 'vue-tsc --noEmit'
+        : cfg.isSvelte
+          ? 'svelte-check --tsconfig ./tsconfig.json'
+          : 'tsc --noEmit';
+    }
 
     return { files, pkg };
   },
@@ -65,32 +73,8 @@ function libraryEntry(cfg) {
   ].join('\n');
 }
 
-function reactEntry(cfg) {
-  if (cfg.isTs) {
-    return [
-      `export interface ButtonProps {`,
-      `\t/** Text shown inside the button. */`,
-      `\tlabel: string;`,
-      `\tonClick?: () => void;`,
-      `}`,
-      ``,
-      `/** A tiny example component — replace me. */`,
-      `export function Button({ label, onClick }: ButtonProps) {`,
-      `\treturn <button onClick={onClick}>{label}</button>;`,
-      `}`,
-      ``,
-    ].join('\n');
-  }
-  return [
-    `/**`,
-    ` * A tiny example component — replace me.`,
-    ` * @param {{ label: string, onClick?: () => void }} props`,
-    ` */`,
-    `export function Button({ label, onClick }) {`,
-    `\treturn <button onClick={onClick}>{label}</button>;`,
-    `}`,
-    ``,
-  ].join('\n');
+function run(cfg, script) {
+  return cfg.packageManager === 'npm' ? `npm run ${script}` : `${cfg.packageManager} ${script}`;
 }
 
 function readme(cfg) {
@@ -114,10 +98,17 @@ function readme(cfg) {
     '',
   ];
 
-  if (cfg.hasLibrary && cfg.isReact) {
+  if (cfg.hasApp) {
+    lines.push('## Develop', '', '```sh', run(cfg, 'dev') + '     # start the dev server', run(cfg, 'build') + '   # production build', '```', '');
+  } else if (cfg.hasLibrary && cfg.isReact) {
     lines.push('## Usage', '', '```' + (cfg.isTs ? 'tsx' : 'jsx'),
-      `import { Button } from '${cfg.name}';`, '',
-      `<Button label="Click me" onClick={() => alert('hi')} />`, '```', '');
+      `import { Button } from '${cfg.name}';`, '', `<Button label="Click me" />`, '```', '');
+  } else if (cfg.hasLibrary && cfg.isVue) {
+    lines.push('## Usage', '', '```' + (cfg.isTs ? 'ts' : 'js'),
+      `import { Button } from '${cfg.name}';`, '// then <Button label="Click me" /> in your template', '```', '');
+  } else if (cfg.hasLibrary && cfg.isSvelte) {
+    lines.push('## Usage', '', '```svelte',
+      `<script>import { Button } from '${cfg.name}';</script>`, '', `<Button label="Click me" />`, '```', '');
   } else if (cfg.hasLibrary) {
     const imp = cfg.isTs || cfg.hasEsm ? `import { greet } from '${cfg.name}';` : `const { greet } = require('${cfg.name}');`;
     lines.push('## Usage', '', '```' + (cfg.isTs ? 'ts' : 'js'), imp, '', `greet('world'); // "Hello, world!"`, '```', '');

package/src/core/features/release.js

@@ -40,5 +40,5 @@ export default {
 };
 
 function buildThen(cfg) {
-  return cfg.bundler !== 'none' || cfg.isTs ? 'npm run build && ' : '';
+  return cfg.hasBuild ? 'npm run build && ' : '';
 }

package/src/core/features/storybook.js

@@ -0,0 +1,87 @@
+// Storybook for component libraries (React / Vue / Svelte), on the Vite builder.
+
+const FW = {
+  react: { builder: '@storybook/react-vite', renderer: '@storybook/react', storyExt: 'tsx' },
+  vue: { builder: '@storybook/vue3-vite', renderer: '@storybook/vue3', storyExt: 'ts' },
+  svelte: { builder: '@storybook/svelte-vite', renderer: '@storybook/svelte', storyExt: 'ts' },
+};
+
+export default {
+  id: 'storybook',
+  active: (cfg) => cfg.storybook,
+  apply(cfg) {
+    const fw = FW[cfg.framework];
+    const files = {};
+
+    files['.storybook/main.ts'] = [
+      `import type { StorybookConfig } from '${fw.builder}';`,
+      ``,
+      `const config: StorybookConfig = {`,
+      `\tstories: ['../src/**/*.stories.@(ts|tsx|svelte)'],`,
+      `\taddons: ['@storybook/addon-essentials'],`,
+      `\tframework: '${fw.builder}',`,
+      `};`,
+      `export default config;`,
+      ``,
+    ].join('\n');
+
+    files['.storybook/preview.ts'] = `export default { parameters: {} };\n`;
+
+    files[`src/Button.stories.${fw.storyExt}`] = story(cfg, fw);
+
+    return {
+      files,
+      pkg: {
+        scripts: {
+          storybook: 'storybook dev -p 6006',
+          'build-storybook': 'storybook build',
+        },
+        devDependencies: {
+          storybook: '^8.2.0',
+          [fw.builder]: '^8.2.0',
+          [fw.renderer]: '^8.2.0',
+          '@storybook/addon-essentials': '^8.2.0',
+          vite: '^5.4.0',
+        },
+      },
+    };
+  },
+};
+
+function story(cfg, fw) {
+  if (cfg.isReact) {
+    return [
+      `import type { Meta, StoryObj } from '${fw.renderer}';`,
+      `import { Button } from './index';`,
+      ``,
+      `const meta: Meta<typeof Button> = { component: Button };`,
+      `export default meta;`,
+      ``,
+      `export const Default: StoryObj<typeof Button> = { args: { label: 'Click me' } };`,
+      ``,
+    ].join('\n');
+  }
+  if (cfg.isVue) {
+    return [
+      `import type { Meta, StoryObj } from '${fw.renderer}';`,
+      `import { Button } from './index';`,
+      ``,
+      `const meta = { component: Button } satisfies Meta<typeof Button>;`,
+      `export default meta;`,
+      ``,
+      `export const Default: StoryObj<typeof meta> = { args: { label: 'Click me' } };`,
+      ``,
+    ].join('\n');
+  }
+  // svelte
+  return [
+    `import type { Meta, StoryObj } from '${fw.renderer}';`,
+    `import Button from './Button.svelte';`,
+    ``,
+    `const meta = { component: Button } satisfies Meta<Button>;`,
+    `export default meta;`,
+    ``,
+    `export const Default: StoryObj<typeof meta> = { args: { label: 'Click me' } };`,
+    ``,
+  ].join('\n');
+}

package/src/core/features/test.js

@@ -11,13 +11,23 @@ export default {
     const testExt = cfg.isReact ? cfg.srcExt : ext;
 
     if (cfg.test === 'vitest') {
+      const fw = cfg.isVue
+        ? { imp: `import vue from '@vitejs/plugin-vue';`, call: 'vue()' }
+        : cfg.isSvelte
+          ? {
+              imp: `import { svelte } from '@sveltejs/vite-plugin-svelte';\nimport { svelteTesting } from '@testing-library/svelte/vite';`,
+              call: 'svelte(), svelteTesting()',
+            }
+          : null;
       files[`vitest.config.${ext}`] = [
+        fw ? fw.imp : null,
         `import { defineConfig } from 'vitest/config';`,
         ``,
         `export default defineConfig({`,
+        fw ? `\tplugins: [${fw.call}],` : null,
         `\ttest: {`,
-        cfg.isReact ? `\t\tenvironment: 'jsdom',` : null,
-        cfg.isReact ? `\t\tglobals: true,` : null,
+        cfg.hasFramework ? `\t\tenvironment: 'jsdom',` : null,
+        cfg.hasFramework ? `\t\tglobals: true,` : null,
         cfg.coverage ? `\t\tcoverage: { provider: 'v8', reporter: ['text', 'lcov'] },` : null,
         `\t},`,
         `});`,
@@ -26,10 +36,12 @@ export default {
       pkg.scripts.test = 'vitest run';
       pkg.scripts['test:watch'] = 'vitest';
       pkg.devDependencies.vitest = '^2.0.0';
-      if (cfg.isReact) {
+      if (cfg.hasFramework) {
         pkg.devDependencies.jsdom = '^25.0.0';
-        pkg.devDependencies['@testing-library/react'] = '^16.0.0';
         pkg.devDependencies['@testing-library/dom'] = '^10.0.0';
+        if (cfg.isReact) pkg.devDependencies['@testing-library/react'] = '^16.0.0';
+        if (cfg.isVue) pkg.devDependencies['@testing-library/vue'] = '^8.1.0';
+        if (cfg.isSvelte) pkg.devDependencies['@testing-library/svelte'] = '^5.2.0';
       }
       if (cfg.coverage) {
         pkg.scripts.coverage = 'vitest run --coverage';
@@ -79,16 +91,32 @@ function exampleTest(runner, cfg) {
       ``,
     ].join('\n');
   }
-  if (cfg.isReact) {
+  if (cfg.hasFramework) {
     const api = runner === 'jest' ? '' : `import { describe, it, expect } from 'vitest';\n`;
+    const app = cfg.hasApp;
+    const label = app ? '/Hello from/' : `'Click me'`;
+    let lib, importLine, renderCall;
+    if (cfg.isReact) {
+      lib = '@testing-library/react';
+      importLine = app ? `import { App } from './App.js';` : `import { Button } from './index.js';`;
+      renderCall = app ? `render(<App />)` : `render(<Button label="Click me" />)`;
+    } else if (cfg.isVue) {
+      lib = '@testing-library/vue';
+      importLine = app ? `import App from './App.vue';` : `import { Button } from './index.js';`;
+      renderCall = app ? `render(App)` : `render(Button, { props: { label: 'Click me' } })`;
+    } else {
+      lib = '@testing-library/svelte';
+      importLine = app ? `import App from './App.svelte';` : `import Button from './Button.svelte';`;
+      renderCall = app ? `render(App)` : `render(Button, { props: { label: 'Click me' } })`;
+    }
     return [
-      api + `import { render, screen } from '@testing-library/react';`,
-      `import { Button } from '${imp}';`,
+      api + `import { render, screen } from '${lib}';`,
+      importLine,
       ``,
-      `describe('Button', () => {`,
-      `\tit('renders its label', () => {`,
-      `\t\trender(<Button label="Click me" />);`,
-      `\t\texpect(screen.getByText('Click me')).toBeDefined();`,
+      `describe('${app ? 'App' : 'Button'}', () => {`,
+      `\tit('renders', () => {`,
+      `\t\t${renderCall};`,
+      `\t\texpect(screen.getByText(${label})).toBeDefined();`,
       `\t});`,
       `});`,
       ``,

package/src/core/features/typescript.js

@@ -4,19 +4,20 @@ export default {
   id: 'typescript',
   active: (cfg) => cfg.isTs,
   apply(cfg) {
-    const noBuild = cfg.bundler === 'none';
+    const noBuild = cfg.bundler === 'none' && !cfg.customBuild;
+    const webLibs = cfg.hasFramework || cfg.hasApp;
     const compilerOptions = {
       target: 'ES2022',
       module: 'ESNext',
       moduleResolution: 'Bundler',
-      lib: cfg.isReact ? ['ES2022', 'DOM', 'DOM.Iterable'] : ['ES2022'],
+      lib: webLibs ? ['ES2022', 'DOM', 'DOM.Iterable'] : ['ES2022'],
       ...(cfg.isReact ? { jsx: 'react-jsx' } : {}),
       strict: true,
       noUncheckedIndexedAccess: true,
       esModuleInterop: true,
       skipLibCheck: true,
       forceConsistentCasingInFileNames: true,
-      verbatimModuleSyntax: cfg.bundler !== 'none',
+      verbatimModuleSyntax: cfg.bundler !== 'none' && !cfg.hasFramework,
       declaration: true,
     };
     if (noBuild) {

package/src/core/features/vite.js

@@ -0,0 +1,66 @@
+// Vite build path: powers Vite SPA apps (React/Vue/Svelte) and Vue component
+// libraries (SFCs need a real compiler). Owns the vite config, build scripts,
+// and — for libraries — the package entry points. index.html + source come
+// from frameworks.js. Svelte libraries ship source and don't come through here.
+
+const PLUGIN = {
+  react: { import: `import react from '@vitejs/plugin-react';`, call: 'react()', dep: { '@vitejs/plugin-react': '^4.3.0' } },
+  vue: { import: `import vue from '@vitejs/plugin-vue';`, call: 'vue()', dep: { '@vitejs/plugin-vue': '^5.1.0' } },
+  svelte: { import: `import { svelte } from '@sveltejs/vite-plugin-svelte';`, call: 'svelte()', dep: { '@sveltejs/vite-plugin-svelte': '^4.0.0' } },
+};
+
+export default {
+  id: 'vite',
+  active: (cfg) => cfg.viteBuild,
+  apply(cfg) {
+    const files = {};
+    const pkg = { scripts: {}, devDependencies: { vite: '^5.4.0' } };
+    const p = PLUGIN[cfg.framework];
+    Object.assign(pkg.devDependencies, p.dep);
+    if (cfg.isVue && cfg.isTs) pkg.devDependencies['vue-tsc'] = '^2.0.0';
+
+    if (cfg.hasApp) {
+      // Front-end SPA — not a published package.
+      files[`vite.config.${cfg.ext}`] = [p.import, ``, `import { defineConfig } from 'vite';`, ``, `export default defineConfig({`, `\tplugins: [${p.call}],`, `});`, ``].join('\n');
+      pkg.private = true;
+      pkg.scripts.dev = 'vite';
+      // React/Vue get a type-check before build; Svelte types need svelte-check
+      // (heavier), so its app just builds.
+      const precheck = cfg.isTs && cfg.isReact ? 'tsc --noEmit && ' : cfg.isTs && cfg.isVue ? 'vue-tsc --noEmit && ' : '';
+      pkg.scripts.build = precheck + 'vite build';
+      pkg.scripts.preview = 'vite preview';
+    } else {
+      // Vue component library (lib build + declarations).
+      files[`vite.config.${cfg.ext}`] = [
+        p.import,
+        `import dts from 'vite-plugin-dts';`,
+        ``,
+        `import { defineConfig } from 'vite';`,
+        ``,
+        `export default defineConfig({`,
+        `\tplugins: [${p.call}, dts({ rollupTypes: true })],`,
+        `\tbuild: {`,
+        `\t\tlib: { entry: 'src/index.${cfg.ext}', formats: ['es', 'cjs'], fileName: (f) => (f === 'es' ? 'index.js' : 'index.cjs') },`,
+        `\t\trollupOptions: { external: ['vue'] },`,
+        `\t},`,
+        `});`,
+        ``,
+      ].join('\n');
+      pkg.scripts.build = 'vite build';
+      pkg.scripts.dev = 'vite build --watch';
+      pkg.devDependencies['vite-plugin-dts'] = '^4.0.0';
+      if (cfg.isVue) pkg.devDependencies['vue-tsc'] = '^2.0.0';
+      // entry points
+      pkg.files = ['dist'];
+      pkg.type = 'module';
+      pkg.main = './dist/index.cjs';
+      pkg.module = './dist/index.js';
+      pkg.types = './dist/index.d.ts';
+      pkg.exports = { '.': { types: './dist/index.d.ts', import: './dist/index.js', require: './dist/index.cjs' } };
+    }
+
+    pkg.scripts.clean = 'rimraf dist';
+    pkg.devDependencies.rimraf = '^6.0.0';
+    return { files, pkg };
+  },
+};

package/src/core/features/workflows.js

@@ -72,7 +72,7 @@ function ciWorkflow(cfg, codecov) {
   if (cfg.isTs) jobs.push(`      - run: ${pmRun(cfg, 'typecheck')}`);
   if (cfg.lint !== 'none') jobs.push(`      - run: ${pmRun(cfg, 'lint')}`);
   if (cfg.test !== 'none') jobs.push(`      - run: ${pmRun(cfg, codecov ? 'coverage' : 'test')}`);
-  if (cfg.bundler !== 'none' || cfg.isTs) jobs.push(`      - run: ${pmRun(cfg, 'build')}`);
+  if (cfg.hasBuild) jobs.push(`      - run: ${pmRun(cfg, 'build')}`);
   const cov = codecov
     ? '\n      - uses: codecov/codecov-action@v4\n        with:\n          token: ${{ secrets.CODECOV_TOKEN }}'
     : '';
@@ -131,7 +131,7 @@ function releaseWorkflow(cfg) {
     '  publish:',
     '    runs-on: ubuntu-latest',
     setupSteps(cfg),
-    cfg.bundler !== 'none' || cfg.isTs ? `      - run: ${pmRun(cfg, 'build')}` : null,
+    cfg.hasBuild ? `      - run: ${pmRun(cfg, 'build')}` : null,
     '      - run: npm publish --provenance --access public',
     '        env:',
     '          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}',

package/src/core/options.js

@@ -34,13 +34,16 @@ export const OPTIONS = {
       { value: 'library', label: 'Library (importable package)' },
       { value: 'cli', label: 'CLI tool (ships a bin)' },
       { value: 'service', label: 'HTTP service (Hono)' },
+      { value: 'app', label: 'App (Vite SPA)' },
     ],
   },
   framework: {
     group: 'core', type: 'select', label: 'Framework', default: 'none',
     choices: [
       { value: 'none', label: 'None (plain package)' },
-      { value: 'react', label: 'React (component library)' },
+      { value: 'react', label: 'React' },
+      { value: 'vue', label: 'Vue' },
+      { value: 'svelte', label: 'Svelte' },
     ],
   },
   packageManager: {
@@ -87,6 +90,7 @@ export const OPTIONS = {
     ],
   },
   coverage: { group: 'quality', type: 'boolean', label: 'Coverage reporting', default: true },
+  storybook: { group: 'quality', type: 'boolean', label: 'Storybook (component libraries)', default: false },
 
   // ---- lint / format ----
   lint: {
@@ -197,17 +201,40 @@ export function normalizeConfig(input = {}) {
   // npm-publish + changesets are complementary; nothing to coerce, just noted.
 
   cfg.isReact = cfg.framework === 'react';
-  // A React component library is a library; make sure it's targeted.
-  if (cfg.isReact && !cfg.target.includes('library')) cfg.target = ['library', ...cfg.target];
+  cfg.isVue = cfg.framework === 'vue';
+  cfg.isSvelte = cfg.framework === 'svelte';
+  cfg.hasFramework = cfg.framework !== 'none';
+
+  cfg.hasApp = cfg.target.includes('app');
+  // A component-framework package that isn't an app is a library.
+  if (cfg.hasFramework && !cfg.hasApp && !cfg.target.includes('library')) {
+    cfg.target = ['library', ...cfg.target];
+  }
 
   cfg.isTs = cfg.language === 'ts';
   cfg.ext = cfg.isTs ? 'ts' : 'js';
-  // Source files carry JSX for React; config files keep .ts/.js.
+  // JSX source extension for React; Vue/Svelte use their own component files.
   cfg.srcExt = cfg.isReact ? (cfg.isTs ? 'tsx' : 'jsx') : cfg.ext;
+
   cfg.hasLibrary = cfg.target.includes('library');
   cfg.hasCli = cfg.target.includes('cli');
   cfg.hasService = cfg.target.includes('service');
+
+  // Vite builds apps and Vue libraries (SFCs); Svelte libraries ship source
+  // (no build); React libraries use tsup (JSX is native to esbuild).
+  cfg.viteBuild = cfg.hasApp || cfg.isVue;
+  cfg.svelteLib = cfg.isSvelte && !cfg.hasApp;
+  cfg.customBuild = cfg.viteBuild || cfg.svelteLib; // bundler.js steps aside
+  cfg.usesVite = cfg.viteBuild || cfg.isSvelte; // Svelte tests need the vite plugin too
+  // Whether a `build` script exists (Svelte libraries ship source, no build).
+  cfg.hasBuild = cfg.viteBuild || (!cfg.svelteLib && (cfg.bundler !== 'none' || cfg.isTs));
+
+  // Apps aren't published packages.
+  if (cfg.hasApp) cfg.moduleFormat = 'esm';
   cfg.hasEsm = cfg.moduleFormat === 'esm' || cfg.moduleFormat === 'dual';
   cfg.hasCjs = cfg.moduleFormat === 'cjs' || cfg.moduleFormat === 'dual';
+
+  // Storybook only applies to component libraries.
+  if (!cfg.hasFramework || cfg.hasApp || !cfg.hasLibrary) cfg.storybook = false;
   return cfg;
 }

package/src/core/presets.js

@@ -8,6 +8,9 @@ export const PRESETS = {
   cli: { language: 'ts', target: ['cli', 'library'], moduleFormat: 'esm' },
   'react-lib': { language: 'ts', framework: 'react', target: ['library'], moduleFormat: 'dual', test: 'vitest' },
   'react-lib-js': { language: 'js', framework: 'react', target: ['library'], moduleFormat: 'dual', bundler: 'tsup', test: 'vitest' },
+  'react-app': { language: 'ts', framework: 'react', target: ['app'], test: 'vitest', release: 'none', workflows: ['ci'] },
+  'vue-lib': { language: 'ts', framework: 'vue', target: ['library'], test: 'vitest' },
+  'svelte-lib': { language: 'ts', framework: 'svelte', target: ['library'], test: 'vitest' },
   'node-service': {
     language: 'ts', target: ['service'], moduleFormat: 'esm', bundler: 'tsup',
     test: 'vitest', lint: 'eslint-prettier', gitHooks: 'simple-git-hooks',
@@ -43,6 +46,9 @@ export const PRESET_INFO = {
   cli: 'TypeScript CLI tool — ESM, ships a bin.',
   'react-lib': 'React component library (TS) — JSX, peer deps, jsdom tests.',
   'react-lib-js': 'React component library (JS) — JSX, peer deps, jsdom tests.',
+  'react-app': 'React SPA — Vite dev server, build, Testing Library.',
+  'vue-lib': 'Vue component library — Vite lib build (SFCs), dual + types.',
+  'svelte-lib': 'Svelte component library — ships source, peer svelte, jsdom tests.',
   'node-service': 'Node HTTP service (Hono) — tsx dev, tsup build, Dockerfile.',
   oss: 'Full open-source library — coverage, CodeQL, Codecov, Renovate, Changesets.',
   minimal: 'Bare TS library — tsup only, no tests/lint/CI.',

package/src/core/features/react.js

@@ -1,25 +0,0 @@
-// React component-library support: react/react-dom as peers (so consumers bring
-// their own), plus dev copies for building and testing. tsup/rollup externalize
-// peerDependencies automatically, so React is never bundled into your package.
-
-export default {
-  id: 'react',
-  active: (cfg) => cfg.isReact,
-  apply(cfg) {
-    const pkg = {
-      peerDependencies: {
-        react: '>=18',
-        'react-dom': '>=18',
-      },
-      devDependencies: {
-        react: '^18.3.0',
-        'react-dom': '^18.3.0',
-      },
-    };
-    if (cfg.isTs) {
-      pkg.devDependencies['@types/react'] = '^18.3.0';
-      pkg.devDependencies['@types/react-dom'] = '^18.3.0';
-    }
-    return { files: {}, pkg };
-  },
-};