feat: update lint rules, (#196)

* feat: update lint rules,

* chore: update pnpm-lock

* chore: update pnpm-lock, change gsap to devDeeps

* chore: update pnpm-lock, delete gsap deeps in docs

* chore: update uno deeps

* chore: fix lock

* chore: fix build issue with types

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

.eslintignore

@@ -3,4 +3,6 @@ dist
 **.test.ts
 **.test.js
 **.cy.js
-**/cypress/**
+**/cypress/**
+docs/.vitepress/cache
+docs/.vitepress/dist

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off"
+  }
+}

docs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tresjs/eslint-config-vue"
+}

docs/.vitepress/theme/components/BackdropDemo.vue

@@ -3,9 +3,7 @@ import { TresCanvas } from '@tresjs/core'
 import { PCFSoftShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 import { useProgress, Backdrop, GLTFModel } from '@tresjs/cientos'
-import { ref } from 'vue'
-import { watch } from 'vue'
-import { watchEffect } from 'vue'
+import { ref, watch, watchEffect } from 'vue'
 
 const gl = {
   clearColor: 'pink',
@@ -18,14 +16,15 @@ const gl = {
 const model = ref(null)
 
 watch(model, ({ value }) => {
-  value.traverse(child => {
+  value.traverse((child) => {
     if (child.isMesh) {
       child.castShadow = true
     }
   })
 })
 
 function onCameraChange(e) {
+  // eslint-disable-next-line no-console
   console.log('camera changed', e)
 }
 
@@ -51,30 +50,46 @@ const { hasFinishLoading, progress, items } = await useProgress()
         v-show="!hasFinishLoading"
         class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
       >
-        <div class="w-200px">Loading... {{ progress }} %</div>
+        <div class="w-200px">
+          Loading... {{ progress }} %
+        </div>
       </div>
     </Transition>
     <TresCanvas v-bind="gl">
       <TresPerspectiveCamera
-        ref="camerRef"
         :position="[0.07224002153117198, 0.5245876539770153, 2.9469498522622626]"
         :rotation="[-0.04419077275543715, 0.025561987075415186, 0.0011302162688196786]"
         :fov="35"
       />
       <Suspense>
-        <GLTFModel ref="model" cast-shadow :path="'/card-bo-bot/CardBoBotv3.glb'" draco :rotation="[0, 0.5, 0]" />
+        <GLTFModel
+          ref="model"
+          cast-shadow
+          path="/card-bo-bot/CardBoBotv3.glb"
+          draco
+          :rotation="[0, 0.5, 0]"
+        />
       </Suspense>
-      <Backdrop :floor="1.5" :scale="[10, 3, 3]" :position="[0, 0, -3]" receive-shadow>
-        <TresMeshPhysicalMaterial :roughness="1" color="pink" :side="2" />
+      <Backdrop
+        :floor="1.5"
+        :scale="[10, 3, 3]"
+        :position="[0, 0, -3]"
+        receive-shadow
+      >
+        <TresMeshPhysicalMaterial
+          :roughness="1"
+          color="pink"
+          :side="2"
+        />
       </Backdrop>
       <TresAmbientLight :intensity="0.5" />
       <TresDirectionalLight
         :args="['white', 2]"
         cast-shadow
         :position="[3, 4, 4]"
         :look-at="[0, 0, 0]"
-        :shadow-mapSize-width="256"
-        :shadow-mapSize-height="256"
+        :shadow-map-size-width="256"
+        :shadow-map-size-height="256"
         :shadow-camera-near="0.5"
         :shadow-camera-left="-10"
       />
@@ -83,8 +98,8 @@ const { hasFinishLoading, progress, items } = await useProgress()
         cast-shadow
         :position="[-3, 2, 4]"
         :look-at="[0, 0, 0]"
-        :shadow-mapSize-width="256"
-        :shadow-mapSize-height="256"
+        :shadow-map-size-width="256"
+        :shadow-map-size-height="256"
         :shadow-camera-near="0.5"
         :shadow-camera-left="-10"
       />

docs/.vitepress/theme/components/Feather.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGLTF, Levioso } from '@tresjs/cientos'
-import { shallowRef } from 'vue'
-import { watchEffect } from 'vue'
+import { shallowRef, watchEffect } from 'vue'
+
 const { scene: feather, nodes } = await useGLTF('/feather.glb')
 
 /* const feather = computed(() => nodes.Sketchfab_model)
@@ -11,6 +11,7 @@ const featherRef = shallowRef()
 
 watchEffect(() => {
   if (featherRef.value) {
+    // eslint-disable-next-line no-console
     console.log(featherRef.value)
     featherRef.value.rotation.y = -Math.PI / 4
     featherRef.value.updateMatrixWorld()
@@ -19,9 +20,16 @@ watchEffect(() => {
   }
 })
 </script>
+
 <template>
-  <Levioso ref="groupRef" :speed="4">
-    <primitive ref="featherRef" :object="nodes.Sketchfab_model" :position-y="-Math.PI / 4" />
+  <Levioso
+    :speed="4"
+  >
+    <primitive
+      ref="featherRef"
+      :object="nodes.Sketchfab_model"
+      :position-y="-Math.PI / 4"
+    />
   </Levioso>
   <!--  <TresMesh ref="featherRef" v-bind="feather"></TresMesh> -->
 </template>

docs/.vitepress/theme/components/LeviosoDemo.vue

@@ -15,13 +15,18 @@ const gl = {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" ref="context">
+  <TresCanvas
+    v-bind="gl"
+  >
     <TresPerspectiveCamera :position="[1, 2, 1]" />
     <Suspense>
       <Feather />
     </Suspense>
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
+    <TresDirectionalLight
+      :intensity="1"
+      :position="[2, 2, 2]"
+    />
     <OrbitControls />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 ///<reference types="vite-svg-loader" />
+import { gsap } from 'gsap'
+import { onMounted, ref } from 'vue'
 import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
-import { gsap } from 'gsap'
-import { onMounted, ref } from 'vue'
 
 const triangleRef = ref()
 const secondRowRef = ref()

docs/.vitepress/theme/components/WobbleMaterialDemo.vue

@@ -14,14 +14,23 @@ const gl = {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" ref="context">
+  <TresCanvas
+    v-bind="gl"
+  >
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <TresMesh>
       <TresTorusGeometry />
-      <MeshWobbleMaterial color="orange" :speed="1" :factor="2" />
+      <MeshWobbleMaterial
+        color="orange"
+        :speed="1"
+        :factor="2"
+      />
     </TresMesh>
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
+    <TresDirectionalLight
+      :intensity="1"
+      :position="[2, 2, 2]"
+    />
     <OrbitControls />
   </TresCanvas>
 </template>

docs/package.json

@@ -9,12 +9,10 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "unocss": "^0.53.5",
-    "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.5"
+    "unocss": "^0.54.0",
+    "vite-svg-loader": "^4.0.0"
   },
   "dependencies": {
-    "@tresjs/cientos": "workspace:^",
-    "gsap": "^3.12.2"
+    "@tresjs/cientos": "workspace:^"
   }
 }

package.json

@@ -50,7 +50,7 @@
     "vue": ">=3.3"
   },
   "devDependencies": {
-    "@alvarosabu/prettier-config": "^1.3.0",
+    "@tresjs/eslint-config-vue": "^0.1.1",
     "@release-it/conventional-changelog": "^7.0.0",
     "@tweakpane/core": "^1.1.9",
     "@types/node": "^20.5.4",
@@ -59,12 +59,10 @@
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-vue": "^4.3.3",
     "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vue": "^9.17.0",
     "gsap": "^3.12.2",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
-    "prettier": "^3.0.2",
     "release-it": "^16.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",

playground/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "no-console": "off"
+  }
+}

playground/src/components/EnvironmentDemo.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
 
 import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
 
+const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
+
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
@@ -30,7 +31,7 @@ const { progress, hasFinishLoading, items } = await useProgress()
     >
       <div class="w-200px">
         Loading... {{ progress }} %
-        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in" />
       </div>
     </div>
   </Transition>
@@ -41,7 +42,7 @@ const { progress, hasFinishLoading, items } = await useProgress()
       <Environment
         background
         :files="environmentFiles"
-        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
       />
     </Suspense>
     <TresGridHelper />

playground/src/components/GlassMaterialDemo.vue

@@ -17,14 +17,17 @@ const context = ref()
 const glassMaterialRef = shallowRef()
 const boxRef = shallowRef()
 
-watch(glassMaterialRef, value => {
+watch(glassMaterialRef, (value) => {
   boxRef.value.value.material.dispose()
   boxRef.value.value.material = value.MeshGlassMaterialClass
 })
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" ref="context">
+  <TresCanvas
+    v-bind="gl"
+    ref="context"
+  >
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <TresMesh :position-x="3">
       <TresTorusKnotGeometry :args="[1, 0.4, 256, 20]" />
@@ -33,14 +36,20 @@ watch(glassMaterialRef, value => {
     <Sphere :scale="0.5">
       <MeshGlassMaterial />
     </Sphere>
-    <Box ref="boxRef" :position-x="-3" />
+    <Box
+      ref="boxRef"
+      :position-x="-3"
+    />
     <TresMesh :position="[0, 0, -1]">
       <TresPlaneGeometry :args="[3, 3]" />
       <TresMeshBasicMaterial :color="0xff1111" />
     </TresMesh>
     <TresGridHelper :args="[10, 10]" />
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
+    <TresDirectionalLight
+      :intensity="1"
+      :position="[2, 2, 2]"
+    />
     <OrbitControls />
   </TresCanvas>
 </template>

playground/src/components/LeviosoDemo.vue

@@ -40,14 +40,16 @@ pane.addInput(leviosoState, 'floatFactor', {
   max: 10,
 })
 const groupRef = shallowRef()
-
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <Levioso ref="groupRef" v-bind="leviosoState">
+    <Levioso
+      ref="groupRef"
+      v-bind="leviosoState"
+    >
       <TorusKnot :position="[0, 4, 0]">
         <TresMeshNormalMaterial />
       </TorusKnot>