solid-slider 1.2.7 → 1.3.0

package/README.md

@@ -6,6 +6,8 @@
 
 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.
 
+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
@@ -13,11 +15,11 @@ npm install solid-slider --save
 yarn add solid-slider ## or in yarn
 ```
 
-Add as a module:
+Import either the directive or component as you'd like:
 
 ```ts
 import "solid-slider/slider.css";
-import createSlider from "solid-slider";
+import { Slider, createSlider } from "solid-slider";
 ```
 
 ## Demo
@@ -32,29 +34,69 @@ Plugins may be added directly via the createSlider primitive. You may add a Keen
 - Lazy loaded images
 - Slide transitions
 
-### Autoplay
+Details on applying plugins are available for each use below.
 
-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.
+## Use as Component
 
-```ts
+The following is an example of how to use the component.
+
+```tsx
+const MyComponent = () => {
+  return (
+    <Slider options={{ loop: true }}>
+      <div>Slide 1</div>
+      <div>Slide 2</div>
+      <div>Slide 3</div>
+    </Slider>
+  );
+};
+```
+
+You may also use the next and previous button. Note that you must wrap your `Slider` with `SliderProvider`.
+
+```tsx
+const MyComponent = () => {
+  return (
+    <SliderProvider>
+      <Slider options={{ loop: true }}>
+        <div>Slide 1</div>
+        <div>Slide 2</div>
+        <div>Slide 3</div>
+      </Slider>
+      <SliderButton prev>Previous</SliderButton>
+      <SliderButton next>Next</SliderButton>
+    <SliderProvider>
+  );
+};
+```
+
+### Autoplay Plugin
+
+You may include the autoplay plugin by providing it as a prop:
+
+```tsx
 import createSlider from "solid-slider";
 import autoplay from "solid-slider/plugins/autoplay";
 
-const [pause, togglePause] = createSignal(false);
-const [slider] = createSlider(
-  { loop: true },
-  autoplay(2000, {
-    pause,
-    pauseOnDrag: true
-  })
-);
+const MyComponent = () => {
+  return (
+    <Slider options={{ loop: true }} plugins={[autoplay(1500, {})]}>
+      <div class="slide1">1</div>
+      <div class="slide2">2</div>
+      <div class="slide3">3</div>
+      <div class="slide4">4</div>
+      <div class="slide5">5</div>
+      <div class="slide6">6</div>
+    </Slider>
+  );
+};
 ```
 
-## Example
+## Use as Primitive
 
 The following is an example of how to create and then bind options using a directive.
 
-```ts
+```tsx
 const MyComponent = () => {
   const options = { duration: 1000 };
   const [slider, { current, next, prev, moveTo }] = createSlider(options);
@@ -70,7 +112,7 @@ const MyComponent = () => {
 
 or without a directive:
 
-```ts
+```tsx
 const MyComponent = () => {
   let ref: HTMLElement;
   const options = { duration: 1000 };
@@ -88,6 +130,24 @@ const MyComponent = () => {
 };
 ```
 
+### 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";
+
+const [pause, togglePause] = createSignal(false);
+const [slider] = createSlider(
+  { loop: true },
+  autoplay(2000, {
+    pause,
+    pauseOnDrag: true
+  })
+);
+```
+
 ## 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.
@@ -99,8 +159,10 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.0.0 - Initial release
 - 1.0.3 - Changed the exported API to be slightly more flexible.
 - 1.1.1 - Upgraded to Keen-Slider 6 and improved general reactivity.
-- 1.2.5 - Added autoplay plugin and general plugin structure
-- 1.2.7 - Maybe I should actually export the .css? That'd be a good idea, right?
+- 1.2.5 - Added autoplay plugin and general plugin structure.
+- 1.2.7 - Maybe I should actually export the .css? That'd be a good idea, right? /s
+- 1.2.9 - Updated timer primitive and patched issue with current slide setting from initial options.
+- 1.3.0 - Introduced Slider, SliderProvider and SliderButton for ease.
 
 ## Keen Options API
 

package/dist/chunk-NXJS66U5.mjs

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+export {
+  __spreadValues
+};

package/dist/index.d.ts

@@ -1,5 +1,8 @@
-import { Accessor } from "solid-js";
-import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
+import * as solid_js from 'solid-js';
+import { Accessor, Component } from 'solid-js';
+import * as keen_slider from 'keen-slider';
+import { KeenSliderHooks, KeenSliderOptions, KeenSliderPlugin, TrackDetails, KeenSliderInstance } from 'keen-slider';
+
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
@@ -37,4 +40,53 @@ declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>
     slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
     destroy: Accessor<void>;
 }];
-export default createSlider;
+
+interface Func<T> {
+    ([...args]: any, args2?: any): T;
+}
+declare function returnType<T>(func: Func<T>): T;
+declare const SliderContext: solid_js.Context<solid_js.Signal<{
+    current: solid_js.Accessor<number>;
+    next: solid_js.Accessor<void>;
+    prev: solid_js.Accessor<void>;
+    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
+    details: solid_js.Accessor<keen_slider.TrackDetails>;
+    slider: solid_js.Accessor<keen_slider.KeenSliderInstance<{}, {}, keen_slider.KeenSliderHooks> | undefined>;
+    destroy: solid_js.Accessor<void>;
+} | 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.
+ */
+declare const SliderProvider: Component;
+/**
+ * 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.
+ */
+declare const Slider: Component<{
+    options?: KeenSliderOptions;
+    plugins?: KeenSliderPlugin[];
+}>;
+/**
+ * Provides a helpful button with next/prev to pair with your slider.
+ *
+ * @param props {boolean} next - Specify if this should be a next button.
+ * @param props {boolean} prev - Specify if this should be a prev button.
+ * @param props {string} class - Class to override the button.
+ * @param props {object} classList - List of classes to override the button.
+ */
+declare const SliderButton: Component<{
+    next?: boolean;
+    prev?: boolean;
+    disabled?: boolean;
+    class?: string;
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
+}>;
+
+export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };

package/dist/index.js

