From bd6ff0614f2798acc1bb6553b6b3be5910b38735 Mon Sep 17 00:00:00 2001
From: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:41:36 +0200
Subject: [PATCH] feat: prop types exposure (#136)

* added type export to try out

* added type exports

---------

Co-authored-by: Tino Koch <>
---
 src/core/pmndrs/Bloom.vue         |  4 +++-
 src/core/pmndrs/DepthOfField.vue  |  4 +++-
 src/core/pmndrs/Glitch.vue        |  4 +++-
 src/core/pmndrs/Noise.vue         |  4 +++-
 src/core/pmndrs/Pixelation.vue    |  4 +++-
 src/core/pmndrs/Vignette.vue      |  4 +++-
 src/core/pmndrs/index.ts          | 27 +++++++++++++++++++--------
 src/core/three/EffectComposer.vue | 15 +++++++++------
 src/core/three/Halftone.vue       |  4 ++--
 src/core/three/SMAA.vue           | 10 +++++++---
 src/core/three/index.ts           | 22 ++++++++++++++++------
 11 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/src/core/pmndrs/Bloom.vue b/src/core/pmndrs/Bloom.vue
index 68965be1..25622350 100644
--- a/src/core/pmndrs/Bloom.vue
+++ b/src/core/pmndrs/Bloom.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts">
 import type { BlendFunction, KernelSize } from 'postprocessing'
 import { BloomEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
@@ -57,7 +57,9 @@ export interface BloomProps {
    */
   mipmapBlur?: boolean
 }
+</script>
 
+<script setup lang="ts">
 const props = withDefaults(
   defineProps<BloomProps>(),
   {
diff --git a/src/core/pmndrs/DepthOfField.vue b/src/core/pmndrs/DepthOfField.vue
index 228dc7b7..3c26f4b3 100644
--- a/src/core/pmndrs/DepthOfField.vue
+++ b/src/core/pmndrs/DepthOfField.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts">
 import type { BlendFunction } from 'postprocessing'
 import { useTresContext } from '@tresjs/core'
 import { DepthOfFieldEffect } from 'postprocessing'
@@ -40,7 +40,9 @@ export interface DepthOfFieldProps {
   resolutionX?: number
   resolutionY?: number
 }
+</script>
 
+<script lang="ts" setup>
 const props = defineProps<DepthOfFieldProps>()
 const { camera } = useTresContext()
 
diff --git a/src/core/pmndrs/Glitch.vue b/src/core/pmndrs/Glitch.vue
index 1746ae19..9937e10c 100644
--- a/src/core/pmndrs/Glitch.vue
+++ b/src/core/pmndrs/Glitch.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts">
 import type { BlendFunction } from 'postprocessing'
 import type { Texture, Vector2 } from 'three'
 import { useLoop } from '@tresjs/core'
@@ -52,7 +52,9 @@ export interface GlitchProps {
    */
   dtSize?: number
 }
+</script>
 
+<script setup lang="ts">
 const props = defineProps<GlitchProps>()
 
 const { pass, effect } = useEffect(() => new GlitchEffect(props), props)
diff --git a/src/core/pmndrs/Noise.vue b/src/core/pmndrs/Noise.vue
index c2f74cc8..a0a626ad 100644
--- a/src/core/pmndrs/Noise.vue
+++ b/src/core/pmndrs/Noise.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { useLoop } from '@tresjs/core'
 import { BlendFunction, NoiseEffect } from 'postprocessing'
 import { omit } from '../../util/object'
@@ -12,7 +12,9 @@ export interface NoiseProps {
   premultiply?: boolean
   blendFunction?: BlendFunction
 }
+</script>
 
+<script lang="ts" setup>
 const props = withDefaults(defineProps<NoiseProps>(), {
   premultiply: false,
   blendFunction: BlendFunction.SCREEN,
diff --git a/src/core/pmndrs/Pixelation.vue b/src/core/pmndrs/Pixelation.vue
index 95d7ea0a..64d7d14b 100644
--- a/src/core/pmndrs/Pixelation.vue
+++ b/src/core/pmndrs/Pixelation.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { PixelationEffect } from 'postprocessing'
 import { makePropWatchersUsingAllProps } from '../../util/prop'
 import { useEffect } from './composables/useEffect'
@@ -9,7 +9,9 @@ export interface PixelationProps {
    */
   granularity?: number
 }
+</script>
 
+<script lang="ts" setup>
 const props = defineProps<PixelationProps>()
 
 const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity), props)
diff --git a/src/core/pmndrs/Vignette.vue b/src/core/pmndrs/Vignette.vue
index ea52ca71..0016fe0c 100644
--- a/src/core/pmndrs/Vignette.vue
+++ b/src/core/pmndrs/Vignette.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { BlendFunction, VignetteEffect, VignetteTechnique } from 'postprocessing'
 import { omit } from '../../util/object'
 import { makePropWatchersUsingAllProps } from '../../util/prop'
@@ -13,7 +13,9 @@ export interface VignetteProps {
   offset: number
   darkness: number
 }
+</script>
 
+<script lang="ts" setup>
 const props = withDefaults(defineProps<VignetteProps>(), {
   technique: VignetteTechnique.DEFAULT,
   blendFunction: BlendFunction.NORMAL,
diff --git a/src/core/pmndrs/index.ts b/src/core/pmndrs/index.ts
index fa42cf57..79891ddd 100644
--- a/src/core/pmndrs/index.ts
+++ b/src/core/pmndrs/index.ts
@@ -1,12 +1,14 @@
-import Bloom from './Bloom.vue'
+/* eslint-disable perfectionist/sort-named-exports */
+
+import Bloom, { type BloomProps } from './Bloom.vue'
 import { useEffect } from './composables/useEffect'
-import DepthOfField from './DepthOfField.vue'
-import EffectComposer from './EffectComposer.vue'
-import Glitch from './Glitch.vue'
-import Noise from './Noise.vue'
-import Outline from './Outline.vue'
-import Pixelation from './Pixelation.vue'
-import Vignette from './Vignette.vue'
+import DepthOfField, { type DepthOfFieldProps } from './DepthOfField.vue'
+import EffectComposer, { type EffectComposerProps } from './EffectComposer.vue'
+import Glitch, { type GlitchProps } from './Glitch.vue'
+import Noise, { type NoiseProps } from './Noise.vue'
+import Outline, { type OutlineProps } from './Outline.vue'
+import Pixelation, { type PixelationProps } from './Pixelation.vue'
+import Vignette, { type VignetteProps } from './Vignette.vue'
 
 export {
   Bloom,
@@ -18,4 +20,13 @@ export {
   Pixelation,
   useEffect,
   Vignette,
+
+  BloomProps,
+  DepthOfFieldProps,
+  EffectComposerProps,
+  GlitchProps,
+  NoiseProps,
+  OutlineProps,
+  PixelationProps,
+  VignetteProps,
 }
diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue
index 7a1b2285..162dab9f 100644
--- a/src/core/three/EffectComposer.vue
+++ b/src/core/three/EffectComposer.vue
@@ -6,15 +6,18 @@ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
 import { type InjectionKey, onUnmounted, provide, type ShallowRef, shallowRef, watchEffect } from 'vue'
 
 export const effectComposerInjectionKey: InjectionKey<ShallowRef<EffectComposer | null>> = Symbol('effectComposerThree')
-</script>
 
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
+export interface EffectComposerProps {
   enabled?: boolean
   withoutRenderPass?: boolean
-}>(), {
-  enabled: true,
-})
+}
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<EffectComposerProps>(),
+  { enabled: true },
+)
 
 const effectComposer: ShallowRef<EffectComposer | null> = shallowRef(null)
 provide(effectComposerInjectionKey, effectComposer)
diff --git a/src/core/three/Halftone.vue b/src/core/three/Halftone.vue
index c7fc122d..941d7adf 100644
--- a/src/core/three/Halftone.vue
+++ b/src/core/three/Halftone.vue
@@ -13,7 +13,7 @@ export enum HalftoneShape {
   Square = 4,
 }
 
-interface HalftonePassProps {
+export interface HalftoneProps {
   shape?: HalftoneShape
   radius?: number
   rotateR?: number
@@ -27,7 +27,7 @@ interface HalftonePassProps {
 </script>
 
 <script lang="ts" setup>
-const props = defineProps<HalftonePassProps>()
+const props = defineProps<HalftoneProps>()
 const { sizes } = useTresContext()
 
 const shakedProps = computed(() =>
diff --git a/src/core/three/SMAA.vue b/src/core/three/SMAA.vue
index 65ed8c47..e6253e85 100644
--- a/src/core/three/SMAA.vue
+++ b/src/core/three/SMAA.vue
@@ -1,14 +1,18 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { useTresContext } from '@tresjs/core'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js'
 import { computed, watchEffect } from 'vue'
 import { useEffect } from './composables/useEffect'
 
-const props = defineProps<{
+export interface SMAAProps {
   width?: number
   height?: number
-}>()
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<SMAAProps>()
 
 const { sizes } = useTresContext()
 const { pixelRatio } = useDevicePixelRatio() // the renderers pixel ratio is not used because it is not reactive
diff --git a/src/core/three/index.ts b/src/core/three/index.ts
index 6a123979..fff6e0e2 100644
--- a/src/core/three/index.ts
+++ b/src/core/three/index.ts
@@ -1,19 +1,29 @@
+/* eslint-disable perfectionist/sort-named-exports */
 import { useEffect } from './composables/useEffect'
-import EffectComposer from './EffectComposer.vue'
-import Glitch from './Glitch.vue'
-import Halftone from './Halftone.vue'
+import EffectComposer, { type EffectComposerProps } from './EffectComposer.vue'
+import Glitch, { type GlitchProps } from './Glitch.vue'
+import Halftone, { type HalftoneProps } from './Halftone.vue'
+import Pixelation, { type PixelationProps } from './Pixelation.vue'
 import Output from './Output.vue'
-import Pixelation from './Pixelation.vue'
-import SMAA from './SMAA.vue'
-import UnrealBloom from './UnrealBloom.vue'
+import SMAA, { type SMAAProps } from './SMAA.vue'
+import UnrealBloom, { type UnrealBloomProps } from './UnrealBloom.vue'
 
 export {
   EffectComposer,
+
   Glitch,
   Halftone,
   Output,
   Pixelation,
   SMAA,
   UnrealBloom,
+
   useEffect,
+
+  EffectComposerProps,
+  GlitchProps,
+  HalftoneProps,
+  PixelationProps,
+  SMAAProps,
+  UnrealBloomProps,
 }