vue-scroll-reveal - npm Package Compare versions

Comparing version 1.0.11 to 2.1.0

dist/vue-scroll-reveal.js

@@ -1,75 +0,60 @@
-'use strict';
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('scrollreveal')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'scrollreveal'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vue-scroll-reveal"] = {}, global.ScrollReveal));
+})(this, (function (exports, ScrollReveal) { 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+    var ScrollReveal__default = /*#__PURE__*/_interopDefaultLegacy(ScrollReveal);
 
-var sr = require('scrollreveal').default();
-
-function generateOptions(defaultOptions, bindingValue, bindingModifiers) {
-  var options = _extends({}, defaultOptions, bindingValue);
-
-  if (bindingModifiers) {
-    if (bindingModifiers.reset) {
-      options.reset = true;
-    }
-
-    if (bindingModifiers.nomobile) {
-      options.mobile = false;
-    }
-
-    if (bindingModifiers.nodesktop) {
-      options.desktop = false;
-    }
-  }
-
-  return options;
-}
-
-var VueScrollReveal = {
-  install: function install(Vue, defaultOptions) {
-    Vue.directive('scroll-reveal', {
-      inserted: function inserted(el, binding) {
-        var options = generateOptions(defaultOptions, binding.value, binding.modifiers);
-
+    function reveal(el, value, modifiers) {
+        const options = value || {};
+        if (modifiers) {
+            if (modifiers.reset) {
+                options.reset = true;
+            }
+            if (modifiers.nomobile) {
+                options.mobile = false;
+            }
+            if (modifiers.nodesktop) {
+                options.desktop = false;
+            }
+        }
         if (typeof options.class === 'string') {
-          el.classList.add(options.class);
-          delete options.class;
+            el.classList.add(options.class);
+            delete options.class;
         }
-
-        sr.reveal(el, options);
-      },
-      update: function update(el, binding) {
-        if (binding.value != binding.oldValue) {
-          var options = generateOptions(defaultOptions, binding.value, binding.modifiers);
-
-          sr.reveal(el, options);
+        ScrollReveal__default["default"]().reveal(el, options);
+    }
+    const vScrollReveal = {
+        mounted(el, { value, modifiers }) {
+            reveal(el, value, modifiers);
+        },
+        updated(el, { value, modifiers }) {
+            reveal(el, value, modifiers);
+        },
+        getSSRProps() {
+            return {};
         }
-      }
-    });
+    };
+    function createScrollRevealDirective(defaultOptions) {
+        return {
+            mounted(el, { value, modifiers }) {
+                reveal(el, Object.assign({}, defaultOptions, value), modifiers);
+            },
+            updated(el, { value, modifiers }) {
+                reveal(el, Object.assign({}, defaultOptions, value), modifiers);
+            },
+            getSSRProps() {
+                return {};
+            }
+        };
+    }
 
-    var $sr = {
-      isSupported: function isSupported() {
-        return sr.isSupported();
-      },
-      sync: function sync() {
-        sr.sync();
-      },
-      reveal: function reveal(target, config, interval, sync) {
-        var options = generateOptions(defaultOptions, config);
+    exports.createScrollRevealDirective = createScrollRevealDirective;
+    exports.vScrollReveal = vScrollReveal;
 
-        sr.reveal(target, config, interval, sync);
-      }
-    };
+    Object.defineProperty(exports, '__esModule', { value: true });
 
-    Object.defineProperty(Vue.prototype, '$sr', {
-      get: function get() {
-        return $sr;
-      }
-    });
-  }
-};
-
-exports.default = VueScrollReveal;
+}));

package.json

 {
   "name": "vue-scroll-reveal",
-  "version": "1.0.11",
-  "description": "A Vue directive to wrap @jlmake's excellent ScrollReveal library.",
+  "version": "2.1.0",
+  "description": "A Vue 3 directive to wrap @jlmake's excellent ScrollReveal library.",
   "keywords": [
     "vue",
+    "vue3",
     "directive",
@@ -13,4 +14,9 @@ "scroll",
   "main": "dist/vue-scroll-reveal.js",
+  "browser": "dist/vue-scroll-reveal.esm.js",
+  "module": "dist/vue-scroll-reveal.esm.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "./node_modules/.bin/babel index.js --out-file dist/vue-scroll-reveal.js --presets=es2015 --plugins transform-object-assign"
+    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript"
   },
@@ -24,10 +30,13 @@ "repository": "https://github.com/tserkov/vue-scroll-reveal",
   "license": "MIT",
+  "peerDependencies": {
+    "scrollreveal": "^4.0.0",
+    "vue": "^3.0.0"
+  },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1"
-  },
-  "dependencies": {
-    "scrollreveal": "^4.0.2"
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "rollup": "^2.79.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3"
   }
 }

README.md

 # vue-scroll-reveal [![license](https://img.shields.io/github/license/tserkov/vue-scroll-reveal.svg)]()
