primitive `obj` reactivity broken after nodeOps being a function
alvarosabu opened this issue · comments
Describe the bug
Seems like making nodeOps
a function #579 broke primitive obj
reactivity since we need to create a new element for primitive
Reproduction
local
Steps to reproduce
No response
System Info
System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M1 Pro
Memory: 68.70 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
Browsers:
Brave Browser: 120.1.61.116
Chrome: 123.0.6312.58
Firefox: 121.0.1
Safari: 17.3.1
npmPackages:
@tresjs/cientos: 3.6.0 => 3.6.0
@tresjs/core: workspace:^ => 4.0.0-next.1
@tresjs/leches: 0.15.0-next.3 => 0.15.0-next.3
Used Package Manager
pnpm
Code of Conduct
- I agree to follow this project's Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
Maybe @andretchen0 can you give me a hand with this one? The problem is here
Lines 197 to 199 in 8efe6e0
v4
I was trying to avoid needing to duplicate the code inside of createElement, but now that nodeOps
is a function, this is no longer correct.
Let me know
Sure thing. I'll have a look!
Hey @alvarosabu !
Fix
One approach to this would be to define the functions and then collect them into an object to return.
Concretely, right now nodeOps looks like ...
export const nodeOps: () => RendererOptions<TresObject, TresObject | null> = () => {
let scene: TresScene | null = null
// NOTE: functions are defined in the return object
return { createElement(tag, _isSVG, _anchor, props): TresObject | null {
if (!props) props = {}
if (!props.args) {
props.args = []
}
But if it's like the following, then you can call createElement( ... )
from within any function that's defined after.
export const nodeOps: () => RendererOptions<TresObject, TresObject | null> = () => {
let scene: TresScene | null = null
// NOTE: createElement, etc. are still defined within the nodeOps function, so they close over scene
const createElement(tag, _isSVG, _anchor, props): TresObject | null => { ... }
const patchProp(node, prop, prevValue, nextValue) => { ...
...
// NOTE: patchProp now closes over createElement, so you can call it like so ...
const newInstance = createElement('primitive', undefined, undefined, { ...
...
}
// NOTE: assemble the `RendererOptions` object and return it.
return {
createElement,
patchProp,
...
}
}
Question
Would you like me to submit a PR?
Thanks @andretchen0 you are completely right, I just created the PR #602