solid-slider 1.1.1 → 1.2.5

package/README.md

@@ -20,15 +20,31 @@ import "solid-slider/dist/slider.css";
 import createSlider from "solid-slider";
 ```
 
-## Implementation
+## Demo
 
-Solid Slider is meant to be a lightweight and compact wrapper of KeenSlider. 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.
+You can find a functional demo of the slider with most features implemented here: https://codesandbox.io/s/solid-slider-j0x2g
 
-Thie library exports it's own CSS which is the basic KeenSlider implementation for convenience. If you supply options as an accessor function, the slider will reactively update the configuration so that you don't have to destroy and recreate the slider. As of KeenSlider 6 plugins are now fully supported. You may supply them as a param in createSlider. Note that plugins are not reactively updated and must be supplied on creation.
+## Plugins
 
-## Demo
+Plugins may be added directly via the createSlider primitive. You may add a KeenSlider plugin directly or built-in plugins shipped with this package. Currently an autoplay plugin is available that will assist with autoplaying actions in the slider. Simply add the plugins after the options parameter.
 
-You can find a functional demo of the slider with most features implemented here: https://codesandbox.io/s/solid-slider-j0x2g
+### 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
+  })
+);
+```
 
 ## Example
 
@@ -68,11 +84,18 @@ const MyComponent = () => {
 };
 ```
 
+## Implementation
+
+Solid Slider is meant to be a lightweight and compact wrapper of KeenSlider. 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.
+
+Thie library exports it's own CSS which is the basic KeenSlider implementation for convenience. If you supply options as an accessor function, the slider will reactively update the configuration so that you don't have to destroy and recreate the slider. As of KeenSlider 6 plugins are now fully supported. You may supply them as a param in createSlider. Note that plugins are not reactively updated and must be supplied on creation.
+
 ## Changelog
 
 - 1.0.0 - Initial release
 - 1.0.3 - Changed the exported API to be slightly more flexible.
 - 1.1.1 - Upgraded to KeenSlider 6 and improved general reactivity.
+- 1.2.5 - Added autoplay plugin and general plugin structure
 
 ## Keen Options API
 

package/dist/index.d.ts

@@ -28,7 +28,7 @@ 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>[] | undefined) => [create: (el: HTMLElement) => void, helpers: {
+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: {
     current: Accessor<number>;
     next: Accessor<void>;
     prev: Accessor<void>;

package/dist/index.js

@@ -21,7 +21,7 @@ import KeenSlider from "keen-slider";
  * <div use:slider>...</div>
  * ```
  */
-const createSlider = (options, plugins) => {
+const createSlider = (options, ...plugins) => {
     let slider;
     const [current, setCurrent] = createSignal(0);
     const destroy = () => slider && slider.destroy();
@@ -31,16 +31,15 @@ const createSlider = (options, plugins) => {
         // @ts-ignore
         const opts = () => ({
             selector: el.childNodes,
-            ...(typeof options == 'function' ? options() : options)
+            ...(typeof options == "function" ? options() : options)
         });
         onMount(() => {
             slider = new KeenSlider(el, opts(), plugins);
             slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
         });
         onCleanup(destroy);
-        // Only watch the options of an accessor is provided
-        if (typeof options === 'function') {
-            createEffect(on(() => options(), () => slider && slider.update(opts())));
+        if (typeof options === "function") {
+            createEffect(on(() => options, () => slider && slider.update(opts())));
         }
     };
     return [

package/dist/plugins/autoplay.d.ts

@@ -0,0 +1,28 @@
+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;

package/dist/plugins/autoplay.js

@@ -0,0 +1,33 @@
+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()));
+    };
+};
+export default autoplay;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-slider",
-  "version": "1.1.1",
-  "description": "A slider/carousel component for Solid powered by KeenSlider.",
+  "version": "1.2.5",
+  "description": "A slider utility for SolidJS.",
   "author": "David Di Biase",
   "license": "ISC",
   "bugs": {
@@ -16,6 +16,10 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./plugins/autoplay": "./dist/plugins/autoplay.js"
+  },
   "types": "dist/index.d.ts",
   "sideEffects": "false",
   "files": [
@@ -38,12 +42,13 @@
     "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"
   },
   "devDependencies": {
-    "prettier": "^2.4.1"
+    "prettier": "^2.5.1"
   }
 }