-
Notifications
You must be signed in to change notification settings - Fork 172
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Navigate to the annotation in the sidecar file (#5999)
**Problem:** Followup to #5989 Clicking on the Components inspector section's ◇ logo opens the annotation file for the given component AND jumps to the annotation of the component in the file. (Second task of #5971 ) **Fix:** I used the Babel parser to find the component annotation in the sidecar file. - It can find the annotation if it in the exported object literal, or even if it is in a variable referred from this file. It does not support imports though, everything has to be in this file. - This is a best effort to find the annotation, if it can not do it like this (e.g. the annotation is dynamically generated, or anything which the parser is not prepared for), then it just doesn't save the bounds. Clicking on the button will still open the sidecar file. The bounds are stored in the component descriptor source object (which until now only stored the file path itself). **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
- Loading branch information
Showing
14 changed files
with
219 additions
and
29 deletions.
There are no files selected for viewing
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
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
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
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
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
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
89 changes: 89 additions & 0 deletions
89
editor/src/core/property-controls/component-descriptor-parser.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import * as BabelParser from '@babel/parser' | ||
| import traverse from '@babel/traverse' | ||
| import type { Bounds } from 'utopia-vscode-common' | ||
| import type { TextFileContentsWithPath } from './property-controls-local' | ||
|
|
||
| export type ComponentBoundsByModule = { | ||
| [moduleName: string]: { [componentName: string]: Bounds } | ||
| } | ||
|
|
||
| export function generateComponentBounds( | ||
| descriptorFile: TextFileContentsWithPath, | ||
| ): ComponentBoundsByModule { | ||
| const ast = BabelParser.parse(descriptorFile.file.code, { | ||
| sourceType: 'module', | ||
| plugins: ['jsx'], | ||
| }) | ||
|
|
||
| const componentBoundsByModule: ComponentBoundsByModule = {} | ||
|
|
||
| // Store variable declarations | ||
| const variableDeclarations: Record<string, any> = {} | ||
| // Traverse the AST to collect variable declarations | ||
| traverse(ast, { | ||
| VariableDeclarator(path) { | ||
| const { id, init } = path.node | ||
| if (id.type === 'Identifier' && init != null) { | ||
| variableDeclarations[id.name] = init | ||
| } | ||
| }, | ||
| }) | ||
|
|
||
| // Function to resolve a variable to its object value | ||
| function resolveVariable(node: any): any { | ||
| if (node.type === 'Identifier' && variableDeclarations[node.name] != null) { | ||
| return variableDeclarations[node.name] | ||
| } | ||
| return node | ||
| } | ||
|
|
||
| // Traverse the AST to find the default export and process the Components object | ||
| traverse(ast, { | ||
| ExportDefaultDeclaration(path) { | ||
| const declaration = path.node.declaration | ||
| if (declaration.type !== 'Identifier') { | ||
| return | ||
| } | ||
|
|
||
| const variableName = declaration.name | ||
| const componentsNode = variableDeclarations[variableName] | ||
| if (componentsNode?.type !== 'ObjectExpression') { | ||
| return | ||
| } | ||
|
|
||
| componentsNode.properties.forEach((module: any) => { | ||
| if (module.type !== 'ObjectProperty' || module.key.type !== 'StringLiteral') { | ||
| return | ||
| } | ||
|
|
||
| const moduleName = module.key.value | ||
| if (componentBoundsByModule[moduleName] == null) { | ||
| componentBoundsByModule[moduleName] = {} | ||
| } | ||
|
|
||
| const moduleValue = resolveVariable(module.value) | ||
| if (moduleValue.type !== 'ObjectExpression') { | ||
| return | ||
| } | ||
|
|
||
| moduleValue.properties.forEach((component: any) => { | ||
| if (component.type !== 'ObjectProperty' || component.key.type !== 'Identifier') { | ||
| return | ||
| } | ||
|
|
||
| const componentName = component.key.name | ||
| const { loc } = component | ||
| if (loc != null) { | ||
| componentBoundsByModule[moduleName][componentName] = { | ||
| startLine: loc.start.line, | ||
| startCol: loc.start.column, | ||
| endLine: loc.end.line, | ||
| endCol: loc.end.column, | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
| }, | ||
| }) | ||
| return componentBoundsByModule | ||
| } |
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
Oops, something went wrong.