From 83f88c1ea5f35bc6a73a745ea805190fa065236b Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Tue, 14 Nov 2023 14:32:22 +0100
Subject: [PATCH] fix: avoid  recursive updates when resizing the window (#81)

* fix: avoid  recursive updates when resizing the window

* fix: added watchers back for scene and renderer
---
 .gitignore                      |  3 ++-
 playground-nuxt/nuxt.config.ts  |  2 +-
 playground-nuxt/pages/index.vue |  2 +-
 src/core/EffectComposer.vue     | 20 ++++++++------------
 vite.config.ts                  |  7 ++++---
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/.gitignore b/.gitignore
index 675147fe..98a12c71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 docs/.vitepress/dist/
-docs/.vitepress/cache/
\ No newline at end of file
+docs/.vitepress/cache/
+stats.html
\ No newline at end of file
diff --git a/playground-nuxt/nuxt.config.ts b/playground-nuxt/nuxt.config.ts
index 6b636066..2f63ddb8 100644
--- a/playground-nuxt/nuxt.config.ts
+++ b/playground-nuxt/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
       alias: {
         '@tresjs/post-processing': resolve(__dirname, '../src/'),
       },
-      dedupe: ['three', '@tresjs/core'],
+      dedupe: ['three', '@tresjs/core', '@vueuse/core'],
     },
   },
 })
diff --git a/playground-nuxt/pages/index.vue b/playground-nuxt/pages/index.vue
index 8b81a3c5..e4aeb471 100644
--- a/playground-nuxt/pages/index.vue
+++ b/playground-nuxt/pages/index.vue
@@ -39,7 +39,7 @@ const bloomParams = reactive({
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer :depth-buffer="true">
+      <EffectComposer>
         <Bloom />
       </EffectComposer>
     </Suspense>
diff --git a/src/core/EffectComposer.vue b/src/core/EffectComposer.vue
index 7afca6d7..392c0523 100644
--- a/src/core/EffectComposer.vue
+++ b/src/core/EffectComposer.vue
@@ -6,7 +6,7 @@ import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass
 
 import { isWebGL2Available } from 'three-stdlib'
 import type { ShallowRef } from 'vue'
-import { computed, provide, shallowRef, watch, onUnmounted, watchEffect, onMounted } from 'vue'
+import { computed, provide, shallowRef, watch, onUnmounted } from 'vue'
 import { effectComposerInjectionKey } from './injectionKeys'
 
 export interface EffectComposerProps {
@@ -56,11 +56,6 @@ const setNormalPass = () => {
   }
 }
 
-watchEffect(() => {
-  if (effectComposer.value && sizes.width.value && sizes.height.value)
-    effectComposer.value.setSize(sizes.width.value, sizes.height.value)
-})
-
 const effectComposerParams = computed(() => {
   const plainEffectComposer = new EffectComposerImpl()
   const params = {
@@ -88,14 +83,15 @@ const initEffectComposer = () => {
   if (!props.disableNormalPass) setNormalPass()
 }
 
-let stop = () => { } // defining this prevents error in watcher
+watch([renderer, scene, camera, () => props.disableNormalPass], () => {
+  if (!sizes.width.value || !sizes.height.value ) return
+  initEffectComposer()
+})
 
-stop = watch([sizes.height, sizes.width], () => {
+watch(() => [sizes.width.value, sizes.height.value], ([width, height]) => {
   // effect composer should only live once the canvas has a size > 0
-  if (!sizes.height.value && !sizes.width.value) return
-
-  watchEffect(initEffectComposer)
-  stop?.()
+  if (!width && !height) return
+  effectComposer.value ? effectComposer.value.setSize(width, height) : initEffectComposer()
 }, {
   immediate: true,
 })
diff --git a/vite.config.ts b/vite.config.ts
index 91999fdf..4ce56460 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
     alias: {
       '/@': resolve(__dirname, './src'),
     },
-    dedupe: ['@tresjs/core'],
+    dedupe: ['@tresjs/core', '@vueuse/core'],
   },
   plugins: [
     vue({
@@ -61,7 +61,7 @@ export default defineConfig({
           open: false,
         }),
       ],
-      external: ['three', 'vue', '@tresjs/core', 'postprocessing'],
+      external: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'],
       output: {
         exports: 'named',
         // Provide global variables to use in the UMD build
@@ -71,11 +71,12 @@ export default defineConfig({
           three: 'Three',
           vue: 'Vue',
           postprocessing: 'Postprocessing',
+          '@vueuse/core': 'VueUseCore',
         },
       },
     },
   },
   optimizeDeps: {
-    exclude: ['three', 'vue', '@tresjs/core', 'postprocessing'],
+    exclude: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'],
   },
 })