solid-slider 1.2.7 → 1.3.0-RC2

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/{plugins → autoplay}/autoplay.d.ts

@@ -17,12 +17,12 @@ import { KeenSliderInstance } from "keen-slider";
  * <div use:slider>...</div>
  * ```
  */
-declare const autoplay: (interval: number | undefined, options: {
-    pause?: Accessor<boolean> | undefined;
-    pauseOnDrag?: boolean | undefined;
+declare const autoplay: (interval: number, options: {
+    pause?: Accessor<boolean>;
+    pauseOnDrag?: boolean;
     animation?: {
-        duration?: number | undefined;
-        easing?: ((t: number) => number) | undefined;
-    } | undefined;
+        duration?: number;
+        easing?: (t: number) => number;
+    };
 }) => (slider: KeenSliderInstance) => void;
 export default autoplay;

package/dist/{plugins → autoplay}/autoplay.js

@@ -1,5 +1,5 @@
 import { createEffect } from "solid-js";
-import createTimer, { Schedule } from "@solid-primitives/timer";
+import { makeTimer } from "@solid-primitives/timer";
 /**
  * Provides an autoplay plugin.
  *
@@ -19,15 +19,15 @@ import createTimer, { Schedule } from "@solid-primitives/timer";
  */
 const autoplay = (interval = 1000, options) => {
     return (slider) => {
-        let clear;
+        let dispose;
         const start = () => {
-            clear = createTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, Schedule.Interval);
+            dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
         };
         // Pause the slider on drag
         if (options.pauseOnDrag || true) {
-            slider.on("dragStarted", () => clear());
+            slider.on("dragStarted", () => dispose());
         }
-        createEffect(() => (!options.pause || options.pause() === false ? start() : clear()));
+        createEffect(() => (!options.pause || options.pause() === false ? start() : dispose()));
     };
 };
 export default autoplay;

package/dist/autoplay/index.common.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var timer = require('@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 dispose;
+
+    const start = () => {
+      dispose = timer.makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+    }; // Pause the slider on drag
+
+
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+
+    solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
+};
+
+module.exports = autoplay;
+//# sourceMappingURL=index.common.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.ts"],"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, { prev, next }] = createSlider();\n * <div use:slider>...</div>\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 || true) {\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;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,IAAuB,IAA3B,EAAiC;AAC/BV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,EAAtC,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,EAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}

package/dist/autoplay/index.module.js

@@ -0,0 +1,39 @@
+import { createEffect } from 'solid-js';
+import { makeTimer } 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 dispose;
+
+    const start = () => {
+      dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+    }; // Pause the slider on drag
+
+
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+
+    createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
+};
+
+export { autoplay as default };
+//# sourceMappingURL=index.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.ts"],"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, { prev, next }] = createSlider();\n * <div use:slider>...</div>\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 || true) {\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;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,IAAuB,IAA3B,EAAiC;AAC/BV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,EAAtC,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,EAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}

package/dist/index/components.d.ts

@@ -0,0 +1,50 @@
+import { Component } from "solid-js";
+import { KeenSliderOptions, KeenSliderPlugin } from "keen-slider";
+interface Func<T> {
+    ([...args]: any, args2?: any): 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>;
+    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>;
+}>>;
+/**
+ * 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export declare const SliderButton: Component<{
+    next?: boolean;
+    prev?: boolean;
+    disabled?: boolean;
+    class?: string;
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
+}>;
+export {};

package/dist/index/components.jsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, createSignal } from "solid-js";
+import { createSlider } from "./primitive";
+import { isServer } from "solid-js/web";
+export function returnType(func) {
+    return {};
+}
+const sliderValues = returnType(createSlider);
+// Main context for the slider
+export 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.
+ */
+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 => {
+    if (isServer)
+        return props.children;
+    const [, setHelpers] = useContext(SliderContext);
+    const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+    setHelpers(helpers);
+    slider;
+    return <div use:slider>{props.children}</div>;
+};
+/**
+ * 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.
+ */
+export const SliderButton = props => {
+    const context = useContext(SliderContext);
+    const changeSlide = () => {
+        if (context == null)
+            return;
+        const [helpers] = context;
+        props.next ? helpers()?.next() : helpers()?.prev();
+    };
+    return (<button disabled={props.disabled || false} class={props.class} classList={props.classList} onClick={changeSlide}>
+      {props.children}
+    </button>);
+};

package/dist/index/index.common.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var solidJs = require('solid-js');
+var KeenSlider = require('keen-slider');
+var web = require('solid-js/web');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var KeenSlider__default = /*#__PURE__*/_interopDefaultLegacy(KeenSlider);
+
+/**
+ * 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] = solidJs.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)
+    });
+
+    solidJs.onMount(() => {
+      slider = new KeenSlider__default["default"](el, opts(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+      setCurrent(slider.track.details.rel);
+    });
+    solidJs.onCleanup(destroy);
+
+    if (typeof options === "function") {
+      solidJs.createEffect(solidJs.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) => {
+      var _slider;
+
+      return (_slider = slider) === null || _slider === void 0 ? void 0 : _slider.moveToIdx(id, absolute, {
+        duration,
+        easing: easing
+      });
+    },
+    destroy
+  }];
+};
+
+const _tmpl$ = /*#__PURE__*/web.template(`<div></div>`, 2),
+      _tmpl$2 = /*#__PURE__*/web.template(`<button></button>`, 2);
+
+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 props.children;
+  const [, setHelpers] = solidJs.useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+  setHelpers(helpers);
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    slider(_el$, () => true);
+
+    web.insert(_el$, () => props.children);
+
+    return _el$;
+  })();
+};
+/**
+ * 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.
+ */
+
+const SliderButton = props => {
+  const context = solidJs.useContext(SliderContext);
+
+  const changeSlide = () => {
+    var _helpers, _helpers2;
+
+    if (context == null) return;
+    const [helpers] = context;
+    props.next ? (_helpers = helpers()) === null || _helpers === void 0 ? void 0 : _helpers.next() : (_helpers2 = helpers()) === null || _helpers2 === void 0 ? void 0 : _helpers2.prev();
+  };
+
+  return (() => {
+    const _el$2 = _tmpl$2.cloneNode(true);
+
+    _el$2.$$click = changeSlide;
+
+    web.insert(_el$2, () => props.children);
+
+    web.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 = web.classList(_el$2, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$2;
+  })();
+};
+
+web.delegateEvents(["click"]);
+
+exports.Slider = Slider;
+exports.SliderButton = SliderButton;
+exports.SliderContext = SliderContext;
+exports.SliderProvider = SliderProvider;
+exports.createSlider = createSlider;
+exports.returnType = returnType;
+//# sourceMappingURL=index.common.js.map

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

@@ -0,0 +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 [current, setCurrent] = createSignal(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 opts: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(typeof options == \"function\" ? options() : options)\n    });\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, opts(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n      setCurrent(slider!.track.details.rel);\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(\n        on(\n          () => options,\n          () => slider && slider.update(opts())\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 { Component, createContext, useContext, createSignal, createMemo } 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: Component = 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: Component<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return props.children;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return <div use:slider>{props.children}</div>;\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: Component<{\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","current","setCurrent","createSignal","destroy","create","el","classList","add","opts","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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"}

package/dist/index/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./primitive";
+export * from "./components";

package/dist/index/index.js

@@ -0,0 +1,2 @@
+export * from "./primitive";
+export * from "./components";

package/dist/index/index.module.js

@@ -0,0 +1,167 @@
+import { createSignal, onMount, onCleanup, createEffect, on, createContext, useContext } from 'solid-js';
+import KeenSlider from 'keen-slider';
+import { createComponent, isServer, insert, effect, classList, delegateEvents, template } from 'solid-js/web';
+
+/**
+ * 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));
+      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) => {
+      var _slider;
+
+      return (_slider = slider) === null || _slider === void 0 ? void 0 : _slider.moveToIdx(id, absolute, {
+        duration,
+        easing: easing
+      });
+    },
+    destroy
+  }];
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
+      _tmpl$2 = /*#__PURE__*/template(`<button></button>`, 2);
+
+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 props.children;
+  const [, setHelpers] = useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+  setHelpers(helpers);
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    slider(_el$, () => true);
+
+    insert(_el$, () => props.children);
+
+    return _el$;
+  })();
+};
+/**
+ * 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.
+ */
+
+const SliderButton = props => {
+  const context = useContext(SliderContext);
+
+  const changeSlide = () => {
+    var _helpers, _helpers2;
+
+    if (context == null) return;
+    const [helpers] = context;
+    props.next ? (_helpers = helpers()) === null || _helpers === void 0 ? void 0 : _helpers.next() : (_helpers2 = helpers()) === null || _helpers2 === void 0 ? void 0 : _helpers2.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$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$2;
+  })();
+};
+
+delegateEvents(["click"]);
+
+export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };
+//# sourceMappingURL=index.module.js.map

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

@@ -0,0 +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 [current, setCurrent] = createSignal(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 opts: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(typeof options == \"function\" ? options() : options)\n    });\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, opts(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n      setCurrent(slider!.track.details.rel);\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(\n        on(\n          () => options,\n          () => slider && slider.update(opts())\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 { Component, createContext, useContext, createSignal, createMemo } 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: Component = 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: Component<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return props.children;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return <div use:slider>{props.children}</div>;\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: Component<{\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","current","setCurrent","createSignal","destroy","create","el","classList","add","opts","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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"}

package/dist/{index.d.ts → index/primitive.d.ts}

@@ -28,13 +28,12 @@ declare module "solid-js" {
  * <div use:slider>...</div>
  * ```
  */
-declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>(options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>> | undefined, ...plugins: KeenSliderPlugin<O, P, H>[]) => [create: (el: HTMLElement) => void, helpers: {
+export declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>(options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>, ...plugins: KeenSliderPlugin<O, P, H>[]) => [create: (el: HTMLElement) => void, helpers: {
     current: Accessor<number>;
     next: Accessor<void>;
     prev: Accessor<void>;
-    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
+    moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) => number) => void;
     details: Accessor<TrackDetails>;
-    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
+    slider: Accessor<KeenSliderInstance<O, P, H>>;
     destroy: Accessor<void>;
 }];
-export default createSlider;

package/dist/{index.js → index/primitive.js}

@@ -21,7 +21,7 @@ import KeenSlider from "keen-slider";
  * <div use:slider>...</div>
  * ```
  */
-const createSlider = (options, ...plugins) => {
+export const createSlider = (options, ...plugins) => {
     let slider;
     const [current, setCurrent] = createSignal(0);
     const destroy = () => slider && slider.destroy();
@@ -36,6 +36,7 @@ const createSlider = (options, ...plugins) => {
         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") {
@@ -55,4 +56,3 @@ const createSlider = (options, ...plugins) => {
         }
     ];
 };
-export default createSlider;

package/package.json

@@ -1,35 +1,44 @@
 {
   "name": "solid-slider",
-  "version": "1.2.7",
+  "version": "1.3.0-RC2",
   "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": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index/index.common.js",
+  "module": "dist/index/index.module.js",
+  "types": "dist/index/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
-    "./plugins/autoplay": "./dist/plugins/autoplay.js",
-    "./slider.css": "./dist/slider.css"
+    ".": {
+      "solid": "./dist/index/index.jsx",
+      "import": "./dist/index/index.module.js",
+      "browser": "./dist/index/index.module.js",
+      "require": "./dist/index/index.common.js",
+      "node": "./dist/index/index.common.js"
+    },
+    "./plugins/autoplay":  {
+      "solid": "./dist/autoplay/autoplay.jsx",
+      "import": "./dist/autoplay/index.module.js",
+      "browser": "./dist/autoplay/index.module.js",
+      "require": "./dist/autoplay/index.common.js",
+      "node": "./dist/autoplay/index.common.js"
+    }
   },
-  "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 +52,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/timer": "1.3.0",
+    "keen-slider": "^6.6.10",
+    "solid-js": "^1.3.16"
   },
   "devDependencies": {
-    "prettier": "^2.5.1"
+    "esbuild-plugin-solid": "^0.4.2",
+    "rollup": "^2.70.2",
+    "rollup-preset-solid": "^1.4.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.5"
   }
 }