docs: fixed broken docs, added new structure

Tresjs · Sep 28, 2024 · b812099 · b812099
1 parent dba4a70
commit b812099
Show file tree

Hide file tree

Showing 23 changed files with 1,218 additions and 1,206 deletions.
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -47,15 +47,21 @@ export default defineConfig({
         items: [{ text: 'Introduction', link: '/guide/' }],
       },
       {
-        text: 'Effects',
+        text: 'Pmndrs',
         items: [
-          { text: 'Bloom', link: '/guide/effects/bloom' },
-          { text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
-          { text: 'Glitch', link: '/guide/effects/glitch' },
-          { text: 'Noise', link: '/guide/effects/noise' },
-          { text: 'Outline', link: '/guide/effects/outline' },
-          { text: 'Pixelation', link: '/guide/effects/pixelation' },
-          { text: 'Vignette', link: '/guide/effects/vignette' },
+          { text: 'Bloom', link: '/guide/pmndrs/bloom' },
+          { text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' },
+          { text: 'Glitch', link: '/guide/pmndrs/glitch' },
+          { text: 'Noise', link: '/guide/pmndrs/noise' },
+          { text: 'Outline', link: '/guide/pmndrs/outline' },
+          { text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
+          { text: 'Vignette', link: '/guide/pmndrs/vignette' },
+        ],
+      },
+      {
+        text: 'Three',
+        items: [
+
         ],
       },
     ],
@@ -78,9 +84,10 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@tresjs/post-processing': resolve(__dirname, '../../dist/tres-postprocessing.js'),
+        '@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'),
+        '@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'),
       },
-      dedupe: ['three'],
+      dedupe: ['three', '@tresjs/core'],
     },
   },
   vue: {

diff --git a/....vitepress/theme/components/BloomDemo.vue → ...ress/theme/components/pmdrs/BloomDemo.vue b/....vitepress/theme/components/BloomDemo.vue → ...ress/theme/components/pmdrs/BloomDemo.vue
@@ -5,7 +5,7 @@ import { BlendFunction } from 'postprocessing'
 import { Color } from 'three'
 import { reactive } from 'vue'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#121212',

diff --git a/...ess/theme/components/DepthOfFieldDemo.vue → ...eme/components/pmdrs/DepthOfFieldDemo.vue b/...ess/theme/components/DepthOfFieldDemo.vue → ...eme/components/pmdrs/DepthOfFieldDemo.vue
@@ -4,7 +4,7 @@ import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
 import { gsap } from 'gsap'
 import { ref } from 'vue'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
 

diff --git a/...vitepress/theme/components/GlitchDemo.vue → ...ess/theme/components/pmdrs/GlitchDemo.vue b/...vitepress/theme/components/GlitchDemo.vue → ...ess/theme/components/pmdrs/GlitchDemo.vue
@@ -5,7 +5,7 @@ import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
 
 import { Color } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#121212',

diff --git a/....vitepress/theme/components/NoiseDemo.vue → ...ress/theme/components/pmdrs/NoiseDemo.vue b/....vitepress/theme/components/NoiseDemo.vue → ...ress/theme/components/pmdrs/NoiseDemo.vue
@@ -5,7 +5,7 @@ import { EffectComposer, Noise } from '@tresjs/post-processing/pmndrs'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#82DBC5',

diff --git a/...itepress/theme/components/OutlineDemo.vue → ...ss/theme/components/pmdrs/OutlineDemo.vue b/...itepress/theme/components/OutlineDemo.vue → ...ss/theme/components/pmdrs/OutlineDemo.vue
@@ -7,7 +7,7 @@ import { KernelSize } from 'postprocessing'
 import { NoToneMapping } from 'three'
 import { ref } from 'vue'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 import '@tresjs/leches/styles'
 

diff --git a/...press/theme/components/PixelationDemo.vue → ...theme/components/pmdrs/PixelationDemo.vue b/...press/theme/components/PixelationDemo.vue → ...theme/components/pmdrs/PixelationDemo.vue
@@ -3,7 +3,7 @@ import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
 const { effectComposer } = useRouteDisposal()

diff --git a/...tepress/theme/components/VignetteDemo.vue → ...s/theme/components/pmdrs/VignetteDemo.vue b/...tepress/theme/components/VignetteDemo.vue → ...s/theme/components/pmdrs/VignetteDemo.vue
@@ -4,9 +4,9 @@ import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing/pmndrs'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
-import BlenderCube from './BlenderCube.vue'
+import BlenderCube from '../BlenderCube.vue'
 
 const gl = {
   clearColor: '#4f4f4f',
@@ -30,15 +30,8 @@ const { effectComposer } = useRouteDisposal()
       <BlenderCube />
     </Suspense>
     <EffectComposer ref="effectComposer">
-      <DepthOfField
-        :focus-distance="0"
-        :focal-length="0.02"
-        :bokeh-scale="2"
-      />
-      <Vignette
-        :darkness="0.9"
-        :offset="0.3"
-      />
+      <DepthOfField :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
+      <Vignette :darkness="0.9" :offset="0.3" />
     </EffectComposer>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>

diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -1,23 +1,23 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
-    BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default']
-    DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default']
+    BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
+    DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
-    GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
+    GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
-    NoiseDemo: typeof import('./.vitepress/theme/components/NoiseDemo.vue')['default']
-    OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default']
-    PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
+    NoiseDemo: typeof import('./.vitepress/theme/components/pmdrs/NoiseDemo.vue')['default']
+    OutlineDemo: typeof import('./.vitepress/theme/components/pmdrs/OutlineDemo.vue')['default']
+    PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    VignetteDemo: typeof import('./.vitepress/theme/components/VignetteDemo.vue')['default']
+    VignetteDemo: typeof import('./.vitepress/theme/components/pmdrs/VignetteDemo.vue')['default']
   }
 }
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -4,7 +4,7 @@
 
 > Post-processing, in simple terms, consist in applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more. These effects can greatly enhance the overall look and feel of your projects, making them more immersive and visually captivating.
 
