From e496b2e3b84b673b81c872dad9a6b3f9dd32396a Mon Sep 17 00:00:00 2001 From: Michael Thomas Date: Mon, 1 Jan 2024 02:44:17 -0500 Subject: [PATCH] Fix asynchronous `appEntrypoint` support (#9558) --- .changeset/ninety-buses-occur.md | 5 ++++ packages/integrations/vue/src/index.ts | 4 ++-- .../vue/test/app-entrypoint.test.js | 23 +++++++++++++++++++ .../app-entrypoint-async/astro.config.mjs | 14 +++++++++++ .../app-entrypoint-async/package.json | 10 ++++++++ .../src/components/Bar.vue | 3 +++ .../src/components/Baz.vue | 3 +++ .../src/components/Foo.vue | 6 +++++ .../app-entrypoint-async/src/pages/_app.ts | 11 +++++++++ .../src/pages/index.astro | 12 ++++++++++ pnpm-lock.yaml | 12 ++++++++++ 11 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 .changeset/ninety-buses-occur.md create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts create mode 100644 packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro diff --git a/.changeset/ninety-buses-occur.md b/.changeset/ninety-buses-occur.md new file mode 100644 index 0000000000..52265a0361 --- /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 00cb9f19a7..8cd1172a9b 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 3a374be1c2..04bfdf9dc0 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 0000000000..fa04f9c8b5 --- /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 0000000000..a1bcef08d2 --- /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 0000000000..9e690ea06a --- /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 0000000000..8d7cb6b7ca --- /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 0000000000..94dd365848 --- /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 0000000000..d2bc5396af --- /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 0000000000..3240cbe0fd --- /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 bf2a7c0134..80ad445576 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':