Switch docs islands to vue-vapor and fix build issues

Convert DarkModeSwitch and TimeAgo (the two Vue islands in the docs
site) to .vapor.vue format. These are the only components that use
client: directives with <script setup>, making them candidates for
Vue Vapor's lighter runtime.

Changes required to make the build succeed:
- Add explicit imports in TheNavBar.vue and LastUpdated.vue since
  unplugin-vue-components derives "DarkModeSwitchVapor" from the
  .vapor.vue filename rather than "DarkModeSwitch"
- Create vapor-shim.ts that maps createVaporApp to createApp for
  Vue 3.5.x compatibility (removable when Vue 3.6+ is installed)
- Add vue/vapor alias pointing to the shim
- Fix chunkForSpecialExtension scoping bug in chunks.ts (was not
  passed to vendorPerFramework recursive calls)
- Add vapor-shim to hydration package build entries and exports
- Convert TimeAgo's $ref/$computed macros to standard ref()/computed()
  since Reactivity Transform may not work with Vapor compilation

https://claude.ai/code/session_01Rn1bhLJcwHBfA2ewWEyWWE

Author: claude

docs/src/components/DarkModeSwitch.vue …/src/components/DarkModeSwitch.vapor.vuedocs/src/components/DarkModeSwitch.vue renamed to docs/src/components/DarkModeSwitch.vapor.vue docs/src/components/DarkModeSwitch.vue renamed to docs/src/components/DarkModeSwitch.vapor.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import TimeAgo from './TimeAgo.vapor.vue'
+</script>
+
 <template>
   <p v-if="$meta.lastUpdated" class="text-sm">
     <span class="inline-block font-medium">Last Updated:</span>

docs/src/components/LastUpdated.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import DarkModeSwitch from './DarkModeSwitch.vapor.vue'
+</script>
+
 <template>
   <header class="nav-bar bg-html flex items-center border-b">
     <div class="flex flex-1 h-full container !max-w-screen-2xl mx-auto px-3 md:px-6">

docs/src/components/TheNavBar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { watch, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
 
 const { date } = defineProps<{ date: Date }>()
 
-let relativeTimeStr = $ref('')
-let dateStr = $computed(() => date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }))
-let timeStr = $computed(() => date.toISOString())
+const relativeTimeStr = ref('')
+const dateStr = computed(() => date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }))
+const timeStr = computed(() => date.toISOString())
 
 if (!import.meta.env.SSR) {
   const currentTime = (hoursAgo: number): string => {
@@ -19,10 +19,10 @@ if (!import.meta.env.SSR) {
   }
 
   const updateRelativeTimeStr = () => {
-    relativeTimeStr = currentTime((Number(new Date()) - Number(date)) / (60 * 60 * 1000))
+    relativeTimeStr.value = currentTime((Number(new Date()) - Number(date)) / (60 * 60 * 1000))
   }
 
-  let activeInterval = setInterval(updateRelativeTimeStr, 60 * 1000)
+  const activeInterval = setInterval(updateRelativeTimeStr, 60 * 1000)
   onBeforeUnmount(() => clearInterval(activeInterval))
   watch(() => date, updateRelativeTimeStr, { immediate: true })
 }

docs/src/components/TimeAgo.vue docs/src/components/TimeAgo.vapor.vuedocs/src/components/TimeAgo.vue renamed to docs/src/components/TimeAgo.vapor.vue

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

packages/hydration/package.json

@@ -0,0 +1,5 @@
+// Compatibility shim for vue/vapor until Vue 3.6+ is available.
+// Maps createVaporApp to createApp so that the vue-vapor adapter works
+// with Vue 3.5.x. When Vue 3.6+ is installed (which exports vue/vapor
+// natively), this shim can be removed along with its alias.
+export { createApp as createVaporApp } from 'vue'

packages/hydration/vapor-shim.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     },
   },
   pack: {
-    entry: ['hydration.ts', 'preact.ts', 'vue.ts', 'vanilla.ts', 'solid.ts', 'svelte.ts'],
+    entry: ['hydration.ts', 'preact.ts', 'vue.ts', 'vue-vapor.ts', 'vapor-shim.ts', 'vanilla.ts', 'solid.ts', 'svelte.ts'],
     platform: 'browser',
     dts: true,
     deps: {

packages/hydration/vite.config.mjs

@@ -68,6 +68,11 @@ export function resolveAliases (root: string, userConfig: UserConfig): AliasOpti
         '@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
       ),
     },
+    // Shim for vue/vapor until Vue 3.6+ is available.
+    {
+      find: /^vue\/vapor$/,
+      replacement: require.resolve('@islands/hydration/vapor-shim'),
+    },
     {
       find: /^vue-router$/,
       replacement: require.resolve(

packages/iles/src/node/alias.ts

@@ -26,7 +26,7 @@ export function extendManualChunks (config: AppConfig): GetManualChunk {
     if (id.includes('hydration/dist')) return 'iles'
     const name = userChunks?.(id, api)
     if (name) return name
-    if (id.includes('node_modules')) return vendorPerFramework(chunkForExtension, id, api, cache)
+    if (id.includes('node_modules')) return vendorPerFramework(chunkForExtension, chunkForSpecialExtension, id, api, cache)
   }
 }
 
@@ -36,6 +36,7 @@ export function extendManualChunks (config: AppConfig): GetManualChunk {
 // shared chunk which would delay hydration for all islands.
 function vendorPerFramework (
   chunkForExtension: Record<string, string>,
+  chunkForSpecialExtension: Record<string, string>,
   id: string,
   api: ManualChunkMeta,
   cache: Map<string, string | undefined>,
@@ -67,7 +68,7 @@ function vendorPerFramework (
 
   let name
   for (const importer of mod.importers) {
-    const importerChunk = vendorPerFramework(chunkForExtension, importer, api, cache, importStack.concat(id))
+    const importerChunk = vendorPerFramework(chunkForExtension, chunkForSpecialExtension, importer, api, cache, importStack.concat(id))
     if (!name) name = importerChunk
     if (importerChunk && importerChunk !== name) break
   }