From 508ef2250be6a734c0b9b1870801226fa64924d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 28 Feb 2023 22:40:21 +0800
Subject: [PATCH 01/27] feat(compiler-sfc): Support props name to be defined as
a string
---
.../compileScriptPropsTransform.spec.ts | 12 ++++++++++++
packages/compiler-sfc/src/compileScript.ts | 18 ++++++++++++------
2 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 05c7989b8f1..66194f99eea 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -99,6 +99,18 @@ describe('sfc props transform', () => {
assertCode(content)
})
+ test('default values w/ type declaration & key is string', () => {
+ const { content } = compile(`
+
+ `)
+ expect(content).toMatch(`props: {
+ "foo": { type: Number, required: false, default: 1 },
+ }`)
+ assertCode(content)
+ })
+
test('default values w/ type declaration, prod mode', () => {
const { content } = compile(
`
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index b7e4c0ea778..70835cd296a 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -871,7 +871,8 @@ export function compileScript(
}
function genDestructuredDefaultValue(key: string): string | undefined {
- const destructured = propsDestructuredBindings[key]
+ const rawKey = key.startsWith('"') && key.endsWith('"') ? key.split('"')[1] : key
+ const destructured = propsDestructuredBindings[rawKey]
if (destructured && destructured.default) {
const value = scriptSetup!.content.slice(
destructured.default.start!,
@@ -1889,17 +1890,22 @@ function extractRuntimeProps(
const members = node.type === 'TSTypeLiteral' ? node.members : node.body
for (const m of members) {
if (
- (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
- m.key.type === 'Identifier'
+ (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
+ (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
) {
- let type
+ let type, keyName;
+ if(m.key.type === 'StringLiteral'){
+ keyName = `"${m.key.value}"`
+ } else {
+ keyName = m.key.name
+ }
if (m.type === 'TSMethodSignature') {
type = ['Function']
} else if (m.typeAnnotation) {
type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
}
- props[m.key.name] = {
- key: m.key.name,
+ props[keyName] = {
+ key: keyName,
required: !m.optional,
type: type || [`null`]
}
From 923afa9c07ae881d21058ceb5965f1ae7b539de2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 28 Feb 2023 22:57:02 +0800
Subject: [PATCH 02/27] feat(compiler-sfc): updated unit test
---
.../compileScriptPropsTransform.spec.ts.snap | 17 +++++++++++++++++
.../compileScriptPropsTransform.spec.ts | 4 ++--
2 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 48040409d49..f8f9ce0e263 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -96,6 +96,23 @@ return () => {}
}"
`;
+exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ \\"foo\\": { type: Number, required: true, default: 1 }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
exports[`sfc props transform > default values w/ type declaration 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 66194f99eea..4c30e313f66 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -102,11 +102,11 @@ describe('sfc props transform', () => {
test('default values w/ type declaration & key is string', () => {
const { content } = compile(`
`)
expect(content).toMatch(`props: {
- "foo": { type: Number, required: false, default: 1 },
+ "foo": { type: Number, required: false, default: 1 }
}`)
assertCode(content)
})
From 75ec1a990e46f90837ee35e4673a03fc7ca55375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 28 Feb 2023 22:59:09 +0800
Subject: [PATCH 03/27] feat(compiler-sfc): updated unit test
---
.../compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 4c30e313f66..c294ae665c2 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -106,7 +106,7 @@ describe('sfc props transform', () => {
`)
expect(content).toMatch(`props: {
- "foo": { type: Number, required: false, default: 1 }
+ "\\foo\\": { type: Number, required: false, default: 1 }
}`)
assertCode(content)
})
From 31b3866c30a7ef972ff81b8dff799fd9af00a20d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 28 Feb 2023 23:09:28 +0800
Subject: [PATCH 04/27] feat(compiler-sfc): updated unit test
---
.../__tests__/compileScriptPropsTransform.spec.ts | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index c294ae665c2..ab7d8ec8a9c 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -102,12 +102,13 @@ describe('sfc props transform', () => {
test('default values w/ type declaration & key is string', () => {
const { content } = compile(`
`)
- expect(content).toMatch(`props: {
- "\\foo\\": { type: Number, required: false, default: 1 }
- }`)
+ expect(content).toMatch(`
+ props: {
+ "foo": { type: Number, required: true, default: 1 }
+ },`)
assertCode(content)
})
From fb9d9e123b311b7e018da99ff3e4c78a0a90394c Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 09:35:10 +0800
Subject: [PATCH 05/27] fix(compiler-sfc): updated code
---
.../compileScriptPropsTransform.spec.ts.snap | 209 +-----------------
.../compileScriptPropsTransform.spec.ts | 2 +-
packages/compiler-sfc/src/compileScript.ts | 5 +-
3 files changed, 4 insertions(+), 212 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index f8f9ce0e263..cd8da2392c2 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -1,107 +1,11 @@
// Vitest Snapshot v1
-exports[`sfc props transform > $$() escape 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-export default {
- props: ['foo'],
- setup(__props) {
-const __props_bar = _toRef(__props, 'bar');
-const __props_foo = _toRef(__props, 'foo');
-
-
- console.log((__props_foo))
- console.log((__props_bar))
- ;({ foo: __props_foo, baz: __props_bar })
-
-return () => {}
-}
-
-}"
-`;
-
-exports[`sfc props transform > aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- let x = foo
- let y = __props.foo
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo + __props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- console.log(__props.foo)
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- console.log(__props.foo)
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > default values w/ runtime declaration 1`] = `
-"import { mergeDefaults as _mergeDefaults } from 'vue'
-
-export default {
- props: _mergeDefaults(['foo', 'bar'], {
- foo: 1,
- bar: () => ({})
-}),
- setup(__props) {
-
-
-
-return () => {}
-}
-
-}"
-`;
-
exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
props: {
- \\"foo\\": { type: Number, required: true, default: 1 }
+ foo: { type: Number, required: true, default: 1 }
},
setup(__props: any) {
@@ -112,114 +16,3 @@ return () => {}
})"
`;
-
-exports[`sfc props transform > default values w/ type declaration 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
- props: {
- foo: { type: Number, required: false, default: 1 },
- bar: { type: Object, required: false, default: () => ({}) }
- },
- setup(__props: any) {
-
-
-
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
- props: {
- foo: { default: 1 },
- bar: { default: () => ({}) },
- baz: null,
- boola: { type: Boolean },
- boolb: { type: [Boolean, Number] },
- func: { type: Function, default: () => (() => {}) }
- },
- setup(__props: any) {
-
-
-
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
- const bar = 'fish', hello = 'world'
-
-return (_ctx, _cache) => {
- return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > nested scope 1`] = `
-"export default {
- props: ['foo', 'bar'],
- setup(__props) {
-
-
- function test(foo) {
- console.log(foo)
- console.log(__props.bar)
- }
-
-return () => {}
-}
-
-}"
-`;
-
-exports[`sfc props transform > non-identifier prop names 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: { 'foo.bar': Function },
- setup(__props) {
-
-
- let x = __props[\\"foo.bar\\"]
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props[\\"foo.bar\\"])
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > rest spread 1`] = `
-"import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
-
-export default {
- props: ['foo', 'bar', 'baz'],
- setup(__props) {
-
-const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
-
-
-
-return () => {}
-}
-
-}"
-`;
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index ab7d8ec8a9c..9f8e6cee399 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -107,7 +107,7 @@ describe('sfc props transform', () => {
`)
expect(content).toMatch(`
props: {
- "foo": { type: Number, required: true, default: 1 }
+ foo: { type: Number, required: true, default: 1 }
},`)
assertCode(content)
})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 70835cd296a..3ddf8b26381 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -871,8 +871,7 @@ export function compileScript(
}
function genDestructuredDefaultValue(key: string): string | undefined {
- const rawKey = key.startsWith('"') && key.endsWith('"') ? key.split('"')[1] : key
- const destructured = propsDestructuredBindings[rawKey]
+ const destructured = propsDestructuredBindings[key]
if (destructured && destructured.default) {
const value = scriptSetup!.content.slice(
destructured.default.start!,
@@ -1895,7 +1894,7 @@ function extractRuntimeProps(
) {
let type, keyName;
if(m.key.type === 'StringLiteral'){
- keyName = `"${m.key.value}"`
+ keyName = m.key.value
} else {
keyName = m.key.name
}
From ccb6ce64e0d7dd5793710557a17097eea68bdc58 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 09:37:49 +0800
Subject: [PATCH 06/27] fix(compiler-sfc): updated snap
---
.../compileScriptPropsTransform.spec.ts.snap | 207 ++++++++++++++++++
1 file changed, 207 insertions(+)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index cd8da2392c2..1a3c35b5666 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -1,5 +1,101 @@
// Vitest Snapshot v1
+exports[`sfc props transform > $$() escape 1`] = `
+"import { toRef as _toRef } from 'vue'
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+const __props_bar = _toRef(__props, 'bar');
+const __props_foo = _toRef(__props, 'foo');
+
+
+ console.log((__props_foo))
+ console.log((__props_bar))
+ ;({ foo: __props_foo, baz: __props_bar })
+
+return () => {}
+}
+
+}"
+`;
+
+exports[`sfc props transform > aliasing 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ let x = foo
+ let y = __props.foo
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo + __props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > basic usage 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ console.log(__props.foo)
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > computed static key 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ console.log(__props.foo)
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > default values w/ runtime declaration 1`] = `
+"import { mergeDefaults as _mergeDefaults } from 'vue'
+
+export default {
+ props: _mergeDefaults(['foo', 'bar'], {
+ foo: 1,
+ bar: () => ({})
+}),
+ setup(__props) {
+
+
+
+return () => {}
+}
+
+}"
+`;
+
exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
@@ -16,3 +112,114 @@ return () => {}
})"
`;
+
+exports[`sfc props transform > default values w/ type declaration 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ foo: { type: Number, required: false, default: 1 },
+ bar: { type: Object, required: false, default: () => ({}) }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
+exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ foo: { default: 1 },
+ bar: { default: () => ({}) },
+ baz: null,
+ boola: { type: Boolean },
+ boolb: { type: [Boolean, Number] },
+ func: { type: Function, default: () => (() => {}) }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
+exports[`sfc props transform > multiple variable declarations 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+ const bar = 'fish', hello = 'world'
+
+return (_ctx, _cache) => {
+ return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > nested scope 1`] = `
+"export default {
+ props: ['foo', 'bar'],
+ setup(__props) {
+
+
+ function test(foo) {
+ console.log(foo)
+ console.log(__props.bar)
+ }
+
+return () => {}
+}
+
+}"
+`;
+
+exports[`sfc props transform > non-identifier prop names 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: { 'foo.bar': Function },
+ setup(__props) {
+
+
+ let x = __props[\\"foo.bar\\"]
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props[\\"foo.bar\\"])
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > rest spread 1`] = `
+"import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
+
+export default {
+ props: ['foo', 'bar', 'baz'],
+ setup(__props) {
+
+const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
+
+
+
+return () => {}
+}
+
+}"
+`;
From c2be9b02989a7cdee10da64208dfaaae02258ce6 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 09:44:40 +0800
Subject: [PATCH 07/27] fix(compiler-sfc): updated unit test
---
.../compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 9f8e6cee399..09a24dfd1a2 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -100,11 +100,12 @@ describe('sfc props transform', () => {
})
test('default values w/ type declaration & key is string', () => {
- const { content } = compile(`
+ const { content , bindings} = compile(`
`)
+ expect(bindings).toMatchObject({foo:'props'})
expect(content).toMatch(`
props: {
foo: { type: Number, required: true, default: 1 }
From 9ebb1895024220164cce1f51dfc26481c9a77a09 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 14:19:52 +0800
Subject: [PATCH 08/27] fix(compiler-sfc): updated code
---
.../compileScriptPropsTransform.spec.ts.snap | 212 +-----------------
.../__tests__/compileScript.spec.ts | 3 +-
.../compileScriptPropsTransform.spec.ts | 21 +-
packages/compiler-sfc/src/compileScript.ts | 12 +-
4 files changed, 29 insertions(+), 219 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 1a3c35b5666..dc757e56876 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -1,107 +1,14 @@
// Vitest Snapshot v1
-exports[`sfc props transform > $$() escape 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-export default {
- props: ['foo'],
- setup(__props) {
-const __props_bar = _toRef(__props, 'bar');
-const __props_foo = _toRef(__props, 'foo');
-
-
- console.log((__props_foo))
- console.log((__props_bar))
- ;({ foo: __props_foo, baz: __props_bar })
-
-return () => {}
-}
-
-}"
-`;
-
-exports[`sfc props transform > aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- let x = foo
- let y = __props.foo
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo + __props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- console.log(__props.foo)
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
-
- console.log(__props.foo)
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > default values w/ runtime declaration 1`] = `
-"import { mergeDefaults as _mergeDefaults } from 'vue'
-
-export default {
- props: _mergeDefaults(['foo', 'bar'], {
- foo: 1,
- bar: () => ({})
-}),
- setup(__props) {
-
-
-
-return () => {}
-}
-
-}"
-`;
-
exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
props: {
- foo: { type: Number, required: true, default: 1 }
+ foo: { type: Number, required: true, default: 1 },
+ bar: { type: Number, required: true, default: 2 },
+ 'foo:bar': { type: String, required: true },
+ 'onUpdate:modelValue': { type: Function, required: true }
},
setup(__props: any) {
@@ -112,114 +19,3 @@ return () => {}
})"
`;
-
-exports[`sfc props transform > default values w/ type declaration 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
- props: {
- foo: { type: Number, required: false, default: 1 },
- bar: { type: Object, required: false, default: () => ({}) }
- },
- setup(__props: any) {
-
-
-
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
- props: {
- foo: { default: 1 },
- bar: { default: () => ({}) },
- baz: null,
- boola: { type: Boolean },
- boolb: { type: [Boolean, Number] },
- func: { type: Function, default: () => (() => {}) }
- },
- setup(__props: any) {
-
-
-
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-
-export default {
- props: ['foo'],
- setup(__props) {
-
- const bar = 'fish', hello = 'world'
-
-return (_ctx, _cache) => {
- return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > nested scope 1`] = `
-"export default {
- props: ['foo', 'bar'],
- setup(__props) {
-
-
- function test(foo) {
- console.log(foo)
- console.log(__props.bar)
- }
-
-return () => {}
-}
-
-}"
-`;
-
-exports[`sfc props transform > non-identifier prop names 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
- props: { 'foo.bar': Function },
- setup(__props) {
-
-
- let x = __props[\\"foo.bar\\"]
-
-return (_ctx, _cache) => {
- return _toDisplayString(__props[\\"foo.bar\\"])
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > rest spread 1`] = `
-"import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
-
-export default {
- props: ['foo', 'bar', 'baz'],
- setup(__props) {
-
-const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
-
-
-
-return () => {}
-}
-
-}"
-`;
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 3ea7632f68b..b091b8b5fcc 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1136,7 +1136,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
})
-
+
// #7111
test('withDefaults (static) w/ production mode', () => {
const { content } = compile(
@@ -1277,7 +1277,6 @@ const emit = defineEmits(['a', 'b'])
expect(content).toMatch(`emits: ["foo", "bar"]`)
})
-
test('defineEmits w/ type from normal script', () => {
const { content } = compile(`
`)
- expect(bindings).toMatchObject({foo:'props'})
+ expect(bindings).toStrictEqual({
+ foo: BindingTypes.PROPS,
+ bar: BindingTypes.PROPS,
+ "'foo:bar'": BindingTypes.PROPS,
+ "'onUpdate:modelValue'": BindingTypes.PROPS
+ })
expect(content).toMatch(`
props: {
- foo: { type: Number, required: true, default: 1 }
+ foo: { type: Number, required: true, default: 1 },
+ bar: { type: Number, required: true, default: 2 },
+ 'foo:bar': { type: String, required: true },
+ 'onUpdate:modelValue': { type: Function, required: true }
},`)
assertCode(content)
})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 3ddf8b26381..d5e31f2da8f 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1889,12 +1889,14 @@ function extractRuntimeProps(
const members = node.type === 'TSTypeLiteral' ? node.members : node.body
for (const m of members) {
if (
- (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
- (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
+ (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
+ (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
) {
- let type, keyName;
- if(m.key.type === 'StringLiteral'){
- keyName = m.key.value
+ let type, keyName
+ if (m.key.type === 'StringLiteral') {
+ keyName = /^[a-z0-9]+$/i.test(m.key.value)
+ ? m.key.value
+ : `'${m.key.value}'`
} else {
keyName = m.key.name
}
From 1b49b5ad2130d679e29871e2f0eb5cccb9000b40 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 14:21:09 +0800
Subject: [PATCH 09/27] fix(compiler-sfc): updated code
---
.../compileScriptPropsTransform.spec.ts.snap | 207 ++++++++++++++++++
1 file changed, 207 insertions(+)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index dc757e56876..c2b86ba5613 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -1,5 +1,101 @@
// Vitest Snapshot v1
+exports[`sfc props transform > $$() escape 1`] = `
+"import { toRef as _toRef } from 'vue'
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+const __props_bar = _toRef(__props, 'bar');
+const __props_foo = _toRef(__props, 'foo');
+
+
+ console.log((__props_foo))
+ console.log((__props_bar))
+ ;({ foo: __props_foo, baz: __props_bar })
+
+return () => {}
+}
+
+}"
+`;
+
+exports[`sfc props transform > aliasing 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ let x = foo
+ let y = __props.foo
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo + __props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > basic usage 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ console.log(__props.foo)
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > computed static key 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+
+ console.log(__props.foo)
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props.foo)
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > default values w/ runtime declaration 1`] = `
+"import { mergeDefaults as _mergeDefaults } from 'vue'
+
+export default {
+ props: _mergeDefaults(['foo', 'bar'], {
+ foo: 1,
+ bar: () => ({})
+}),
+ setup(__props) {
+
+
+
+return () => {}
+}
+
+}"
+`;
+
exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
@@ -19,3 +115,114 @@ return () => {}
})"
`;
+
+exports[`sfc props transform > default values w/ type declaration 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ foo: { type: Number, required: false, default: 1 },
+ bar: { type: Object, required: false, default: () => ({}) }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
+exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ foo: { default: 1 },
+ bar: { default: () => ({}) },
+ baz: null,
+ boola: { type: Boolean },
+ boolb: { type: [Boolean, Number] },
+ func: { type: Function, default: () => (() => {}) }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
+exports[`sfc props transform > multiple variable declarations 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+
+export default {
+ props: ['foo'],
+ setup(__props) {
+
+ const bar = 'fish', hello = 'world'
+
+return (_ctx, _cache) => {
+ return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > nested scope 1`] = `
+"export default {
+ props: ['foo', 'bar'],
+ setup(__props) {
+
+
+ function test(foo) {
+ console.log(foo)
+ console.log(__props.bar)
+ }
+
+return () => {}
+}
+
+}"
+`;
+
+exports[`sfc props transform > non-identifier prop names 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+ props: { 'foo.bar': Function },
+ setup(__props) {
+
+
+ let x = __props[\\"foo.bar\\"]
+
+return (_ctx, _cache) => {
+ return _toDisplayString(__props[\\"foo.bar\\"])
+}
+}
+
+}"
+`;
+
+exports[`sfc props transform > rest spread 1`] = `
+"import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
+
+export default {
+ props: ['foo', 'bar', 'baz'],
+ setup(__props) {
+
+const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
+
+
+
+return () => {}
+}
+
+}"
+`;
From ec2468f93dcc982f5833135ea8e88b233f7e9140 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 14:23:55 +0800
Subject: [PATCH 10/27] fix(compiler-sfc): updated code
---
packages/compiler-sfc/__tests__/compileScript.spec.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index b091b8b5fcc..00558e225ce 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1277,6 +1277,7 @@ const emit = defineEmits(['a', 'b'])
expect(content).toMatch(`emits: ["foo", "bar"]`)
})
+
test('defineEmits w/ type from normal script', () => {
const { content } = compile(`
`)
expect(bindings).toStrictEqual({
+ __propsAliases: {
+ fooBar: 'foo:bar'
+ },
foo: BindingTypes.PROPS,
bar: BindingTypes.PROPS,
- "'foo:bar'": BindingTypes.PROPS,
- "'onUpdate:modelValue'": BindingTypes.PROPS
+ 'foo:bar': BindingTypes.PROPS,
+ fooBar: BindingTypes.PROPS_ALIASED,
+ 'onUpdate:modelValue': BindingTypes.PROPS
})
expect(content).toMatch(`
props: {
foo: { type: Number, required: true, default: 1 },
bar: { type: Number, required: true, default: 2 },
- 'foo:bar': { type: String, required: true },
- 'onUpdate:modelValue': { type: Function, required: true }
+ "foo:bar": { type: String, required: true, default: 'foo-bar' },
+ "onUpdate:modelValue": { type: Function, required: true }
},`)
assertCode(content)
})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index d5e31f2da8f..98c909d5db4 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -834,8 +834,11 @@ export function compileScript(
}
const { type, required } = props[key]
+ // key may contain symbols such
+ // e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+ const finalKey = /^[a-z0-9]+$/i.test(key) ? key : `"${key}"`
if (!isProd) {
- return `${key}: { type: ${toRuntimeTypeString(
+ return `${finalKey}: { type: ${toRuntimeTypeString(
type
)}, required: ${required}${
defaultString ? `, ${defaultString}` : ``
@@ -850,12 +853,14 @@ export function compileScript(
// #4783 for boolean, should keep the type
// #7111 for function, if default value exists or it's not static, should keep it
// in production
- return `${key}: { type: ${toRuntimeTypeString(type)}${
+ return `${finalKey}: { type: ${toRuntimeTypeString(type)}${
defaultString ? `, ${defaultString}` : ``
} }`
} else {
// production: checks are useless
- return `${key}: ${defaultString ? `{ ${defaultString} }` : 'null'}`
+ return `${finalKey}: ${
+ defaultString ? `{ ${defaultString} }` : 'null'
+ }`
}
})
.join(',\n ')}\n }`
@@ -1893,13 +1898,7 @@ function extractRuntimeProps(
(m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
) {
let type, keyName
- if (m.key.type === 'StringLiteral') {
- keyName = /^[a-z0-9]+$/i.test(m.key.value)
- ? m.key.value
- : `'${m.key.value}'`
- } else {
- keyName = m.key.name
- }
+ keyName = m.key.type === 'StringLiteral' ? m.key.value : m.key.name
if (m.type === 'TSMethodSignature') {
type = ['Function']
} else if (m.typeAnnotation) {
From e6a4ac66303f6f1f2b55eaaba8b26447100c81ad Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 1 Mar 2023 15:58:22 +0800
Subject: [PATCH 12/27] fix(compiler-sfc): updated code
---
.../compileScriptPropsTransform.spec.ts.snap | 18 +++++++++++++++
.../compileScriptPropsTransform.spec.ts | 22 +++++++++++++++++++
packages/compiler-sfc/src/compileScript.ts | 14 ++++++++----
3 files changed, 50 insertions(+), 4 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 7e06cb3afb4..e6395e94be1 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -78,6 +78,24 @@ return (_ctx, _cache) => {
}"
`;
+exports[`sfc props transform > default values w/ runtime declaration & key is string 1`] = `
+"import { mergeDefaults as _mergeDefaults } from 'vue'
+
+export default {
+ props: _mergeDefaults(['foo', 'foo:bar'], {
+ foo: 1,
+ \\"foo:bar\\": 'foo-bar'
+}),
+ setup(__props) {
+
+
+
+return () => {}
+}
+
+}"
+`;
+
exports[`sfc props transform > default values w/ runtime declaration 1`] = `
"import { mergeDefaults as _mergeDefaults } from 'vue'
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 5941a3ed8ef..a4b34b30a70 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -83,6 +83,28 @@ describe('sfc props transform', () => {
})`)
assertCode(content)
})
+ test('default values w/ runtime declaration & key is string', () => {
+ const { content, bindings } = compile(`
+
+ `)
+ expect(bindings).toStrictEqual({
+ __propsAliases: {
+ fooBar: 'foo:bar'
+ },
+ foo: BindingTypes.PROPS,
+ 'foo:bar': BindingTypes.PROPS,
+ fooBar: BindingTypes.PROPS_ALIASED
+ })
+
+ expect(content).toMatch(`
+ props: _mergeDefaults(['foo', 'foo:bar'], {
+ foo: 1,
+ "foo:bar": 'foo-bar'
+}),`)
+ assertCode(content)
+ })
test('default values w/ type declaration', () => {
const { content } = compile(`
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 98c909d5db4..a5cfe78ca56 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -834,9 +834,7 @@ export function compileScript(
}
const { type, required } = props[key]
- // key may contain symbols such
- // e.g. onUpdate:modelValue -> "onUpdate:modelValue"
- const finalKey = /^[a-z0-9]+$/i.test(key) ? key : `"${key}"`
+ const finalKey = getFinalPropsKey(key)
if (!isProd) {
return `${finalKey}: { type: ${toRuntimeTypeString(
type
@@ -1630,7 +1628,7 @@ export function compileScript(
const defaults: string[] = []
for (const key in propsDestructuredBindings) {
const d = genDestructuredDefaultValue(key)
- if (d) defaults.push(`${key}: ${d}`)
+ if (d) defaults.push(`${getFinalPropsKey(key)}: ${d}`)
}
if (defaults.length) {
declCode = `${helper(
@@ -2361,3 +2359,11 @@ export function resolveObjectKey(node: Node, computed: boolean) {
}
return undefined
}
+
+/**
+ * key may contain symbols such
+ * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+ */
+function getFinalPropsKey(key: string) {
+ return /^[a-z0-9]+$/i.test(key) ? key : `"${key}"`
+}
From 4d161b16929f1cf9c526dd861e6d3d1ee9df68e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 2 Mar 2023 20:09:57 +0800
Subject: [PATCH 13/27] Update compileScript.spec.ts
---
packages/compiler-sfc/__tests__/compileScript.spec.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 00558e225ce..3ea7632f68b 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1136,7 +1136,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
})
-
+
// #7111
test('withDefaults (static) w/ production mode', () => {
const { content } = compile(
@@ -1277,7 +1277,7 @@ const emit = defineEmits(['a', 'b'])
expect(content).toMatch(`emits: ["foo", "bar"]`)
})
-
+
test('defineEmits w/ type from normal script', () => {
const { content } = compile(`
`)
expect(bindings).toStrictEqual({
@@ -125,11 +125,11 @@ describe('sfc props transform', () => {
const { content, bindings } = compile(`
`)
expect(bindings).toStrictEqual({
From 03253571f4da4d41f7ef9682a4c54eae089d9bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
Date: Mon, 6 Mar 2023 15:54:20 +0800
Subject: [PATCH 20/27] fix: escape string
---
packages/compiler-sfc/src/compileScript.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2f3d04430a7..e1407420e38 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -2366,5 +2366,5 @@ export function resolveObjectKey(node: Node, computed: boolean) {
*/
export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
function getEscapedKey(key: string) {
- return escapeSymbolsRE.test(key) ? `"${key}"` : key
+ return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
}
From 803e1bda31649e7e6c792e21d9a1dc2b6f0c9708 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Thu, 30 Mar 2023 14:12:22 +0800
Subject: [PATCH 21/27] Merge remote-tracking branch 'upstream/main' into
bwsy/feat/propsKeyString
# Conflicts:
# packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
# packages/compiler-sfc/src/compileScript.ts
---
...compileScriptPropsDestructure.spec.ts.snap | 38 +++++++++++++++++++
packages/compiler-sfc/src/compileScript.ts | 14 ++++---
2 files changed, 46 insertions(+), 6 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
index 525f4b6edb0..587508a692b 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
@@ -97,6 +97,44 @@ return () => {}
}"
`;
+exports[`sfc props transform > default values w/ runtime declaration & key is string 1`] = `
+"import { mergeDefaults as _mergeDefaults } from 'vue'
+
+export default {
+ props: _mergeDefaults(['foo', 'foo:bar'], {
+ foo: 1,
+ \\"foo:bar\\": 'foo-bar'
+}),
+ setup(__props) {
+
+
+
+return () => {}
+}
+
+}"
+`;
+
+exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+ props: {
+ foo: { type: Number, required: true, default: 1 },
+ bar: { type: Number, required: true, default: 2 },
+ \\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
+ \\"onUpdate:modelValue\\": { type: Function, required: true }
+ },
+ setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
exports[`sfc props transform > default values w/ type declaration 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 3d7c82dfbe0..7cc416c59e5 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1753,12 +1753,14 @@ export function compileScript(
for (const key in propsDestructuredBindings) {
const d = genDestructuredDefaultValue(key)
- if (d) const escapedKey = getEscapedKey(key)
- defaults.push(
- `${escapedKey}: ${d.valueString}${
- d.needSkipFactory ? `, __skip_${escapedKey}: true` : ``
- }`
- )
+ if (d) {
+ const escapedKey = getEscapedKey(key)
+ defaults.push(
+ `${escapedKey}: ${d.valueString}${
+ d.needSkipFactory ? `, __skip_${escapedKey}: true` : ``
+ }`
+ )
+ }
}
if (defaults.length) {
declCode = `${helper(
From 1d7372d7cb9a5b0c0ff966bb01a5b3164a384387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 5 Apr 2023 20:00:29 +0800
Subject: [PATCH 22/27] update code
---
packages/compiler-sfc/src/style/cssVars.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index e424a145fe6..97e7820384e 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -10,7 +10,7 @@ import {
import { SFCDescriptor } from '../parse'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
-import { escapeSymbolsRE } from './compileScript'
+import { escapeSymbolsRE } from '../compileScript'
export const CSS_VARS_HELPER = `useCssVars`
From 555ccf8f0d8a1dd6262e0db64a3e929ebc99ed42 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Mon, 10 Apr 2023 18:28:23 +0800
Subject: [PATCH 23/27] update code
---
packages/compiler-sfc/src/compileScript.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index e3e8bb523e9..f431adf1ea4 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1052,7 +1052,6 @@ export function compileScript(
propsRuntimeDefaults.end! + startOffset
)})`
}
-
return propsDecls
}
@@ -1109,10 +1108,11 @@ export function compileScript(
const defaults: string[] = []
for (const key in propsDestructuredBindings) {
const d = genDestructuredDefaultValue(key)
+ const finalKey = getEscapedKey(key)
if (d)
defaults.push(
- `${key}: ${d.valueString}${
- d.needSkipFactory ? `, __skip_${key}: true` : ``
+ `${finalKey}: ${d.valueString}${
+ d.needSkipFactory ? `, __skip_${finalKey}: true` : ``
}`
)
}
From e94c9084f53b27fd6ea22d47d46bd68cd885ee59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 11 Apr 2023 20:09:39 +0800
Subject: [PATCH 24/27] Merge remote-tracking branch 'upstream/main' into
bwsy/feat/propsKeyString
# Conflicts:
# packages/compiler-sfc/src/compileScript.ts
---
.../compileScriptPropsTransform.spec.ts.snap | 42 +++++++++----------
packages/compiler-sfc/src/compileScript.ts | 9 ----
.../compiler-sfc/src/script/defineProps.ts | 22 +++++++---
packages/compiler-sfc/src/style/cssVars.ts | 6 ++-
4 files changed, 41 insertions(+), 38 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 5201ca20256..a2e01d36a00 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -9,11 +9,11 @@ export default {
const __props_bar = _toRef(__props, 'bar');
const __props_foo = _toRef(__props, 'foo');
-
+
console.log((__props_foo))
console.log((__props_bar))
;({ foo: __props_foo, baz: __props_bar })
-
+
return () => {}
}
@@ -28,10 +28,10 @@ export default {
props: ['foo'],
setup(__props) {
-
+
let x = foo
let y = __props.foo
-
+
return (_ctx, _cache) => {
return _toDisplayString(__props.foo + __props.foo)
}
@@ -48,9 +48,9 @@ export default {
props: ['foo'],
setup(__props) {
-
+
console.log(__props.foo)
-
+
return (_ctx, _cache) => {
return _toDisplayString(__props.foo)
}
@@ -67,9 +67,9 @@ export default {
props: ['foo'],
setup(__props) {
-
+
console.log(__props.foo)
-
+
return (_ctx, _cache) => {
return _toDisplayString(__props.foo)
}
@@ -109,8 +109,8 @@ export default {
}),
setup(__props) {
-
-
+
+
return () => {}
}
@@ -148,8 +148,8 @@ export default /*#__PURE__*/_defineComponent({
},
setup(__props: any) {
-
-
+
+
return () => {}
}
@@ -170,8 +170,8 @@ export default /*#__PURE__*/_defineComponent({
},
setup(__props: any) {
-
-
+
+
return () => {}
}
@@ -187,7 +187,7 @@ export default {
setup(__props) {
const bar = 'fish', hello = 'world'
-
+
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
}
@@ -201,12 +201,12 @@ exports[`sfc props transform > nested scope 1`] = `
props: ['foo', 'bar'],
setup(__props) {
-
+
function test(foo) {
console.log(foo)
console.log(__props.bar)
}
-
+
return () => {}
}
@@ -221,9 +221,9 @@ export default {
props: { 'foo.bar': Function },
setup(__props) {
-
+
let x = __props[\\"foo.bar\\"]
-
+
return (_ctx, _cache) => {
return _toDisplayString(__props[\\"foo.bar\\"])
}
@@ -241,8 +241,8 @@ export default {
const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
-
-
+
+
return () => {}
}
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 9895c9f0744..40deb6723c6 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1296,12 +1296,3 @@ function isStaticNode(node: Node): boolean {
return false
}
}
-
-/**
- * key may contain symbols such
- * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
- */
-export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
-function getEscapedKey(key: string) {
- return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
-}
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 903d038dbe0..0622e1c1ac4 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -149,11 +149,12 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
const defaults: string[] = []
for (const key in ctx.propsDestructuredBindings) {
const d = genDestructuredDefaultValue(ctx, key)
+ const finalKey = getEscapedKey(key)
if (d)
defaults.push(
- `${key}: ${d.valueString}${
- d.needSkipFactory ? `, __skip_${key}: true` : ``
- }`
+ `${finalKey}: ${d.valueString}${
+ d.needSkipFactory ? `, __skip_${finalKey}: true` : ``
+ }`
)
}
if (defaults.length) {
@@ -273,8 +274,9 @@ function genRuntimePropFromType(
}
}
+ const finalKey = getEscapedKey(key)
if (!ctx.options.isProd) {
- return `${key}: { ${concatStrings([
+ return `${finalKey}: { ${concatStrings([
`type: ${toRuntimeTypeString(type)}`,
`required: ${required}`,
skipCheck && 'skipCheck: true',
@@ -290,13 +292,13 @@ function genRuntimePropFromType(
// #4783 for boolean, should keep the type
// #7111 for function, if default value exists or it's not static, should keep it
// in production
- return `${key}: { ${concatStrings([
+ return `${finalKey}: { ${concatStrings([
`type: ${toRuntimeTypeString(type)}`,
defaultString
])} }`
} else {
// production: checks are useless
- return `${key}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
+ return `${finalKey}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
}
}
@@ -387,3 +389,11 @@ function inferValueType(node: Node): string | undefined {
return 'Function'
}
}
+
+/**
+ * key may contain symbols
+ * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+ */
+function getEscapedKey(key: string) {
+ return /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g.test(key) ? JSON.stringify(key) : key
+}
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 97e7820384e..f232d09695d 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -10,7 +10,6 @@ import {
import { SFCDescriptor } from '../parse'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
-import { escapeSymbolsRE } from '../compileScript'
export const CSS_VARS_HELPER = `useCssVars`
@@ -32,7 +31,10 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
return hash(id + raw)
} else {
// escape ASCII Punctuation & Symbols
- return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
+ return `${id}-${raw.replace(
+ /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g,
+ s => `\\${s}`
+ )}`
}
}
From 9c56547a8bc2ec3815085f838211ded50425f831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 11 Apr 2023 20:30:54 +0800
Subject: [PATCH 25/27] update code
---
packages/compiler-sfc/src/script/defineProps.ts | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 0622e1c1ac4..5039007602f 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -186,9 +186,9 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
for (const m of members) {
if (
(m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
- m.key.type === 'Identifier'
+ (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
) {
- const key = m.key.name
+ const keyName = m.key.type === 'StringLiteral' ? m.key.value : m.key.name
let type: string[] | undefined
let skipCheck = false
if (m.type === 'TSMethodSignature') {
@@ -212,7 +212,7 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
propStrings.push(
genRuntimePropFromType(
ctx,
- key,
+ keyName,
!m.optional,
type || [`null`],
skipCheck,
@@ -221,7 +221,7 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
)
// register bindings
- ctx.bindingMetadata[key] = BindingTypes.PROPS
+ ctx.bindingMetadata[keyName] = BindingTypes.PROPS
}
}
From 0ef564f6d3d7794d9b5aed4387673d7c918d6429 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Fri, 14 Apr 2023 16:23:26 +0800
Subject: [PATCH 26/27] update snap and update code
---
.../__snapshots__/compileScriptPropsTransform.spec.ts.snap | 0
packages/compiler-sfc/src/script/defineProps.ts | 3 ++-
packages/compiler-sfc/src/style/cssVars.ts | 3 ++-
3 files changed, 4 insertions(+), 2 deletions(-)
delete mode 100644 packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 0cacd097224..7a505b0c2c5 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -365,8 +365,9 @@ function inferValueType(node: Node): string | undefined {
* key may contain symbols
* e.g. onUpdate:modelValue -> "onUpdate:modelValue"
*/
+export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
function getEscapedKey(key: string) {
- return /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g.test(key)
+ return escapeSymbolsRE.test(key)
? JSON.stringify(key)
: key
}
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index f232d09695d..1d5c163db52 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -8,6 +8,7 @@ import {
BindingMetadata
} from '@vue/compiler-dom'
import { SFCDescriptor } from '../parse'
+import {escapeSymbolsRE} from '../script/defineProps'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
@@ -32,7 +33,7 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
} else {
// escape ASCII Punctuation & Symbols
return `${id}-${raw.replace(
- /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g,
+ escapeSymbolsRE,
s => `\\${s}`
)}`
}
From ec0924ad2c2536ccbbd201acd3f769aca66b77a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Fri, 12 May 2023 18:20:47 +0800
Subject: [PATCH 27/27] Update cssVars.ts
---
packages/compiler-sfc/src/style/cssVars.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 1d5c163db52..a3e2104999a 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -8,7 +8,7 @@ import {
BindingMetadata
} from '@vue/compiler-dom'
import { SFCDescriptor } from '../parse'
-import {escapeSymbolsRE} from '../script/defineProps'
+import { escapeSymbolsRE } from '../script/defineProps'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'