docs: migration guide

apps/playground/package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.3",
+    "unocss": "^0.48.0",
     "vite": "^4.1.0",
     "vue-tsc": "^1.0.24"
   }

apps/playground/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import 'uno.css'
 import './style.css'
 import App from './App.vue'
 

apps/playground/vite.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    UnoCSS({
+      /* options */
+    }),
+  ],
 })

docs/.vitepress/config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
           { text: 'Introduction', link: '/guide/' },
           { text: 'Getting Started', link: '/guide/getting-started' },
           { text: 'Your first Scene', link: '/guide/your-first-scene' },
+          { text: 'Migrate from v1', link: '/guide/migration-guide' },
         ],
       },
       {

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Color, sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import { sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 const LightRef = ref()
 
@@ -19,26 +20,25 @@ onMounted(() => {
   <TresCanvas clear-color="#82DBC5" shadows alpha physically-correct-lights :output-encoding="sRGBEncoding">
     <OrbitControls />
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <TresScene>
-      <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
-        <TresConeGeometry :args="[1, 1.5, 3]" />
-        <TresMeshToonMaterial color="#82DBC5" />
-      </TresMesh>
-      <TresMesh :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#4F4F4F" />
-      </TresMesh>
-      <TresMesh :position="[2, 2, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial color="greenyellow" />
-      </TresMesh>
-      <TresAmbientLight :intensity="0.75" />
-      <TresDirectionalLight ref="LightRef" :position="[-4, 8, 4]" :intensity="0.5" cast-shadow />
-    </TresScene>
+
+    <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
+    </TresMesh>
+    <TresMesh :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+    <TresMesh :position="[2, 2, 0]" cast-shadow>
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial color="greenyellow" />
+    </TresMesh>
+    <TresAmbientLight :intensity="0.75" />
+    <TresDirectionalLight ref="LightRef" :position="[-4, 8, 4]" :intensity="0.5" cast-shadow />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
 const styles = {
@@ -14,13 +15,11 @@ const styles = {
     <TresCanvas shadows clear-color="#fff" :style="styles">
       <TresPerspectiveCamera :position="[0, 2, 4]" />
       <OrbitControls />
-      <TresScene>
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-          <TresMeshToonMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
+        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
     </TresCanvas>
   </ClientOnly>
 </template>

docs/.vitepress/theme/index.ts

@@ -1,9 +1,9 @@
-import Tres from '@tresjs/core'
 import 'uno.css'
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import './config.css'
 import FirstScene from './components/FirstScene.vue'
+
 import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
 import TresLayout from './TresLayout.vue'
 
@@ -14,12 +14,6 @@ export default {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('FirstScene', FirstScene)
     ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
-    /*  ctx.app.use(Tres)
-     */
-    if (!import.meta.env.SSR) {
-      // ... server only logic
-      ctx.app.use(Tres)
-    }
   },
   Layout: TresLayout,
   /* Layout() {

docs/guide/migration-guide.md

@@ -0,0 +1,69 @@
+# Migration Guide
+
+This guide is intended to help you migrate from v1 to brand new shiny v2 🤩✨ of TresJS.
+
+## What's new?
+
+### Vue Custom Renderer
+
+**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
+
+### Typescript support and Intellisense 🦾
+
+![TresJS v2 Intellisense](/v2-intellisense.gif)
+
+This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
+
+**TresJS** now generates type declaration on build time for all the components based of the catalog from ThreeJS. This means that you can use all the components from ThreeJS and get type intellisense for them.
+
+### Tres Plugin is optional 👍
+
+The `TresPlugin` is now optional. You can use TresJS without it by importing the components directly from `tresjs/core`:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+::: info
+This is recommended for performance and bundle size reasons, Three-shaking will work better and you will only import the components that you use.
+:::
+
+### TresScene no longer needed
+
+The `<TresScene />` component is now deprecated since the scene is now created by the `<TresCanvas />`.
+
+In the beginning, I thought that it would be a good idea to have a separate component for the scene in terms of verbosity and keep it as similar to plain ThreeJS, but it turned out that it was not really useful.
+
+You can now create a scene like this:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+To migrate your code, you can just remove the `<TresScene />` component and move the children to the `<TresCanvas />` component.

pnpm-lock.yaml

@@ -52,6 +52,7 @@ importers:
       '@vitejs/plugin-vue': ^4.0.0
       three: ^0.150.1
       typescript: ^4.9.3
+      unocss: ^0.48.0
       vite: ^4.1.0
       vue: ^3.2.45
       vue-tsc: ^1.0.24
@@ -63,6 +64,7 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.4+vue@3.2.47
       typescript: 4.9.5
+      unocss: 0.48.5_vite@4.1.4
       vite: 4.1.4
       vue-tsc: 1.2.0_typescript@4.9.5
 
@@ -1367,6 +1369,17 @@ packages:
       - vite
     dev: true
 
+  /@unocss/astro/0.48.5_vite@4.1.4:
+    resolution: {integrity: sha512-3OkMAceJwfa+mUfPEAATRNCXwpI4aLl+upXVsoHDN013pM7st4oC7ZgYHvb8EajuSinng9ffMcPfgrIJK9N5bQ==}
+    dependencies:
+      '@unocss/core': 0.48.5
+      '@unocss/reset': 0.48.5
+      '@unocss/vite': 0.48.5_vite@4.1.4
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
   /@unocss/cli/0.48.5:
     resolution: {integrity: sha512-xFz5iPc9t3sDDZyPq/1Sy83tpMUFSSPm7FUCVucaJ9LmROFii5yy1L+aILecUMRVfx3VN5TpJ1eqNB3Yqx63Yg==}
     engines: {node: '>=14'}
@@ -1516,6 +1529,26 @@ packages:
       - rollup
     dev: true
 
+  /@unocss/vite/0.48.5_vite@4.1.4:
+    resolution: {integrity: sha512-eUZSM9vxTdUe70/aDpxGODjLJtrAa80pmipqgFaZ0B++LsglZMiSZD38/Bw7w5FTLv78ViRgTJ+rGh/SOe+rdw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@rollup/pluginutils': 5.0.2
+      '@unocss/config': 0.48.5
+      '@unocss/core': 0.48.5
+      '@unocss/inspector': 0.48.5
+      '@unocss/scope': 0.48.5
+      '@unocss/transformer-directives': 0.48.5
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.27.0
+      vite: 4.1.4
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@vitejs/plugin-vue/4.0.0_vite@4.1.4:
     resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5640,6 +5673,38 @@ packages:
       - vite
     dev: true
 
+  /unocss/0.48.5_vite@4.1.4:
+    resolution: {integrity: sha512-OK24OS2IO4oJa/jtfoxUIciY6M05Nx16M6pzfCqzcglvaIIM/rpsA2D3dYmC3f3IeBuC31FpB59cM05CF7E0bQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.48.5
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.48.5_vite@4.1.4
+      '@unocss/cli': 0.48.5
+      '@unocss/core': 0.48.5
+      '@unocss/preset-attributify': 0.48.5
+      '@unocss/preset-icons': 0.48.5
+      '@unocss/preset-mini': 0.48.5
+      '@unocss/preset-tagify': 0.48.5
+      '@unocss/preset-typography': 0.48.5
+      '@unocss/preset-uno': 0.48.5
+      '@unocss/preset-web-fonts': 0.48.5
+      '@unocss/preset-wind': 0.48.5
+      '@unocss/reset': 0.48.5
+      '@unocss/transformer-attributify-jsx': 0.48.5
+      '@unocss/transformer-compile-class': 0.48.5
+      '@unocss/transformer-directives': 0.48.5
+      '@unocss/transformer-variant-group': 0.48.5
+      '@unocss/vite': 0.48.5_vite@4.1.4
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unplugin/1.3.1:
     resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
     dependencies: