feat: pass all provides down to custom renderer #806
Conversation
✅ Deploy Preview for tresjs-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
commit: |
There was a problem hiding this comment.
Hey @alvarosabu ,
I grabbed the latest revision. provide from outside the <TresCanvas> doesn't seem to work on components within the <TresCanvas> – I tried adding an inject in SubComponentWithInject.vue.
I could be wrong though. I didn't find a demo that showed how this is meant to be used, so I wrote a quick one, but maybe it's not how this is intended to be used. (I only found a demo that's intended to show that providing useTres doesn't break things)
Hi @andretchen0 yeah no worries I was just trying stuff, will set this PR to draft. I did manage to make it work with I'm currently clueless how to make it work, I opened a help request here in vue discord https://discord.com/channels/325477692906536972/1283405486175031418 |
If we want to be explicit about <!-- 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> <TresCanvas>
<TresPerspectiveCamera />
<OrbitControls />
<ProvideBridge :keys-values="{ foo: inject('foo') }">
<Box /> <!-- Box can inject "foo" in its script setup -->
</ProvideBridge>
</TresCanvas> |
… of github.com:Tresjs/tres into feature/732-pass-vue-providers-down-to-custom-renderer
alvarosabu
deleted the
feature/732-pass-vue-providers-down-to-custom-renderer
branch
Closes #537
Closes #732
This PR adds an opt-out bridge to pass down Vue parent
providesdown to the Tres components viaTresCanvaswith a flag to disable itenableProvideBridgeHow to test
pnpm run devYou should see console logs with prefixes like
tresfrom the child tres component with the injects andvuefor the vue child components, both should show a value different from undefined.If you pass the
:enable-provide-bridge="false"and refresh, thetresconsoles should be undefined.