Skip to content

Commit 027386e

Browse files
authoredSep 30, 2020
fix: update the .vue file shim for Vue 3 (#5903)
1 parent bedf5ba commit 027386e

File tree

11 files changed

+121
-32
lines changed

11 files changed

+121
-32
lines changed
 

‎packages/@vue/cli-plugin-babel/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@vue/cli-service": "^3.0.0 || ^4.0.0-0"
3333
},
3434
"devDependencies": {
35-
"jscodeshift": "^0.9.0"
35+
"jscodeshift": "^0.10.0"
3636
},
3737
"publishConfig": {
3838
"access": "public"
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import { defineComponent } from 'vue';
3+
const component: ReturnType<typeof defineComponent>;
4+
export default component;
5+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import { DefineComponent } from 'vue';
3+
const component: DefineComponent;
4+
export default component;
5+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
jest.autoMockOff()
2+
3+
const { defineTest } = require('jscodeshift/dist/testUtils')
4+
5+
defineTest(__dirname, 'migrateComponentType', null, 'shims-vue', { parser: 'ts' })
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
// `shims-vue.d.ts` for Vue 3, generated by CLI 4.5.0-4.5.6, uses the following declaration:
2+
// `component: ReturnType<typeof defineComponent>`
3+
4+
// So needs to update to:
5+
// `component: DefineComponent`
6+
7+
module.exports = function migrateComponentType (file, api) {
8+
const j = api.jscodeshift
9+
const root = j(file.source)
10+
11+
const useDoubleQuote = root.find(j.StringLiteral).some(({ node }) => node.extra.raw.startsWith('"'))
12+
13+
const tsmodule = root.find(j.TSModuleDeclaration, {
14+
id: {
15+
value: '*.vue'
16+
}
17+
})
18+
19+
const componentDecl = tsmodule.find(j.VariableDeclarator, {
20+
id: {
21+
name: 'component',
22+
typeAnnotation: {
23+
typeAnnotation: {
24+
typeName: {
25+
name: 'ReturnType'
26+
},
27+
typeParameters: {
28+
params: {
29+
0: {
30+
exprName: {
31+
name: 'defineComponent'
32+
}
33+
}
34+
}
35+
}
36+
}
37+
}
38+
}
39+
})
40+
41+
if (componentDecl.length !== 1) {
42+
return file.source
43+
}
44+
45+
// update the component type
46+
componentDecl.forEach(({ node }) => {
47+
node.id.typeAnnotation = j.tsTypeAnnotation(
48+
j.tsTypeReference(j.identifier('DefineComponent'))
49+
)
50+
})
51+
52+
// insert DefineComponent type import
53+
const importDeclFromVue = tsmodule.find(j.ImportDeclaration, {
54+
source: {
55+
value: 'vue'
56+
}
57+
})
58+
importDeclFromVue
59+
.get(0)
60+
.node.specifiers.push(j.importSpecifier(j.identifier('DefineComponent')))
61+
62+
// remove defineComponent import if unused
63+
const defineComponentUsages = tsmodule
64+
.find(j.Identifier, { name: 'defineComponent' })
65+
.filter((identifierPath) => {
66+
const parent = identifierPath.parent.node
67+
68+
// Ignore the import specifier
69+
if (
70+
j.ImportDefaultSpecifier.check(parent) ||
71+
j.ImportSpecifier.check(parent) ||
72+
j.ImportNamespaceSpecifier.check(parent)
73+
) {
74+
return false
75+
}
76+
})
77+
if (defineComponentUsages.length === 0) {
78+
tsmodule
79+
.find(j.ImportSpecifier, {
80+
local: {
81+
name: 'defineComponent'
82+
}
83+
})
84+
.remove()
85+
}
86+
87+
return root.toSource({
88+
lineTerminator: '\n',
89+
quote: useDoubleQuote ? 'double' : 'single'
90+
})
91+
}
92+
93+
module.exports.parser = 'ts'
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
declare module '*.vue' {
2-
import { defineComponent } from 'vue'
3-
const component: ReturnType<typeof defineComponent>
2+
import type { DefineComponent } from 'vue'
3+
const component: DefineComponent
44
export default component
55
}
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = api => {
1+
module.exports = (api, options, rootOptions) => {
22
api.extendPackage(
33
{
44
devDependencies: {
@@ -7,4 +7,9 @@ module.exports = api => {
77
},
88
{ warnIncompatibleVersions: false }
99
)
10+
11+
// update vue 3 typescript shim
12+
if (rootOptions.vueVersion === 3) {
13+
api.transformScript('src/shims-vue.d.ts', require('../codemods/migrateComponentType'))
14+
}
1015
}

‎packages/@vue/cli-plugin-typescript/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@types/chai": "^4.2.11",
5252
"@types/jest": "^24.0.19",
5353
"@types/mocha": "^5.2.6",
54+
"jscodeshift": "^0.10.0",
5455
"typescript": "~3.9.3",
5556
"vue-class-component": "^7.2.3",
5657
"vue-property-decorator": "^8.4.2"

‎packages/@vue/cli-service/__tests__/generator.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ test('Vue 3', async () => {
4242
vueVersion: '3'
4343
})
4444

45-
expect(pkg.dependencies.vue).toBe('^3.0.0-0')
45+
expect(pkg.dependencies.vue).toBe('^3.0.0')
4646
expect(pkg).toHaveProperty(['devDependencies', '@vue/compiler-sfc'])
4747

4848
expect(files['src/main.js']).toMatch(`import { createApp } from 'vue'`)

‎packages/@vue/cli-service/generator/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ module.exports = (api, options) => {
66
if (options.vueVersion === '3') {
77
api.extendPackage({
88
dependencies: {
9-
'vue': '^3.0.0-0'
9+
'vue': '^3.0.0'
1010
},
1111
devDependencies: {
12-
'@vue/compiler-sfc': '^3.0.0-0'
12+
'@vue/compiler-sfc': '^3.0.0'
1313
}
1414
})
1515
} else {

‎yarn.lock

-25
Original file line numberDiff line numberDiff line change
@@ -12518,31 +12518,6 @@ jscodeshift@^0.10.0:
1251812518
temp "^0.8.1"
1251912519
write-file-atomic "^2.3.0"
1252012520

12521-
jscodeshift@^0.9.0:
12522-
version "0.9.0"
12523-
resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.9.0.tgz#672025658e868a63e24d6a6f4c44af9edb6e55f3"
12524-
integrity sha512-SUeXq8dJzj5LR8uy71axgG3bmiHoC0IdHy7n89SqKzkzBWpAds5F9IIGE+lqUSZX9J0ZfEzN8fXWIqQV0dIp2w==
12525-
dependencies:
12526-
"@babel/core" "^7.1.6"
12527-
"@babel/parser" "^7.1.6"
12528-
"@babel/plugin-proposal-class-properties" "^7.1.0"
12529-
"@babel/plugin-proposal-nullish-coalescing-operator" "^7.1.0"
12530-
"@babel/plugin-proposal-optional-chaining" "^7.1.0"
12531-
"@babel/plugin-transform-modules-commonjs" "^7.1.0"
12532-
"@babel/preset-flow" "^7.0.0"
12533-
"@babel/preset-typescript" "^7.1.0"
12534-
"@babel/register" "^7.0.0"
12535-
babel-core "^7.0.0-bridge.0"
12536-
colors "^1.1.2"
12537-
flow-parser "0.*"
12538-
graceful-fs "^4.1.11"
12539-
micromatch "^3.1.10"
12540-
neo-async "^2.5.0"
12541-
node-dir "^0.1.17"
12542-
recast "^0.18.1"
12543-
temp "^0.8.1"
12544-
write-file-atomic "^2.3.0"
12545-
1254612521
jsdom-global@^3.0.2:
1254712522
version "3.0.2"
1254812523
resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"

0 commit comments

Comments
 (0)
Please sign in to comment.