Merge branch 'main' into GH-12964

Author: edison1105

packages-private/dts-test/directives.test-d.ts

@@ -13,7 +13,7 @@ type ExtractBinding<T> = T extends (
 declare function testDirective<
   Value,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 >(): ExtractBinding<Directive<any, Value, Modifiers, Arg>>
 
 describe('vmodel', () => {
@@ -44,15 +44,37 @@ describe('custom', () => {
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<number, 'a' | 'b', 'Argx'>())
 
   expectType<{
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<string, 'a' | 'b', 'Arg'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b', HTMLElement>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+    // @ts-expect-error
+  }>(testDirective<number, 'a' | 'b', string>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b'>())
 })

packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

@@ -12,6 +12,24 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`stringify static html > eligible content + v-once node 1`] = `
+"const { setBlockTracking: _setBlockTracking, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _cache[0] || (
+      _setBlockTracking(-1, true),
+      (_cache[0] = _createElementVNode("div", null, [
+        _createTextVNode(_toDisplayString(_ctx.msg), 1 /* TEXT */)
+      ])).cacheIndex = 0,
+      _setBlockTracking(1),
+      _cache[0]
+    ),
+    _cache[1] || (_cache[1] = _createStaticVNode("<span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span>", 5))
+  ]))
+}"
+`;
+
 exports[`stringify static html > escape 1`] = `
 "const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 

packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts

@@ -525,4 +525,14 @@ describe('stringify static html', () => {
 
     expect(code).toMatchSnapshot()
   })
+
+  test('eligible content + v-once node', () => {
+    const { code } = compileWithStringify(
+      `<div>
+        <div v-once>{{ msg }}</div>
+        ${repeat(`<span class="foo">foo</span>`, StringifyThresholds.ELEMENT_WITH_BINDING_COUNT)}
+      </div>`,
+    )
+    expect(code).toMatchSnapshot()
+  })
 })

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -17,6 +17,7 @@ import {
   type TextCallNode,
   type TransformContext,
   createCallExpression,
+  findDir,
   isStaticArgOf,
 } from '@vue/compiler-core'
 import {
@@ -213,6 +214,11 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
     return false
   }
 
+  // v-once nodes should not be stringified
+  if (node.type === NodeTypes.ELEMENT && findDir(node, 'once', true)) {
+    return false
+  }
+
   if (node.type === NodeTypes.TEXT_CALL) {
     return [1, 0]
   }

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

@@ -12,6 +12,27 @@ export function render(_ctx, _cache) {
 }"
 `;
 
+exports[`prefixing props edge case in inline mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock } from "vue"
+
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    Foo: { type: Object, required: true }
+  },
+  setup(__props: any) {
+
+    
+  
+return (_ctx: any,_cache: any) => {
+  return (_openBlock(), _createBlock(_unref(__props["Foo"]).Bar))
+}
+}
+
+})"
+`;
+
 exports[`should not hoist srcset URLs in SSR mode 1`] = `
 "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
 import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"

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

@@ -149,6 +149,17 @@ describe('resolveType', () => {
     })
   })
 
+  test('TSPropertySignature with ignore', () => {
+    expect(
+      resolve(`
+      type Foo = string
+      defineProps<{ foo: /* @vue-ignore */ Foo }>()
+    `).props,
+    ).toStrictEqual({
+      foo: ['Unknown'],
+    })
+  })
+
   // #7553
   test('union type', () => {
     expect(
@@ -731,6 +742,22 @@ describe('resolveType', () => {
     })
   })
 
+  test('TSMappedType with indexed access', () => {
+    const { props } = resolve(
+      `
+      type Prettify<T> = { [K in keyof T]: T[K] } & {}
+      type Side = 'top' | 'right' | 'bottom' | 'left'
+      type AlignedPlacement = \`\${Side}-\${Alignment}\`
+      type Alignment = 'start' | 'end'
+      type Placement = Prettify<Side | AlignedPlacement>
+      defineProps<{placement?: Placement}>()
+    `,
+    )
+    expect(props).toStrictEqual({
+      placement: ['String', 'Object'],
+    })
+  })
+
   describe('type alias declaration', () => {
     // #13240
     test('function type', () => {

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

@@ -512,3 +512,22 @@ test('non-identifier expression in legacy filter syntax', () => {
     babelParse(compilationResult.code, { sourceType: 'module' })
   }).not.toThrow()
 })
+
+test('prefixing props edge case in inline mode', () => {
+  const src = `
+  <script setup lang="ts">
+    defineProps<{ Foo: { Bar: unknown } }>()
+  </script>
+  <template>
+    <Foo.Bar/>
+  </template>
+  `
+  const { descriptor } = parse(src)
+  const { content } = compileScript(descriptor, {
+    id: 'xxx',
+    inlineTemplate: true,
+  })
+
+  expect(content).toMatchSnapshot()
+  expect(content).toMatch(`__props["Foo"]).Bar`)
+})

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

@@ -109,8 +109,8 @@ describe('CSS vars injection', () => {
       { isProd: true },
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
-  "4003f1a6": (_ctx.color),
-  "41b6490a": (_ctx.font.size)
+  "v4003f1a6": (_ctx.color),
+  "v41b6490a": (_ctx.font.size)
 }))}`)
 
     const { code } = compileStyle({
@@ -124,8 +124,8 @@ describe('CSS vars injection', () => {
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
-              color: var(--4003f1a6);
-              font-size: var(--41b6490a);
+              color: var(--v4003f1a6);
+              font-size: var(--v41b6490a);
       }"
     `)
   })

packages/compiler-sfc/src/compileScript.ts

@@ -833,6 +833,8 @@ export function compileScript(
   let templateMap
   // 9. generate return statement
   let returned
+  // ensure props bindings register before compile template in inline mode
+  const propsDecl = genRuntimeProps(ctx)
   if (
     !options.inlineTemplate ||
     (!sfc.template && ctx.hasDefaultExportRender)
@@ -965,7 +967,6 @@ export function compileScript(
     runtimeOptions += `\n  __ssrInlineRender: true,`
   }
 
-  const propsDecl = genRuntimeProps(ctx)
   if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
 
   const emitsDecl = genRuntimeEmits(ctx)

packages/compiler-sfc/src/script/resolveType.ts

@@ -1515,6 +1515,13 @@ export function inferRuntimeType(
   isKeyOf = false,
   typeParameters?: Record<string, Node>,
 ): string[] {
+  if (
+    node.leadingComments &&
+    node.leadingComments.some(c => c.value.includes('@vue-ignore'))
+  ) {
+    return [UNKNOWN_TYPE]
+  }
+
   try {
     switch (node.type) {
       case 'TSStringKeyword':
@@ -1781,6 +1788,47 @@ export function inferRuntimeType(
           typeParameters,
         ).filter(t => t !== UNKNOWN_TYPE)
       }
+      case 'TSMappedType': {
+        // only support { [K in keyof T]: T[K] }
+        const { typeAnnotation, typeParameter } = node
+        if (
+          typeAnnotation &&
+          typeAnnotation.type === 'TSIndexedAccessType' &&
+          typeParameter &&
+          typeParameter.constraint &&
+          typeParameters
+        ) {
+          const constraint = typeParameter.constraint
+          if (
+            constraint.type === 'TSTypeOperator' &&
+            constraint.operator === 'keyof' &&
+            constraint.typeAnnotation &&
+            constraint.typeAnnotation.type === 'TSTypeReference' &&
+            constraint.typeAnnotation.typeName.type === 'Identifier'
+          ) {
+            const typeName = constraint.typeAnnotation.typeName.name
+            const index = typeAnnotation.indexType
+            const obj = typeAnnotation.objectType
+            if (
+              obj &&
+              obj.type === 'TSTypeReference' &&
+              obj.typeName.type === 'Identifier' &&
+              obj.typeName.name === typeName &&
+              index &&
+              index.type === 'TSTypeReference' &&
+              index.typeName.type === 'Identifier' &&
+              index.typeName.name === typeParameter.name
+            ) {
+              const targetType = typeParameters[typeName]
+              if (targetType) {
+                return inferRuntimeType(ctx, targetType, scope)
+              }
+            }
+          }
+        }
+
+        return [UNKNOWN_TYPE]
+      }
 
       case 'TSEnumDeclaration':
         return inferEnumType(node)