From 44069ab6e8329c085acebd9cac26cbb3fabff00e Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 6 Apr 2021 16:36:33 +0800
Subject: [PATCH 1/3] refactor: the assets resolution of the script setup

---
 .../compiler-core/__tests__/codegen.spec.ts   | 17 +++++++-
 .../transforms/transformElement.spec.ts       | 22 ++++++----
 packages/compiler-core/src/ast.ts             |  6 +--
 packages/compiler-core/src/codegen.ts         | 15 +++++--
 packages/compiler-core/src/transform.ts       | 18 +++++---
 .../src/transforms/transformElement.ts        | 33 +++++++++++---
 .../__snapshots__/compileScript.spec.ts.snap  | 18 +++++---
 .../__tests__/compileScript.spec.ts           | 22 +++++++---
 .../src/transforms/ssrTransformComponent.ts   |  2 +-
 .../__tests__/helpers/resolveAssets.spec.ts   | 43 +++++++++++++++++++
 .../runtime-core/src/helpers/resolveAssets.ts | 19 +++++---
 11 files changed, 167 insertions(+), 48 deletions(-)

diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 75001f94aff..a49e6d335b9 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -35,6 +35,7 @@ import {
 } from '../src/runtimeHelpers'
 import { createElementWithCodegen, genFlagText } from './testUtils'
 import { PatchFlags } from '@vue/shared'
+import { AssetData } from '../src/transform'
 
 function createRoot(options: Partial<RootNode> = {}): RootNode {
   return {
@@ -53,6 +54,13 @@ function createRoot(options: Partial<RootNode> = {}): RootNode {
   }
 }
 
+function createAsset(name: string): AssetData {
+  return {
+    name,
+    warnMissing: true
+  }
+}
+
 describe('compiler: codegen', () => {
   test('module mode preamble', () => {
     const root = createRoot({
@@ -126,8 +134,13 @@ describe('compiler: codegen', () => {
 
   test('assets + temps', () => {
     const root = createRoot({
-      components: [`Foo`, `bar-baz`, `barbaz`, `Qux__self`],
-      directives: [`my_dir_0`, `my_dir_1`],
+      components: [
+        createAsset(`Foo`),
+        createAsset(`bar-baz`),
+        createAsset(`barbaz`),
+        createAsset(`Qux__self`)
+      ],
+      directives: [createAsset(`my_dir_0`), createAsset(`my_dir_1`)],
       temps: 3
     })
     const { code } = generate(root, { mode: 'function' })
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 33fdb7dba19..882b5d10a92 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -69,7 +69,7 @@ describe('compiler: element transform', () => {
   test('import + resolve component', () => {
     const { root } = parseWithElementTransform(`<Foo/>`)
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
-    expect(root.components).toContain(`Foo`)
+    expect(root.components).toEqual([{ name: 'Foo', warnMissing: true }])
   })
 
   test('resolve implcitly self-referencing component', () => {
@@ -77,7 +77,9 @@ describe('compiler: element transform', () => {
       filename: `/foo/bar/Example.vue?vue&type=template`
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
-    expect(root.components).toContain(`Example__self`)
+    expect(root.components).toEqual([
+      { name: 'Example__self', warnMissing: true }
+    ])
   })
 
   test('resolve component from setup bindings', () => {
@@ -86,8 +88,8 @@ describe('compiler: element transform', () => {
         Example: BindingTypes.SETUP_MAYBE_REF
       }
     })
-    expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
-    expect(node.tag).toBe(`$setup["Example"]`)
+    expect(root.helpers).toContain(RESOLVE_COMPONENT)
+    expect(node.tag).toBe(`_component_Example`)
   })
 
   test('do not resolve component from non-script-setup bindings', () => {
@@ -99,7 +101,7 @@ describe('compiler: element transform', () => {
       bindingMetadata
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
-    expect(root.components).toContain(`Example`)
+    expect(root.components).toEqual([{ name: 'Example', warnMissing: true }])
   })
 
   test('static props', () => {
@@ -476,7 +478,7 @@ describe('compiler: element transform', () => {
       }
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
-    expect(root.directives).toContain(`foo`)
+    expect(root.directives).toEqual([{ name: 'foo', warnMissing: true }])
     expect(node).toMatchObject({
       tag: `"div"`,
       props: undefined,
@@ -536,9 +538,11 @@ describe('compiler: element transform', () => {
       `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
-    expect(root.directives).toContain(`foo`)
-    expect(root.directives).toContain(`bar`)
-    expect(root.directives).toContain(`baz`)
+    expect(root.directives).toEqual([
+      { name: 'foo', warnMissing: true },
+      { name: 'bar', warnMissing: true },
+      { name: 'baz', warnMissing: true }
+    ])
 
     expect(node).toMatchObject({
       directives: {
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index df843520209..7d17ed96458 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -11,7 +11,7 @@ import {
   WITH_DIRECTIVES
 } from './runtimeHelpers'
 import { PropsExpression } from './transforms/transformElement'
-import { ImportItem, TransformContext } from './transform'
+import { ImportItem, TransformContext, AssetData } from './transform'
 
 // Vue template is a platform-agnostic superset of HTML (syntax only).
 // More namespaces like SVG and MathML are declared by platform specific
@@ -101,8 +101,8 @@ export interface RootNode extends Node {
   type: NodeTypes.ROOT
   children: TemplateChildNode[]
   helpers: symbol[]
-  components: string[]
-  directives: string[]
+  components: AssetData[]
+  directives: AssetData[]
   hoists: (JSChildNode | null)[]
   imports: ImportItem[]
   cached: number
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 6367743d8bc..1591f6412c2 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -53,7 +53,7 @@ import {
   WITH_CTX,
   RESOLVE_FILTER
 } from './runtimeHelpers'
-import { ImportItem } from './transform'
+import { AssetData, ImportItem } from './transform'
 
 const PURE_ANNOTATION = `/*#__PURE__*/`
 const WITH_ID = `_withId`
@@ -464,7 +464,7 @@ function genModulePreamble(
 }
 
 function genAssets(
-  assets: string[],
+  assets: AssetData[],
   type: 'component' | 'directive' | 'filter',
   { helper, push, newline }: CodegenContext
 ) {
@@ -476,15 +476,22 @@ function genAssets(
         : RESOLVE_DIRECTIVE
   )
   for (let i = 0; i < assets.length; i++) {
-    let id = assets[i]
+    const data = assets[i]
+    let id = data.name
     // potential component implicit self-reference inferred from SFC filename
     const maybeSelfReference = id.endsWith('__self')
     if (maybeSelfReference) {
       id = id.slice(0, -6)
     }
+    const needFallbackArg = !!data.fallback
+    const needWarnArg = needFallbackArg || !data.warnMissing
+    const needMaybeSelfReferenceArg =
+      type === 'component' && (needWarnArg || maybeSelfReference)
     push(
       `const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${
-        maybeSelfReference ? `, true` : ``
+        needMaybeSelfReferenceArg ? `, ${JSON.stringify(data.warnMissing)}` : ``
+      }${needWarnArg ? `, ${JSON.stringify(data.warnMissing)}` : ``}${
+        needFallbackArg ? `, ${data.fallback}` : ``
       })`
     )
     if (i < assets.length - 1) {
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index add7ea13c4b..0ce29f71cfd 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -83,6 +83,12 @@ export interface ImportItem {
   path: string
 }
 
+export interface AssetData {
+  name: string
+  warnMissing: boolean
+  fallback?: string
+}
+
 export interface TransformContext
   extends Required<
       Omit<TransformOptions, 'filename' | keyof CompilerCompatOptions>
@@ -91,8 +97,8 @@ export interface TransformContext
   selfName: string | null
   root: RootNode
   helpers: Map<symbol, number>
-  components: Set<string>
-  directives: Set<string>
+  components: Map<string, AssetData>
+  directives: Map<string, AssetData>
   hoists: (JSChildNode | null)[]
   imports: ImportItem[]
   temps: number
@@ -175,8 +181,8 @@ export function createTransformContext(
     // state
     root,
     helpers: new Map(),
-    components: new Set(),
-    directives: new Set(),
+    components: new Map(),
+    directives: new Map(),
     hoists: [],
     imports: [],
     constantCache: new Map(),
@@ -322,8 +328,8 @@ export function transform(root: RootNode, options: TransformOptions) {
   }
   // finalize meta information
   root.helpers = [...context.helpers.keys()]
-  root.components = [...context.components]
-  root.directives = [...context.directives]
+  root.components = [...context.components.values()]
+  root.directives = [...context.directives.values()]
   root.imports = context.imports
   root.hoists = context.hoists
   root.temps = context.temps
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index dba1a99b487..5c7c8f90ec2 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -277,7 +277,13 @@ export function resolveComponentType(
   if (!__BROWSER__) {
     const fromSetup = resolveSetupReference(tag, context)
     if (fromSetup) {
-      return fromSetup
+      context.helper(RESOLVE_COMPONENT)
+      context.components.set(tag, {
+        name: tag,
+        warnMissing: false,
+        fallback: fromSetup
+      })
+      return `${toValidAssetId(tag, `component`)}`
     }
   }
 
@@ -291,13 +297,19 @@ export function resolveComponentType(
     // codegen.ts has special check for __self postfix when generating
     // component imports, which will pass additional `maybeSelfReference` flag
     // to `resolveComponent`.
-    context.components.add(tag + `__self`)
+    context.components.set(tag, {
+      name: tag + `__self`,
+      warnMissing: true
+    })
     return toValidAssetId(tag, `component`)
   }
 
   // 5. user component (resolve)
   context.helper(RESOLVE_COMPONENT)
-  context.components.add(tag)
+  context.components.set(tag, {
+    name: tag,
+    warnMissing: true
+  })
   return toValidAssetId(tag, `component`)
 }
 
@@ -708,16 +720,23 @@ function buildDirectiveArgs(
     dirArgs.push(context.helperString(runtime))
   } else {
     // user directive.
+    context.helper(RESOLVE_DIRECTIVE)
     // see if we have directives exposed via <script setup>
     const fromSetup = !__BROWSER__ && resolveSetupReference(dir.name, context)
     if (fromSetup) {
-      dirArgs.push(fromSetup)
+      context.directives.set(dir.name, {
+        name: dir.name,
+        warnMissing: false,
+        fallback: fromSetup
+      })
     } else {
       // inject statement for resolving directive
-      context.helper(RESOLVE_DIRECTIVE)
-      context.directives.add(dir.name)
-      dirArgs.push(toValidAssetId(dir.name, `directive`))
+      context.directives.set(dir.name, {
+        name: dir.name,
+        warnMissing: true
+      })
     }
+    dirArgs.push(toValidAssetId(dir.name, `directive`))
   }
   const { loc } = dir
   if (dir.exp) dirArgs.push(dir.exp)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 7397228fb3b..02d961bdf18 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -214,7 +214,7 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -231,8 +231,10 @@ export default {
         function fn() {}
         
 return (_ctx, _cache) => {
+  const _component_Foo = _resolveComponent(\\"Foo\\", false, false, Foo)
+
   return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(Foo, null, {
+    _createVNode(_component_Foo, null, {
       default: _withCtx(() => [
         _createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */)
       ]),
@@ -247,7 +249,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = `
-"import { unref as _unref, createVNode as _createVNode, withDirectives as _withDirectives, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { resolveDirective as _resolveDirective, unref as _unref, createVNode as _createVNode, withDirectives as _withDirectives, resolveComponent as _resolveComponent, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -259,12 +261,16 @@ export default {
 
         
 return (_ctx, _cache) => {
+  const _component_ChildComp = _resolveComponent(\\"ChildComp\\", false, false, ChildComp)
+  const _component_some_other_comp = _resolveComponent(\\"some-other-comp\\", false, false, SomeOtherComp)
+  const _directive_my_dir = _resolveDirective(\\"my-dir\\", false, _unref(myDir))
+
   return (_openBlock(), _createBlock(_Fragment, null, [
     _withDirectives(_createVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
-      [_unref(myDir)]
+      [_directive_my_dir]
     ]),
-    _createVNode(ChildComp),
-    _createVNode(SomeOtherComp)
+    _createVNode(_component_ChildComp),
+    _createVNode(_component_some_other_comp)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index d74d7448aa9..46196d790ff 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -217,10 +217,19 @@ const myEmit = defineEmit(['foo', 'bar'])
         `,
         { inlineTemplate: true }
       )
-      expect(content).toMatch('[_unref(myDir)]')
-      expect(content).toMatch('_createVNode(ChildComp)')
+      expect(content).toMatch(
+        'const _directive_my_dir = _resolveDirective("my-dir", false, _unref(myDir))'
+      )
+      expect(content).toMatch('[_directive_my_dir]')
+      expect(content).toMatch(
+        'const _component_ChildComp = _resolveComponent("ChildComp", false, false, ChildComp)'
+      )
+      expect(content).toMatch('_createVNode(_component_ChildComp)')
       // kebab-case component support
-      expect(content).toMatch('_createVNode(SomeOtherComp)')
+      expect(content).toMatch(
+        'const _component_some_other_comp = _resolveComponent("some-other-comp", false, false, SomeOtherComp)'
+      )
+      expect(content).toMatch('_createVNode(_component_some_other_comp)')
       assertCode(content)
     })
 
@@ -244,8 +253,11 @@ const myEmit = defineEmit(['foo', 'bar'])
         `,
         { inlineTemplate: true }
       )
-      // no need to unref vue component import
-      expect(content).toMatch(`createVNode(Foo,`)
+
+      expect(content).toMatch(
+        `const _component_Foo = _resolveComponent(\"Foo\", false, false, Foo)`
+      )
+      expect(content).toMatch(`createVNode(_component_Foo,`)
       // #2699 should unref named imports from .vue
       expect(content).toMatch(`unref(bar)`)
       // should unref other imports
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index bcfc7a1e687..36a982dcd3c 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -307,7 +307,7 @@ function subTransform(
           parentContext.helpers.set(helperKey, value + parentCount)
         }
       } else {
-        ;(parentContext[key] as any).add(value)
+        ;(parentContext[key] as any).set(helperKey, value)
       }
     })
   })
diff --git a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
index 44434a256d5..7b00d1b7de5 100644
--- a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
@@ -240,4 +240,47 @@ describe('resolveAssets', () => {
     expect(directive3!).toBe(BarBaz)
     expect(directive4!).toBe(BarBaz)
   })
+
+  test('resolving with fallback', () => {
+    const FooBar = () => null
+    const FooBarFallBack = () => null
+    const BarBaz = { mounted: () => null }
+    const BarBazFallBack = { mounted: () => null }
+
+    let component1: Component | string
+    let component2: Component | string
+    let directive1: Directive
+    let directive2: Directive
+
+    const Root = {
+      components: {
+        FooBar: FooBar
+      },
+      directives: {
+        BarBaz: BarBaz
+      },
+      setup() {
+        return () => {
+          component1 = resolveComponent('FooBar', false, false, FooBarFallBack)!
+          component2 = resolveComponent(
+            'NoExist',
+            false,
+            false,
+            FooBarFallBack
+          )!
+          directive1 = resolveDirective('BarBaz', false, BarBazFallBack)!
+          directive2 = resolveDirective('NoExist', false, BarBazFallBack)!
+        }
+      }
+    }
+
+    const app = createApp(Root)
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+    expect(component1!).toBe(FooBar)
+    expect(component2!).toBe(FooBarFallBack)
+
+    expect(directive1!).toBe(BarBaz)
+    expect(directive2!).toBe(BarBazFallBack)
+  })
 })
diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts
index 119bdbe6d4f..3ffe431d627 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -21,9 +21,13 @@ export type AssetTypes = typeof COMPONENTS | typeof DIRECTIVES | typeof FILTERS
  */
 export function resolveComponent(
   name: string,
-  maybeSelfReference?: boolean
+  maybeSelfReference?: boolean,
+  warnMissing: boolean = true,
+  fallback: any = name
 ): ConcreteComponent | string {
-  return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
+  return (
+    resolveAsset(COMPONENTS, name, warnMissing, maybeSelfReference) || fallback
+  )
 }
 
 export const NULL_DYNAMIC_COMPONENT = Symbol()
@@ -43,8 +47,12 @@ export function resolveDynamicComponent(component: unknown): VNodeTypes {
 /**
  * @private
  */
-export function resolveDirective(name: string): Directive | undefined {
-  return resolveAsset(DIRECTIVES, name)
+export function resolveDirective(
+  name: string,
+  warnMissing: boolean = true,
+  fallback: Directive | undefined = undefined
+): Directive | undefined {
+  return resolveAsset(DIRECTIVES, name, warnMissing) || fallback
 }
 
 /**
@@ -68,7 +76,8 @@ function resolveAsset(
 // overload 2: directives
 function resolveAsset(
   type: typeof DIRECTIVES,
-  name: string
+  name: string,
+  warnMissing?: boolean
 ): Directive | undefined
 // implementation
 // overload 3: filters (compat only)

From 6a9f67e3d8341511f0d6dee3e119fade894096b1 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 6 Apr 2021 20:50:06 +0800
Subject: [PATCH 2/3] chore: typos

---
 packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
index 7b00d1b7de5..40c83c9ba03 100644
--- a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
@@ -263,13 +263,13 @@ describe('resolveAssets', () => {
         return () => {
           component1 = resolveComponent('FooBar', false, false, FooBarFallBack)!
           component2 = resolveComponent(
-            'NoExist',
+            'notExist',
             false,
             false,
             FooBarFallBack
           )!
           directive1 = resolveDirective('BarBaz', false, BarBazFallBack)!
-          directive2 = resolveDirective('NoExist', false, BarBazFallBack)!
+          directive2 = resolveDirective('notExist', false, BarBazFallBack)!
         }
       }
     }

From c3dd4ee1e986d65ef87da496cebd8f8cb9c6b003 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Sat, 8 May 2021 15:36:38 +0800
Subject: [PATCH 3/3] fix: tweak

---
 packages/compiler-core/src/ast.ts                    |  2 +-
 packages/compiler-core/src/compat/transformFilter.ts | 10 ++++++++--
 packages/compiler-core/src/transform.ts              |  6 +++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 7d17ed96458..dced665be22 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -111,7 +111,7 @@ export interface RootNode extends Node {
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement
 
   // v2 compat only
-  filters?: string[]
+  filters?: AssetData[]
 }
 
 export type ElementNode =
diff --git a/packages/compiler-core/src/compat/transformFilter.ts b/packages/compiler-core/src/compat/transformFilter.ts
index 8eaa81eb3f1..bbec7b9776e 100644
--- a/packages/compiler-core/src/compat/transformFilter.ts
+++ b/packages/compiler-core/src/compat/transformFilter.ts
@@ -180,12 +180,18 @@ function wrapFilter(
   context.helper(RESOLVE_FILTER)
   const i = filter.indexOf('(')
   if (i < 0) {
-    context.filters!.add(filter)
+    context.filters!.set(filter, {
+      name: filter,
+      warnMissing: true
+    })
     return `${toValidAssetId(filter, 'filter')}(${exp})`
   } else {
     const name = filter.slice(0, i)
     const args = filter.slice(i + 1)
-    context.filters!.add(name)
+    context.filters!.set(name, {
+      name,
+      warnMissing: true
+    })
     return `${toValidAssetId(name, 'filter')}(${exp}${
       args !== ')' ? ',' + args : args
     }`
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 0ce29f71cfd..a424d326986 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -126,7 +126,7 @@ export interface TransformContext
   constantCache: Map<TemplateChildNode, ConstantTypes>
 
   // 2.x Compat only
-  filters?: Set<string>
+  filters?: Map<string, AssetData>
 }
 
 export function createTransformContext(
@@ -299,7 +299,7 @@ export function createTransformContext(
   }
 
   if (__COMPAT__) {
-    context.filters = new Set()
+    context.filters = new Map()
   }
 
   function addId(id: string) {
@@ -336,7 +336,7 @@ export function transform(root: RootNode, options: TransformOptions) {
   root.cached = context.cached
 
   if (__COMPAT__) {
-    root.filters = [...context.filters!]
+    root.filters = [...context.filters!.values()]
   }
 }