feat(cientos): add first directive vLog

docs/.vitepress/config.ts

@@ -103,6 +103,13 @@ export default defineConfig({
           { text: 'Stats', link: '/guide/misc/stats' },
         ],
       },
+      {
+        text: 'Directives',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/guide/directives/v-log' },
+        ],
+      },
     ],
 
     socialLinks: [

docs/guide/directives/v-log.md

@@ -0,0 +1,56 @@
+# v-log
+
+### Problem
+
+When you have to log your instance you have to use the template reference and then log them:
+
+```vue{3}
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+
+const sphereRef = shallowRef()
+
+watch(sphereRef, value => {
+    console.log(value) // Really for a log?!!! 😫
+})
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+And is A LOT of code just for a simple log right?
+
+## Solution
+
+With the new directive v-log provided by **TresJS**, you can do this by just adding `v-log` to the instance.
+
+```vue{3}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- will print just the material 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Note that you can pass a modifier with the name of a property, for example `v-log:material`, and will log directly the `material` property 😍
+
+::: warning
+The component `<TresCanvas >` will not log the canvas or the scene.
+:::

playground/components.d.ts

@@ -8,16 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
-    EnvironmentDemo: typeof import('./src/components/EnvironmentDemo.vue')['default']
-    GlassMaterialDemo: typeof import('./src/components/GlassMaterialDemo.vue')['default']
+    DirectivesDemo: typeof import('./src/components/DirectivesDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
-    LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
-    MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
-    UseVideoTextureDemo: typeof import('./src/components/useVideoTextureDemo.vue')['default']
-    WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
   }
 }

playground/src/components/DirectivesDemo.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { reactive, shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls, Stars, Sphere, vLog } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+const options = reactive({
+  size: 0.1,
+  sizeAttenuation: true,
+  count: 5000,
+  depth: 50,
+  radius: 100,
+})
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 0.5
+  }
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars
+      :radius="options.radius"
+      :depth="options.depth"
+      :count="options.count"
+      :size="options.size"
+      :size-attenuation="options.sizeAttenuation"
+    />
+    <Sphere
+      ref="sphereRef"
+      v-log:material
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -2,6 +2,6 @@
 
 <template>
   <Suspense>
-    <ModelsDemo />
+    <DirectivesDemo />
   </Suspense>
 </template>

src/core/directives/index.ts

@@ -0,0 +1,3 @@
+import { vLog } from './vLog'
+
+export { vLog }

src/core/directives/vLog.ts

@@ -0,0 +1,11 @@
+export const vLog = {
+  updated: (el: any, binding: any) => {
+    if (binding.arg) {
+    // eslint-disable-next-line no-console
+      console.log(`v-log:${binding.arg}`, el[binding.arg])
+      return
+    }
+    // eslint-disable-next-line no-console
+    console.log('v-log', el)
+  },
+}

src/core/index.ts

@@ -5,3 +5,4 @@ export * from './materials'
 export * from './shapes'
 export * from './staging'
 export * from './misc'
+export * from './directives'