Fix children width, init state after reload

src/ImageCarousel.svelte

@@ -1,8 +1,11 @@
 <script>
   // TODO: rename image carousel to just carousel
+  // TODO: seems CarouselChild component can be removed
   import { onMount } from 'svelte'
   import { store } from './store'
 
+  console.log('init')
+
   /**
    * Enable Next/Prev arrows
    */
@@ -18,6 +21,9 @@
   let children
   let w = 0
   onMount(() => {
+    store.reset() // to init after hot reload
+    console.log('mounted!')
+    store.setCurrentItemIndex(0) // to init index after hot reload, check one more time
     children = innerContentContainerElement.children
     console.log('children', children.length)
     w = contentContainerElement.clientWidth
@@ -33,7 +39,7 @@
   }
   function handleNextClick() {
     store.next({ infinite })
-    console.log('currentItemId', $store.currentItemId)
+    console.log('children.length', children.length, $store.currentItemIndex)
     offset = -$store.currentItemIndex * children[$store.currentItemIndex].clientWidth
     console.log('offset', offset, children[$store.currentItemIndex].clientWidth)
   }
@@ -80,7 +86,8 @@
     overflow: hidden;
   }
   .content-container > div {
-    display: flex;
+    width: 100%;
+    display: flex; /* to put child elements in one row */
     transition: transform 1s ease-in-out;
     background-color: chocolate;
   }

src/store.js

@@ -2,20 +2,27 @@ import { writable } from 'svelte/store';
 import { v4 as uuid } from 'uuid'
 import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
 
+// TODO: try to split writable store items
+// or try to use immer
+
+const initState = {
+  items: [],
+  currentItemId: null,
+  currentItemIndex: null,
+  action: 'next'
+}
 
 function createStore() {
-  const { subscribe, set, update } = writable({
-    items: [],
-    currentItemId: null,
-    currentItemIndex: null,
-    action: 'next'
-  });
+  const { subscribe, set, update } = writable(initState);
+
+  function reset() {
+    set(initState)
+  }
 
   function setItem(id = uuid()) {
     update(store => ({
       ...store,
-      currentItemId: id,
-      currentItemIndex: 0, // store.items.length - 1, TODO: use as a param
+      currentItemId: id, // TODO: seems is not used at all, can be removed
       items: [
         ...store.items,
         id
@@ -23,6 +30,13 @@ function createStore() {
     }))
   }
 
+  function setCurrentItemIndex(index) {
+    update(store => ({
+      ...store,
+      currentItemIndex: index,
+    }))
+  }
+
   function removeItem(id) {
     update(store => ({
       ...store,
@@ -33,7 +47,9 @@ function createStore() {
   function next({ infinite }) {
     update(store => {
       const currentItemIndex = store.currentItemIndex // store.items.findIndex(item => item === store.currentItemId)
+      console.log('next old currentItemIndex', currentItemIndex)
       const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, store.items)
+      // console.log('newCurrentItemIndex', newCurrentItemIndex)
       return {
         ...store,
         currentItemId: store.items[newCurrentItemIndex],
@@ -61,7 +77,9 @@ function createStore() {
     setItem,
     removeItem,
     next,
-    prev
+    prev,
+    setCurrentItemIndex,
+    reset
   };
 }
 

src/stories/ImageCarouselView.svelte

@@ -18,28 +18,24 @@
     {arrows}
     {infinite}
   >
- 
-      <div
-        class="child-content-container"
-        style="background-color: green;"
-      >
-        <h1>Element 1</h1>
-      </div>
-
-      <div
-        class="child-content-container"
-        style="background-color: yellow;"
-      >
-        <h1>Element 2</h1>
-      </div>
-
-      <div
-        class="child-content-container"
-        style="background-color: blue;"
-      >
-        <h1>Element 3</h1>
-      </div>
-
+    <div
+      class="child-content-container"
+      style="background-color: green;"
+    >
+      <h1>Element 1</h1>
+    </div>
+    <div
+      class="child-content-container"
+      style="background-color: yellow;"
+    >
+      <h1>Element 2</h1>
+    </div>
+    <div
+      class="child-content-container"
+      style="background-color: blue;"
+    >
+      <h1>Element 3</h1>
+    </div>
   </ImageCarousel>
 </div>
 
@@ -49,8 +45,9 @@
     width: 100%;
   }
   .child-content-container {
-    width: 500px;
+    min-width: 100%;
     height: 100px;
+    display: flex;
     align-items: center;
     justify-content: center;
   }