feat: pass all provides down to custom renderer

[alvarosabu]

Closes #537
Closes #732

This PR adds an opt-out bridge to pass down Vue parent provides down to the Tres components via TresCanvas with a flag to disable it enableProvideBridge

How to test

• pnpm run dev
• Go to #732: provide/inject
• Open devtools
• Click the button

You should see console logs with prefixes like tres from the child tres component with the injects and vue for the vue child components, both should show a value different from undefined.

If you pass the :enable-provide-bridge="false" and refresh, the tres consoles should be undefined.

[netlify]

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	5f689b7
🔍 Latest deploy log	https://app.netlify.com/sites/tresjs-docs/deploys/66faa0ae0c32820008a9bd92
😎 Deploy Preview	https://deploy-preview-806--tresjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/@tresjs/core@806

commit: b1b2461

[andretchen0]

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)

[alvarosabu]

I grabbed the latest revision. provide from outside the doesn't seem to work on components within the – 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 useTres and such but I can't make it work with reactivity. The inject inside just get the value the first time and it doesn't get updated further (for example clicking the button outside)

I'm currently clueless how to make it work, I opened a help request here in vue discord https://discord.com/channels/325477692906536972/1283405486175031418

[andretchen0]

I'm currently clueless how to make it work

If we want to be explicit about provides that are "bridged", a component like this works:

<!-- 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>