-
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
Support parsing components with top level if statements #4696
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
Job #9784: Bundle Size — 62.2MiB (~+0.01%).
Warning Bundle contains 66 duplicate packages – View duplicate packages Bundle metrics
Bundle size by type
View job #9784 report View feature/parse-components-with-to... branch activity |
Rheeseyb
changed the title
(Draft) Support parsing components with top level if statements
Support parsing components with top level if statements
Jan 9, 2024
Rheeseyb
changed the title
Support parsing components with top level if statements
(Draft) Support parsing components with top level if statements
Jan 9, 2024
Rheeseyb
changed the title
(Draft) Support parsing components with top level if statements
Support parsing components with top level if statements
Jan 9, 2024
Rheeseyb
requested review from
gbalint,
seanparsons,
ruggi,
balazsbajorics,
liady and
bkrmendy
January 9, 2024 16:12
bkrmendy
approved these changes
Jan 9, 2024
gbalint
approved these changes
Jan 9, 2024
seanparsons
approved these changes
Jan 10, 2024
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:
Our parsing currently fails on a component with a top level
if
statement, meaning that a component of the form:will be parsed as an arbitrary JS block, meaning that it then can't be focused, and therefore internal elements can't be selected.
Fix:
Since this is a general issue, where the component will fail to parse if there is some arbitrary javascript code surrounding the
return
statement, we now support parsing a component with aJSExpressionOtherJavaScript
as the root element. To do this, when parsing a function body, if we first fail to parse out any top level JSX elements (in the return statement), we then attempt to parse the entire body itself asJSExpressionOtherJavaScript
, and check if there are elements defined within - if there are none then we fall back to treating the entire function as a top level JS block.When we are parsing an isolated piece of code somewhere in the file, part of the existing logic includes a babel transpile that might also wrap it in parens (as perhaps that piece of code in isolation would be incorrect, but in the wider context of the full source file it is perfectly valid). We have a similar issue here, as we're parsing the entire function body, and e.g. a
return
statement would not be legal at the root level of a source file. For this reason, we can now also wrap the isolated code into an anonymous function purely for the sake of transpiling and parsing it.I've also had to tweak a small amount of the printing logic to handle printing of components with a
JSExpressionOtherJavaScript
.Caveat:
As the root element is now treated as being generated by code, and we don't allow canvas manipulation of generated elements, these components will currently only support focusing / selection, but not editing.
Sample project:
Before: https://utopia.pizza/p/8830bc6c-separate-marjoram
After: https://utopia.pizza/p/8830bc6c-separate-marjoram/?branch_name=feature-parse-components-with-top-level-if