embla-carousel-react - npm Package Compare versions

Comparing version 7.0.0-rc01 to 7.0.0-rc03

components/utils.d.ts

@@ -0,1 +1,4 @@
+import { EmblaPluginType } from 'embla-carousel';
 export declare function canUseDOM(): boolean;
+export declare function sortAndMapPluginToOptions(plugins: EmblaPluginType[]): EmblaPluginType['options'][];
+export declare function arePluginsEqual(pluginsA: EmblaPluginType[], pluginsB: EmblaPluginType[]): boolean;

embla-carousel-react.cjs.js

@@ -13,2 +13,19 @@ 'use strict';
 }
+function sortAndMapPluginToOptions(plugins) {
+  return plugins.concat().sort(function (a, b) {
+    return a.name > b.name ? 1 : -1;
+  }).map(function (plugin) {
+    return plugin.options;
+  });
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+  if (pluginsA.length !== pluginsB.length) return false;
+  var areEqual = EmblaCarousel__default["default"].optionsHandler().areEqual;
+  var optionsA = sortAndMapPluginToOptions(pluginsA);
+  var optionsB = sortAndMapPluginToOptions(pluginsB);
+  return optionsA.every(function (optionA, index) {
+    var optionB = optionsB[index];
+    return areEqual(optionA, optionB);
+  });
+}
 
@@ -36,2 +53,5 @@ function useEmblaCarousel(options, plugins) {
 
+  var reInit = react.useCallback(function () {
+    if (embla) embla.reInit(storedOptions.current, storedPlugins.current);
+  }, [embla]);
   react.useEffect(function () {
@@ -50,8 +70,11 @@ if (canUseDOM() && viewport) {
   react.useEffect(function () {
-    if (!embla) return;
     if (optionsHandler.current.areEqual(storedOptions.current, options)) return;
     storedOptions.current = options;
+    reInit();
+  }, [options, reInit]);
+  react.useEffect(function () {
+    if (arePluginsEqual(storedPlugins.current, plugins)) return;
     storedPlugins.current = plugins;
-    embla.reInit(storedOptions.current, storedPlugins.current);
-  }, [embla, options, plugins]);
+    reInit();
+  }, [plugins, reInit]);
   return [setViewport, embla];
@@ -58,0 +81,0 @@ }

embla-carousel-react.esm.js

@@ -1,2 +0,2 @@
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import EmblaCarousel from 'embla-carousel';
@@ -7,2 +7,19 @@
 }
+function sortAndMapPluginToOptions(plugins) {
+  return plugins.concat().sort(function (a, b) {
+    return a.name > b.name ? 1 : -1;
+  }).map(function (plugin) {
+    return plugin.options;
+  });
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+  if (pluginsA.length !== pluginsB.length) return false;
+  var areEqual = EmblaCarousel.optionsHandler().areEqual;
+  var optionsA = sortAndMapPluginToOptions(pluginsA);
+  var optionsB = sortAndMapPluginToOptions(pluginsB);
+  return optionsA.every(function (optionA, index) {
+    var optionB = optionsB[index];
+    return areEqual(optionA, optionB);
+  });
+}
 
@@ -30,2 +47,5 @@ function useEmblaCarousel(options, plugins) {
 
+  var reInit = useCallback(function () {
+    if (embla) embla.reInit(storedOptions.current, storedPlugins.current);
+  }, [embla]);
   useEffect(function () {
@@ -44,8 +64,11 @@ if (canUseDOM() && viewport) {
   useEffect(function () {
-    if (!embla) return;
     if (optionsHandler.current.areEqual(storedOptions.current, options)) return;
     storedOptions.current = options;
+    reInit();
+  }, [options, reInit]);
+  useEffect(function () {
+    if (arePluginsEqual(storedPlugins.current, plugins)) return;
     storedPlugins.current = plugins;
-    embla.reInit(storedOptions.current, storedPlugins.current);
-  }, [embla, options, plugins]);
+    reInit();
+  }, [plugins, reInit]);
   return [setViewport, embla];
@@ -52,0 +75,0 @@ }

embla-carousel-react.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("embla-carousel")):"function"==typeof define&&define.amd?define(["react","embla-carousel"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).EmblaCarouselReact=t(e.React,e.EmblaCarousel)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t);function r(t,n){void 0===t&&(t={}),void 0===n&&(n=[]);var o=e.useRef(u.default.optionsHandler()),f=e.useRef(t),i=e.useRef(n),a=e.useState(),c=a[0],l=a[1],d=e.useState(),s=d[0],p=d[1];return e.useEffect((function(){if("undefined"!=typeof window&&window.document&&window.document.createElement&&s){u.default.globalOptions=r.globalOptions;var e=u.default(s,f.current,i.current);return l(e),function(){return e.destroy()}}l(void 0)}),[s,l]),e.useEffect((function(){c&&(o.current.areEqual(f.current,t)||(f.current=t,i.current=n,c.reInit(f.current,i.current)))}),[c,t,n]),[p,c]}return r.globalOptions=void 0,r}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("embla-carousel")):"function"==typeof define&&define.amd?define(["react","embla-carousel"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).EmblaCarouselReact=t(e.React,e.EmblaCarousel)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t);function u(e){return e.concat().sort((function(e,t){return e.name>t.name?1:-1})).map((function(e){return e.options}))}function o(t,n){void 0===t&&(t={}),void 0===n&&(n=[]);var f=e.useRef(r.default.optionsHandler()),a=e.useRef(t),i=e.useRef(n),c=e.useState(),l=c[0],d=c[1],s=e.useState(),p=s[0],m=s[1],b=e.useCallback((function(){l&&l.reInit(a.current,i.current)}),[l]);return e.useEffect((function(){if("undefined"!=typeof window&&window.document&&window.document.createElement&&p){r.default.globalOptions=o.globalOptions;var e=r.default(p,a.current,i.current);return d(e),function(){return e.destroy()}}d(void 0)}),[p,d]),e.useEffect((function(){f.current.areEqual(a.current,t)||(a.current=t,b())}),[t,b]),e.useEffect((function(){(function(e,t){if(e.length!==t.length)return!1;var n=r.default.optionsHandler().areEqual,o=u(e),f=u(t);return o.every((function(e,t){var r=f[t];return n(e,r)}))})(i.current,n)||(i.current=n,b())}),[n,b]),[m,l]}return o.globalOptions=void 0,o}));

package.json

 {
   "name": "embla-carousel-react",
-  "version": "7.0.0-rc01",
+  "version": "7.0.0-rc03",
   "author": "David Jerleke",
@@ -59,3 +59,3 @@ "description": "A lightweight carousel library with fluid motion and great swipe precision",
   "dependencies": {
-    "embla-carousel": "7.0.0-rc01"
+    "embla-carousel": "7.0.0-rc03"
   },
@@ -65,2 +65,2 @@ "peerDependencies": {
   }
-}
+}

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24262

increased by38.39%

Lines of code

166

increased by44.35%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedembla-carousel@7.0.0-rc03(transitive)

• - Removedembla-carousel@7.0.0-rc01(transitive)

• Updatedembla-carousel@7.0.0-rc03