create-packkit 0.1.1 → 0.2.0

package/README.md

@@ -13,20 +13,20 @@ Most scaffolders lock you into one stack, one language, and the terminal. Packki
 ```sh
 # interactive wizard
 npm create packkit@latest
-# or the short alias
-npx packkit
+# or with npx
+npx create-packkit
 
 # skip the wizard with a preset
-npx packkit ts-lib my-lib
-npx packkit cli my-tool
-npx packkit --preset full my-pkg --pm pnpm
+npx create-packkit ts-lib my-lib
+npx create-packkit cli my-tool
+npx create-packkit --preset full my-pkg --pm pnpm
 ```
 
 Then `cd`, and you already have a working project — `build`, `test`, and `lint` all pass out of the box.
 
 ## Or configure it on the web
 
-No install needed: **[danmat.github.io/create-packkit](https://danmat.github.io/create-packkit/)** — tick the options, preview the file tree, and **download a zip** (or copy the equivalent `npx packkit` command). Everything runs in your browser.
+No install needed: **[danmat.github.io/create-packkit](https://danmat.github.io/create-packkit/)** — tick the options, preview the file tree, and **download a zip** (or copy the equivalent `npx create-packkit` command). Everything runs in your browser.
 
 ## What you can pick
 
@@ -35,6 +35,7 @@ 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 · both |
+| **Framework** | None · **React** (component library — JSX, peer deps, jsdom tests) |
 | **Bundler** | tsup · tsdown · unbuild · rollup · none (tsc) |
 | **Tests** | Vitest · Jest · node:test · none (+ coverage) |
 | **Lint/format** | ESLint + Prettier · Biome · oxlint · none |
@@ -47,7 +48,7 @@ No install needed: **[danmat.github.io/create-packkit](https://danmat.github.io/
 
 ## Presets
 
-`ts-lib` · `js-lib` · `ts-cli` / `cli` · `minimal` · `full` — named bundles of the options above.
+`ts-lib` · `js-lib` · `ts-cli` / `cli` · `react-lib` · `react-lib-js` · `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,11 +1,10 @@
 {
   "name": "create-packkit",
-  "version": "0.1.1",
+  "version": "0.2.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": {
-    "create-packkit": "bin/cli.js",
-    "packkit": "bin/cli.js"
+    "create-packkit": "bin/cli.js"
   },
   "exports": {
     ".": "./src/core/index.js",

package/src/cli/args.js

@@ -5,6 +5,7 @@ import { PRESET_NAMES } from '../core/presets.js';
 const OVERRIDE_FLAGS = {
   language: 'language',
   module: 'moduleFormat',
+  framework: 'framework',
   bundler: 'bundler',
   test: 'test',
   lint: 'lint',

package/src/core/features/bundler.js

@@ -33,7 +33,7 @@ export default {
     }
 
     // ---- build tooling ----
-    const entries = ['src/index.' + cfg.ext];
+    const entries = ['src/index.' + cfg.srcExt];
     if (cfg.hasCli) entries.push('src/cli.' + cfg.ext);
     const formats = [cfg.hasEsm && 'esm', cfg.hasCjs && 'cjs'].filter(Boolean);
 

package/src/core/features/index.js

@@ -4,6 +4,7 @@
 import meta from './meta.js';
 import bundler from './bundler.js';
 import typescript from './typescript.js';
+import react from './react.js';
 import test from './test.js';
 import lint from './lint.js';
 import githooks from './githooks.js';
@@ -19,6 +20,7 @@ export default [
   meta,
   bundler,
   typescript,
+  react,
   test,
   lint,
   githooks,

package/src/core/features/meta.js

@@ -24,8 +24,7 @@ export default {
     }
 
     // Source entry point.
-    const ext = cfg.ext;
-    files[`src/index.${ext}`] = cfg.hasLibrary
+    files[`src/index.${cfg.srcExt}`] = cfg.hasLibrary
       ? libraryEntry(cfg)
       : `// ${cfg.name}\n`;
 
@@ -43,6 +42,7 @@ export default {
 };
 
 function libraryEntry(cfg) {
+  if (cfg.isReact) return reactEntry(cfg);
   if (cfg.isTs) {
     return [
       `/** Greet someone by name. */`,
@@ -65,6 +65,34 @@ 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 readme(cfg) {
   const install = {
     npm: `npm install ${cfg.name}`,
@@ -86,7 +114,11 @@ function readme(cfg) {
     '',
   ];
 
-  if (cfg.hasLibrary) {
+  if (cfg.hasLibrary && cfg.isReact) {
+    lines.push('## Usage', '', '```' + (cfg.isTs ? 'tsx' : 'jsx'),
+      `import { Button } from '${cfg.name}';`, '',
+      `<Button label="Click me" onClick={() => alert('hi')} />`, '```', '');
+  } 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/react.js

@@ -0,0 +1,25 @@
+// 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 };
+  },
+};

package/src/core/features/test.js

@@ -8,12 +8,16 @@ export default {
     const pkg = { scripts: {}, devDependencies: {} };
     const ext = cfg.ext;
 
+    const testExt = cfg.isReact ? cfg.srcExt : ext;
+
     if (cfg.test === 'vitest') {
       files[`vitest.config.${ext}`] = [
         `import { defineConfig } from 'vitest/config';`,
         ``,
         `export default defineConfig({`,
         `\ttest: {`,
+        cfg.isReact ? `\t\tenvironment: 'jsdom',` : null,
+        cfg.isReact ? `\t\tglobals: true,` : null,
         cfg.coverage ? `\t\tcoverage: { provider: 'v8', reporter: ['text', 'lcov'] },` : null,
         `\t},`,
         `});`,
@@ -22,11 +26,16 @@ export default {
       pkg.scripts.test = 'vitest run';
       pkg.scripts['test:watch'] = 'vitest';
       pkg.devDependencies.vitest = '^2.0.0';
+      if (cfg.isReact) {
+        pkg.devDependencies.jsdom = '^25.0.0';
+        pkg.devDependencies['@testing-library/react'] = '^16.0.0';
+        pkg.devDependencies['@testing-library/dom'] = '^10.0.0';
+      }
       if (cfg.coverage) {
         pkg.scripts.coverage = 'vitest run --coverage';
         pkg.devDependencies['@vitest/coverage-v8'] = '^2.0.0';
       }
-      files[`src/index.test.${ext}`] = exampleTest('vitest', cfg);
+      files[`src/index.test.${testExt}`] = exampleTest('vitest', cfg);
     } else if (cfg.test === 'jest') {
       files['jest.config.js'] = jestConfig(cfg);
       pkg.scripts.test = 'jest';
@@ -37,11 +46,11 @@ export default {
         pkg.devDependencies['@types/jest'] = '^29.0.0';
       }
       if (cfg.coverage) pkg.scripts.coverage = 'jest --coverage';
-      files[`src/index.test.${ext}`] = exampleTest('jest', cfg);
+      files[`src/index.test.${testExt}`] = exampleTest('jest', cfg);
     } else if (cfg.test === 'node') {
       pkg.scripts.test = cfg.isTs ? 'node --import tsx --test "src/**/*.test.ts"' : 'node --test';
       if (cfg.isTs) pkg.devDependencies.tsx = '^4.0.0';
-      files[`src/index.test.${ext}`] = exampleTest('node', cfg);
+      files[`src/index.test.${testExt}`] = exampleTest('node', cfg);
     }
 
     return { files, pkg };
@@ -56,6 +65,21 @@ function importPath(runner, cfg) {
 
 function exampleTest(runner, cfg) {
   const imp = importPath(runner, cfg);
+  if (cfg.isReact) {
+    const api = runner === 'jest' ? '' : `import { describe, it, expect } from 'vitest';\n`;
+    return [
+      api + `import { render, screen } from '@testing-library/react';`,
+      `import { Button } from '${imp}';`,
+      ``,
+      `describe('Button', () => {`,
+      `\tit('renders its label', () => {`,
+      `\t\trender(<Button label="Click me" />);`,
+      `\t\texpect(screen.getByText('Click me')).toBeDefined();`,
+      `\t});`,
+      `});`,
+      ``,
+    ].join('\n');
+  }
   if (runner === 'node') {
     return [
       `import { test } from 'node:test';`,

package/src/core/features/typescript.js

@@ -9,7 +9,8 @@ export default {
       target: 'ES2022',
       module: 'ESNext',
       moduleResolution: 'Bundler',
-      lib: ['ES2022'],
+      lib: cfg.isReact ? ['ES2022', 'DOM', 'DOM.Iterable'] : ['ES2022'],
+      ...(cfg.isReact ? { jsx: 'react-jsx' } : {}),
       strict: true,
       noUncheckedIndexedAccess: true,
       esModuleInterop: true,

package/src/core/options.js

@@ -35,6 +35,13 @@ export const OPTIONS = {
       { value: 'cli', label: 'CLI tool (ships a bin)' },
     ],
   },
+  framework: {
+    group: 'core', type: 'select', label: 'Framework', default: 'none',
+    choices: [
+      { value: 'none', label: 'None (plain package)' },
+      { value: 'react', label: 'React (component library)' },
+    ],
+  },
   packageManager: {
     group: 'core', type: 'select', label: 'Package manager', default: 'npm',
     choices: [
@@ -183,8 +190,14 @@ export function normalizeConfig(input = {}) {
   if (cfg.workflows.includes('codecov')) cfg.coverage = true;
   // 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.isTs = cfg.language === 'ts';
   cfg.ext = cfg.isTs ? 'ts' : 'js';
+  // Source files carry JSX for React; config files keep .ts/.js.
+  cfg.srcExt = cfg.isReact ? (cfg.isTs ? 'tsx' : 'jsx') : cfg.ext;
   cfg.hasLibrary = cfg.target.includes('library');
   cfg.hasCli = cfg.target.includes('cli');
   cfg.hasEsm = cfg.moduleFormat === 'esm' || cfg.moduleFormat === 'dual';

package/src/core/presets.js

@@ -6,6 +6,14 @@ export const PRESETS = {
   'js-lib': { language: 'js', target: ['library'], moduleFormat: 'dual', bundler: 'tsup' },
   'ts-cli': { language: 'ts', target: ['cli', 'library'], moduleFormat: 'esm' },
   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' },
+  oss: {
+    language: 'ts', target: ['library'], moduleFormat: 'dual', bundler: 'tsup',
+    test: 'vitest', coverage: true, lint: 'eslint-prettier', gitHooks: 'simple-git-hooks',
+    release: 'changesets', workflows: ['ci', 'npm-publish', 'codeql', 'codecov'],
+    deps: 'renovate', community: true, agents: true, vscode: true,
+  },
   minimal: {
     language: 'ts', target: ['library'], moduleFormat: 'dual', bundler: 'tsup',
     test: 'none', lint: 'none', gitHooks: 'none', release: 'none',