Fix asynchronous appEntrypoint support (#9558)

withastro · Jan 1, 2024 · e496b2e · e496b2e
1 parent 22f42d1
commit e496b2e
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 2 deletions.
diff --git a/.changeset/ninety-buses-occur.md 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
@@ -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
@@ -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
@@ -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
@@ -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"
+  }
+}
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
@@ -0,0 +1,3 @@
+<template>
+	<div id="bar">works</div>
+</template>
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
@@ -0,0 +1,3 @@
+<template>
+	<div id="baz">works</div>
+</template>
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
@@ -0,0 +1,6 @@
+<template>
+	<div id="foo">
+		<Bar />
+		<Baz />
+	</div>
+</template>
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
@@ -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
@@ -0,0 +1,12 @@
+---
+import Foo from '../components/Foo.vue';
+---
+
+<html>
+	<head>
+		<title>Vue App Entrypoint</title>
+	</head>
+	<body>
+		<Foo client:load />
+	</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml