@aamini/config 0.0.1

package/test/db.ts

@@ -0,0 +1,80 @@
+// oxlint-disable typescript-eslint/triple-slash-reference
+/// <reference path="../virtual-modules.d.ts" />
+// oxlint-disable no-empty-pattern
+import handlers from '@test/handlers'
+import { setupServer, SetupServer } from 'msw/node'
+import { resolve } from 'node:path'
+import { test as baseTest } from 'vitest'
+import type { Database } from './database'
+import { seedDatabase } from './database'
+
+const DEFAULT_SCHEMA_PATH = 'src/db/tables.ts'
+const DEFAULT_MIGRATIONS_PATH = 'src/db/migrations'
+const DEFAULT_IMAGE = 'postgres:17'
+
+export interface DbFixture {
+	server: SetupServer
+	_cleanup: void
+	db: Database
+	seedFunction: (db: Database) => Promise<void>
+}
+
+const mswServer = setupServer(...handlers)
+
+export const test = baseTest.extend<DbFixture>({
+	// MSW Server fixture
+	server: [
+		async ({}, use) => {
+			mswServer.listen({ onUnhandledRequest: 'bypass' })
+			await use(mswServer)
+			mswServer.close()
+		},
+		{ auto: true, scope: 'worker' },
+	],
+	_cleanup: [
+		async ({ server }, use) => {
+			await use()
+			server.resetHandlers()
+		},
+		{ auto: true },
+	],
+
+	// Database fixtures
+	seedFunction: [async ({}, use) => use(async () => {}), { scope: 'file' }],
+	db: [
+		async ({ seedFunction }: Pick<DbFixture, 'seedFunction'>, use) => {
+			const { PostgreSqlContainer } = await import('@testcontainers/postgresql')
+			const { drizzle } = await import('drizzle-orm/node-postgres')
+			const { Wait } = await import('testcontainers')
+			const { Pool } = await import('pg')
+
+			// Auto-discover schema
+			const schemaPath = resolve(process.cwd(), DEFAULT_SCHEMA_PATH)
+
+			// Resolve migrations folder relative to cwd (app root)
+			const migrationsFolder = resolve(process.cwd(), DEFAULT_MIGRATIONS_PATH)
+
+			const container = await new PostgreSqlContainer(DEFAULT_IMAGE)
+				.withWaitStrategy(Wait.forHealthCheck())
+				.start()
+			const db = drizzle({
+				client: new Pool({ connectionString: container.getConnectionUri() }),
+			}) as Database
+
+			try {
+				await seedDatabase(db, { schemaPath, migrationsFolder, seedFunction })
+				await use(db)
+			} finally {
+				await db.$client.end()
+				await container.stop()
+			}
+		},
+		{ scope: 'file' },
+	],
+})
+
+export function initDb(seedFunction: (db: Database) => Promise<void>) {
+	test.override({
+		seedFunction: [async ({}, use) => use(seedFunction), { scope: 'file' }],
+	})
+}

package/test/playwright.ts

@@ -0,0 +1,17 @@
+import { readFile } from 'node:fs/promises'
+import type { Page } from '@playwright/test'
+
+export async function mockJsonRoute(
+	page: Page,
+	url: string | RegExp,
+	fixtureUrl: URL,
+) {
+	await page.route(url, async (route) => {
+		const body = await readFile(fixtureUrl, 'utf8')
+
+		await route.fulfill({
+			contentType: 'application/json',
+			body,
+		})
+	})
+}

package/test/postgres.ts

@@ -0,0 +1,43 @@
+import {
+	PostgreSqlContainer,
+	type StartedPostgreSqlContainer,
+} from '@testcontainers/postgresql'
+import { Wait } from 'testcontainers'
+
+type State = {
+	container: StartedPostgreSqlContainer
+	databaseUrl: string
+}
+
+let state: State | undefined
+
+export async function ensurePostgresContainer() {
+	const databaseUrl = process.env.DATABASE_URL
+	if (databaseUrl) {
+		return {
+			databaseUrl,
+		}
+	}
+
+	if (!state) {
+		const container = await new PostgreSqlContainer('postgres:17')
+			.withDatabase('imdbgraph')
+			.withUsername('imdbgraph')
+			.withPassword('imdbgraph')
+			.withWaitStrategy(Wait.forHealthCheck())
+			.start()
+
+		state = {
+			container,
+			databaseUrl: container.getConnectionUri(),
+		}
+	}
+
+	return state
+}
+
+export async function stopPostgresContainer() {
+	if (!state) return
+	await state.container.stop()
+	state = undefined
+}

package/test/server.ts

@@ -0,0 +1,31 @@
+// oxlint-disable typescript-eslint/triple-slash-reference
+/// <reference path="../virtual-modules.d.ts" />
+// oxlint-disable no-empty-pattern
+import handlers from '@test/handlers'
+import { SetupServer, setupServer } from 'msw/node'
+import { test as baseTest } from 'vitest'
+
+export interface MswServerFixture {
+	server: SetupServer
+	_cleanup: void
+}
+
+const mswServer = setupServer(...handlers)
+
+export const test = baseTest.extend<MswServerFixture>({
+	server: [
+		async ({}, use) => {
+			mswServer.listen({ onUnhandledRequest: 'bypass' })
+			await use(mswServer)
+			mswServer.close()
+		},
+		{ auto: true, scope: 'worker' },
+	],
+	_cleanup: [
+		async ({ server }, use) => {
+			await use()
+			server.resetHandlers()
+		},
+		{ auto: true },
+	],
+})

package/test/visual-page.ts

@@ -0,0 +1,57 @@
+import { createElement, type ComponentType, type ReactNode } from 'react'
+import { expect } from 'vitest'
+import { page, type Locator } from 'vitest/browser'
+import { render, type RenderResult } from 'vitest-browser-react'
+
+interface Viewport {
+	width: number
+	height: number
+}
+
+interface ExpectComponentScreenshotOptions {
+	component: ComponentType
+	name: string
+	waitFor: (screen: RenderResult) => Locator
+	prepare?: ((screen: RenderResult) => void | Promise<void>) | undefined
+	target?: ((screen: RenderResult) => Locator) | undefined
+	setup?: (() => void | Promise<void>) | undefined
+	wrapper?: ComponentType<{ children: ReactNode }> | undefined
+	viewport?: Viewport | undefined
+	fullPage?: boolean | undefined
+}
+
+export async function expectComponentScreenshot({
+	component,
+	name,
+	waitFor,
+	prepare,
+	target = (screen) => screen.locator,
+	setup,
+	wrapper,
+	viewport = { width: 1280, height: 720 },
+	fullPage = true,
+}: ExpectComponentScreenshotOptions) {
+	localStorage.clear()
+	document.body.replaceChildren()
+	await setup?.()
+	await page.viewport(viewport.width, viewport.height)
+
+	const container = document.body.appendChild(document.createElement('div'))
+	container.style.width = '100vw'
+	container.style.minHeight = '100vh'
+
+	const screen = await render(
+		createElement(component),
+		wrapper ? { container, wrapper } : { container },
+	)
+
+	await prepare?.(screen)
+	await expect.element(waitFor(screen)).toBeVisible()
+	await document.fonts.ready
+	if (fullPage) {
+		await page.viewport(viewport.width, Math.ceil(container.scrollHeight))
+	}
+	await expect.element(target(screen)).toMatchScreenshot(`${name}.png`, {
+		screenshotOptions: { scale: 'css' },
+	})
+}

package/tsconfig/tsconfig.astro.json

