WIP: vue support for app entrypoint

examples/framework-preact/astro.config.mjs

@@ -4,5 +4,7 @@ import preact from '@astrojs/preact';
 // https://astro.build/config
 export default defineConfig({
 	// Enable Preact to support Preact JSX components.
-	integrations: [preact()],
+	integrations: [preact({
+		appEntrypoint: '/src/pages/_app.tsx'
+	})],
 });

examples/framework-preact/src/components/Context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'preact';
+
+const noop = () => {};
+export const Context = createContext({ count: 0, increment: noop, decrement: noop });

examples/framework-preact/src/components/Counter.tsx

@@ -1,18 +1,16 @@
-import { h, Fragment } from 'preact';
+import { useContext } from 'preact/hooks';
-import { useState } from 'preact/hooks';
+import { Context } from './Context';
 import './Counter.css';
 
 export default function Counter({ children }) {
-	const [count, setCount] = useState(0);
+	const { count, increment, decrement } = useContext(Context);
-	const add = () => setCount((i) => i + 1);
-	const subtract = () => setCount((i) => i - 1);
 
 	return (
 		<>
 			<div class="counter">
-				<button onClick={subtract}>-</button>
+				<button onClick={decrement}>-</button>
 				<pre>{count}</pre>
-				<button onClick={add}>+</button>
+				<button onClick={increment}>+</button>
 			</div>
 			<div class="counter-message">{children}</div>
 		</>

examples/framework-preact/src/pages/_app.tsx

@@ -0,0 +1,10 @@
+import { Context } from "../components/Context";
+import { useState } from "preact/hooks";
+
+export default function ({ children }) {
+	const [count, setCount] = useState(0);
+	const increment = () => setCount(v => v + 1)
+	const decrement = () => setCount(v => v - 1);
+
+	return <Context.Provider value={{ count, increment, decrement }}>{children}</Context.Provider>
+}

examples/framework-preact/src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 // Component Imports
 import Counter from '../components/Counter';
-
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
 ---
@@ -28,6 +27,9 @@ import Counter from '../components/Counter';
 			<Counter client:visible>
 				<h1>Hello, Preact!</h1>
 			</Counter>
+			<Counter client:visible>
+				<h1>Hello, Preact!</h1>
+			</Counter>
 		</main>
 	</body>
 </html>

examples/framework-vue/astro.config.mjs

@@ -4,5 +4,7 @@ import vue from '@astrojs/vue';
 // https://astro.build/config
 export default defineConfig({
 	// Enable Vue to support Vue components.
-	integrations: [vue()],
+	integrations: [vue({
+		appEntrypoint: '/src/pages/_app.ts'
+	})],
 });

examples/framework-vue/src/components/Counter.vue

@@ -4,6 +4,7 @@
 		<pre>{{ count }}</pre>
 		<button @click="add()">+</button>
 	</div>
+	<Test />
 	<div class="counter-message">
 		<slot />
 	</div>

examples/framework-vue/src/components/Test.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>Hello world!</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue'
+
+export default defineComponent({
+	setup() {
+		onMounted(() => {
+			console.log("Hello world!")
+		})
+	},
+})
+</script>

examples/framework-vue/src/pages/_app.ts

@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import Test from "../components/Test.vue"
+
+export default (app: App) => {
+	app.component('Test', Test)
+}

packages/astro/src/@types/astro.ts

@@ -1099,6 +1099,8 @@ export interface AstroRenderer {
 	clientEntrypoint?: string;
 	/** Import entrypoint for the server/build/ssr renderer. */
 	serverEntrypoint: string;
+	/** User-provided entrypoint for the browser app instance */
+	appEntrypoint?: string;
 	/** JSX identifier (e.g. 'react' or 'solid-js') */
 	jsxImportSource?: string;
 	/** Babel transform options */

packages/astro/src/vite-plugin-integrations-container/index.ts

@@ -16,5 +16,16 @@ export default function astroIntegrationsContainerPlugin({
 		configureServer(server) {
 			runHookServerSetup({ config, server, logging });
 		},
+		async resolveId(id, importer, options) {
+			if (id.startsWith('virtual:@astrojs/') && id.endsWith('/app')) {
+				const rendererName = id.slice('virtual:'.length, '/app'.length * -1);
+				const match = config._ctx.renderers.find(({ name }) => name === rendererName);
+				if (match && match.appEntrypoint) {
+					const app = await this.resolve(match.appEntrypoint, importer, { ...options, skipSelf: true });
+					return app;
+				}
+				return id.slice('virtual:'.length)
+			}
+		}
 	};
 }

packages/integrations/preact/app.js

@@ -0,0 +1 @@
+export { Fragment as default } from 'preact';

packages/integrations/preact/client.js

@@ -1,14 +1,17 @@
-import { h, render } from 'preact';
+import { h } from 'preact';
+import { createPortal } from 'preact/compat';
 import StaticHtml from './static-html.js';
 
 export default (element) =>
 	(Component, props, { default: children, ...slotted }) => {
 		if (!element.hasAttribute('ssr')) return;
+		const { addChild } = globalThis['@astrojs/preact'];
+		while (!!element.firstElementChild) {
+			element.firstElementChild.remove();
+		}
 		for (const [key, value] of Object.entries(slotted)) {
 			props[key] = h(StaticHtml, { value, name: key });
 		}
-		render(
+		const Portal = createPortal(h(Component, props, children != null ? h(StaticHtml, { value: children }) : children), element)
-			h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
+		addChild(Portal);
-			element
-		);
 	};

packages/integrations/preact/package.json

@@ -21,6 +21,7 @@
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/preact/",
   "exports": {
     ".": "./dist/index.js",
+    "./app": "./app.js",
     "./client.js": "./client.js",
     "./server.js": "./server.js",
     "./package.json": "./package.json"

packages/integrations/preact/server.js

@@ -1,6 +1,7 @@
 import { h, Component as BaseComponent } from 'preact';
 import render from 'preact-render-to-string';
 import StaticHtml from './static-html.js';
+import Provider from 'virtual:@astrojs/preact/app';
 
 const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
@@ -44,7 +45,9 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
 	// Note: create newProps to avoid mutating `props` before they are serialized
 	const newProps = { ...props, ...slots };
 	const html = render(
-		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
+		h(Provider, {}, 
+			h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
+		)
 	);
 	return { html };
 }

packages/integrations/preact/src/index.ts

@@ -1,10 +1,11 @@
 import { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';
 
-function getRenderer(): AstroRenderer {
+function getRenderer(appEntrypoint?: string): AstroRenderer {
 	return {
 		name: '@astrojs/preact',
 		clientEntrypoint: '@astrojs/preact/client.js',
 		serverEntrypoint: '@astrojs/preact/server.js',
+		appEntrypoint,
 		jsxImportSource: 'preact',
 		jsxTransformOptions: async () => {
 			const {
@@ -92,13 +93,32 @@ function getViteConfiguration(compat?: boolean): ViteUserConfig {
 	return viteConfig;
 }
 
-export default function ({ compat }: { compat?: boolean } = {}): AstroIntegration {
+export default function ({ compat, appEntrypoint }: { compat?: boolean, appEntrypoint?: string } = {}): AstroIntegration {
 	return {
 		name: '@astrojs/preact',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+			'astro:config:setup': ({ addRenderer, updateConfig, injectScript }) => {
 				if (compat) addRenderer(getCompatRenderer());
-				addRenderer(getRenderer());
+				injectScript('before-hydration', `import { h, Fragment, render } from "preact";
+import { useState } from "preact/hooks";
+import Provider from "virtual:@astrojs/preact/app";
+
+let addChild = () => {};
+const App = ({ children: c }) => {
+	const [children, setChildren] = useState([c]);
+	addChild = (child) => setChildren(v => ([...v, child]));
+	return h(Fragment, {}, children)
+}
+
+const el = document.createElement('astro-app');
+el.setAttribute('renderer', '@astrojs/preact');
+document.body.appendChild(el);
+
+render(h(Provider, {}, h(App, {})), el)
+globalThis['@astrojs/preact'] = {
+	addChild
+}`)
+				addRenderer(getRenderer(appEntrypoint));
 				updateConfig({
 					vite: getViteConfiguration(compat),
 				});

packages/integrations/vue/app.js

@@ -0,0 +1 @@
+export default app => app;

packages/integrations/vue/client.js

@@ -1,22 +1,24 @@
-import { h, createSSRApp, createApp } from 'vue';
+import { h, Teleport, defineComponent } from 'vue';
 import StaticHtml from './static-html.js';
 
 export default (element) =>
-	(Component, props, slotted, { client }) => {
+	(Component, props, slotted) => {
 		delete props['class'];
 		if (!element.hasAttribute('ssr')) return;
 
 		// Expose name on host component for Vue devtools
 		const name = Component.name ? `${Component.name} Host` : undefined;
 		const slots = {};
+		const { addChild } = globalThis['@astrojs/vue']
 		for (const [key, value] of Object.entries(slotted)) {
 			slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
 		}
-		if (client === 'only') {
+		// h(Teleport, { to: element }, ["AHHHHHH"])
-			const app = createApp({ name, render: () => h(Component, props, slots) });
+		let host = defineComponent({
-			app.mount(element, false);
+			name,
-		} else {
+			setup() { 
-			const app = createSSRApp({ name, render: () => h(Component, props, slots) });
+				return () => h(Component, props, slots)
-			app.mount(element, true);
+			}
-		}
+		});
+		addChild(host)
 	};

packages/integrations/vue/server.js

@@ -1,6 +1,7 @@
 import { h, createSSRApp } from 'vue';
 import { renderToString } from 'vue/server-renderer';
 import StaticHtml from './static-html.js';
+import setup from 'virtual:@astrojs/vue/app';
 
 function check(Component) {
 	return !!Component['ssrRender'];
@@ -12,6 +13,7 @@ async function renderToStaticMarkup(Component, props, slotted) {
 		slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
 	}
 	const app = createSSRApp({ render: () => h(Component, props, slots) });
+	setup(app)
 	const html = await renderToString(app);
 	return { html };
 }

packages/integrations/vue/src/index.ts

@@ -2,11 +2,12 @@ import type { Options } from '@vitejs/plugin-vue';
 import vue from '@vitejs/plugin-vue';
 import type { AstroIntegration, AstroRenderer } from 'astro';
 
-function getRenderer(): AstroRenderer {
+function getRenderer(appEntrypoint?: string): AstroRenderer {
 	return {
 		name: '@astrojs/vue',
 		clientEntrypoint: '@astrojs/vue/client.js',
 		serverEntrypoint: '@astrojs/vue/server.js',
+		appEntrypoint,
 	};
 }
 
@@ -23,12 +24,32 @@ function getViteConfiguration(options?: Options) {
 	};
 }
 
-export default function (options?: Options): AstroIntegration {
+export default function (options?: Options & { appEntrypoint?: string }): AstroIntegration {
 	return {
 		name: '@astrojs/vue',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+			'astro:config:setup': ({ addRenderer, updateConfig, injectScript }) => {
-				addRenderer(getRenderer());
+				injectScript('before-hydration', `import { h, Fragment, createApp } from 'vue';
+import setup from "virtual:@astrojs/vue/app";
+
+const el = document.createElement('astro-app');
+el.setAttribute('renderer', '@astrojs/vue');
+document.body.appendChild(el);
+
+const app = createApp({
+	setup: () => {
+		console.log('setup');
+		const children = ref([]);
+		return () => h(Fragment, {}, [])
+	} 
+});
+setup(app);
+app.mount(el, false)
+
+globalThis['@astrojs/preact'] = {
+	addChild
+}`)
+				addRenderer(getRenderer(options?.appEntrypoint));
 				updateConfig({ vite: getViteConfiguration(options) });
 			},
 		},