fixed types and restructured composable a bit

docs/.vitepress/theme/components/BloomDemo.vue

@@ -3,7 +3,6 @@ import { Color } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BlendFunction } from 'postprocessing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
@@ -25,8 +24,7 @@ const bloomParams = reactive({
 })
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>

docs/.vitepress/theme/components/DepthOfFieldDemo.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, DepthOfField } from '@tresjs/post-processing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
@@ -18,13 +17,11 @@ const toggleFocusDistance = () => {
 }
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
-  <button
-    class="
+  <button class="
       absolute
       rounded
       px-2 py-1
@@ -39,42 +36,23 @@ useRouteDisposal(effectComposer)
       active:bg-gray-400/50
       font-semibold
       transition-colors
-    "
-    @click="toggleFocusDistance"
-  >
+    " @click="toggleFocusDistance">
     toggle focus
   </button>
   <TresCanvas>
-    <TresPerspectiveCamera
-      :rotation="[-0.89, 1.28, 0.87]"
-      :position="[5.55, 1.57, 1.02]"
-    />
+    <TresPerspectiveCamera :rotation="[-0.89, 1.28, 0.87]" :position="[5.55, 1.57, 1.02]" />
     <TresMesh :position="[-2, 1, 0]">
-      <TresBoxGeometry
-        :width="3"
-        :height="3"
-        :depth="3"
-      />
+      <TresBoxGeometry :width="3" :height="3" :depth="3" />
       <TresMeshNormalMaterial />
     </TresMesh>
     <TresMesh :position="[3, 1, 0]">
-      <TresBoxGeometry
-        :width="3"
-        :height="3"
-        :depth="3"
-      />
+      <TresBoxGeometry :width="3" :height="3" :depth="3" />
       <TresMeshNormalMaterial />
     </TresMesh>
     <TresGridHelper />
     <EffectComposer ref="effectComposer">
-      <DepthOfField
-        ref="dofEffect"
-        :focus-distance="0.0012"
-        :world-focus-distance="2"
-        :world-focus-range="1"
-        :bokeh-scale="8"
-        :focus-range="0.005"
-      />
+      <DepthOfField ref="dofEffect" :focus-distance="0.0012" :world-focus-distance="2" :world-focus-range="1"
+        :bokeh-scale="8" :focus-range="0.005" />
     </EffectComposer>
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/GlitchDemo.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Color } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { Text3D } from '@tresjs/cientos'
 
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
@@ -17,8 +15,7 @@ const gl = {
 }
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>

docs/.vitepress/theme/components/NoiseDemo.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
@@ -19,8 +17,7 @@ const gl = {
 }
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>

docs/.vitepress/theme/components/OutlineDemo.vue

@@ -5,7 +5,6 @@ import { NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { Outline, EffectComposer } from '@tresjs/post-processing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 import { KernelSize } from 'postprocessing'
 
 import { TresLeches, useControls } from '@tresjs/leches'
@@ -19,7 +18,7 @@ const gl = {
   disableRender: true,
 }
 
-const effectComposer = ref<EffectComposerImpl | null>(null)
+const { effectComposer } = useRouteDisposal()
 
 const outlinedObjects = ref<Object3D[]>([])
 

docs/.vitepress/theme/components/PixelationDemo.vue

@@ -2,14 +2,12 @@
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 
 import { ref } from 'vue'
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>

docs/.vitepress/theme/components/VignetteDemo.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
-import type { EffectComposer as EffectComposerImpl } from 'postprocessing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
@@ -20,8 +18,7 @@ const gl = {
 }
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
-const effectComposer = ref<EffectComposerImpl | null>(null)
-useRouteDisposal(effectComposer)
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>

docs/.vitepress/theme/composables/useRouteDisposal.ts

@@ -1,10 +1,18 @@
-import { useRouter } from 'vitepress'
+import { ref } from 'vue'
 import { watch } from 'vue'
+import { useRouter } from 'vitepress'
+import type { EffectComposer } from '@tresjs/post-processing'
 
-export function useRouteDisposal(effectComposer) {
+export function useRouteDisposal() {
   const router = useRouter()
 
+  const effectComposer = ref<InstanceType<typeof EffectComposer> | null>(null)
+
   watch(() => router.route.data.relativePath, () => {
     effectComposer.value?.composer.dispose()
   })
+
+  return {
+    effectComposer
+  }
 }