Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 027386e

Browse filesBrowse files
haoqunjianghaoqunjiang
authored
fix: update the .vue file shim for Vue 3 (#5903)
1 parent bedf5ba commit 027386e
Copy full SHA for 027386e

File tree

Expand file treeCollapse file tree

11 files changed

+121
-32
lines changed
Filter options
Expand file treeCollapse file tree

11 files changed

+121
-32
lines changed

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

Copy file name to clipboardExpand all lines: packages/@vue/cli-plugin-babel/package.json
+1-1Lines changed: 1 addition & 1 deletion
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"

‎packages/@vue/cli-plugin-typescript/codemods/__testfixtures__/shims-vue.input.ts

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
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+
}

‎packages/@vue/cli-plugin-typescript/codemods/__testfixtures__/shims-vue.output.ts

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
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+
}

‎packages/@vue/cli-plugin-typescript/codemods/__tests__/migrateComponentType.spec.js

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
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' })

‎packages/@vue/cli-plugin-typescript/codemods/migrateComponentType.js

Copy file name to clipboard
+93Lines changed: 93 additions & 0 deletions
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'

‎packages/@vue/cli-plugin-typescript/generator/template-vue3/src/shims-vue.d.ts

Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions
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
}

‎packages/@vue/cli-plugin-typescript/migrator/index.js

Copy file name to clipboard
+6-1Lines changed: 6 additions & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/@vue/cli-plugin-typescript/package.json
+1Lines changed: 1 addition & 0 deletions
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

Copy file name to clipboardExpand all lines: packages/@vue/cli-service/__tests__/generator.spec.js
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/@vue/cli-service/generator/index.js
+2-2Lines changed: 2 additions & 2 deletions
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

Copy file name to clipboardExpand all lines: yarn.lock
-25Lines changed: 0 additions & 25 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.