Merge pull request #46 from Tresjs/feature/update-deps-refactor-app

feat: update deps refactor app

CONTRIBUTING.md

@@ -38,7 +38,7 @@ TresJS is an ecosystem of packages, each one of them has its own purpose. The ma
 
 You can go to the `packages/tres` folder and run `pnpm dev` to start the dev server. This will start a vite server that will watch for changes in the code and rebuild the package.
 
-This is only a playground to test the core package, please keep the `App.vue` file as clean as possible.
+This is only a playground to test the core package, to keep the `App.vue` clean create a new component with your scene and import it in the `App.vue` file.
 
 ### Cientos
 

packages/cientos/package.json

@@ -42,19 +42,19 @@
   },
   "devDependencies": {
     "@tweakpane/plugin-essentials": "^0.1.5",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "kolorist": "^1.6.0",
-    "pathe": "^0.3.9",
+    "pathe": "^1.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
-    "tweakpane": "^3.1.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3",
-    "vite-plugin-banner": "^0.6.1",
-    "vite-plugin-dts": "^1.7.0"
+    "tweakpane": "^3.1.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.2",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "^1.7.1"
   },
   "dependencies": {
     "@tresjs/core": "workspace:^1.2.1",
-    "three-stdlib": "^2.17.3"
+    "three-stdlib": "^2.20.5"
   }
 }

packages/tres/package.json

@@ -43,7 +43,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "dependencies": {
-    "three": "^0.146.0",
+    "three": "^0.147.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -54,24 +54,24 @@
     "@histoire/plugin-vue": "0.11.7",
     "@tresjs/cientos": "workspace:^1.1.0",
     "@types/three": "^0.146.0",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitest/coverage-c8": "^0.25.1",
-    "@vitest/ui": "^0.25.1",
-    "@vueuse/core": "^9.5.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.25.8",
+    "@vitest/ui": "^0.25.8",
+    "@vueuse/core": "^9.7.0",
     "gl": "6.0.1",
-    "happy-dom": "^7.7.0",
-    "histoire": "0.11.7",
+    "happy-dom": "^8.1.0",
+    "histoire": "0.11.9",
     "kolorist": "^1.6.0",
-    "pathe": "^0.3.9",
+    "pathe": "^1.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
-    "vite-plugin-banner": "^0.6.1",
-    "vite-plugin-dts": "^1.7.0",
-    "vite-plugin-glsl": "^0.5.3",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.2",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "^1.7.1",
+    "vite-plugin-glsl": "^1.0.1",
     "vite-plugin-require-transform": "^1.0.4",
-    "vitest": "^0.25.1",
+    "vitest": "^0.25.8",
     "vue-demi": "^0.13.11"
   }
 }

packages/tres/src/App.vue

@@ -1,41 +1,11 @@
 <script setup lang="ts">
-/* import { Color } from 'three' */
-/* import { useTweakPane, OrbitControls } from '../../cientos/src' */
-import { useTweakPane, OrbitControls } from '@tresjs/cientos'
-/* import TestSphere from '/@/components/TestSphere.vue' */
-/* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-import { useTres, useCatalogue } from '/@/core' */
-
-/* const { extend } = useCatalogue() */
-
-/* extend({ OrbitControls }) */
+import { useTweakPane } from '@tresjs/cientos'
+import TheExperience from '/@/components/TheExperience.vue'
 
 useTweakPane()
-
-/* const { state } = useTres() */
 </script>
 <template>
   <Suspense>
-    <TresCanvas
-      shadows
-      alpha
-      clear-color="teal"
-      power-preference="high-performance"
-      preserve-drawing-buffer
-      physically-correct-lights
-    >
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-      <TresScene>
-        <OrbitControls />
-        <TresAmbientLight :intensity="0.5" />
-        <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
-        <TresMesh :position="[0, 0, 0]">
-          <TresBoxGeometry />
-          <TresMeshNormalMaterial />
-        </TresMesh>
-        <TresAxesHelper :args="[1]" :visible="false" />
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-      </TresScene>
-    </TresCanvas>
+    <TheExperience />
   </Suspense>
 </template>

packages/tres/src/components/TheExperience.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas
+    shadows
+    alpha
+    clear-color="teal"
+    power-preference="high-performance"
+    preserve-drawing-buffer
+    physically-correct-lights
+  >
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+    <TresScene>
+      <OrbitControls />
+      <TresAmbientLight :intensity="0.5" />
+      <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
+      <TresMesh :position="[0, 0, 0]">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <TresAxesHelper :args="[1]" :visible="false" />
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>