I'm interested in building a generic solution from this. Not only react but a base for JavaScript.
We could grab the abstract syntax tree (AST) of the file and display a high level visual of possible split points of the nodes.
The user can customize per settings for each project/directory/file or AST node structure match. That would allow targeting React components, stores/models, other framework files etc. Or use defaults.
This way you can build custom configs based on selectors of the AST nodes or collections of nodes for different file types.
For example when viewing a class component extending React we know to apply react based AST selectors to split it. When viewing a MobX store we apply MobX splitting etc. Even create a plugin ecosystem around specific frameworks and selectors.
In fact, my solution is implemented by analyzing AST to find split points, and the original version of Volar is also implemented in this way. They just don't support configurable, but focus more on a specific framework.
My temporary goal is to use this idea to make a version that supports the regular syntax of React function components, it will still be placed in vscode-jsx-sfc. Because I hope jsx-sfc is more than just a special new API, and it can grow into a more generic solution focusing on improving the development experience of React function components. In the future, I will integrate more practical React development experience to design and optimize it.
If the community can create a general solution, such as vscode-split-editors, this is what I would like to see, which shows that this idea has wider existence value. I think we still need to design carefully. For example, we can't have too many split editors, if there are more than 4, each editor area is very small, which will also cause inconvenience. Thanks.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm interested in building a generic solution from this. Not only react but a base for JavaScript.
We could grab the abstract syntax tree (AST) of the file and display a high level visual of possible split points of the nodes.
The user can customize per settings for each project/directory/file or AST node structure match. That would allow targeting React components, stores/models, other framework files etc. Or use defaults.
This way you can build custom configs based on selectors of the AST nodes or collections of nodes for different file types.
For example when viewing a class component extending React we know to apply react based AST selectors to split it. When viewing a MobX store we apply MobX splitting etc. Even create a plugin ecosystem around specific frameworks and selectors.
It's a cool idea, I think it's feasible~
In fact, my solution is implemented by analyzing AST to find split points, and the original version of Volar is also implemented in this way. They just don't support configurable, but focus more on a specific framework.
My temporary goal is to use this idea to make a version that
supports the regular syntax of React function components, it will still be placed invscode-jsx-sfc. Because I hopejsx-sfcis more than just a special new API, and it can grow into a more generic solution focusing on improving the development experience of React function components. In the future, I will integrate more practical React development experience to design and optimize it.If the community can create a general solution, such as
vscode-split-editors, this is what I would like to see, which shows that this idea has wider existence value. I think we still need to design carefully. For example, we can't have too many split editors, if there are more than 4, each editor area is very small, which will also cause inconvenience. Thanks.