From 6ad5b919316b902339dc544cb91c0ce13c9c92cb Mon Sep 17 00:00:00 2001
From: andretchen0 <petermoldovia@yahoo.ca>
Date: Wed, 20 Nov 2024 22:20:22 -0600
Subject: [PATCH] refactor(shapes): remove  on root element

From Vue docs: When a component renders a single root element, fallthrough attributes will be automatically added to the root element's attributes.

https://vuejs.org/guide/components/attrs.html#attribute-inheritance
---
 .../vue/src/pages/shapes/RoundedBoxDemo.vue      | 16 +++++++++++++++-
 src/core/shapes/Box.vue                          |  5 +----
 src/core/shapes/Circle.vue                       |  5 +----
 src/core/shapes/Cone.vue                         |  5 +----
 src/core/shapes/Cylinder.vue                     |  2 +-
 src/core/shapes/Dodecahedron.vue                 |  5 +----
 src/core/shapes/Icosahedron.vue                  |  5 +----
 src/core/shapes/Octahedron.vue                   |  5 +----
 src/core/shapes/Plane.vue                        |  1 -
 src/core/shapes/Ring.vue                         |  5 +----
 src/core/shapes/Sphere.vue                       |  5 +----
 src/core/shapes/Superformula.vue                 |  6 +-----
 src/core/shapes/Tetrahedron.vue                  |  6 +-----
 src/core/shapes/Torus.vue                        |  5 +----
 src/core/shapes/TorusKnot.vue                    |  5 +----
 src/core/shapes/Tube.vue                         |  5 +----
 src/core/staging/ContactShadows.vue              |  6 +++---
 17 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/playground/vue/src/pages/shapes/RoundedBoxDemo.vue b/playground/vue/src/pages/shapes/RoundedBoxDemo.vue
index 682ec69a7..d71dde675 100644
--- a/playground/vue/src/pages/shapes/RoundedBoxDemo.vue
+++ b/playground/vue/src/pages/shapes/RoundedBoxDemo.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { OrbitControls, RoundedBox } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { shallowRef, watch } from 'vue'
@@ -9,6 +9,19 @@ watch(boxRef, (box) => {
   // eslint-disable-next-line no-console
   console.log(box)
 })
+
+const rx = shallowRef(0)
+const ry = shallowRef(0)
+const rz = shallowRef(0)
+let intervalId: ReturnType<typeof setInterval>
+
+onMounted(() => intervalId = setInterval(() => {
+  rx.value += 0.01
+  ry.value += 0.03
+  rz.value += 0.02
+}, 1000 / 30))
+
+onUnmounted(() => clearInterval(intervalId))
 </script>
 
 <template>
