feat(module): Default *, Refactor, Just Works

cpreston321 · Sep 13, 2022 · d052741 · d052741
1 parent 1bd37df
commit d052741
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -51,25 +51,54 @@ pnpm add nuxt-swiper
 import { defineNuxtModule } from 'nuxt'
 
 export default defineNuxtConfig({
-  modules: ['nuxt-swiper'],
+  modules: ['nuxt-swiper']
   swiper: {
-    modules: ['navigation', 'pagination']
+    // Swiper options
+    //----------------------
+    // prefix: 'Swiper',
+    // styleLang: 'css',
+    // modules: ['navigation', 'pagination'],
   }
 })
 
 // or inline config
 export default defineNuxtConfig({
-  modules: [
-    [
-      'nuxt-swiper',
-      {
-        modules: ['navigation', 'pagination']
-      }
-    ]
-  ]
+  modules: [['nuxt-swiper', {
+    // Swiper options
+  }]]
 })
 ```
 
+## Usage
+
+```vue
+<template>
+  <Swiper
+    :modules="[SwiperAutoplay, SwiperEffectCreative]"
+    :slides-per-view="1"
+    :loop="true"
+    :effect="'creative'"
+    :autoplay="{
+      delay: 8000,
+      disableOnInteraction: true
+    }"
+    :creative-effect="{
+      prev: {
+        shadow: false,
+        translate: ['-20%', 0, -1]
+      },
+      next: {
+        translate: ['100%', 0, 0]
+      }
+    }"
+  >
+    <SwiperSlider v-for="slide in 10" :key="slide">
+      <strong>{{ slide }}</strong>
+    </SwiperSlider>
+  </Swiper>
+</template>
+```
+
 ## Module Config Options
 
 ```ts
@@ -126,7 +155,7 @@ interface SwiperModuleOptions {
    * '*' - imports all modules
    * '['autoplay', 'effect-cards', 'thumbs', 'lazy']' - imports only these modules to keep bundle size small
    *
-   * @default []
+   * @default '*'
    */
   modules?: SwiperModulesType[] | '*'
 }

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,4 +1,6 @@
 <script setup>
+import configOptions from '~/module.config'
+
 // Fill Array with random rgb values
 const colors = Array.from({ length: 10 }, () => {
   const r = Math.floor(Math.random() * 256)
@@ -16,10 +18,18 @@ const fakeArray = ref(colors)
 <template>
   <div>
     <h1>nuxt-swiper playground</h1>
+    <h3>Options</h3>
     <ul>
-      <li>Prefix: <strong>Swiper</strong></li>
       <li>
-        Enabled Modules: <strong>[SwiperAutoplay, SwiperEffectCreative]</strong>
+        Prefix: <strong>{{ JSON.stringify(configOptions.prefix) }}</strong>
+      </li>
+      <li>
+        Style Language:
+        <strong>{{ JSON.stringify(configOptions.styleLang) }}</strong>
+      </li>
+      <li>
+        Enabled Modules:
+        <strong>{{ JSON.stringify(configOptions.modules) }}</strong>
       </li>
     </ul>
     <hr />

diff --git a/playground/module.config.ts b/playground/module.config.ts
@@ -0,0 +1,9 @@
+import { SwiperModuleOptions } from '../src/types'
+
+export const config: SwiperModuleOptions = {
+  prefix: 'Swiper',
+  modules: ['autoplay', 'effect-cards', 'effect-creative'],
+  styleLang: 'css'
+}
+
+export default config
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,8 +1,7 @@
 import { defineNuxtConfig } from 'nuxt'
+import swiperConfig from './module.config'
 
 export default defineNuxtConfig({
   modules: ['nuxt-swiper'],
-  swiper: {
-    modules: ['autoplay', 'effect-creative', 'effect-cards']
-  }
+  swiper: swiperConfig
 })
diff --git a/src/module.ts b/src/module.ts
@@ -5,7 +5,6 @@ import {
   createResolver,
   useLogger,
   addImports,
-  addImportsDir,
   isNodeModules
 } from '@nuxt/kit'
 import { name, version } from '../package.json'
@@ -32,37 +31,34 @@ export default defineNuxtModule<SwiperModuleOptions>({
     const { resolve } = createResolver(import.meta.url)
     const runtimePath = resolve('./runtime')
 
+    // Add Imports Swiper Modules.
+    const imports = [
+      {
+        name: 'useSwiper',
+        as: 'useSwiper',
+        from: 'swiper/vue'
+      },
+      {
+        name: 'useSwiperSlide',
+        as: 'useSwiperSlide',
+        from: 'swiper/vue'
+      }
+    ]
+
     // Transpile Runtime
     nuxt.options.build.transpile.push(runtimePath)
 
-    // Import Swiper CSS Modules
-    if (typeof modules === 'string' && modules === '*') {
-      logger.warn(
-        '[nuxt-swiper]: `styleLang: "' +
-          styleLang +
-          '"` option ignored with `modules: "*"`.'
-      )
+    // Push Core Styles
+    nuxt.options.css.push(`swiper/${styleLang}`)
+
+    // Detect if styleLang has been changed
+    if (styleLang === 'scss' && !isNodeModules('sass')) {
+      styleLang = 'css'
       logger.warn(
-        '[nuxt-swiper]: importing all `swiper` modules is not recommended. This will increase bundle size for production.'
+        '[nuxt-swiper]: You need to install `sass` to use the scss option. Falling back to `css`.'
       )
-      nuxt.options.css.push('swiper/css')
-      nuxt.options.css.push('swiper/css/bundle')
-    } else if (Array.isArray(modules) && modules.length > 0) {
-      if (styleLang === 'scss' && !isNodeModules('sass')) {
-        styleLang = 'css'
-        logger.warn(
-          '[nuxt-swiper]: You need to install `sass` to use the scss option. Falling back to `css`.'
-        )
-      }
-
-      nuxt.options.css.push(`swiper/${styleLang}`)
-
-      for (const module of modules) {
-        nuxt.options.css.push(`swiper/${styleLang}/${module}`)
-      }
     }
 
-    // Add Imports Swiper Modules.
     for (const [key, _] of Object.entries(swiper)) {
       // Turn key to snake-case.
       const snakeCase: string = key
@@ -74,8 +70,12 @@ export default defineNuxtModule<SwiperModuleOptions>({
         modules === '*' ||
         (Array.isArray(modules) && modules.includes(snakeCase as any))
 
-      if (hasModule && key !== 'default') {
-        addImports({
+      if (hasModule && !['default', 'Swiper'].includes(key)) {
+        // Push Styles for each module
+        nuxt.options.css.push(`swiper/${styleLang}/${snakeCase}`)
+
+        // Import Swiper Modules
+        imports.push({
           name: key,
           as: `${prefix}${key}`,
           from: 'swiper'
@@ -84,7 +84,7 @@ export default defineNuxtModule<SwiperModuleOptions>({
     }
 
     // Add Composables imports from `swiper/vue`.
-    addImportsDir(resolve(runtimePath, 'composables'))
+    addImports(imports)
 
     // Add Plugin
     addPlugin(resolve(runtimePath, 'plugin'))

diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
diff --git a/src/types.ts b/src/types.ts
@@ -50,7 +50,7 @@ export interface SwiperModuleOptions {
    * '*' - imports all modules
    * '['thumbs', 'lazy']' - imports only thumbs and lazy modules to keep bundle size small
    *
-   * @default []
+   * @default '*'
    */
   modules?: SwiperModulesType[] | '*'
 }