Skip to content
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

Extract HTML to new Vue Component #243

Closed
weaversam8 opened this issue Feb 5, 2021 · 2 comments
Closed

Extract HTML to new Vue Component #243

weaversam8 opened this issue Feb 5, 2021 · 2 comments
Labels
✨ Feature New refactoring or feature

Comments

@weaversam8
Copy link

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:

<template>
  <div>
    <h1>List of items</h1>
    <ul>
      <li>Complex</li>
      <li>list</li>
      <li>of</li>
      <li>many</li>
      <li>items</li>
    </ul>
</template>

<script>
export default {};
</script>

You could extract the <ul> into its own component, like so:

<template>
  <div>
    <h1>List of items</h1>
    <ComplexList />
</template>

<script>
import ComplexList from "src/components/ComplexList.vue";

export default {
  components: {
    ComplexList
  }
};
</script>

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:

<template>
  <div>
    <h1>List of items</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ["Complex", "list", "of", "many", "items"]
    };
  }
};
</script>

Could be extracted to this:

<template>
  <div>
    <h1>List of items</h1>
    <ComplexList :items="items" />
</template>

<script>
export default {
  components: {
    ComplexList
  },
  data() {
    return {
      items: ["Complex", "list", "of", "many", "items"]
    };
  }
};
</script>

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

@weaversam8 weaversam8 added the ✨ Feature New refactoring or feature label Feb 5, 2021
@nicoespeon
Copy link
Owner

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.

@nicoespeon
Copy link
Owner

Hey @weaversam8 👋

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 😁

Thanks for suggesting though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature New refactoring or feature
Projects
None yet
Development

No branches or pull requests

2 participants