Not support Vue3 setup-script block

[curly210102]

Current behavior

Config fork-ts-checker-webpack-plugin with

{
  typescript: {
          extensions: {
            vue: {
              enabled: true,
              compiler: isVue3
                ? require.resolve('@vue/compiler-sfc')
                : require.resolve('vue-template-compiler')
            }
          },
          diagnosticOptions: {
            semantic: true,
            // https://github.com/TypeStrong/ts-loader#happypackmode
            syntactic: useThreads
          }
      }
   }
}

the ts-checker is not working with vue setup-script block.

<script setup lang="ts">
const b:string = 1;
</script>

Expected behavior

ts-checker works with setup-script block, also works when <script setup> alongside normal <script>
Reference to Vue3 document https://v3.vuejs.org/api/sfc-script-setup.html

Steps to reproduce the issue

vuejs/vue-cli#6716
vuejs/vue-cli#6736

npm install -g @vue/cli
vue create my-vue-app

Mannually select features: add TypeScript

echo '<script setup lang="ts">const x: string = 42;</script>' >> src/App.vue

run Build

npm run build

Issue reproduction repository

https://github.com/curly210102/webpack-typescript-vue/tree/main

yarn
yarn build

Open in StackBlitz

Issue Tracking

@vue/compiler-sfc parse methods return result

export interface SFCDescriptor {
  filename: string
  source: string
  template: SFCTemplateBlock | null
  script: SFCScriptBlock | null
  scriptSetup: SFCScriptBlock | null
  styles: SFCStyleBlock[]
  customBlocks: SFCBlock[]
  cssVars: string[]
  // whether the SFC uses :slotted() modifier.
  // this is used as a compiler optimization hint.
  slotted: boolean
}

The ts-checker only handle 'script' property, ignored 'scriptSetup'.

fork-ts-checker-webpack-plugin/src/typescript-reporter/extension/vue/TypeScriptVueExtension.ts

Lines 112 to 127 in ad466df

	} else if (isVueTemplateCompilerV3(compiler)) {
	const parsed = compiler.parse(vueSourceText);
	if (parsed.descriptor && parsed.descriptor.script) {
	const scriptV3 = parsed.descriptor.script;
	// map newer version of SFCScriptBlock to the generic one
	script = {
	content: scriptV3.content,
	attrs: scriptV3.attrs,
	start: scriptV3.loc.start.offset,
	end: scriptV3.loc.end.offset,
	lang: scriptV3.lang,
	src: scriptV3.src,
	};
	}

Environment

• "fork-ts-checker-webpack-plugin": "^6.3.4",
• "typescript": "^4.4.4",
• "webpack": "^5.58.2",
• "os": macOS 11.6

[piotr-oles]

Thank you for a detailed issue description - it was very helpful!

[piotr-oles]

🎉 This issue has been resolved in version 6.3.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[curly210102]

It's so efficient! But I noticed the checker may will ignore the <script setup> when used alongside normal <script>

<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()

// declare additional options
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// executed in setup() scope (for each instance)
</script>

Reference from https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script

[piotr-oles]

I had to revert it - see #668 - I will take another pass on it later. I will keep this issue closed - if you have any comments, please add them in #668

[curly210102]

Thanks for reply, the situation is more complicated than I thought. #668 It's great getting support from developer of volar, believe this issue will be solved not long after.

[LongJinCen]

@piotr-oles Is there any progress? I find that 6.4.0 still does not support Vue3 setup

[batuotasis]

We are waiting for the feature a lot. It's hard to work without type check. Especially that <script setup> is the recommended syntax if you are using Composition API

[bodograumann]

Please have a look at the other ticket: #668
As a workaround it is recommended to use the volar ide support and vue-tsc --noEmit from the command-line. (Cf. vue-cli 5.rc release notes)

[piotr-oles]

Hi! I was a little bit busy these days, I will take a look next week :) I'm also open for a contributions, feel free to give it a try :)

[piotr-oles]

I created PR #676 - would be nice if someone with vue project could test these changes. I added some examples to e2e tests but I'm not a vue developer, so I may miss something.

To test it, clone the repo, run yarn install, yarn build and yarn link, and then run yarn link fork-ts-checker-webpack-plugin in your repository.

[piotr-oles]

🎉 This issue has been resolved in version 7.0.0-alpha.15 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