fix: Recollect slides during update to support dynamic additions, rem…

…ovals and reordering (glidejs#457)

src/components/html.js

@@ -5,7 +5,7 @@ import { isString } from '../utils/unit'
 
 const TRACK_SELECTOR = '[data-glide-el="track"]'
 
-export default function (Glide, Components) {
+export default function (Glide, Components, Events) {
   const Html = {
     /**
      * Setup slider HTML nodes.
@@ -15,6 +15,13 @@ export default function (Glide, Components) {
     mount () {
       this.root = Glide.selector
       this.track = this.root.querySelector(TRACK_SELECTOR)
+      this.collectSlides()
+    },
+
+    /**
+     * Collect slides
+     */
+    collectSlides () {
       this.slides = Array.prototype.slice.call(this.wrapper.children).filter((slide) => {
         return !slide.classList.contains(Glide.settings.classes.slide.clone)
       })
@@ -84,5 +91,12 @@ export default function (Glide, Components) {
     }
   })
 
+  /**
+   * Add/remove/reorder dynamic slides
+   */
+  Events.on('update', () => {
+    Html.collectSlides()
+  })
+
   return Html
 }

tests/functional/update.test.js

@@ -33,4 +33,18 @@ describe('Calling `update()` method with', () => {
     expect(glide.index).toBe(1)
     expect(slides[1].classList.contains(defaults.classes.slide.active)).toBe(true)
   })
+
+  test('additional slide should be updated', () => {
+    let { wrapper } = query(document)
+    let newSlide = document.createElement('li')
+    newSlide.className = 'glide__slide'
+    newSlide.innerHTML = 0
+
+    let glide = new Glide('#glide', { startAt: 0 }).mount()
+
+    wrapper.append(newSlide)
+    glide.update()
+
+    expect(newSlide.style.width).toBeTruthy()
+  })
 })