create-template-project 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -4,7 +4,10 @@ import { generateProject } from "./generators/project.mjs";
 import { cancel, intro, outro } from "@clack/prompts";
 import debugLib from "debug";
 //#region src/index.ts
-if (process.argv.includes("--debug")) debugLib.enable("*");
+if (process.argv.includes("--debug")) {
+	process.env["DEBUG"] = "create-template-project:*";
+	debugLib.enable("create-template-project:*");
+}
 const debug = debugLib("create-template-project:main");
 const main = async () => {
 	try {

package/dist/templates/base/files/.github/workflows/node.js.yml

@@ -11,10 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      # [PM_SETUP]
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '22.x'
-          cache: 'npm'
-      - run: npm ci
-      - run: npm run ci
+          cache: '{{packageManager}}'
+      - run: '{{installCommand}}'
+      # [PLAYWRIGHT_SETUP]
+      - run: '{{packageManager}} run ci'

package/dist/templates/base/files/.prettierignore

@@ -0,0 +1,50 @@
+# dependencies
+node_modules/
+
+# build outputs
+dist/
+build/
+coverage/
+out/
+.next/
+.nuxt/
+.svelte-kit/
+
+# logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*.local
+
+# cache
+.cache/
+.parcel-cache/
+.eslintcache
+
+# lock files (optional, usually formatted fine)
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# generated files
+*.min.js
+*.min.css
+
+# static assets (optional)
+public/
+assets/
+
+# IDE / OS
+.vscode/
+.idea/
+.DS_Store
+Thumbs.db
+
+# misc
+tmp/
+temp/

package/dist/templates/base/files/.prettierrc.json

@@ -1,6 +1,8 @@
 {
+	"printWidth": 160,
+	"embeddedLanguageFormatting": "off",
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "all",
-	"printWidth": 100
+	"bracketSpacing": false,
+	"endOfLine": "auto"
 }

package/dist/templates/base/files/AGENTS.md

@@ -1,5 +1,8 @@
 # Agent Guidelines: {{projectName}}
 
 Build/Lint/Test:
-- `npm run ci`
-- `npx vitest <file>`
+- `npm run ci`: Runs lint, build, and all tests.
+- `npm run dev`: Starts the development server.
+- `npm run test`: Runs unit tests (browser-based for web projects).
+- `npm run test:e2e`: Runs Playwright E2E tests.
+- `npx vitest <file>`: Runs a specific test file.

package/dist/templates/base/files/README.md

@@ -3,21 +3,44 @@
 {{description}}
 
 [![NPM Version](https://img.shields.io/npm/v/{{projectName}}.svg)](https://www.npmjs.com/package/{{projectName}})
-[![NPM Downloads](https://img.shields.io/npm/dm/{{projectName}}.svg)](https://www.npmjs.com/package/{{projectName}})
 [![Node.js CI](https://github.com/doberkofler/{{projectName}}/actions/workflows/node.js.yml/badge.svg)](https://github.com/doberkofler/{{projectName}}/actions/workflows/node.js.yml)
 
-## Generated with create-template-project.
+## Development Workflow
 
-## Templates
-- **cli**: Node.js CLI application.
-- **webpage**: Standalone web page.
-- **webapp**: Web application with Express.
-- **fullstack**: Monorepo with Express and React.
+This project is built using **Vite 8** for high-performance development and bundling.
+
+### Available Scripts
+
+- `npm run dev`: Starts the development server.
+- `npm run build`: Builds the project for production.
+- `npm run preview`: Previews the production build.
+- `npm run test`: Runs the unit test suite (browser-based for web targets using **Vitest** and **Playwright**).
+- `npm run test:e2e`: Runs E2E tests using **Playwright**.
+- `npm run lint`: Lints and formats the codebase using **oxlint** and **prettier**.
+- `npm run ci`: Full CI pipeline (lint, build, test).
 
 ## Getting Started
-```bash
-npm install
-npm run dev # if applicable
-npm run build
-npm run test
-```
+
+1. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+2. **Start development server**:
+   ```bash
+   npm run dev
+   ```
+3. **Run tests**:
+   ```bash
+   npm run test
+   npm run test:e2e
+   ```
+
+## Tooling
+
+- **Vite 8**: Modern, ultra-fast development and build tool.
+- **Vitest**: Vite-native testing framework with browser support.
+- **Playwright**: Reliable E2E and browser automation.
+- **oxlint**: Extremely fast JavaScript/TypeScript linter.
+- **Prettier**: Opinionated code formatter.
+- **Husky & Commitlint**: Ensuring high-quality commit messages.
+- **Conventional Changelog**: Automated changelog generation.

package/dist/templates/base/files/_oxlint.config.ts

@@ -1,50 +1,40 @@
-import { defineConfig } from 'oxlint';
+import {defineConfig} from 'oxlint';
 import pluginRegexp from 'eslint-plugin-regexp';
 
 export default defineConfig({
 	options: {
 		typeAware: true,
-		typeCheck: true
+		typeCheck: true,
 	},
-	plugins: [
-		'unicorn',
-		'typescript',
-		'oxc',
-		'import',
-		'react',
-		'jsdoc',
-		'promise',
-		'vitest'
-	],
-	jsPlugins: [
-		'eslint-plugin-regexp'
-	],
+	plugins: ['unicorn', 'typescript', 'oxc', 'import', 'react', 'jsdoc', 'promise', 'vitest'],
+	jsPlugins: ['eslint-plugin-regexp'],
 	categories: {
-		correctness: 'error'
+		correctness: 'error',
 	},
 	rules: {
 		...pluginRegexp.configs.recommended.rules,
+		curly: ['error', 'all'],
 		'typescript/no-unused-vars': [
 			'error',
 			{
 				caughtErrors: 'none',
-				argsIgnorePattern: '^_'
-			}
-		]
+				argsIgnorePattern: '^_',
+			},
+		],
 	},
 	settings: {
 		'jsx-a11y': {
 			polymorphicPropName: undefined,
 			components: {},
-			attributes: {}
+			attributes: {},
 		},
 		next: {
-			rootDir: []
+			rootDir: [],
 		},
 		react: {
 			formComponents: [],
 			linkComponents: [],
-			version: undefined
+			version: undefined,
 		},
 		jsdoc: {
 			ignorePrivate: false,
@@ -54,21 +44,15 @@ export default defineConfig({
 			augmentsExtendsReplacesDocs: false,
 			implementsReplacesDocs: false,
 			exemptDestructuredRootsFromChecks: false,
-			tagNamePreference: {}
+			tagNamePreference: {},
 		},
 		vitest: {
-			typecheck: false
-		}
+			typecheck: false,
+		},
 	},
 	env: {
-		builtin: true
+		builtin: true,
 	},
 	globals: {},
-	ignorePatterns: [
-		'**/.*',
-		'node_modules/**',
-		'dist/**',
-		'coverage/**',
-		'public/**'
-	]
+	ignorePatterns: ['**/.*', 'node_modules/**', 'dist/**', 'coverage/**', 'public/**'],
 });

package/dist/templates/base/files/tsconfig.json

@@ -1,42 +1,42 @@
 {
 	"compilerOptions": {
 		/* Language and Environment */
-		"target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-		"lib": ["ESNext"],                                   /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-		"module": "NodeNext",                                /* Specify what module code is generated. */
-		"moduleResolution": "NodeNext",                      /* Specify how TypeScript looks up a file from a given module specifier. */
-		"esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. */
-		"resolveJsonModule": true,                           /* Enable importing .json files. */
+		"target": "ES2023" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		"lib": ["ES2023"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"module": "ESNext" /* Specify what module code is generated. */,
+		"moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. */,
+		"resolveJsonModule": true /* Enable importing .json files. */,
+		"allowImportingTsExtensions": /* Allow imports to include TypeScript file extensions. */ true,
+		"noEmit": true /* Disable emitting files from a compilation. */,
 
 		/* Strict Type-Checking Options */
-		"strict": true,                                      /* Enable all strict type-checking options. */
-		"noImplicitAny": true,                               /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-		"strictNullChecks": true,                            /* When type checking, take into account 'null' and 'undefined'. */
-		"strictFunctionTypes": true,                         /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-		"strictBindCallApply": true,                         /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-		"strictPropertyInitialization": true,                /* Check for class properties that are declared but not set in the constructor. */
-		"noImplicitThis": true,                              /* Enable error reporting when 'this' is given the type 'any'. */
-		"useUnknownInCatchVariables": true,                  /* Default catch clause variables as 'unknown' instead of 'any'. */
-		"alwaysStrict": true,                                /* Ensure 'use strict' is always emitted. */
-		"noUnusedLocals": true,                              /* Enable error reporting when local variables aren't read. */
-		"noUnusedParameters": true,                          /* Raise an error when a function parameter isn't read. */
-		"exactOptionalPropertyTypes": true,                  /* Interpret optional property types as strictly typed, preventing assignment of 'undefined'. */
-		"noImplicitReturns": true,                           /* Enable error reporting for codepaths that do not explicitly return in a function. */
-		"noFallthroughCasesInSwitch": true,                  /* Enable error reporting for fallthrough cases in switch statements. */
-		"noUncheckedIndexedAccess": true,                    /* Add 'undefined' to a type when accessed using an index. */
-		"noImplicitOverride": true,                          /* Ensure overriding members in derived classes are marked with an override modifier. */
-		"noPropertyAccessFromIndexSignature": true,          /* Enforces using indexed accessors for keys declared using an indexed type. */
-		"allowUnusedLabels": false,                          /* Disable error reporting for unused labels. */
-		"allowUnreachableCode": false,                       /* Disable error reporting for unreachable code. */
+		"strict": true /* Enable all strict type-checking options. */,
+		"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+		"strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+		"strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+		"strictBindCallApply": true /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */,
+		"strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
+		"noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+		"useUnknownInCatchVariables": true /* Default catch clause variables as 'unknown' instead of 'any'. */,
+		"alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+		"noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+		"noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+		"exactOptionalPropertyTypes": true /* Interpret optional property types as strictly typed, preventing assignment of 'undefined'. */,
+		"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+		"noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+		"noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+		"noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
+		"noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */,
+		"allowUnusedLabels": false /* Disable error reporting for unused labels. */,
+		"allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
 
 		/* Emit */
-		"outDir": "./dist",                                  /* Specify an output folder for all emitted files. */
-		
+		"outDir": "./dist" /* Specify an output folder for all emitted files. */,
+
 		/* Completeness */
-		"skipLibCheck": true,                                /* Skip type checking all .d.ts files. */
-		"forceConsistentCasingInFileNames": true             /* Ensure that casing is correct in imports. */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */,
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */
 	},
-	"include": [
-		"src/**/*"
-	]
+	"include": ["src/**/*"]
 }

package/dist/templates/base/files/vitest.config.ts

@@ -1,3 +1,3 @@
-import { defineConfig } from 'vitest/config';
+import {defineConfig} from 'vitest/config';
 
-export default defineConfig({ test: { coverage: { provider: 'v8' } } });
+export default defineConfig({test: {coverage: {provider: 'v8'}}});

package/dist/templates/base/index.mjs

@@ -5,7 +5,46 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const getBaseTemplate = (_opts) => {
 	return {
 		name: "base",
-		dependencies: {},
+		description: "The foundation for all project templates, including common tooling and configuration.",
+		components: [
+			{
+				name: "TypeScript",
+				description: "Mandatory strict mode for type safety."
+			},
+			{
+				name: "oxlint",
+				description: "Ultra-fast Rust-based linter."
+			},
+			{
+				name: "Prettier",
+				description: "Consistent code formatting."
+			},
+			{
+				name: "Vitest",
+				description: "Modern, fast unit testing with coverage."
+			},
+			{
+				name: "Husky",
+				description: "Git hooks for pre-commit linting."
+			},
+			{
+				name: "commitlint",
+				description: "Standardized commit messages."
+			},
+			{
+				name: "conventional-changelog",
+				description: "Automated release notes."
+			},
+			{
+				name: "debug",
+				description: "Structured logging for debugging."
+			},
+			{
+				name: "Zod",
+				description: "TypeScript-first schema validation for runtime type safety."
+			}
+		],
+		dependencies: { zod: "zod" },
 		devDependencies: { "eslint-plugin-regexp": "" },
 		scripts: {},
 		files: [],

package/dist/templates/cli/index.mjs

@@ -2,9 +2,22 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 //#region src/templates/cli/index.ts
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const getCliTemplate = (_opts) => {
+const getCliTemplate = (opts) => {
+	const components = [{
+		name: "commander",
+		description: "The complete solution for Node.js command-line interfaces."
+	}, {
+		name: "cli-progress",
+		description: "Easy to use progress-bar for terminal applications."
+	}];
+	if (!opts.skipBuild) components.push({
+		name: "tsdown",
+		description: "A zero-config bundler for TypeScript."
+	});
 	return {
 		name: "cli",
+		description: "A robust Node.js command-line application template.",
+		components,
 		dependencies: {},
 		devDependencies: {},
 		scripts: {},

package/dist/templates/web-app/files/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+	<head>
+		<title>{{projectName}}</title>
+	</head>
+	<body>
+		<h1>{{projectName}}</h1>
+		<div id="app"></div>
+		<script type="module" src="/src/index.tsx"></script>
+	</body>
+</html>

package/dist/templates/web-app/files/playwright.config.ts

@@ -0,0 +1,26 @@
+import {defineConfig, devices} from '@playwright/test';
+
+export default defineConfig({
+	testDir: './tests/e2e',
+	testMatch: '**/*.e2e-test.ts',
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
+	use: {
+		baseURL: 'http://localhost:3000',
+		trace: 'on-first-retry',
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: {...devices['Desktop Chrome']},
+		},
+	],
+	webServer: {
+		command: 'npm run build && npm run start',
+		url: 'http://localhost:3000',
+		reuseExistingServer: !process.env.CI,
+	},
+});

package/dist/templates/web-app/files/src/index.tsx

@@ -0,0 +1,21 @@
+import {createRoot} from 'react-dom/client';
+import {Typography, Container, Box} from '@mui/material';
+
+const App = () => {
+	return (
+		<Container maxWidth="sm">
+			<Box sx={{my: 4, textAlign: 'center'}}>
+				<Typography variant="h4" component="h1" gutterBottom>
+					Hello from React!
+				</Typography>
+				<Typography variant="body1">This project was scaffolded with the web-app template.</Typography>
+			</Box>
+		</Container>
+	);
+};
+
+const container = document.getElementById('app');
+if (container) {
+	const root = createRoot(container);
+	root.render(<App />);
+}

package/dist/templates/web-app/files/tests/e2e/basic.e2e-test.ts

@@ -0,0 +1,13 @@
+import {test, expect} from '@playwright/test';
+
+test('has title', async ({page}) => {
+	await page.goto('/');
+	await expect(page).toHaveTitle(/{{projectName}}/);
+});
+
+test('api is reachable', async ({page}) => {
+	const response = await page.request.get('/api/hello');
+	expect(response.ok()).toBeTruthy();
+	const data = await response.json();
+	expect(data.message).toBe('Hello from Express!');
+});

package/dist/templates/web-app/files/vite.config.ts

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import {defineConfig} from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import {playwright} from '@vitest/browser-playwright';
+
+export default defineConfig({
+	plugins: [react()],
+	build: {
+		outDir: 'dist',
+		emptyOutDir: true,
+	},
+	test: {
+		include: ['src/**/*.test.{ts,tsx}'],
+		browser: {
+			enabled: true,
+			headless: true,
+			screenshotDirectory: path.resolve('./temp/vitest/__screenshots__'),
+			instances: [
+				{
+					browser: 'chromium',
+					provider: playwright({
+						launchOptions: {
+							args: ['--disable-web-security'],
+						},
+					}),
+				},
+			],
+		},
+	},
+});

package/dist/templates/web-app/index.mjs

@@ -0,0 +1,69 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+//#region src/templates/web-app/index.ts
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const getWebAppTemplate = (_opts) => {
+	return {
+		name: "web-app",
+		description: "A React application with MUI and TanStack Query, powered by Vite.",
+		components: [
+			{
+				name: "React",
+				description: "Powerful library for building component-based user interfaces."
+			},
+			{
+				name: "MUI",
+				description: "Rich set of Material Design UI components for React."
+			},
+			{
+				name: "TanStack React Query",
+				description: "Powerful asynchronous state management for React."
+			},
+			{
+				name: "Vite",
+				description: "Next-generation frontend tooling."
+			},
+			{
+				name: "Vitest",
+				description: "Testing framework with cross-browser support."
+			},
+			{
+				name: "Playwright",
+				description: "End-to-end testing for modern web apps."
+			}
+		],
+		dependencies: {
+			react: "react",
+			"react-dom": "react-dom",
+			"@mui/material": "@mui/material",
+			"@mui/icons-material": "@mui/icons-material",
+			"@emotion/react": "@emotion/react",
+			"@emotion/styled": "@emotion/styled",
+			"@tanstack/react-query": "@tanstack/react-query"
+		},
+		devDependencies: {
+			"@types/react": "@types/react",
+			"@types/react-dom": "@types/react-dom",
+			vite: "vite",
+			"@vitejs/plugin-react": "@vitejs/plugin-react",
+			vitest: "vitest",
+			"@vitest/browser": "@vitest/browser",
+			"@vitest/browser-playwright": "@vitest/browser-playwright",
+			playwright: "playwright",
+			"@playwright/test": "@playwright/test"
+		},
+		scripts: {
+			dev: "vite",
+			build: "vite build",
+			preview: "vite preview",
+			test: "vitest run",
+			"test:ui": "vitest",
+			"test:e2e": "playwright test",
+			start: "vite preview"
+		},
+		files: [],
+		templateDir: path.resolve(__dirname, "files")
+	};
+};
+//#endregion
+export { getWebAppTemplate };

package/dist/templates/web-fullstack/files/client/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+	<head>
+		<title>{{projectName}}</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/dist/templates/{fullstack → web-fullstack}/files/client/package.json

@@ -3,8 +3,8 @@
 	"version": "0.1.0",
 	"type": "module",
 	"scripts": {
-		"build": "tsdown",
-		"dev": "tsdown --watch",
+		"build": "vite build",
+		"dev": "vite",
 		"test": "vitest run"
 	}
 }

package/dist/templates/{fullstack → web-fullstack}/files/client/src/contexts/AuthContext.tsx

@@ -47,11 +47,7 @@ export const AuthProvider = ({children}: {children: ReactNode}) => {
 		setUser(null);
 	};
 
-	return (
-		<AuthContext.Provider value={{user, token, isLoading, login, logout}}>
-			{children}
-		</AuthContext.Provider>
-	);
+	return <AuthContext.Provider value={{user, token, isLoading, login, logout}}>{children}</AuthContext.Provider>;
 };
 
 export const useAuth = () => {