@hypernym/nuxt-gsap - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

dist/module.d.ts

@@ -39,2 +39,55 @@ import { NuxtModule } from '@nuxt/schema';
     /**
+     * Provides the main `$gsap` core with plugins globally.
+     *
+     * @example
+     *
+     * ```ts
+     * const { $gsap } = useNuxtApp()
+     *
+     * $gsap.to('.class', { rotation: 3, x: 100, duration: 1 })
+     * ```
+     *
+     * @default true
+     *
+     * @since 2.3.0
+     */
+    provide?: boolean;
+    /**
+     * Specifies custom composables.
+     *
+     * If enabled, allows the use of custom composables.
+     *
+     * When using only composables, it is recommended to disable global import.
+     *
+     * @example
+     *
+     * ```ts
+     * {
+     *   gsap: {
+     *     composables: true
+     *     provide: false // global import
+     *   }
+     * }
+     * ```
+     *
+     * @default undefined
+     *
+     * @since 2.3.0
+     */
+    composables?: boolean;
+    /**
+     * Specifies the `auto-import` feature.
+     *
+     * If enabled, the composables will be available globally so there is no need to import them manually.
+     *
+     * Since this is an opinionated feature, you can disable global `auto-import` and use explicit import only where you need it.
+     *
+     * @note Works only if the option `composables: true` is enabled.
+     *
+     * @default true
+     *
+     * @since 2.3.0
+     */
+    autoImport?: boolean;
+    /**
      * Specifies GSAP extra plugins.
@@ -41,0 +94,0 @@ *

dist/module.json

 {
   "name": "@hypernym/nuxt-gsap",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "configKey": "gsap",
@@ -5,0 +5,0 @@ "compatibility": {

package.json

 {
   "name": "@hypernym/nuxt-gsap",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "author": "Hypernym Studio",
@@ -47,7 +47,7 @@ "description": "GSAP module for Nuxt.",
   "devDependencies": {
-    "@types/node": "^20.6.0",
+    "@types/node": "^20.6.1",
     "bummp": "^0.2.0",
     "configshare": "^0.1.5",
     "eslint": "^8.49.0",
-    "nuxt": "^3.7.1",
+    "nuxt": "^3.7.3",
     "prettier": "^3.0.3",
@@ -54,0 +54,0 @@ "rolli": "^0.6.0",

README.md

@@ -9,2 +9,3 @@ # Nuxt Gsap Module
 - Provides a solution for global use
+- Supports custom composables
 - Automatically registers plugins after activation
@@ -35,3 +36,3 @@ - Allows you to easily register global effects & eases
 
-That's it! Start developing your app!
+That's it!
 
@@ -80,2 +81,6 @@ ## Module
 
+It can be used via a `provide` helper that will be available globally or via a custom `composable` that you can import where you need it.
+
+### Provide
+
 GSAP core is enabled by default on module activation.
@@ -93,10 +98,240 @@
 
+```html
+<script setup lang="ts">
+  const { $gsap } = useNuxtApp()
+
+  onMounted(() => {
+    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })
+  })
+</script>
+```
+
+To disable the _provide_ helper completely, set it to `false`.
+
 ```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    provide: false
+  }
+}
+```
+
+### Composable
+
+Imports the main `gsap` core as custom composable.
+
+To enable custom [_composables_](#composables), set it to `true`:
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true
+  }
+}
+```
+
+#### useGsap
+
+- Custom composable
+
+```html
+<!-- layout.vue | page.vue | component.vue -->
+
+<template>
+  <h1 class="title">Nuxt Gsap Module</h1>
+</template>
+
+<script setup lang="ts">
+  useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })
+</script>
+```
+
+```ts
+// Explicit import (optional)
+import { useGsap } from '#gsap'
+```
+
+## Provide
+
+- Type: `boolean`
+- Default: `true`
+
+Provides the main `$gsap` core with plugins globally.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    provide: true
+  }
+}
+```
+
+**Available globally**
+
+```ts
 const { $gsap } = useNuxtApp()
 
-$gsap.to('.box', { rotation: 27, x: 100, duration: 1 })
+$gsap.to('.class', { rotation: 3, x: 100, duration: 1 })
 ```
 
+## Composables
+
+- Type: `boolean`
+- Default: `undefined`
+
+Specifies custom composables.
+
+If enabled, allows the use of custom composables.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true
+  }
+}
+```
+
+It is possible to use _provide_ helper and _composables_ in combination or separately, depending on preference.
+
+When using _only_ composables, it is recommended to disable global import.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true
+    provide: false // global import
+  }
+}
+```
+
+## Auto Import
+
+- Type: `boolean`
+- Default: `true`
+
+Specifies the `auto-import` feature.
+
+If enabled, the composables will be available globally so there is no need to import them manually.
+
+Since this is an opinionated feature, you can disable global `auto-import` and use explicit import only where you need it.
+
+> [!NOTE]\
+> Works only if the option `composables: true` is enabled.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    autoImport: false
+  }
+}
+```
+
+## Register Effects
+
+- Type: `object[]`
+- Default: `undefined`
+
+Provides an easy way to register global effects.
+
+Once the effect is registered, it can be accessed directly on the `gsap.effects` object.
+
+To avoid possible linting warnings, use `// eslint-disable-next-line` and `// @ts-ignore` comments.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    registerEffects: [
+      {
+        name: 'fade',
+        defaults: {
+          y: -100,
+          opacity: 0,
+          duration: 2,
+        },
+        // eslint-disable-next-line
+        // @ts-ignore
+        effect: (targets, config) => {
+          return gsap.to(targets, {
+            y: config.y,
+            opacity: config.opacity,
+            duration: config.duration,
+          })
+        },
+      },
+      {
+        name: 'slideIn',
+        // ...
+      },
+    ]
+  }
+}
+```
+
+**Available globally**
+
+```ts
+const { $gsap } = useNuxtApp()
+
+$gsap.effects.fade('.class')
+$gsap.effects.slideIn('#id')
+```
+
+## Register Eases
+
+- Type: `object[]`
+- Default: `undefined`
+
+Provides an easy way to register global eases.
+
+Once the ease is registered, it can be accessed directly on the `gsap` animations.
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    registerEases: [
+      {
+        name: 'customEase',
+        ease: (progress) => {
+          return progress // linear
+        },
+      },
+      {
+        name: 'customEase2',
+        // ...
+      },
+    ]
+  }
+}
+```
+
+**Available globally**
+
+```ts
+const { $gsap } = useNuxtApp()
+
+$gsap.to('.class', { x: 100, ease: 'customEase' })
+$gsap.to('#id', { x: 200, ease: 'customEase2' })
+```
+
 ## Extra Plugins
 
+- Type: `object`
+- Default: `undefined`
+
 Specifies GSAP extra plugins.
@@ -127,2 +362,30 @@
 
+### useFlip
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      flip: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useFlip
+```
+
+```ts
+// Explicit import (optional)
+import { useFlip } from '#gsap'
+```
+
 ### ScrollTrigger
@@ -151,2 +414,30 @@
 
+### useScrollTrigger
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      scrollTrigger: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useScrollTrigger
+```
+
+```ts
+// Explicit import (optional)
+import { useScrollTrigger } from '#gsap'
+```
+
 ### Observer
@@ -175,2 +466,30 @@
 
+### useObserver
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      observer: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useObserver
+```
+
+```ts
+// Explicit import (optional)
+import { useObserver } from '#gsap'
+```
+
 ### ScrollTo
@@ -199,2 +518,30 @@
 
+### useScrollToPlugin
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      scrollTo: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useScrollToPlugin
+```
+
+```ts
+// Explicit import (optional)
+import { useScrollToPlugin } from '#gsap'
+```
+
 ### Draggable
@@ -223,2 +570,30 @@
 
+### useDraggable
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      draggable: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useDraggable
+```
+
+```ts
+// Explicit import (optional)
+import { useDraggable } from '#gsap'
+```
+
 ### Easel
@@ -247,2 +622,30 @@
 
+### useEaselPlugin
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      easel: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useEaselPlugin
+```
+
+```ts
+// Explicit import (optional)
+import { useEaselPlugin } from '#gsap'
+```
+
 ### MotionPath
@@ -271,2 +674,30 @@
 
+### useMotionPathPlugin
+
+- Custom composable
+
+```ts
+// nuxt.config.ts
+
+{
+  gsap: {
+    composables: true,
+    extraPlugins: {
+      motionPath: true
+    }
+  }
+}
+```
+
+**Usage**
+
+```ts
+useMotionPathPlugin
+```
+
+```ts
+// Explicit import (optional)
+import { useMotionPathPlugin } from '#gsap'
+```
+
 ### Pixi
@@ -295,6 +726,5 @@
 
-### Text
+### usePixiPlugin
 
-- Type: `boolean`
-- Default: `undefined`
+- Custom composable
 
@@ -306,4 +736,5 @@ ```ts
   gsap: {
+    composables: true,
     extraPlugins: {
-      text: true
+      pixi: true
     }
@@ -314,14 +745,15 @@ }
 
-**Available globally**
+**Usage**
 
 ```ts
-const { $TextPlugin } = useNuxtApp()
+usePixiPlugin
 ```
 
-## Extra Eases
+```ts
+// Explicit import (optional)
+import { usePixiPlugin } from '#gsap'
+```
 
-Specifies GSAP extra eases.
+### Text
 
-### ExpoScale
-
 - Type: `boolean`
@@ -335,4 +767,4 @@ - Default: `undefined`
   gsap: {
-    extraEases: {
-      expoScale: true
+    extraPlugins: {
+      text: true
     }
@@ -346,9 +778,8 @@ }
 ```ts
-const { $ExpoScaleEase } = useNuxtApp()
+const { $TextPlugin } = useNuxtApp()
 ```
 
-### Rough
+### useTextPlugin
 
-- Type: `boolean`
-- Default: `undefined`
+- Custom composable
 
@@ -360,4 +791,5 @@ ```ts
   gsap: {
-    extraEases: {
-      rough: true
+    composables: true,
+    extraPlugins: {
+      text: true
     }
@@ -368,10 +800,22 @@ }
 
-**Available globally**
+**Usage**
 
 ```ts
-const { $RoughEase } = useNuxtApp()
+useTextPlugin
 ```
 
-### SlowMo
+```ts
+// Explicit import (optional)
+import { useTextPlugin } from '#gsap'
+```
 
+## Extra Eases
+
+- Type: `object`
+- Default: `undefined`
+
+Specifies GSAP extra eases.
+
+### ExpoScale
+
 - Type: `boolean`
@@ -386,3 +830,3 @@ - Default: `undefined`
     extraEases: {
-      slowMo: true
+      expoScale: true
     }
@@ -396,6 +840,6 @@ }
 ```ts
-const { $SlowMo } = useNuxtApp()
+const { $ExpoScaleEase } = useNuxtApp()
 ```
 
-### Custom
+### Rough
 
@@ -411,3 +855,3 @@ - Type: `boolean`
     extraEases: {
-      custom: true
+      rough: true
     }
@@ -421,16 +865,10 @@ }
 ```ts
-const { $CustomEase } = useNuxtApp()
+const { $RoughEase } = useNuxtApp()
 ```
 
-## Register Effects
+### SlowMo
 
-- Type: `object[]`
+- Type: `boolean`
 - Default: `undefined`
 
-Provides an easy way to register global effects.
-
-Once the effect is registered, it can be accessed directly on the `gsap.effects` object.
-
-To avoid possible linting warnings, use `// eslint-disable-next-line` and `// @ts-ignore` comments.
-
 ```ts
@@ -441,25 +879,5 @@ // nuxt.config.ts
   gsap: {
-    registerEffects: [
-      {
-        name: 'fade',
-        defaults: {
-          y: -100,
-          opacity: 0,
-          duration: 2,
-        },
-        // eslint-disable-next-line
-        // @ts-ignore
-        effect: (targets, config) => {
-          return gsap.to(targets, {
-            y: config.y,
-            opacity: config.opacity,
-            duration: config.duration,
-          })
-        },
-      },
-      {
-        name: 'slideIn',
-        // ...
-      },
-    ]
+    extraEases: {
+      slowMo: true
+    }
   }
@@ -472,17 +890,10 @@ }
 ```ts
-const { $gsap } = useNuxtApp()
-
-$gsap.effects.fade('.class')
-$gsap.effects.slideIn('#id')
+const { $SlowMo } = useNuxtApp()
 ```
 
-## Register Eases
+### Custom
 
-- Type: `object[]`
+- Type: `boolean`
 - Default: `undefined`
 
-Provides an easy way to register global eases.
-
-Once the ease is registered, it can be accessed directly on the `gsap` animations.
-
 ```ts
@@ -493,14 +904,5 @@ // nuxt.config.ts
   gsap: {
-    registerEases: [
-      {
-        name: 'customEase',
-        ease: (progress) => {
-          return progress // linear
-        },
-      },
-      {
-        name: 'customEase2',
-        // ...
-      },
-    ]
+    extraEases: {
+      custom: true
+    }
   }
@@ -513,6 +915,3 @@ }
 ```ts
-const { $gsap } = useNuxtApp()
-
-$gsap.to('.class', { x: 100, ease: 'customEase' })
-$gsap.to('#id', { x: 200, ease: 'customEase2' })
+const { $CustomEase } = useNuxtApp()
 ```
@@ -522,2 +921,5 @@
 
+- Type: `object`
+- Default: `undefined`
+
 Specifies GSAP premium plugins.
@@ -524,0 +926,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31001

increased by44.86%

Lines of code

487

increased by48.48%

Number of lines in readme file

1199

increased by50.44%

No dependency changes