Add support for TypeScript in script block

[dwightjack]

Hi,

I've tested the plugin on a project using TypeScript in the script block (<script lang="ts">) and esbuild was complaining about TS specific syntax.

This PR adds support for TS by reading the attrs.lang attribute from the parsed SFC descriptors and sets the correct esbuild loader (js or ts).

I had to use the parse function from @vue/component-compiler-utils because at the moment the language information is not exposed by @vue/component-compiler (see vuejs/vue-component-compiler#113). The downside is that each module is parsed twice 😞 .

Another change that I made was using a module to strip all comments from the script source because the build wasn:' working with code like this:

<script lang="ts">
import Vue from 'vue';
/**
 * ```html
 * <script>
 * export default Vue.extend({})
 * <\/script> 
 * ```
 */
export default Vue.extend({
  props: {
  }
  ...

</script>

Basically, the compiler was detecting two default exports. 🤔

[dwightjack]

@apeschar by the way: thanks for cleaning up and fixing my code 🙇

[apeschar]

I don't like the fact that the component is parsed twice. Would it be an idea to first submit a PR to the https://github.com/vuejs/vue-component-compiler so that this info is exposed, and then use it here?

[dwightjack]

I don't like the fact that the component is parsed twice. Would it be an idea to first submit a PR to the https://github.com/vuejs/vue-component-compiler so that this info is exposed, and then use it here?

Ok, I will take a look into it. 👍

[dwightjack]

@apeschar sorry for the delay. Just an update to inform you that I have submitted the PR to the vue-component-compiler: vuejs/vue-component-compiler#122 😃

[apeschar]

Thanks for your efforts. It doesn't seem like there's much activity on the vuejs/vue-component-compiler#122 PR, unfortunately.

I've taken a different approach by defining our own versions of compileToDescriptor and compileToDescriporAsync to add the lang property to the scripts. This should achieve the same result without having to parse twice.

I've also integrated your suggestion to strip comments from scripts.

I will now close your PR. You should be able to upgrade to esbuild-vue 1.1.0 and use TypeScript.

[dwightjack]

@apeschar sadly, you're right. I'm going to keep that PR open just in case.

I've taken a different approach by defining our own versions of compileToDescriptor and compileToDescriporAsync to add the lang property to the scripts. This should achieve the same result without having to parse twice.

That's great news! Thanks! 💯