Rename vars, code cleanup

src/ImageCarousel/ImageCarousel.svelte

@@ -1,8 +1,7 @@
 <script>
   // TODO: rename image carousel to just carousel
-  // TODO: seems CarouselChild component can be removed
   // TODO: subscribe on mount and unsubscribe on destroy to
-  // $store.currentItemIndex to avoid multiple subscriptions
+  // $store.currentPageIndex to avoid multiple subscriptions
   import { onMount } from 'svelte'
   import { store } from '../store'
   import {
@@ -33,7 +32,7 @@
   /**
    * Page to start on
    */
-  export let initialPage = 1
+  export let initialPageIndex = 1
 
   /**
    * Transition speed (ms)
@@ -61,14 +60,14 @@
   export let dots = true
 
   let pagesCount = 0
-  let contentContainerWidth = 0
+  let pageWidth = 0
   let offset
   let contentContainerElement
   let innerContentContainerElement
 
   function applySlideSizes() {
     const children = innerContentContainerElement.children
-    contentContainerWidth = contentContainerElement.clientWidth
+    pageWidth = contentContainerElement.clientWidth
 
     const slidesCount = children.length
     pagesCount = getPagesCount({ slidesCount, slidesToShow })
@@ -77,11 +76,10 @@
     for (let slideIndex=0; slideIndex<children.length; slideIndex++) {
       const pageIndex = getPageIndex({ slideIndex, slidesToShow })
       const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount })
-      const slideSizePx = getSlideSize({ isNotCompletePage, contentContainerWidth, slidesToShow, slidesToShowTail })
+      const slideSizePx = getSlideSize({ isNotCompletePage, pageWidth, slidesToShow, slidesToShowTail })
       children[slideIndex].style.minWidth = `${slideSizePx}px`
       children[slideIndex].style.maxWidth = `${slideSizePx}px`
     }
-    showPage(initialPage)
   }
 
   function applyAutoplay() {
@@ -103,7 +101,7 @@
   }
   
   onMount(() => {
-    store.reset() // to init after hot reload
+    store.init(initialPageIndex)
     applySlideSizes()
 
     const { teardownAutoplay } = applyAutoplay()
@@ -120,7 +118,7 @@
   }
 
   function applyOffset() {
-    offset = -$store.currentItemIndex * contentContainerWidth
+    offset = -$store.currentPageIndex * pageWidth
   }
 
   function showPage(pageIndex) {
@@ -171,13 +169,13 @@
   {#if dots}
     <slot
       name="dots"
-      currentPage={$store.currentItemIndex}
+      currentPageIndex={$store.currentPageIndex}
       {pagesCount}
       {showPage}
     >
       <Dots
         {pagesCount}
-        currentPageIndex={$store.currentItemIndex}
+        currentPageIndex={$store.currentPageIndex}
         on:pageChange={handlePageChange}
       ></Dots>
     </slot>

src/ImageCarousel/ImageCarouselView.svelte

@@ -19,7 +19,7 @@
   /**
    * Page to start on
    */
-  export let initialPage = 1
+  export let initialPageIndex = 1
 
   /**
    * Transition speed (ms)
@@ -65,7 +65,7 @@
     {arrows}
     {infinite}
     {slidesToShow}
-    {initialPage}
+    {initialPageIndex}
     {speed}
     {autoplay}
     {autoplaySpeed}

src/ImageCarousel/ImageCarouselViewCustomArrows.svelte

@@ -19,7 +19,7 @@
   /**
    * Page to start on
    */
-  export let initialPage = 1
+  export let initialPageIndex = 1
 
   /**
    * Transition speed (ms)
@@ -46,10 +46,6 @@
    */
   export let dots = true
 
-  function onPageChange(event, showPage) {
-    showPage(event.target.value)
-  }
-
   const colors = [
     '#e5f9f0',
     '#ccf3e2',
@@ -69,7 +65,7 @@
     {arrows}
     {infinite}
     {slidesToShow}
-    {initialPage}
+    {initialPageIndex}
     {speed}
     {autoplay}
     {autoplaySpeed}

src/ImageCarousel/ImageCarouselViewCustomDots.svelte

@@ -19,7 +19,7 @@
   /**
    * Page to start on
    */
-  export let initialPage = 1
+  export let initialPageIndex = 1
 
   /**
    * Transition speed (ms)
@@ -69,13 +69,13 @@
     {arrows}
     {infinite}
     {slidesToShow}
-    {initialPage}
+    {initialPageIndex}
     {speed}
     {autoplay}
     {autoplaySpeed}
     {autoplayDirection}
     {dots}
-    let:currentPage
+    let:currentPageIndex
     let:pagesCount
     let:showPage
   >
@@ -90,12 +90,12 @@
     <div slot="dots">
       <div class="select-container">
         <select
-          value={currentPage}
+          value={currentPageIndex}
           on:change="{(event) => onPageChange(event, showPage)}"
           on:blur="{(event) => onPageChange(event, showPage)}"
         >
           {#each  Array(pagesCount) as _, pageIndex (pageIndex)}
-            <option value={pageIndex} class:active={currentPage === pageIndex}>
+            <option value={pageIndex} class:active={currentPageIndex === pageIndex}>
               {pageIndex}
             </option>
           {/each}

src/main.js

@@ -1,2 +1,2 @@
 // TODO:
-export default null;
+export default null;

src/store.js

@@ -1,24 +1,24 @@
 import { writable } from 'svelte/store';
-import { getNextItemIndexFn, getPrevItemIndexFn } from './utils/item-index'
-
-// TODO: try to split writable store items
-// or try to use immer
+import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page-index'
 
 const initState = {
-  currentItemIndex: null,
+  currentPageIndex: 0,
 }
 
 function createStore() {
   const { subscribe, set, update } = writable(initState);
 
-  function reset() {
-    set(initState)
+  function init(initialPageIndex) {
+    set({
+      ...initState,
+      currentPageIndex: initialPageIndex
+    })
   }
 
-  function setCurrentItemIndex(index) {
+  function setCurrentPageIndex(index) {
     update(store => ({
       ...store,
-      currentItemIndex: index,
+      currentPageIndex: index,
     }))
   }
 
@@ -26,29 +26,27 @@ function createStore() {
     update(store => {
       return {
         ...store,
-        currentItemIndex: pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1),
+        currentPageIndex: pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1),
       }
     })
   }
 
   function next({ infinite, pagesCount }) {
     update(store => {
-      const currentItemIndex = store.currentItemIndex
-      const newCurrentItemIndex = getNextItemIndexFn(infinite)(currentItemIndex, pagesCount)
+      const newCurrentPageIndex = getNextPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
       return {
         ...store,
-        currentItemIndex: newCurrentItemIndex,
+        currentPageIndex: newCurrentPageIndex,
       }
     })
   }
 
   function prev({ infinite, pagesCount }) {
     update(store => {
-      const currentItemIndex = store.currentItemIndex
-      const newCurrentItemIndex = getPrevItemIndexFn(infinite)(currentItemIndex, pagesCount)
+      const newCurrentPageIndex = getPrevPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
       return {
         ...store,
-        currentItemIndex: newCurrentItemIndex,
+        currentPageIndex: newCurrentPageIndex,
       }
     })
   }
@@ -57,10 +55,10 @@ function createStore() {
     subscribe,
     next,
     prev,
-    setCurrentItemIndex,
-    reset,
+    setCurrentPageIndex,
+    init,
     moveToPage,
   };
 }
 
-export const store = createStore();
+export const store = createStore();

src/utils/id.js

@@ -1,5 +0,0 @@
-import { v4 as uuid } from 'uuid'
-
-export function generateId() {
-  return uuid()
-}

src/utils/item-index.js

@@ -1,25 +0,0 @@
-export function getNextItemIndexLimited(currentItemIndex, length) {
-  return Math.min(currentItemIndex + 1, length - 1)
-}
-
-export function getNextItemIndexInfinte(currentItemIndex, length) {
-  const newCurrentItemIndex = currentItemIndex + 1
-  return newCurrentItemIndex > length - 1 ? 0 : newCurrentItemIndex
-}
-
-export function getNextItemIndexFn(infinite) {
-  return infinite ? getNextItemIndexInfinte : getNextItemIndexLimited
-}
-
-export function getPrevItemIndexLimited(currentItemIndex, length) {
-  return Math.max(currentItemIndex - 1, 0)
-}
-
-export function getPrevItemIndexInfinte(currentItemIndex, length) {
-  const newCurrentItemIndex = currentItemIndex - 1
-  return newCurrentItemIndex >= 0 ? newCurrentItemIndex : length - 1
-}
-
-export function getPrevItemIndexFn(infinite) {
-  return infinite ? getPrevItemIndexInfinte : getPrevItemIndexLimited
-}

src/utils/page-index.js

@@ -0,0 +1,25 @@
+export function getNextPageIndexLimited(currentPageIndex, pagesCount) {
+  return Math.min(currentPageIndex + 1, pagesCount - 1)
+}
+
+export function getNextPageIndexInfinte(currentPageIndex, pagesCount) {
+  const newCurrentPageIndex = currentPageIndex + 1
+  return newCurrentPageIndex > pagesCount - 1 ? 0 : newCurrentPageIndex
+}
+
+export function getNextPageIndexFn(infinite) {
+  return infinite ? getNextPageIndexInfinte : getNextPageIndexLimited
+}
+
+export function getPrevPageIndexLimited(currentPageIndex, pagesCount) {
+  return Math.max(currentPageIndex - 1, 0)
+}
+
+export function getPrevPageIndexInfinte(currentPageIndex, pagesCount) {
+  const newCurrentPageIndex = currentPageIndex - 1
+  return newCurrentPageIndex >= 0 ? newCurrentPageIndex : pagesCount - 1
+}
+
+export function getPrevPageIndexFn(infinite) {
+  return infinite ? getPrevPageIndexInfinte : getPrevPageIndexLimited
+}

src/utils/size.js

@@ -18,14 +18,14 @@ export function getIsNotCompletePage({
 }
 
 export function getSlideSize({
-  contentContainerWidth,
+  pageWidth,
   slidesToShow,
   slidesToShowTail,
   isNotCompletePage
 }) {
   return isNotCompletePage
-    ? Math.round(contentContainerWidth/slidesToShowTail) 
-    : Math.round(contentContainerWidth/slidesToShow)
+    ? Math.round(pageWidth/slidesToShowTail) 
+    : Math.round(pageWidth/slidesToShow)
 }
 
 export function getPageIndex({ slideIndex, slidesToShow }) {