Merge pull request #111 from Tresjs/feature/23-hmr-disposal

feat: sorted out hmr disposal of objects

.vscode/launch.json

@@ -3,15 +3,26 @@
   "version": "0.2.0",
   "configurations": [
     {
+      "name": "Attach by Process ID",
+      "processId": "${command:PickProcess}",
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    },
+    {
+      "name": "Attach to vite",
+      "port": 5174,
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    },
+    {
+      "name": "fe-server",
       "type": "node",
       "request": "launch",
-      "name": "Debug Current Test File",
-      "autoAttachChildProcesses": true,
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-      "args": ["run", "${relativeFile}"],
-      "smartStep": true,
-      "console": "integratedTerminal"
+      "cwd": "${workspaceRoot}/packages/tres",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--preserve-symlinks"]
     }
   ]
 }

docs/advanced/caveats.md

@@ -2,7 +2,13 @@
 
 Our aim is to provide a simple way of using ThreeJS in VueJS with the best developer experience possible. However, there are some caveats that you should be aware of.
 
-## HMR and ThreeJS
+## ~~HMR and ThreeJS~~
+
+:::info
+
+This has been fixed in **TresJS** v1.7.0 🎉. You can now use HMR without reloading the page 🥹.
+
+:::
 
 Hot module replacement (HMR) is a feature that allows you to update your code without reloading the page. This is a great feature that makes development much faster. **TresJS** uses [Vite](https://vitejs.dev/). However, is really tricky to make it work correctly with ThreeJS.
 

packages/tres/package.json

@@ -41,15 +41,14 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "peerDependencies": {
-    "vue": "^3.2.47",
-    "three": "latest"
+    "three": "latest",
+    "vue": "^3.2.47"
   },
   "dependencies": {
-    "@vueuse/core": "^9.12.0",
-    "@alvarosabu/utils": "^2.2.0"
+    "@alvarosabu/utils": "^2.2.0",
+    "@vueuse/core": "^9.12.0"
   },
   "devDependencies": {
-    "three": "latest",
     "@tresjs/cientos": "workspace:^1.6.0",
     "@types/three": "latest",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -62,11 +61,13 @@
     "release-it": "^15.6.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.0",
+    "three": "latest",
     "unplugin-vue-components": "^0.23.0",
     "vite": "^4.1.1",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "^1.7.2",
     "vite-plugin-glsl": "^1.1.2",
+    "vite-plugin-inspect": "^0.7.15",
     "vite-plugin-require-transform": "^1.0.9",
     "vitest": "^0.28.4",
     "vue-demi": "^0.13.11"

packages/tres/src/core/useInstanceCreator/index.ts

@@ -1,15 +1,14 @@
 /* eslint-disable new-cap */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { BufferAttribute, FogBase, OrthographicCamera, PerspectiveCamera, Raycaster, Scene } from 'three'
+import { BufferAttribute, FogBase, OrthographicCamera, PerspectiveCamera } from 'three'
 import { defineComponent, inject, onUnmounted, Ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
-import { useCamera, useCatalogue, useRenderLoop, useScene, useTres } from '/@/core/'
+import { useCamera, useCatalogue, useRenderLoop, useTres } from '/@/core/'
 import { useLogger } from '/@/composables'
 import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType, TresEvent } from '/@/types'
-import { useRaycaster } from '../useRaycaster'
 
 const VECTOR3_PROPS = ['rotation', 'scale', 'position']
 
@@ -218,10 +217,6 @@ export function useInstanceCreator(prefix: string) {
               }
 
               if (import.meta.hot) {
-                import.meta.hot.on('vite:beforeUpdate', () => {
-                  scene?.remove(instance)
-                })
-
                 import.meta.hot.on('vite:afterUpdate', () => {
                   instance = createInstance(threeObj, attrs, slots)
                   processProps(attrs, instance)

packages/tres/src/core/useScene/component.ts

@@ -26,6 +26,12 @@ export const Scene = defineComponent({
       }
     })
 
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:afterUpdate', () => {
+        scene.value.children = []
+      })
+    }
+
     return () => {
       if (slots.default) {
         return slots.default()

packages/tres/vite.config.ts

@@ -4,6 +4,8 @@ import { defineConfig } from 'vite'
 
 import vue from '@vitejs/plugin-vue'
 import banner from 'vite-plugin-banner'
+import Inspect from 'vite-plugin-inspect'
+
 import dts from 'vite-plugin-dts'
 import analyze from 'rollup-plugin-analyzer'
 /* import { visualizer } from 'rollup-plugin-visualizer' */
@@ -27,7 +29,9 @@ export default defineConfig({
     dedupe: ['@tresjs/cientos'],
   },
   plugins: [
-    vue({}),
+    vue({
+      isProduction: false,
+    }),
     dts({
       insertTypesEntry: true,
     }),
@@ -36,6 +40,7 @@ export default defineConfig({
         pkg.version
       }\n * (c) ${new Date().getFullYear()}\n * description: ${pkg.description}\n * author: ${pkg.author}\n */`,
     }),
+    Inspect(),
   ],
   test: {
     environment: 'happy-dom',