Merge branch 'main' into docs/demo-basic

CHANGELOG.md

@@ -1,5 +1,29 @@
 
 
+## [4.3.0](https://github.com/Tresjs/tres/compare/4.2.10...4.3.0) (2024-09-30)
+
+
+### Features
+
+* add UseLoader component ([471bd0d](https://github.com/Tresjs/tres/commit/471bd0d16fe496a0e5e6a71a62c93093c73ce834))
+* **app:** 680 UseTexture composable as component ([#757](https://github.com/Tresjs/tres/issues/757)) ([f01a897](https://github.com/Tresjs/tres/commit/f01a897bcc9352e6a4cb1ac03e204f08b51f6b6c))
+* pass all provides down to custom renderer ([#806](https://github.com/Tresjs/tres/issues/806)) ([b4a3866](https://github.com/Tresjs/tres/commit/b4a3866f69e0c19339d7746a392f9d92569234d8))
+
+
+### Bug Fixes
+
+* eslint ([2ccd6c4](https://github.com/Tresjs/tres/commit/2ccd6c4104dd358e1a600a1e688d9a2c119611ab))
+* lint ([f71eb37](https://github.com/Tresjs/tres/commit/f71eb37648e806f4ce0a97de0d58c6bde8e43252))
+* lint ([8f18558](https://github.com/Tresjs/tres/commit/8f18558087136d7fbc68394d1069bf4a46d76fb9))
+* rollback to v6 of `@vue/devtools-api` ([#846](https://github.com/Tresjs/tres/issues/846)) ([fd3b599](https://github.com/Tresjs/tres/commit/fd3b59975f63d13ba79c824252563debc048b9d2))
+* type for useloader component props ([a4bd590](https://github.com/Tresjs/tres/commit/a4bd590776825b74188dc601b64caf59d33c7284))
+
+
+### Reverts
+
+* **nodeOps:** add check for null props ([#829](https://github.com/Tresjs/tres/issues/829)) ([04b001b](https://github.com/Tresjs/tres/commit/04b001b8edadf1ec03ce1351af1334a0746fbb3e))
+* **useRenderer:** add rendererPresets import ([#839](https://github.com/Tresjs/tres/issues/839)) ([f944647](https://github.com/Tresjs/tres/commit/f944647ad4d363b80def0e61e9cdd106e03b7e94))
+
 ## [4.2.10](https://github.com/Tresjs/tres/compare/4.2.9...4.2.10) (2024-09-04)
 
 

docs/api/tres-canvas.md

@@ -92,6 +92,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **toneMappingExposure** | Exposure level of tone mapping. | `1` |
 | **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
 | **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
+| **enableProvideBridge** | Enables the provide/inject bridge between Vue context and TresCanvas. | `true` |
 
 ### Defaults
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "4.2.10",
+  "version": "4.3.0",
   "packageManager": "[email protected]",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <[email protected]> (https://github.com/alvarosabu/)",
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^3.2.0",
-    "@vue/devtools-api": "^7.4.5",
+    "@vue/devtools-api": "^6.6.3",
     "@vueuse/core": "^11.1.0"
   },
   "devDependencies": {

playground/.eslintrc-auto-import.json

@@ -0,0 +1,67 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

playground/vue/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     Overlay: typeof import('./src/components/Overlay.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
     PbrSphere: typeof import('./src/components/PbrSphere.vue')['default']
+    ProvideBridge: typeof import('./src/components/ProvideBridge.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default']

playground/vue/src/App.vue

@@ -8,6 +8,10 @@ function setBodyClass(routeName: string) {
   document.body.className = routeName
 }
 watch([route], () => setBodyClass(route.name?.toString() ?? ''))
+provide('v-route', route)
+provide('useTres', {
+  message: `Im not the real useTres, but I can provide you with some data!`,
+})
 </script>
 
 <template>

playground/vue/src/components/ProvideBridge.vue

@@ -0,0 +1,20 @@
+<!-- ProvideBridge.vue -->
+<script setup lang="ts">
+import { provide } from 'vue'
+
+interface Props {
+  keysValues: Record<string, any>
+}
+const props = withDefaults(defineProps<Props>(), {
+  keysValues: () => ({}),
+})
+for (const [key, value] of Object.entries(props.keysValues)) {
+  provide(key, value)
+}
+</script>
+
+<template>
+  <TresGroup>
+    <slot></slot>
+  </TresGroup>
+</template>

playground/vue/src/pages/issues/732/ProvideInjectExperience.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import SubComponentWithInject from './SubComponentWithInject.vue'
+
+provide('test', '✅ Precedence is correct')
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
+    <SubComponentWithInject />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/vue/src/pages/issues/732/SubComponentWithInject.vue

@@ -0,0 +1,24 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { inject, watchEffect } from 'vue'
+
+const awiwi = inject('awiwi')
+const bululu = inject('bululu')
+const vRoute = inject('v-route')
+console.log(inject('test'))
+
+watchEffect(() => console.log('tres:awiwi', awiwi?.a))
+
+watchEffect(() => console.log('tres:bululu', bululu?.value))
+
+watchEffect(() => console.log('tres:v-route', vRoute))
+
+watchEffect(() => console.log('tres:useTres', inject('useTres')))
+</script>
+
+<template>
+  <TresMesh>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+</template>

playground/vue/src/pages/issues/732/SubVueComponentWithInject.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject, watchEffect } from 'vue'
+
+const awiwi = inject('awiwi')
+const bululu = inject('bululu')
+// eslint-disable-next-line no-console
+watchEffect(() => console.log('vue:awiwi', awiwi?.a))
+// eslint-disable-next-line no-console
+watchEffect(() => console.log('vue:bululu', bululu?.value))
+// eslint-disable-next-line no-console
+watchEffect(() => console.log('vue:v-route', inject('v-route')))
+// eslint-disable-next-line no-console
+watchEffect(() => console.log('vue:useTres', inject('useTres')))
+</script>
+
+<template>
+  <p>awiwi: {{ awiwi }}</p>
+  <p>bululu: {{ bululu }}</p>
+  <p>v-route: {{ inject('v-route') }}</p>
+</template>

playground/vue/src/pages/issues/732/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { provide, reactive } from 'vue'
+
+import ProvideInjectExperience from './ProvideInjectExperience.vue'
+import SubVueComponentWithInject from './SubVueComponentWithInject.vue'
+
+const obj = reactive({
+  a: 1,
+})
+const bululu = ref(1)
+provide('awiwi', obj)
+provide('bululu', bululu)
+provide('test', '❌ Precendence is incorrect')
+function onClick() {
+  obj.a++
+  bululu.value++
+}
+</script>
+
+<template>
+  <button @click="onClick">Click me </button>
+  <SubVueComponentWithInject />
+  <ProvideInjectExperience />
+</template>

playground/vue/src/router/routes/issues.ts

@@ -24,5 +24,9 @@ export const issuesRoutes = [
     name: '#796: unmounted',
     component: () => import('../../pages/issues/796/index.vue'),
   },
-
+  {
+    path: '/issues/732',
+    name: '#732: provide/inject',
+    component: () => import('../../pages/issues/732/index.vue'),
+  },
 ]