solid-slider 1.3.9 → 1.3.12

package/README.md

@@ -143,7 +143,7 @@ const [slider] = createSlider(
   { loop: true },
   autoplay(2000, {
     pause,
-    pauseOnDrag: true
+    pauseOnDrag: true,
   })
 );
 ```
@@ -177,6 +177,8 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.3.7 - Fixed TS issues updated to latest KeenSlider.
 - 1.3.8 - Updated to Solid 1.5
 - 1.3.9 - Fixed Keen URLs, type issues and truthy error with autoplay (thanks [ishanAhuja](https://www.github.com/ishanAhuja) and [ahhshm](https://www.github.com/ahhshm))
+- 1.3.11 - Upgraded importance dependencies including Solid 1.6
+- 1.3.12 - Patched slider to reactively update on updating children
 
 ## Keen Options API
 

package/dist/adaptiveHeight/adaptiveHeight.jsx

@@ -9,7 +9,8 @@
 const adaptiveHeight = () => {
     return (slider) => {
         function updateHeight() {
-            slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
+            slider.container.style.height =
+                slider.slides[slider.track.details.rel].offsetHeight + "px";
         }
         slider.on("created", updateHeight);
         slider.on("slideChanged", updateHeight);

package/dist/adaptiveHeight/index.common.js

@@ -13,7 +13,6 @@ const adaptiveHeight = () => {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }
-
     slider.on("created", updateHeight);
     slider.on("slideChanged", updateHeight);
   };

package/dist/adaptiveHeight/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nconst adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,SAASC,YAAT,GAAwB;AACtBD,MAAAA,MAAM,CAACE,SAAP,CAAiBC,KAAjB,CAAuBC,MAAvB,GAAgCJ,MAAM,CAACK,MAAP,CAAcL,MAAM,CAACM,KAAP,CAAaC,OAAb,CAAqBC,GAAnC,CAAA,CAAwCC,YAAxC,GAAuD,IAAvF,CAAA;AACD,KAAA;;AACDT,IAAAA,MAAM,CAACU,EAAP,CAAU,SAAV,EAAqBT,YAArB,CAAA,CAAA;AACAD,IAAAA,MAAM,CAACU,EAAP,CAAU,cAAV,EAA0BT,YAA1B,CAAA,CAAA;AACD,GAND,CAAA;AAOD;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nconst adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}

package/dist/adaptiveHeight/index.module.js

@@ -11,7 +11,6 @@ const adaptiveHeight = () => {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }
-
     slider.on("created", updateHeight);
     slider.on("slideChanged", updateHeight);
   };

package/dist/adaptiveHeight/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nconst adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,SAASC,YAAT,GAAwB;AACtBD,MAAAA,MAAM,CAACE,SAAP,CAAiBC,KAAjB,CAAuBC,MAAvB,GAAgCJ,MAAM,CAACK,MAAP,CAAcL,MAAM,CAACM,KAAP,CAAaC,OAAb,CAAqBC,GAAnC,CAAA,CAAwCC,YAAxC,GAAuD,IAAvF,CAAA;AACD,KAAA;;AACDT,IAAAA,MAAM,CAACU,EAAP,CAAU,SAAV,EAAqBT,YAArB,CAAA,CAAA;AACAD,IAAAA,MAAM,CAACU,EAAP,CAAU,cAAV,EAA0BT,YAA1B,CAAA,CAAA;AACD,GAND,CAAA;AAOD;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nconst adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}

package/dist/adaptiveHeight/style.css

@@ -1,3 +1,3 @@
 .keen-slider {
   transition: height 0.3s;
-}
+}

package/dist/autoplay/autoplay.jsx

@@ -26,7 +26,7 @@ const autoplay = (interval = 1000, options) => {
         if (options.pauseOnDrag !== false) {
             slider.on("dragStarted", () => dispose?.());
         }
-        createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));
+        createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
     };
 };
 export default autoplay;

package/dist/autoplay/index.common.js

@@ -22,16 +22,13 @@ var timer = require('@solid-primitives/timer');
 const autoplay = (interval = 1000, options) => {
   return slider => {
     let dispose;
-
     const start = () => {
       dispose = timer.makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
-    }; // Pause the slider on drag
-
-
+    };
+    // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
       slider.on("dragStarted", () => dispose?.());
     }
-
     solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
   };
 };

package/dist/autoplay/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nconst autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  }\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\n        interval,\n        setInterval\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\n  };\n};\n\nexport default autoplay;\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,KAAwB,KAA5B,EAAmC;AACjCV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,IAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,oBAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,IAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nconst autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  }\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation\n          ),\n        interval,\n        setInterval\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.()\n    );\n  };\n};\n\nexport default autoplay;\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;IACrB,MAAMC,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,EACHV,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC,CAAA;AAC7C,KAAA;AACAW,IAAAA,oBAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAI,CACpE,CAAA;GACF,CAAA;AACH;;;;"}

package/dist/autoplay/index.module.js

@@ -20,16 +20,13 @@ import { makeTimer } from '@solid-primitives/timer';
 const autoplay = (interval = 1000, options) => {
   return slider => {
     let dispose;
-
     const start = () => {
       dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
-    }; // Pause the slider on drag
-
-
+    };
+    // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
       slider.on("dragStarted", () => dispose?.());
     }
-
     createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
   };
 };

package/dist/autoplay/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nconst autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  }\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\n        interval,\n        setInterval\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\n  };\n};\n\nexport default autoplay;\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,KAAwB,KAA5B,EAAmC;AACjCV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,IAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,YAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,IAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nconst autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  }\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation\n          ),\n        interval,\n        setInterval\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.()\n    );\n  };\n};\n\nexport default autoplay;\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;IACrB,MAAMC,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,EACHV,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC,CAAA;AAC7C,KAAA;AACAW,IAAAA,YAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAI,CACpE,CAAA;GACF,CAAA;AACH;;;;"}

package/dist/index/components.d.ts

@@ -12,6 +12,7 @@ export declare const SliderContext: import("solid-js").Context<import("solid-js"
     details: import("solid-js").Accessor<import("keen-slider").TrackDetails>;
     slider: import("solid-js").Accessor<import("keen-slider").KeenSliderInstance<{}, {}, import("keen-slider").KeenSliderHooks>>;
     destroy: import("solid-js").Accessor<void>;
+    update: VoidFunction;
 }>>;
 /**
  * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.

package/dist/index/components.jsx

@@ -1,5 +1,6 @@
-import { createContext, useContext, createSignal } from "solid-js";
+import { on, createContext, useContext, createSignal, createEffect, } from "solid-js";
 import { createSlider } from "./primitive";
+import { access } from "@solid-primitives/utils";
 import { isServer } from "solid-js/web";
 export function returnType(func) {
     return {};
@@ -13,19 +14,22 @@ export const SliderContext = createContext(createSignal(null));
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-export const SliderProvider = props => (<SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>);
+export const SliderProvider = (props) => (<SliderContext.Provider value={createSignal(null)}>
+    {props.children}
+  </SliderContext.Provider>);
 /**
  * Main Slider component for specifying the Slider on the page.
  *
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-export const Slider = props => {
+export const Slider = (props) => {
     if (isServer)
         return <div class="keen-slider">{props.children}</div>;
     const [, setHelpers] = useContext(SliderContext);
     const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
     setHelpers(helpers);
+    createEffect(on(() => access(props.children), () => queueMicrotask(() => helpers.update()), { defer: true }));
     slider;
     return (<div use:slider class="keen-slider">
       {props.children}
@@ -39,7 +43,7 @@ export const Slider = props => {
  * @param props {string} class - Class to override the button.
  * @param props {object} classList - List of classes to override the button.
  */
-export const SliderButton = props => {
+export const SliderButton = (props) => {
     const context = useContext(SliderContext);
     const changeSlide = () => {
         if (context == null)

package/dist/index/index.common.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var solidJs = require('solid-js');
+var utils = require('@solid-primitives/utils');
 var KeenSlider = require('keen-slider');
 var web = require('solid-js/web');
 
@@ -33,33 +34,31 @@ var KeenSlider__default = /*#__PURE__*/_interopDefaultLegacy(KeenSlider);
  */
 const createSlider = (options, ...plugins) => {
   let slider;
-
-  const opts = () => typeof options == "function" ? options() : options;
-
+  let el;
+  const opts = () => utils.access(options);
   const [current, setCurrent] = solidJs.createSignal(opts()?.initial || 0);
-
-  const destroy = () => slider && slider.destroy(); // Slider creation method and directive function
-
-
-  const create = el => {
-    el.classList.add("keen-slider"); // @ts-ignore
-
-    const getOptions = () => ({
-      selector: el.childNodes,
-      ...opts()
-    });
-
+  const destroy = () => slider && slider.destroy();
+  const getOptions = (overrides = {}
+  // @ts-ignore
+  ) => ({
+    selector: el.childNodes,
+    ...opts(),
+    ...overrides
+  });
+  const update = () => slider?.update(getOptions());
+  // Slider creation method and directive function
+  const create = newEl => {
+    el = newEl;
+    el.classList.add("keen-slider");
     solidJs.onMount(() => {
       slider = new KeenSlider__default["default"](el, getOptions(), plugins);
       slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
     });
     solidJs.onCleanup(destroy);
-
     if (typeof options === "function") {
-      solidJs.createEffect(solidJs.on(() => options, () => slider && slider.update(getOptions())));
+      solidJs.createEffect(solidJs.on(() => options, update));
     }
   };
-
   return [create, {
     current,
     next: () => slider && slider.next(),
@@ -70,63 +69,63 @@ const createSlider = (options, ...plugins) => {
       duration,
       easing: easing
     }),
-    destroy
+    destroy,
+    update
   }];
 };
 
 const _tmpl$ = /*#__PURE__*/web.template(`<div class="keen-slider"></div>`, 2),
-      _tmpl$2 = /*#__PURE__*/web.template(`<button></button>`, 2);
+  _tmpl$2 = /*#__PURE__*/web.template(`<button></button>`, 2);
+
+// The following is a hacky way of extracting SliderHelpers
 
 function returnType(func) {
   return {};
 }
 // Main context for the slider
 const SliderContext = solidJs.createContext(solidJs.createSignal(null));
+
 /**
  * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
  *
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-
 const SliderProvider = props => web.createComponent(SliderContext.Provider, {
   get value() {
     return solidJs.createSignal(null);
   },
-
   get children() {
     return props.children;
   }
-
 });
+
 /**
  * Main Slider component for specifying the Slider on the page.
  *
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-
 const Slider = props => {
   if (web.isServer) return (() => {
     const _el$ = _tmpl$.cloneNode(true);
-
     web.insert(_el$, () => props.children);
-
     return _el$;
   })();
   const [, setHelpers] = solidJs.useContext(SliderContext);
   const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
   setHelpers(helpers);
+  solidJs.createEffect(solidJs.on(() => utils.access(props.children), () => queueMicrotask(() => helpers.update()), {
+    defer: true
+  }));
   return (() => {
     const _el$2 = _tmpl$.cloneNode(true);
-
     slider(_el$2, () => true);
-
     web.insert(_el$2, () => props.children);
-
     return _el$2;
   })();
 };
+
 /**
  * Provides a helpful button with next/prev to pair with your slider.
  *
@@ -135,28 +134,21 @@ const Slider = props => {
  * @param props {string} class - Class to override the button.
  * @param props {object} classList - List of classes to override the button.
  */
-
 const SliderButton = props => {
   const context = solidJs.useContext(SliderContext);
-
   const changeSlide = () => {
     if (context == null) return;
     const [helpers] = context;
     props.next ? helpers()?.next() : helpers()?.prev();
   };
-
   return (() => {
     const _el$3 = _tmpl$2.cloneNode(true);
-
     _el$3.$$click = changeSlide;
-
     web.insert(_el$3, () => props.children);
-
     web.effect(_p$ => {
       const _v$ = props.disabled || false,
-            _v$2 = props.class,
-            _v$3 = props.classList;
-
+        _v$2 = props.class,
+        _v$3 = props.classList;
       _v$ !== _p$._v$ && (_el$3.disabled = _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && (_el$3.className = _p$._v$2 = _v$2);
       _p$._v$3 = web.classList(_el$3, _v$3, _p$._v$3);
@@ -166,11 +158,9 @@ const SliderButton = props => {
       _v$2: undefined,
       _v$3: undefined
     });
-
     return _el$3;
   })();
 };
-
 web.delegateEvents(["click"]);
 
 exports.Slider = Slider;

package/dist/index/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import { on, onMount, createSignal, onCleanup, Accessor, createEffect } from \"solid-js\";\nimport KeenSlider, {\n  KeenSliderHooks,\n  KeenSliderInstance,\n  KeenSliderOptions,\n  KeenSliderPlugin,\n  TrackDetails\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      slider: {};\n    }\n  }\n}\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <O = {}, P = {}, H extends string = KeenSliderHooks>(\n  options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n  ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n  create: (el: HTMLElement) => void,\n  helpers: {\n    current: Accessor<number>;\n    next: Accessor<void>;\n    prev: Accessor<void>;\n    moveTo: (\n      id: number,\n      duration?: number,\n      absolute?: boolean,\n      easing?: (t: number) => number\n    ) => void;\n    details: Accessor<TrackDetails>;\n    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n    destroy: Accessor<void>;\n  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  const opts = () => typeof options == \"function\" ? options() : options;\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  // Slider creation method and directive function\n  const create = (el: HTMLElement) => {\n    el.classList.add(\"keen-slider\");\n    // @ts-ignore\n    const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(opts())\n    });\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(\n        on(\n          () => options,\n          () => slider && slider.update(getOptions())\n        )\n      );\n    }\n  };\n  return [\n    create,\n    {\n      current,\n      next: () => slider && slider.next(),\n      prev: () => slider && slider.prev(),\n      details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n      slider: () => slider,\n      moveTo: (id: number, duration = 250, absolute = false, easing?: (t: number) => number) =>\n        slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n      destroy\n    }\n  ];\n};\n","import { createContext, useContext, createSignal, FlowComponent } from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { isServer } from \"solid-js/web\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n  ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n  return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = typeof sliderValues[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(createSignal<SliderHelpers | null>(null));\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = props => (\n  <SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return (\n    <div use:slider class=\"keen-slider\">\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n  next?: boolean;\n  prev?: boolean;\n  disabled?: boolean;\n  class?: string;\n  classList?: { [k: string]: boolean | undefined };\n}> = props => {\n  const context = useContext(SliderContext);\n  const changeSlide = () => {\n    if (context == null) return;\n    const [helpers] = context;\n    props.next ? helpers()?.next() : helpers()?.prev();\n  };\n  return (\n    <button\n      disabled={props.disabled || false}\n      class={props.class}\n      classList={props.classList}\n      onClick={changeSlide}\n    >\n      {props.children}\n    </button>\n  );\n};\n"],"names":["createSlider","options","plugins","slider","opts","current","setCurrent","createSignal","initial","destroy","create","el","classList","add","getOptions","selector","childNodes","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","update","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","setHelpers","useContext","helpers","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList"],"mappings":"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"}
+{"version":3,"file":"index.common.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import {\n  on,\n  onMount,\n  createSignal,\n  onCleanup,\n  Accessor,\n  createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n  KeenSliderHooks,\n  KeenSliderInstance,\n  KeenSliderOptions,\n  KeenSliderPlugin,\n  TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      slider: {};\n    }\n  }\n}\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n  O = {},\n  P = {},\n  H extends string = KeenSliderHooks\n>(\n  options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n  ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n  create: (el: HTMLElement) => void,\n  helpers: {\n    current: Accessor<number>;\n    next: Accessor<void>;\n    prev: Accessor<void>;\n    moveTo: (\n      id: number,\n      duration?: number,\n      absolute?: boolean,\n      easing?: (t: number) => number\n    ) => void;\n    details: Accessor<TrackDetails>;\n    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n    destroy: Accessor<void>;\n    update: VoidFunction;\n  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  let el: HTMLElement;\n  const opts = () => access(options);\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = (\n    overrides = {}\n  // @ts-ignore\n  ) => ({\n    selector: el.childNodes,\n    ...opts(),\n    ...overrides,\n  });\n  const update = () => slider?.update(getOptions());\n  // Slider creation method and directive function\n  const create = (newEl: HTMLElement) => {\n    el = newEl;\n    el.classList.add(\"keen-slider\");\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(on(() => options, update));\n    }\n  };\n  return [\n    create,\n    {\n      current,\n      next: () => slider && slider.next(),\n      prev: () => slider && slider.prev(),\n      details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n      slider: () => slider,\n      moveTo: (\n        id: number,\n        duration = 250,\n        absolute = false,\n        easing?: (t: number) => number\n      ) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n      destroy,\n      update,\n    },\n  ];\n};\n","import {\n  on,\n  createContext,\n  useContext,\n  createSignal,\n  FlowComponent,\n  createEffect,\n} from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n  ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n  return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = typeof sliderValues[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n  createSignal<SliderHelpers | null>(null)\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n  <SliderContext.Provider value={createSignal(null)}>\n    {props.children}\n  </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = (props) => {\n  if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(\n    props.options || {},\n    ...(props.plugins || [])\n  );\n  setHelpers(helpers);\n  createEffect(\n    on(\n      () => access(props.children),\n      () => queueMicrotask(() => helpers.update()),\n      { defer: true }\n    )\n  );\n  slider;\n  return (\n    <div use:slider class=\"keen-slider\">\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n  next?: boolean;\n  prev?: boolean;\n  disabled?: boolean;\n  class?: string;\n  classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n  const context = useContext(SliderContext);\n  const changeSlide = () => {\n    if (context == null) return;\n    const [helpers] = context;\n    props.next ? helpers()?.next() : helpers()?.prev();\n  };\n  return (\n    <button\n      disabled={props.disabled || false}\n      class={props.class}\n      classList={props.classList}\n      onClick={changeSlide}\n    >\n      {props.children}\n    </button>\n  );\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":";;;;;;;;;;;;;AAyBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAG,CAK1BC,OAA2E,EAC3E,GAAGC,OAAoC,KAkBpC;AACH,EAAA,IAAIC,MAA+C,CAAA;AACnD,EAAA,IAAIC,EAAe,CAAA;AACnB,EAAA,MAAMC,IAAI,GAAG,MAAMC,YAAM,CAACL,OAAO,CAAC,CAAA;AAClC,EAAA,MAAM,CAACM,OAAO,EAAEC,UAAU,CAAC,GAAGC,oBAAY,CAACJ,IAAI,EAAE,EAAEK,OAAO,IAAI,CAAC,CAAC,CAAA;EAChE,MAAMC,OAAO,GAAG,MAAMR,MAAM,IAAIA,MAAM,CAACQ,OAAO,EAAE,CAAA;AAChD,EAAA,MAAMC,UAA4D,GAAG,CACnEC,SAAS,GAAG,EAAC;AACf;QACM;IACJC,QAAQ,EAAEV,EAAE,CAACW,UAAU;AACvB,IAAA,GAAGV,IAAI,EAAE;IACT,GAAGQ,SAAAA;AACL,GAAC,CAAC,CAAA;EACF,MAAMG,MAAM,GAAG,MAAMb,MAAM,EAAEa,MAAM,CAACJ,UAAU,EAAE,CAAC,CAAA;AACjD;EACA,MAAMK,MAAM,GAAIC,KAAkB,IAAK;AACrCd,IAAAA,EAAE,GAAGc,KAAK,CAAA;AACVd,IAAAA,EAAE,CAACe,SAAS,CAACC,GAAG,CAAC,aAAa,CAAC,CAAA;AAC/BC,IAAAA,eAAO,CAAC,MAAM;MACZlB,MAAM,GAAG,IAAImB,8BAAU,CAAUlB,EAAE,EAAEQ,UAAU,EAAE,EAAEV,OAAO,CAAC,CAAA;AAC3DC,MAAAA,MAAM,CAACoB,EAAE,CAAC,cAAc,EAAE,MAAMf,UAAU,CAACL,MAAM,CAAEqB,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAAC,CAAA;AACxE,KAAC,CAAC,CAAA;IACFC,iBAAS,CAAChB,OAAO,CAAC,CAAA;AAClB,IAAA,IAAI,OAAOV,OAAO,KAAK,UAAU,EAAE;MACjC2B,oBAAY,CAACL,UAAE,CAAC,MAAMtB,OAAO,EAAEe,MAAM,CAAC,CAAC,CAAA;AACzC,KAAA;GACD,CAAA;EACD,OAAO,CACLC,MAAM,EACN;IACEV,OAAO;AACPsB,IAAAA,IAAI,EAAE,MAAM1B,MAAM,IAAIA,MAAM,CAAC0B,IAAI,EAAE;AACnCC,IAAAA,IAAI,EAAE,MAAM3B,MAAM,IAAIA,MAAM,CAAC2B,IAAI,EAAE;IACnCL,OAAO,EAAE,MAAOtB,MAAM,GAAGA,MAAM,CAACqB,KAAK,CAACC,OAAO,GAAI,EAAoB;IACrEtB,MAAM,EAAE,MAAMA,MAAM;IACpB4B,MAAM,EAAE,CACNC,EAAU,EACVC,QAAQ,GAAG,GAAG,EACdC,QAAQ,GAAG,KAAK,EAChBC,MAA8B,KAC3BhC,MAAM,EAAEiC,SAAS,CAACJ,EAAE,EAAEE,QAAQ,EAAE;MAAED,QAAQ;AAAEE,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAAC,CAAC;IAClExB,OAAO;AACPK,IAAAA,MAAAA;AACF,GAAC,CACF,CAAA;AACH;;;;;ACvGA;;AAIO,SAASqB,UAAU,CAAIC,IAAa,EAAE;AAC3C,EAAA,OAAO,EAAE,CAAA;AACX,CAAA;AAIA;AACO,MAAMC,aAAa,GAAGC,qBAAa,CACxC/B,oBAAY,CAAuB,IAAI,CAAC,EACzC;;AAED;AACA;AACA;AACA;AACA;AACA;MACagC,cAA6B,GAAIC,KAAK,IAChDC,mBAAA,CAAA,aAAa,CAAC,QAAQ,EAAA;AAAA,EAAA,IAAC,KAAK,GAAA;IAAA,OAAElC,oBAAY,CAAC,IAAI,CAAC,CAAA;AAAA,GAAA;AAAA,EAAA,IAAA,QAAA,GAAA;IAAA,OAC9CiC,KAAK,CAACE,QAAQ,CAAA;AAAA,GAAA;AAAA,CAElB,EAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,MAGX,GAAIH,KAAK,IAAK;AACd,EAAA,IAAII,YAAQ,EAAE,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,IAAA,GAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;IAAAC,UAAiCL,CAAAA,IAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAA,OAAA,IAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAC7D,EAAA,MAAM,GAAGI,UAAU,CAAC,GAAGC,kBAAU,CAACV,aAAa,CAAC,CAAA;EAChD,MAAM,CAACpC,MAAM,EAAE+C,OAAO,CAAC,GAAGlD,YAAY,CACpC0C,KAAK,CAACzC,OAAO,IAAI,EAAE,EACnB,IAAIyC,KAAK,CAACxC,OAAO,IAAI,EAAE,CAAC,CACzB,CAAA;EACD8C,UAAU,CAACE,OAAO,CAAC,CAAA;EACnBtB,oBAAY,CACVL,UAAE,CACA,MAAMjB,YAAM,CAACoC,KAAK,CAACE,QAAQ,CAAC,EAC5B,MAAMO,cAAc,CAAC,MAAMD,OAAO,CAAClC,MAAM,EAAE,CAAC,EAC5C;AAAEoC,IAAAA,KAAK,EAAE,IAAA;AAAK,GAAC,CAChB,CACF,CAAA;AAED,EAAA,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,KAAA,GAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;IACW,MAAM,CAAA,KAAA,EAAA,MAAA,IAAA,CAAA,CAAA;IAAAL,UACZL,CAAAA,KAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAA,OAAA,KAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAGrB,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaS,MAAAA,YAMX,GAAIX,KAAK,IAAK;AACd,EAAA,MAAMY,OAAO,GAAGL,kBAAU,CAACV,aAAa,CAAC,CAAA;EACzC,MAAMgB,WAAW,GAAG,MAAM;IACxB,IAAID,OAAO,IAAI,IAAI,EAAE,OAAA;AACrB,IAAA,MAAM,CAACJ,OAAO,CAAC,GAAGI,OAAO,CAAA;AACzBZ,IAAAA,KAAK,CAACb,IAAI,GAAGqB,OAAO,EAAE,EAAErB,IAAI,EAAE,GAAGqB,OAAO,EAAE,EAAEpB,IAAI,EAAE,CAAA;GACnD,CAAA;AACD,EAAA,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,KAAA,GAAA,OAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,CAAA,OAAA,GAKayB,WAAW,CAAA;IAAAR,UAEnBL,CAAAA,KAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAAY,UAAA,CAAA,GAAA,IAAA;AAAA,MAAA,MAAA,GAAA,GALLd,KAAK,CAACe,QAAQ,IAAI,KAAK;QAAA,IAC1Bf,GAAAA,KAAK,CAACgB,KAAK;QAAA,IACPhB,GAAAA,KAAK,CAACvB,SAAS,CAAA;AAAA,MAAA,GAAA,KAAA,GAAA,CAAA,GAAA,KAAA,KAAA,CAAA,QAAA,GAAA,GAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA;AAAA,MAAA,IAAA,KAAA,GAAA,CAAA,IAAA,KAAA,KAAA,CAAA,SAAA,GAAA,GAAA,CAAA,IAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,GAAA,CAAA,IAAA,GAAAwC,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,CAAA,IAAA,CAAA,CAAA;AAAA,MAAA,OAAA,GAAA,CAAA;AAAA,KAAA,EAAA;AAAA,MAAA,GAAA,EAAA,SAAA;AAAA,MAAA,IAAA,EAAA,SAAA;AAAA,MAAA,IAAA,EAAA,SAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAAA,OAAA,KAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAMhC,EAAC;AAACC,kBAAA,CAAA,CAAA,OAAA,CAAA,CAAA;;;;;;;;;"}

package/dist/index/index.module.js

@@ -1,4 +1,5 @@
 import { createSignal, onMount, onCleanup, createEffect, on, createContext, useContext } from 'solid-js';
+import { access } from '@solid-primitives/utils';
 import KeenSlider from 'keen-slider';
 import { createComponent, isServer, insert, effect, classList, delegateEvents, template } from 'solid-js/web';
 
@@ -25,33 +26,31 @@ import { createComponent, isServer, insert, effect, classList, delegateEvents, t
  */
 const createSlider = (options, ...plugins) => {
   let slider;
-
-  const opts = () => typeof options == "function" ? options() : options;
-
+  let el;
+  const opts = () => access(options);
   const [current, setCurrent] = createSignal(opts()?.initial || 0);
-
-  const destroy = () => slider && slider.destroy(); // Slider creation method and directive function
-
-
-  const create = el => {
-    el.classList.add("keen-slider"); // @ts-ignore
-
-    const getOptions = () => ({
-      selector: el.childNodes,
-      ...opts()
-    });
-
+  const destroy = () => slider && slider.destroy();
+  const getOptions = (overrides = {}
+  // @ts-ignore
+  ) => ({
+    selector: el.childNodes,
+    ...opts(),
+    ...overrides
+  });
+  const update = () => slider?.update(getOptions());
+  // Slider creation method and directive function
+  const create = newEl => {
+    el = newEl;
+    el.classList.add("keen-slider");
     onMount(() => {
       slider = new KeenSlider(el, getOptions(), plugins);
       slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
     });
     onCleanup(destroy);
-
     if (typeof options === "function") {
-      createEffect(on(() => options, () => slider && slider.update(getOptions())));
+      createEffect(on(() => options, update));
     }
   };
-
   return [create, {
     current,
     next: () => slider && slider.next(),
@@ -62,63 +61,63 @@ const createSlider = (options, ...plugins) => {
       duration,
       easing: easing
     }),
-    destroy
+    destroy,
+    update
   }];
 };
 
 const _tmpl$ = /*#__PURE__*/template(`<div class="keen-slider"></div>`, 2),
-      _tmpl$2 = /*#__PURE__*/template(`<button></button>`, 2);
+  _tmpl$2 = /*#__PURE__*/template(`<button></button>`, 2);
+
+// The following is a hacky way of extracting SliderHelpers
 
 function returnType(func) {
   return {};
 }
 // Main context for the slider
 const SliderContext = createContext(createSignal(null));
+
 /**
  * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
  *
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-
 const SliderProvider = props => createComponent(SliderContext.Provider, {
   get value() {
     return createSignal(null);
   },
-
   get children() {
     return props.children;
   }
-
 });
+
 /**
  * Main Slider component for specifying the Slider on the page.
  *
  * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
  * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
  */
-
 const Slider = props => {
   if (isServer) return (() => {
     const _el$ = _tmpl$.cloneNode(true);
-
     insert(_el$, () => props.children);
-
     return _el$;
   })();
   const [, setHelpers] = useContext(SliderContext);
   const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
   setHelpers(helpers);
+  createEffect(on(() => access(props.children), () => queueMicrotask(() => helpers.update()), {
+    defer: true
+  }));
   return (() => {
     const _el$2 = _tmpl$.cloneNode(true);
-
     slider(_el$2, () => true);
-
     insert(_el$2, () => props.children);
-
     return _el$2;
   })();
 };
+
 /**
  * Provides a helpful button with next/prev to pair with your slider.
  *
@@ -127,28 +126,21 @@ const Slider = props => {
  * @param props {string} class - Class to override the button.
  * @param props {object} classList - List of classes to override the button.
  */
-
 const SliderButton = props => {
   const context = useContext(SliderContext);
-
   const changeSlide = () => {
     if (context == null) return;
     const [helpers] = context;
     props.next ? helpers()?.next() : helpers()?.prev();
   };
-
   return (() => {
     const _el$3 = _tmpl$2.cloneNode(true);
-
     _el$3.$$click = changeSlide;
-
     insert(_el$3, () => props.children);
-
     effect(_p$ => {
       const _v$ = props.disabled || false,
-            _v$2 = props.class,
-            _v$3 = props.classList;
-
+        _v$2 = props.class,
+        _v$3 = props.classList;
       _v$ !== _p$._v$ && (_el$3.disabled = _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && (_el$3.className = _p$._v$2 = _v$2);
       _p$._v$3 = classList(_el$3, _v$3, _p$._v$3);
@@ -158,11 +150,9 @@ const SliderButton = props => {
       _v$2: undefined,
       _v$3: undefined
     });
-
     return _el$3;
   })();
 };
-
 delegateEvents(["click"]);
 
 export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };

package/dist/index/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import { on, onMount, createSignal, onCleanup, Accessor, createEffect } from \"solid-js\";\nimport KeenSlider, {\n  KeenSliderHooks,\n  KeenSliderInstance,\n  KeenSliderOptions,\n  KeenSliderPlugin,\n  TrackDetails\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      slider: {};\n    }\n  }\n}\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <O = {}, P = {}, H extends string = KeenSliderHooks>(\n  options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n  ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n  create: (el: HTMLElement) => void,\n  helpers: {\n    current: Accessor<number>;\n    next: Accessor<void>;\n    prev: Accessor<void>;\n    moveTo: (\n      id: number,\n      duration?: number,\n      absolute?: boolean,\n      easing?: (t: number) => number\n    ) => void;\n    details: Accessor<TrackDetails>;\n    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n    destroy: Accessor<void>;\n  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  const opts = () => typeof options == \"function\" ? options() : options;\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  // Slider creation method and directive function\n  const create = (el: HTMLElement) => {\n    el.classList.add(\"keen-slider\");\n    // @ts-ignore\n    const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(opts())\n    });\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(\n        on(\n          () => options,\n          () => slider && slider.update(getOptions())\n        )\n      );\n    }\n  };\n  return [\n    create,\n    {\n      current,\n      next: () => slider && slider.next(),\n      prev: () => slider && slider.prev(),\n      details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n      slider: () => slider,\n      moveTo: (id: number, duration = 250, absolute = false, easing?: (t: number) => number) =>\n        slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n      destroy\n    }\n  ];\n};\n","import { createContext, useContext, createSignal, FlowComponent } from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { isServer } from \"solid-js/web\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n  ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n  return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = typeof sliderValues[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(createSignal<SliderHelpers | null>(null));\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = props => (\n  <SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return (\n    <div use:slider class=\"keen-slider\">\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n  next?: boolean;\n  prev?: boolean;\n  disabled?: boolean;\n  class?: string;\n  classList?: { [k: string]: boolean | undefined };\n}> = props => {\n  const context = useContext(SliderContext);\n  const changeSlide = () => {\n    if (context == null) return;\n    const [helpers] = context;\n    props.next ? helpers()?.next() : helpers()?.prev();\n  };\n  return (\n    <button\n      disabled={props.disabled || false}\n      class={props.class}\n      classList={props.classList}\n      onClick={changeSlide}\n    >\n      {props.children}\n    </button>\n  );\n};\n"],"names":["createSlider","options","plugins","slider","opts","current","setCurrent","createSignal","initial","destroy","create","el","classList","add","getOptions","selector","childNodes","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","update","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","setHelpers","useContext","helpers","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList"],"mappings":"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"}
+{"version":3,"file":"index.module.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import {\n  on,\n  onMount,\n  createSignal,\n  onCleanup,\n  Accessor,\n  createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n  KeenSliderHooks,\n  KeenSliderInstance,\n  KeenSliderOptions,\n  KeenSliderPlugin,\n  TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      slider: {};\n    }\n  }\n}\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n  O = {},\n  P = {},\n  H extends string = KeenSliderHooks\n>(\n  options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n  ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n  create: (el: HTMLElement) => void,\n  helpers: {\n    current: Accessor<number>;\n    next: Accessor<void>;\n    prev: Accessor<void>;\n    moveTo: (\n      id: number,\n      duration?: number,\n      absolute?: boolean,\n      easing?: (t: number) => number\n    ) => void;\n    details: Accessor<TrackDetails>;\n    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n    destroy: Accessor<void>;\n    update: VoidFunction;\n  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  let el: HTMLElement;\n  const opts = () => access(options);\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = (\n    overrides = {}\n  // @ts-ignore\n  ) => ({\n    selector: el.childNodes,\n    ...opts(),\n    ...overrides,\n  });\n  const update = () => slider?.update(getOptions());\n  // Slider creation method and directive function\n  const create = (newEl: HTMLElement) => {\n    el = newEl;\n    el.classList.add(\"keen-slider\");\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(on(() => options, update));\n    }\n  };\n  return [\n    create,\n    {\n      current,\n      next: () => slider && slider.next(),\n      prev: () => slider && slider.prev(),\n      details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n      slider: () => slider,\n      moveTo: (\n        id: number,\n        duration = 250,\n        absolute = false,\n        easing?: (t: number) => number\n      ) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n      destroy,\n      update,\n    },\n  ];\n};\n","import {\n  on,\n  createContext,\n  useContext,\n  createSignal,\n  FlowComponent,\n  createEffect,\n} from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n  ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n  return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = typeof sliderValues[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n  createSignal<SliderHelpers | null>(null)\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n  <SliderContext.Provider value={createSignal(null)}>\n    {props.children}\n  </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = (props) => {\n  if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(\n    props.options || {},\n    ...(props.plugins || [])\n  );\n  setHelpers(helpers);\n  createEffect(\n    on(\n      () => access(props.children),\n      () => queueMicrotask(() => helpers.update()),\n      { defer: true }\n    )\n  );\n  slider;\n  return (\n    <div use:slider class=\"keen-slider\">\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n  next?: boolean;\n  prev?: boolean;\n  disabled?: boolean;\n  class?: string;\n  classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n  const context = useContext(SliderContext);\n  const changeSlide = () => {\n    if (context == null) return;\n    const [helpers] = context;\n    props.next ? helpers()?.next() : helpers()?.prev();\n  };\n  return (\n    <button\n      disabled={props.disabled || false}\n      class={props.class}\n      classList={props.classList}\n      onClick={changeSlide}\n    >\n      {props.children}\n    </button>\n  );\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":"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"}

package/dist/index/primitive.d.ts

@@ -36,4 +36,5 @@ export declare const createSlider: <O = {}, P = {}, H extends string = KeenSlide
     details: Accessor<TrackDetails>;
     slider: Accessor<KeenSliderInstance<O, P, H>>;
     destroy: Accessor<void>;
+    update: VoidFunction;
 }];

package/dist/index/primitive.js

@@ -1,4 +1,5 @@
-import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
+import { on, onMount, createSignal, onCleanup, createEffect, } from "solid-js";
+import { access } from "@solid-primitives/utils";
 import KeenSlider from "keen-slider";
 /**
  * Creates a slider powered by KeenSlider.
@@ -23,24 +24,29 @@ import KeenSlider from "keen-slider";
  */
 export const createSlider = (options, ...plugins) => {
     let slider;
-    const opts = () => typeof options == "function" ? options() : options;
+    let el;
+    const opts = () => access(options);
     const [current, setCurrent] = createSignal(opts()?.initial || 0);
     const destroy = () => slider && slider.destroy();
+    const getOptions = (overrides = {}
+    // @ts-ignore
+    ) => ({
+        selector: el.childNodes,
+        ...opts(),
+        ...overrides,
+    });
+    const update = () => slider?.update(getOptions());
     // Slider creation method and directive function
-    const create = (el) => {
+    const create = (newEl) => {
+        el = newEl;
         el.classList.add("keen-slider");
-        // @ts-ignore
-        const getOptions = () => ({
-            selector: el.childNodes,
-            ...(opts())
-        });
         onMount(() => {
             slider = new KeenSlider(el, getOptions(), plugins);
             slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
         });
         onCleanup(destroy);
         if (typeof options === "function") {
-            createEffect(on(() => options, () => slider && slider.update(getOptions())));
+            createEffect(on(() => options, update));
         }
     };
     return [
@@ -52,7 +58,8 @@ export const createSlider = (options, ...plugins) => {
             details: () => (slider ? slider.track.details : {}),
             slider: () => slider,
             moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),
-            destroy
-        }
+            destroy,
+            update,
+        },
     ];
 };

package/dist/slider.css

@@ -27,4 +27,4 @@
 }
 .keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
   pointer-events: none;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-slider",
-  "version": "1.3.9",
+  "version": "1.3.12",
   "description": "A slider utility for SolidJS.",
   "author": "David Di Biase",
   "repository": {
@@ -16,6 +16,7 @@
     "format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\"",
     "build": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css && cp src/plugins/adaptiveHeight.css dist/adaptiveHeight/style.css"
   },
+  "type": "module",
   "main": "dist/index/index.common.js",
   "module": "dist/index/index.module.js",
   "types": "dist/index/index.d.ts",
@@ -61,14 +62,15 @@
     "plugin"
   ],
   "dependencies": {
-    "@solid-primitives/timer": "^1.3.2",
-    "keen-slider": "^6.7.0",
-    "solid-js": "^1.5.4"
+    "@solid-primitives/timer": "^1.3.4",
+    "@solid-primitives/utils": "^4.0.0",
+    "keen-slider": "^6.8.3",
+    "solid-js": "^1.6.0"
   },
   "devDependencies": {
     "esbuild-plugin-solid": "^0.4.2",
-    "prettier": "^2.5.1",
-    "rollup": "^2.70.2",
+    "prettier": "^2.7.1",
+    "rollup": "^2.79.1",
     "rollup-preset-solid": "^1.4.0",
     "typescript": "^4.5.5"
   }