Add reactive fields

src/components/Carousel/Carousel.svelte

@@ -1,6 +1,5 @@
 <script>
   import { onDestroy, onMount, tick, createEventDispatcher } from 'svelte'
-  import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
   import Progress from '../Progress/Progress.svelte'
@@ -31,6 +30,24 @@
   import { ProgressManager } from '../../utils/ProgressManager'
   import { wait } from '../../utils/interval'
 
+  import { carouselEngine } from './carousel'
+  import { reactive } from './reactive'
+
+  const data = reactive(
+    {
+      message: 'hello',
+      someValue: 'some-value'
+    },
+    {
+      renderFunction: (data) => {
+        console.log('renderFunction watcher called', data.message)
+      },
+    }
+  )
+  console.log('console', data)
+
+  data.message = 'Hello!'
+
   const dispatch = createEventDispatcher()
 
   const autoplayDirectionFnDescription = {
@@ -57,7 +74,10 @@
   /**
    * Infinite looping
    */
-  export let infinite = true
+  export let infinite
+  $: {
+    setInfinite(infinite)
+  }
 
   /**
    * Page to start on
@@ -112,11 +132,18 @@
    * Number of particles to show 
    */
   export let particlesToShow = 1
+  $: {
+    console.log('particlesToShow changed')
+    // setParticlesToShow(particlesToShow)
+  }
 
   /**
    * Number of particles to scroll 
    */
   export let particlesToScroll = 1
+  $: {
+    // setParticlesToScroll(particlesToScroll)
+  }
 
   export async function goTo(pageIndex, options) {
     const animated = get(options, 'animated', true)
@@ -144,38 +171,48 @@
     await showNextPage({ animated })
   }
 
-  let store = createStore()
-
-  $: clonesCount = getClonesCount({
-    infinite,
-    particlesToShow,
-    partialPageSize,
-  })
 
+  ///// ==========================
+  let currentPageIndex
+  let pagesCount
+  let particlesCountWithoutClones
+  let clonesCount
   let currentParticleIndex = 0
-  $: currentPageIndex = getCurrentPageIndexByCurrentParticleIndex({
-    currentParticleIndex,
-    particlesCount,
-    clonesCountHead: clonesCount.head,
-    clonesCountTotal: clonesCount.total,
-    infinite,
-    particlesToScroll,
-  })
-  $: dispatch('pageChange', currentPageIndex)
-
   let particlesCount = 0
-  let particlesCountWithoutClones = 1
+  let _particlesToShow
-  $: pagesCount = getPagesCountByParticlesCount({
+  let _particlesToScroll
-    infinite,
+
-    particlesCountWithoutClones,
+  const {
-    particlesToScroll,
+    setParticlesToShow,
+    setParticlesToScroll,
+    setParticlesCountWithoutClones,
+    setPartialPageSize,
+    setParticlesCount,
+    setCurrentParticleIndex,
+    setInitialPageIndex,
+    setInfinite,
+    prev,
+    next,
+    moveToParticle,
+  } = carouselEngine((values, computed) => {
+    // console.log('hello')
+    currentPageIndex = computed.currentPageIndex
+    pagesCount = computed.pagesCount
+    particlesCountWithoutClones = values.particlesCountWithoutClones
+    clonesCount = computed.clonesCount
+    currentParticleIndex = values.currentParticleIndex
+    particlesCount = values.particlesCount
+    _particlesToShow = values.particlesToShow
+    _particlesToScroll = values.particlesToScroll
   })
 
-  let partialPageSize = 0
+  ///// ==========================
+
 
   let pageWindowWidth = 0
   let particleWidth = 0
   let offset = 0
+
   let pageWindowElement
   let particlesContainer
 
@@ -183,7 +220,7 @@
     width,
   }) => {
     pageWindowWidth = width
-    particleWidth = pageWindowWidth / particlesToShow
+    particleWidth = pageWindowWidth / _particlesToShow
     
     applyParticleSizes({
       particlesContainerChildren: particlesContainer.children,
@@ -215,14 +252,15 @@
   }
 
   // used for lazy loading images, preloaded only current, adjacent and cloanable images
-  $: loaded = getAdjacentIndexes({
+  let loaded = []
-    infinite,
+  // $: loaded = getAdjacentIndexes({
-    pageIndex: currentPageIndex,
+  //   infinite,
-    pagesCount,
+  //   pageIndex: currentPageIndex,
-    particlesCount: particlesCountWithoutClones,
+  //   pagesCount,
-    particlesToShow,
+  //   particlesCount: particlesCountWithoutClones,
-    particlesToScroll,
+  //   particlesToShow: _particlesToShow,
-  }).particleIndexes
+  //   particlesToScroll,
+  // }).particleIndexes
 
   function addClones() {
     const {
@@ -262,36 +300,18 @@
   onMount(() => {
     (async () => {
       await tick()
-      cleanupFns.push(store.subscribe(value => {
-        currentParticleIndex = value.currentParticleIndex
-      }))
       cleanupFns.push(() => progressManager.reset())
       if (particlesContainer && pageWindowElement) {
-        particlesCountWithoutClones = particlesContainer.children.length
+        setParticlesCountWithoutClones(particlesContainer.children.length)
-
+        setParticlesToShow(particlesToShow)
-        particlesToShow = getValueInRange(1, particlesToShow, particlesCountWithoutClones)
+        setParticlesToScroll(particlesToScroll)
-        particlesToScroll = getValueInRange(1, particlesToScroll, particlesCountWithoutClones)
-        initialPageIndex = getValueInRange(0, initialPageIndex, particlesCountWithoutClones - 1)
-
-        partialPageSize = getPartialPageSize({
-          particlesToScroll,
-          particlesToShow,
-          particlesCountWithoutClones,
-        })
 
         await tick()
         infinite && addClones()
-        particlesCount = particlesContainer.children.length
 
-        store.init(getParticleIndexByPageIndex({
+        // call after adding clones
-          infinite,
+        setParticlesCount(particlesContainer.children.length)
-          pageIndex: initialPageIndex,
+        setInitialPageIndex(initialPageIndex)
-          clonesCountHead: clonesCount.head,
-          clonesCountTail: clonesCount.tail,
-          particlesToScroll,
-          particlesCount,
-          particlesToShow,
-        }))
 
         pageWindowElementResizeObserver.observe(pageWindowElement);
       }
@@ -311,7 +331,7 @@
       clonesCountTail: clonesCount.tail,
       particlesToScroll,
       particlesCount,
-      particlesToShow,
+      particlesToShow: _particlesToShow,
     }))
   }
 
@@ -359,10 +379,7 @@
 
   async function showParticle(particleIndex, options) {
     await changePage(
-      () => store.moveToParticle({
+      () => moveToParticle(particleIndex),
-        particleIndex,
-        particlesCount,
-      }),
       options
     )
   }
@@ -370,15 +387,7 @@
     if (disabled) return
 
     await changePage(
-      () => store.prev({
+      prev,
-        infinite,
-        currentPageIndex,
-        clonesCountHead: clonesCount.head,
-        clonesCountTail: clonesCount.tail,
-        particlesToScroll,
-        particlesCount,
-        particlesToShow,
-      }),
       options,
     )
   }
@@ -386,15 +395,7 @@
     if (disabled) return
 
     await changePage(
-      () => store.next({
+      next,
-        infinite,
-        currentPageIndex,
-        particlesCount,
-        particlesToScroll,
-        particlesToShow,
-        clonesCountHead: clonesCount.head,
-        clonesCountTail: clonesCount.tail,
-      }),
       options,
     )
   }
@@ -548,3 +549,6 @@
     bottom: 0;
   }
 </style>
+
+
+

src/components/Carousel/carousel.js

@@ -0,0 +1,216 @@
+import { NEXT, PREV } from '../../direction'
+import {
+  applyParticleSizes,
+  getCurrentPageIndexByCurrentParticleIndex,
+  getPartialPageSize,
+  getPagesCountByParticlesCount,
+  getParticleIndexByPageIndex,
+  createResizeObserver,
+} from '../../utils/page'
+import { getClones, applyClones, getClonesCount } from '../../utils/clones'
+import { getAdjacentIndexes } from '../../utils/lazy'
+import { getValueInRange } from '../../utils/math'
+import { get } from '../../utils/object'
+import { ProgressManager } from '../../utils/ProgressManager'
+import { wait } from '../../utils/interval'
+
+function getCapitalized(str) {
+  const _str = String(str)
+  return `${_str.charAt(0).toUpperCase()}${_str.slice(1)}`
+}
+
+// TODO: merge values and computed
+
+const carousel = (effects, options) => {
+  const values = {}
+  const setters = {}
+  const computed = get(options, 'computed', {})
+
+  const memo = {}
+
+  const actions = {}
+  Object.entries(get(options, 'actions', {})).forEach(([actionName, fn]) => {
+    actions[actionName] = (args) => fn(values, setters, computed, actions, args)
+  })
+
+  Object.entries(effects).forEach(([subject, descriptor]) => {
+    setters[`set${getCapitalized(subject)}`] = (value) => {
+      console.log('===> setter', subject)
+      // if (memo[subject])
+
+      const _value = get(descriptor, 'normalize', (value) => value)(
+        value,
+        values,
+        computed
+      )
+
+      values[subject] = _value
+
+      Object.entries(computed).forEach(([c, v]) => {
+        if (v.deps.includes(subject)) {
+          const dV = v.deps.map((d) => values[d])
+          const _memo = dV.join(' ')
+          // console.log()
+
+          if (dV.every((v) => v !== undefined) && memo[c] !== _memo) {
+            v.fn(values, computed)
+          }
+          memo[c] = _memo
+        }
+      })
+
+      get(options, 'onChange', () => {})(values, computed)
+    }
+  })
+
+  return {
+    ...setters,
+    ...actions,
+  }
+}
+
+export const carouselEngine = (onChange) => {
+  const _carousel = carousel(
+    {
+      particlesCountWithoutClones: {
+        effect: ({ values, setters }) => {},
+      },
+      particlesToShow: {
+        effect: ({ values, setters }) => {},
+        normalize: (value, values) => {
+          return getValueInRange(1, value, values.particlesCountWithoutClones)
+        },
+      },
+      particlesToScroll: {
+        effect: ({ values, setters }) => {},
+        normalize: (value, values) => {
+          return getValueInRange(1, value, values.particlesCountWithoutClones)
+        },
+      },
+      initialPageIndex: {
+        effect: ({ values }) => {
+          console.log('initialPageIndex effect', values)
+        },
+        // ignore calc if value is undefined
+        normalize: (value, values, computed) => {
+          return getParticleIndexByPageIndex({
+            infinite: values.infinite,
+            pageIndex: value,
+            clonesCountHead: computed.clonesCount.head,
+            clonesCountTail: computed.clonesCount.tail,
+            particlesToScroll: values.particlesToScroll,
+            particlesCount: values.particlesCount,
+            particlesToShow: values.particlesToShow,
+          })
+        },
+      },
+      particlesCount: {
+        effect: ({ values }) => {},
+      },
+      currentParticleIndex: {
+        effect: ({ values }) => {},
+      },
+      infinite: {},
+    },
+    {
+      onChange,
+      computed: {
+        clonesCount: {
+          fn: (values, computed) => {
+            return getClonesCount({
+              infinite: values.infinite,
+              particlesToShow: values.particlesToShow,
+              partialPageSize: values.partialPageSize,
+            })
+          },
+          deps: ['infinite', 'particlesToShow', 'partialPageSize'], // try to use proxy to detect deps
+        },
+        partialPageSize: {
+          fn: (values, computed) => {
+            return getPartialPageSize({
+              particlesToScroll: values.particlesToScroll,
+              particlesToShow: values.particlesToShow,
+              particlesCountWithoutClones: values.particlesCountWithoutClones,
+            })
+          },
+          deps: [
+            'particlesToScroll',
+            'particlesToShow',
+            'particlesCountWithoutClones',
+          ],
+        },
+        currentPageIndex: {
+          fn: (values, computed) => {
+            console.log('===> currentPageIndex', currentPageIndex)
+            // dispatch('pageChange', currentPageIndex)
+            return getCurrentPageIndexByCurrentParticleIndex({
+              currentParticleIndex: values.currentParticleIndex,
+              particlesCount: values.particlesCount,
+              clonesCountHead: clonesCount.head,
+              clonesCountTotal: clonesCount.total,
+              infinite: values.initialPageIndex,
+              particlesToScroll: values.particlesToScroll,
+            })
+          },
+          deps: [
+            'currentParticleIndex',
+            'particlesCount',
+            'initialPageIndex',
+            'particlesToScroll',
+            'clonesCount',
+          ],
+        },
+        pagesCount: {
+          fn: (values, computed) => {
+            return getPagesCountByParticlesCount({
+              infinite: values.infinite,
+              particlesCountWithoutClones: values.particlesCountWithoutClones,
+              particlesToScroll: values.particlesToScroll,
+            })
+          },
+          deps: [
+            'infinite',
+            'particlesCountWithoutClones',
+            'particlesToScroll',
+          ],
+        },
+      },
+      actions: {
+        prev: (values, setters, computed, actions) => {
+          const newCurrentParticleIndex = getParticleIndexByPageIndex({
+            infinite: values.infinite,
+            pageIndex: computed.currentPageIndex - 1,
+            clonesCountHead: computed.clonesCount.head,
+            clonesCountTail: computed.clonesCount.tail,
+            particlesToScroll: values.particlesToScroll,
+            particlesCount: values.particlesCount,
+            particlesToShow: values.particlesToShow,
+          })
+          setters.setCurrentParticleIndex(newCurrentParticleIndex)
+        },
+        next: (values, setters, computed, actions) => {
+          const newCurrentParticleIndex = getParticleIndexByPageIndex({
+            infinite: values.infinite,
+            pageIndex: computed.currentPageIndex + 1,
+            clonesCountHead: computed.clonesCount.head,
+            clonesCountTail: computed.clonesCount.tail,
+            particlesToScroll: values.particlesToScroll,
+            particlesCount: values.particlesCount,
+            particlesToShow: values.particlesToShow,
+          })
+          setters.setCurrentParticleIndex(newCurrentParticleIndex)
+        },
+        moveToParticle: (values, setters, computed, actions, args) => {
+          const newCurrentParticleIndex = getValueInRange(
+            0,
+            args.particleIndex,
+            values.particlesCount - 1
+          )
+          setters.setCurrentParticleIndex(newCurrentParticleIndex)
+        },
+      },
+    }
+  )
+
+  return _carousel
+}

src/components/Carousel/reactive.js

@@ -0,0 +1,80 @@
+// let data = {
+//   message: '',
+// }
+
+// let methods = {
+//   changeMessage: function () {
+//     data.message = document.getElementById('messageInput').value
+//   },
+// }
+
+// Code that has to run when a
+// reactive property changes it's value.
+let target = null
+
+class Dep {
+  constructor() {
+    this.subscribers = []
+  }
+  depend() {
+    // Saves target function into subscribers array
+    if (target && !this.subscribers.includes(target)) {
+      this.subscribers.push(target)
+    }
+  }
+  notify() {
+    // Replays target functions saved in the subscribers array
+    this.subscribers.forEach((sub) => sub())
+  }
+}
+
+let watch = function (func) {
+  // Here, a watcher is a function that encapsulates the code
+  // that needs to recorded/watched.
+  // PS: It just runs once, because after that, the target code is stored
+  // in the subscriber's list of the Dep() instance.
+  target = func // Then it assigns the function to target
+  target() // Run the target function
+  target = null // Reset target to null
+}
+
+// reactive(
+//   {
+//     message: '',
+//   },
+//   {
+//     renderFunction: (data) => {
+//       console.log(data.message)
+//     },
+//   }
+// )
+
+export const reactive = (data, watchers, methods) => {
+  const _data = {}
+
+  Object.keys(data).forEach((key) => {
+    let internalValue = data[key]
+
+    // Each property gets a dependency instance
+    const dep = new Dep()
+
+    Object.defineProperty(_data, key, {
+      get() {
+        console.log(`Getting value, ${internalValue}`)
+        dep.depend() // Saves the target function into the subscribers array
+        return internalValue
+      },
+      set(newVal) {
+        console.log(`Setting the internalValue to ${newVal}`)
+        internalValue = newVal
+        dep.notify() // Reruns saved target functions in the subscribers array
+      },
+    })
+  })
+
+  Object.entries(watchers).forEach(([watcherName, watcher]) => {
+    watch(() => watcher(_data))
+  })
+
+  return _data
+}

src/store.js

@@ -1,98 +0,0 @@
-import {
-  writable,
-} from 'svelte/store';
-import {
-  getParticleIndexByPageIndex,
-} from './utils/page'
-import {
-  getValueInRange,
-} from './utils/math'
-
-const initState = {
-  currentParticleIndex: 0,
-}
-
-function createStore() {
-  const { subscribe, set, update } = writable(initState);
-
-  function init(initialParticleIndex) {
-    set({
-      ...initState,
-      currentParticleIndex: initialParticleIndex,
-    })
-  }
-
-  function moveToParticle({
-    particleIndex,
-    particlesCount,
-  }) {
-    update(store => {
-      return {
-        ...store,
-        currentParticleIndex: getValueInRange(0, particleIndex, particlesCount - 1),
-      }
-    })
-  }
-
-  function next({
-    infinite,
-    currentPageIndex,
-    particlesCount,
-    particlesToScroll,
-    particlesToShow,
-    clonesCountHead,
-    clonesCountTail,
-  }) {
-    update(store => {
-      const newCurrentParticleIndex = getParticleIndexByPageIndex({
-        infinite,
-        pageIndex: currentPageIndex + 1,
-        clonesCountHead,
-        clonesCountTail,
-        particlesToScroll,
-        particlesCount,
-        particlesToShow,
-      })
-      return {
-        ...store,
-        currentParticleIndex: newCurrentParticleIndex,
-      }
-    })
-  }
-
-  function prev({
-    infinite,
-    currentPageIndex,
-    clonesCountHead,
-    clonesCountTail,
-    particlesToScroll,
-    particlesCount,
-    particlesToShow,
-  }) {
-    update(store => {
-      const newCurrentParticleIndex = getParticleIndexByPageIndex({
-        infinite,
-        pageIndex: currentPageIndex - 1,
-        clonesCountHead,
-        clonesCountTail,
-        particlesToScroll,
-        particlesCount,
-        particlesToShow,
-      })
-      return {
-        ...store,
-        currentParticleIndex: newCurrentParticleIndex,
-      }
-    })
-  }
-
-  return {
-    subscribe,
-    next,
-    prev,
-    init,
-    moveToParticle,
-  };
-}
-
-export { createStore };