refactor(compiler-vapor): remove @babel/types to reduce bundle sizee

Author: zhiyuanzmj

packages/compiler/package.json

@@ -41,9 +41,11 @@
   },
   "dependencies": {
     "@babel/parser": "catalog:",
-    "@babel/types": "catalog:",
     "@vue/shared": "catalog:",
     "ast-kit": "catalog:",
     "source-map-js": "catalog:"
+  },
+  "devDependencies": {
+    "@babel/types": "catalog:"
   }
 }

packages/compiler/src/generators/for.ts

@@ -1,10 +1,4 @@
 import { parseExpression } from '@babel/parser'
-import {
-  isNodesEquivalent,
-  type Expression,
-  type Identifier,
-  type Node,
-} from '@babel/types'
 import { extend, isGloballyAllowed } from '@vue/shared'
 import { walkAST, walkIdentifiers } from 'ast-kit'
 import {
@@ -23,6 +17,7 @@ import type { BlockIRNode, ForIRNode, IREffect } from '../ir'
 import { genBlockContent } from './block'
 import { genExpression } from './expression'
 import { genOperation } from './operation'
+import type { Expression, Identifier, Node } from '@babel/types'
 
 /**
  * Flags to optimize vapor `createFor` runtime behavior, shared between the
@@ -114,6 +109,7 @@ export function genFor(
     render,
     keyProp,
     idMap,
+    context.ir.source,
   )
   const selectorDeclarations: CodeFragment[] = []
   const selectorSetup: CodeFragment[] = []
@@ -331,6 +327,7 @@ function matchPatterns(
   render: BlockIRNode,
   keyProp: SimpleExpressionNode | undefined,
   idMap: Record<string, string | SimpleExpressionNode | null>,
+  source: string,
 ) {
   const selectorPatterns: NonNullable<
     ReturnType<typeof matchSelectorPattern>
@@ -341,12 +338,21 @@ function matchPatterns(
 
   render.effect = render.effect.filter((effect) => {
     if (keyProp !== undefined) {
-      const selector = matchSelectorPattern(effect, keyProp.ast, idMap)
+      const selector = matchSelectorPattern(
+        effect,
+        keyProp.content,
+        idMap,
+        source,
+      )
       if (selector) {
         selectorPatterns.push(selector)
         return false
       }
-      const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast)
+      const keyOnly = matchKeyOnlyBindingPattern(
+        effect,
+        keyProp.content,
+        source,
+      )
       if (keyOnly) {
         keyOnlyBindingPatterns.push(keyOnly)
         return false
@@ -364,7 +370,8 @@ function matchPatterns(
 
 function matchKeyOnlyBindingPattern(
   effect: IREffect,
-  keyAst: any,
+  key: string,
+  source: string,
 ):
   | {
       effect: IREffect
@@ -376,7 +383,7 @@ function matchKeyOnlyBindingPattern(
     if (
       typeof ast === 'object' &&
       ast !== null &&
-      isKeyOnlyBinding(ast, keyAst)
+      isKeyOnlyBinding(ast, key, source)
     ) {
       return { effect }
     }
@@ -385,8 +392,9 @@ function matchKeyOnlyBindingPattern(
 
 function matchSelectorPattern(
   effect: IREffect,
-  keyAst: any,
+  key: string,
   idMap: Record<string, string | SimpleExpressionNode | null>,
+  source: string,
 ):
   | {
       effect: IREffect
@@ -414,8 +422,8 @@ function matchSelectorPattern(
               [left, right],
               [right, left],
             ]) {
-              const aIsKey = isKeyOnlyBinding(a, keyAst)
-              const bIsKey = isKeyOnlyBinding(b, keyAst)
+              const aIsKey = isKeyOnlyBinding(a, key, source)
+              const bIsKey = isKeyOnlyBinding(b, key, source)
               const bVars = analyzeVariableScopes(b, idMap)
               if (aIsKey && !bIsKey && !bVars.locals.length) {
                 matcheds.push([a, b])
@@ -482,8 +490,8 @@ function matchSelectorPattern(
         [left, right],
         [right, left],
       ]) {
-        const aIsKey = isKeyOnlyBinding(a, keyAst)
-        const bIsKey = isKeyOnlyBinding(b, keyAst)
+        const aIsKey = isKeyOnlyBinding(a, key, source)
+        const bIsKey = isKeyOnlyBinding(b, key, source)
         const bVars = analyzeVariableScopes(b, idMap)
         if (aIsKey && !bIsKey && !bVars.locals.length) {
           return {
@@ -535,11 +543,11 @@ function analyzeVariableScopes(
   return { globals, locals }
 }
 
-function isKeyOnlyBinding(expr: Node, keyAst: any) {
+function isKeyOnlyBinding(expr: Node, key: string, source: string) {
   let only = true
   walkAST(expr, {
     enter(node) {
-      if (isNodesEquivalent(node, keyAst)) {
+      if (source.slice(node.start!, node.end!) === key) {
         this.skip()
         return
       }

packages/compiler/src/transforms/transformText.ts

@@ -139,7 +139,7 @@ function processTextContainer(children: TextLike[], context: TransformContext) {
   const values = createTextLikeExpressions(children, context)
   const literals = values.map(getLiteralExpressionValue)
   if (literals.every((l) => l != null)) {
-    context.childrenTemplate = literals.map((l) => escapeHtml(String(l)))
+    context.childrenTemplate = literals
   } else {
     context.childrenTemplate = [' ']
     context.registerOperation({

packages/compiler/src/utils/expression.ts

@@ -43,7 +43,7 @@ export function isConstantExpression(exp: SimpleExpressionNode) {
 
 export function getLiteralExpressionValue(
   exp: SimpleExpressionNode,
-): number | string | boolean | null {
+): string | null {
   if (exp.ast) {
     const res = getTextLikeValue(exp.ast)
     if (res != null) {

packages/compiler/src/utils/transform.ts

@@ -1,12 +1,3 @@
-import {
-  jsxClosingFragment,
-  jsxExpressionContainer,
-  jsxFragment,
-  jsxOpeningFragment,
-  type Expression,
-  type JSXElement,
-  type JSXFragment,
-} from '@babel/types'
 import {
   DynamicFlag,
   type BlockIRNode,
@@ -15,6 +6,7 @@ import {
 } from '../ir/index'
 import { isTemplate } from '../utils'
 import type { TransformContext } from '../transform'
+import type { Expression, JSXElement, JSXFragment } from '@babel/types'
 
 export function newDynamic(): IRDynamicInfo {
   return {
@@ -47,12 +39,24 @@ export function createBranch(
   return [branch, exitBlock]
 }
 
-export function wrapFragment(node: JSXElement | JSXFragment | Expression) {
+export function wrapFragment(
+  node: JSXElement | JSXFragment | Expression,
+): JSXFragment | JSXElement {
   if (node.type === 'JSXFragment' || isTemplate(node)) {
-    return node
+    return node as JSXFragment
   }
 
-  return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [
-    node.type === 'JSXElement' ? node : jsxExpressionContainer(node),
-  ])
+  return {
+    type: 'JSXFragment',
+    openingFragment: { type: 'JSXOpeningFragment' },
+    closingFragment: { type: 'JSXClosingFragment' },
+    children: [
+      node.type === 'JSXElement'
+        ? node
+        : {
+            type: 'JSXExpressionContainer',
+            expression: node,
+          },
+    ],
+  }
 }