feat: prop types exposure (#136)

* added type export to try out

* added type exports

---------

Co-authored-by: Tino Koch <>

Author: Tinoooo

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>(),
   {

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()
 

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)

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,

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)

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,

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,
 }

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)

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(() =>

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