Skip to content

Commit 2a9aea8

Browse files
committed
fix: update the .vue file shim for Vue 3
fixes vuejs#5889
1 parent 5b70fc2 commit 2a9aea8

File tree

10 files changed

+115
-31
lines changed

10 files changed

+115
-31
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,88 @@
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 tsmodule = root.find(j.TSModuleDeclaration, {
12+
id: {
13+
value: '*.vue'
14+
}
15+
})
16+
17+
const componentDecl = tsmodule.find(j.VariableDeclarator, {
18+
id: {
19+
name: 'component',
20+
typeAnnotation: {
21+
typeAnnotation: {
22+
typeName: {
23+
name: 'ReturnType'
24+
},
25+
typeParameters: {
26+
params: {
27+
0: {
28+
exprName: {
29+
name: 'defineComponent'
30+
}
31+
}
32+
}
33+
}
34+
}
35+
}
36+
}
37+
})
38+
39+
if (componentDecl.length !== 1) {
40+
return file.source
41+
}
42+
43+
// update the component type
44+
componentDecl.forEach(({ node }) => {
45+
node.id.typeAnnotation = j.tsTypeAnnotation(
46+
j.tsTypeReference(j.identifier('DefineComponent'))
47+
)
48+
})
49+
50+
// insert DefineComponent type import
51+
const importDeclFromVue = tsmodule.find(j.ImportDeclaration, {
52+
source: {
53+
value: 'vue'
54+
}
55+
})
56+
importDeclFromVue
57+
.get(0)
58+
.node.specifiers.push(j.importSpecifier(j.identifier('DefineComponent')))
59+
60+
// remove defineComponent import if unused
61+
const defineComponentUsages = tsmodule
62+
.find(j.Identifier, { name: 'defineComponent' })
63+
.filter((identifierPath) => {
64+
const parent = identifierPath.parent.node
65+
66+
// Ignore the import specifier
67+
if (
68+
j.ImportDefaultSpecifier.check(parent) ||
69+
j.ImportSpecifier.check(parent) ||
70+
j.ImportNamespaceSpecifier.check(parent)
71+
) {
72+
return false
73+
}
74+
})
75+
if (defineComponentUsages.length === 0) {
76+
tsmodule
77+
.find(j.ImportSpecifier, {
78+
local: {
79+
name: 'defineComponent'
80+
}
81+
})
82+
.remove()
83+
}
84+
85+
return root.toSource()
86+
}
87+
88+
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/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)