Sample store: Elements disappearing during canvas interaction #5834
Assignees
Labels
Milestone
Comments
|
I don't remember this being a problem in the hydrogen-november project, so I think that's a good starting point to figure out what's the difference between the two projects |
maltenuhn
added
Severe
|
concrete-utopia/hydrogen-editions-24@cf4aed2
|
|
Re-opening this as we mitigated the symptom but did not fix the underlying issue. Also, the sample project still contains a bunch of components that blink during canvas interactions |
2 tasks
liady
pushed a commit
that referenced
this issue
Dec 13, 2024
**Problem:** See #5834 There is a way to reproduce this bug without the sample store, just resize the pink rectangle in this project: https://utopia.pizza/project/d8bb2af5 The bug happens in the following situation: - there is a component (Container in the example) which has a prop coming from an object spread parameter of the component - this prop specifies the rendered root component/element (in the example the default value is 'div') - this component has children, and when you interact (e.g. resize) with one of its children, those siblings which are components are not visible during the interaction (MyComp in the example) You need all of this to reproduce the issue. - If the sibling is not a component, it is rendered perfectly - If the prop from the object spread is not used directly but assigned to a local variable, then everything works perfectly. The faulty behavior is a result of 2 bugs: 1. The component is parsed as ARBITRARY_JS_BLOCK and not as UTOPIA_JSX_COMPONENT. Because of this the Container component is unmounted and remounted at the beginning of the interaction. It is parsed as a js block, because we only allow parsing as a component when the jsx name is known, and the props from the object spread are not included in the known names in the check. 2. ComponentRendererComponent is buggy, and loses its buildResult cached value when a component is remounted and shouldUpdate() is false. This happens because buildResult is a ref initialized with null and it is only filled with the proper value when shouldUpdate() is true. **Fix:** 1. I don't think the parser should check if a jsx name is known. When the syntax is clearly jsx, we should parse that as a jsx component. When the jsx name is not known, we will see the proper runtime exception. However, fully removing this condition causes problems, because it allows the function below to be parsed as component: ``` function wrappedComponent(Component) => { return <Component /> } ``` If we parse this as a component our runtime fails to execute it. I think this is a deeper parser issue, and it seems it is mostly pure luck that we parse this as arbitrary block (just because it thinks `Component` is not known). I did not dive deeper and just added properties exposed by the params to the list of known names, but I think this problem worth a more detailed investigation. What makes a component a component besides it being a function and returning a jsx? 2. Update the buildResult ref in ComponentRendererComponent even if shouldUpdate is false when its value is 'null' **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode Fixes #5834
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See e.g.
https://screenshot.click/05-09-s8rsq-17biw.mp4
https://screenshot.click/05-08-8gc49-a3cc6.mp4
Copying from the closed issue #5841 , the two issues are connected:
Some content is blinking/reloading/rerendering (remounting?) on all different kinds of interactions. E.g. see the tote bag here blinking on resizing something next to it:
https://screenshot.click/05-00-j4ybz-2nr75.mp4
Or simply when we switch editor mode:
https://screenshot.click/05-07-nwvug-d7e4g.gif
This may be connected to: #5834
It is suspicious that this is connected to live data coming from the loader. I also experienced that the mutation/resize observer fires in cases when there are no changes (e.g. during scrolling), that may be connected to this issue too.
The text was updated successfully, but these errors were encountered: