From 005667f519e002a7e8ee2c02c8b0fbad7bae1be5 Mon Sep 17 00:00:00 2001
From: webfansplz <>
Date: Sun, 29 Aug 2021 03:11:15 +0800
Subject: [PATCH 1/4] fix(compiler-sfc): props type should not be optional when
setup default value
---
.../__snapshots__/compileScript.spec.ts.snap | 10 ++++--
.../__tests__/compileScript.spec.ts | 12 ++++++-
packages/compiler-sfc/src/compileScript.ts | 33 ++++++++++++++++++-
3 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 8e2a50971b9..fd687e74e8d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1037,11 +1037,13 @@ import { defaults } from './foo'
export default /*#__PURE__*/_defineComponent({
props: _mergeDefaults({
foo: { type: String, required: false },
- bar: { type: Number, required: false }
+ bar: { type: Number, required: false },
+ baz: { type: Boolean, required: true }
}, { ...defaults }) as unknown as undefined,
setup(__props: {
foo?: string
bar?: number
+ baz: boolean
}, { expose }) {
expose()
@@ -1060,11 +1062,13 @@ exports[`SFC compile
`)
@@ -834,7 +843,8 @@ const emit = defineEmits(['a', 'b'])
`
_mergeDefaults({
foo: { type: String, required: false },
- bar: { type: Number, required: false }
+ bar: { type: Number, required: false },
+ baz: { type: Boolean, required: true }
}, { ...defaults })`.trim()
)
})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 6a8d1796844..61d8d1d9b5a 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -572,6 +572,36 @@ export function compileScript(
return `\n props: ${propsDecls} as unknown as undefined,`
}
+ function genSetupPropsArgs(
+ props: Record,
+ propsArgs: string
+ ) {
+ const keys = Object.keys(props)
+ if (!keys.length) {
+ return ``
+ }
+ const hasStaticDefaults =
+ propsRuntimeDefaults &&
+ propsRuntimeDefaults.type === 'ObjectExpression' &&
+ propsRuntimeDefaults.properties.every(
+ node => node.type === 'ObjectProperty' && !node.computed
+ )
+ keys.map(key => {
+ if (hasStaticDefaults) {
+ const prop = (propsRuntimeDefaults as ObjectExpression).properties.find(
+ (node: any) => node.key.name === key
+ ) as ObjectProperty
+ if (prop) {
+ const { required } = props[key]
+ if (!required) {
+ propsArgs = propsArgs.replace(`${key}?`, key)
+ }
+ }
+ }
+ })
+ return `: ${propsArgs}`
+ }
+
// 1. process normal
`)
@@ -812,16 +814,18 @@ const emit = defineEmits(['a', 'b'])
)
expect(content).toMatch(`bar: { type: Number, required: false }`)
expect(content).toMatch(`baz: { type: Boolean, required: true }`)
- expect(content).toMatch(`{
- foo: string
- bar?: number
- baz: boolean
- }`)
+ expect(content).toMatch(
+ `qux: { type: Function, required: false, default() { return 1 } }`
+ )
+ expect(content).toMatch(
+ `{ foo: string, bar?: number, baz: boolean, qux(): number }`
+ )
expect(content).toMatch(`const props = __props`)
expect(bindings).toStrictEqual({
foo: BindingTypes.PROPS,
bar: BindingTypes.PROPS,
baz: BindingTypes.PROPS,
+ qux: BindingTypes.PROPS,
props: BindingTypes.SETUP_CONST
})
})
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 8653f6538b2..ac38540f60e 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -38,7 +38,8 @@ import {
RestElement,
TSInterfaceBody,
AwaitExpression,
- Program
+ Program,
+ ObjectMethod
} from '@babel/types'
import { walk } from 'estree-walker'
import { RawSourceMap } from 'source-map'
@@ -242,7 +243,7 @@ export function compileScript(
let hasDefineEmitCall = false
let hasDefineExposeCall = false
let propsRuntimeDecl: Node | undefined
- let propsRuntimeDefaults: Node | undefined
+ let propsRuntimeDefaults: ObjectExpression | undefined
let propsTypeDecl: TSTypeLiteral | TSInterfaceBody | undefined
let propsTypeDeclRaw: Node | undefined
let propsIdentifier: string | undefined
@@ -384,7 +385,16 @@ export function compileScript(
node
)
}
- propsRuntimeDefaults = node.arguments[1]
+ propsRuntimeDefaults = node.arguments[1] as ObjectExpression
+ if (
+ !propsRuntimeDefaults ||
+ propsRuntimeDefaults.type !== 'ObjectExpression'
+ ) {
+ error(
+ `The 2nd argument of ${WITH_DEFAULTS} must be an object literal.`,
+ propsRuntimeDefaults || node
+ )
+ }
} else {
error(
`${WITH_DEFAULTS}' first argument must be a ${DEFINE_PROPS} call.`,
@@ -523,7 +533,9 @@ export function compileScript(
propsRuntimeDefaults &&
propsRuntimeDefaults.type === 'ObjectExpression' &&
propsRuntimeDefaults.properties.every(
- node => node.type === 'ObjectProperty' && !node.computed
+ node =>
+ (node.type === 'ObjectProperty' && !node.computed) ||
+ node.type === 'ObjectMethod'
)
)
}
@@ -534,22 +546,28 @@ export function compileScript(
return ``
}
const hasStaticDefaults = checkStaticDefaults()
+ const scriptSetupSource = scriptSetup!.content
let propsDecls = `{
${keys
.map(key => {
let defaultString: string | undefined
if (hasStaticDefaults) {
- const prop = (
- propsRuntimeDefaults as ObjectExpression
- ).properties.find(
+ const prop = propsRuntimeDefaults!.properties.find(
(node: any) => node.key.name === key
- ) as ObjectProperty
+ ) as ObjectProperty | ObjectMethod
if (prop) {
- // prop has corresponding static default value
- defaultString = `default: ${source.slice(
- prop.value.start! + startOffset,
- prop.value.end! + startOffset
- )}`
+ if (prop.type === 'ObjectProperty') {
+ // prop has corresponding static default value
+ defaultString = `default: ${scriptSetupSource.slice(
+ prop.value.start!,
+ prop.value.end!
+ )}`
+ } else {
+ defaultString = `default() ${scriptSetupSource.slice(
+ prop.body.start!,
+ prop.body.end!
+ )}`
+ }
}
}
@@ -577,29 +595,42 @@ export function compileScript(
return `\n props: ${propsDecls} as unknown as undefined,`
}
- function genSetupPropsType(
- props: Record,
- propsType: string
- ) {
- const keys = Object.keys(props)
- if (!keys.length) {
- return ``
- }
- const hasStaticDefaults = checkStaticDefaults()
- keys.map(key => {
- if (hasStaticDefaults) {
- const prop = (propsRuntimeDefaults as ObjectExpression).properties.find(
- (node: any) => node.key.name === key
- ) as ObjectProperty
- if (prop) {
- const { required } = props[key]
- if (!required) {
- propsType = propsType.replace(`${key}?`, key)
+ function genSetupPropsType(node: TSTypeLiteral | TSInterfaceBody) {
+ const scriptSetupSource = scriptSetup!.content
+ if (checkStaticDefaults()) {
+ // if withDefaults() is used, we need to remove the optional flags
+ // on props that have default values
+ let res = `: { `
+ const members = node.type === 'TSTypeLiteral' ? node.members : node.body
+ for (const m of members) {
+ if (
+ (m.type === 'TSPropertySignature' ||
+ m.type === 'TSMethodSignature') &&
+ m.typeAnnotation &&
+ m.key.type === 'Identifier'
+ ) {
+ if (
+ propsRuntimeDefaults!.properties.some(
+ (p: any) => p.key.name === (m.key as Identifier).name
+ )
+ ) {
+ res +=
+ m.key.name +
+ (m.type === 'TSMethodSignature' ? '()' : '') +
+ scriptSetupSource.slice(
+ m.typeAnnotation.start!,
+ m.typeAnnotation.end!
+ ) +
+ ', '
+ } else {
+ res += scriptSetupSource.slice(m.start!, m.end!) + `, `
}
}
}
- })
- return `: ${propsType}`
+ return (res.length ? res.slice(0, -2) : res) + ` }`
+ } else {
+ return `: ${scriptSetupSource.slice(node.start!, node.end!)}`
+ }
}
// 1. process normal