solid-slider 1.2.9 → 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,9 +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/index.d.ts

@@ -1,4 +1,6 @@
-import { Accessor } from 'solid-js';
+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" {
@@ -39,4 +41,52 @@ declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>
     destroy: Accessor<void>;
 }];
 
-export { createSlider as default };
+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

@@ -36,9 +36,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  default: () => src_default
+  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) => {
@@ -52,8 +59,8 @@ var createSlider = (options, ...plugins) => {
     }, 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));
+      setCurrent(slider.track.details.rel);
     });
     (0, import_solid_js.onCleanup)(destroy);
     if (typeof options === "function") {
@@ -73,6 +80,79 @@ var createSlider = (options, ...plugins) => {
     }
   ];
 };
-var src_default = createSlider;
+
+// 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 = {});
+0 && (module.exports = {
+  Slider,
+  SliderButton,
+  SliderContext,
+  SliderProvider,
+  createSlider,
+  returnType
+});

package/dist/index.mjs

@@ -2,7 +2,7 @@ import {
   __spreadValues
 } from "./chunk-NXJS66U5.mjs";
 
-// src/index.ts
+// src/primitive.ts
 import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
 import KeenSlider from "keen-slider";
 var createSlider = (options, ...plugins) => {
@@ -16,8 +16,8 @@ var createSlider = (options, ...plugins) => {
     }, 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));
+      setCurrent(slider.track.details.rel);
     });
     onCleanup(destroy);
     if (typeof options === "function") {
@@ -37,7 +37,78 @@ var createSlider = (options, ...plugins) => {
     }
   ];
 };
-var src_default = createSlider;
+
+// 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 {
-  src_default as default
+  Slider,
+  SliderButton,
+  SliderContext,
+  SliderProvider,
+  createSlider,
+  returnType
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-slider",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "A slider utility for SolidJS.",
   "author": "David Di Biase",
   "repository": {
@@ -41,7 +41,9 @@
     "plugin"
   ],
   "dependencies": {
+    "@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"
   },