feat: pass all provides down to custom renderer

[alvarosabu]

Closes #537
Closes #732

[netlify]

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	03c14f0
🔍 Latest deploy log	https://app.netlify.com/sites/tresjs-docs/deploys/66e30b1b93ba0100078fd359
😎 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: 03c14f0

[andretchen0]

Precedence is backwards here.

If you insert the following in an ancestor component of a TresCanvas, it shouldn't shadow the TresCanvas's own provide('useTres', ...):

provide('useTres', 'I should not break anything')

But it does shadow it and replaces the context.

I think this should be:

provides = Object.assign({}, provides, currentInstance.provides)

Or without the assign:

      const provided = new Set(['useTres', 'extends'])
      [...]
          for (const key of Object.keys(currentInstance.provides)) {
            if (!provided.has(key)) {
              provide(key, currentInstance.provides[key])
              provided.add(key)
            }
          }

[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)

[andretchen0]

Was this file git added by mistake maybe?

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