fix!: unified-exports-suffix-pmndrs-effects (#154)

* fix!: restructure post-processing module and update playground examples

BREAKING CHANGE: Consolidated post-processing effects under a unified namespace (`@tresjs/post-processing`). Pmndrs `EffectComposer` is now `EffectComposerPmndrs`, same for all the effects and composables under `src/core/pmndrs`  to avoid name collisions

* chore: remove nuxt playground

* docs: updated docs to breaking changes

* chore: update deps and tsconfig for docs

* fix: adjusted aliases in vite config

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

Author: alvarosabu

docs/.vitepress/config.ts

@@ -88,8 +88,7 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'),
-        '@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'),
+        '@tresjs/post-processing': resolve(__dirname, '../../src'),
       },
       dedupe: ['three', '@tresjs/core'],
     },

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { Color } from 'three'
 import { reactive } from 'vue'
@@ -48,9 +48,9 @@ const { effectComposer } = useRouteDisposal()
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Bloom v-bind="bloomParams" />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <BloomPmndrs v-bind="bloomParams" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { Backdrop } from '@tresjs/cientos'
-import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 import '@tresjs/leches/styles'
 
 import Ducky from '../Ducky.vue'
@@ -57,12 +58,12 @@ const effectParams = ref({
       cast-shadow
     />
 
-    <EffectComposer ref="effectComposer">
-      <DepthOfField
+    <EffectComposerPmndrs ref="effectComposer">
+      <DepthOfFieldPmndrs
         :bokeh-scale="effectParams.bokehScale"
         :focus-distance="effectParams.focusDistance"
         :focus-range="effectParams.focusRange"
       />
-    </EffectComposer>
+    </EffectComposerPmndrs>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Text3D } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 
 import { Color } from 'three'
 
@@ -44,9 +44,9 @@ const { effectComposer } = useRouteDisposal()
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Glitch />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <GlitchPmndrs />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Noise } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, NoisePmndrs } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
@@ -27,12 +27,12 @@ const { effectComposer } = useRouteDisposal()
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Noise
+      <EffectComposerPmndrs ref="effectComposer">
+        <NoisePmndrs
           premultiply
           :blend-function="BlendFunction.SCREEN"
         />
-      </EffectComposer>
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
 import type { Intersection, Object3D } from 'three'
 import { NoToneMapping } from 'three'
 import { ref } from 'vue'
@@ -58,16 +58,15 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Outline
+      <EffectComposerPmndrs ref="effectComposer">
+        <OutlinePmndrs
           :outlined-objects="outlinedObjects"
-
           :edge-strength="200000"
           :pulse-speed="2"
           visible-edge-color="#ffff00"
           :kernel-size="3"
         />
-      </EffectComposer>
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
@@ -46,9 +46,9 @@ const { effectComposer } = useRouteDisposal()
     />
 
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Pixelation :granularity="8" />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <PixelationPmndrs :granularity="8" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing/pmndrs'
+import { DepthOfFieldPmndrs, EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
@@ -29,10 +29,10 @@ const { effectComposer } = useRouteDisposal()
     <Suspense>
       <BlenderCube />
     </Suspense>
-    <EffectComposer ref="effectComposer">
-      <DepthOfField :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
-      <Vignette :darkness="0.9" :offset="0.3" />
-    </EffectComposer>
+    <EffectComposerPmndrs ref="effectComposer">
+      <DepthOfFieldPmndrs :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
+      <VignettePmndrs :darkness="0.9" :offset="0.3" />
+    </EffectComposerPmndrs>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/three/GlitchThreeDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Text3D } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing/three'
+import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
 import { Color } from 'three'
 

docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Halftone } from '@tresjs/post-processing/three'
+import { EffectComposer, Halftone } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'