wip: filters compat

packages/compiler-core/src/ast.ts

@@ -109,6 +109,9 @@ export interface RootNode extends Node {
   temps: number
   ssrHelpers?: symbol[]
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement
+
+  // v2 compat only
+  filters?: string[]
 }
 
 export type ElementNode =

packages/compiler-core/src/codegen.ts

@@ -50,7 +50,8 @@ import {
   CREATE_BLOCK,
   OPEN_BLOCK,
   CREATE_STATIC,
-  WITH_CTX
+  WITH_CTX,
+  RESOLVE_FILTER
 } from './runtimeHelpers'
 import { ImportItem } from './transform'
 
@@ -274,6 +275,12 @@ export function generate(
       newline()
     }
   }
+  if (__COMPAT__ && ast.filters && ast.filters.length) {
+    newline()
+    genAssets(ast.filters, 'filter', context)
+    newline()
+  }
+
   if (ast.temps > 0) {
     push(`let `)
     for (let i = 0; i < ast.temps; i++) {
@@ -458,11 +465,15 @@ function genModulePreamble(
 
 function genAssets(
   assets: string[],
-  type: 'component' | 'directive',
+  type: 'component' | 'directive' | 'filter',
   { helper, push, newline }: CodegenContext
 ) {
   const resolver = helper(
-    type === 'component' ? RESOLVE_COMPONENT : RESOLVE_DIRECTIVE
+    __COMPAT__ && type === 'filter'
+      ? RESOLVE_FILTER
+      : type === 'component'
+        ? RESOLVE_COMPONENT
+        : RESOLVE_DIRECTIVE
   )
   for (let i = 0; i < assets.length; i++) {
     let id = assets[i]

packages/compiler-core/src/compat/compatConfig.ts

@@ -22,7 +22,7 @@ export const enum CompilerDeprecationTypes {
   COMPILER_V_IF_V_FOR_PRECEDENCE = 'COMPILER_V_IF_V_FOR_PRECEDENCE',
   COMPILER_NATIVE_TEMPLATE = 'COMPILER_NATIVE_TEMPLATE',
   COMPILER_INLINE_TEMPLATE = 'COMPILER_INLINE_TEMPLATE',
-  COMPILER_FILTER = 'COMPILER_FILTER'
+  COMPILER_FILTERS = 'COMPILER_FILTER'
 }
 
 type DeprecationData = {
@@ -89,8 +89,11 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
     link: `https://v3.vuejs.org/guide/migration/inline-template-attribute.html`
   },
 
-  [CompilerDeprecationTypes.COMPILER_FILTER]: {
-    message: `filters have been removed in Vue 3.`,
+  [CompilerDeprecationTypes.COMPILER_FILTERS]: {
+    message:
+      `filters have been removed in Vue 3. ` +
+      `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
+      `Use method calls or computed properties instead.`,
     link: `https://v3.vuejs.org/guide/migration/filters.html`
   }
 }

packages/compiler-core/src/compat/transformFilter.ts

@@ -0,0 +1,194 @@
+import { RESOLVE_FILTER } from '../runtimeHelpers'
+import {
+  AttributeNode,
+  DirectiveNode,
+  NodeTransform,
+  NodeTypes,
+  SimpleExpressionNode,
+  toValidAssetId,
+  TransformContext
+} from '@vue/compiler-core'
+import {
+  CompilerDeprecationTypes,
+  isCompatEnabled,
+  warnDeprecation
+} from './compatConfig'
+import { ExpressionNode } from '../ast'
+
+const validDivisionCharRE = /[\w).+\-_$\]]/
+
+export const transformFilter: NodeTransform = (node, context) => {
+  if (!isCompatEnabled(CompilerDeprecationTypes.COMPILER_FILTERS, context)) {
+    return
+  }
+
+  if (node.type === NodeTypes.INTERPOLATION) {
+    // filter rewrite is applied before expression transform so only
+    // simple expressions are possible at this stage
+    rewriteFilter(node.content, context)
+  }
+
+  if (node.type === NodeTypes.ELEMENT) {
+    node.props.forEach((prop: AttributeNode | DirectiveNode) => {
+      if (
+        prop.type === NodeTypes.DIRECTIVE &&
+        prop.name !== 'for' &&
+        prop.exp
+      ) {
+        rewriteFilter(prop.exp, context)
+      }
+    })
+  }
+}
+
+function rewriteFilter(node: ExpressionNode, context: TransformContext) {
+  if (node.type === NodeTypes.SIMPLE_EXPRESSION) {
+    parseFilter(node, context)
+  } else {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i]
+      if (typeof child !== 'object') continue
+      if (child.type === NodeTypes.SIMPLE_EXPRESSION) {
+        parseFilter(child, context)
+      } else if (child.type === NodeTypes.COMPOUND_EXPRESSION) {
+        rewriteFilter(node, context)
+      } else if (child.type === NodeTypes.INTERPOLATION) {
+        rewriteFilter(child.content, context)
+      }
+    }
+  }
+}
+
+function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
+  const exp = node.content
+  let inSingle = false
+  let inDouble = false
+  let inTemplateString = false
+  let inRegex = false
+  let curly = 0
+  let square = 0
+  let paren = 0
+  let lastFilterIndex = 0
+  let c,
+    prev,
+    i: number,
+    expression,
+    filters: string[] = []
+
+  for (i = 0; i < exp.length; i++) {
+    prev = c
+    c = exp.charCodeAt(i)
+    if (inSingle) {
+      if (c === 0x27 && prev !== 0x5c) inSingle = false
+    } else if (inDouble) {
+      if (c === 0x22 && prev !== 0x5c) inDouble = false
+    } else if (inTemplateString) {
+      if (c === 0x60 && prev !== 0x5c) inTemplateString = false
+    } else if (inRegex) {
+      if (c === 0x2f && prev !== 0x5c) inRegex = false
+    } else if (
+      c === 0x7c && // pipe
+      exp.charCodeAt(i + 1) !== 0x7c &&
+      exp.charCodeAt(i - 1) !== 0x7c &&
+      !curly &&
+      !square &&
+      !paren
+    ) {
+      if (expression === undefined) {
+        // first filter, end of expression
+        lastFilterIndex = i + 1
+        expression = exp.slice(0, i).trim()
+      } else {
+        pushFilter()
+      }
+    } else {
+      switch (c) {
+        case 0x22:
+          inDouble = true
+          break // "
+        case 0x27:
+          inSingle = true
+          break // '
+        case 0x60:
+          inTemplateString = true
+          break // `
+        case 0x28:
+          paren++
+          break // (
+        case 0x29:
+          paren--
+          break // )
+        case 0x5b:
+          square++
+          break // [
+        case 0x5d:
+          square--
+          break // ]
+        case 0x7b:
+          curly++
+          break // {
+        case 0x7d:
+          curly--
+          break // }
+      }
+      if (c === 0x2f) {
+        // /
+        let j = i - 1
+        let p
+        // find first non-whitespace prev char
+        for (; j >= 0; j--) {
+          p = exp.charAt(j)
+          if (p !== ' ') break
+        }
+        if (!p || !validDivisionCharRE.test(p)) {
+          inRegex = true
+        }
+      }
+    }
+  }
+
+  if (expression === undefined) {
+    expression = exp.slice(0, i).trim()
+  } else if (lastFilterIndex !== 0) {
+    pushFilter()
+  }
+
+  function pushFilter() {
+    filters.push(exp.slice(lastFilterIndex, i).trim())
+    lastFilterIndex = i + 1
+  }
+
+  if (
+    filters.length &&
+    warnDeprecation(
+      CompilerDeprecationTypes.COMPILER_FILTERS,
+      context,
+      node.loc
+    )
+  ) {
+    for (i = 0; i < filters.length; i++) {
+      expression = wrapFilter(expression, filters[i], context)
+    }
+    node.content = expression
+  }
+}
+
+function wrapFilter(
+  exp: string,
+  filter: string,
+  context: TransformContext
+): string {
+  context.helper(RESOLVE_FILTER)
+  const i = filter.indexOf('(')
+  if (i < 0) {
+    context.filters!.add(filter)
+    return `${toValidAssetId(filter, 'filter')}(${exp})`
+  } else {
+    const name = filter.slice(0, i)
+    const args = filter.slice(i + 1)
+    context.filters!.add(name)
+    return `${toValidAssetId(name, 'filter')}(${exp}${
+      args !== ')' ? ',' + args : args
+    }`
+  }
+}