@@ -26,6 +39,7 @@ watch(boxRef, (box) => {
     <OrbitControls />
     <RoundedBox
       ref="boxRef"
+      :rotation="[rx, ry, rz]"
     >
       <TresMeshBasicMaterial
         :color="0x00FF00"
diff --git a/src/core/shapes/Box.vue b/src/core/shapes/Box.vue
index f13e77d30..22fb7c6ed 100644
--- a/src/core/shapes/Box.vue
+++ b/src/core/shapes/Box.vue
@@ -38,10 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="boxRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="boxRef">
     <TresBoxGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Circle.vue b/src/core/shapes/Circle.vue
index 5ba95ebf2..891a07e51 100644
--- a/src/core/shapes/Circle.vue
+++ b/src/core/shapes/Circle.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="circleRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="circleRef">
     <TresCircleGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Cone.vue b/src/core/shapes/Cone.vue
index ba89730b3..ab0894657 100644
--- a/src/core/shapes/Cone.vue
+++ b/src/core/shapes/Cone.vue
@@ -38,10 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="coneRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="coneRef">
     <TresConeGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Cylinder.vue b/src/core/shapes/Cylinder.vue
index 1366f6be9..43a7a4356 100644
--- a/src/core/shapes/Cylinder.vue
+++ b/src/core/shapes/Cylinder.vue
@@ -38,7 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh ref="cylinderRef" v-bind="$attrs">
+  <TresMesh ref="cylinderRef">
     <TresCylinderGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Dodecahedron.vue b/src/core/shapes/Dodecahedron.vue
index b0ed1ecb2..5c3e868c8 100644
--- a/src/core/shapes/Dodecahedron.vue
+++ b/src/core/shapes/Dodecahedron.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="dodecahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="dodecahedronRef">
     <TresDodecahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Icosahedron.vue b/src/core/shapes/Icosahedron.vue
index 88f893673..762f4a7b5 100644
--- a/src/core/shapes/Icosahedron.vue
+++ b/src/core/shapes/Icosahedron.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="icosahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="icosahedronRef">
     <TresIcosahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Octahedron.vue b/src/core/shapes/Octahedron.vue
index 223a0fc68..f7b5c6376 100644
--- a/src/core/shapes/Octahedron.vue
+++ b/src/core/shapes/Octahedron.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="octahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="octahedronRef">
     <TresOctahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Plane.vue b/src/core/shapes/Plane.vue
index 0054cf672..d5f937fb9 100644
--- a/src/core/shapes/Plane.vue
+++ b/src/core/shapes/Plane.vue
@@ -39,7 +39,6 @@ defineExpose({
   <TresMesh
     ref="planeRef"
     :rotation="[-Math.PI / 2, 0, 0]"
-    v-bind="$attrs"
   >
     <TresPlaneGeometry :args="args" />
     <slot>
diff --git a/src/core/shapes/Ring.vue b/src/core/shapes/Ring.vue
index 7560ed194..c19948c77 100644
--- a/src/core/shapes/Ring.vue
+++ b/src/core/shapes/Ring.vue
@@ -36,10 +36,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="ringRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="ringRef">
     <TresRingGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Sphere.vue b/src/core/shapes/Sphere.vue
index ee4a7f9c0..5c312d7ba 100644
--- a/src/core/shapes/Sphere.vue
+++ b/src/core/shapes/Sphere.vue
@@ -36,10 +36,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="sphereRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="sphereRef">
     <TresSphereGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Superformula.vue b/src/core/shapes/Superformula.vue
index 17bec79e3..cedce0e01 100644
--- a/src/core/shapes/Superformula.vue
+++ b/src/core/shapes/Superformula.vue
@@ -158,11 +158,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="superformulaRef"
-    v-bind="$attrs"
-    :geometry="geometry"
-  >
+  <TresMesh ref="superformulaRef" :geometry="geometry">
     <slot>
       <TresMeshBasicMaterial :color="color" />
     </slot>
diff --git a/src/core/shapes/Tetrahedron.vue b/src/core/shapes/Tetrahedron.vue
index 1af0287fb..1112355c4 100644
--- a/src/core/shapes/Tetrahedron.vue
+++ b/src/core/shapes/Tetrahedron.vue
@@ -32,11 +32,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="tetrahedronRef"
-    :rotation="[-Math.PI / 2, 0, 0]"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="tetrahedronRef" :rotation="[-Math.PI / 2, 0, 0]">
     <TresTetrahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Torus.vue b/src/core/shapes/Torus.vue
index 971f04264..12bc34ea3 100644
--- a/src/core/shapes/Torus.vue
+++ b/src/core/shapes/Torus.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="torusRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="torusRef">
     <TresTorusGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/TorusKnot.vue b/src/core/shapes/TorusKnot.vue
index f22873271..b12e14a0b 100644
--- a/src/core/shapes/TorusKnot.vue
+++ b/src/core/shapes/TorusKnot.vue
@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="torusKnotRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="torusKnotRef">
     <TresTorusKnotGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/shapes/Tube.vue b/src/core/shapes/Tube.vue
index 81ad057d9..e57b376d7 100644
--- a/src/core/shapes/Tube.vue
+++ b/src/core/shapes/Tube.vue
@@ -46,10 +46,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="tubeRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="tubeRef">
     <TresTubeGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />
diff --git a/src/core/staging/ContactShadows.vue b/src/core/staging/ContactShadows.vue
index c1c9e2012..1723ee933 100644
--- a/src/core/staging/ContactShadows.vue
+++ b/src/core/staging/ContactShadows.vue
@@ -312,9 +312,9 @@ function setColors(ps: typeof props, pool: ReturnType<typeof init>) {
     const { r, g, b } = tint
     shader.fragmentShader = /* glsl */`
     ${shader.fragmentShader.replace(
-        'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
-        `gl_FragColor = vec4( ${r}, ${g}, ${b}, ( 1.0 - fragCoordZ ) * opacity);`,
-      )}
+      'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+      `gl_FragColor = vec4( ${r}, ${g}, ${b}, ( 1.0 - fragCoordZ ) * opacity);`,
+    )}
     `
   }
 }