Upgrade @volar/vue-typescript to v1.0.3

[Shinigami92]

@volar/vue-typescript is now on v1.0.3

Please upgrade and test especially Component imports used in Vue setup lang=ts + template lang=pug

https://www.npmjs.com/package/@volar/vue-typescript

/cc @johnsoncodehk

[simonhaenisch]

We currently have these tests, do you think they are sufficient? (there isn't any test for pug templates yet)

prettier-plugin-organize-imports/test.js

Lines 105 to 168 in 8823ca2

	test('works with TypeScript code inside Vue files', (t) => {
	const code = `
	<script lang="ts">
	import {defineComponent,compile} from 'vue';
	console.log(compile);
	export default defineComponent({});
	</script>
	`;
	const formattedCode = prettify(code, { filepath: 'file.vue' });
	t.is(formattedCode.split('\n')[1], `import { compile, defineComponent } from "vue";`);
	});
	test('works with Vue setup scripts', (t) => {
	const code = `
	<script setup lang="ts">
	import {defineComponent,compile} from 'vue';
	export default defineComponent({});
	</script>
	`;
	const formattedCode = prettify(code, { filepath: 'file.vue' });
	t.is(formattedCode.split('\n')[1], `import { defineComponent } from "vue";`);
	});
	test('preserves new lines and comments in Vue files', (t) => {
	const code = `<script lang="ts">
	import { defineComponent, ref } from "vue";
	export default defineComponent({
	setup() {
	// please don't break me
	const test = ref("");
	return { test };
	},
	});
	</script>
	<style></style>
	`;
	const formattedCode = prettify(code, { filepath: 'file.vue' });
	t.is(formattedCode, code);
	});
	test('does not remove imports when Vue components use kebab case', (t) => {
	const code = `<template>
	<div>
	<n-divider />
	</div>
	</template>
	<script setup lang="ts">
	import { NDivider } from "naive-ui";
	</script>
	`;
	const formattedCode = prettify(code, { filepath: 'file.vue' });
	t.is(formattedCode, code);
	});

[Shinigami92]

Here is an example of one of my Components:

Example

<script setup lang="ts">
import DButtonFlatIcon from '@/components/buttons/DButtonFlatIcon.vue';
import DButtonCancel from '@/components/buttons/specific/DButtonCancel.vue';
import DDeleteButton from '@/components/buttons/specific/DButtonDelete.vue';
import { useDialogPluginComponent } from 'quasar';

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const props = withDefaults(
  defineProps<{
    title: string;
    text: string;
    context?: any;
  }>(),
  {
    context: null,
  },
);

defineEmits(useDialogPluginComponent.emits);

function onConfirm(): void {
  onDialogOK(props.context);
}

function onCancel(): void {
  onDialogCancel();
}
</script>

<template lang="pug">
QDialog(ref="dialogRef", @hide="onDialogHide")
  QCard
    QToolbar.bg-negative.text-white
      QIcon(name="mdi-cctv", size="md")
      QToolbarTitle {{ title }}
      DButtonFlatIcon(dense, icon="mdi-close", @click="onCancel")
    QCardSection
      .text-body2 {{ text }}
    QCardActions.justify-between
      DButtonCancel(@click="onCancel")
      DDeleteButton(@click="onConfirm")
</template>

When formatting with the newest version currently the first three lines importing my own components (starting with a capital D) will get removed.
But they are used in the pug code!

[simonhaenisch]

The current peer dependencies config allows you to just upgrade to @volar/vue-typescript@1.0.3 yourself btw, can you just do that and try?

[johnsoncodehk]

@Shinigami92 did you have use @volar/vue-language-plugin-pug? Which required for pug template instead of @volar/pug-language-service after @volar/vue-typescript v1.0.

[Shinigami92]

[Shinigami92]

😱 I totally missed that I need to try the migration
This gave me the hint to actually read changelog of Volar: vuejs/language-tools#1977 (comment)

@johnsoncodehk You definitely need to write this to something that is discoverable like a readme or docu page

But sadly I'm currently not at work and so cannot try it out, will message back in around 2 days when I tried it

[Shinigami92]

Okay, now checked with the changes made described by https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md#100-alpha0-2022916

Still not working 😕

So yes, that's definitely a bug or some docu is still missing

[simonhaenisch]

@Shinigami92 I'm not sure what to do here... I've added a test case for pug templates and they weren't working before, then I added the extra dependencies @volar/pug-language-service and @volar/vue-language-plugin-pug and created a tsconfig.json like explained in the changelog, but I'm not even sure if the way my tests work it actually picked up the tsconfig 🤷🏻‍♂️ Anyway, doesn't work either.

Since I can't make out the specific issue with prettier-plugin-organize-imports, I'll close this now. If there's still something you think should be solved here and not on Volar's side, you can open another more specific issue, please (:

[Shinigami92]

Okay, I will forward this to @johnsoncodehk / Volar
This bug is breaking all my code base and stopping me from upgrading at all

[Shinigami92]

Oh my god, you basically already said whats the bug 😆
Look at these lines:

prettier-plugin-organize-imports/lib/service-host.js

Lines 16 to 26 in da2792a

	const compilerOptions = getCompilerOptions(tsconfig);
	return {
	directoryExists: ts.sys.directoryExists,
	fileExists: ts.sys.fileExists,
	getCurrentDirectory: ts.sys.getCurrentDirectory,
	getDefaultLibFileName: ts.getDefaultLibFileName,
	getDirectories: ts.sys.getDirectories,
	readDirectory: ts.sys.readDirectory,
	readFile: ts.sys.readFile,
	getCompilationSettings: () => compilerOptions,

You are fetching the compilerOptions and pass the forward
But Volar's new vueCompilerOptions are on the same level as compilerOptions and therefore doesn't get grabbed and passed forward!
That must be the bug!, Can you please try that out and fix it by forwarding these options as well if they exists?

[simonhaenisch]

Ah yup I see what you mean... will try to fix it now.

[simonhaenisch]

Hm I just tried but somehow it doesn't fix it :/ I hard-coded the Vue compiler options to include the pug plugin (see PR), however the test is still failing (removing the import as unused).

[Shinigami92]

Okay lets wait on @johnsoncodehk, hopefully he has an idea

[johnsoncodehk]

I note that v1 required prettier-plugin-organize-imports hardcode @volar/vue-language-plugin-pug to getVueCompilationSettings, because prettier-plugin-organize-imports do not reading project tsconfig setting.

Is it possible to support respect project tsconfig setting?

[simonhaenisch]

Yeah I'll do that in the PR just wanted to get it working first. prettier-plugin-organize-imports does read the tsconfig already but only retrieves the compiler options (nothing else was needed before).

prettier-plugin-organize-imports/lib/service-host.js

Lines 14 to 16 in a521e09

	const tsconfig = ts.findConfigFile(path, ts.sys.fileExists);
	const compilerOptions = getCompilerOptions(tsconfig);

[Shinigami92]

If I can help further please let me know

@johnsoncodehk until then, I now even downgraded Volar VSCode extension as it's unusable for me with

• prettier-plugin-organize-imports >= v3.1.1 (stuck on v3.1.0)
• volar (VSCode ext, vue-tsc and pug plugin) >= v0.40.2 (stuck on v0.40.1)

[johnsoncodehk]

@Shinigami92 I have nothing can do 😅, @simonhaenisch please let me know if you get blocked from Volar side somehow.

[Shinigami92]

@simonhaenisch
I have now setup a whole reproducible: https://github.com/Shinigami92/prettier-plugin-organize-imports-issue-78
Please let me know if I can do anything more to get this finally fixed after a month

It's frustrating that I need to pin volar and organize-imports for around a month now and don't getting all volar's new and enhanced stuff

[simonhaenisch]

Sorry, I just haven't had the time yet :/ I understand it's frustrating but I also need to do this in my spare time (I make like $2/month from Github Sponsors 😅). Will try to get it done in the next couple days.

[Shinigami92]

🙀 I did not sponsor you already monthly? 🙀
That was a mistake on my side... I definitely thought I already have you in my sponsors

[Shinigami92]

Fixed 👌
=> https://twitter.com/Shini_92/status/1589599787468214274

[simonhaenisch]

Thanks a lot ❤️ Also good news, I've actually finished the PR. I just need to review it again tmrw because it's too late now, so I don't trust myself right now 😅

[simonhaenisch]

@Shinigami92 can you try with 3.2.0 now?

[Shinigami92]

WORKS

Shinigami92/prettier-plugin-organize-imports-issue-78@a2b5d44