fixed watcher

Author: Slgoetz

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v1.2.9
+- Fixed issue where watcher was not triggering
+- Made it cleaner for multiple instances. Removed need for `.value`
+
 ### v1.2.8
 - Updated the composable structure to fix the class issue caused by useState and private attributes
 - updated Lenis to the latest version

package.json

@@ -1,6 +1,6 @@
 {
    "name": "nuxt-lenis",
-   "version": "1.2.8",
+   "version": "1.2.9",
    "license": "MIT",
    "type": "module",
    "repository": {

playground/pages/index.vue

@@ -26,16 +26,16 @@
 
 <script setup>
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import { useLenis  } from "#imports";
+import { useLenis } from "#imports";
 // import { useLenis } from "#app";
-const { scrollState, lenis: lenisN, lenisInstance } = useLenis(false);
+const { scrollState, lenis: lenisN, lenisInstance } = useLenis();
 const lenisRef = ref(null);
 var lenisLocalVS = null;
 const vsOptions = reactive({});
 
 watch(
-   ()=>scrollState.value.wrapper,
-   ({scroll,...props}) => {
+   ()=>scrollState,
+   ({ scroll, ...props }) => {
       console.log("WATCHER", props);
    },
    { deep: true }
@@ -49,19 +49,22 @@ const scrollEmitter = (val) => {
    // console.log("scrollEmitter", val);
 };
 const stop = (val) => {
-   lenisN.wrapper.stop();
+   // lenisN.wrapper.stop();
+   lenisN.value.stop();
    // lenisLocalVS.stop();
 };
 const start = (val) => {
    // console.log("lenisVs", lenisVs.value);
-   lenisN.wrapper.start();
+   // lenisN.wrapper.start();
+   lenisN.value.start();
+   console.log(lenisN);
+   
    // lenisLocalVS.start();
 };
 
-const handleClick = () => { 
-   console.log("scrollState------", lenisN.wrapper);
-
-}
+const handleClick = () => {
+   console.log("scrollState------", lenisN);
+};
 
 const initiated = ({ lenis }) => (lenisLocalVS = lenis);
 const changeOptions = () => {
@@ -72,8 +75,8 @@ const changeOptions = () => {
 onMounted(() => {
    // console.log("Lenis Component ref :", lenisRef.value);
    // console.log("lenisTest------", lenisInstance("wrapper").isStopped);
-   // console.log("lenisN------", lenisN.wrapper);
-   console.log("scrollState------", scrollState.value.wrapper.scroll);
+   console.log("lenisN------", lenisN.value);
+   console.log("scrollState------", scrollState.value);
 });
 </script>
 

src/runtime/components/lenis.vue

@@ -67,14 +67,17 @@ watch(lenisOptions, (newVal) => {
 const initLenis = () => {
    if (process.client) {
       lenisVS = new Lenis(lenisOptions.value);
+      
+      setLenis(lenisVS, instanceId.value);
+      setScrollState(lenisVS, instanceId.value);
+
 
       lenisVS.on("scroll", (scrollData) => {
-         
          setScrollState(scrollData, instanceId.value);
          emit("scroll", scrollData);
       });
-      setLenis(lenisVS, instanceId.value);
-      setScrollState(lenisVS, instanceId.value);
+
+     
       emit("initiated", { lenis: lenisVS });
       lenisRaf = requestAnimationFrame(raf);
    } else {

src/runtime/composables/useLenis.ts

@@ -1,59 +1,46 @@
 import { useState } from "#app";
-import { computed, reactive } from "#imports";
-import { ref, readonly } from "vue";
+import { computed } from "#imports";
+
+var lenisVS: Array<Object | Function> = [];
 
-const lenisVS: Object = {};
-// const scrollState: Object = {};
-const ids: Array<Number> = [];
 export function useLenis(single: Boolean = true): Object {
    const scrollState = useState("scrollState", () => []);
+   // const lenisVS = useState("lenisVS", () => []);
+   const ids = useState("ids", () => []);
 
    const setScrollState = (newScrollState: Object, id: String | Number) => {
-      // NOTE: This is a workaround because of how useState can't handle classes
-      scrollState.value[id] = Object.assign(
-         {},
-         {
-            className: newScrollState?.className,
-            isHorizontal: newScrollState?.isHorizontal,
-            isLocked: newScrollState?.isLocked,
-            isScrolling: newScrollState?.isScrolling,
-            isSmooth: newScrollState?.isSmooth,
-            isStopped: newScrollState?.isStopped,
-            limit: newScrollState?.limit,
-            progress: newScrollState?.progress,
-            rootElement: newScrollState?.rootElement,
-            scroll: newScrollState?.scroll,
-            direction: newScrollState?.direction,
-            time: newScrollState?.time,
-            animatedScroll: newScrollState?.animatedScroll,
-            velocity: newScrollState?.velocity,
-            lastVelocity: newScrollState?.lastVelocity,
-            targetScroll: newScrollState?.targetScroll,
-         }
-      );
+      scrollState.value[id] = {
+         className: newScrollState?.className,
+         isHorizontal: newScrollState?.isHorizontal,
+         isLocked: newScrollState?.isLocked,
+         isScrolling: newScrollState?.isScrolling,
+         isSmooth: newScrollState?.isSmooth,
+         isStopped: newScrollState?.isStopped,
+         limit: newScrollState?.limit,
+         progress: newScrollState?.progress,
+         rootElement: newScrollState?.rootElement,
+         scroll: newScrollState?.scroll,
+         direction: newScrollState?.direction,
+         time: newScrollState?.time,
+         animatedScroll: newScrollState?.animatedScroll,
+         velocity: newScrollState?.velocity,
+         lastVelocity: newScrollState?.lastVelocity,
+         targetScroll: newScrollState?.targetScroll,
+      };
    };
    const setLenis = (virtualScroll: Object, id: String | Number) => {
       lenisVS[id] = virtualScroll;
-      ids.push(id);
+      ids.value.push(id);
    };
-
    const getScrollState = computed(() => {
-      return single ? scrollState.value[ids[0]] : scrollState.value;
+      return single ? scrollState.value[ids.value[0]] : scrollState.value;
    });
-
    const getLenis = computed(() => {
-      return single ? lenisVS[ids[0]] : lenisVS;
+      return single ? lenisVS[ids.value[0]] : lenisVS;
    });
-
-   const getLenisInstance = (id) => {
-      if (!id) return "no id provided";
-      return lenisVS[id];
-   };
-
    return {
-      scrollState: getScrollState,
-      lenis: getLenis.value,
-      lenisInstance: getLenisInstance,
+      scrollState: single ? getScrollState : getScrollState.value,
+      lenis: single ? getLenis : getLenis.value,
       setScrollState,
       setLenis,
    };