Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(compiler-sfc): ensure script setup generates type-valid ts output
fix #4455
  • Loading branch information
yyx990803 committed Sep 2, 2021
1 parent 4cd282b commit bacb201
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 70 deletions.
Expand Up @@ -704,7 +704,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exporte
export interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -721,7 +721,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exporte
export type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -738,7 +738,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (interfa
interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -755,7 +755,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referen
export type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -772,7 +772,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referen
type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -789,7 +789,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type al
type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -805,7 +805,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type li
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
setup(__props, { expose, emit }: { emit: ({(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -821,7 +821,7 @@ exports[`SFC compile <script setup> with TypeScript defineEmits w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
emits: [\\"foo\\", \\"bar\\"],
setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
expose()
Expand All @@ -840,8 +840,8 @@ export interface Props { x?: number }
export default /*#__PURE__*/_defineComponent({
props: {
x: { type: Number, required: false }
} as unknown as undefined,
setup(__props: { x?: number }, { expose }) {
},
setup(__props: any, { expose }) {
expose()
Expand All @@ -859,8 +859,8 @@ export type Props = { x?: number }
export default /*#__PURE__*/_defineComponent({
props: {
x: { type: Number, required: false }
} as unknown as undefined,
setup(__props: { x?: number }, { expose }) {
},
setup(__props: any, { expose }) {
expose()
Expand All @@ -878,8 +878,8 @@ interface Props { x?: number }
export default /*#__PURE__*/_defineComponent({
props: {
x: { type: Number, required: false }
} as unknown as undefined,
setup(__props: { x?: number }, { expose }) {
},
setup(__props: any, { expose }) {
expose()
Expand Down Expand Up @@ -923,34 +923,8 @@ export default /*#__PURE__*/_defineComponent({
literalUnionMixed: { type: [String, Number, Boolean], required: true },
intersection: { type: Object, required: true },
foo: { type: [Function, null], required: true }
} as unknown as undefined,
setup(__props: {
string: string
number: number
boolean: boolean
object: object
objectLiteral: { a: number }
fn: (n: number) => void
functionRef: Function
objectRef: Object
array: string[]
arrayRef: Array<any>
tuple: [number, number]
set: Set<string>
literal: 'foo'
optional?: any
recordRef: Record<string, null>
interface: Test
alias: Alias
method(): void
union: string | number
literalUnion: 'foo' | 'bar'
literalUnionNumber: 1 | 2 | 3 | 4 | 5
literalUnionMixed: 'foo' | 1 | boolean
intersection: Test & {}
foo: ((item: any) => boolean) | null
}, { expose }) {
},
setup(__props: any, { expose }) {
expose()
Expand All @@ -968,8 +942,8 @@ type Props = { x?: number }
export default /*#__PURE__*/_defineComponent({
props: {
x: { type: Number, required: false }
} as unknown as undefined,
setup(__props: { x?: number }, { expose }) {
},
setup(__props: any, { expose }) {
expose()
Expand Down Expand Up @@ -1039,15 +1013,15 @@ export default /*#__PURE__*/_defineComponent({
foo: { type: String, required: false },
bar: { type: Number, required: false },
baz: { type: Boolean, required: true }
}, { ...defaults }) as unknown as undefined,
setup(__props: {
}, { ...defaults }),
setup(__props: any, { expose }) {
expose()
const props = __props as {
foo?: string
bar?: number
baz: boolean
}, { expose }) {
expose()
const props = __props
}
return { props, defaults }
Expand All @@ -1065,11 +1039,11 @@ export default /*#__PURE__*/_defineComponent({
bar: { type: Number, required: false },
baz: { type: Boolean, required: true },
qux: { type: Function, required: false, default() { return 1 } }
} as unknown as undefined,
setup(__props: { foo: string, bar?: number, baz: boolean, qux(): number }, { expose }) {
},
setup(__props: any, { expose }) {
expose()
const props = __props
const props = __props as { foo: string, bar?: number, baz: boolean, qux(): number }
return { props }
Expand Down
18 changes: 8 additions & 10 deletions packages/compiler-sfc/__tests__/compileScript.spec.ts
Expand Up @@ -861,7 +861,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (union)', () => {
Expand All @@ -884,9 +884,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: (${type}),`)
expect(content).toMatch(
`emits: ["foo", "bar", "baz"] as unknown as undefined`
)
expect(content).toMatch(`emits: ["foo", "bar", "baz"]`)
})

test('defineEmits w/ type (interface)', () => {
Expand All @@ -898,7 +896,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (exported interface)', () => {
Expand All @@ -910,7 +908,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (type alias)', () => {
Expand All @@ -922,7 +920,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (exported type alias)', () => {
Expand All @@ -934,7 +932,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ({ (e: 'foo' | 'bar'): void }),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (referenced function type)', () => {
Expand All @@ -946,7 +944,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('defineEmits w/ type (referenced exported function type)', () => {
Expand All @@ -958,7 +956,7 @@ const emit = defineEmits(['a', 'b'])
`)
assertCode(content)
expect(content).toMatch(`emit: ((e: 'foo' | 'bar') => void),`)
expect(content).toMatch(`emits: ["foo", "bar"] as unknown as undefined`)
expect(content).toMatch(`emits: ["foo", "bar"]`)
})

test('runtime Enum', () => {
Expand Down
22 changes: 15 additions & 7 deletions packages/compiler-sfc/src/compileScript.ts
Expand Up @@ -592,15 +592,15 @@ export function compileScript(
)})`
}

return `\n props: ${propsDecls} as unknown as undefined,`
return `\n props: ${propsDecls},`
}

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 = `: { `
let res = `{ `
const members = node.type === 'TSTypeLiteral' ? node.members : node.body
for (const m of members) {
if (
Expand Down Expand Up @@ -629,7 +629,7 @@ export function compileScript(
}
return (res.length ? res.slice(0, -2) : res) + ` }`
} else {
return `: ${scriptSetupSource.slice(node.start!, node.end!)}`
return scriptSetupSource.slice(node.start!, node.end!)
}
}

Expand Down Expand Up @@ -1051,17 +1051,25 @@ export function compileScript(
// 9. finalize setup() argument signature
let args = `__props`
if (propsTypeDecl) {
args += genSetupPropsType(propsTypeDecl)
// mark as any and only cast on assignment
// since the user defined complex types may be incompatible with the
// inferred type from generated runtime declarations
args += `: any`
}
// inject user assignment of props
// we use a default __props so that template expressions referencing props
// can use it directly
if (propsIdentifier) {
s.prependRight(startOffset, `\nconst ${propsIdentifier} = __props`)
s.prependRight(
startOffset,
`\nconst ${propsIdentifier} = __props${
propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``
}`
)
}
// inject temp variables for async context preservation
if (hasAwait) {
const any = isTS ? `:any` : ``
const any = isTS ? `: any` : ``
s.prependRight(startOffset, `\nlet __temp${any}, __restore${any}\n`)
}

Expand Down Expand Up @@ -1589,7 +1597,7 @@ function genRuntimeEmits(emits: Set<string>) {
return emits.size
? `\n emits: [${Array.from(emits)
.map(p => JSON.stringify(p))
.join(', ')}] as unknown as undefined,`
.join(', ')}],`
: ``
}

Expand Down

0 comments on commit bacb201

Please sign in to comment.