astro-swiper 1.3.0 → 2.0.0

package/README.md

@@ -24,8 +24,12 @@
 # Help needed
 
 Do you need help to integrate ```astro-swiper``` in your
-astro template / component? Please
-[fill a github issue](https://github.com/pascal-brand38/astro-swiper/issues/new?template=help-needed.md)
+astro template / component? 2 ways to ask:
+* mention me with ```@pascal-brand38``` in an issue on your own github repo
+* or [fill a github issue](https://github.com/pascal-brand38/astro-swiper/issues/new?template=help-needed.md)
+  in ```astro-swiper``` github
+
+I'll be happy to help!
 
 
 <br>

package/index.ts

@@ -1,4 +1,4 @@
-// Copyright (c) Pascal Brand
-// MIT License
-
-export * from "./src"
+// Copyright (c) Pascal Brand
+// MIT License
+
+export * from './src';

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "astro-swiper",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide, including thumbnails",
   "main": "index.js",
+  "scripts": {
+    "format": "biome format --write && prettier -w \"**/*.astro\"",
+    "lint": "biome lint",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pascal-brand38/astro-swiper.git"
@@ -19,14 +24,27 @@
     "src/**"
   ],
   "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
     "@types/node": "^24.0.0",
     "astro": "^5.9.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.8.3"
   },
   "keywords": [
     "swiper",
-    "withastro", "astro-component", "image",
-    "carousel", "swiper", "slider", "slideshow", "gallery", "lightweight", "touch", "responsive", "thumbnail"
+    "withastro",
+    "astro-component",
+    "image",
+    "carousel",
+    "swiper",
+    "slider",
+    "slideshow",
+    "gallery",
+    "lightweight",
+    "touch",
+    "responsive",
+    "thumbnail"
   ],
   "dependencies": {
     "swiper": "^12.0.0"

package/src/components/Swiper.astro

@@ -1,104 +1,103 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { AstroSwiperType } from '../index'
-
-type Props = AstroSwiperType
-
-
-const {
-  options={},
-  class: className = '',
-  uniqueClass = 'astro-swiper-' + Math.random().toString(36).slice(2, 11),
-  linkToThumbUniqueClass = '',
-  ...props
-} = Astro.props;
-
----
-
-<!-- Slider main container -->
-<astro-swiper
-  class:list={['swiper', uniqueClass, className]}
-  {...props}
-  data-options={JSON.stringify(options)}
-  data-linktothumbuniqueclass={linkToThumbUniqueClass}
-  data-uniqueclass={uniqueClass}
-  >
-    <slot/>
-</astro-swiper>
-
-
-<script>
-  import Swiper from 'swiper/bundle'
-  import type { SwiperOptions } from 'swiper/types';
-
-  /** contains the swiper json object once created, for each uniqueClass */
-  const _useSwiper: { [uniqueClass: string] : Swiper; } = {};
-
-  /** contains the option used when creating the swiper object for each uniqueClass */
-  const _useOptions: { [uniqueClass: string] : SwiperOptions; } = {};
-
-  /** contains all the uniqueClass that have their swiper object delayed because the
-   * related thumbnail swiper is not created yet
-   * For each uniqueClass, is equal to the thumbnail slider uniqueClass
-   */
-  const _useDelaySwiper: { [uniqueClass: string] : string; } = {};
-
-  class AstroSwiper extends HTMLElement {
-    /** pointer to the swiper structure that was created using "new",
-     *  even when not initialized */
-    astroSwiper: Swiper | undefined
-
-    constructor() {
-      super();
-      this.astroSwiper = undefined
-
-      // Read the message from the data attribute.
-      const options = JSON.parse(this.dataset.options || '{}')
-      const uniqueClass = this.dataset.uniqueclass || ''   // to have more than 1 swiper in a single page
-      const linkToThumbUniqueClass = this.dataset.linktothumbuniqueclass || ''
-
-      if (linkToThumbUniqueClass === '') {
-        // no thumbnail link - the swiper can be created immediatly
-        const swiper = new Swiper(`.${uniqueClass}`, options)
-        _useSwiper[uniqueClass] = swiper
-        this.astroSwiper = swiper
-      } else {
-        // a thumbnail link is provided
-        // if the thumbnail swiper is already created, the main slider can be created also
-        // otherwise, it will be added in the delayed swiper list
-        if (_useSwiper[linkToThumbUniqueClass] !== undefined) {
-          options.thumbs = { swiper: _useSwiper[linkToThumbUniqueClass], ...options.thumbs }
-          const swiper = new Swiper(`.${uniqueClass}`, options)
-          _useSwiper[uniqueClass] = swiper
-          this.astroSwiper = swiper
-        } else {
-          // cannot create the swiper as the thumbnail swiper not created yet
-          // will be done later
-          _useDelaySwiper[uniqueClass] = linkToThumbUniqueClass
-        }
-      }
-
-      _useOptions[uniqueClass] = options
-
-      // look if any delayed swiper can be created, that is its related thumbnail swiper is now created
-      Object.keys(_useDelaySwiper).forEach(delayedClass => {
-        const delayedThumbClass = _useDelaySwiper[delayedClass]
-        if (_useSwiper[delayedThumbClass] !== undefined) {
-          const delayedOptions = _useOptions[delayedClass]
-          delayedOptions.thumbs = { swiper: _useSwiper[delayedThumbClass], ...delayedOptions.thumbs }
-          const swiper = new Swiper(`.${delayedClass}`, delayedOptions)
-          _useSwiper[delayedClass] = swiper;
-          (document.querySelector(`.${delayedClass}`) as AstroSwiper).astroSwiper = swiper
-          _useOptions[delayedClass] = delayedOptions
-          delete _useDelaySwiper[delayedClass]
-        }
-      })
-    }
-  }
-
-  customElements.define('astro-swiper', AstroSwiper);
-</script>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+import type { AstroSwiperType } from '../index';
+
+type Props = AstroSwiperType;
+
+const {
+  options = {},
+  uniqueClass = `astro-swiper-${Math.random().toString(36).slice(2, 11)}`,
+  class: className = null,
+  linkToThumbUniqueClass = null,
+  addDefaultClass = true,
+  ...props
+} = Astro.props;
+---
+
+<!-- Slider main container -->
+<div class:list={[addDefaultClass ? 'swiper' : '', uniqueClass, className]} {...props} >
+  <astro-swiper
+    data-options={JSON.stringify(options)}
+    data-linktothumbuniqueclass={linkToThumbUniqueClass}
+    data-uniqueclass={uniqueClass}
+  />
+  <slot />
+</div>
+
+<script>
+  import Swiper from 'swiper/bundle';
+  import type { SwiperOptions } from 'swiper/types';
+
+  /** contains the swiper json object once created, for each uniqueClass */
+  const _useSwiper: { [uniqueClass: string]: Swiper } = {};
+
+  /** contains the option used when creating the swiper object for each uniqueClass */
+  const _useOptions: { [uniqueClass: string]: SwiperOptions } = {};
+
+  /** contains all the uniqueClass that have their swiper object delayed because the
+   * related thumbnail swiper is not created yet
+   * For each uniqueClass, is equal to the thumbnail slider uniqueClass
+   */
+  const _useDelaySwiper: { [uniqueClass: string]: string } = {};
+
+  class AstroSwiper extends HTMLElement {
+    /** pointer to the swiper structure that was created using "new",
+     *  even when not initialized */
+    astroSwiper: Swiper | undefined;
+
+    constructor() {
+      super();
+      this.astroSwiper = undefined;
+
+      // Read the message from the data attribute.
+      const options = JSON.parse(this.dataset.options || '{}');
+      const uniqueClass = this.dataset.uniqueclass || ''; // to have more than 1 swiper in a single page
+      const linkToThumbUniqueClass = this.dataset.linktothumbuniqueclass || '';
+
+      if (linkToThumbUniqueClass === '') {
+        // no thumbnail link - the swiper can be created immediatly
+        const swiper = new Swiper(`.${uniqueClass}`, options);
+        _useSwiper[uniqueClass] = swiper;
+        this.astroSwiper = swiper;
+      } else {
+        // a thumbnail link is provided
+        // if the thumbnail swiper is already created, the main slider can be created also
+        // otherwise, it will be added in the delayed swiper list
+        if (_useSwiper[linkToThumbUniqueClass] !== undefined) {
+          options.thumbs = { swiper: _useSwiper[linkToThumbUniqueClass], ...options.thumbs };
+          const swiper = new Swiper(`.${uniqueClass}`, options);
+          _useSwiper[uniqueClass] = swiper;
+          this.astroSwiper = swiper;
+        } else {
+          // cannot create the swiper as the thumbnail swiper not created yet
+          // will be done later
+          _useDelaySwiper[uniqueClass] = linkToThumbUniqueClass;
+        }
+      }
+
+      _useOptions[uniqueClass] = options;
+
+      // look if any delayed swiper can be created, that is its related thumbnail swiper is now created
+      Object.keys(_useDelaySwiper).forEach((delayedClass) => {
+        const delayedThumbClass = _useDelaySwiper[delayedClass];
+        if (_useSwiper[delayedThumbClass] !== undefined) {
+          const delayedOptions = _useOptions[delayedClass];
+          delayedOptions.thumbs = {
+            swiper: _useSwiper[delayedThumbClass],
+            ...delayedOptions.thumbs,
+          };
+          const swiper = new Swiper(`.${delayedClass}`, delayedOptions);
+          _useSwiper[delayedClass] = swiper;
+          (document.querySelector(`.${delayedClass}`) as AstroSwiper).astroSwiper = swiper;
+          _useOptions[delayedClass] = delayedOptions;
+          delete _useDelaySwiper[delayedClass];
+        }
+      });
+    }
+  }
+
+  customElements.define('astro-swiper', AstroSwiper);
+</script>

package/src/components/SwiperButtonNext.astro

@@ -1,26 +1,19 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-button-next' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-button-next' : '', className]} {...props}>
+  <slot />
+</div>

package/src/components/SwiperButtonPrev.astro

@@ -1,26 +1,19 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-button-prev' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-button-prev' : '', className]} {...props}>
+  <slot />
+</div>

package/src/components/SwiperPagination.astro

@@ -1,26 +1,19 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-pagination' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-pagination' : '', className]} {...props}>
+  <slot />
+</div>

package/src/components/SwiperScrollbar.astro

@@ -1,26 +1,19 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-scrollbar' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-scrollbar' : '', className]} {...props}>
+  <slot />
+</div>

package/src/components/SwiperSlide.astro

@@ -1,26 +1,18 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-slide' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-slide' : null, className]} {...props}>
+  <slot />
+</div>

package/src/components/SwiperWrapper.astro

@@ -1,26 +1,19 @@
----
-// Copyright (c) Pascal Brand
-// MIT License
-
-import 'swiper/css/bundle'
-
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<"div"> {
-  /** add the default swiper class, true by default */
-  addDefaultClass?: boolean,
-}
-
-const {
-  class: className = '',
-  addDefaultClass = true,
-  ...props
-} = Astro.props;
-
----
-
-<div
-  class:list={[(addDefaultClass ? 'swiper-wrapper' : ''), className]}
-  {...props}>
-    <slot/>
-</div>
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = '', addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-wrapper' : '', className]} {...props}>
+  <slot />
+</div>

