Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(plugin-vue): enable ts in template when using tsx in dev mode #10180

Merged
merged 2 commits into from
Oct 13, 2022

Conversation

LiZhequ
Copy link
Contributor

@LiZhequ LiZhequ commented Sep 21, 2022

Description

TS is not supported in template when lang is tsx in dev mode. It is supported in prod mode.

transformWithEsbuild should be called when lang is tsx

Additional context


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@ydcjeff
Copy link
Contributor

ydcjeff commented Sep 23, 2022

Isn't it already supported by plugin-vue-jsx? plugin-vue only supports .vue files.

@LiZhequ
Copy link
Contributor Author

LiZhequ commented Sep 23, 2022

Isn't it already supported by plugin-vue-jsx? plugin-vue only supports .vue files.

It's not about plugin-vue-jsx
For example

<template>
  {{ a as any }}
</template>
<script lang="tsx" setup>
const a = 1
</script>

In dev mode, browser will throw a error, because it was compiled to

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _toDisplayString($setup.a as any)
}

TS grammar is not converted.
If lang=ts, it was compiled to

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _toDisplayString($setup.a);
}

TS grammar is converted.

The key code is

// handle TS transpilation
let resolvedCode = output.join('\n')
if (
(descriptor.script?.lang === 'ts' ||
descriptor.scriptSetup?.lang === 'ts') &&
!descriptor.script?.src // only normal script can have src
) {
const { code, map } = await transformWithEsbuild(
resolvedCode,
filename,
{
loader: 'ts',
target: 'esnext',
sourcemap: options.sourceMap
},
resolvedMap
)
resolvedCode = code
resolvedMap = resolvedMap ? (map as any) : resolvedMap
}

It lacks tsx's judgment

@LiZhequ LiZhequ marked this pull request as draft October 10, 2022 03:13
@LiZhequ LiZhequ marked this pull request as ready for review October 10, 2022 03:14
@LiZhequ
Copy link
Contributor Author

LiZhequ commented Oct 13, 2022

Can you please review this PR,there is still no reviewer @antfu

@patak-dev
Copy link
Member

@LiZhequ this isn't valid for Vue. You need to use ts as the lang

@patak-dev patak-dev closed this Oct 13, 2022
@LiZhequ
Copy link
Contributor Author

LiZhequ commented Oct 13, 2022

@patak-dev
Vue SFC Playground only support lang="ts",but when you use vite, you can use @vite/plugin-vue-jsx to support tsx.
And the @vite/plugin-vue has some code to support it, such as

// if using TS, support TS syntax in template expressions
const expressionPlugins: CompilerOptions['expressionPlugins'] =
options.template?.compilerOptions?.expressionPlugins || []
const lang = descriptor.scriptSetup?.lang || descriptor.script?.lang
if (lang && /tsx?$/.test(lang) && !expressionPlugins.includes('typescript')) {
expressionPlugins.push('typescript')
}

@vite/plugin-vue-jsx tranform jsx syntactic,but the template is still handled by @vite/plugin-vue. And as I said above, it lacks tsx's judgment in
// handle TS transpilation
let resolvedCode = output.join('\n')
if (
(descriptor.script?.lang === 'ts' ||
descriptor.scriptSetup?.lang === 'ts') &&
!descriptor.script?.src // only normal script can have src
) {
const { code, map } = await transformWithEsbuild(
resolvedCode,
filename,
{
loader: 'ts',
target: 'esnext',
sourcemap: options.sourceMap
},
resolvedMap
)
resolvedCode = code
resolvedMap = resolvedMap ? (map as any) : resolvedMap
}

@patak-dev patak-dev reopened this Oct 13, 2022
@patak-dev patak-dev merged commit a9f9d31 into vitejs:main Oct 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants