Add vue-vapor framework support for islands

packages/hydration/package.json

@@ -27,6 +27,7 @@
     "./svelte": "./dist/svelte.js",
     "./vanilla": "./dist/vanilla.js",
     "./vue": "./dist/vue.js",
+    "./vue-vapor": "./dist/vue-vapor.js",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },

packages/hydration/types.ts

@@ -2,7 +2,7 @@
 
 import type Vue from './vue'
 
-export type Framework = 'vue' | 'preact' | 'solid' | 'svelte' | 'vanilla'
+export type Framework = 'vue' | 'vue-vapor' | 'preact' | 'solid' | 'svelte' | 'vanilla'
 export type FrameworkFn = typeof Vue
 export type AsyncFrameworkFn = () => Promise<FrameworkFn>
 export type Component = any

packages/hydration/vue-vapor.ts

@@ -0,0 +1,22 @@
+import { createVaporApp } from 'vue/vapor'
+import type { Props, Slots } from './types'
+import { onDispose } from './hydration'
+
+// Internal: Creates a Vue Vapor app and mounts it on the specified island root.
+// Vapor islands bypass the virtual DOM for significantly smaller bundle size.
+export default function createVueVaporIsland (component: any, id: string, el: Element, props: Props, slots: Slots | undefined) {
+  const app = createVaporApp(component, {
+    ...props,
+    ...slots && Object.fromEntries(Object.entries(slots).map(([slotName, content]) => {
+      return [slotName, () => content]
+    })),
+  })
+
+  app.mount(el!)
+
+  if (import.meta.env.DISPOSE_ISLANDS)
+    onDispose(id, app.unmount)
+
+  if (import.meta.env.DEV)
+    (window as any).__ILE_DEVTOOLS__?.onHydration({ id, el, props, slots, component })
+}

packages/iles/src/client/app/components/Island.vue

@@ -51,11 +51,13 @@ export default defineComponent({
     }
 
     const ext = props.importFrom.split('.').slice(-1)[0]
+    const isVaporVue = props.importFrom.endsWith('.vapor.vue')
     const appConfig = useAppConfig()
     const framework: Framework = props.using
       || (ext === 'svelte' && 'svelte')
       || ((ext === 'js' || ext === 'ts') && 'vanilla')
       || ((ext === 'jsx' || ext === 'tsx') && appConfig.jsx)
+      || (isVaporVue && 'vue-vapor')
       || 'vue'
 
     return {

packages/iles/src/node/alias.ts

@@ -78,7 +78,7 @@ export function resolveAliases (root: string, userConfig: UserConfig): AliasOpti
       find: /^@islands\/hydration$/,
       replacement: require.resolve('@islands/hydration'),
     },
-    ...['vue', 'vanilla', 'svelte', 'preact', 'solid'].map(name => ({
+    ...['vue', 'vue-vapor', 'vanilla', 'svelte', 'preact', 'solid'].map(name => ({
       find: new RegExp(`^@islands/hydration/${name}$`),
       replacement: require.resolve(`@islands/hydration/${name}`),
     })),

packages/iles/src/node/build/chunks.ts

@@ -15,6 +15,9 @@ export function extendManualChunks (config: AppConfig): GetManualChunk {
     svelte: 'vendor-svelte',
     vue: 'vendor-vue',
   }
+  const chunkForSpecialExtension: Record<string, string> = {
+    'vapor.vue': 'vendor-vue-vapor',
+  }
   return (id, api) => {
     // Internal chunks must take priority to ensure hydration works correctly.
     // User manualChunks could inadvertently match hydration modules (e.g.
@@ -56,7 +59,8 @@ function vendorPerFramework (
     const queryIndex = id.lastIndexOf('?')
     const idWithoutQuery = queryIndex > -1 ? id.slice(0, queryIndex) : id
     const extension = idWithoutQuery.slice(idWithoutQuery.lastIndexOf('.') + 1)
-    const name = chunkForExtension[extension]
+    const specialExt = Object.keys(chunkForSpecialExtension).find(ext => idWithoutQuery.endsWith(`.${ext}`))
+    const name = (specialExt && chunkForSpecialExtension[specialExt]) || chunkForExtension[extension]
     cache.set(id, name)
     return name
   }

packages/prerender/prerender.ts

@@ -36,6 +36,12 @@ export const renderers: Record<Framework, PrerenderFn> = {
     const renderSvelteComponent = (await import('./svelte')).default
     return renderSvelteComponent(component, props, slots, renderId)
   },
+  async 'vue-vapor' (component, props, slots) {
+    const { createVaporApp } = await import('vue/vapor')
+    const { renderToString } = await import('vue/server-renderer')
+    const app = createVaporApp(component, props)
+    return await renderToString(app)
+  },
   async vanilla () {
     throw new Error('The vanilla strategy does not prerender islands.')
   },