feat: update core to v4 (#109)

* chore: new linter

* feat: update to v4, `useLoop` and remove disable render

* feat: render emit and advance playgroudn for render modes

* chore: remove render event on TresCanvas

* chore: fix lint

* chore(ci): updated node version to 20 on lint action

* chore: release v1.0.0-next.0

* chore: changed file structure in playground a bit, updated dependency

* fix: bloom effect in playground

* chore: remove empty templates

* test to make linter happy

* tiny eslint fix

* linting dependency test

* restored eslint dependency version

---------

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

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4

CHANGELOG.md

@@ -1,5 +1,14 @@
 
 
+## [1.0.0-next.0](https://github.com/Tresjs/post-processing/compare/0.7.1...1.0.0-next.0) (2024-05-21)
+
+
+### Features
+
+* export useEffect composable ([#105](https://github.com/Tresjs/post-processing/issues/105)) ([b7810ba](https://github.com/Tresjs/post-processing/commit/b7810ba2864e70516c95b9866c2ea5d02a8f9b9d))
+* render emit and advance playgroudn for render modes ([5d256fc](https://github.com/Tresjs/post-processing/commit/5d256fcc5e40582e0f87c8cc1ec46fbd9a007435))
+* update to v4, `useLoop` and remove disable render ([544fb39](https://github.com/Tresjs/post-processing/commit/544fb39be3af7f71ddf994f14789215351cec569))
+
 ## [0.7.1](https://github.com/Tresjs/post-processing/compare/0.7.0...0.7.1) (2024-03-18)
 
 

CODE_OF_CONDUCT.md

@@ -28,16 +28,16 @@ Project maintainers are responsible for clarifying the standards of acceptable b
 
 Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
 
-## Scope
+## Scope
 
 This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
 
-## Enforcement
+## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [TresJS Discord](https://discord.gg/UCr96AQmWn). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.
 
-## Attribution
+## Attribution
 
 This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

docs/.vitepress/config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
         content: '/og-banner.png',
       },
     ],
-    ['script', { defer: 'true', 'data-site': 'OWBUVCJK', src: 'https://cdn.usefathom.com/script.js' }],
+    ['script', { 'defer': 'true', 'data-site': 'OWBUVCJK', 'src': 'https://cdn.usefathom.com/script.js' }],
   ],
   themeConfig: {
     logo: '/logo.svg',

docs/.vitepress/theme/TresLayout.vue

@@ -1,5 +1,4 @@
 <script setup>
-// eslint-disable-next-line import/no-named-as-default
 import DefaultTheme from 'vitepress/theme'
 import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 

docs/.vitepress/theme/components/BlenderCube.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 
-const { nodes } 
+const { nodes }
 = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube
 </script>
 
 <template>
   <primitive :object="model" />
-</template>
+</template>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Color } from 'three'
-import { reactive, ref } from 'vue'
+import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BlendFunction } from 'postprocessing'
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
+import { Bloom, EffectComposer } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

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

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, DepthOfField } from '@tresjs/post-processing'
+import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/DocsDemo.vue

@@ -8,8 +8,8 @@
       style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
     >
       <Suspense>
-        <slot />
+        <slot></slot>
       </Suspense>
-    </div> 
+    </div>
   </ClientOnly>
-</template>
+</template>

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-///<reference types="vite-svg-loader" />
+/// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, ref } from 'vue'
 import Triangle from '../assets/triangle.svg'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
@@ -35,4 +35,4 @@ const { effectComposer } = useRouteDisposal()
       </EffectComposer>
     </Suspense>
   </TresCanvas>
-</template>
+</template>

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

@@ -4,7 +4,7 @@ import type { Intersection, Object3D } from 'three'
 import { NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { Outline, EffectComposer } from '@tresjs/post-processing'
+import { EffectComposer, Outline } from '@tresjs/post-processing'
 import { KernelSize } from 'postprocessing'
 
 import { TresLeches, useControls } from '@tresjs/leches'
@@ -23,9 +23,8 @@ const { effectComposer } = useRouteDisposal()
 const outlinedObjects = ref<Object3D[]>([])
 
 const toggleMeshSelectionState = ({ object }: Intersection) => {
-  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid))
-    outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid)
-  else outlinedObjects.value = [...outlinedObjects.value, object]
+  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid)) { outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid) }
+  else { outlinedObjects.value = [...outlinedObjects.value, object] }
 }
 
 const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useControls({
@@ -59,7 +58,6 @@ useRouteDisposal(effectComposer)
   <TresLeches />
   <TresCanvas
     v-bind="gl"
-    :disable-render="true"
   >
     <TresPerspectiveCamera
       :position="[1, 3, 3]"

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

@@ -3,7 +3,6 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
-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
@@ -15,7 +14,6 @@ const { effectComposer } = useRouteDisposal()
     clear-color="#121212"
     :alpha="false"
     :shadows="true"
-    :disable-render="true"
   >
     <TresPerspectiveCamera
       :position="[3, 2, 4]"
@@ -54,4 +52,3 @@ const { effectComposer } = useRouteDisposal()
     </Suspense>
   </TresCanvas>
 </template>
-

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
-import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
+import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
@@ -42,4 +42,4 @@ const { effectComposer } = useRouteDisposal()
     </EffectComposer>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
-</template>
+</template>

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

@@ -14,4 +14,4 @@ export function useRouteDisposal() {
   return {
     effectComposer,
   }
-}
+}

docs/.vitepress/theme/style.css

@@ -60,4 +60,4 @@
 
 .VPNavBarTitle .logo {
   height: 16px !important;
-}
+}

docs/guide/effects/bloom.md

@@ -10,7 +10,7 @@ Bloom is an effect that simulates the way that bright objects in the real world
 
 ```vue
 <script setup lang="ts">
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
+import { Bloom, EffectComposer } from '@tresjs/post-processing'
 </script>
 
 <template>
@@ -30,12 +30,12 @@ import { EffectComposer, Bloom } from '@tresjs/post-processing'
 
 | Prop                 | Description                                                                                          | Default                                                                                                                                        |
 | -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `blendFunction`      | The blend function of this effect. This prop is not reactive.                                        |  [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
+| `blendFunction`      | The blend function of this effect. This prop is not reactive.                                        | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
 | `intensity`          | The intensity of the bloom effect.                                                                   | `1`                                                                                                                                            |
 | `kernelSize`         | The kernel size.                                                                                     | `KernelSize.LARGE`                                                                                                                             |
 | `luminanceThreshold` | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. | `0.9`                                                                                                                                          |
 | `luminanceSmoothing` | Controls the smoothness of the luminance threshold. Range is [0, 1].                                 | `0.025`                                                                                                                                        |
 | `mipMapBlur`         | Enables mip map blur (UnrealBloom). This prop is not reactive.                                                                 | `false`                                                                                                                                        |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)
+see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)