DEV Community

Discussion on: I made a vscode plugin that can write each part of React component in multiple split editors on the same screen

View post

Replies for: Really cool but to accomplish this solution you need to use jsx-sfc, it wouldn't be more easy to just use some kind of comment tagging, E.g. // ...

Collapse
 
joesky profile image
Joe_Sky • • Edited

Thank you~ I also think the comment tagging form is feasible. In fact, I have done some experimental thinking on how to adapt the idea of split editor to the normal React function component syntax. According to the way you mentioned:

// Split->Component
const YourComponent = () => {
  ...
  ...
  ...
}

// Split->Styles
const Wrapper = styled.div`
  ...
  ...
  ...
`
Enter fullscreen mode Exit fullscreen mode

Effect after folding:

// Split->Component
const YourComponent = () => {...
}

// Split->Styles
const Wrapper = styled.div`...
`
Enter fullscreen mode Exit fullscreen mode

If there is only one style component, this way will be very good. Let's try again, if there are multiple style components:

// Split->Component
const YourComponent = () => {...
}

// Split->Styles
const Wrapper = styled.div`...
`

// Split->Styles
const Section1 = styled.section`...
`

// Split->Styles
const Section2 = styled.section`...
`
Enter fullscreen mode Exit fullscreen mode

It looks like each style component is folded, but it takes up a little more vertical scrolling space. Therefore, it may be changed as follows:

// Split->Component
const YourComponent = () => {...
}

//#region Split->Styles
const Wrapper = styled.div`
  ...
`

const Section1 = styled.section`
  ...
`

const Section2 = styled.section`
  ...
`
//#endregion
Enter fullscreen mode Exit fullscreen mode

In this way, the scrolling space will become smaller after folding:

// Split->Component
const YourComponent = () => {...
}

//#region Split->Styles...
Enter fullscreen mode Exit fullscreen mode

I think if we can make a tool to automatically generate these comments with certain rules, it may be more natural. And it maybe needs careful design and thinking, with too many comments, some people also may find it redundant or ugly. A trade-off needs to be made between the visual beauty of the code and specific features.

Collapse
 
davispindola profile image
Spindola •

What about to read from the comment to the last line which includes an comment Split->${type} or it's blank, I was that it can be work as an visual "CLI" pra IDE, like using comments to tell the IDE how it should split their content

Thread Thread
 
davispindola profile image
Spindola •

If you agree, can we create a repository to develop this plugin to us from React ecosystem, also according the discussion above we can not only improve the experience of development for React dev but also for any JS dev at first moment.

Thread Thread
 
joesky profile image
Joe_Sky •

Well, this is really possible. The difficulty point in how to directly implement folding all the code which below the single line comment, native syntax does not support such folding. However "#region" is a native comment syntax that supports folding multiple lines.

jsx-sfc was not born for Split Editors at first, just like Vue's SFC, I just found it very suitable for the Split Editors, I think it can be used as an optional solution. Next, I will continue to try more purer solutions. But according to your idea, I prefer to implement it without comments if possible, I think the fewer additions may make this idea more acceptable to more people. Thanks.

Thread Thread
 
fijiwebdesign profile image
Gabirieli Lalasava •

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.

Thread Thread
 
joesky profile image
Joe_Sky •

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 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.