refactor(compiler-vapor): dedupe gen props

vuejs · Apr 28, 2024 · 31e2c91 · 31e2c91
1 parent f2499cd
commit 31e2c91
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 102 deletions.
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
@@ -1,6 +1,6 @@
 import { camelize, extend, isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
-import type { CreateComponentIRNode, IRProp } from '../ir'
+import type { CreateComponentIRNode, IRProp, IRProps } from '../ir'
 import {
   type CodeFragment,
   NEWLINE,
@@ -21,11 +21,11 @@ export function genCreateComponent(
   oper: CreateComponentIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const { helper, vaporHelper } = context
+  const { vaporHelper } = context
 
   const tag = genTag()
   const isRoot = oper.root
-  const rawProps = genRawProps()
+  const rawProps = genRawProps(oper.props, context)
 
   return [
     NEWLINE,
@@ -49,63 +49,68 @@ export function genCreateComponent(
       )
     }
   }
+}
 
-  function genRawProps() {
-    const props = oper.props
-      .map(props => {
-        if (isArray(props)) {
-          if (!props.length) return
-          return genStaticProps(props)
-        } else {
-          let expr = genExpression(props.value, context)
-          if (props.handler) expr = genCall(helper('toHandlers'), expr)
-          return ['() => (', ...expr, ')']
-        }
-      })
-      .filter(Boolean)
-    if (props.length) {
-      return genMulti(SEGMENTS_ARRAY, ...props)
-    }
+export function genRawProps(props: IRProps[], context: CodegenContext) {
+  const frag = props
+    .map(props => {
+      if (isArray(props)) {
+        if (!props.length) return
+        return genStaticProps(props, context)
+      } else {
+        let expr = genExpression(props.value, context)
+        if (props.handler) expr = genCall(context.helper('toHandlers'), expr)
+        return ['() => (', ...expr, ')']
+      }
+    })
+    .filter(
+      Boolean as any as (v: CodeFragment[] | undefined) => v is CodeFragment[],
+    )
+  if (frag.length) {
+    return genMulti(SEGMENTS_ARRAY, ...frag)
   }
+}
 
-  function genStaticProps(props: IRProp[]) {
-    return genMulti(
-      SEGMENTS_OBJECT_NEWLINE,
-      ...props.map(prop => {
-        return [
-          ...genPropKey(prop, context),
-          ': ',
-          ...(prop.handler
-            ? genEventHandler(context, prop.values[0])
-            : ['() => (', ...genExpression(prop.values[0], context), ')']),
-          ...(prop.model
-            ? [...genModelEvent(prop), ...genModelModifiers(prop)]
-            : []),
-        ]
-      }),
-    )
+export function genStaticProps(
+  props: IRProp[],
+  context: CodegenContext,
+): CodeFragment[] {
+  return genMulti(
+    SEGMENTS_OBJECT_NEWLINE,
+    ...props.map(prop => {
+      return [
+        ...genPropKey(prop, context),
+        ': ',
+        ...(prop.handler
+          ? genEventHandler(context, prop.values[0])
+          : ['() => (', ...genExpression(prop.values[0], context), ')']),
+        ...(prop.model
+          ? [...genModelEvent(prop), ...genModelModifiers(prop)]
+          : []),
+      ]
+    }),
+  )
 
-    function genModelEvent(prop: IRProp): CodeFragment[] {
-      const name = prop.key.isStatic
-        ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)]
-        : ['["onUpdate:" + ', ...genExpression(prop.key, context), ']']
-      const handler = genModelHandler(prop.values[0], context)
+  function genModelEvent(prop: IRProp): CodeFragment[] {
+    const name = prop.key.isStatic
+      ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)]
+      : ['["onUpdate:" + ', ...genExpression(prop.key, context), ']']
+    const handler = genModelHandler(prop.values[0], context)
 
-      return [',', NEWLINE, ...name, ': ', ...handler]
-    }
+    return [',', NEWLINE, ...name, ': ', ...handler]
+  }
 
-    function genModelModifiers(prop: IRProp): CodeFragment[] {
-      const { key, modelModifiers } = prop
-      if (!modelModifiers || !modelModifiers.length) return []
+  function genModelModifiers(prop: IRProp): CodeFragment[] {
+    const { key, modelModifiers } = prop
+    if (!modelModifiers || !modelModifiers.length) return []
 
-      const modifiersKey = key.isStatic
-        ? key.content === 'modelValue'
-          ? [`modelModifiers`]
-          : [`${key.content}Modifiers`]
-        : ['[', ...genExpression(key, context), ' + "Modifiers"]']
+    const modifiersKey = key.isStatic
+      ? key.content === 'modelValue'
+        ? [`modelModifiers`]
+        : [`${key.content}Modifiers`]
+      : ['[', ...genExpression(key, context), ' + "Modifiers"]']
 
-      const modifiersVal = genDirectiveModifiers(modelModifiers)
-      return [',', NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`]
-    }
+    const modifiersVal = genDirectiveModifiers(modelModifiers)
+    return [',', NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`]
   }
 }
diff --git a/packages/compiler-vapor/src/generators/slotOutlet.ts b/packages/compiler-vapor/src/generators/slotOutlet.ts
@@ -1,22 +1,12 @@
-import { isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
-import type { IRProp, SlotOutletIRNode } from '../ir'
+import type { SlotOutletIRNode } from '../ir'
 import { genBlock } from './block'
 import { genExpression } from './expression'
-import {
-  type CodeFragment,
-  NEWLINE,
-  SEGMENTS_ARRAY,
-  SEGMENTS_OBJECT_NEWLINE,
-  buildCodeFragment,
-  genCall,
-  genMulti,
-} from './utils'
-import { genPropKey } from './prop'
-import { genEventHandler } from './event'
+import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
+import { genRawProps } from './component'
 
 export function genSlotOutlet(oper: SlotOutletIRNode, context: CodegenContext) {
-  const { helper, vaporHelper } = context
+  const { vaporHelper } = context
   const { id, name, fallback } = oper
   const [frag, push] = buildCodeFragment()
 
@@ -34,44 +24,10 @@ export function genSlotOutlet(oper: SlotOutletIRNode, context: CodegenContext) {
     ...genCall(
       vaporHelper('createSlot'),
       nameExpr,
-      genRawProps() || 'null',
+      genRawProps(oper.props, context) || 'null',
       fallbackArg,
     ),
   )
 
   return frag
-
-  // TODO share this with genCreateComponent
-  function genRawProps() {
-    const props = oper.props
-      .map(props => {
-        if (isArray(props)) {
-          if (!props.length) return
-          return genStaticProps(props)
-        } else {
-          let expr = genExpression(props.value, context)
-          if (props.handler) expr = genCall(helper('toHandlers'), expr)
-          return ['() => (', ...expr, ')']
-        }
-      })
-      .filter(Boolean)
-    if (props.length) {
-      return genMulti(SEGMENTS_ARRAY, ...props)
-    }
-  }
-
-  function genStaticProps(props: IRProp[]) {
-    return genMulti(
-      SEGMENTS_OBJECT_NEWLINE,
-      ...props.map(prop => {
-        return [
-          ...genPropKey(prop, context),
-          ': ',
-          ...(prop.handler
-            ? genEventHandler(context, prop.values[0])
-            : ['() => (', ...genExpression(prop.values[0], context), ')']),
-        ]
-      }),
-    )
-  }
 }