packages/compiler-core/src/compile.ts

@@ -15,6 +15,7 @@ import { trackSlotScopes, trackVForSlotScopes } from './transforms/vSlot'
 import { transformText } from './transforms/transformText'
 import { transformOnce } from './transforms/vOnce'
 import { transformModel } from './transforms/vModel'
+import { transformFilter } from './compat/transformFilter'
 import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
 
 export type TransformPreset = [
@@ -30,6 +31,7 @@ export function getBaseTransformPreset(
       transformOnce,
       transformIf,
       transformFor,
+      ...(__COMPAT__ ? [transformFilter] : []),
       ...(!__BROWSER__ && prefixIdentifiers
         ? [
             // order is important

packages/compiler-core/src/runtimeHelpers.ts

@@ -14,6 +14,7 @@ export const RESOLVE_DYNAMIC_COMPONENT = Symbol(
   __DEV__ ? `resolveDynamicComponent` : ``
 )
 export const RESOLVE_DIRECTIVE = Symbol(__DEV__ ? `resolveDirective` : ``)
+export const RESOLVE_FILTER = Symbol(__DEV__ ? `resolveFilter` : ``)
 export const WITH_DIRECTIVES = Symbol(__DEV__ ? `withDirectives` : ``)
 export const RENDER_LIST = Symbol(__DEV__ ? `renderList` : ``)
 export const RENDER_SLOT = Symbol(__DEV__ ? `renderSlot` : ``)
@@ -50,6 +51,7 @@ export const helperNameMap: any = {
   [RESOLVE_COMPONENT]: `resolveComponent`,
   [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
   [RESOLVE_DIRECTIVE]: `resolveDirective`,
+  [RESOLVE_FILTER]: `resolveFilter`,
   [WITH_DIRECTIVES]: `withDirectives`,
   [RENDER_LIST]: `renderList`,
   [RENDER_SLOT]: `renderSlot`,

packages/compiler-core/src/transform.ts

@@ -118,6 +118,9 @@ export interface TransformContext
   hoist(exp: JSChildNode): SimpleExpressionNode
   cache<T extends JSChildNode>(exp: T, isVNode?: boolean): CacheExpression | T
   constantCache: Map<TemplateChildNode, ConstantTypes>
+
+  // 2.x Compat only
+  filters?: Set<string>
 }
 
 export function createTransformContext(
@@ -289,6 +292,10 @@ export function createTransformContext(
     }
   }
 
+  if (__COMPAT__) {
+    context.filters = new Set()
+  }
+
   function addId(id: string) {
     const { identifiers } = context
     if (identifiers[id] === undefined) {
@@ -321,6 +328,10 @@ export function transform(root: RootNode, options: TransformOptions) {
   root.hoists = context.hoists
   root.temps = context.temps
   root.cached = context.cached
+
+  if (__COMPAT__) {
+    root.filters = [...context.filters!]
+  }
 }
 
 function createRootCodegen(root: RootNode, context: TransformContext) {

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

@@ -254,6 +254,11 @@ export function processExpression(
       parent && parentStack.push(parent)
       if (node.type === 'Identifier') {
         if (!isDuplicate(node)) {
+          // v2 wrapped filter call
+          if (__COMPAT__ && node.name.startsWith('_filter_')) {
+            return
+          }
+
           const needPrefix = shouldPrefix(node, parent!, parentStack)
           if (!knownIds[node.name] && needPrefix) {
             if (isStaticProperty(parent!) && parent.shorthand) {

packages/compiler-core/src/utils.ts

@@ -271,7 +271,7 @@ export function injectProp(
 
 export function toValidAssetId(
   name: string,
-  type: 'component' | 'directive'
+  type: 'component' | 'directive' | 'filter'
 ): string {
   return `_${type}_${name.replace(/[^\w]/g, '_')}`
 }