Browse Source

docs: explain state breaking changes

BREAKING CHANGE: UseTres is now useTresContext. Instead of using a store like in v2, we now use a context provider based on `provide/inject`.
alvarosabu 1 year ago
parent
commit
4757da981c
2 changed files with 39 additions and 7 deletions
  1. 5 5
      docs/api/composables.md
  2. 34 2
      docs/guide/migration-guide.md

+ 5 - 5
docs/api/composables.md

@@ -179,19 +179,19 @@ watch(carRef, ({ model }) => {
 })
 })
 ```
 ```
 
 
-## useTres
+## useTresContext (former useTres)
 
 
 This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.
 This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.
 
 
 ```ts
 ```ts
-const { camera, renderer } = useTres()
+const { camera, renderer } = useTresContext()
 
 
 console.log(camera.value) // THREE.PerspectiveCamera
 console.log(camera.value) // THREE.PerspectiveCamera
 console.log(renderer.value) // THREE.WebGLRenderer
 console.log(renderer.value) // THREE.WebGLRenderer
 ```
 ```
 
 
 ::: warning
 ::: warning
-useTres can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data.
+`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data.
 :::
 :::
 
 
 ```vue
 ```vue
@@ -204,8 +204,8 @@ useTres can be only be used inside of a `TresCanvas` since `TresCanvas` acts as
 // MyModel.vue
 // MyModel.vue
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { useTres } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 
 
-const context = useTres()
+const context = useTresContext()
 </script>
 </script>
 ```
 ```

+ 34 - 2
docs/guide/migration-guide.md

@@ -1,6 +1,6 @@
 # Migration Guide
 # Migration Guide
 
 
-This guide is intended to help you migrate from v1 to brand new shiny v2 🤩✨ of TresJS.
+This guide is intended to help you migrate from v1 to the newest versions of TresJS 🤩✨.
 
 
 ::: code-group
 ::: code-group
 
 
@@ -26,7 +26,7 @@ yarn upgrade @tresjs/core
 
 
 ### Typescript support and Intellisense 🦾
 ### Typescript support and Intellisense 🦾
 
 
-![TresJS v2 Intellisense](/v2-intellisense.gif)
+![TresJS Intellisense](/v2-intellisense.gif)
 
 
 This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
 This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
 
 
@@ -186,3 +186,35 @@ To this:
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```
+
+## UseTres is now useTresContext <Badge type="warning" text="^3.0.0" />
+
+For v3 we reworked the whole state logic to make it more flexible and easier to use for plugin authors and ecosystem packages. Instead of using a store like in v2, we now use a context provider based on `provide/inject`.
+
+The `useTres` function is now an alias of the `useTresContext` function to avoid breaking demos and experiments out there, but consider using `useTresContext` from now on. 
+
+Instead of a big reactive object, you will now get the `scene` and `renderer` refs, between other properties, directly.
+
+Change this:
+
+```ts {2}
+// Wrong ❌
+import { useTres } from '@tresjs/core'
+
+const { state, setState } = useTres()
+
+console.log(state.scene)
+```
+
+To this:
+
+```ts {2}
+// Correct ✅
+import { useTresContext } from '@tresjs/core'
+
+const { scene, renderer } = useTresContext()
+
+console.log(scene.value)
+```
+
+For more detailed information about the new context provider system, you can read the [API DOCS](/api/composables.md) section.