vue-typescript organize imports issues

[Shayan-To]

As project prettier-plugin-organize-imports implemented organize imports based on vue-typescript (in prettier-plugin-organize-imports#55 and prettier-plugin-organize-imports#56), I found these two issues:

• In vue files with both script and script setup, the imports of both blocks are merged into one of them.

  Example input:

  <template>
    <BComp v-model="value"></BComp>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({ inheritAttrs: false });
  </script>
  
  <script setup lang="ts">
  import BComp from "./BComp.vue";
  import { ref } from "vue";
  
  const value = ref("");
  </script>

  Current output:

  <template>
    <BComp v-model="value"></BComp>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from "vue";
  import BComp from "./BComp.vue";
  export default defineComponent({ inheritAttrs: false });
  </script>
  
  <script setup lang="ts">
  const value = ref("");
  </script>

  Diff:

  @@ -3,13 +3,11 @@
   </template>
  
   <script lang="ts">
  -import { defineComponent } from "vue";
  +import { defineComponent, ref } from "vue";
  +import BComp from "./BComp.vue";
   export default defineComponent({ inheritAttrs: false });
   </script>
  
   <script setup lang="ts">
  -import BComp from "./BComp.vue";
  -import { ref } from "vue";
  -
   const value = ref("");
   </script>

  Expected output: No change, the same as input.

• Imports that are only used in the template, are removed (except for components).

  Example input:

  <template>
    <AComp v-model="value" v-some-directive></AComp>
  </template>
  
  <script setup lang="ts">
  import AComp from "./AComp.vue";
  import { value, vSomeDirective } from "./utils";
  </script>

  Current output:

  <template>
    <AComp v-model="value" v-some-directive></AComp>
  </template>
  
  <script setup lang="ts">
  import AComp from "./AComp.vue";
  </script>

  Diff:

  @@ -4,5 +4,4 @@
  
   <script setup lang="ts">
   import AComp from "./AComp.vue";
  -import { value, vSomeDirective } from "./utils";
   </script>

  Expected output: No change, the same as input.

These examples are available in this repro.

[johnsoncodehk]

Hi @Shayan-To, I think this problem can be avoid by update typescript version to 4.7.3, can you confirm this?

[Shayan-To]

Hi @johnsoncodehk!

I added typescript to the repro project I sent here, and tried version 4.7.4 and 4.7.3, and the behavior is no different from before.

I pushed a commit to the same repro gist so you can see whether I did something wrong.