package/src/index.ts

@@ -1,47 +1,61 @@
-// Copyright (c) Pascal Brand
-// MIT License
-
-import type { Swiper, SwiperOptions } from 'swiper/types'
-import type { HTMLAttributes } from 'astro/types'
-
-/** properties passed to the <Swiper> component
- * It extends a div (that is may have class, style,...), plus other attributes
- * Note that all other components (<SwiperSlide>, <SwiperButtonNext>...) extends a div only
- */
-export interface AstroSwiperType extends HTMLAttributes<"div"> {
-  /** swiper options, to set autoplay, navigation, thumbnails,...
-   * check fullset of options: https://swiperjs.com/swiper-api#parameters
-   */
-  options?: SwiperOptions,
-
-  /** unique class to be able to retrieve the swiper instance, if required
-   * Mandatory on thumbnail for example
-   * When undefined, an automatic unique class name is provided
-   */
-  uniqueClass?: string,
-
-  /** a thumbnail slider is build, this parameter is provided on the main slider
-   * (the one with big slides, not the one to track the progress) and equal
-   * the unique class of the thumbnail slider
-   */
-  linkToThumbUniqueClass?: string,
-}
-
-/** astro components exported, used to create a swiper */
-export { default as Swiper } from './components/Swiper.astro'
-export { default as SwiperButtonNext } from './components/SwiperButtonNext.astro'
-export { default as SwiperButtonPrev } from './components/SwiperButtonPrev.astro'
-export { default as SwiperPagination } from './components/SwiperPagination.astro'
-export { default as SwiperScrollbar } from './components/SwiperScrollbar.astro'
-export { default as SwiperSlide } from './components/SwiperSlide.astro'
-export { default as SwiperWrapper } from './components/SwiperWrapper.astro'
-
-declare class AstroSwiper extends HTMLElement {
-  /** pointer to the swiper structure that was created using "new",
-   *  even when not initialized */
-  astroSwiper: Swiper | undefined
-}
-
-export function getSwiperFromUniqueClass(uniqueClass: string): Swiper | undefined {
-  return (document.querySelector(`.${uniqueClass}`) as AstroSwiper)?.astroSwiper
-}
+// Copyright (c) Pascal Brand
+// MIT License
+
+import type { Swiper, SwiperOptions } from 'swiper/types';
+import type { HTMLAttributes } from 'astro/types';
+
+/** properties passed to the <Swiper> component
+ * It extends a div (that is may have class, style,...), plus other attributes
+ * Note that all other components (<SwiperSlide>, <SwiperButtonNext>...) extends a div only
+ */
+export interface AstroSwiperType extends HTMLAttributes<'div'> {
+  /** swiper options, to set autoplay, navigation, thumbnails,...
+   * check fullset of options: https://swiperjs.com/swiper-api#parameters
+   */
+  options?: SwiperOptions;
+
+  /** unique class to be able to retrieve the swiper instance, if required
+   * Mandatory on thumbnail for example
+   * When undefined, an automatic unique class name is provided
+   */
+  uniqueClass?: string;
+
+  /** a thumbnail slider is build, this parameter is provided on the main slider
+   * (the one with big slides, not the one to track the progress) and equal
+   * the unique class of the thumbnail slider
+   */
+  linkToThumbUniqueClass?: string;
+
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+/** astro components exported, used to create a swiper */
+export { default as Swiper } from './components/Swiper.astro';
+export { default as SwiperButtonNext } from './components/SwiperButtonNext.astro';
+export { default as SwiperButtonPrev } from './components/SwiperButtonPrev.astro';
+export { default as SwiperPagination } from './components/SwiperPagination.astro';
+export { default as SwiperScrollbar } from './components/SwiperScrollbar.astro';
+export { default as SwiperSlide } from './components/SwiperSlide.astro';
+export { default as SwiperWrapper } from './components/SwiperWrapper.astro';
+
+declare class AstroSwiper extends HTMLElement {
+  /** pointer to the swiper structure that was created using "new",
+   *  even when not initialized */
+  astroSwiper: Swiper | undefined;
+}
+
+/** @deprecated: use getSwiperFromUniqueSelector() instead */
+export function getSwiperFromUniqueClass(uniqueClass: string): Swiper | undefined {
+  return getSwiperFromUniqueSelector(`.${uniqueClass}`);
+}
+
+/** Retrieve the swiper instance from the unique selector provided
+ * when creating the swiper
+ * @param uniqueSelector the unique selector provided when creating the swiper,
+ * @example const swiper = getSwiperFromUniqueSelector('.my-unique-class')
+ *          const swiper = getSwiperFromUniqueSelector('#my-unique-id')
+ */
+export function getSwiperFromUniqueSelector(uniqueSelector: string): Swiper | undefined {
+  return (document.querySelector(uniqueSelector)?.firstElementChild as AstroSwiper)?.astroSwiper;
+}