feat(plugin-vue): enhancements

[Akimyou]

Changes

• 1. Full support script lang ts in vue file
  • plugin option: tsconfig
• 2. Portion support script lang ts in vue file and tsx, jsx file
  • Testing Demo Repo
  • Project template app-template-vue-typescript
• 3. Fix vue css hmr bug

1. Full support script lang ts in vue file

// example.vue

<template>
  <div class="app">
    <Layout>
      <router-view></router-view>
    </Layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from 'vue'
import Layout from '/@/components/Layout.vue'

export default defineComponent({
  name: 'App',
  components: {
    Layout,
  },
})
</script>

Use esbuild compile script content ts code to js code. ✌️ As vite, we can't support type check in compile time.

https://github.com/pikapkg/snowpack/pull/984/files#diff-460291335ddc08075bf891e8e0c5f93fR64

2. Portion support script lang ts in vue file and tsx, jsx file

Use esbuild jsxFactory compile script tsx, jsx content and tsx, jsx files.

https://github.com/pikapkg/snowpack/pull/984/files#diff-460291335ddc08075bf891e8e0c5f93fR63

If need to use tsx and jsx files, need the config plugins/plugin-vue/plugin-tsx-jsx.js.

https://github.com/pikapkg/snowpack/pull/984/files#diff-460291335ddc08075bf891e8e0c5f93fR63

Limitation

May be have some limitation compare to: https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx, such as un support vue directive v-for, v-if, v-model and so on.

But we use the same way to resolve tsx, jsx code as vite, so vite have the same limitation.

https://github.com/vitejs/vite/blob/master/src/node/esbuildService.ts#L77

Should we need to support option to use babel compile and babel-plugin-jsx ? Need U suggestion.

3. Fix vue css hmr bug

For support style hmr update in vue file. The wrapResponse must be in frontend of resolveResponseImports

https://github.com/pikapkg/snowpack/pull/984/files#diff-7101fc032cd14c955a7f47f91a7f7245R639

Project template app-template-vue-typescript

New PR after this feature released.

Testing

Added: plugins/plugin-vue/test.

How to manage the plugin test cases ? Need U suggestion.

Testing Demo Repo

Please try on: https://github.com/Akimyou/snowpack/tree/feature/plugin-vue-enhance-demo/create-snowpack-app/app-template-vue-typescript

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pikapkg/snowpack/cxwhtksea
✅ Preview: Canceled

[update for 0acf94e canceled]

[FredKSchott]

This makes sense to me, and seems to be a really valuable feature. would love to see this work finished and merged!

[Akimyou]

@FredKSchott , finished. Need U review.

[FredKSchott]

Should we need to support option to use babel compile and babel-plugin-jsx ? Need U suggestion.

Just confirming: are these limitations new, or do they currently exist in the plugin? I'm fine to merge as long as it is not a new regression that could knowingly break existing users. Otherwise, we can wait until a user reports running into this limitation before resolving it.

How to manage the plugin test cases ? Need U suggestion.

@gr2m is working on improving our tests for plugins, I'll let him answer/review this aspect of the PR.

[FredKSchott]

Looks good! Left a couple of comments, and then would love @gr2m to review tests before merging.

[Akimyou]

Just confirming: are these limitations new, or do they currently exist in the plugin? I'm fine to merge as long as it is not a new regression that could knowingly break existing users. Otherwise, we can wait until a user reports running into this limitation before resolving it.

These limitations are not exist in the plugin, because current plugin do not support jsx/tsx feature. So the limitations come with our new feature that will not break existing users. We can wait until a user reports running into this limitation before resolving it. (Agree with it)

About the License

Thank you for tell me the License problem, I understand with it.
So I add Vite License here.

https://github.com/pikapkg/snowpack/pull/984/files#diff-52e9f81ed066f12a83aa4401fbbdddf7R1

About the tests

according to : evanw/esbuild#366
I del the option: tsconfig. Because esbuild.transform api do not support config through tsconfig file. I del related test too.

[FredKSchott]

LGTM! Thanks for the thorough tests as well!

[FredKSchott]

/cc @gr2m to take another look before merging, since he brought up the original testing questions. (Also, I'm +1 for bringing this plugin testing style to the rest of our plugins, since it seems like Jest just automatically runs these without any new config).

[gr2m]

Tests look great! I agree that it would be fantastic to do similar tests for other plugins. I'll give it a try myself, and then start a follow up discussion so others can contribute

[gr2m]

Would you prefer to add app-template-vue-typescript as part of this pull request, or make a follow up pull request for it? I'd prefer the latter if you don't mind

[Akimyou]

Would you prefer to add app-template-vue-typescript as part of this pull request, or make a follow up pull request for it? I'd prefer the latter if you don't mind

I prefer the latter. Because current app-template project always deps on an released plugin. https://github.com/pikapkg/snowpack/blob/master/create-snowpack-app/app-template-vue/package.json#L20