Merge branch 'main' into fix-jsx-dom-augmentation

packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts

@@ -13,6 +13,7 @@ import {
 } from '../../src'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformExpression } from '../../src/transforms/transformExpression'
+import { PatchFlagNames, PatchFlags } from '../../../shared/src'
 
 function parseWithExpressionTransform(
  template: string,
@@ -494,7 +495,9 @@ describe('compiler: expression transform', () => {
  setup: BindingTypes.SETUP_MAYBE_REF,
  setupConst: BindingTypes.SETUP_CONST,
  data: BindingTypes.DATA,
- options: BindingTypes.OPTIONS
+ options: BindingTypes.OPTIONS,
+ reactive: BindingTypes.SETUP_REACTIVE_CONST,
+ literal: BindingTypes.LITERAL_CONST
  }
 
  function compileWithBindingMetadata(
@@ -532,5 +535,25 @@ describe('compiler: expression transform', () => {
  expect(code).toMatch(`_ctx.options`)
  expect(code).toMatchSnapshot()
  })
+
+ test('literal const handling', () => {
+ const { code } = compileWithBindingMetadata(`<div>{{ literal }}</div>`, {
+ inline: true
+ })
+ // #7973 should skip patch for literal const
+ expect(code).not.toMatch(
+ `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+ )
+ })
+
+ test('reactive const handling', () => {
+ const { code } = compileWithBindingMetadata(`<div>{{ reactive }}</div>`, {
+ inline: true
+ })
+ // #7973 should not skip patch for reactive const
+ expect(code).toMatch(
+ `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+ )
+ })
  })
 })

packages/compiler-core/src/transforms/transformExpression.ts