-The `post-processing` package leverages the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package , providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.
+The `post-processing` package leverages both the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package and native [Three.js post-processing effects](https://threejs.org/examples/?q=postprocessing#webgl_postprocessing). Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.
 
 Because Post-processing, is not an easy task, fortunate now it is 😜.
 
@@ -32,19 +32,39 @@ pnpm add @tresjs/post-processing
 
 ## Basic Usage
 
-```ts
-import { Bloom, DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
+You can import post-processing effects from both pmndrs and native Three.js.
+
+### Using native Three.js effects
+
+```html
+<script setup lang="ts">
+  import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing/three'
+</script>
+
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <EffectComposer>
+      <UnrealBloom />
+      <Glitch />
+    </EffectComposer>
+  </TresCanvas>
+</template>
 ```
 
-Now you can use the `EffectComposer` component in your scene.
+### Using pmndrs effects
 
 ```html
+<script setup lang="ts">
+  import { EffectComposer, Bloom, Glitch } from '@tresjs/post-processing/pmndrs'
+</script>
+
 <template>
   <TresCanvas shadows alpha>
     <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
     <EffectComposer>
-      <DepthOfField />
       <Bloom />
+      <Glitch />
     </EffectComposer>
   </TresCanvas>
 </template>

diff --git a/docs/guide/effects/bloom.md → docs/guide/pmndrs/bloom.md b/docs/guide/effects/bloom.md → docs/guide/pmndrs/bloom.md
diff --git a/docs/guide/effects/depth-of-field.md → docs/guide/pmndrs/depth-of-field.md b/docs/guide/effects/depth-of-field.md → docs/guide/pmndrs/depth-of-field.md
diff --git a/docs/guide/effects/glitch.md → docs/guide/pmndrs/glitch.md b/docs/guide/effects/glitch.md → docs/guide/pmndrs/glitch.md
diff --git a/docs/guide/effects/noise.md → docs/guide/pmndrs/noise.md b/docs/guide/effects/noise.md → docs/guide/pmndrs/noise.md
diff --git a/docs/guide/effects/outline.md → docs/guide/pmndrs/outline.md b/docs/guide/effects/outline.md → docs/guide/pmndrs/outline.md
diff --git a/docs/guide/effects/pixelation.md → docs/guide/pmndrs/pixelation.md b/docs/guide/effects/pixelation.md → docs/guide/pmndrs/pixelation.md
diff --git a/docs/guide/effects/vignette.md → docs/guide/pmndrs/vignette.md b/docs/guide/effects/vignette.md → docs/guide/pmndrs/vignette.md
diff --git a/docs/package.json b/docs/package.json
@@ -9,16 +9,16 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^3.6.0",
-    "@tresjs/core": "^3.5.1",
+    "@tresjs/cientos": "^4.0.2",
+    "@tresjs/core": "^4.2.10",
     "@tresjs/post-processing": "workspace:^",
     "gsap": "^3.12.3"
   },
   "devDependencies": {
     "@tresjs/leches": "^0.14.0",
-    "unocss": "^0.58.0",
-    "unplugin-vue-components": "^0.26.0",
+    "unocss": "^0.63.0",
+    "unplugin-vue-components": "^0.27.4",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.0.0-rc.31"
+    "vitepress": "1.3.4"
   }
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -1,4 +1,3 @@
-import { templateCompilerOptions } from '@tresjs/core'
 import Unocss from 'unocss/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
@@ -17,7 +16,4 @@ export default defineConfig({
       dts: 'components.d.ts',
     }),
   ],
-  vue: {
-    ...templateCompilerOptions,
-  },
 })
diff --git a/playground/.eslintrc-auto-import.json b/playground/.eslintrc-auto-import.json
@@ -66,6 +66,9 @@
     "onWatcherCleanup": true,
     "useId": true,
     "useModel": true,
-    "useTemplateRef": true
+    "useTemplateRef": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true
   }
 }
diff --git a/playground/auto-imports.d.ts b/playground/auto-imports.d.ts
@@ -65,6 +65,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }