solid-slider 1.0.2 → 1.1.1

package/README.md

@@ -1,6 +1,10 @@
-# <img width="27px" src="https://github.com/solidjs/solid-site/raw/master/src/assets/logo.png" alt="Solid logo"> &nbsp;Solid Slider
+# Solid Slider
 
-A carousel/slider implementation in TypeScript for Solid using KeenSlider. keen-slider is a free 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.
+[![size](https://img.shields.io/bundlephobia/minzip/solid-slider?style=for-the-badge)](https://bundlephobia.com/package/solid-slider)
+[![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 KeenSlider 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.
 
 ## Installation
 
@@ -16,6 +20,12 @@ import "solid-slider/dist/slider.css";
 import createSlider from "solid-slider";
 ```
 
+## 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.
+
 ## Demo
 
 You can find a functional demo of the slider with most features implemented here: https://codesandbox.io/s/solid-slider-j0x2g
@@ -27,7 +37,7 @@ The following is an example of how to create and then bind options using a direc
 ```ts
 const MyComponent = () => {
   const options = { duration: 1000 };
-  const { slider, current, next, prev, moveTo } = createSlider(options);
+  const [slider, { current, next, prev, moveTo }] = createSlider(options);
   return (
     <div use:slider>
       <div>Slide 1</div>
@@ -44,7 +54,7 @@ or without a directive:
 const MyComponent = () => {
   let ref: HTMLElement;
   const options = { duration: 1000 };
-  const { slider, current, next, prev, moveTo } = createSlider(options);
+  const [slider, { current, next, prev, moveTo }] = createSlider(options);
   onMount(() => {
     slider(ref);
   });
@@ -61,7 +71,8 @@ const MyComponent = () => {
 ## Changelog
 
 - 1.0.0 - Initial release
-- 1.0.2 - Changed the exported API to use an object rather than an array.
+- 1.0.3 - Changed the exported API to be slightly more flexible.
+- 1.1.1 - Upgraded to KeenSlider 6 and improved general reactivity.
 
 ## Keen Options API
 

package/dist/index.d.ts

@@ -1,43 +1,40 @@
-import { TOptionsEvents, TDetails } from "keen-slider";
-export declare type SliderOptions = TOptionsEvents;
-export declare type SliderDetails = TDetails;
+import { Accessor } from "solid-js";
+import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
 declare module "solid-js" {
     namespace JSX {
-        interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-            ["use:slider"]?: {};
+        interface Directives {
+            slider: {};
         }
     }
 }
 /**
  * Creates a slider powered by KeenSlider.
  *
- * @param {options} Options to initialize the slider with
- * @returns {Array} An array of useful utilities
- * @returns [create] Register and creation function to call on setup
- * @returns [current] Current slide number
- * @returns [next] Function to trigger the next slide
- * @returns [prev] Function to trigger the previous slide
- * @returns [moveTo] Allow you to change the slider to a specific slide
- * @returns [refresh] Refresh trigger
- * @returns [details] Retrieve a list of SliderDetails
- * @returns [slider] Gain access to the slider itself
- * @returns [destroy] Destroy the entire slider (this is automatically handled)
+ * @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] = createSlider();
+ * const [create, { prev, next }] = createSlider();
  * <div use:slider>...</div>
  * ```
  */
-declare const createSlider: (options?: SliderOptions) => {
-    slider: (el: HTMLElement) => void;
-    current: () => number;
-    next: () => void;
-    prev: () => void;
-    moveTo: (id: number, duration?: number | undefined) => void;
-    resize: () => void;
-    refresh: () => void;
-    details: () => SliderDetails;
-    destroy: () => void;
-};
+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: {
+    current: Accessor<number>;
+    next: Accessor<void>;
+    prev: Accessor<void>;
+    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
+    details: Accessor<TrackDetails>;
+    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
+    destroy: Accessor<void>;
+}];
 export default createSlider;

package/dist/index.js

@@ -1,52 +1,59 @@
-import { onMount, onCleanup, createSignal } from "solid-js";
+import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
 import KeenSlider from "keen-slider";
 /**
  * Creates a slider powered by KeenSlider.
  *
- * @param {options} Options to initialize the slider with
- * @returns {Array} An array of useful utilities
- * @returns [create] Register and creation function to call on setup
- * @returns [current] Current slide number
- * @returns [next] Function to trigger the next slide
- * @returns [prev] Function to trigger the previous slide
- * @returns [moveTo] Allow you to change the slider to a specific slide
- * @returns [refresh] Refresh trigger
- * @returns [details] Retrieve a list of SliderDetails
- * @returns [slider] Gain access to the slider itself
- * @returns [destroy] Destroy the entire slider (this is automatically handled)
+ * @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] = createSlider();
+ * const [create, { prev, next }] = createSlider();
  * <div use:slider>...</div>
  * ```
  */
-const createSlider = (options = {}) => {
+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) => {
-        let opts = { ...options };
+        el.classList.add("keen-slider");
         // @ts-ignore
-        opts.slides = el.childNodes;
-        opts.slideChanged = (instance) => {
-            options.slideChanged && options.slideChanged(instance);
-            setCurrent(instance.details().relativeSlide);
-        };
-        el.classList.add('keen-slider');
-        onMount(() => slider = new KeenSlider(el, opts));
+        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);
+        // Only watch the options of an accessor is provided
+        if (typeof options === 'function') {
+            createEffect(on(() => options(), () => slider && slider.update(opts())));
+        }
     };
-    return {
-        slider: create,
-        current,
-        next: () => slider.next(),
-        prev: () => slider.prev(),
-        moveTo: (id, duration = 250) => slider.moveToSlide(id, duration),
-        resize: () => slider.resize(),
-        refresh: () => slider.refresh(),
-        details: () => slider.details(),
-        destroy
-    };
+    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
+        }
+    ];
 };
 export default createSlider;

package/dist/slider.css

@@ -1,4 +1,5 @@
-.keen-slider {
+.keen-slider:not([data-keen-slider-disabled]) {
+  align-content: flex-start;
   display: flex;
   overflow: hidden;
   position: relative;
@@ -10,19 +11,20 @@
   -khtml-user-select: none;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
+  width: 100%;
 }
-.keen-slider__slide {
+.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
   position: relative;
   overflow: hidden;
   width: 100%;
   min-height: 100%;
 }
-.keen-slider[data-keen-slider-v] {
-  flex-wrap: wrap;
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
+  flex-direction: row-reverse;
 }
-.keen-slider[data-keen-slider-v] .keen-slider__slide {
-  width: 100%;
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
+  flex-wrap: wrap;
 }
-.keen-slider[data-keen-slider-moves] * {
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-slider",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "A slider/carousel component for Solid powered by KeenSlider.",
   "author": "David Di Biase",
   "license": "ISC",
@@ -27,7 +27,7 @@
   },
   "keywords": [
     "slider",
-    "carouse",
+    "carousel",
     "solid",
     "keen",
     "slider",
@@ -37,10 +37,13 @@
     "gallery",
     "plugin"
   ],
-  "peerDependencies": {
-    "solid-js": "^1.0.7"
-  },
   "dependencies": {
-    "keen-slider": "^5.5.1"
+    "keen-slider": "^6.6.3",
+    "rimraf": "^3.0.2",
+    "solid-js": "^1.3.5",
+    "typescript": "^4.5.5"
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1"
   }
 }