solid-slider 1.2.6 → 1.2.9

package/README.md

@@ -4,7 +4,7 @@
 [![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.
+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.
 
 ## Installation
 
@@ -16,7 +16,7 @@ yarn add solid-slider ## or in yarn
 Add as a module:
 
 ```ts
-import "solid-slider/dist/slider.css";
+import "solid-slider/slider.css";
 import createSlider from "solid-slider";
 ```
 
@@ -26,7 +26,11 @@ You can find a functional demo of the slider with most features implemented here
 
 ## Plugins
 
-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.
+Plugins may be added directly via the createSlider primitive. You may add a Keen-Slider 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. Please feel free to post requests for additional plugins or submit PRs if you decide to improve the base functionality. Some ideas for additional plugins include:
+
+- Slider nav (dot, arrow controls even thumbnails)
+- Lazy loaded images
+- Slide transitions
 
 ### Autoplay
 
@@ -86,17 +90,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.
+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.
 
-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.
+Thie library exports it's own CSS which is the basic Keen-Slider 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 Keen-Slider 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.1.1 - Upgraded to Keen-Slider 6 and improved general reactivity.
 - 1.2.5 - Added autoplay plugin and general plugin structure
-- 1.2.6 - Maybe I should actually export the .css? That'd be a good idea, right?
+- 1.2.7 - Maybe I should actually export the .css? That'd be a good idea, right?
+- 1.2.9 - Updated timer primitive and patched issue with current slide setting from initial options.
 
 ## 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,6 @@
-import { Accessor } from "solid-js";
-import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
+import { Accessor } from 'solid-js';
+import { KeenSliderHooks, KeenSliderOptions, KeenSliderPlugin, TrackDetails, KeenSliderInstance } from 'keen-slider';
+
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
@@ -37,4 +38,5 @@ declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>
     slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
     destroy: Accessor<void>;
 }];
-export default createSlider;
+
+export { createSlider as default };

package/dist/index.js

@@ -1,58 +1,78 @@
-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, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+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);
+      setCurrent(slider.track.details.rel);
+      slider.on("slideChanged", () => 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
+    }
+  ];
+};
+var src_default = createSlider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/index.mjs

@@ -0,0 +1,43 @@
+import {
+  __spreadValues
+} from "./chunk-NXJS66U5.mjs";
+
+// src/index.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);
+      setCurrent(slider.track.details.rel);
+      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 == null ? void 0 : slider.moveToIdx(id, absolute, { duration, easing }),
+      destroy
+    }
+  ];
+};
+var src_default = createSlider;
+export {
+  src_default as default
+};

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.6",
+  "version": "1.2.9",
   "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,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"
+    "@solid-primitives/timer": "1.3.0",
+    "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;