Improve Vue lifecycle integration (#5)

* Improve vue lifecycle usage

* Update .editorconfig and ran lint to  comply with nuxt code style

* removed unused

* upgraded packages

* lock update

---------

Co-authored-by: Simon Goetz <simon@milkshake.studio>

Author: felixdenoix

.editorconfig

@@ -1,7 +1,7 @@
 root = true
 
 [*]
-indent_size = 3
+indent_size = 2
 indent_style = space
 end_of_line = lf
 charset = utf-8

package.json

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

playground/app.vue

@@ -1,51 +1,35 @@
 <template>
-  <lenis id="test" ref="lenisRef" :options="vsOptions" @scroll="scrollEmitter">
-    <h1>hello world</h1>
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-  </lenis>
+  <div>
+    <header>
+      <h1>Nuxt Lenis scroller</h1>
+      <nav>
+        <nuxt-link to="/">
+          Index
+        </nuxt-link> &nbsp;
+        <nuxt-link to="/about">
+          About
+        </nuxt-link>
+      </nav>
+    </header>
+    <nuxt-page />
+  </div>
 </template>
 
 <script setup>
-import { ref, inject, watch, onMounted } from 'vue'
-const scrollState = inject('scrollState')
-const lenisRef = ref(null)
-const vsOptions = ref({
-  duration: .2,
-  direction: 'Horizontal',
-  touchMultiplier: 20,
-  infinite: false
-})
 
-watch(scrollState, async (val) => {
-  console.log('scrollState', val)
-})
-
-const scrollEmitter = (val) => {
-  console.log('scrollEmitter', val)
-}
-
-onMounted(() => {
-  console.log('ref', lenisRef.value)
-})
 </script>
 
 <style>
-#test div {
-   height: 50vh;
-   margin-bottom: 300px;
-   background: red;
-   width: 100%;
+* {
+   box-sizing: border-box;
+}
+div {
+   padding: 10px;
+}
+
+header {
+   display: flex;
+   justify-content: space-between;
+   align-items: baseline;
 }
 </style>

playground/components/BaseChild.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+   height: {
+      type: String,
+      default: '10vh',
+   },
+   color: {
+      type: String,
+      default: 'rebeccaPurple'
+   }
+})
+</script>
+
+<template>
+   <div>
+      <p>I'm the BaseChild component. My color and height can change based on my props</p>
+   </div>
+</template>
+
+<style scoped>
+div {
+   padding: 10px;
+   width: 50vw;
+   height: v-bind(props.height);
+   background-color: v-bind(props.color);
+}
+</style>

playground/pages/about.vue

@@ -0,0 +1,14 @@
+<script>
+</script>
+
+<template>
+  <div>
+    <h2>About page</h2>
+    <p>
+      nothing special around here, just a page to trigger the lenis component lifecycle methods on the index page.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+</style>

playground/pages/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <lenis
+  id="test"
+  ref="lenisRef"
+  :options="vsOptions"
+  @scroll="scrollEmitter">
+    <h2>Index Page</h2>
+
+    <p>Playground for lenis scroll plugin for nuxt</p>
+
+    <div>
+      <p>
+        A little select to trigger the onUpdate hook in the lenis component and trigger the resize method on the lenis
+        instance :
+        <select
+          id="selectedBaseChildOption"
+          v-model="selectedBaseChildOption"
+          name="selectedBaseChildOption"
+        >
+          <option v-for="(_, idx) in baseChildOptions" :key="_" :value="idx">
+            {{ _.height }} - {{ _.color }}
+          </option>
+        </select>
+      </p>
+      <BaseChild v-bind="baseChildOptions[selectedBaseChildOption]" />
+    </div>
+
+    <div />
+    <div />
+    <div />
+
+    <div class="fixed">
+      <button @click="changeOptions">
+        Change scrollOptions
+      </button>
+      <button @click="showScrollSstate = !showScrollSstate">
+        {{ showScrollSstate ? 'hide' : 'show' }} scrollState
+      </button>
+      <div v-if="showScrollSstate">
+        <pre class="nopointer">{{
+               scrollState
+        }}</pre>
+      </div>
+    </div>
+  </lenis>
+</template>
+
+<script setup>
+import { ref, reactive, inject, watch, onMounted } from 'vue'
+import BaseChild from '../components/BaseChild'
+
+const scrollState = inject('scrollState')
+const lenisRef = ref(null)
+const vsOptions = reactive({
+  duration: 0.2,
+  direction: 'Horizontal',
+  touchMultiplier: 20,
+  infinite: false
+})
+
+const baseChildOptions = [
+  {
+    height: '10vh',
+    color: 'rebeccapurple'
+  },
+  {
+    height: '80vh',
+    color: 'lime'
+  },
+  {
+    height: '180vh',
+    color: 'yellow'
+  }
+]
+const selectedBaseChildOption = ref(0)
+const showScrollSstate = ref(false)
+
+watch(scrollState, (val) => {
+  console.log('scrollState', val)
+})
+
+watch(vsOptions, (newVal) => {
+  console.log('vsOptions newVal', newVal)
+})
+
+const scrollEmitter = (val) => {
+  console.log('scrollEmitter', val)
+}
+
+const changeOptions = () => {
+  console.log('🐯 changing options')
+  vsOptions.duration = vsOptions.duration > 5 ? 0.1 : 10
+}
+
+onMounted(() => {
+  console.log('Lenis Component ref :', lenisRef.value)
+})
+</script>
+
+<style>
+#test>div {
+   min-height: 50vh;
+   margin-bottom: 300px;
+   background: red;
+   width: 100%;
+}
+
+.fixed {
+   position: fixed;
+   top: 100px;
+   right: 20px;
+   max-width: 50vw;
+   background-color: rgba(255, 255, 255, 0.718);
+   border: 1px solid #000;
+   display: flex;
+   flex-direction: column;
+   align-items: flex-end;
+}
+
+.nopointer {
+   pointer-events: none;
+}
+</style>

src/module.ts

@@ -1,4 +1,3 @@
-import { fileURLToPath } from 'url'
 import {
   addComponent,
   defineNuxtModule,
@@ -22,7 +21,7 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     addPlugin: true
   },
-  async setup (options, nuxt) {
+  setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
     addImports([
       {

src/runtime/components/lenis.vue

@@ -6,69 +6,77 @@
 
 <script>
 import {
+   computed,
    defineComponent,
-   ref,
-   onMounted,
-   onBeforeUnmount,
    inject,
+   onBeforeUnmount,
+   onMounted,
    onUpdated,
-   reactive
+   ref,
+   toRefs,
+   watch,
 } from "vue";
+
 export default defineComponent({
    props: ["options"],
-   setup({ options }, { emit }) {
+   setup(props, { emit }) {
       const Lenis = inject("Lenis");
       const setScrollState = inject("setScrollState");
       const setLenis = inject("setLenis");
       const lenisVS = ref(0);
+      const lenisRaf = ref(null);
       const lenisContent = ref(null);
+      const {options} = toRefs(props)
+
       /**
        * Starting options - for full list of options visit https://github.com/studio-freight/lenis
        */
-      const lenisOptions = reactive(
-         Object.assign(
-            {},
-            {
-               duration: 1.2,
-               easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-               direction: "vertical",
-               gestureDirection: "vertical",
-               smooth: true,
-               mouseMultiplier: 1,
-               smoothTouch: false,
-               touchMultiplier: 2,
-               infinite: false,
-            },
-            options || {}
-         )
-      );
+      const lenisOptions = computed(() => {
+         return {
+            duration: 1.2,
+            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+            direction: "vertical",
+            gestureDirection: "vertical",
+            smooth: true,
+            mouseMultiplier: 1,
+            smoothTouch: false,
+            touchMultiplier: 2,
+            infinite: false,
+            ...options.value
+         }
+      });
 
       // On mounted set new Lenis instance
       onMounted(() => {
          initLenis();
       });
+
       // Destroy on unmount
       onBeforeUnmount(() => {
          destroyLenis();
       });
 
       onUpdated(() => {
          if (!lenisVS.value) return;
-         lenisVS.value.off("scroll");
-         lenisVS.value.destroy();
-         lenisVS.value = new Lenis();
+         if (!lenisOptions.autoResize) lenisVS.value.resize();
       });
 
+      watch(lenisOptions, (newVal) => {
+         if (!lenisVS.value) return;
+         destroyLenis();
+         initLenis();
+      })
+
       const initLenis = () => {
          if (process.client) {
-            lenisVS.value = new Lenis(lenisOptions);
+            lenisVS.value = new Lenis(lenisOptions.value);
             lenisVS.value.on("scroll", (scrollData) => {
                setScrollState(scrollData);
                emit("scroll", scrollData);
             });
             setLenis(lenisVS.value);
             emit("initiated", { lenis: lenisVS.value });
-            requestAnimationFrame(raf);
+            lenisRaf.value = requestAnimationFrame(raf);
          } else {
             throw new Error("Process Client is false");
          }
@@ -85,7 +93,9 @@ export default defineComponent({
          setScrollState(false);
          lenisVS.value.off("scroll");
          lenisVS.value.destroy();
+         cancelAnimationFrame(lenisRaf.value);
       };
+
       return {
          destroyLenis,
          initLenis,