Merge pull request #29 from Tresjs/bugfix/23-hmr-disposal

fix(core): hmr disposal

packages/cientos/src/core/OrbitControls.vue

@@ -5,7 +5,7 @@ import { inject, ref, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     makeDefault?: boolean
     camera?: Camera

packages/cientos/src/core/Text3D.vue

@@ -1,8 +1,7 @@
-<script setup lang="ts">
-import { WebGLRenderer } from 'three'
+<script async setup lang="ts">
 import { TextGeometry, FontLoader } from 'three-stdlib'
 
-import { computed, inject, Ref, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import { useCientos } from './useCientos'
 
 type Glyph = {
@@ -58,7 +57,9 @@ const loader = new FontLoader()
 const slots = useSlots()
 
 const localText = computed(() => {
-  return props.text || slots.default()?.[0]?.children.trim() || 'TresJS'
+  if (props.text) return props.text
+  else if (slots.default) return (slots.default()[0].children as string)?.trim()
+  return 'TresJS'
 })
 
 const font = await new Promise((resolve, reject) => {

packages/cientos/src/env.d.ts

@@ -1,6 +1,4 @@
-import { App } from 'vue'
 /// <reference types="vite/client" />
-
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
@@ -8,6 +6,8 @@ declare module '*.vue' {
   export default component
 }
 
+declare module '*.glsl' {}
+
 declare global {
   // Define the window interface, with type annotations for the properties and methods of the window object
   interface Window {

packages/cientos/tsconfig.json

@@ -23,5 +23,5 @@
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "histoire.setup.ts", "histoire.setup.ts"],
   "exclude": ["dist", "node_modules", "src/**/*.cy.ts", "src/**/*.test.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tres/tsconfig.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/cientos/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vite'
 import banner from 'vite-plugin-banner'
 import dts from 'vite-plugin-dts'
 import analyze from 'rollup-plugin-analyzer'
-/* import { visualizer } from 'rollup-plugin-visualizer' */
+import { visualizer } from 'rollup-plugin-visualizer'
 
 import { resolve } from 'pathe'
 
@@ -45,11 +45,11 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         analyze(),
-        /*     visualizer({
+        visualizer({
           gzipSize: true,
           brotliSize: true,
           open: false,
-        }), */
+        }),
       ],
       external: ['three', 'vue', '@tresjs/core'],
       output: {
@@ -57,7 +57,7 @@ export default defineConfig({
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          /*        '@tresjs/core': 'TresjsCore', */
+          '@tresjs/core': 'TresjsCore',
           three: 'Three',
           vue: 'Vue',
         },

packages/tres/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /* import { Color } from 'three' */
-import { useTweakPane, OrbitControls, Text3D } from '../../cientos/src'
+/* 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' */
@@ -28,11 +29,10 @@ useTweakPane()
         <OrbitControls />
         <TresAmbientLight :intensity="0.5" />
         <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
-        <Text3D font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json">
-          Yeah buddy
+        <TresMesh :position="[0, 0, 0]">
+          <TresBoxGeometry />
           <TresMeshNormalMaterial />
-        </Text3D>
-        <!--   <TestSphere /> -->
+        </TresMesh>
         <TresAxesHelper :args="[1]" :visible="false" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
       </TresScene>

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

@@ -4,7 +4,7 @@ import { OrthographicCamera, PerspectiveCamera, Scene } from 'three'
 import { defineComponent, inject, Ref } from 'vue'
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
-import { useCamera, useScene } from '/@/core/'
+import { useCamera, useCatalogue, useScene } from '/@/core/'
 import { useLogger } from '/@/composables'
 import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType } from '/@/types'
 
@@ -69,7 +69,8 @@ export function useInstanceCreator(prefix: string) {
       return
     } else {
       const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
-      const catalogue = inject<Ref<TresCatalogue>>('catalogue')
+      const { catalogue: fallback } = useCatalogue()
+      const catalogue = inject<Ref<TresCatalogue>>('catalogue') || fallback
       // check if args prop is defined on the vnode
       let internalInstance
       if (catalogue) {
@@ -130,7 +131,7 @@ export function useInstanceCreator(prefix: string) {
             const catalogue = inject<Ref<TresCatalogue>>('catalogue')
             const { pushCamera } = useCamera()
 
-            const instance = createInstance(threeObj, attrs, slots)
+            let instance = createInstance(threeObj, attrs, slots)
             processProps(attrs, instance)
             // If the instance is a camera, push it to the camera stack
             if (instance instanceof PerspectiveCamera || instance instanceof OrthographicCamera) {
@@ -142,12 +143,38 @@ export function useInstanceCreator(prefix: string) {
               scene?.value.add(instance)
             }
 
+            if (import.meta.hot) {
+              import.meta.hot.on('vite:beforeUpdate', () => {
+                scene.value.remove(instance)
+              })
+
+              import.meta.hot.on('vite:afterUpdate', () => {
+                instance = createInstance(threeObj, attrs, slots)
+                processProps(attrs, instance)
+
+                if (instance.isObject3D) {
+                  scene?.value.add(instance)
+                }
+
+                logMessage(name, {
+                  instance,
+                  sceneuuid: scene?.value.uuid,
+                  catalogue: catalogue?.value.uuid,
+                  props,
+                  slots: slots.default ? slots.default() : undefined,
+                  attrs,
+                  ctx,
+                  scene,
+                })
+              })
+            }
+
             ctx.expose(instance)
             logMessage(name, {
               sceneuuid: scene?.value.uuid,
               catalogue: catalogue?.value.uuid,
               props,
-              slots,
+              slots: slots.default ? slots.default() : undefined,
               attrs,
               ctx,
               scene,

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

@@ -44,12 +44,6 @@ export const TresCanvas = defineComponent({
       logError('Scene must contain a Camera component.')
     }
 
-    if (import.meta.hot) {
-      import.meta.hot.on('vite:beforeUpdate', () => {
-        dispose()
-      })
-    }
-
     onBeforeUnmount(() => dispose())
 
     return () => {

packages/tres/src/env.d.ts

@@ -8,3 +8,4 @@ declare module '*.vue' {
 }
 
 declare module '*.glsl' {}
+declare module '*.json' {}

packages/tres/vite.config.ts

@@ -53,7 +53,8 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         analyze(),
-        /* visualizer({
+        /*  visualizer({
+          open: true,
           gzipSize: true,
           brotliSize: true,
         }), */