@@ -1,58 +1,158 @@
-import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
-import KeenSlider from "keen-slider";
-/**
- * Creates a slider powered by KeenSlider.
- *
- * @param {Object} options Values to initialize the slider with
- * @param {Array} plugins Extensions that enhance KeenSlider options
- * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
- * @returns {Function} create Mounts the slider on provided element
- * @returns {Function} helpers.current Current slide number
- * @returns {Function} helpers.current Current slide number
- * @returns {Function} helpers.next Function to trigger the next slide
- * @returns {Function} helpers.prev Function to trigger the previous slide
- * @returns {Function<Object>} helpers.details Provides details about the current slider
- * @returns {Function} helpers.slider Returns the KeenSlider instance
- * @returns {Function} helpers.destroy Manual destroy function
- *
- * @example
- * ```ts
- * const [create, { prev, next }] = createSlider();
- * <div use:slider>...</div>
- * ```
- */
-const createSlider = (options, ...plugins) => {
-    let slider;
-    const [current, setCurrent] = createSignal(0);
-    const destroy = () => slider && slider.destroy();
-    // Slider creation method and directive function
-    const create = (el) => {
-        el.classList.add("keen-slider");
-        // @ts-ignore
-        const opts = () => ({
-            selector: el.childNodes,
-            ...(typeof options == "function" ? options() : options)
-        });
-        onMount(() => {
-            slider = new KeenSlider(el, opts(), plugins);
-            slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
-        });
-        onCleanup(destroy);
-        if (typeof options === "function") {
-            createEffect(on(() => options, () => slider && slider.update(opts())));
-        }
-    };
-    return [
-        create,
-        {
-            current,
-            next: () => slider && slider.next(),
-            prev: () => slider && slider.prev(),
-            details: () => (slider ? slider.track.details : {}),
-            slider: () => slider,
-            moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),
-            destroy
-        }
-    ];
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
-export default createSlider;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Slider: () => Slider,
+  SliderButton: () => SliderButton,
+  SliderContext: () => SliderContext,
+  SliderProvider: () => SliderProvider,
+  createSlider: () => createSlider,
+  returnType: () => returnType
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/primitive.ts
+var import_solid_js = require("solid-js");
+var import_keen_slider = __toESM(require("keen-slider"));
+var createSlider = (options, ...plugins) => {
+  let slider;
+  const [current, setCurrent] = (0, import_solid_js.createSignal)(0);
+  const destroy = () => slider && slider.destroy();
+  const create = (el) => {
+    el.classList.add("keen-slider");
+    const opts = () => __spreadValues({
+      selector: el.childNodes
+    }, typeof options == "function" ? options() : options);
+    (0, import_solid_js.onMount)(() => {
+      slider = new import_keen_slider.default(el, opts(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+      setCurrent(slider.track.details.rel);
+    });
+    (0, import_solid_js.onCleanup)(destroy);
+    if (typeof options === "function") {
+      (0, import_solid_js.createEffect)((0, import_solid_js.on)(() => options, () => slider && slider.update(opts())));
+    }
+  };
+  return [
+    create,
+    {
+      current,
+      next: () => slider && slider.next(),
+      prev: () => slider && slider.prev(),
+      details: () => slider ? slider.track.details : {},
+      slider: () => slider,
+      moveTo: (id, duration = 250, absolute = false, easing) => slider == null ? void 0 : slider.moveToIdx(id, absolute, { duration, easing }),
+      destroy
+    }
+  ];
+};
+
+// src/components.tsx
+var import_web = require("solid-js/web");
+var import_web2 = require("solid-js/web");
+var import_web3 = require("solid-js/web");
+var import_web4 = require("solid-js/web");
+var import_web5 = require("solid-js/web");
+var import_web6 = require("solid-js/web");
+var import_solid_js2 = require("solid-js");
+var import_web7 = require("solid-js/web");
+var _tmpl$ = /* @__PURE__ */ (0, import_web.template)(`<div></div>`, 2);
+var _tmpl$2 = /* @__PURE__ */ (0, import_web.template)(`<button></button>`, 2);
+function returnType(func) {
+  return {};
+}
+var sliderValues = returnType(createSlider);
+var SliderContext = (0, import_solid_js2.createContext)((0, import_solid_js2.createSignal)(null));
+var SliderProvider = (props) => (0, import_web6.createComponent)(SliderContext.Provider, {
+  get value() {
+    return (0, import_solid_js2.createSignal)(null);
+  },
+  get children() {
+    return props.children;
+  }
+});
+var Slider = (props) => {
+  if (import_web7.isServer)
+    return props.children;
+  const [, setHelpers] = (0, import_solid_js2.useContext)(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...props.plugins || []);
+  setHelpers(helpers);
+  slider;
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+    slider(_el$, () => true);
+    (0, import_web5.insert)(_el$, () => props.children);
+    return _el$;
+  })();
+};
+var SliderButton = (props) => {
+  const context = (0, import_solid_js2.useContext)(SliderContext);
+  const changeSlide = () => {
+    var _a, _b;
+    if (context == null)
+      return;
+    const [helpers] = context;
+    props.next ? (_a = helpers()) == null ? void 0 : _a.next() : (_b = helpers()) == null ? void 0 : _b.prev();
+  };
+  return (() => {
+    const _el$2 = _tmpl$2.cloneNode(true);
+    _el$2.$$click = changeSlide;
+    (0, import_web5.insert)(_el$2, () => props.children);
+    (0, import_web4.effect)((_p$) => {
+      const _v$ = props.disabled || false, _v$2 = props.class, _v$3 = props.classList;
+      _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$2.className = _p$._v$2 = _v$2);
+      _p$._v$3 = (0, import_web3.classList)(_el$2, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$2;
+  })();
+};
+(0, import_web2.delegateEvents)(["click"]);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider,
+  SliderButton,
+  SliderContext,
+  SliderProvider,
+  createSlider,
+  returnType
+});

package/dist/index.mjs

@@ -0,0 +1,114 @@
+import {
+  __spreadValues
+} from "./chunk-NXJS66U5.mjs";
+
+// src/primitive.ts
+import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
+import KeenSlider from "keen-slider";
+var createSlider = (options, ...plugins) => {
+  let slider;
+  const [current, setCurrent] = createSignal(0);
+  const destroy = () => slider && slider.destroy();
+  const create = (el) => {
+    el.classList.add("keen-slider");
+    const opts = () => __spreadValues({
+      selector: el.childNodes
+    }, typeof options == "function" ? options() : options);
+    onMount(() => {
+      slider = new KeenSlider(el, opts(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+      setCurrent(slider.track.details.rel);
+    });
+    onCleanup(destroy);
+    if (typeof options === "function") {
+      createEffect(on(() => options, () => slider && slider.update(opts())));
+    }
+  };
+  return [
+    create,
+    {
+      current,
+      next: () => slider && slider.next(),
+      prev: () => slider && slider.prev(),
+      details: () => slider ? slider.track.details : {},
+      slider: () => slider,
+      moveTo: (id, duration = 250, absolute = false, easing) => slider == null ? void 0 : slider.moveToIdx(id, absolute, { duration, easing }),
+      destroy
+    }
+  ];
+};
+
+// src/components.tsx
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { classList as _$classList } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { createContext, useContext, createSignal as createSignal2 } from "solid-js";
+import { isServer } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div></div>`, 2);
+var _tmpl$2 = /* @__PURE__ */ _$template(`<button></button>`, 2);
+function returnType(func) {
+  return {};
+}
+var sliderValues = returnType(createSlider);
+var SliderContext = createContext(createSignal2(null));
+var SliderProvider = (props) => _$createComponent(SliderContext.Provider, {
+  get value() {
+    return createSignal2(null);
+  },
+  get children() {
+    return props.children;
+  }
+});
+var Slider = (props) => {
+  if (isServer)
+    return props.children;
+  const [, setHelpers] = useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...props.plugins || []);
+  setHelpers(helpers);
+  slider;
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+    slider(_el$, () => true);
+    _$insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+var SliderButton = (props) => {
+  const context = useContext(SliderContext);
+  const changeSlide = () => {
+    var _a, _b;
+    if (context == null)
+      return;
+    const [helpers] = context;
+    props.next ? (_a = helpers()) == null ? void 0 : _a.next() : (_b = helpers()) == null ? void 0 : _b.prev();
+  };
+  return (() => {
+    const _el$2 = _tmpl$2.cloneNode(true);
+    _el$2.$$click = changeSlide;
+    _$insert(_el$2, () => props.children);
+    _$effect((_p$) => {
+      const _v$ = props.disabled || false, _v$2 = props.class, _v$3 = props.classList;
+      _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$2.className = _p$._v$2 = _v$2);
+      _p$._v$3 = _$classList(_el$2, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$2;
+  })();
+};
+_$delegateEvents(["click"]);
+export {
+  Slider,
+  SliderButton,
+  SliderContext,
+  SliderProvider,
+  createSlider,
+  returnType
+};

package/dist/plugins/autoplay.js

@@ -1,33 +1,41 @@
-import { createEffect } from "solid-js";
-import createTimer, { Schedule } from "@solid-primitives/timer";
-/**
- * Provides an autoplay plugin.
- *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
- *
- * @example
- * ```ts
- * const [create, { prev, next }] = createSlider();
- * <div use:slider>...</div>
- * ```
- */
-const autoplay = (interval = 1000, options) => {
-    return (slider) => {
-        let clear;
-        const start = () => {
-            clear = createTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, Schedule.Interval);
-        };
-        // Pause the slider on drag
-        if (options.pauseOnDrag || true) {
-            slider.on("dragStarted", () => clear());
-        }
-        createEffect(() => (!options.pause || options.pause() === false ? start() : clear()));
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/autoplay.ts
+var autoplay_exports = {};
+__export(autoplay_exports, {
+  default: () => autoplay_default
+});
+module.exports = __toCommonJS(autoplay_exports);
+var import_solid_js = require("solid-js");
+var import_timer = require("@solid-primitives/timer");
+var autoplay = (interval = 1e3, options) => {
+  return (slider) => {
+    let dispose;
+    const start = () => {
+      dispose = (0, import_timer.makeTimer)(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
     };
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+    (0, import_solid_js.createEffect)(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
 };
-export default autoplay;
+var autoplay_default = autoplay;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/plugins/autoplay.mjs

@@ -0,0 +1,21 @@
+import "../chunk-NXJS66U5.mjs";
+
+// src/plugins/autoplay.ts
+import { createEffect } from "solid-js";
+import { makeTimer } from "@solid-primitives/timer";
+var autoplay = (interval = 1e3, options) => {
+  return (slider) => {
+    let dispose;
+    const start = () => {
+      dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+    };
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+    createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
+};
+var autoplay_default = autoplay;
+export {
+  autoplay_default as default
+};

package/package.json

@@ -1,35 +1,33 @@
 {
   "name": "solid-slider",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "A slider utility for SolidJS.",
   "author": "David Di Biase",
+  "repository": {
+    "type": "git",
+    "url": "git+https://davedbase@github.com/davedbase/solid-slider.git"
+  },
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/davedbase/solid-slider/issues"
   },
   "homepage": "https://github.com/davedbase/solid-slider#readme",
   "scripts": {
-    "prebuild": "npm run clean",
-    "clean": "rimraf dist/",
     "format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\"",
-    "build": "tsc && cp src/slider.css dist/slider.css"
+    "build": "tsup && cp src/slider.css dist/slider.css"
   },
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/index.mjs",
   "exports": {
     ".": "./dist/index.js",
     "./plugins/autoplay": "./dist/plugins/autoplay.js",
     "./slider.css": "./dist/slider.css"
   },
   "types": "dist/index.d.ts",
-  "sideEffects": "false",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://davedbase@github.com/davedbase/solid-slider.git"
-  },
   "keywords": [
     "slider",
     "carousel",
@@ -43,13 +41,15 @@
     "plugin"
   ],
   "dependencies": {
-    "@solid-primitives/timer": "^1.1.0",
-    "keen-slider": "^6.6.3",
-    "rimraf": "^3.0.2",
-    "solid-js": "^1.3.5",
-    "typescript": "^4.5.5"
+    "@solid-primitives/context": "^0.1.0",
+    "@solid-primitives/timer": "1.3.0",
+    "esbuild-plugin-solid": "^0.4.2",
+    "keen-slider": "^6.6.10",
+    "solid-js": "^1.3.16"
   },
   "devDependencies": {
-    "prettier": "^2.5.1"
+    "prettier": "^2.5.1",
+    "tsup": "^5.12.6",
+    "typescript": "^4.5.5"
   }
 }

package/dist/plugins/autoplay.d.ts

@@ -1,28 +0,0 @@
-import { Accessor } from "solid-js";
-import { KeenSliderInstance } from "keen-slider";
-/**
- * Provides an autoplay plugin.
- *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
- *
- * @example
- * ```ts
- * const [create, { prev, next }] = createSlider();
- * <div use:slider>...</div>
- * ```
- */
-declare const autoplay: (interval: number | undefined, options: {
-    pause?: Accessor<boolean> | undefined;
-    pauseOnDrag?: boolean | undefined;
-    animation?: {
-        duration?: number | undefined;
-        easing?: ((t: number) => number) | undefined;
-    } | undefined;
-}) => (slider: KeenSliderInstance) => void;
-export default autoplay;