From 03447124a3f93ce9e1f853cdbf1d46821bd50bed Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 7 Dec 2021 08:58:59 -0500 Subject: [PATCH] Add support for hot reload --- packages/astro/src/cli/index.ts | 4 ++++ packages/astro/src/core/config.ts | 1 + .../astro/src/vite-plugin-astro/compile.ts | 4 +--- packages/astro/src/vite-plugin-astro/index.ts | 22 +++++++------------ packages/astro/src/vite-plugin-astro/query.ts | 5 ++++- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/astro/src/cli/index.ts b/packages/astro/src/cli/index.ts index 621678e50..2ef684abb 100644 --- a/packages/astro/src/cli/index.ts +++ b/packages/astro/src/cli/index.ts @@ -25,6 +25,7 @@ interface CLIState { hostname?: string; port?: number; config?: string; + experimentalStaticBuild?: boolean; }; } @@ -37,6 +38,7 @@ function resolveArgs(flags: Arguments): CLIState { port: typeof flags.port === 'number' ? flags.port : undefined, config: typeof flags.config === 'string' ? flags.config : undefined, hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined, + experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild: false, }; if (flags.version) { @@ -73,6 +75,7 @@ function printHelp() { --config Specify the path to the Astro config file. --project-root Specify the path to the project root folder. --no-sitemap Disable sitemap generation (build only). + --experimental-static-build A more performant build that expects assets to be define statically. --verbose Enable verbose logging --silent Disable logging --version Show the version number and exit. @@ -92,6 +95,7 @@ function mergeCLIFlags(astroConfig: AstroConfig, flags: CLIState['options']) { if (typeof flags.site === 'string') astroConfig.buildOptions.site = flags.site; if (typeof flags.port === 'number') astroConfig.devOptions.port = flags.port; if (typeof flags.hostname === 'string') astroConfig.devOptions.hostname = flags.hostname; + if (typeof flags.experimentalStaticBuild === 'boolean') astroConfig.buildOptions.experimentalStaticBuild = flags.experimentalStaticBuild; } /** The primary CLI action */ diff --git a/packages/astro/src/core/config.ts b/packages/astro/src/core/config.ts index f2e999f80..b507ac644 100644 --- a/packages/astro/src/core/config.ts +++ b/packages/astro/src/core/config.ts @@ -58,6 +58,7 @@ export const AstroConfigSchema = z.object({ .union([z.literal('file'), z.literal('directory')]) .optional() .default('directory'), + experimentalStaticBuild: z.boolean().optional().default(false) }) .optional() .default({}), diff --git a/packages/astro/src/vite-plugin-astro/compile.ts b/packages/astro/src/vite-plugin-astro/compile.ts index a6c998f4d..9ae1d1752 100644 --- a/packages/astro/src/vite-plugin-astro/compile.ts +++ b/packages/astro/src/vite-plugin-astro/compile.ts @@ -3,12 +3,10 @@ import type { TransformResult } from '@astrojs/compiler'; import type { SourceMapInput } from 'rollup'; import type { TransformHook } from './styles'; -import esbuild from 'esbuild'; import fs from 'fs'; import { fileURLToPath } from 'url'; import { transform } from '@astrojs/compiler'; -import { AstroDevServer } from '../core/dev/index.js'; -import { getViteTransform, transformWithVite } from './styles.js'; +import { transformWithVite } from './styles.js'; type CompilationCache = Map; diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts index 3c827a9bf..c90f869f4 100644 --- a/packages/astro/src/vite-plugin-astro/index.ts +++ b/packages/astro/src/vite-plugin-astro/index.ts @@ -1,17 +1,12 @@ -import type { TransformResult } from '@astrojs/compiler'; -import type { SourceMapInput } from 'rollup'; import type vite from '../core/vite'; import type { AstroConfig } from '../@types/astro'; - import esbuild from 'esbuild'; -import fs from 'fs'; import { fileURLToPath } from 'url'; -import { transform } from '@astrojs/compiler'; import { AstroDevServer } from '../core/dev/index.js'; -import { getViteTransform, TransformHook, transformWithVite } from './styles.js'; +import { getViteTransform, TransformHook } from './styles.js'; import { parseAstroRequest } from './query.js'; -import { cachedCompilation } from './compile.js'; +import { cachedCompilation, invalidateCompilation } from './compile.js'; const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms; interface AstroPluginOptions { @@ -20,7 +15,7 @@ interface AstroPluginOptions { } /** Transform .astro files for Vite */ -export default function astro({ config, devServer }: AstroPluginOptions): vite.Plugin { +export default function astro({ config }: AstroPluginOptions): vite.Plugin { let viteTransform: TransformHook; return { name: '@astrojs/vite-plugin-astro', @@ -28,13 +23,13 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P configResolved(resolvedConfig) { viteTransform = getViteTransform(resolvedConfig); }, + // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.) async resolveId(id) { // serve sub-part requests (*?astro) as virtual modules if (parseAstroRequest(id).query.astro) { return id; } }, - // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.) async load(id, opts) { let { filename, query } = parseAstroRequest(id); if(query.astro) { @@ -133,10 +128,9 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P } }, - // async handleHotUpdate(context) { - // if (devServer) { - // return devServer.handleHotUpdate(context); - // } - // }, + async handleHotUpdate(context) { + // Invalidate the compilation cache so it recompiles + invalidateCompilation(config, context.file); + } }; } diff --git a/packages/astro/src/vite-plugin-astro/query.ts b/packages/astro/src/vite-plugin-astro/query.ts index 6617ee434..75e27e270 100644 --- a/packages/astro/src/vite-plugin-astro/query.ts +++ b/packages/astro/src/vite-plugin-astro/query.ts @@ -7,11 +7,14 @@ export interface AstroQuery { raw?: boolean } +// Parses an id to check if its an Astro request. +// CSS is imported like `import '/src/pages/index.astro?astro&type=style&index=0&lang.css'; +// This parses those ids and returns an object representing what it found. export function parseAstroRequest(id: string): { filename: string query: AstroQuery } { - const [filename, rawQuery] = id.split(`?`, 2) + const [filename, rawQuery] = id.split(`?`, 2); const query = Object.fromEntries(new URLSearchParams(rawQuery).entries()) as AstroQuery; if (query.astro != null) { query.astro = true