Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues Activity

WIP: fix CSS import HMR

Browse source
This commit is contained in:
Nate Moore 2022-08-04 10:29:23 -05:00
parent 7bc75a03a7
commit 9122e9db1a
2 changed files with 35 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/astro/src/vite-plugin-astro/hmr.ts
View file

@ -9,7 +9,7 @@ import { cachedCompilation, invalidateCompilation, isCached } from './compile.js
interface TrackCSSDependenciesOptions {
viteDevServer: ViteDevServer | null;
filename: string;
file: string;
id: string;
deps: Set<string>;
}
@ -18,34 +18,43 @@ export async function trackCSSDependencies(
this: RollupPluginContext,
opts: TrackCSSDependenciesOptions
): Promise<void> {
const { viteDevServer, filename, deps, id } = opts;
// Dev, register CSS dependencies for HMR.
const { viteDevServer, file, deps, id } = opts;
if (viteDevServer) {
const mod = viteDevServer.moduleGraph.getModuleById(id);
if (mod) {
// Track any CSS dependencies so that HMR is triggered when they change.
const { moduleGraph } = viteDevServer;
const thisModule = moduleGraph.getModuleById(id);
if (thisModule) {
const depModules = new Set<string | ModuleNode>();
const cssDeps = (
await Promise.all(
Array.from(deps).map((spec) => {
return this.resolve(spec, id);
})
Array.from(deps).map((dep) =>
this.resolve(dep, id, { skipSelf: true })
)
)
)
.filter(Boolean)
.map((dep) => (dep as ResolvedId).id);
const { moduleGraph } = viteDevServer;
// record deps in the module graph so edits to @import css can trigger
// main import to hot update
const depModules = new Set(mod.importedModules);
.map((dep) => dep?.id) as string[];
for (const dep of cssDeps) {
depModules.add(moduleGraph.createFileOnlyEntry(dep));
for (const m of moduleGraph.getModulesByFile(dep) ?? []) {
if (m.id?.endsWith('?direct')) {
depModules.add(m);
}
}
// Update the module graph, telling it about our CSS deps.
moduleGraph.updateModuleInfo(mod, depModules, new Map(), new Set(), new Set(), true);
for (const dep of cssDeps) {
this.addWatchFile(dep);
}
for (const styleMod of thisModule.importedModules) {
if (styleMod.file === file && styleMod.id?.endsWith('.css')) {
await moduleGraph.updateModuleInfo(
styleMod,
depModules,
null,
new Set(),
null,
true,
true
);
}
}
}
}
}

32
packages/astro/src/vite-plugin-astro/index.ts
View file

@ -129,14 +129,6 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
}
const transformResult = await cachedCompilation(compileProps);
// Track any CSS dependencies so that HMR is triggered when they change.
await trackCSSDependencies.call(this, {
viteDevServer,
id,
filename,
deps: transformResult.rawCSSDeps,
});
const csses = transformResult.css;
const code = csses[query.index];
@ -246,28 +238,16 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
SUFFIX += `\nconst $$file = ${JSON.stringify(file)};\nconst $$url = ${JSON.stringify(
url
)};export { $$file as file, $$url as url };\n`;
// Add HMR handling in dev mode.
if (!resolvedConfig.isProduction) {
// HACK: extract dependencies from metadata until compiler static extraction handles them
const metadata = transformResult.code.split('$$createMetadata(')[1].split('});\n')[0];
const pattern = /specifier:\s*'([^']*)'/g;
const deps = new Set();
let match;
while ((match = pattern.exec(metadata)?.[1])) {
deps.add(match);
}
let i = 0;
while (i < transformResult.scripts.length) {
deps.add(`${id}?astro&type=script&index=${i}&lang.ts`);
SUFFIX += `import "${id}?astro&type=script&index=${i}&lang.ts";`;
i++;
}
}
// Prefer live reload to HMR in `.astro` files
if (!resolvedConfig.isProduction) {
SUFFIX += `\nif (import.meta.hot) { import.meta.hot.decline() }`;
await trackCSSDependencies.call(this, {
viteDevServer,
id,
file,
deps: transformResult.rawCSSDeps,
});
}
const astroMetadata: AstroPluginMetadata['astro'] = {