solid-slider 1.3.16 → 1.3.18

package/README.md

@@ -4,22 +4,28 @@
 [![size](https://img.shields.io/npm/v/solid-slider?style=for-the-badge)](https://www.npmjs.com/package/solid-slider)
 ![npm](https://img.shields.io/npm/dw/solid-slider?style=for-the-badge)
 
-A carousel/slider implementation in TypeScript for SolidJS. It's built on Keen-Slider 6, an open-source library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, TypeScript support, multitouch support and is compatible with all common browsers.
+A carousel/slider implementation in TypeScript for [Solid](https://www.solidjs.com). It's built on Keen-Slider 6, an open-source library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, TypeScript support, multitouch support and is compatible with all common browsers.
 
 This package providers both primitive & directive as well as components. You may use either according to your preference. Note that for better SSR support, the component is recommended over the directive.
 
 ## Installation
 
 ```bash
-npm install solid-slider --save
-yarn add solid-slider ## or in yarn
+## npm
+npm install solid-slider
+## bun
+bun add solid-slider
+## yarn
+yarn add solid-slider
+## pnpm
+pnpm add solid-slider
 ```
 
 Import either the directive or component as you'd like:
 
 ```ts
-import "solid-slider/slider.css";
 import { Slider, createSlider } from "solid-slider";
+import "solid-slider/slider.css";
 ```
 
 ## Demo
@@ -97,15 +103,15 @@ const MyComponent = () => {
 You may include the adaptive height plugin by providing it as a prop:
 
 ```tsx
-import createSlider from “solid-slider”;
-import autoplay from “solid-slider/plugins/adaptiveHeight”;
+import createSlider from "solid-slider";
+import autoplay from "solid-slider/plugins/adaptiveHeight";
 
 const MyComponent = () => {
   return (
     <Slider options={{ loop: true }} plugins={[adaptiveHeight]}>
-      <div class=“slide1”>1</div>
-      <div class=“slide2”>2</div>
-      <div class=“slide3”>3</div>
+      <div class="slide1">1</div>
+      <div class="slide2">2</div>
+      <div class="slide3">3</div>
     </Slider>
   );
 };
@@ -116,15 +122,15 @@ const MyComponent = () => {
 You may include the adaptive width plugin by providing it as a prop:
 
 ```tsx
-import createSlider from “solid-slider”;
-import autoplay from “solid-slider/plugins/adaptiveWidth”;
+import { createSlider } from "solid-slider";
+import { autoplay } from "solid-slider/plugins/adaptiveWidth";
 
 const MyComponent = () => {
   return (
     <Slider options={{ loop: true }} plugins={[adaptiveWidth]}>
-      <div class=“slide1”>1</div>
-      <div class=“slide2”>2</div>
-      <div class=“slide3”>3</div>
+      <div class="slide1">1</div>
+      <div class="slide2">2</div>
+      <div class="slide3">3</div>
     </Slider>
   );
 };
@@ -168,13 +174,33 @@ const MyComponent = () => {
 };
 ```
 
+The primitive itself returns the following shape:
+
+```ts
+type SliderControls<O, P, H extends string> = [
+  create: (el: HTMLElement) => void,
+  helpers: {
+    current: Accessor<number>;
+    next: VoidFunction;
+    prev: VoidFunction;
+    moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) => number) => void;
+    details: () => TrackDetails;
+    slider: () => KeenSliderInstance<O, P, H> | undefined;
+    destroy: VoidFunction;
+    update: VoidFunction;
+  },
+];
+```
+
+Note that only the `current` property returned from the primitive is reactive. If you require additional reactivity on slide change you can use the returns slider instance to bind additional events.
+
 ### Autoplay
 
 The autoplay function extends the slider with pausable playing. You can even supply a signal to control toggling autoplay. [Click here](https://codesandbox.io/s/solid-slider-autoplay-plugin-h2wphk?file=/src/index.tsx) for a demo of autoplay.
 
 ```ts
-import createSlider from "solid-slider";
-import autoplay from "solid-slider/plugins/autoplay";
+import { createSlider } from "solid-slider";
+import { autoplay } from "solid-slider/plugins/autoplay";
 
 const [pause, togglePause] = createSignal(false);
 const [slider] = createSlider(
@@ -182,10 +208,20 @@ const [slider] = createSlider(
   autoplay(2000, {
     pause,
     pauseOnDrag: true,
-  })
+  }),
 );
 ```
 
+## SolidStart & Server-Side Rendering
+
+So you want to use Solid Slider with [SolidStart](https://start.solidjs.com/). No problem but be mindful of how you use it and how server-side rendering impacts the experience. Remember that by default SolidStart enables SSR meaning that your pages are initially rendered on the server. The server has no context of the dimensions of your browser so it cannot calculate how the slider will appear once it's rendered in the browser.
+
+Furthermore there's typically a small window of window between when the slider is sent to the browser and the moment it hydrates and becomes interactive. Given this is how all frameworks operate you're likely to experience the dreaded FOUC (flash of un-styled content).
+
+To mitigate this issue you have two options available. You could add CSS styles (`visibility: hidden` or `hidden` in Tailwind) to hide the content and use the `created` callback in options to remove it from the slider once it's been created on the page. You could also initially style your slider correctly so it doesn't flash at all.
+
+Alternatively you can use [`clientOnly`](https://docs.solidjs.com/solid-start/reference/client/client-only#clientonly) to ensure it isn't part of the SSR process. This is a bit lazy and not ideal in situations where you want content on your page to render for SEO purposes.
+
 ## Implementation
 
 Solid Slider is meant to be a lightweight and compact wrapper of Keen-Slider. It exposes helpers to make working with the slider convenient. Note that the when the slider mounts it assumes all children in the el are slides. You can override this functionality by passing in a "selector" value to target the specific slides you'd like to include.
@@ -222,6 +258,8 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.3.14 - Patched npm packaging issue (thanks [joeygrable94 ](https://www.github.com/joeygrable94))
 - 1.3.15 - Updated to Solid 1.7.11
 - 1.3.16 - Updated dependencies and move Solid from dependency to peer
+- 1.3.17 - Added typs definition to exports (thanks [ChristophP](https://github.com/ChristophP))
+- 1.3.18 - Adjusted documentation and minor source cleanup
 
 ## Keen Options API
 

package/dist/adaptiveHeight/index.common.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Adaptive height is a plugin that adjusts the height of the slider to the content on change.
  *
@@ -10,8 +8,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * const [create] = createSlider({}, [adaptiveHeight]);
  * ```
  */
-const adaptiveHeight = () => {
-  return slider => {
+var adaptiveHeight = function adaptiveHeight() {
+  return function (slider) {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { 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 */\nexport const 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"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,MAAM;AAClC,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;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { 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 */\nexport const 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"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,cAAc,GAAG,SAAjBA,cAAc,GAAS;EAClC,OAAO,UAACC,MAA0B,EAAK;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

@@ -6,8 +6,8 @@
  * const [create] = createSlider({}, [adaptiveHeight]);
  * ```
  */
-const adaptiveHeight = () => {
-  return slider => {
+var adaptiveHeight = function adaptiveHeight() {
+  return function (slider) {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { 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 */\nexport const 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"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,MAAM;AAClC,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;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { 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 */\nexport const 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"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,cAAc,GAAG,SAAjBA,cAAc,GAAS;EAClC,OAAO,UAACC,MAA0B,EAAK;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/adaptiveWidth/index.common.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Adaptive width is a plugin that adjusts the width of the slider to the content on change.
  *
@@ -10,8 +8,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * const [create] = createSlider({}, [adaptiveWidth]);
  * ```
  */
-const adaptiveWidth = () => {
-  return slider => {
+var adaptiveWidth = function adaptiveWidth() {
+  return function (slider) {
     function updateWidth() {
       slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + "px";
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAG,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,aAAa,GAAG,SAAhBA,aAAa,GAAS;EACjC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}

package/dist/adaptiveWidth/index.module.js

@@ -6,8 +6,8 @@
  * const [create] = createSlider({}, [adaptiveWidth]);
  * ```
  */
-const adaptiveWidth = () => {
-  return slider => {
+var adaptiveWidth = function adaptiveWidth() {
+  return function (slider) {
     function updateWidth() {
       slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + "px";
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAG,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,aAAa,GAAG,SAAhBA,aAAa,GAAS;EACjC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}

package/dist/autoplay/autoplay.d.ts

@@ -1,5 +1,5 @@
-import { KeenSliderInstance } from 'keen-slider';
-import { Accessor } from 'solid-js';
+import { KeenSliderInstance } from "keen-slider";
+import { Accessor } from "solid-js";
 /**
  * Provides an autoplay plugin.
  *

package/dist/autoplay/autoplay.jsx

@@ -1,5 +1,5 @@
-import { makeTimer } from '@solid-primitives/timer';
-import { createEffect } from 'solid-js';
+import { makeTimer } from "@solid-primitives/timer";
+import { createEffect } from "solid-js";
 /**
  * Provides an autoplay plugin.
  *
@@ -24,8 +24,8 @@ export const autoplay = (interval = 1000, options) => {
         };
         // Pause the slider on drag
         if (options.pauseOnDrag !== false) {
-            slider.on('dragStarted', () => dispose?.());
+            slider.on("dragStarted", () => dispose?.());
         }
-        createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));
+        createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
     };
 };

package/dist/autoplay/index.common.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var timer = require('@solid-primitives/timer');
 var solidJs = require('solid-js');
 
@@ -21,17 +19,27 @@ var solidJs = require('solid-js');
  * const [create] = createSlider({}, [autoplay]);
  * ```
  */
-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);
+var autoplay = function autoplay() {
+  var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+  var options = arguments.length > 1 ? arguments[1] : undefined;
+  return function (slider) {
+    var dispose;
+    var start = function start() {
+      dispose = timer.makeTimer(function () {
+        return slider.moveToIdx(slider.track.details.position + 1, true, options.animation);
+      }, interval, setInterval);
     };
     // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
-      slider.on('dragStarted', () => dispose?.());
+      slider.on("dragStarted", function () {
+        var _dispose;
+        return (_dispose = dispose) === null || _dispose === void 0 ? void 0 : _dispose();
+      });
     }
-    solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
+    solidJs.createEffect(function () {
+      var _dispose2;
+      return !options.pause || options.pause() === false ? start() : (_dispose2 = dispose) === null || _dispose2 === void 0 ? void 0 : _dispose2();
+    });
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from '@solid-primitives/timer';\nimport { KeenSliderInstance } from 'keen-slider';\nimport { Accessor, createEffect } from 'solid-js';\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 */\nexport const 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"],"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;AACO,MAAMA,QAAQ,GAAG,CACtBC,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,MAAMH,MAAM,CAACI,SAAS,CAACJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAER,OAAO,CAACS,SAAS,CAAC,EAClFV,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,MAAO,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAK,CAAC,CAAA;GAC1F,CAAA;AACH;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\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 */\nexport const 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"],"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;AACaA,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAUhB;EAAA,IATHC,QAAgB,uEAAG,IAAI,CAAA;AAAA,EAAA,IACvBC,OAOC,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,SAAA,CAAA;EAED,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;AACrB,IAAA,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;MAClBD,OAAO,GAAGE,eAAS,CACjB,YAAA;AAAA,QAAA,OACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,CAAA;OACHV,EAAAA,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;AACjCV,MAAAA,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,YAAA;AAAA,QAAA,IAAA,QAAA,CAAA;QAAA,OAAMV,CAAAA,QAAAA,GAAAA,OAAO,6CAAP,QAAW,EAAA,CAAA;OAAC,CAAA,CAAA;AAC7C,KAAA;AACAW,IAAAA,oBAAY,CAAC,YAAA;AAAA,MAAA,IAAA,SAAA,CAAA;AAAA,MAAA,OACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,CAAAA,SAAAA,GAAAA,OAAO,8CAAP,SAAW,EAAA,CAAA;KACpE,CAAA,CAAA;GACF,CAAA;AACH;;;;"}

package/dist/autoplay/index.module.js

@@ -17,17 +17,27 @@ import { createEffect } from 'solid-js';
  * const [create] = createSlider({}, [autoplay]);
  * ```
  */
-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);
+var autoplay = function autoplay() {
+  var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+  var options = arguments.length > 1 ? arguments[1] : undefined;
+  return function (slider) {
+    var dispose;
+    var start = function start() {
+      dispose = makeTimer(function () {
+        return slider.moveToIdx(slider.track.details.position + 1, true, options.animation);
+      }, interval, setInterval);
     };
     // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
-      slider.on('dragStarted', () => dispose?.());
+      slider.on("dragStarted", function () {
+        var _dispose;
+        return (_dispose = dispose) === null || _dispose === void 0 ? void 0 : _dispose();
+      });
     }
-    createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
+    createEffect(function () {
+      var _dispose2;
+      return !options.pause || options.pause() === false ? start() : (_dispose2 = dispose) === null || _dispose2 === void 0 ? void 0 : _dispose2();
+    });
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from '@solid-primitives/timer';\nimport { KeenSliderInstance } from 'keen-slider';\nimport { Accessor, createEffect } from 'solid-js';\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 */\nexport const 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"],"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;AACO,MAAMA,QAAQ,GAAG,CACtBC,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,MAAMH,MAAM,CAACI,SAAS,CAACJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAER,OAAO,CAACS,SAAS,CAAC,EAClFV,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,MAAO,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAK,CAAC,CAAA;GAC1F,CAAA;AACH;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\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 */\nexport const 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"],"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;AACaA,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAUhB;EAAA,IATHC,QAAgB,uEAAG,IAAI,CAAA;AAAA,EAAA,IACvBC,OAOC,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,SAAA,CAAA;EAED,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;AACrB,IAAA,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;MAClBD,OAAO,GAAGE,SAAS,CACjB,YAAA;AAAA,QAAA,OACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,CAAA;OACHV,EAAAA,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;AACjCV,MAAAA,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,YAAA;AAAA,QAAA,IAAA,QAAA,CAAA;QAAA,OAAMV,CAAAA,QAAAA,GAAAA,OAAO,6CAAP,QAAW,EAAA,CAAA;OAAC,CAAA,CAAA;AAC7C,KAAA;AACAW,IAAAA,YAAY,CAAC,YAAA;AAAA,MAAA,IAAA,SAAA,CAAA;AAAA,MAAA,OACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,CAAAA,SAAAA,GAAAA,OAAO,8CAAP,SAAW,EAAA,CAAA;KACpE,CAAA,CAAA;GACF,CAAA;AACH;;;;"}

package/dist/index/components.d.ts

@@ -6,12 +6,12 @@ interface Func<T> {
 export declare function returnType<T>(func: Func<T>): T;
 export declare const SliderContext: import("solid-js").Context<import("solid-js").Signal<{
     current: import("solid-js").Accessor<number>;
-    next: import("solid-js").Accessor<void>;
-    prev: import("solid-js").Accessor<void>;
+    next: VoidFunction;
+    prev: VoidFunction;
     moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) => number) => void;
-    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>;
+    details: () => import("keen-slider").TrackDetails;
+    slider: () => import("keen-slider").KeenSliderInstance<{}, {}, import("keen-slider").KeenSliderHooks>;
+    destroy: VoidFunction;
     update: VoidFunction;
 }>>;
 /**