-A Vue directive to wrap [@jlmakes](https://github.com/jlmakes)' excellent [ScrollReveal](https://github.com/scrollreveal/scrollreveal) library.
+A Vue 3 directive to wrap [@jlmakes](https://github.com/jlmakes)' excellent [ScrollReveal](https://github.com/scrollreveal/scrollreveal) library.
 
 The directive exposes `reset`, `nodesktop`, and `nomobile` as modifiers (ie. `v-scroll-reveal.reset.nomobile`).
-All other options can be passed to `Vue.use` or to individual elements as a value (ie. `v-scroll-reveal={ delay: 250 }`).
 
 ## Install
 
+ScrollReveal must be installed alongside this directive, since it is a peer dependency.
+
 ``` bash
 # npm
-npm install --save vue-scroll-reveal
+npm install --save vue-scroll-reveal@2 scrollreveal
 ```
@@ -16,27 +17,22 @@
 # yarn
-yarn add vue-scroll-reveal
+yarn add vue-scroll-reveal@2 scrollreveal
 ```
 
 ## Use
-Remember! Any of the [ScrollReveal options](https://scrollrevealjs.org/api/defaults.html) can be used!
+Any of the [ScrollReveal options](https://scrollrevealjs.org/api/reveal.html) can be passed.
 
-```javascript
-// In main.js
-import VueScrollReveal from 'vue-scroll-reveal';
 
-// Using ScrollReveal's default configuration
-Vue.use(VueScrollReveal);
+```vue
+<script setup>
+// if using default options
+import { vScrollReveal } from 'vue-scroll-reveal';
 
-// OR specifying custom default options for all uses of the directive
-Vue.use(VueScrollReveal, {
-  class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
-  duration: 800,
-  scale: 1,
-  distance: '10px',
-  mobile: false
+// OR if using custom default options
+import { createScrollRevealDirective } from 'vue-scroll-reveal'; 
+const vScrollReveal = createScrollRevealDirective({
+    delay: 1000,
+    duration: 150,
 });
-```
+</script>
 
-```html
-<!-- In a component -->
 <template>
@@ -55,3 +51,3 @@ <main>
     <!-- Element-specific configuration options can be passed like this -->
-    <section v-scroll-reveal.reset="{ delay: 250 }">
+    <section v-scroll-reveal.reset="{ delay: 1500 }">
       <h1>Slightly late tada!</h1>
@@ -72,19 +68,40 @@ </section>
 
-As of 1.0.4, the `isSupported()` and `sync()` methods are exposed via `Vue.$sr` or `this.$sr`.
+As of vue-scroll-reveal@2.0.0, ScrollReveal() methods are no longer exposed. If you wish to use
+any, import and use them directly, like so:
 
-As of 1.0.7, the `reveal(target, config, interval, sync)` is exposed via `Vue.$sr` or `this.$sr`, though using the directive
-is preferred in order to keep with Vue principles.
+```javascript
+import ScrollReveal from 'scrollreveal';
 
-## Nuxt
+ScrollReveal.isSupported(); // for example
+```
 
-If using as a plugin with [Nuxt](https://github.com/nuxt/nuxt.js), make sure to disable server-side rendering in `nuxt.config.js`.
+## Nuxt 3
 
-```javascript
-module.exports = {
-  plugins: [
-    { src: '~/plugins/vue-scroll-reveal', ssr: false }
-  ],
-}
+Vue directives are [registered as a plugin](https://v3.nuxtjs.org/guide/directory-structure/plugins#vue-directives)
+by creating the following file (the filename is very important):
+```typescript
+// plugins/scrollReveal.client.ts
+
+import { vScrollReveal } from 'vue-scroll-reveal'; // if using default options
+import { createScrollRevealDirective } from 'vue-scroll-reveal'; // OR if using custom default options
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // if using default options
+  nuxtApp.vueApp.directive('scroll-reveal', vScrollReveal);
+
+  // OR if using custom default options
+  nuxtApp.vueApp.directive('scroll-reveal', createScrollRevealDirective({
+    delay: 1000,
+    duration: 150,
+    reset: true,
+  }));
+});
 ```
 
+## Changelog
+
+v2.1.0: Add `createScrollRevealDirective` so default options can be applied. [(#40)](https://github.com/tserkov/vue-scroll-reveal/issues/40#issuecomment-1258741430)
+
+v2.0.0: Refactor in Typescript+Rollup for use in Vue 3 (& Nuxt 3).
+
 ## License
@@ -91,0 +108,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

8809

increased by6.76%

Number of lines in readme file

109

increased by18.48%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

5

increased by66.67%

Lines of code

99

decreased by-12.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.12(transitive)

• + Added@vue/compiler-dom@3.5.12(transitive)

• + Added@vue/compiler-sfc@3.5.12(transitive)

• + Added@vue/compiler-ssr@3.5.12(transitive)

• + Added@vue/reactivity@3.5.12(transitive)

• + Added@vue/runtime-core@3.5.12(transitive)

• + Added@vue/runtime-dom@3.5.12(transitive)

• + Added@vue/server-renderer@3.5.12(transitive)

• + Added@vue/shared@3.5.12(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedmagic-string@0.30.12(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.47(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvue@3.5.12(transitive)

• - Removedscrollreveal@^4.0.2