create-template-project 1.1.2 → 1.2.0

package/dist/templates/base/files/.release-it.json

@@ -5,7 +5,7 @@
 	"git": {
 		"requireCleanWorkingDir": true,
 		"commit": true,
-		"commitMessage": "chore(release): ${version}",
+		"commitMessage": "chore: release ${version}",
 		"tag": true,
 		"tagName": "v${version}",
 		"push": true,

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

@@ -1,98 +1,223 @@
-import { defineConfig } from "oxlint";
-import pluginRegexp from "eslint-plugin-regexp";
+import {defineConfig} from 'oxlint';
+import {configs as regexpConfigs} from 'eslint-plugin-regexp';
 
 /** Filter out core ESLint rules bundled into eslint-plugin-regexp recommended config */
-const regexpPluginRules = Object.fromEntries(Object.entries(pluginRegexp.configs.recommended.rules ?? {}).filter(([key]) => key.startsWith("regexp/")));
+const regexpPluginRules = Object.fromEntries(Object.entries(regexpConfigs.recommended.rules).filter(([key]) => key.startsWith('regexp/')));
 
 const commonIgnore = [
-  "**/.*",
-  "node_modules/**",
-  "dist/**",
-  "build/**",
-  "coverage/**",
-  "temp/**",
-  "public/**",
-  "**/*.md",
+	'**/.*',
+	'node_modules/**',
+	'dist/**',
+	'build/**',
+	'coverage/**',
+	'temp/**',
+	'public/**',
+	'**/*.md',
 ];
 
 export const linter = defineConfig({
-  options: {
-    typeAware: true,
-    typeCheck: true,
-  },
-  plugins: [
-    "unicorn",
-    "typescript",
-    "oxc",
-    "import",
-    "react",
-    "jsdoc",
-    "promise",
-    "vitest",
-  ],
-  jsPlugins: ["eslint-plugin-regexp"],
-  categories: {
-    correctness: "error",
-  },
-  rules: {
-    ...regexpPluginRules,
-    curly: ["error", "all"],
-    "typescript/no-unused-vars": [
-      "error",
-      {
-        caughtErrors: "none",
-        argsIgnorePattern: "^_",
-      },
-    ],
-  },
-  settings: {
-    "jsx-a11y": {
-      polymorphicPropName: undefined,
-      components: {},
-      attributes: {},
-    },
-    next: {
-      rootDir: [],
-    },
-    react: {
-      formComponents: [],
-      linkComponents: [],
-      version: undefined,
-    },
-    jsdoc: {
-      ignorePrivate: false,
-      ignoreInternal: false,
-      ignoreReplacesDocs: true,
-      overrideReplacesDocs: true,
-      augmentsExtendsReplacesDocs: false,
-      implementsReplacesDocs: false,
-      exemptDestructuredRootsFromChecks: false,
-      tagNamePreference: {},
-    },
-    vitest: {
-      typecheck: false,
-    },
-  },
-  env: {
-    builtin: true,
-  },
-  globals: {},
-  ignorePatterns: commonIgnore,
+	options: {
+		typeAware: true,
+		typeCheck: true,
+	},
+	plugins: [
+		'unicorn',
+		'typescript',
+		'oxc',
+		'import',
+		'react',
+		'jsdoc',
+		'promise',
+		'vitest',
+	],
+	jsPlugins: ['eslint-plugin-regexp'],
+	categories: {
+		correctness: 'error',
+		nursery: 'error',
+		pedantic: 'error',
+		perf: 'error',
+		restriction: 'error',
+		style: 'error',
+		suspicious: 'error',
+	},
+	rules: {
+		...regexpPluginRules,
+		'eslint/complexity': 'off', // TODO: consider enabling
+		'eslint/curly': ['error', 'all'],
+		'eslint/id-length': 'off',
+		'eslint/init-declarations': 'off', // TODO: consider enabling
+		'eslint/max-depth': 'off', // TODO: consider enabling
+		'eslint/max-lines': 'off', // TODO: consider enabling
+		'eslint/max-lines-per-function': 'off', // TODO: consider enabling
+		'eslint/max-params': 'off', // TODO: consider enabling
+		'eslint/max-statements': 'off', // TODO: consider enabling
+		'eslint/capitalized-comments': 'off', // TODO: consider enabling
+		'eslint/no-await-in-loop': 'warn',
+		'eslint/no-console': 'off',
+		'eslint/no-continue': 'off',
+		'eslint/no-inline-comments': 'off',
+		'eslint/no-magic-numbers': 'off',
+		'eslint/no-negated-condition': 'off', // TODO: consider enabling
+		'eslint/no-nested-ternary': 'off',
+		'eslint/no-warning-comments': 'off',
+		'eslint/no-undefined': 'off', // TODO: consider enabling
+		'eslint/no-plusplus': 'off',
+		'eslint/sort-imports': 'off',
+		'eslint/sort-keys': 'off',
+		'eslint/no-ternary': 'off',
+		'typescript/no-unused-vars': [
+			'error',
+			{
+				caughtErrors: 'none',
+				argsIgnorePattern: '^_',
+			},
+		],
+		'typescript/consistent-type-definitions': ['error', 'type'],
+		'typescript/no-import-type-side-effects': 'off',
+		'typescript/prefer-readonly-parameter-types': 'off',
+		'import/consistent-type-specifier-style': ['error', 'prefer-inline'],
+		'import/exports-last': 'off',
+		'import/group-exports': 'off',
+		'import/max-dependencies': 'off',
+		'import/no-named-export': 'off',
+		'import/no-namespace': 'off', // TODO: consider enabling
+		'import/no-nodejs-modules': 'off',
+		'import/prefer-default-export': 'off',
+		'import/no-default-export': 'off',
+		// FIXME: remove all jest rules
+		'jest/consistent-test-it': 'off',
+		'jest/expect-expect': 'off',
+		'jest/max-expects': 'off',
+		'jest/max-nested-describe': 'off',
+		'jest/no-alias-methods': 'off',
+		'jest/no-commented-out-tests': 'off',
+		'jest/no-conditional-expect': 'off',
+		'jest/no-conditional-in-test': 'off',
+		'jest/no-confusing-set-timeout': 'off',
+		'jest/no-deprecated-functions': 'off',
+		'jest/no-disabled-tests': 'off',
+		'jest/no-done-callback': 'off',
+		'jest/no-duplicate-hooks': 'off',
+		'jest/no-export': 'off',
+		'jest/no-focused-tests': 'off',
+		'jest/no-hooks': 'off',
+		'jest/no-identical-title': 'off',
+		'jest/no-interpolation-in-snapshots': 'off',
+		'jest/no-jasmine-globals': 'off',
+		'jest/no-large-snapshots': 'off',
+		'jest/no-mocks-import': 'off',
+		'jest/no-restricted-jest-methods': 'off',
+		'jest/no-restricted-matchers': 'off',
+		'jest/no-standalone-expect': 'off',
+		'jest/no-test-prefixes': 'off',
+		'jest/no-test-return-statement': 'off',
+		'jest/no-unneeded-async-expect-function': 'off',
+		'jest/no-untyped-mock-factory': 'off',
+		//'jest/padding-around-after-all-blocks': 'off',
+		'jest/padding-around-test-blocks': 'off',
+		'jest/prefer-called-with': 'off',
+		'jest/prefer-comparison-matcher': 'off',
+		'jest/prefer-each': 'off',
+		'jest/prefer-equality-matcher': 'off',
+		'jest/prefer-expect-resolves': 'off',
+		'jest/prefer-hooks-in-order': 'off',
+		'jest/prefer-hooks-on-top': 'off',
+		'jest/prefer-jest-mocked': 'off',
+		'jest/prefer-lowercase-title': 'off',
+		'jest/prefer-mock-promise-shorthand': 'off',
+		'jest/prefer-mock-return-shorthand': 'off',
+		//'jest/prefer-snapshot-hint': 'off',
+		'jest/prefer-spy-on': 'off',
+		'jest/prefer-strict-equal': 'off',
+		'jest/prefer-to-be': 'off',
+		'jest/prefer-to-contain': 'off',
+		'jest/prefer-to-have-been-called': 'off',
+		'jest/prefer-to-have-been-called-times': 'off',
+		'jest/prefer-to-have-length': 'off',
+		'jest/prefer-todo': 'off',
+		'jest/require-hook': 'off',
+		'jest/require-to-throw-message': 'off',
+		'jest/require-top-level-describe': 'off',
+		'jest/valid-describe-callback': 'off',
+		'jest/valid-expect': 'off',
+		'jest/valid-title': 'off',
+		'oxc/no-async-await': 'off',
+		'oxc/no-map-spread': 'off', // TODO: consider enabling
+		'oxc/no-rest-spread-properties': 'off',
+		'unicorn/escape-case': 'off',
+		'unicorn/filename-case': 'off', // TODO: consider enabling
+		'unicorn/no-array-reduce': 'off', // TODO: consider enabling
+		'unicorn/no-array-sort': 'off', // TODO: consider enabling
+		'unicorn/no-hex-escape': 'off',
+		'unicorn/no-immediate-mutation': 'off',
+		'unicorn/no-nested-ternary': 'off',
+		'unicorn/no-null': 'off', // TODO: consider enabling
+		'unicorn/no-process-exit': 'off', // TODO: consider enabling
+		'unicorn/no-typeof-undefined': 'off', // TODO: consider enabling
+		'unicorn/prefer-module': 'off', // TODO: consider enabling
+		'react/jsx-filename-extension': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'vitest/no-importing-vitest-globals': 'off',
+		'vitest/prefer-describe-function-title': 'off',
+		'vitest/prefer-to-be-truthy': 'off', // FIXME: Conflict Detected: prefer-strict-boolean-matchers enforces toBe(true), but prefer-to-be-truthy enforces toBeTruthy().
+		'vitest/require-test-timeout': 'off',
+	},
+	overrides: [
+		{
+			files: ['tests/e2e/**/*.e2e-test.ts', '**/*.e2e-test.ts'],
+			rules: {
+				'vitest/prefer-importing-vitest-globals': 'off',
+			},
+		},
+	],
+	settings: {
+		'jsx-a11y': {
+			polymorphicPropName: undefined,
+			components: {},
+			attributes: {},
+		},
+		next: {
+			rootDir: [],
+		},
+		react: {
+			formComponents: [],
+			linkComponents: [],
+			version: undefined,
+		},
+	jsdoc: {
+		ignorePrivate: false,
+		ignoreInternal: false,
+		ignoreReplacesDocs: true,
+		overrideReplacesDocs: true,
+		augmentsExtendsReplacesDocs: false,
+		implementsReplacesDocs: false,
+		exemptDestructuredRootsFromChecks: false,
+		tagNamePreference: {},
+	},
+	vitest: {
+		typecheck: false,
+	},
+	},
+	env: {
+		builtin: true,
+	},
+	globals: {},
+	ignorePatterns: commonIgnore,
 });
 
 export const formatter = {
-  printWidth: 160,
-  embeddedLanguageFormatting: "off",
-  useTabs: true,
-  singleQuote: true,
-  bracketSpacing: false,
-  ignorePatterns: commonIgnore,
-  overrides: [
-    {
-      files: ["src/**/*.{scss,css}"],
-      options: {
-        singleQuote: false,
-      },
-    },
-  ],
+	printWidth: 160,
+	embeddedLanguageFormatting: 'off',
+	useTabs: true,
+	singleQuote: true,
+	bracketSpacing: false,
+	ignorePatterns: commonIgnore,
+	overrides: [
+		{
+			files: ['src/**/*.{scss,css}'],
+			options: {
+				singleQuote: false,
+			},
+		},
+	],
 };

package/dist/templates/cli/files/src/index.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import {Command} from 'commander';
 import {SingleBar, Presets} from 'cli-progress';
+import {greet} from './lib.js';
 
 const program = new Command();
 program.name('my-cli').description('A sample CLI');
@@ -11,6 +12,4 @@ bar.start(100, 0);
 bar.update(50);
 bar.stop();
 
-import {greet} from './lib.js';
-
 console.log(greet('Developer'));

package/dist/templates/cli/files/src/lib.ts

@@ -1,6 +1,4 @@
-export const greet = (name: string): string => {
-	return `Hello, ${name}! Welcome to your new CLI.`;
-};
+export const greet = (name: string): string => `Hello, ${name}! Welcome to your new CLI.`;
 
 export const calculateProgress = (current: number, total: number): number => {
 	if (total === 0) {

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

@@ -1,12 +1,15 @@
 import {defineConfig, devices} from '@playwright/test';
+import {env} from 'node:process';
+
+const isCi = env.CI !== undefined;
 
 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,
+	forbidOnly: isCi,
+	retries: isCi ? 2 : 0,
+	workers: isCi ? 1 : undefined,
 	reporter: 'html',
 	use: {
 		baseURL: 'http://localhost:3000',
@@ -21,6 +24,6 @@ export default defineConfig({
 	webServer: {
 		command: 'npm run build && npm run start',
 		url: 'http://localhost:3000',
-		reuseExistingServer: !process.env.CI,
+		reuseExistingServer: !isCi,
 	},
 });

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

@@ -1,14 +1,13 @@
 import {Typography, Container, Box} from '@mui/material';
+import {type ReactElement} from 'react';
 
-export 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>
-	);
-};
+export const App = (): ReactElement => (
+	<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>
+);

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

@@ -1,7 +1,7 @@
 import {createRoot} from 'react-dom/client';
 import {App} from './App.js';
 
-const container = document.getElementById('app');
+const container = document.querySelector<HTMLElement>('#app');
 if (container) {
 	const root = createRoot(container);
 	root.render(<App />);

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

@@ -8,6 +8,6 @@ test('has title', async ({page}) => {
 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!');
+	const data: unknown = await response.json();
+	expect(data).toMatchObject({message: 'Hello from Express!'});
 });

package/dist/templates/web-fullstack/files/client/src/App.tsx

@@ -1,4 +1,5 @@
-import {useState} from 'react';
+/* eslint-disable react/jsx-max-depth */
+import {useMemo, type ReactNode} from 'react';
 import {BrowserRouter, Routes, Route, Navigate} from 'react-router-dom';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {httpBatchLink} from '@trpc/client';
@@ -11,20 +12,22 @@ import {CssBaseline, ThemeProvider, createTheme} from '@mui/material';
 
 const theme = createTheme();
 
-export const App = () => {
-	const [queryClient] = useState(() => new QueryClient());
-	const [trpcClient] = useState(() =>
+export const App = (): ReactNode => {
+	const queryClient = useMemo(() => new QueryClient(), []);
+	const trpcClient = useMemo(
+		() =>
 		trpc.createClient({
 			links: [
 				httpBatchLink({
 					url: 'http://localhost:3001/trpc',
 					headers: () => {
 						const token = localStorage.getItem('token');
-						return token ? {Authorization: `Bearer ${token}`} : {};
+						return token !== null && token !== '' ? {Authorization: `Bearer ${token}`} : {};
 					},
 				}),
 			],
 		}),
+		[],
 	);
 
 	return (

package/dist/templates/web-fullstack/files/client/src/components/ProtectedRoute.tsx

@@ -1,19 +1,21 @@
+/* eslint-disable import/no-relative-parent-imports */
 import {Navigate, Outlet} from 'react-router-dom';
+import {type ReactNode} from 'react';
 import {useAuth} from '../contexts/AuthContext.js';
 import {CircularProgress, Box} from '@mui/material';
 
-export const ProtectedRoute = () => {
+export const ProtectedRoute = (): ReactNode => {
 	const {token, isLoading} = useAuth();
 
 	if (isLoading) {
 		return (
-			<Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+			<Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh'}}>
 				<CircularProgress />
 			</Box>
 		);
 	}
 
-	if (!token) {
+	if (token === null || token === '') {
 		return <Navigate to="/login" replace />;
 	}
 

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

@@ -1,56 +1,60 @@
-import {createContext, useContext, useState, useEffect, ReactNode} from 'react';
+/* eslint-disable import/no-relative-parent-imports */
+/* eslint-disable react/only-export-components */
+/* eslint-disable react/jsx-no-constructed-context-values */
+/* eslint-disable typescript/no-unnecessary-condition */
+import {createContext, useContext, useState, useEffect, type ReactNode} from 'react';
 import {trpc} from '../trpc.js';
 
-interface User {
+type User = {
 	id: string;
 	name: string;
 	email: string;
-}
+};
 
-interface AuthContextType {
+type AuthContextType = {
 	user: User | null;
 	token: string | null;
 	isLoading: boolean;
 	login: (token: string, user: User) => void;
 	logout: () => void;
-}
+};
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider = ({children}: {children: ReactNode}) => {
-	const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
+export const AuthProvider = ({children}: {children: ReactNode}): ReactNode => {
+	const [token, setToken] = useState(localStorage.getItem('token'));
 	const [user, setUser] = useState<User | null>(null);
 
 	const {data: me, isLoading} = trpc.auth.me.useQuery(undefined, {
-		enabled: !!token,
+		enabled: Boolean(token),
 		retry: false,
 	});
 
+	const logout = (): void => {
+		localStorage.removeItem('token');
+		setToken(null);
+		setUser(null);
+	};
+
 	useEffect(() => {
-		if (me) {
+		if (me !== undefined && me !== null) {
 			setUser(me);
-		} else if (!isLoading && token) {
+		} else if (!isLoading && token !== null && token !== '') {
 			// Token might be invalid
 			logout();
 		}
 	}, [me, isLoading, token]);
 
-	const login = (newToken: string, newUser: User) => {
+	const login = (newToken: string, newUser: User): void => {
 		localStorage.setItem('token', newToken);
 		setToken(newToken);
 		setUser(newUser);
 	};
 
-	const logout = () => {
-		localStorage.removeItem('token');
-		setToken(null);
-		setUser(null);
-	};
-
 	return <AuthContext.Provider value={{user, token, isLoading, login, logout}}>{children}</AuthContext.Provider>;
 };
 
-export const useAuth = () => {
+export const useAuth = (): AuthContextType => {
 	const context = useContext(AuthContext);
 	if (!context) {
 		throw new Error('useAuth must be used within an AuthProvider');

package/dist/templates/web-fullstack/files/client/src/main.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {App} from './App.js';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-	<React.StrictMode>
-		<App />
-	</React.StrictMode>,
-);
+const rootElement = document.querySelector('#root');
+if (rootElement !== null) {
+	ReactDOM.createRoot(rootElement).render(
+		<React.StrictMode>
+			<App />
+		</React.StrictMode>,
+	);
+}

package/dist/templates/web-fullstack/files/client/src/pages/Dashboard.tsx

@@ -1,29 +1,34 @@
+/* eslint-disable react/jsx-max-depth */
+/* eslint-disable import/no-relative-parent-imports */
+/* eslint-disable eslint/no-void */
+/* eslint-disable oxc/no-optional-chaining */
 import {Container, Typography, Button, Paper, Box} from '@mui/material';
+import {type ReactNode} from 'react';
 import {useAuth} from '../contexts/AuthContext.js';
 import {useNavigate} from 'react-router-dom';
 
-export const Dashboard = () => {
+export const Dashboard = (): ReactNode => {
 	const {user, logout} = useAuth();
 	const navigate = useNavigate();
 
-	const handleLogout = () => {
+	const handleLogout = (): void => {
 		logout();
 		void navigate('/login');
 	};
 
 	return (
 		<Container maxWidth="md">
-			<Box mt={4}>
+			<Box sx={{mt: 4}}>
 				<Paper elevation={3}>
-					<Box p={4}>
+					<Box sx={{p: 4}}>
 						<Typography variant="h4" gutterBottom>
 							Dashboard
 						</Typography>
-						<Typography variant="h6">Welcome, {user?.name}!</Typography>
+						<Typography variant="h6">Welcome, {user?.name ?? ''}!</Typography>
 						<Typography variant="body1" color="textSecondary" gutterBottom>
-							Email: {user?.email}
+							Email: {user?.email ?? ''}
 						</Typography>
-						<Box mt={4}>
+						<Box sx={{mt: 4}}>
 							<Typography variant="body2" gutterBottom>
 								This is a protected page. You can only see this because you are logged in.
 							</Typography>