feat: renamed useCamera composable methods to prevent confusion (#380)

* feature: renamed useCamera composable methods to prevent confusion

* chore: fixed dependency error

---------

Co-authored-by: Tino Koch <tinoooo@users.noreply.github.com>

docs/blog/announcing-v-3.md

@@ -6,8 +6,8 @@ sidebar: false
 
 Already? Yes! We are excited to announce the release of:
 
-- **TresJS v3.0.0** 
-- **Cientos v3.0.0** 
+- **TresJS v3.0.0**
+- **Cientos v3.0.0**
 
 But you might be wondering, why a major release so soon if we just released 2.x.x not so while ago 🤔? Does it means more breaking changes? 🤯
 
@@ -23,15 +23,15 @@ Until now, we were using a `Store` to manage the internal state of the library
 
 ```ts
 const state: TresState = shallowReactive({
-    uuid: generateUUID(),
-    camera: undefined,
-    cameras: [],
-    canvas: undefined,
-    scene: undefined,
-    renderer: undefined,
-    aspectRatio: undefined,
-    pointerEventHandler: undefined,
-  })
+  uuid: generateUUID(),
+  camera: undefined,
+  cameras: [],
+  canvas: undefined,
+  scene: undefined,
+  renderer: undefined,
+  aspectRatio: undefined,
+  pointerEventHandler: undefined,
+})
 ```
 
 Important things for the abstractions like `camera`, `scene`, `renderer`, etc. were stored in the `Store` and we were using `reactive` and `shallowReactive` to make sure that the changes were propagated to the components that were using them.
@@ -40,12 +40,12 @@ And we had some kind of "getters" and "setters" to access/edit the state from th
 
 ```ts
 function getState(key: string) {
-    return state[key]
+  return state[key]
 }
 
 function setState(key: string, value: any) {
-    state[key] = value
-} 
+  state[key] = value
+}
 ```
 
 If a plugin author or a user wanted to create an abstraction around the `core`. They would have to use something like this:
@@ -55,9 +55,9 @@ const { state } = useTres()
 
 watch(
   () => state.camera,
-  (camera) => {
+  camera => {
     // do something with the camera
-  }
+  },
 )
 ```
 
@@ -67,33 +67,29 @@ Also we experience lot of bugs related to the reactivity system, specially when
 
 So we decided to **move away from the `Store` and use a `Context Provider` instead** where the state is a plain object with .
 
-
 ```ts
 const toProvide: TresContext = {
-    sizes,
-    scene:  shallowRef<Scene>(scene),
-    camera,
-    cameras: readonly(cameras),
-    renderer,
-    raycaster: shallowRef(new Raycaster()),
-    controls: ref(null),
-    extend,
-    addCamera,
-    removeCamera,
-    setCameraActive,
-  }
-
-  provide('useTres', toProvide);
+  sizes,
+  scene: shallowRef<Scene>(scene),
+  camera,
+  extend,
+  cameras: readonly(cameras),
+  renderer,
+  controls: ref(null),
+  raycaster: shallowRef(new Raycaster()),
+  setCameraActive,
+}
+
+provide('useTres', toProvide)
 ```
 
 So now you can use any property of the state individually, like this:
 
 ```html
-
 <script lang="ts" setup>
-import { useTresContext } from '@tresjs/core'
+  import { useTresContext } from '@tresjs/core'
 
-const { camera, scene, renderer} = useTresContext()
+  const { camera, scene, renderer } = useTresContext()
 </script>
 ```
 
@@ -111,5 +107,3 @@ Hope you like this new release, we are working hard to bring you the best possib
 
 - Releases https://github.com/Tresjs/tres/releases
 - Cientos https://github.com/Tresjs/cientos/releases
-
-

playground/.eslintrc-auto-import.json

@@ -0,0 +1,64 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

playground/auto-imports.d.ts

@@ -61,5 +61,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

src/components/TresCanvas.vue

@@ -20,7 +20,6 @@ import { extend } from '../core/catalogue'
 import { render } from '../core/renderer'
 
 import {
-
 } from '../composables'
 
 import type { RendererPresetsType } from '../composables/useRenderer/const'
@@ -102,7 +101,7 @@ onMounted(() => {
 
   usePointerEventHandler({ scene: scene.value, contextParts: context })
 
-  const { addCamera, camera, cameras, removeCamera } = context
+  const { registerCamera, camera, cameras, deregisterCamera } = context
 
   mountCustomRenderer(context)
 
@@ -110,13 +109,13 @@ onMounted(() => {
     const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
     camera.position.set(3, 3, 3)
     camera.lookAt(0, 0, 0)
-    addCamera(camera)
+    registerCamera(camera)
 
     const unwatch = watchEffect(
       () => {
         if (cameras.value.length >= 2) {
           camera.removeFromParent()
-          removeCamera(camera)
+          deregisterCamera(camera)
           unwatch?.()
         }
       },
@@ -125,10 +124,10 @@ onMounted(() => {
 
   watch(() => props.camera, (newCamera, oldCamera) => {
     if (newCamera)
-      addCamera(newCamera)
+      registerCamera(newCamera)
     else if (oldCamera) {
       oldCamera.removeFromParent()
-      removeCamera(oldCamera)
+      deregisterCamera(oldCamera)
     }
   }, {
     immediate: true,

src/composables/useCamera/index.ts

@@ -12,7 +12,7 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
     () => cameras.value[0],
   )
 
-  const addCamera = (newCamera: Camera, active = false) => {
+  const registerCamera = (newCamera: Camera, active = false) => {
     if (cameras.value.some(({ uuid }) => uuid === newCamera.uuid))
       return
 
@@ -23,7 +23,7 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
 
   }
 
-  const removeCamera = (camera: Camera) => {
+  const deregisterCamera = (camera: Camera) => {
     cameras.value = cameras.value.filter(({ uuid }) => uuid !== camera.uuid)
   }
 
@@ -50,8 +50,8 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
     }
   })
 
-  scene.userData.tres__registerCamera = addCamera
-  scene.userData.tres__deregisterCamera = removeCamera
+  scene.userData.tres__registerCamera = registerCamera
+  scene.userData.tres__deregisterCamera = deregisterCamera
 
   onUnmounted(() => {
     cameras.value = []
@@ -60,8 +60,8 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
   return {
     camera,
     cameras,
-    addCamera,
-    removeCamera,
+    registerCamera,
+    deregisterCamera,
     setCameraActive,
   }
 }

src/composables/useTresContextProvider/index.ts

@@ -10,17 +10,16 @@ import { extend } from '../../core/catalogue'
 
 export interface TresContext {
   scene: ShallowRef<Scene>
+  sizes: { height: Ref<number>; width: Ref<number>; aspectRatio: ComputedRef<number> }
+  extend: (objects: any) => void
   camera: ComputedRef<Camera | undefined>
   cameras: DeepReadonly<Ref<Camera[]>>
+  controls: Ref<(EventDispatcher & { enabled: boolean }) | null>
   renderer: ShallowRef<WebGLRenderer>
   raycaster: ShallowRef<Raycaster>
-  controls: Ref<(EventDispatcher & { enabled: boolean }) | null>
-  extend: (objects: any) => void
-  addCamera: (camera: Camera) => void
-  removeCamera: (camera: Camera) => void
+  registerCamera: (camera: Camera) => void
   setCameraActive: (cameraOrUuid: Camera | string) => void
-
-  sizes: { height: Ref<number>; width: Ref<number>; aspectRatio: ComputedRef<number> }
+  deregisterCamera: (camera: Camera) => void
 }
 
 export function useTresContextProvider({
@@ -57,8 +56,8 @@ export function useTresContextProvider({
   const {
     camera,
     cameras,
-    addCamera,
-    removeCamera,
+    registerCamera,
+    deregisterCamera,
     setCameraActive,
   } = useCamera({ sizes, scene })
 
@@ -80,9 +79,9 @@ export function useTresContextProvider({
     raycaster: shallowRef(new Raycaster()),
     controls: ref(null),
     extend,
-    addCamera,
-    removeCamera,
+    registerCamera,
     setCameraActive,
+    deregisterCamera,
   }
 
   provide('useTres', toProvide)