@@ -0,0 +1,34 @@
+{
+	// TODO: remove
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "./tsconfig.strict.json",
+	"compilerOptions": {
+		// Enable top-level await, and other modern ESM features.
+		"target": "ESNext",
+		"module": "ESNext",
+		// Enable module resolution without file extensions on relative paths, for things like npm package imports.
+		"moduleResolution": "Bundler",
+		// Allow importing TypeScript files using their native extension (.ts(x)).
+		"allowImportingTsExtensions": true,
+		// Enable JSON imports.
+		"resolveJsonModule": true,
+		// Enforce the usage of type-only imports when needed, which helps avoiding bundling issues.
+		"verbatimModuleSyntax": true,
+		// Ensure that each file can be transpiled without relying on other imports.
+		// This is redundant with the previous option, however it ensures that it's on even if someone disable `verbatimModuleSyntax`
+		"isolatedModules": true,
+		// Astro directly run TypeScript code, no transpilation needed.
+		"noEmit": true,
+		// Report an error when importing a file using a casing different from another import of the same file.
+		"forceConsistentCasingInFileNames": true,
+		// Properly support importing CJS modules in ESM
+		"esModuleInterop": true,
+		// Skip typechecking libraries and .d.ts files
+		"skipLibCheck": true,
+		// Allow JavaScript files to be imported
+		"allowJs": true,
+		// Allow JSX files (or files that are internally considered JSX, like Astro files) to be imported inside `.js` and `.ts` files.
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
+	}
+}

package/tsconfig/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "./tsconfig.strict.json",
+	"compilerOptions": {
+		"noEmit": true,
+		"declaration": true,
+		"declarationMap": true,
+		"esModuleInterop": true,
+		"incremental": false,
+		"isolatedModules": true,
+		"lib": ["es2022", "DOM", "DOM.Iterable"],
+		"module": "NodeNext",
+		"moduleDetection": "force",
+		"moduleResolution": "NodeNext",
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"target": "ES2022"
+	}
+}

package/tsconfig/tsconfig.react.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "./tsconfig.strict.json",
+	"compilerOptions": {
+		"target": "ES2022",
+		"jsx": "react-jsx",
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": false,
+		"noEmit": true
+	}
+}

package/tsconfig/tsconfig.strict.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"skipLibCheck": true,
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true,
+		"noImplicitOverride": true,
+		"noImplicitReturns": true,
+		"noUncheckedIndexedAccess": true,
+		"exactOptionalPropertyTypes": true,
+		"allowUnreachableCode": false,
+		"allowUnusedLabels": false
+	}
+}

package/tsconfig/tsconfig.tanstack.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "./tsconfig.strict.json",
+	"compilerOptions": {
+		"target": "ES2022",
+		"jsx": "react-jsx",
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"types": ["vite/client"],
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": false,
+		"noEmit": true
+	}
+}

package/virtual-modules.d.ts

@@ -0,0 +1,6 @@
+declare module '@test/handlers' {
+	import type { RequestHandler } from 'msw'
+	const handlers: RequestHandler[]
+	export default handlers
+}
+declare module '@test/styles' {}

package/vite.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+	pack: {
+		entry: [
+			'vite.shared.ts',
+			'vitest.shared.ts',
+			'playwright.shared.config.ts',
+			'msw.ts',
+			'test/browser.ts',
+			'test/database.ts',
+			'test/db.ts',
+			'test/playwright.ts',
+			'test/postgres.ts',
+			'test/server.ts',
+			'test/visual-page.ts',
+			'setup/styles.ts',
+		],
+		dts: true,
+		format: ['esm'],
+		sourcemap: true,
+		deps: {
+			skipNodeModulesBundle: true,
+			neverBundle: [
+				'@playwright/test',
+				'@rolldown/plugin-babel',
+				'@tailwindcss/vite',
+				'@tanstack/devtools-vite',
+				'@tanstack/react-start',
+				'@test/handlers',
+				'@test/styles',
+				'@testing-library/jest-dom',
+				'@testcontainers/postgresql',
+				'@vitejs/plugin-react',
+				'@vitest/browser-playwright',
+				'@voidzero-dev/vite-plus-core',
+				'@voidzero-dev/vite-plus-test',
+				'drizzle-orm',
+				'drizzle-seed',
+				'msw',
+				'nitro',
+				'pg',
+				'react',
+				'testcontainers',
+				'vite',
+				'vite-plus',
+				'vite-plugin-svgr',
+				'vitest',
+				'vitest-browser-react',
+			],
+		},
+	},
+})

package/vite.shared.ts

