diff --git a/.env.example b/.env.example index 2ad106a..93c5d07 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -# Debug +# Devtools VITE_DEVTOOLS_ENABLED= # Alchemy (required when using alchemy) @@ -33,7 +33,7 @@ VITE_PUBLIC_POSTHOG_KEY=<***> VITE_PUBLIC_POSTHOG_DEBUG= VITE_PUBLIC_POSTHOG_ENABLED= -# Observability - Posthog sourcemap upload (CI only) +# Observability - Posthog sourcemap upload # See https://app.posthog.com/settings/project#variables POSTHOG_CLI_HOST= POSTHOG_CLI_PROJECT_ID=<***> diff --git a/src/lib/env/client.ts b/src/lib/env/client.ts index c5387f4..b5d9e9a 100644 --- a/src/lib/env/client.ts +++ b/src/lib/env/client.ts @@ -7,6 +7,8 @@ import { coerceBoolean } from './utils'; export const clientEnv = createEnv({ clientPrefix: 'VITE_', client: { + // Devtools + VITE_DEVTOOLS_ENABLED: coerceBoolean().default(false), // Application VITE_PUBLIC_BASE_URL: z.url(), // PostHog diff --git a/src/lib/env/server.ts b/src/lib/env/server.ts index 92e9dc1..299daff 100644 --- a/src/lib/env/server.ts +++ b/src/lib/env/server.ts @@ -4,11 +4,16 @@ import * as z from 'zod/v4'; /** Env schema for server bundle */ export const serverEnv = createEnv({ server: { + // Auth AUTH_SECRET: z.string(), AUTH_GITHUB_CLIENT_ID: z.string(), AUTH_GITHUB_CLIENT_SECRET: z.string(), AUTH_GOOGLE_CLIENT_ID: z.string(), AUTH_GOOGLE_CLIENT_SECRET: z.string(), + // Posthog CLI (for posthog vite plugin upload sourcemap) + POSTHOG_CLI_HOST: z.url(), + POSTHOG_CLI_PROJECT_ID: z.string(), + POSTHOG_CLI_TOKEN: z.string(), }, runtimeEnv: process.env, emptyStringAsUndefined: true, diff --git a/src/lib/posthog/plugin.ts b/src/lib/posthog/plugin.ts deleted file mode 100644 index 9fdc174..0000000 --- a/src/lib/posthog/plugin.ts +++ /dev/null @@ -1,38 +0,0 @@ -import posthogVitePlugin, { - type PostHogRollupPluginOptions, -} from '@posthog/rollup-plugin'; - -/** - * Create a PostHog Vite/Rollup plugin instance only when the required - * PostHog configuration is present. - * - * This wrapper is useful when you want sourcemap upload + injection in some - * environments (e.g. production CI) but want to avoid running the plugin in - * others (e.g. local dev, preview builds). - * - * If any required option is missing, this function returns `undefined` so it - * can be conditionally included in your Vite/Rollup plugins array without - * additional branching. - * - * When enabled, the underlying PostHog plugin will: - * - inject sourcemap references - * - upload sourcemaps - * - delete sourcemaps after upload (as configured) - */ -export function posthog(options: Partial) { - if (!options.personalApiKey || !options.projectId || !options.host) { - return undefined; - } - - return posthogVitePlugin({ - host: options.host, - projectId: options.projectId, - personalApiKey: options.personalApiKey, - ...options, - sourcemaps: { - enabled: true, - deleteAfterUpload: true, - ...options.sourcemaps, - }, - }); -} diff --git a/vite.config.ts b/vite.config.ts index 68936a3..908fd8a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ import { paraglideVitePlugin as paraglide } from '@inlang/paraglide-js'; +import posthogVitePlugin from '@posthog/rollup-plugin'; import babel from '@rolldown/plugin-babel'; import tailwindcss from '@tailwindcss/vite'; import { devtools as tanstackDevtools } from '@tanstack/devtools-vite'; @@ -7,8 +8,6 @@ import viteReact, { reactCompilerPreset } from '@vitejs/plugin-react'; import alchemy from 'alchemy/cloudflare/tanstack-start'; import { defineConfig, loadEnv, type ConfigEnv } from 'vite'; -import { posthog } from './src/lib/posthog/plugin'; - export default async function viteConfig({ mode }: ConfigEnv) { /** * Environment Variables aren't loaded automatically @@ -16,8 +15,8 @@ export default async function viteConfig({ mode }: ConfigEnv) { */ Object.assign(process.env, loadEnv(mode, process.cwd(), '')); /** Validate env's schema on build */ - await import('./src/lib/env/server'); - await import('./src/lib/env/client'); + const { serverEnv } = await import('./src/lib/env/server'); + const { clientEnv } = await import('./src/lib/env/client'); return defineConfig({ server: { port: 3000 }, @@ -26,13 +25,12 @@ export default async function viteConfig({ mode }: ConfigEnv) { tsconfigPaths: true, }, devtools: { - enabled: process.env.VITE_DEVTOOLS_ENABLED === 'true', + enabled: clientEnv.VITE_DEVTOOLS_ENABLED, }, build: { target: 'esnext', minify: true, cssMinify: true, - sourcemap: true, rolldownOptions: { external: ['node:async_hooks', 'cloudflare:workers'], output: { @@ -85,11 +83,19 @@ export default async function viteConfig({ mode }: ConfigEnv) { }, ], }), - posthog({ - host: process.env.POSTHOG_CLI_HOST, - projectId: process.env.POSTHOG_CLI_PROJECT_ID, - personalApiKey: process.env.POSTHOG_CLI_TOKEN, - }), + clientEnv.VITE_PUBLIC_POSTHOG_ENABLED + ? [ + posthogVitePlugin({ + host: serverEnv.POSTHOG_CLI_HOST, + projectId: serverEnv.POSTHOG_CLI_PROJECT_ID, + personalApiKey: serverEnv.POSTHOG_CLI_TOKEN, + sourcemaps: { + enabled: true, + deleteAfterUpload: true, + }, + }), + ] + : [], ], }); }