feat: defineClientComponent helper

src/client/app/utils.ts

@@ -1,6 +1,12 @@
 import { siteDataRef } from './data.js'
 import { inBrowser, EXTERNAL_URL_RE, sanitizeFileName } from '../shared.js'
-import { onUnmounted } from 'vue'
+import {
+  h,
+  onMounted,
+  onUnmounted,
+  shallowRef,
+  type AsyncComponentLoader
+} from 'vue'
 
 export { inBrowser } from '../shared.js'
 
@@ -70,3 +76,20 @@ export function onContentUpdated(fn: () => any) {
     contentUpdatedCallbacks = contentUpdatedCallbacks.filter((f) => f !== fn)
   })
 }
+
+export function defineClientComponent(loader: AsyncComponentLoader) {
+  return {
+    setup() {
+      const comp = shallowRef()
+      onMounted(async () => {
+        let res = await loader()
+        // interop module default
+        if (res && (res.__esModule || res[Symbol.toStringTag] === 'Module')) {
+          res = res.default
+        }
+        comp.value = res
+      })
+      return () => (comp.value ? h(comp.value) : null)
+    }
+  }
+}

src/client/index.ts

@@ -21,7 +21,12 @@ export { useData } from './app/data.js'
 export { useRoute, useRouter } from './app/router.js'
 
 // utilities
-export { inBrowser, onContentUpdated, withBase } from './app/utils.js'
+export {
+  inBrowser,
+  onContentUpdated,
+  defineClientComponent,
+  withBase
+} from './app/utils.js'
 
 // components
 export { Content } from './app/components/Content.js'