feat: umd/cjs modern build

Author: barthy-koeln

.github/workflows/npm-publish.yml

@@ -1,21 +1,21 @@
 name: publish-to-npm
 
 on:
-    workflow_dispatch:
-    release:
-        types: [ created ]
+  workflow_dispatch:
+  release:
+    types: [ created ]
 
 jobs:
-    publish-npm:
-        runs-on: ubuntu-latest
-        steps:
-            -   uses: actions/checkout@v2
-            -   uses: actions/setup-node@v1
-                with:
-                    node-version: 18
-                    registry-url: https://registry.npmjs.org/
-                    always-auth: true
-            -   run: yarn
-            -   run: yarn publish
-                env:
-                    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+          always-auth: true
+      - run: yarn
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

demo/slider-multi.js

@@ -1,4 +1,4 @@
-import { ScrollSnapSlider } from '../dist/scroll-snap-slider.js'
+import { ScrollSnapSlider } from '../dist/scroll-snap-slider.mjs'
 
 const sliderMultiElement = document.querySelector('.scroll-snap-slider.-multi')
 const sliderMulti = new ScrollSnapSlider({ element: sliderMultiElement })

demo/slider-responsive.js

@@ -1,4 +1,4 @@
-import { ScrollSnapSlider } from '../dist/scroll-snap-slider.js'
+import { ScrollSnapSlider } from '../dist/scroll-snap-slider.mjs'
 
 const sliderResponsiveElement = document.querySelector('.scroll-snap-slider.-responsive')
 const sliderResponsive = new ScrollSnapSlider({ element: sliderResponsiveElement })

demo/slider-simple.js

@@ -1,8 +1,13 @@
-import {ScrollSnapAutoplay, ScrollSnapDraggable, ScrollSnapLoop, ScrollSnapSlider} from '../dist/scroll-snap-slider.js'
+import {
+    ScrollSnapAutoplay,
+    ScrollSnapDraggable,
+    ScrollSnapLoop,
+    ScrollSnapSlider
+} from '../dist/scroll-snap-slider.mjs'
 
 const sliderSimpleElement = document.querySelector('.scroll-snap-slider.-simple')
 const slides = sliderSimpleElement.getElementsByClassName('scroll-snap-slide')
-const sliderSimple = new ScrollSnapSlider({element: sliderSimpleElement})
+const sliderSimple = new ScrollSnapSlider({ element: sliderSimpleElement })
 
 sliderSimple.name = 'simple'
 
@@ -20,38 +25,38 @@ const prev = document.querySelector('.indicators.-simple .arrow.-prev')
 const next = document.querySelector('.indicators.-simple .arrow.-next')
 
 const setSelected = function (event) {
-    const slideElementIndex = event.detail
-    const slideElement = slides[slideElementIndex]
-
-    for (const button of buttons) {
-        const isActive = button.classList.toggle('-active', button.dataset.index === slideElement.dataset.index)
-        if (isActive) {
-            button.appendChild(currentIndicator)
-        }
+  const slideElementIndex = event.detail
+  const slideElement = slides[slideElementIndex]
+
+  for (const button of buttons) {
+    const isActive = button.classList.toggle('-active', button.dataset.index === slideElement.dataset.index)
+    if (isActive) {
+      button.appendChild(currentIndicator)
     }
+  }
 }
 
 for (const button of buttons) {
-    button.addEventListener('click', function (event) {
-        autoplayPlugin.disableTemporarily()
-        event.preventDefault()
+  button.addEventListener('click', function (event) {
+    autoplayPlugin.disableTemporarily()
+    event.preventDefault()
 
-        const slideElementIndex = Array.prototype.slice
-            .call(slides)
-            .findIndex(item => item.dataset.index === button.dataset.index)
+    const slideElementIndex = Array.prototype.slice
+      .call(slides)
+      .findIndex(item => item.dataset.index === button.dataset.index)
 
-        sliderSimple.slideTo(slideElementIndex)
-    })
+    sliderSimple.slideTo(slideElementIndex)
+  })
 }
 
 prev.addEventListener('click', function () {
-    autoplayPlugin.disableTemporarily()
-    sliderSimple.slideTo(sliderSimple.slide - 1)
+  autoplayPlugin.disableTemporarily()
+  sliderSimple.slideTo(sliderSimple.slide - 1)
 })
 
 next.addEventListener('click', function () {
-    autoplayPlugin.disableTemporarily()
-    sliderSimple.slideTo(sliderSimple.slide + 1)
+  autoplayPlugin.disableTemporarily()
+  sliderSimple.slideTo(sliderSimple.slide + 1)
 })
 
 sliderSimple.addEventListener('slide-pass', setSelected)
@@ -63,43 +68,43 @@ const loopInput = document.querySelector('#loop')
 const draggableInput = document.querySelector('#draggable')
 
 const enablePlugin = function (plugin) {
-    plugin.enable()
-    sliderSimple.plugins.set(plugin.id, plugin)
+  plugin.enable()
+  sliderSimple.plugins.set(plugin.id, plugin)
 }
 
 const disablePlugin = function (plugin) {
-    plugin.disable()
-    sliderSimple.plugins.delete(plugin.id)
+  plugin.disable()
+  sliderSimple.plugins.delete(plugin.id)
 }
 
 autoPlayInput.addEventListener('change', function () {
-    autoPlayInput.checked ? enablePlugin(autoplayPlugin) : disablePlugin(autoplayPlugin)
+  autoPlayInput.checked ? enablePlugin(autoplayPlugin) : disablePlugin(autoplayPlugin)
 })
 
 loopInput.addEventListener('change', function () {
-    if (loopInput.disabled) {
-        return
-    }
+  if (loopInput.disabled) {
+    return
+  }
 
-    loopInput.checked ? enablePlugin(loopPlugin) : disablePlugin(loopPlugin)
+  loopInput.checked ? enablePlugin(loopPlugin) : disablePlugin(loopPlugin)
 })
 
 draggableInput.addEventListener('change', function () {
-    loopInput.toggleAttribute('disabled', draggableInput.checked)
+  loopInput.toggleAttribute('disabled', draggableInput.checked)
 
-    if (draggableInput.checked) {
-        enablePlugin(draggablePlugin)
-
-        if (loopInput.checked) {
-            disablePlugin(loopPlugin)
-        }
-
-        return
-    }
+  if (draggableInput.checked) {
+    enablePlugin(draggablePlugin)
 
     if (loopInput.checked) {
-        enablePlugin(loopPlugin)
+      disablePlugin(loopPlugin)
     }
 
-    disablePlugin(draggablePlugin)
+    return
+  }
+
+  if (loopInput.checked) {
+    enablePlugin(loopPlugin)
+  }
+
+  disablePlugin(draggablePlugin)
 })

demo/test.html

@@ -66,39 +66,39 @@
   lang="js"
   type="module"
 >
-    import {ScrollSnapSlider, ScrollSnapAutoplay, ScrollSnapLoop} from '/dist/scroll-snap-slider.js'
+  import { ScrollSnapSlider, ScrollSnapAutoplay, ScrollSnapLoop } from '/dist/scroll-snap-slider.mjs'
 
-    const sliders = []
-    const appElement = document.getElementById('app')
-    const sliderTemplate = document.getElementById('sliderTemplate')
-    const slideTemplate = document.getElementById('slideTemplate')
-    const sliderCount = 64
-    const slidesPerSlider = 10
-    const interval = 1_000 / 64
+  const sliders = []
+  const appElement = document.getElementById('app')
+  const sliderTemplate = document.getElementById('sliderTemplate')
+  const slideTemplate = document.getElementById('slideTemplate')
+  const sliderCount = 64
+  const slidesPerSlider = 10
+  const interval = 1_000 / 64
 
-    for (let index = 0; index < sliderCount; index++) {
-        const id = `slider-${index}`
+  for (let index = 0; index < sliderCount; index++) {
+    const id = `slider-${index}`
 
-        const slides = []
-        for (let imageIndex = 0; imageIndex < slidesPerSlider; imageIndex++) {
-            slides.push(slideTemplate.innerHTML.replaceAll('__INDEX__', imageIndex.toString(10)))
-        }
+    const slides = []
+    for (let imageIndex = 0; imageIndex < slidesPerSlider; imageIndex++) {
+      slides.push(slideTemplate.innerHTML.replaceAll('__INDEX__', imageIndex.toString(10)))
+    }
 
-        const clone = sliderTemplate.innerHTML
-            .replace('__ID__', id)
-            .replace('__SLIDES__', slides.join('\n'))
+    const clone = sliderTemplate.innerHTML
+      .replace('__ID__', id)
+      .replace('__SLIDES__', slides.join('\n'))
 
-        appElement.insertAdjacentHTML('beforeend', clone)
+    appElement.insertAdjacentHTML('beforeend', clone)
 
-        setTimeout(() => {
-            const element = document.getElementById(id)
-            sliders.push(new ScrollSnapSlider({element})
-                .with([
-                    new ScrollSnapAutoplay(500),
-                    new ScrollSnapLoop()
-                ]))
-        }, (index * interval))
-    }
+    setTimeout(() => {
+      const element = document.getElementById(id)
+      sliders.push(new ScrollSnapSlider({ element })
+        .with([
+          new ScrollSnapAutoplay(500),
+          new ScrollSnapLoop()
+        ]))
+    }, (index * interval))
+  }
 </script>
 </body>
 </html>