Merge branch 'vuejs:main' into bwsy/transformElm

Author: baiwusanyu-c

.prettierignore

@@ -0,0 +1 @@
+dist

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

@@ -628,6 +628,24 @@ describe('compiler: v-if', () => {
       expect(branch1.props).toMatchObject(createObjectMatcher({ key: `[0]` }))
     })
 
+    // #6631
+    test('avoid duplicate keys', () => {
+      const {
+        node: { codegenNode }
+      } = parseWithIfTransform(`<div v-if="ok" key="custom_key" v-bind="obj"/>`)
+      const branch1 = codegenNode.consequent as VNodeCall
+      expect(branch1.props).toMatchObject({
+        type: NodeTypes.JS_CALL_EXPRESSION,
+        callee: MERGE_PROPS,
+        arguments: [
+          createObjectMatcher({
+            key: 'custom_key'
+          }),
+          { content: `obj` }
+        ]
+      })
+    })
+
     test('with spaces between branches', () => {
       const {
         node: { codegenNode }

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

@@ -271,6 +271,21 @@ describe('compiler: transform v-on', () => {
     })
   })
 
+  test('should NOT wrap as function if expression is already function expression (with Typescript)', () => {
+    const { node } = parseWithVOn(`<div @click="(e: any): any => foo(e)"/>`)
+    expect((node.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: { content: `onClick` },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `(e: any): any => foo(e)`
+          }
+        }
+      ]
+    })
+  })
+
   test('should NOT wrap as function if expression is already function expression (with newlines)', () => {
     const { node } = parseWithVOn(
       `<div @click="

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

@@ -17,7 +17,7 @@ import { hasScopeRef, isMemberExpression } from '../utils'
 import { TO_HANDLER_KEY } from '../runtimeHelpers'
 
 const fnExpRE =
-  /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
+  /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
 
 export interface VOnDirectiveNode extends DirectiveNode {
   // v-on without arg is handled directly in ./transformElements.ts due to it affecting

packages/compiler-core/src/utils.ts

@@ -397,7 +397,10 @@ export function injectProp(
     // if doesn't override user provided keys
     const first = props.arguments[0] as string | JSChildNode
     if (!isString(first) && first.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-      first.properties.unshift(prop)
+      // #6631
+      if (!hasProp(prop, first)) {
+        first.properties.unshift(prop)
+      }
     } else {
       if (props.callee === TO_HANDLERS) {
         // #2366
@@ -411,17 +414,7 @@ export function injectProp(
     }
     !propsWithInjection && (propsWithInjection = props)
   } else if (props.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-    let alreadyExists = false
-    // check existing key to avoid overriding user provided keys
-    if (prop.key.type === NodeTypes.SIMPLE_EXPRESSION) {
-      const propKeyName = prop.key.content
-      alreadyExists = props.properties.some(
-        p =>
-          p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-          p.key.content === propKeyName
-      )
-    }
-    if (!alreadyExists) {
+    if (!hasProp(prop, props)) {
       props.properties.unshift(prop)
     }
     propsWithInjection = props
@@ -453,6 +446,20 @@ export function injectProp(
   }
 }
 
+// check existing key to avoid overriding user provided keys
+function hasProp(prop: Property, props: ObjectExpression) {
+  let result = false
+  if (prop.key.type === NodeTypes.SIMPLE_EXPRESSION) {
+    const propKeyName = prop.key.content
+    result = props.properties.some(
+      p =>
+        p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+        p.key.content === propKeyName
+    )
+  }
+  return result
+}
+
 export function toValidAssetId(
   name: string,
   type: 'component' | 'directive' | 'filter'

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

@@ -640,7 +640,7 @@ export default {
   setup(__props, { expose }) {
   expose();
 
-const props = __props
+const props = __props;
 
 
 
@@ -658,7 +658,7 @@ export default {
   setup(__props, { expose }) {
   expose();
 
-const props = __props
+const props = __props;
 
 
 return { props, x }
@@ -675,7 +675,7 @@ exports[`SFC compile <script setup> defineProps() 1`] = `
   setup(__props, { expose }) {
   expose();
 
-const props = __props
+const props = __props;
 
 
 const bar = 1
@@ -693,7 +693,7 @@ exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable de
   setup(__props, { expose, emit }) {
   expose();
 
-const props = __props
+const props = __props;
 
 
 
@@ -710,7 +710,7 @@ exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable de
   setup(__props, { expose, emit }) {
   expose();
 
-const props = __props
+const props = __props;
 
     const a = 1;
 
@@ -1611,7 +1611,7 @@ export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose, emit }) {
   expose();
 
-const props = __props
+const props = __props;
 
 
 
@@ -1705,7 +1705,7 @@ const props = __props as {
         foo?: string
         bar?: number
         baz: boolean
-      }
+      };
 
 
 
@@ -1728,7 +1728,7 @@ export default /*#__PURE__*/_defineComponent({
   setup(__props: any, { expose }) {
   expose();
 
-const props = __props as { foo: string, bar?: number, baz: boolean, qux(): number }
+const props = __props as { foo: string, bar?: number, baz: boolean, qux(): number };
 
 
 

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

@@ -6,8 +6,8 @@ exports[`sfc props transform $$() escape 1`] = `
 export default {
   props: ['foo'],
   setup(__props) {
-const __props_bar = _toRef(__props, 'bar')
-const __props_foo = _toRef(__props, 'foo')
+const __props_bar = _toRef(__props, 'bar');
+const __props_foo = _toRef(__props, 'foo');
 
       
       console.log((__props_foo))
@@ -160,7 +160,7 @@ export default {
   props: ['foo', 'bar', 'baz'],
   setup(__props) {
 
-const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
+const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
 
       
       

packages/compiler-sfc/src/compileScript.ts

@@ -1411,15 +1411,15 @@ export function compileScript(
       startOffset,
       `\nconst ${propsIdentifier} = __props${
         propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``
-      }\n`
+      };\n`
     )
   }
   if (propsDestructureRestId) {
     s.prependLeft(
       startOffset,
       `\nconst ${propsDestructureRestId} = ${helper(
         `createPropsRestProxy`
-      )}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))})\n`
+      )}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))});\n`
     )
   }
   // inject temp variables for async context preservation

packages/compiler-sfc/src/parse.ts

@@ -44,14 +44,8 @@ export interface SFCScriptBlock extends SFCBlock {
   setup?: string | boolean
   bindings?: BindingMetadata
   imports?: Record<string, ImportBinding>
-  /**
-   * import('\@babel/types').Statement
-   */
-  scriptAst?: any[]
-  /**
-   * import('\@babel/types').Statement
-   */
-  scriptSetupAst?: any[]
+  scriptAst?: import('@babel/types').Statement[]
+  scriptSetupAst?: import('@babel/types').Statement[]
 }
 
 export interface SFCStyleBlock extends SFCBlock {

packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap

@@ -61,7 +61,7 @@ exports[`array destructure 1`] = `
 
     let n = _ref(1), __$temp_1 = (useFoo()),
   a = _toRef(__$temp_1, 0),
-  b = _toRef(__$temp_1, 1, 1)
+  b = _toRef(__$temp_1, 1, 1);
     console.log(n.value, a.value, b.value)
     "
 `;
@@ -90,7 +90,7 @@ exports[`macro import alias and removal 1`] = `
     let a = _ref(1)
     const __$temp_1 = (useMouse()),
   x = _toRef(__$temp_1, 'x'),
-  y = _toRef(__$temp_1, 'y')
+  y = _toRef(__$temp_1, 'y');
     "
 `;
 
@@ -130,10 +130,10 @@ exports[`nested destructure 1`] = `
 "import { toRef as _toRef } from 'vue'
 
     let __$temp_1 = (useFoo()),
-  b = _toRef(__$temp_1[0].a, 'b')
+  b = _toRef(__$temp_1[0].a, 'b');
     let __$temp_2 = (useBar()),
   d = _toRef(__$temp_2.c, 0),
-  e = _toRef(__$temp_2.c, 1)
+  e = _toRef(__$temp_2.c, 1);
     console.log(b.value, d.value, e.value)
     "
 `;
@@ -183,9 +183,9 @@ exports[`object destructure 1`] = `
   c = _toRef(__$temp_1, 'b'),
   d = _toRef(__$temp_1, 'd', 1),
   f = _toRef(__$temp_1, 'e', 2),
-  h = _toRef(__$temp_1, g)
+  h = _toRef(__$temp_1, g);
     let __$temp_2 = (useSomething(() => 1)),
-  foo = _toRef(__$temp_2, 'foo');
+  foo = _toRef(__$temp_2, 'foo');;
     console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
     "
 `;
@@ -194,7 +194,7 @@ exports[`object destructure w/ mid-path default values 1`] = `
 "import { toRef as _toRef } from 'vue'
 
     const __$temp_1 = (useFoo()),
-  b = _toRef((__$temp_1.a || { b: 123 }), 'b')
+  b = _toRef((__$temp_1.a || { b: 123 }), 'b');
     console.log(b.value)
   "
 `;

packages/reactivity-transform/src/reactivityTransform.ts

@@ -321,8 +321,8 @@ export function transformAST(
       s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
     }
 
+    let nameId: Identifier | undefined
     for (const p of pattern.properties) {
-      let nameId: Identifier | undefined
       let key: Expression | string | undefined
       let defaultValue: Expression | undefined
       if (p.type === 'ObjectProperty') {
@@ -391,6 +391,9 @@ export function transformAST(
         )
       }
     }
+    if (nameId) {
+      s.appendLeft(call.end! + offset, ';')
+    }
   }
 
   function processRefArrayPattern(
@@ -405,10 +408,10 @@ export function transformAST(
       s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
     }
 
+    let nameId: Identifier | undefined
     for (let i = 0; i < pattern.elements.length; i++) {
       const e = pattern.elements[i]
       if (!e) continue
-      let nameId: Identifier | undefined
       let defaultValue: Expression | undefined
       if (e.type === 'Identifier') {
         // [a] --> [__a]
@@ -438,6 +441,9 @@ export function transformAST(
         )
       }
     }
+    if (nameId) {
+      s.appendLeft(call.end! + offset, ';')
+    }
   }
 
   type PathSegmentAtom = Expression | string | number
@@ -545,7 +551,7 @@ export function transformAST(
         offset,
         `const __props_${publicKey} = ${helper(
           `toRef`
-        )}(__props, '${publicKey}')\n`
+        )}(__props, '${publicKey}');\n`
       )
     }
   }

