-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix disappearing content during interaction #6094
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#13427 Bundle Size — 62.63MiB (~+0.01%).
Warning Bundle contains 70 duplicate packages – View duplicate packages Bundle metrics
|
Current #13427 |
Baseline #13424 |
|
---|---|---|
Initial JS | 45.7MiB (~+0.01% ) |
45.7MiB |
Initial CSS | 0B |
0B |
Cache Invalidation | 22% |
26.45% |
Chunks | 31 |
31 |
Assets | 34 |
34 |
Modules | 4374 |
4374 |
Duplicate Modules | 523 |
523 |
Duplicate Code | 31.69% |
31.69% |
Packages | 469 |
469 |
Duplicate Packages | 70 |
70 |
Bundle size by type 2 changes
1 regression
1 improvement
Current #13427 |
Baseline #13424 |
|
---|---|---|
JS | 62.62MiB (~+0.01% ) |
62.62MiB |
HTML | 11.16KiB (-0.33% ) |
11.2KiB |
Bundle analysis report Branch fix/remounted-component-renderin... Project dashboard
gbalint
requested review from
seanparsons,
Rheeseyb,
ruggi,
balazsbajorics,
liady and
bkrmendy
July 18, 2024 15:11
seanparsons
approved these changes
Jul 18, 2024
ruggi
approved these changes
Jul 18, 2024
liady
pushed a commit
that referenced
this pull request
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
You need all of this to reproduce the issue.
The faulty behavior is a result of 2 bugs:
Fix:
However, fully removing this condition causes problems, because it allows the function below to be parsed as 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?
Manual Tests:
I hereby swear that:
Fixes #5834