@@ -128,7 +128,11 @@ export function processExpression(
  const isDestructureAssignment =
  parent && isInDestructureAssignment(parent, parentStack)
 
- if (isConst(type) || localVars[raw]) {
+ if (
+ isConst(type) ||
+ type === BindingTypes.SETUP_REACTIVE_CONST ||
+ localVars[raw]
+ ) {
  return raw
  } else if (type === BindingTypes.SETUP_REF) {
  return `${raw}.value`
@@ -371,8 +375,6 @@ export function stringifyExpression(exp: ExpressionNode | string): string {
 
 function isConst(type: unknown) {
  return (
- type === BindingTypes.SETUP_CONST ||
- type === BindingTypes.LITERAL_CONST ||
- type === BindingTypes.SETUP_REACTIVE_CONST
+ type === BindingTypes.SETUP_CONST || type === BindingTypes.LITERAL_CONST
  )
 }

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -1715,7 +1715,9 @@ export default /*#__PURE__*/_defineComponent({
  foo: { type: [Function, null], required: true },
  unknown: { type: null, required: true },
  unknownUnion: { type: null, required: true },
- unknownIntersection: { type: Object, required: true }
+ unknownIntersection: { type: Object, required: true },
+ unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },
+ unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }
  },
  setup(__props: any, { expose: __expose }) {
  __expose();

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -1042,6 +1042,8 @@ const emit = defineEmits(['a', 'b'])
  unknown: UnknownType
  unknownUnion: UnknownType | string
  unknownIntersection: UnknownType & Object
+ unknownUnionWithBoolean: UnknownType | boolean
+ unknownUnionWithFunction: UnknownType | (() => any)
  }>()
  </script>`)
  assertCode(content)
@@ -1093,7 +1095,13 @@ const emit = defineEmits(['a', 'b'])
  expect(content).toMatch(`unknownUnion: { type: null, required: true }`)
  // intersection containing unknown type: narrow to the known types
  expect(content).toMatch(
- `unknownIntersection: { type: Object, required: true }`
+ `unknownIntersection: { type: Object, required: true },`
+ )
+ expect(content).toMatch(
+ `unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },`
+ )
+ expect(content).toMatch(
+ `unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }`
  )
  expect(bindings).toStrictEqual({
  string: BindingTypes.PROPS,
@@ -1131,7 +1139,9 @@ const emit = defineEmits(['a', 'b'])
  nonNull: BindingTypes.PROPS,
  unknown: BindingTypes.PROPS,
  unknownUnion: BindingTypes.PROPS,
- unknownIntersection: BindingTypes.PROPS
+ unknownIntersection: BindingTypes.PROPS,
+ unknownUnionWithBoolean: BindingTypes.PROPS,
+ unknownUnionWithFunction: BindingTypes.PROPS
  })
  })
 

packages/compiler-sfc/src/compileScript.ts

@@ -888,11 +888,11 @@ export function compileScript(
  }
  }
 
- const { type, required } = props[key]
+ const { type, required, skipCheck } = props[key]
  if (!isProd) {
  return `${key}: { type: ${toRuntimeTypeString(
  type
- )}, required: ${required}${
+ )}, required: ${required}${skipCheck ? ', skipCheck: true' : ''}${
  defaultString ? `, ${defaultString}` : ``
  } }`
  } else if (
@@ -1964,6 +1964,7 @@ interface PropTypeData {
  key: string
  type: string[]
  required: boolean
+ skipCheck: boolean
 }
 
 function recordType(node: Node, declaredTypes: Record<string, string[]>) {
@@ -1993,19 +1994,26 @@ function extractRuntimeProps(
  m.key.type === 'Identifier'
  ) {
  let type: string[] | undefined
+ let skipCheck = false
  if (m.type === 'TSMethodSignature') {
  type = ['Function']
  } else if (m.typeAnnotation) {
  type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
  // skip check for result containing unknown types
  if (type.includes(UNKNOWN_TYPE)) {
- type = [`null`]
+ if (type.includes('Boolean') || type.includes('Function')) {
+ type = type.filter(t => t !== UNKNOWN_TYPE)
+ skipCheck = true
+ } else {
+ type = ['null']
+ }
  }
  }
  props[m.key.name] = {
  key: m.key.name,
  required: !m.optional,
- type: type || [`null`]
+ type: type || [`null`],
+ skipCheck
  }
  }
  }

packages/runtime-core/__tests__/componentProps.spec.ts

@@ -335,7 +335,8 @@ describe('component props', () => {
  arr: { type: Array },
  obj: { type: Object },
  cls: { type: MyClass },
- fn: { type: Function }
+ fn: { type: Function },
+ skipCheck: { type: [Boolean, Function], skipCheck: true }
  },
  setup() {
  return () => null
@@ -349,7 +350,8 @@ describe('component props', () => {
  arr: {},
  obj: 'false',
  cls: {},
- fn: true
+ fn: true,
+ skipCheck: 'foo'
  }),
  nodeOps.createElement('div')
  )
@@ -374,6 +376,9 @@ describe('component props', () => {
  expect(
  `Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`
  ).toHaveBeenWarned()
+ expect(
+ `Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`
+ ).not.toHaveBeenWarned()
  })
 
  // #3495

packages/runtime-core/src/componentProps.ts

@@ -58,6 +58,7 @@ export interface PropOptions<T = any, D = T> {
  required?: boolean
  default?: D | DefaultFactory<D> | null | undefined | object
  validator?(value: unknown): boolean
+ skipCheck?: boolean
 }
 
 export type PropType<T> = PropConstructor<T> | PropConstructor<T>[]
@@ -608,7 +609,7 @@ function validateProp(
  prop: PropOptions,
  isAbsent: boolean
 ) {
- const { type, required, validator } = prop
+ const { type, required, validator, skipCheck } = prop
  // required!
  if (required && isAbsent) {
  warn('Missing required prop: "' + name + '"')
@@ -619,7 +620,7 @@ function validateProp(
  return
  }
  // type check
- if (type != null && type !== true) {
+ if (type != null && type !== true && !skipCheck) {
  let isValid = false
  const types = isArray(type) ? type : [type]
  const expectedTypes = []

packages/vue/jsx-runtime/index.js

@@ -1,6 +1,11 @@
 const { h, Fragment } = require('vue')
 
-function jsx(type, { children, ...props }) {
+function jsx(type, props, key) {
+ const { children } = props
+ delete props.children
+ if (arguments.length > 2) {
+ props.key = key
+ }
  return h(type, props, children)
 }
 

packages/vue/jsx-runtime/index.mjs

@@ -1,6 +1,11 @@
 import { h, Fragment } from 'vue'
 
-function jsx(type, { children, ...props }) {
+function jsx(type, props, key) {
+ const { children } = props
+ delete props.children
+ if (arguments.length > 2) {
+ props.key = key
+ }
  return h(type, props, children)
 }
 

packages/vue/types/jsx-register.d.ts

@@ -2,3 +2,5 @@
 // imports the global JSX namespace registration for compat.
 // TODO: remove in 3.4
 import '../jsx'
+
+export * from '../jsx-runtime/dom'