keen-slider for Solid.js!

[amirhhashemi]

I just ported keen-slider/react to Solid in literary a couple of minutes. I started learning Solid just a few days ago so this implementation could be improved and may have bugs.

import { createEffect, onCleanup } from "solid-js";

import KeenSlider, {
  KeenSliderHooks,
  KeenSliderInstance,
  KeenSliderOptions,
  KeenSliderPlugin,
} from "keen-slider";

export * from "./keen-slider";

export function createKeenSlider<
  O = {},
  P = {},
  H extends string = KeenSliderHooks,
>(
  options?: KeenSliderOptions<O, P, H>,
  plugins?: KeenSliderPlugin<O, P, H>[],
): [(el: HTMLElement) => void, KeenSliderInstance<O, P, H> | null] {
  let slider: KeenSliderInstance<O, P, H> | null = null;

  const createSlider = (el: HTMLElement) => {
    slider = new KeenSlider<O, P, H>(el, options, plugins);

    onCleanup(() => {
      slider?.destroy();
      slider = null;
    });
  };

  createEffect(() => {
    slider?.update(options);
  });

  return [createSlider, slider];
}

And here is an example:

export default () => {
  const [createSlider, slider] = createKeenSlider(
    {
      rtl: true,
      slides: {
        perView: 2,
      },
      slideChanged() {
        console.log("slide changed");
      },
    },
    [
      (slider) => {
        slider.on("created", () => {
          alert("Hello World");
        });
      },
    ],
  );

  return (
    <div use:createSlider class="keen-slider">
      <div class="keen-slider__slide">1</div>
      <div class="keen-slider__slide">2</div>
      <div class="keen-slider__slide">3</div>
    </div>
  );
};