@@ -0,0 +1,298 @@
+import { nitro } from 'nitro/vite'
+import { devtools } from '@tanstack/devtools-vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact, { reactCompilerPreset } from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import babel from '@rolldown/plugin-babel'
+import svgr from 'vite-plugin-svgr'
+import { existsSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { Plugin } from 'vite'
+import {
+	defineConfig as defineVitestConfig,
+	mergeConfig,
+	type TestProjectConfiguration,
+	type TestProjectInlineConfiguration,
+} from 'vitest/config'
+import { defineConfig } from 'vite'
+import { playwright } from 'vite-plus/test/browser-playwright'
+
+const HANDLER_LOCATIONS = [
+	'__mocks__/handlers.ts',
+	'__mocks__/handlers.js',
+	'src/mocks/handlers.ts',
+	'src/mocks/handlers.js',
+]
+
+const STYLES_LOCATIONS = ['src/styles.css', 'src/index.css', 'src/app.css']
+
+function mswHandlersPlugin(root: string): Plugin {
+	const virtualModuleId = '@test/handlers'
+	const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+	return {
+		name: 'msw-handlers-resolver',
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId
+			}
+			return undefined
+		},
+		load(id) {
+			if (id === resolvedVirtualModuleId) {
+				for (const location of HANDLER_LOCATIONS) {
+					const fullPath = resolve(root, location)
+					if (existsSync(fullPath)) {
+						return `export { default } from '${fullPath}'`
+					}
+				}
+				throw new Error(
+					`No MSW handlers found. Expected one of:\n${HANDLER_LOCATIONS.map((l) => `  - ${resolve(root, l)}`).join('\n')}`,
+				)
+			}
+			return undefined
+		},
+	}
+}
+
+function stylesPlugin(root: string): Plugin {
+	const virtualModuleId = '@test/styles'
+	const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+	return {
+		name: 'styles-resolver',
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId
+			}
+			return undefined
+		},
+		load(id) {
+			if (id === resolvedVirtualModuleId) {
+				for (const location of STYLES_LOCATIONS) {
+					const fullPath = resolve(root, location)
+					if (existsSync(fullPath)) {
+						return `import '${fullPath}'`
+					}
+				}
+				throw new Error(
+					`No styles file found. Expected one of:\n${STYLES_LOCATIONS.map((l) => `  - ${resolve(root, l)}`).join('\n')}`,
+				)
+			}
+			return undefined
+		},
+	}
+}
+
+const stylesSetup = new URL('setup/styles.ts', import.meta.url).pathname
+
+function mergeProjectConfig(
+	base: TestProjectConfiguration,
+	overrides: TestProjectConfiguration = {},
+): TestProjectConfiguration {
+	return mergeConfig(
+		base as Record<string, any>,
+		overrides as Record<string, any>,
+	) as TestProjectConfiguration
+}
+
+interface ProjectOverrides {
+	server?: TestProjectConfiguration
+	browser?: TestProjectConfiguration
+}
+
+function createBaseConfig(
+	root: string,
+	overrides: TestProjectInlineConfiguration = {},
+	projectOverrides: ProjectOverrides = {},
+) {
+	const localSetup = resolve(root, 'vitest.setup.ts')
+	const hasLocalSetup = existsSync(localSetup)
+
+	return mergeConfig(
+		defineVitestConfig({
+			root,
+			resolve: {
+				tsconfigPaths: true,
+				dedupe: ['react', 'react-dom'],
+				alias: [
+					{ find: '@/mocks', replacement: resolve(root, '__mocks__') },
+					{ find: '@', replacement: resolve(root, 'src') },
+				],
+			},
+			plugins: [
+				tailwindcss(),
+				viteReact(),
+				svgr({
+					include: '**/*.svg',
+					svgrOptions: { exportType: 'default' },
+				}),
+			],
+			test: {
+				passWithNoTests: true,
+				exclude: [
+					'**/node_modules/**',
+					'**/dist/**',
+					'**/.output/**',
+					'**/.vercel/**',
+					'**/cypress/**',
+					'**/.{idea,git,cache,output,temp}/**',
+					'**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
+					'**/e2e/**',
+				],
+				projects: [
+					{
+						extends: true,
+						test: {
+							name: 'unit',
+							include: ['src/**/*.test.unit.ts'],
+						},
+					},
+					mergeProjectConfig(
+						{
+							extends: true,
+							plugins: [mswHandlersPlugin(root)],
+							test: {
+								name: 'server',
+								include: ['src/**/*.test.ts'],
+								exclude: ['src/**/*.test.unit.ts', 'src/**/*.test.tsx'],
+								testTimeout: 30_000,
+								fileParallelism: false,
+								setupFiles: hasLocalSetup ? [localSetup] : [],
+							},
+						} satisfies TestProjectConfiguration,
+						projectOverrides.server ?? {},
+					),
+					mergeProjectConfig(
+						{
+							extends: true,
+							plugins: [mswHandlersPlugin(root), stylesPlugin(root)],
+							test: {
+								name: 'browser',
+								include: ['src/**/*.test.tsx', 'tests/**/*.test.tsx'],
+								setupFiles: [stylesSetup],
+								browser: {
+									instances: [
+										{
+											browser: 'chromium',
+										},
+									],
+									provider: playwright(),
+									enabled: true,
+									headless: true,
+								},
+							},
+						} satisfies TestProjectConfiguration,
+						projectOverrides.browser ?? {},
+					),
+				],
+			},
+		}),
+		overrides,
+	)
+}
+
+const isVitest = process.env.VITEST === 'true'
+
+function createFrameworkConfig(root: string) {
+	return defineConfig({
+		root,
+		resolve: {
+			tsconfigPaths: true,
+			dedupe: ['react', 'react-dom'],
+			alias: [
+				{ find: '@/mocks', replacement: resolve(root, '__mocks__') },
+				{ find: '@', replacement: resolve(root, 'src') },
+			],
+		},
+		ssr: {
+			noExternal: ['recharts'],
+		},
+		plugins: [
+			...(isVitest ? [] : [devtools(), nitro(), tanstackStart()]),
+			tailwindcss(),
+			viteReact(),
+			babel({ presets: [reactCompilerPreset()] }),
+			svgr({
+				include: '**/*.svg',
+				svgrOptions: { exportType: 'default' },
+			}),
+		],
+	})
+}
+
+// Creates a full app config with customized test project overrides
+export function createAppConfig(
+	root: string,
+	projectOverrides: ProjectOverrides = {},
+	overrides: TestProjectInlineConfiguration = {},
+) {
+	return mergeConfig(
+		createFrameworkConfig(root),
+		createBaseConfig(root, overrides, projectOverrides),
+	)
+}
+
+// Helper to create config from import.meta.url
+export function baseConfigFor(configUrl: string | URL) {
+	const root = dirname(fileURLToPath(configUrl))
+	return createAppConfig(root)
+}
+
+// Workspace-level shared config (lint, fmt, staged)
+// Cast to any because Vite+ extensions (fmt, lint, staged) aren't in standard Vite types
+export const workspaceConfig = defineConfig({
+	fmt: {
+		singleQuote: true,
+		semi: false,
+		useTabs: true,
+		printWidth: 80,
+		proseWrap: 'always',
+		ignorePatterns: [
+			'**/.vercel',
+			'**/.output',
+			'**/env.d.ts',
+			'pnpm-lock.yaml',
+			'routeTree.gen.ts',
+			'**/charts/**',
+			'**/*.yaml',
+			'**/*.yml',
+		],
+	},
+	lint: {
+		plugins: ['typescript', 'react', 'unicorn'],
+		options: {
+			typeAware: true,
+			typeCheck: true,
+		},
+		rules: {
+			'no-console': ['error', { allow: ['warn', 'error'] }],
+		},
+		overrides: [
+			{
+				files: ['apps/**'],
+				plugins: ['typescript', 'react'],
+				rules: {
+					'react/self-closing-comp': 'error',
+				},
+			},
+			{
+				files: ['**/*.test.ts', '**/*.test.tsx'],
+				plugins: ['typescript', 'vitest'],
+				rules: {
+					'@typescript-eslint/no-explicit-any': 'off',
+				},
+			},
+			{
+				files: ['**/scripts/**', '**/src/lib/imdb/**'],
+				rules: {
+					'no-console': 'off',
+				},
+			},
+		],
+	},
+	staged: {
+		'*.{js,ts,tsx}': 'vp check --fix',
+	},
+} as any)