0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

Ensure appEntrypoint is referenced in Vue components (#9490)

* fix(#6827): ensure `appEntrypoint` is referenced in Vue components

* chore: add test

* chore: add changeset

* fix: windows handling

* Update packages/integrations/vue/src/index.ts

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* chore: address review feedback

* chore: update lockfile

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
This commit is contained in:
Nate Moore 2024-01-05 13:30:53 -06:00 committed by GitHub
parent bd3f36e6ab
commit a1c31665cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 160 additions and 5 deletions

View file

@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---
Fixes a bug that caused styles referenced by `appEntrypoint` to be excluded from the build

View file

@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue';
import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx';
import type { AstroIntegration, AstroRenderer } from 'astro';
import type { Plugin, UserConfig } from 'vite';
import { MagicString } from '@vue/compiler-sfc';
interface Options extends VueOptions {
jsx?: boolean | VueJsxOptions;
@ -39,6 +40,7 @@ function virtualAppEntrypoint(options?: Options): Plugin {
let isBuild: boolean;
let root: string;
let appEntrypoint: string | undefined;
return {
name: '@astrojs/vue/virtual-app',
@ -47,6 +49,11 @@ function virtualAppEntrypoint(options?: Options): Plugin {
},
configResolved(config) {
root = config.root;
if (options?.appEntrypoint) {
appEntrypoint = options.appEntrypoint.startsWith('.')
? path.resolve(root, options.appEntrypoint)
: options.appEntrypoint;
}
},
resolveId(id: string) {
if (id == virtualModuleId) {
@ -55,11 +62,7 @@ function virtualAppEntrypoint(options?: Options): Plugin {
},
load(id: string) {
if (id === resolvedVirtualModuleId) {
if (options?.appEntrypoint) {
const appEntrypoint = options.appEntrypoint.startsWith('.')
? path.resolve(root, options.appEntrypoint)
: options.appEntrypoint;
if (appEntrypoint) {
return `\
import * as mod from ${JSON.stringify(appEntrypoint)};
@ -80,6 +83,20 @@ export const setup = async (app) => {
return `export const setup = () => {};`;
}
},
// Ensure that Vue components reference appEntrypoint directly
// This allows Astro to assosciate global styles imported in this file
// with the pages they should be injected to
transform(code, id) {
if (!appEntrypoint) return;
if (id.endsWith('.vue')) {
const s = new MagicString(code);
s.prepend(`import ${JSON.stringify(appEntrypoint)};\n`);
return {
code: s.toString(),
map: s.generateMap({ hires: 'boundary' })
}
}
},
};
}

View file

@ -0,0 +1,67 @@
import { loadFixture } from './test-utils.js';
import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio';
describe('App Entrypoint CSS', () => {
/** @type {import('./test-utils').Fixture} */
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/app-entrypoint-css/',
});
})
describe('build', () => {
before(async () => {
await fixture.build();
})
it('injects styles referenced in appEntrypoint', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
// test 1: basic component renders
expect($('#foo > #bar').text()).to.eq('works');
// test 2: injects the global style on the page
expect($('style').first().text().trim()).to.eq(':root{background-color:red}');
});
it('does not inject styles to pages without a Vue component', async () => {
const html = await fixture.readFile('/unrelated/index.html');
const $ = cheerioLoad(html);
expect($('style').length).to.eq(0);
expect($('link[rel="stylesheet"]').length).to.eq(0);
});
})
describe('dev', () => {
let devServer;
before(async () => {
devServer = await fixture.startDevServer();
})
after(async () => {
await devServer.stop();
})
it('loads during SSR', async () => {
const html = await fixture.fetch('/').then((res) => res.text());
const $ = cheerioLoad(html);
// test 1: basic component renders
expect($('#foo > #bar').text()).to.eq('works');
// test 2: injects the global style on the page
expect($('style').first().text().replace(/\s+/g, '')).to.eq(':root{background-color:red;}');
});
it('does not inject styles to pages without a Vue component', async () => {
const html = await fixture.fetch('/unrelated').then((res) => res.text());
const $ = cheerioLoad(html);
expect($('style').length).to.eq(0);
expect($('link[rel="stylesheet"]').length).to.eq(0);
});
})
});

View file

@ -0,0 +1,8 @@
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [
vue({ appEntrypoint: '/src/app.ts' })
],
})

View file

@ -0,0 +1,9 @@
{
"name": "@test/vue-app-entrypoint-css",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/vue": "workspace:*",
"astro": "workspace:*"
}
}

View file

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Bar from './components/Bar.vue'
// Important! Test that styles here are injected to the page
import '/src/main.css'
export default function setup(app: App) {
app.component('Bar', Bar);
}

View file

@ -0,0 +1,3 @@
<template>
<div id="bar">works</div>
</template>

View file

@ -0,0 +1,5 @@
<template>
<div id="foo">
<Bar />
</div>
</template>

View file

@ -0,0 +1,3 @@
:root {
background-color: red;
}

View file

@ -0,0 +1,12 @@
---
import Foo from '../components/Foo.vue';
---
<html>
<head>
<title>Vue App Entrypoint</title>
</head>
<body>
<Foo client:load />
</body>
</html>

View file

@ -0,0 +1,8 @@
<html>
<head>
<title>Unrelated page</title>
</head>
<body>
<h1>I shouldn't have styles</h1>
</body>
</html>

View file

@ -4915,6 +4915,15 @@ importers:
specifier: 5.0.1
version: 5.0.1
packages/integrations/vue/test/fixtures/app-entrypoint-css:
dependencies:
'@astrojs/vue':
specifier: workspace:*
version: link:../../..
astro:
specifier: workspace:*
version: link:../../../../../astro
packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default:
dependencies:
'@astrojs/vue':