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.

Sign up for GitHub

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: fix tsx compilation #4894

Merged
merged 1 commit into from
Nov 27, 2019
Merged

fix: fix tsx compilation #4894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix: fix tsx compilation 
closes #4892
closes #4893
  • Loading branch information
@haoqunjiang
haoqunjiang committed Nov 27, 2019
commit 5db40668b4b13bc7820eb55062421580e747bb8b
23 changes: 23 additions & 0 deletions packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
jest.setTimeout(30000)

const Service = require('@vue/cli-service/lib/Service')
const create = require('@vue/cli-test-utils/createTestProject')
const { assertServe, assertBuild } = require('./tsPlugin.helper')

test('using correct loader', () => {
Expand Down Expand Up @@ -30,3 +31,25 @@ const creatorOptions = {

assertServe('ts-babel-serve', creatorOptions)
assertBuild('ts-babel-build', creatorOptions)

test('tsx-build', async () => {
const project = await create('tsx', creatorOptions)
await project.write('src/components/HelloWorld.vue', `
<script lang="tsx">
import Vue, { CreateElement } from 'vue'
import Component from 'vue-class-component'

@Component
export default class World extends Vue {
render (h: CreateElement) {
return (
<p>This is rendered via TSX</p>
)
}
}
</script>
`)

const { stdout } = await project.run('vue-cli-service build')
expect(stdout).toMatch('Build complete.')
})
10 changes: 7 additions & 3 deletions packages/@vue/cli-plugin-typescript/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ module.exports = (api, projectOptions) => {
const tsxRule = config.module.rule('tsx').test(/\.tsx$/)

// add a loader to both *.ts & vue<lang="ts">
const addLoader = ({ loader, options }) => {
tsRule.use(loader).loader(loader).options(options)
tsxRule.use(loader).loader(loader).options(options)
const addLoader = ({ name, loader, options }) => {
tsRule.use(name).loader(loader).options(options)
tsxRule.use(name).loader(loader).options(options)
}

addLoader({
name: 'cache-loader',
loader: require.resolve('cache-loader'),
options: api.genCacheConfig('ts-loader', {
'ts-loader': require('ts-loader/package.json').version,
Expand All @@ -38,6 +39,7 @@ module.exports = (api, projectOptions) => {

if (useThreads) {
addLoader({
name: 'thread-loader',
loader: require.resolve('thread-loader'),
options:
typeof projectOptions.parallel === 'number'
Expand All @@ -51,11 +53,13 @@ module.exports = (api, projectOptions) => {
// TODO: I guess the intent is to require the `babel-loader` provided by the Babel vue
// plugin, but that means we now rely on the hoisting. It should instead be queried
// against the plugin itself, or through a peer dependency.
name: 'babel-loader',
// eslint-disable-next-line node/no-extraneous-require
loader: require.resolve('babel-loader')
})
}
addLoader({
name: 'ts-loader',
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
Expand Down