Merge branch 'main' into feature/20-docs-core-examples

package.json

@@ -9,6 +9,7 @@
   ],
   "scripts": {
     "preinstall": "npx only-allow pnpm",
+    "postinstall": "pnpm run build:ci",
     "update-deps": "pnpm update -i -r --latest",
     "build:ci": "pnpm run build:tres && pnpm run build:cientos",
     "build:tres": "pnpm --filter @tresjs/core build",
@@ -46,8 +47,8 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "workspace:^1.0.0",
-    "@tresjs/core": "workspace:^1.1.0",
+    "@tresjs/cientos": "workspace:^1.1.0",
+    "@tresjs/core": "workspace:^1.2.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",

packages/cientos/CHANGELOG.md

@@ -1,3 +1,24 @@
+# 1.1.0 (2022-12-08)
+
+### Bug Fixes
+
+- app.vue ([60023dd](https://github.com/Tresjs/tres/commit/60023dd5ad3fbbc5c139648fcf7b72a08149d340))
+- **cientos:** fixed useCientos type issues ([34aefc6](https://github.com/Tresjs/tres/commit/34aefc6f3f2d51a4cc4e646160fa11b4936782e9))
+- **core:** enabled function calling on process props ([f544371](https://github.com/Tresjs/tres/commit/f5443713cd34ad284bb01d4bb4ea1d23bb3e43d2))
+- linters ([b1bbbcf](https://github.com/Tresjs/tres/commit/b1bbbcfce9e4511ed1ce3137f6f3ba082f7d29b0))
+- make it work with new instance creator logic ([5c07f84](https://github.com/Tresjs/tres/commit/5c07f84e34b44a4d625b9c4e98acfe4274453a6d))
+- remove initial Orbitcontrol extend from plugin ([171ede4](https://github.com/Tresjs/tres/commit/171ede4ff61bbc6b9edd5f0e83859e956ab0e30b))
+- types ([8500c62](https://github.com/Tresjs/tres/commit/8500c6238927d6f6dbce71da2a4f5e1432a1c953))
+
+### Features
+
+- **cientos:** getting app from getCurrentInstance 🤩 ([f899977](https://github.com/Tresjs/tres/commit/f899977f25ec51a607946b726578811b87db85b3))
+- **cientos:** Refactor OrbitControls to use new extend API ([7251b60](https://github.com/Tresjs/tres/commit/7251b6085c629d1fdbe4272cc264d21790ad8241))
+- **cientos:** text3d base ([0e13051](https://github.com/Tresjs/tres/commit/0e130514b0975d6eadd41a8a999998128b92a189))
+- **cientos:** Text3D now accepts sweet text via slots ([8f3a2f4](https://github.com/Tresjs/tres/commit/8f3a2f4787c3e2dff8d71e0588c60794abdd75a7))
+- **core:** extension now works with slots passed by ([e1bfea1](https://github.com/Tresjs/tres/commit/e1bfea1a0901eb61a88b23fb0423f207877045f1))
+- text3d on cientos ([ff80fdb](https://github.com/Tresjs/tres/commit/ff80fdb6cb0655d87ae9b24cc8904b96792baa00))
+
 # @tresjs/cientos
 
 # 1.0.0 (2022-11-29)

packages/cientos/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -36,7 +36,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "peerDependencies": {
-    "@tresjs/core": "workspace:^1.1.0",
+    "@tresjs/core": "workspace:^1.2.0",
     "three": "latest",
     "vue": "^3.2.45"
   },
@@ -54,7 +54,7 @@
     "vite-plugin-dts": "^1.7.0"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.1.0",
+    "@tresjs/core": "workspace:^1.2.0",
     "three-stdlib": "^2.17.3"
   }
 }

packages/cientos/src/core/OrbitControls.vue

@@ -1,32 +1,36 @@
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { Camera, WebGLRenderer } from 'three'
-import { OrbitControls as OrbitControlsImp } from 'three-stdlib'
-import { inject, type Ref, unref, watch } from 'vue'
+<script lang="ts" setup>
+import { Camera, Vector3, WebGLRenderer } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { inject, ref, type Ref } from 'vue'
 
-let controls: OrbitControlsImp
+import { useCientos } from './useCientos'
 
-const camera = inject<Ref<Camera>>('camera')
-const renderer = inject<Ref<WebGLRenderer>>('renderer')
-watch(
-  [camera, renderer],
-  () => {
-    if (camera?.value && renderer?.value) {
-      if (controls) controls.reset()
-      controls = new OrbitControlsImp(camera.value, unref(renderer).domElement)
-      controls.enableDamping = true
-
-      const { onLoop } = useRenderLoop()
-
-      onLoop(() => {
-        if (controls) {
-          controls.update()
-        }
-      })
-    }
-  },
+withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+    enableDamping?: boolean
+  }>(),
   {
-    deep: true,
+    makeDefault: false,
   },
 )
+
+const controls = ref(null)
+const camera = inject<Ref<Camera>>('camera')
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
+
+const { extend } = useCientos()
+extend({ OrbitControls })
 </script>
+
+<template>
+  <TresOrbitControls
+    v-if="camera && renderer"
+    ref="controls"
+    :args="[camera, renderer?.domElement]"
+    :enabling-dampling="enableDamping"
+  />
+</template>

packages/cientos/src/core/Text3D.vue

@@ -0,0 +1,98 @@
+<script async setup lang="ts">
+import { TextGeometry, FontLoader } from 'three-stdlib'
+
+import { computed, useSlots } from 'vue'
+import { useCientos } from './useCientos'
+
+type Glyph = {
+  _cachedOutline: string[]
+  ha: number
+  o: string
+}
+
+type FontData = {
+  boundingBox: {
+    yMax: number
+    yMin: number
+  }
+  familyName: string
+  glyphs: {
+    [k: string]: Glyph
+  }
+  resolution: number
+  underlineThickness: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    font: FontData | string
+    text?: string
+    size?: number
+    height?: number
+    curveSegments?: number
+    bevelEnabled?: boolean
+    bevelThickness?: number
+    bevelSize?: number
+    bevelOffset?: number
+    bevelSegments?: number
+  }>(),
+  {
+    size: 0.5,
+    height: 0.2,
+    curveSegments: 5,
+    bevelEnabled: true,
+    bevelThickness: 0.05,
+    bevelSize: 0.02,
+    bevelOffset: 0,
+    bevelSegments: 4,
+  },
+)
+
+const { extend } = useCientos()
+
+extend({ TextGeometry })
+
+const loader = new FontLoader()
+
+const slots = useSlots()
+
+const localText = computed(() => {
+  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) => {
+  try {
+    if (typeof props.font === 'string') {
+      loader.load(props.font, font => {
+        resolve(font)
+      })
+    } else {
+      resolve(props.font)
+    }
+  } catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+
+const textOptions = computed(() => {
+  return {
+    font: font,
+    size: props.size,
+    height: props.height,
+    curveSegments: props.curveSegments,
+    bevelEnabled: props.bevelEnabled,
+    bevelThickness: props.bevelThickness,
+    bevelSize: props.bevelSize,
+    bevelOffset: props.bevelOffset,
+    bevelSegments: props.bevelSegments,
+  }
+})
+</script>
+<template>
+  <TresMesh v-if="font">
+    <TresTextGeometry v-if="localText" :args="[localText, textOptions]" />
+    <slot />
+  </TresMesh>
+</template>

packages/cientos/src/core/useCientos.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue'
+
+export function useCientos() {
+  const extend =
+    inject<(objects: any) => void>('extend') ||
+    (() => {
+      console.warn('No extend function provided')
+    })
+  return {
+    extend,
+  }
+}

packages/cientos/src/env.d.ts

@@ -1,8 +1,20 @@
 /// <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
   const component: DefineComponent<{}, {}, any>
   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 {
+    // Define the location property, with a type of Location
+    __TRES__: {
+      app: App
+      version: string
+    }
+  }
+}

packages/cientos/src/index.ts

@@ -1,5 +1,7 @@
 import OrbitControls from './core/OrbitControls.vue'
 import { useTweakPane } from './core/useTweakPane'
 import { GLTFModel } from './core/useGLTF/component'
+import Text3D from './core/Text3D.vue'
+
 export * from './core/useGLTF'
-export { OrbitControls, useTweakPane, GLTFModel }
+export { OrbitControls, useTweakPane, GLTFModel, Text3D }

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/CHANGELOG.md

@@ -1,3 +1,33 @@
+# 1.2.0 (2022-12-08)
+
+### Bug Fixes
+
+- app.vue ([60023dd](https://github.com/Tresjs/tres/commit/60023dd5ad3fbbc5c139648fcf7b72a08149d340))
+- **core:** added error handling to extend ([fcfbce9](https://github.com/Tresjs/tres/commit/fcfbce9a03d5ec85ab160b4cc0e99c254b715c1a))
+- **core:** enabled function calling on process props ([f544371](https://github.com/Tresjs/tres/commit/f5443713cd34ad284bb01d4bb4ea1d23bb3e43d2))
+- **core:** moved window types to index.d.ts ([7f76016](https://github.com/Tresjs/tres/commit/7f7601643f2ebda706fdbbc799250bc7e1f595a5))
+- **core:** removed unused imports ([1387834](https://github.com/Tresjs/tres/commit/1387834ed30d5a98e32e8d6a7f166df2b4b2482f))
+- hmr nstance creator ([750c614](https://github.com/Tresjs/tres/commit/750c614cfb828e3033929ef173aa5cbc7158a9d4))
+- make it work with new instance creator logic ([5c07f84](https://github.com/Tresjs/tres/commit/5c07f84e34b44a4d625b9c4e98acfe4274453a6d))
+- remove disposal of the renderer ([9a9ee41](https://github.com/Tresjs/tres/commit/9a9ee41d2c6d716be994baa63e59cbfd6d1bf61a))
+- remove initial Orbitcontrol extend from plugin ([171ede4](https://github.com/Tresjs/tres/commit/171ede4ff61bbc6b9edd5f0e83859e956ab0e30b))
+- remove unused ref ([4384c8e](https://github.com/Tresjs/tres/commit/4384c8e823bab68a5026eece58ae0f8033ef6834))
+- types ([8500c62](https://github.com/Tresjs/tres/commit/8500c6238927d6f6dbce71da2a4f5e1432a1c953))
+- use local-scene inject instead of composable to avoid different scene created from cientos ([33353f8](https://github.com/Tresjs/tres/commit/33353f875162a7540d8eb0cb6a7d14ca02ca614b))
+
+### Features
+
+- **cientos:** text3d base ([0e13051](https://github.com/Tresjs/tres/commit/0e130514b0975d6eadd41a8a999998128b92a189))
+- **cientos:** Text3D now accepts sweet text via slots ([8f3a2f4](https://github.com/Tresjs/tres/commit/8f3a2f4787c3e2dff8d71e0588c60794abdd75a7))
+- **core:** usage of window global variable for extendability on other pkgs ([815b839](https://github.com/Tresjs/tres/commit/815b839e24f672df3a586e9c39232327716e244a))
+- **core:** add camera to scene ([631c119](https://github.com/Tresjs/tres/commit/631c119bb808f6e2eb6a37c3d9c91adb01eb991b))
+- **core:** extend example with TextGeometry ([33be4da](https://github.com/Tresjs/tres/commit/33be4da77aac6c6323ce247b057e03788e82c71e))
+- **core:** extend functionality ([c1da082](https://github.com/Tresjs/tres/commit/c1da08279e0254e8253f98753f4a7b16391587c8))
+- **core:** extend reactive catalog ([a6bc3f9](https://github.com/Tresjs/tres/commit/a6bc3f9e6edc1c4d7a3d562e146dd887038e7b2e))
+- **core:** extension now works with slots passed by ([e1bfea1](https://github.com/Tresjs/tres/commit/e1bfea1a0901eb61a88b23fb0423f207877045f1))
+- **core:** refactored instance creator and expose methods to be used on cientos ([f943807](https://github.com/Tresjs/tres/commit/f9438070b446d5bf318a1d734c4f3cbb4933f43e))
+- text3d on cientos ([ff80fdb](https://github.com/Tresjs/tres/commit/ff80fdb6cb0655d87ae9b24cc8904b96792baa00))
+
 # 1.1.0 (2022-12-05)
 
 ### Bug Fixes

packages/tres/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "workspace:^1.0.0",
+    "@tresjs/cientos": "workspace:^1.1.0",
     "@types/three": "^0.146.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",

packages/tres/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /* import { Color } from 'three' */
-import { useTweakPane, OrbitControls } from '../../cientos/src'
+/* import { useTweakPane, OrbitControls } from '../../cientos/src' */
+import { useTweakPane, OrbitControls } from '@tresjs/cientos'
 /* import TestSphere from '/@/components/TestSphere.vue' */
-import Text3D from '/@/components/Text3D.vue'
 /* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { useTres, useCatalogue } from '/@/core' */
 
@@ -25,12 +25,14 @@ useTweakPane()
       physically-correct-lights
     >
       <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-      <OrbitControls />
       <TresScene>
+        <OrbitControls />
         <TresAmbientLight :intensity="0.5" />
         <!--  <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" /> -->
-        <Text3D />
-        <!--   <TestSphere /> -->
+        <TresMesh :position="[0, 0, 0]">
+          <TresBoxGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
         <TresAxesHelper :args="[1]" :visible="false" />
         <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
       </TresScene>

packages/tres/src/components/Text3D.vue

@@ -36,6 +36,6 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 <template>
   <TresMesh>
     <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-    <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    <TresMeshNormalMaterial :matcap="matcapTexture" />
   </TresMesh>
 </template>

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

@@ -1,27 +1,38 @@
-import { useInstanceCreator } from '/@/core'
 import { App, ref, Component, Ref } from 'vue'
 import * as THREE from 'three'
+import { useInstanceCreator } from '/@/core'
+import { useLogger } from '/@/composables'
 import { TresCatalogue } from '/@/types'
 
-const catalogue: Ref<TresCatalogue> = ref({ ...THREE })
+const catalogue: Ref<TresCatalogue> = ref({ ...THREE, uuid: THREE.MathUtils.generateUUID() })
 
 delete catalogue.value.Scene
 
 let localApp: App
-
 export function useCatalogue(app?: App, prefix = 'Tres') {
+  const { logMessage, logError } = useLogger()
   if (!localApp && app) {
     localApp = app
   }
   const { createComponentInstances } = useInstanceCreator(prefix)
 
   const extend = (objects: any) => {
+    if (!objects) {
+      logError('No objects provided to extend catalogue')
+      return
+    }
     catalogue.value = Object.assign(catalogue.value, objects)
     const components = createComponentInstances(ref(objects))
+    logMessage('Adding objects to catalogue', { objects, catalogue: catalogue.value.uuid })
 
-    components.forEach(([key, cmp]) => {
-      localApp.component(key as string, cmp as Component)
-    })
+    if (localApp) {
+      components.forEach(([key, cmp]) => {
+        // If the component is not already registered, register it
+        if (!localApp._context.components[key as string]) {
+          localApp.component(key as string, cmp as Component)
+        }
+      })
+    }
   }
 
   return {

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

@@ -1,10 +1,10 @@
 /* eslint-disable new-cap */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { OrthographicCamera, PerspectiveCamera } from 'three'
-import { defineComponent, Ref } from 'vue'
+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'
 
@@ -59,34 +59,45 @@ export function useInstanceCreator(prefix: string) {
     })
   }
 
-  function createInstanceFromVNode(vnode: TresVNode, catalogue: Ref<TresCatalogue>): TresInstance {
-    const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
-
-    // check if args prop is defined on the vnode
-    let internalInstance
-    if (vnode?.props?.args) {
-      // if args prop is defined, create new instance of catalogue[vNodeType] with the provided arguments
-      internalInstance = new catalogue.value[vNodeType](...vnode.props.args)
+  function createInstanceFromVNode(vnode: TresVNode): TresInstance | TresInstance[] | undefined {
+    const fragmentRegex = /^Symbol\(Fragment\)$/g
+    const textRegex = /^Symbol\(Text\)$/g
+    // Check if the vnode is a Fragment
+    if (fragmentRegex.test(vnode.type.toString())) {
+      return vnode.children.map(child => createInstanceFromVNode(child as TresVNode)) as TresInstance[]
+    } else if (textRegex.test(vnode.type.toString())) {
+      return
     } else {
-      // if args prop is not defined, create a new instance of catalogue[vNodeType] without arguments
-      internalInstance = new catalogue.value[vNodeType]()
-    }
+      const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
+      const { catalogue: fallback } = useCatalogue()
+      const catalogue = inject<Ref<TresCatalogue>>('catalogue') || fallback
+      // check if args prop is defined on the vnode
+      let internalInstance
+      if (catalogue) {
+        if (vnode?.props?.args) {
+          // if args prop is defined, create new instance of catalogue[vNodeType] with the provided arguments
+          if (catalogue?.value[vNodeType]) {
+            internalInstance = new catalogue.value[vNodeType](...vnode.props.args)
+          } else {
+            logError(`There is no ${vNodeType} in the catalogue`, catalogue?.value.uuid)
+          }
+        } else {
+          // if args prop is not defined, create a new instance of catalogue[vNodeType] without arguments
+          internalInstance = new catalogue.value[vNodeType]()
+        }
+      }
 
-    // check if props is defined on the vnode
-    if (vnode?.props) {
-      // if props is defined, process the props and pass the internalInstance to update its properties
-      processProps(vnode.props, internalInstance)
-    }
+      // check if props is defined on the vnode
+      if (vnode?.props) {
+        // if props is defined, process the props and pass the internalInstance to update its properties
+        processProps(vnode.props, internalInstance)
+      }
 
-    return internalInstance
+      return internalInstance
+    }
   }
 
-  function createInstance(
-    catalogue: Ref<TresCatalogue>,
-    threeObj: any,
-    attrs: TresAttributes,
-    slots: Record<string, any>,
-  ): TresInstance {
+  function createInstance(threeObj: any, attrs: TresAttributes, slots: Record<string, any>): TresInstance {
     /*
      * Checks if the component has slots,
      * if it does, it will create a new Object3D instance passing the slots instances as properties
@@ -99,8 +110,8 @@ export function useInstanceCreator(prefix: string) {
      * const mesh = new Mesh(new BoxGeometry(), new MeshBasicMaterial())
      */
     if (slots.default && slots?.default()) {
-      const internal = slots.default().map((vnode: TresVNode) => createInstanceFromVNode(vnode, catalogue))
-      return new threeObj(...internal)
+      const internal = slots.default().map((vnode: TresVNode) => createInstanceFromVNode(vnode))
+      return new threeObj(...internal.flat().filter(Boolean))
     } else {
       // Creates a new THREE instance, if args is present, spread it on the constructor
       return attrs.args ? new threeObj(...attrs.args) : new threeObj()
@@ -115,10 +126,12 @@ export function useInstanceCreator(prefix: string) {
         const cmp = defineComponent({
           name,
           setup(props, { slots, attrs, ...ctx }) {
-            const { scene } = useScene()
+            const { scene: fallback } = useScene()
+            const scene = inject<Ref<Scene>>('local-scene') || fallback
+            const catalogue = inject<Ref<TresCatalogue>>('catalogue')
             const { pushCamera } = useCamera()
 
-            const instance = createInstance(catalogue, 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) {
@@ -130,10 +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/src/index.ts

@@ -1,10 +1,10 @@
-import { App, Component, watchEffect } from 'vue'
+import { App, Component } from 'vue'
 import { TresCanvas } from '/@/core/useRenderer/component'
 import { Scene } from '/@/core/useScene/component'
 import { useCatalogue, useInstanceCreator } from '/@/core'
 export * from '/@/core'
 export * from './keys'
-
+import { version } from '../package.json'
 export interface TresOptions {
   prefix?: string
   extends?: Record<string, unknown>
@@ -19,7 +19,9 @@ const plugin: TresPlugin = {
     const prefix = options?.prefix || 'Tres'
     app.component(`${prefix}Canvas`, TresCanvas)
     app.component(`${prefix}Scene`, Scene)
-    const { catalogue } = useCatalogue(app, prefix)
+    const { catalogue, extend } = useCatalogue(app, prefix)
+    app.provide('catalogue', catalogue)
+    app.provide('extend', extend)
     const { createComponentInstances } = useInstanceCreator(prefix)
     const components = createComponentInstances(catalogue)
     /*  const components = createComponentInstances(
@@ -29,9 +31,10 @@ const plugin: TresPlugin = {
       app.component(key as string, cmp as Component)
     })
 
-    watchEffect(() => {
-      console.log({ catalogue })
-    })
+    window.__TRES__ = {
+      app,
+      version,
+    }
   },
 }
 

packages/tres/src/main.ts

@@ -1,14 +1,9 @@
 import { createApp } from 'vue'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import App from './App.vue'
 import plugin from '.'
 import './style.css'
 
 export const app = createApp(App)
 
-app.use(plugin, {
-  extends: {
-    OrbitControls,
-  },
-})
+app.use(plugin)
 app.mount('#app')

packages/tres/src/types/index.d.ts

@@ -11,3 +11,14 @@ export type TresVNodeType = VNodeTypes & {
 }
 export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
+
+declare global {
+  // Define the window interface, with type annotations for the properties and methods of the window object
+  interface Window {
+    // Define the location property, with a type of Location
+    __TRES__: {
+      app: App
+      version: string
+    }
+  }
+}

packages/tres/vite.config.ts

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