chore(compiler): refactor

Author: zhiyuanzmj

packages/compiler/src/generate.ts

@@ -26,10 +26,6 @@ export type CodegenOptions = {
    * @default 'index.jsx'
    */
   filename?: string
-  /**
-   * Indicates that transforms and codegen should try to output valid TS code
-   */
-  isTS?: boolean
   /**
    * A list of parser plugins to enable for `@babel/parser`, which is used to
    * parse expressions in bindings and interpolations.
@@ -91,7 +87,6 @@ export class CodegenContext {
     const defaultOptions: Required<CodegenOptions> = {
       sourceMap: false,
       filename: `index.jsx`,
-      isTS: false,
       expressionPlugins: ['jsx'],
       templates: [],
     }

packages/compiler/src/generators/component.ts

@@ -1,4 +1,4 @@
-import { camelize, extend, isArray } from '@vue/shared'
+import { camelize, isArray } from '@vue/shared'
 import { walkIdentifiers } from 'ast-kit'
 import {
   IRDynamicPropsKind,
@@ -78,10 +78,7 @@ export function genCreateComponent(
     } else if (operation.asset) {
       return toValidAssetId(operation.tag, 'component')
     } else {
-      return genExpression(
-        extend(createSimpleExpression(operation.tag, false), { ast: null }),
-        context,
-      )
+      return genExpression(createSimpleExpression(operation.tag), context)
     }
   }
 }

packages/compiler/src/generators/directive.ts

@@ -1,4 +1,3 @@
-import { extend } from '@vue/shared'
 import { IRNodeTypes, type DirectiveIRNode, type OperationNode } from '../ir'
 import {
   createSimpleExpression,
@@ -65,10 +64,7 @@ function genCustomDirectives(
   }: DirectiveIRNode): CodeFragment[] {
     const directiveVar = asset
       ? toValidAssetId(name, 'directive')
-      : genExpression(
-          extend(createSimpleExpression(name, false), { ast: null }),
-          context,
-        )
+      : genExpression(createSimpleExpression(name), context)
     const value = dir.exp && ['() => ', ...genExpression(dir.exp, context)]
     const argument = dir.arg && genExpression(dir.arg, context)
     const modifiers = !!dir.modifiers.length && [

packages/compiler/src/generators/event.ts

@@ -131,18 +131,11 @@ export function genEventHandler(
       handlerExp = genExpression(value, context)
     } else {
       // inline statement
-      // @click="foo($event)" ---> $event => foo($event)
-      const referencesEvent = value.content.includes('$event')
       const hasMultipleStatements = value.content.includes(`;`)
-      const expr = referencesEvent
-        ? context.withId(() => genExpression(value, context), {
-            $event: null,
-          })
-        : genExpression(value, context)
       handlerExp = [
-        referencesEvent ? '$event => ' : '() => ',
+        '() => ',
         hasMultipleStatements ? '{' : '(',
-        ...expr,
+        ...genExpression(value, context),
         hasMultipleStatements ? '}' : ')',
       ]
     }

packages/compiler/src/generators/expression.ts

@@ -28,17 +28,11 @@ export function genExpression(
     return [[JSON.stringify(content), NewlineType.None, loc]]
   }
 
-  if (
-    !node.content.trim() ||
-    // there was a parsing error
-    ast === false ||
-    isConstantExpression(node)
-  ) {
+  if (!node.content.trim() || isConstantExpression(node)) {
     return [[content, NewlineType.None, loc], assignment && ` = ${assignment}`]
   }
 
-  // the expression is a simple identifier
-  if (ast === null) {
+  if (!ast) {
     return genIdentifier(content, context, loc, assignment)
   }
 

packages/compiler/src/generators/for.ts

@@ -214,7 +214,7 @@ export function genFor(
     >()
     if (value) {
       rawValue = value && value.content
-      if (value.ast) {
+      if (value.ast && value.ast.type !== 'Identifier') {
         walkIdentifiers(
           value.ast,
           (id, _, parentStack, ___, isLocal) => {

packages/compiler/src/generators/vModel.ts

@@ -48,9 +48,5 @@ export function genModelHandler(
   exp: SimpleExpressionNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  return [
-    `${context.options.isTS ? `(_value: any)` : `_value`} => (`,
-    ...genExpression(exp, context, '_value'),
-    ')',
-  ]
+  return ['_value => (', ...genExpression(exp, context, '_value'), ')']
 }

packages/compiler/src/transform.ts

@@ -61,7 +61,10 @@ export type TransformOptions = CodegenOptions & {
    * @default false
    */
   withFallback?: boolean
-  onError?: (error: CompilerError) => void
+  /**
+   * Indicates that transforms and codegen should try to output valid TS code
+   */
+  isTS?: boolean
   /**
    * An array of node transforms to be applied to every AST node.
    */
@@ -71,20 +74,11 @@ export type TransformOptions = CodegenOptions & {
    * node found on element nodes.
    */
   directiveTransforms?: Record<string, DirectiveTransform | undefined>
-  /**
-   * Indicates that transforms and codegen should try to output valid TS code
-   */
-  isTS?: boolean
   /**
    * Separate option for end users to extend the native elements list
    */
   isCustomElement?: (tag: string) => boolean | void
-  /**
-   * Filename for source map generation.
-   * Also used for self-recursive reference in templates
-   * @default 'index.jsx'
-   */
-  filename?: string
+  onError?: (error: CompilerError) => void
 }
 const defaultOptions: Required<TransformOptions> = {
   source: '',

packages/compiler/src/transforms/transformElement.ts

@@ -10,11 +10,11 @@ import {
 } from '../ir'
 import {
   createSimpleExpression,
+  getTextLikeValue,
   isJSXComponent,
   isTemplate,
   isValidHTMLNesting,
   resolveExpression,
-  resolveSimpleExpression,
   type SimpleExpressionNode,
 } from '../utils'
 import type {
@@ -227,7 +227,7 @@ export function buildProps(
       continue
     }
 
-    const result = transformProp(prop, node, context)
+    const result = transformProp(prop, node, isComponent, context)
     if (result) {
       dynamicExpr.push(result.key, result.value)
       if (isComponent && !result.key.isStatic) {
@@ -259,6 +259,7 @@ export function buildProps(
 function transformProp(
   prop: JSXAttribute | JSXSpreadAttribute,
   node: JSXElement,
+  isComponent: boolean,
   context: TransformContext<JSXElement>,
 ): DirectiveTransformResult | void {
   if (prop.type === 'JSXSpreadAttribute') return
@@ -270,18 +271,18 @@ function transformProp(
         : ''
   name = name.split('_')[0]
 
+  let value
   if (
     !isDirectiveRegex.test(name) &&
     !isEventRegex.test(name) &&
-    (!prop.value || prop.value.type === 'StringLiteral')
+    (!prop.value || (value = getTextLikeValue(prop.value, isComponent)) != null)
   ) {
     if (isReservedProp(name)) return
     return {
-      key: resolveSimpleExpression(name, true, prop.name.loc!),
-      value:
-        prop.value && prop.value.type === 'StringLiteral'
-          ? resolveSimpleExpression(prop.value.value, true, prop.value.loc!)
-          : createSimpleExpression('true', false),
+      key: createSimpleExpression(name, true, prop.name),
+      value: prop.value
+        ? createSimpleExpression(value!, true, prop.value)
+        : createSimpleExpression('true'),
     }
   }
 

packages/compiler/src/transforms/vBind.ts

@@ -1,5 +1,5 @@
 import { camelize, extend } from '@vue/shared'
-import { resolveExpression, resolveSimpleExpression } from '../utils'
+import { createSimpleExpression, resolveExpression } from '../utils'
 import type { DirectiveTransform } from '../transform'
 import { isReservedProp } from './transformElement'
 
@@ -10,7 +10,7 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
   const [nameString, ...modifiers] = name.name.split('_')
 
   const exp = resolveExpression(value, context)
-  let arg = resolveSimpleExpression(nameString, true, dir.name.loc)
+  let arg = createSimpleExpression(nameString, true, dir.name)
 
   if (arg.isStatic && isReservedProp(arg.content)) return