refactor(app)!: 160 Replace value.value for value.root

[JaimeTorrealba]

Questions for you guys, some of these components doesn't export anything, should they (do you consider is a good idea)

• Meshreflector (alvaro)
• MeshWobble (alvaro)
• CatmunRoll (andre)
• Line2 (andre)
• backdrop (alvaro)
• Sky (andre)
• Sparkles (andre)

If so, let me know, I can do it without any problem

Also some demos are broken, but this as nothing to do with the current change.
EJ.
Lensflare (this is for leches)
enviroment (don't know what is the problem here) (this one export the instance correctly)

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[andretchen0]

Hi @JaimeTorrealba ,

It looks like this is the result of a find + replace. Unfortunately, that won't work here because at least Leches is still using value.value. Leches is used in a lot of demos and in the docs.

See:

pnpm run playground

... then visit ...

http://localhost:5173/abstractions/levioso

[andretchen0]

Hey @JaimeTorrealba ,

This change and others like it cause an error to be thrown or (worse) they fail silently. (That's JS for you! 😆)

oversizeColorA comes from Leches, not Cientos. Leches is still using value.value.

[JaimeTorrealba]

Yeah, I Couldn't try the lensflare, is completely broken, and you're right I use find and replace.

But the lensflares is broken from the main branch. In any case, let me go back to this changes

[JaimeTorrealba]

As I almost never use leches I didn't tested well, thanks for point this one :)

[andretchen0]

Questions for you guys, some of these components doesn't export anything, should they (do you consider is a good idea)

* Meshreflector (alvaro)

* MeshWobble (alvaro)

* CatmunRoll (andre)

* Line2 (andre)

* backdrop (alvaro)

* Sky (andre)

* Sparkles (andre)

I'll be happy to check and modify whatever components/demos I've worked on. (And others too.)

Since this PR seems to have gotten off on the wrong foot, maybe let's close and start a new PR? Also, since this is going to require reading through the files, to organize the effort, maybe it would be handy to create a markdown list in the top comment of the new PR with something like:

• abstractions/Lensflare (@andretchen0 )
• [...]
• shapes/Octahedron (@JaimeTorrealba )

Then we can all commit to the same branch and check off as we go?

[JaimeTorrealba]

Do you prefer to take the leadership here? @andretchen0

[JaimeTorrealba]

Hi, should I continue to work on this one? Or would you take it @andretchen0

[andretchen0]

Hey @JaimeTorrealba

Sorry, I didn't see the earlier message.

I can take this if you like.

I'll hop on it when I finish the new component I am working on.

[JaimeTorrealba]

@andretchen0 perfect, and thanks. Feel free to close this branch/PR if you want

[andretchen0]

Hey @JaimeTorrealba @alvarosabu

I'm working on this currently.

In making the changes, I started wondering about root as the default name for the THREE component. I think it's potentially confusing. I worry it might be confused with the root Scene or context or similar.

What about instance? So

onMounted(() => { componentRef.value.instance.position.x = 100 })

instead of

onMounted(() => { componentRef.value.root.position.x = 100 })

Would instance be better?

[JaimeTorrealba]

Yep, I like instance more too.

[alvarosabu]

Would instance be better?

I agree as well