packages/reactivity/src/index.ts

@@ -28,6 +28,7 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
+  Raw,
   ReactiveFlags,
   DeepReadonly,
   ShallowReactive,

packages/reactivity/src/reactive.ts

@@ -241,9 +241,9 @@ export function toRaw<T>(observed: T): T {
   return raw ? toRaw(raw) : observed
 }
 
-export function markRaw<T extends object>(
-  value: T
-): T & { [RawSymbol]?: true } {
+export type Raw<T> = T & { [RawSymbol]?: true }
+
+export function markRaw<T extends object>(value: T): Raw<T> {
   def(value, ReactiveFlags.SKIP, true)
   return value
 }

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

@@ -242,7 +242,7 @@ describe('directives', () => {
       expect(root.children[0]).toBe(el)
 
       // node should not have been updated yet
-      // expect(el.children[0].text).toBe(`${count.value - 1}`)
+      expect(el.children[0].text).toBe(`${count.value - 1}`)
 
       assertBindings(binding)
 
@@ -421,4 +421,21 @@ describe('directives', () => {
     render(h(App), root)
     expect(res!).toBe('Test')
   })
+
+  test('should not throw with unknown directive', async () => {
+    const d1 = {
+      mounted: jest.fn()
+    }
+    const App = {
+      name: 'App',
+      render() {
+        // simulates the code generated on an unknown directive
+        return withDirectives(h('div'), [[undefined], [d1]])
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(d1.mounted).toHaveBeenCalled()
+  })
 })