You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is this request related to a problem? Please describe.
Vue Single File Components (SFCs) can often get very large. It's generally a good idea to extract complex or reusable portions of the code into separate components that you can then import and include to make the code more readable.
Describe the solution you'd like
If I highlight a portion of code within the <template> tag of a SFC, I should be able to automatically pull that code into a new component, which would then be imported and included. For example:
The most basic version of this feature would simply extract the code to a new file and generate the import. A more complex version could automatically determine data that needed to be included and pass it as a prop. For example, this:
I'm not sure if this feature exists in any other Vue formatting plugin, but I think if you implemented it you'd save Vue developers thousands of hours (and this extension would be a must-have for Vue developers, like Vetur is.)
The text was updated successfully, but these errors were encountered:
Thank you so much for the detailed issue @weaversam8, it's very clear what would need to be done!
That seems a fair suggestion to me. We have a couple of refactorings that are specific to React for example. I wouldn't mind having a more involved "Extract" refactoring for Vue.
The main blocker for me would be that I'm not that familiar with Vue, so it would take me some time to get the different scenarios and determine what's valid or not. Another blocker is the <template> part, which is (for the moment) out of the refactoring scope of the extension. I think we could parse such code, but it's not the case today: that needs to be done first.
Hence I can't commit to doing that for now. But I'll keep the suggestion open, I may get to it after the issues I'm working on at the moment. Also, if someone is motivated to tackling it, I can probably get you started.
So, after all this time and more thoughts about it, I won't implement this one. I'm not familiar with Vue and it would be difficult for me to get it right.
I'd rather hope for Vetur to implement such refactorings, as it understands Vue.js. I don't plan to support it in Abracadabra in the foreseeable future 😁
Is this request related to a problem? Please describe.
Vue Single File Components (SFCs) can often get very large. It's generally a good idea to extract complex or reusable portions of the code into separate components that you can then import and include to make the code more readable.
Describe the solution you'd like
If I highlight a portion of code within the
<template>
tag of a SFC, I should be able to automatically pull that code into a new component, which would then be imported and included. For example:You could extract the
<ul>
into its own component, like so:Additional context
The most basic version of this feature would simply extract the code to a new file and generate the import. A more complex version could automatically determine data that needed to be included and pass it as a prop. For example, this:
Could be extracted to this:
I'm not sure if this feature exists in any other Vue formatting plugin, but I think if you implemented it you'd save Vue developers thousands of hours (and this extension would be a must-have for Vue developers, like Vetur is.)
The text was updated successfully, but these errors were encountered: