Add support for hot reload

This commit is contained in:
Matthew Phillips 2021-12-07 08:58:59 -05:00
parent abdde962a9
commit 03447124a3
5 changed files with 18 additions and 18 deletions

View file

@ -25,6 +25,7 @@ interface CLIState {
hostname?: string; hostname?: string;
port?: number; port?: number;
config?: string; config?: string;
experimentalStaticBuild?: boolean;
}; };
} }
@ -37,6 +38,7 @@ function resolveArgs(flags: Arguments): CLIState {
port: typeof flags.port === 'number' ? flags.port : undefined, port: typeof flags.port === 'number' ? flags.port : undefined,
config: typeof flags.config === 'string' ? flags.config : undefined, config: typeof flags.config === 'string' ? flags.config : undefined,
hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined, hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined,
experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild: false,
}; };
if (flags.version) { if (flags.version) {
@ -73,6 +75,7 @@ function printHelp() {
--config <path> Specify the path to the Astro config file. --config <path> Specify the path to the Astro config file.
--project-root <path> Specify the path to the project root folder. --project-root <path> Specify the path to the project root folder.
--no-sitemap Disable sitemap generation (build only). --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 --verbose Enable verbose logging
--silent Disable logging --silent Disable logging
--version Show the version number and exit. --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.site === 'string') astroConfig.buildOptions.site = flags.site;
if (typeof flags.port === 'number') astroConfig.devOptions.port = flags.port; if (typeof flags.port === 'number') astroConfig.devOptions.port = flags.port;
if (typeof flags.hostname === 'string') astroConfig.devOptions.hostname = flags.hostname; if (typeof flags.hostname === 'string') astroConfig.devOptions.hostname = flags.hostname;
if (typeof flags.experimentalStaticBuild === 'boolean') astroConfig.buildOptions.experimentalStaticBuild = flags.experimentalStaticBuild;
} }
/** The primary CLI action */ /** The primary CLI action */

View file

@ -58,6 +58,7 @@ export const AstroConfigSchema = z.object({
.union([z.literal('file'), z.literal('directory')]) .union([z.literal('file'), z.literal('directory')])
.optional() .optional()
.default('directory'), .default('directory'),
experimentalStaticBuild: z.boolean().optional().default(false)
}) })
.optional() .optional()
.default({}), .default({}),

View file

@ -3,12 +3,10 @@ import type { TransformResult } from '@astrojs/compiler';
import type { SourceMapInput } from 'rollup'; import type { SourceMapInput } from 'rollup';
import type { TransformHook } from './styles'; import type { TransformHook } from './styles';
import esbuild from 'esbuild';
import fs from 'fs'; import fs from 'fs';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { transform } from '@astrojs/compiler'; import { transform } from '@astrojs/compiler';
import { AstroDevServer } from '../core/dev/index.js'; import { transformWithVite } from './styles.js';
import { getViteTransform, transformWithVite } from './styles.js';
type CompilationCache = Map<string, TransformResult>; type CompilationCache = Map<string, TransformResult>;

View file

@ -1,17 +1,12 @@
import type { TransformResult } from '@astrojs/compiler';
import type { SourceMapInput } from 'rollup';
import type vite from '../core/vite'; import type vite from '../core/vite';
import type { AstroConfig } from '../@types/astro'; import type { AstroConfig } from '../@types/astro';
import esbuild from 'esbuild'; import esbuild from 'esbuild';
import fs from 'fs';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { transform } from '@astrojs/compiler';
import { AstroDevServer } from '../core/dev/index.js'; 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 { parseAstroRequest } from './query.js';
import { cachedCompilation } from './compile.js'; import { cachedCompilation, invalidateCompilation } from './compile.js';
const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms; const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
interface AstroPluginOptions { interface AstroPluginOptions {
@ -20,7 +15,7 @@ interface AstroPluginOptions {
} }
/** Transform .astro files for Vite */ /** 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; let viteTransform: TransformHook;
return { return {
name: '@astrojs/vite-plugin-astro', name: '@astrojs/vite-plugin-astro',
@ -28,13 +23,13 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
configResolved(resolvedConfig) { configResolved(resolvedConfig) {
viteTransform = getViteTransform(resolvedConfig); viteTransform = getViteTransform(resolvedConfig);
}, },
// note: dont claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
async resolveId(id) { async resolveId(id) {
// serve sub-part requests (*?astro) as virtual modules // serve sub-part requests (*?astro) as virtual modules
if (parseAstroRequest(id).query.astro) { if (parseAstroRequest(id).query.astro) {
return id; return id;
} }
}, },
// note: dont claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
async load(id, opts) { async load(id, opts) {
let { filename, query } = parseAstroRequest(id); let { filename, query } = parseAstroRequest(id);
if(query.astro) { if(query.astro) {
@ -133,10 +128,9 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
} }
}, },
// async handleHotUpdate(context) { async handleHotUpdate(context) {
// if (devServer) { // Invalidate the compilation cache so it recompiles
// return devServer.handleHotUpdate(context); invalidateCompilation(config, context.file);
// } }
// },
}; };
} }

View file

@ -7,11 +7,14 @@ export interface AstroQuery {
raw?: boolean 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): { export function parseAstroRequest(id: string): {
filename: string filename: string
query: AstroQuery query: AstroQuery
} { } {
const [filename, rawQuery] = id.split(`?`, 2) const [filename, rawQuery] = id.split(`?`, 2);
const query = Object.fromEntries(new URLSearchParams(rawQuery).entries()) as AstroQuery; const query = Object.fromEntries(new URLSearchParams(rawQuery).entries()) as AstroQuery;
if (query.astro != null) { if (query.astro != null) {
query.astro = true query.astro = true