diff --git a/.changeset/ninety-buses-occur.md b/.changeset/ninety-buses-occur.md new file mode 100644 index 000000000000..52265a036129 --- /dev/null +++ b/.changeset/ninety-buses-occur.md @@ -0,0 +1,5 @@ +--- +"@astrojs/vue": patch +--- + +Fixes support for async `appEntrypoint` diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts index 00cb9f19a74a..8cd1172a9b4a 100644 --- a/packages/integrations/vue/src/index.ts +++ b/packages/integrations/vue/src/index.ts @@ -63,9 +63,9 @@ function virtualAppEntrypoint(options?: Options): Plugin { return `\ import * as mod from ${JSON.stringify(appEntrypoint)}; -export const setup = (app) => { +export const setup = async (app) => { if ('default' in mod) { - mod.default(app); + await mod.default(app); } else { ${ !isBuild diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js index 3a374be1c287..04bfdf9dc07d 100644 --- a/packages/integrations/vue/test/app-entrypoint.test.js +++ b/packages/integrations/vue/test/app-entrypoint.test.js @@ -185,3 +185,26 @@ describe('App Entrypoint /src/absolute', () => { expect(js).not.to.match(/\w+\.component\(\"Bar\"/gm); }); }); + +describe('App Entrypoint async', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-async/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: component before await renders + expect($('#foo > #bar').text()).to.eq('works'); + + // test 2: component after await renders + expect($('#foo > #baz').text()).to.eq('works'); + }); +}); diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs new file mode 100644 index 000000000000..fa04f9c8b592 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs @@ -0,0 +1,14 @@ +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; +import ViteSvgLoader from 'vite-svg-loader' + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: '/src/pages/_app' + })], + vite: { + plugins: [ + ViteSvgLoader(), + ], + }, +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json new file mode 100644 index 000000000000..a1bcef08d21d --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json @@ -0,0 +1,10 @@ +{ + "name": "@test/vue-app-entrypoint-async", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*", + "vite-svg-loader": "5.0.1" + } +} \ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue new file mode 100644 index 000000000000..9e690ea06adc --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue @@ -0,0 +1,3 @@ + diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue new file mode 100644 index 000000000000..8d7cb6b7ca64 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue @@ -0,0 +1,3 @@ + diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue new file mode 100644 index 000000000000..94dd365848ea --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue @@ -0,0 +1,6 @@ + diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts new file mode 100644 index 000000000000..d2bc5396af7d --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts @@ -0,0 +1,11 @@ +import type { App } from 'vue' +import Bar from '../components/Bar.vue' +import Baz from '../components/Baz.vue' + +export default async function setup(app: App) { + app.component('Bar', Bar); + + await new Promise(resolve => setTimeout(resolve, 250)); + + app.component('Baz', Baz); +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro new file mode 100644 index 000000000000..3240cbe0fd73 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + + + + Vue App Entrypoint + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf2a7c013440..80ad445576d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4861,6 +4861,18 @@ importers: specifier: 5.0.1 version: 5.0.1 + packages/integrations/vue/test/fixtures/app-entrypoint-async: + dependencies: + '@astrojs/vue': + specifier: workspace:* + version: link:../../.. + astro: + specifier: workspace:* + version: link:../../../../../astro + vite-svg-loader: + specifier: 5.0.1 + version: 5.0.1 + packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default: dependencies: '@astrojs/vue':