feat: improve ts types for swiper

cpreston321 · Feb 6, 2023 · 38a99fd · 38a99fd
1 parent 35a76f3
commit 38a99fd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 35 deletions.
diff --git a/.playground/nuxt.config.ts b/.playground/nuxt.config.ts
@@ -3,5 +3,8 @@ import swiperModule from '../'
 
 export default defineNuxtConfig({
   modules: [swiperModule],
-  swiper: swiperConfig
+  swiper: swiperConfig,
+  experimental: {
+    componentIslands: true
+  }
 })
diff --git a/src/module.ts b/src/module.ts
@@ -1,9 +1,9 @@
 import * as swiper from 'swiper'
 import {
   defineNuxtModule,
-  addPluginTemplate,
   addImports,
-  extendViteConfig
+  extendViteConfig,
+  addComponent
 } from '@nuxt/kit'
 import { name, version } from '../package.json'
 
@@ -20,10 +20,19 @@ export default defineNuxtModule<SwiperModuleOptions>({
     styleLang: 'css',
     modules: '*'
   },
+  hooks: {
+    'prepare:types': (ctx) => {
+      ctx.tsConfig.compilerOptions!.types.push('swiper/vue')
+      ctx.references.push({
+        types: 'swiper/vue'
+      })
+    }
+  },
   setup (_options, nuxt) {
     const { styleLang, prefix, modules } = _options
 
-    const cssImports = [`import 'swiper/${styleLang}'`]
+    const cssImports = [`swiper/${styleLang}`]
+    const componentImports = ['Swiper', 'SwiperSlide']
     const moduleImports = [
       {
         name: 'useSwiper',
@@ -37,23 +46,6 @@ export default defineNuxtModule<SwiperModuleOptions>({
       }
     ]
 
-    // Add Manual Chunks for Swiper for Vite.
-    // for a more optimized build.
-    extendViteConfig((config) => {
-      config.build = config.build || {}
-      config.build.rollupOptions = config.build.rollupOptions || {}
-      config.build.rollupOptions.output = config.build.rollupOptions.output || {}
-
-      config.build.rollupOptions.output = {
-        ...config.build.rollupOptions.output,
-        manualChunks: (id) => {
-          if (id.includes('/node_modules/swiper')) {
-            return 'swiper'
-          }
-        }
-      }
-    })
-
     // Import Each Swiper Module & CSS if it exists.
     for (const [key, _] of Object.entries(swiper)) {
       // Turn key to snake-case.
@@ -83,7 +75,7 @@ export default defineNuxtModule<SwiperModuleOptions>({
 
         // Push Import Styles for each module
         if (!noCssInModules.includes(snakeCase)) {
-          cssImports.push(`import 'swiper/${styleLang}/${snakeCase}'`)
+          cssImports.push(`swiper/${styleLang}/${snakeCase}`)
         }
 
         // Import Swiper Modules
@@ -95,24 +87,36 @@ export default defineNuxtModule<SwiperModuleOptions>({
       }
     }
 
+    // Loop through each component to add to Nuxt.
+    // imports types for intellisense.
+    for (const cName of componentImports) {
+      addComponent({
+        name: cName,
+        export: cName,
+        filePath: 'swiper/vue'
+      })
+    }
+
     // Add Composables imports from `swiper/vue`.
     addImports(moduleImports)
 
-    // Add Plugin
-    addPluginTemplate({
-      filename: 'swiper.mjs',
-      getContents () {
-        const lines = [
-          "import { Swiper, SwiperSlide } from 'swiper/vue'",
-          `export default defineNuxtPlugin((nuxtApp) => {
-            nuxtApp.vueApp.component('Swiper', Swiper)
-            nuxtApp.vueApp.component('SwiperSlide', SwiperSlide)
-          })`
-        ]
+    // Add CSS Imports to the nuxt option.
+    nuxt.options.css = [...nuxt.options.css, ...cssImports]
 
-        lines.unshift(...cssImports)
+    // Add Manual Chunks for Swiper for Vite.
+    // for a more optimized build.
+    extendViteConfig((config) => {
+      config.build = config.build || {}
+      config.build.rollupOptions = config.build.rollupOptions || {}
+      config.build.rollupOptions.output = config.build.rollupOptions.output || {}
 
-        return lines.join('\n')
+      config.build.rollupOptions.output = {
+        ...config.build.rollupOptions.output,
+        manualChunks: (id) => {
+          if (id.includes('/node_modules/swiper')) {
+            return 'swiper-vue'
+          }
+        }
       }
     })
   }