diff --git a/.changeset/bright-zebras-end.md b/.changeset/bright-zebras-end.md new file mode 100644 index 000000000000..238a6c00a2b6 --- /dev/null +++ b/.changeset/bright-zebras-end.md @@ -0,0 +1,6 @@ +--- +"astro": minor +"@astrojs/vercel": patch +--- + +add new --viteMode cli flag for dev and build commands diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index d9c8a9489c25..f794692243ec 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1992,6 +1992,13 @@ export interface AstroInlineOnlyConfig { * The mode used when building your site to generate either "development" or "production" code. */ mode?: RuntimeMode; + /** + * The mode used by Vite. It also defines `import.meta.env.MODE` value. + * If it is unset the default value will be `'development'` for dev command and `'production'` for build command. + * + * @see [Vite mode documentation](https://vitejs.dev/guide/env-and-mode#modes) + */ + viteMode?: string; /** * The logging level to filter messages logged by Astro. * - "debug": Log everything, including noisy debugging diagnostics. diff --git a/packages/astro/src/cli/build/index.ts b/packages/astro/src/cli/build/index.ts index 15ff584317d9..36842b8834d7 100644 --- a/packages/astro/src/cli/build/index.ts +++ b/packages/astro/src/cli/build/index.ts @@ -15,6 +15,7 @@ export async function build({ flags }: BuildOptions) { tables: { Flags: [ ['--outDir ', `Specify the output directory for the build.`], + ['--viteMode ', `Specify mode for Vite config.`], ['--help (-h)', 'See all available flags.'], ], }, diff --git a/packages/astro/src/cli/dev/index.ts b/packages/astro/src/cli/dev/index.ts index 5db47fb9703c..9dadd1372100 100644 --- a/packages/astro/src/cli/dev/index.ts +++ b/packages/astro/src/cli/dev/index.ts @@ -19,6 +19,7 @@ export async function dev({ flags }: DevOptions) { ['--host', `Listen on all addresses, including LAN and public addresses.`], ['--host ', `Expose on a network IP address at `], ['--open', 'Automatically open the app in the browser on server start'], + ['--viteMode ', `Specify mode for Vite config.`], ['--help (-h)', 'See all available flags.'], ], }, diff --git a/packages/astro/src/cli/flags.ts b/packages/astro/src/cli/flags.ts index 0af16806df44..4bfe9c6ae500 100644 --- a/packages/astro/src/cli/flags.ts +++ b/packages/astro/src/cli/flags.ts @@ -8,6 +8,7 @@ export function flagsToAstroInlineConfig(flags: Flags): AstroInlineConfig { // Inline-only configs configFile: typeof flags.config === 'string' ? flags.config : undefined, mode: typeof flags.mode === 'string' ? (flags.mode as AstroInlineConfig['mode']) : undefined, + viteMode: typeof flags.viteMode === 'string' ? flags.viteMode : undefined, logLevel: flags.verbose ? 'debug' : flags.silent ? 'silent' : undefined, // Astro user configs diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index f459a6efd1ac..ad37008f07c2 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -46,7 +46,7 @@ export function astroContentVirtualModPlugin({ name: 'astro-content-virtual-mod-plugin', enforce: 'pre', configResolved(config) { - IS_DEV = config.mode === 'development'; + IS_DEV = config.command !== 'build'; }, resolveId(id) { if (id === VIRTUAL_MODULE_ID) { diff --git a/packages/astro/src/core/build/index.ts b/packages/astro/src/core/build/index.ts index 2b71feaf9a9a..b1725e519a03 100644 --- a/packages/astro/src/core/build/index.ts +++ b/packages/astro/src/core/build/index.ts @@ -83,6 +83,7 @@ export default async function build( ...options, logger, mode: inlineConfig.mode, + viteMode: inlineConfig.viteMode, }); await builder.run(); } @@ -90,12 +91,14 @@ export default async function build( interface AstroBuilderOptions extends BuildOptions { logger: Logger; mode?: RuntimeMode; + viteMode?: string } class AstroBuilder { private settings: AstroSettings; private logger: Logger; private mode: RuntimeMode = 'production'; + private viteMode = 'production' private origin: string; private manifest: ManifestData; private timer: Record; @@ -105,6 +108,9 @@ class AstroBuilder { if (options.mode) { this.mode = options.mode; } + if (options.viteMode) { + this.viteMode = options.viteMode; + } this.settings = settings; this.logger = options.logger; this.teardownCompiler = options.teardownCompiler ?? true; @@ -134,7 +140,7 @@ class AstroBuilder { const viteConfig = await createVite( { - mode: this.mode, + mode: this.viteMode, server: { hmr: false, middlewareMode: true, diff --git a/packages/astro/src/core/config/config.ts b/packages/astro/src/core/config/config.ts index 5bb2eda77287..013fff5db07a 100644 --- a/packages/astro/src/core/config/config.ts +++ b/packages/astro/src/core/config/config.ts @@ -165,12 +165,13 @@ function splitInlineConfig(inlineConfig: AstroInlineConfig): { inlineUserConfig: AstroUserConfig; inlineOnlyConfig: AstroInlineOnlyConfig; } { - const { configFile, mode, logLevel, ...inlineUserConfig } = inlineConfig; + const { configFile, mode, viteMode, logLevel, ...inlineUserConfig } = inlineConfig; return { inlineUserConfig, inlineOnlyConfig: { configFile, mode, + viteMode, logLevel, }, }; diff --git a/packages/astro/src/core/dev/container.ts b/packages/astro/src/core/dev/container.ts index d252e2eea534..c6a3d14fca1e 100644 --- a/packages/astro/src/core/dev/container.ts +++ b/packages/astro/src/core/dev/container.ts @@ -68,7 +68,7 @@ export async function createContainer({ const viteConfig = await createVite( { - mode: 'development', + mode: inlineConfig?.viteMode || 'development', server: { host, headers, open }, optimizeDeps: { include: rendererClientEntries, diff --git a/packages/astro/test/fixtures/set-html/src/pages/fetch.astro b/packages/astro/test/fixtures/set-html/src/pages/fetch.astro index d03f45f7f586..055736e4319f 100644 --- a/packages/astro/test/fixtures/set-html/src/pages/fetch.astro +++ b/packages/astro/test/fixtures/set-html/src/pages/fetch.astro @@ -1,6 +1,6 @@ --- // This is a dev only test -const mode = import.meta.env.MODE; +const isDev = import.meta.env.DEV; --- @@ -9,7 +9,7 @@ const mode = import.meta.env.MODE;

Testing

{ assert.equal(r.res.statusCode, 200); }); }); + + it('overrides Vite mode when --viteMode flag is specified', async () => { + await runInContainer({ inlineConfig: { viteMode: 'production' } }, (container) => { + assert.equal(container.viteServer.config.mode, 'production'); + }); + await runInContainer({ inlineConfig: { viteMode: 'development' } }, (container) => { + assert.equal(container.viteServer.config.mode, 'development'); + }); + await runInContainer({ inlineConfig: { viteMode: 'staging' } }, (container) => { + assert.equal(container.viteServer.config.mode, 'staging'); + }); + }); + + it('uses "development" as Vite mode when --viteMode flag is not specified', async () => { + await runInContainer({}, (container) => { + assert.equal(container.viteServer.config.mode, 'development'); + }); + }); }); diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx index cf970e38c087..a1ca97a97ba9 100644 --- a/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx +++ b/packages/integrations/react/test/fixtures/react-component/src/components/ThrowsAnError.jsx @@ -4,7 +4,7 @@ export default function() { let player = undefined; // This is tested in dev mode, so make it work during the build to prevent // breaking other tests. - if(import.meta.env.MODE === 'production') { + if(import.meta.env.PROD) { player = {}; } const [] = useState(player.currentTime || null); diff --git a/packages/integrations/vercel/src/speed-insights.ts b/packages/integrations/vercel/src/speed-insights.ts index cd2ae7fe8d70..b5e7bb61833b 100644 --- a/packages/integrations/vercel/src/speed-insights.ts +++ b/packages/integrations/vercel/src/speed-insights.ts @@ -58,8 +58,8 @@ function collectWebVitals() { } } -const mode = (import.meta as any).env.MODE as 'development' | 'production'; +const isProduction = (import.meta as any).env.PROD; -if (mode === 'production') { +if (isProduction) { collectWebVitals(); }