feat: add composables autoimport

package.json

@@ -15,6 +15,7 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/types.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
     }
@@ -31,14 +32,14 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.13",
+    "@nuxt/kit": "^3.3.2",
     "vue3-lazy-hydration": "^1.2.1"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.2.0",
-    "@nuxt/schema": "^3.0.0-rc.13",
-    "@nuxtjs/eslint-config-typescript": "^11.0.0",
-    "eslint": "^8.26.0",
-    "nuxt": "^3.0.0-rc.13"
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/schema": "^3.3.2",
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.43.0",
+    "nuxt": "^3.3.2"
   }
 }

playground/app.vue

@@ -1,8 +1,21 @@
 <template>
   <div>
-    <p>Hello</p>
-    <LazyHydrate when-idle>
-      <p>Nuxt module playground!</p>
-    </LazyHydrate>
+    <p>Hello to Nuxt module playground!</p>
+    <NuxtLazyHydrate when-idle>
+      <p>this has been hydrated lazily</p>
+    </NuxtLazyHydrate>
   </div>
 </template>
+
+<script lang="ts" setup>
+const result = useLazyHydration()
+
+result.onHydrated(() => {
+  console.log('Content hydrated!')
+})
+
+useHydrateWhenIdle(
+  result,
+  4000
+)
+</script>

playground/nuxt.config.ts

@@ -1,11 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
-import MyModule from '..'
 
 export default defineNuxtConfig({
-  modules: [
-    MyModule
-  ],
-  myModule: {
-    addPlugin: true
-  }
+  modules: ['../src/module.ts']
 })

playground/package.json

@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "my-module-playground"
+  "name": "nuxt-lazy-hydrate-playground"
 }

playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

src/module.ts

@@ -1,15 +1,30 @@
-import { resolve } from 'path'
-import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addComponent, addImportsSources } from '@nuxt/kit'
+import * as LazyHydrationModule from 'vue3-lazy-hydration'
 
 export default defineNuxtModule({
   meta: {
     name: 'nuxt-lazy-hydrate',
-    configKey: 'lazyHydrate'
+    configKey: 'lazyHydrate',
+    compatibility: {
+      nuxt: '>=3.0.0'
+    }
   },
-  setup (options, nuxt) {
-    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-    nuxt.options.build.transpile.push(runtimeDir)
-    addPlugin(resolve(runtimeDir, 'plugin'))
+  setup () {
+    // addComponent fails to add components named <Lazy* />
+    // components named like this are not imported properly in client app
+    addComponent({
+      name: 'NuxtLazyHydrate',
+      export: 'LazyHydrationWrapper',
+      filePath: 'vue3-lazy-hydration'
+    })
+
+    const composables = Object.keys(LazyHydrationModule).filter(
+      key => key !== 'LazyHydrationWrapper'
+    )
+
+    addImportsSources({
+      imports: composables,
+      from: 'vue3-lazy-hydration'
+    })
   }
 })