refactor(compiler): remove compiler-dom dependency

Author: zhiyuanzmj

packages/compiler/package.json

@@ -42,7 +42,6 @@
   "dependencies": {
     "@babel/parser": "catalog:",
     "@babel/types": "catalog:",
-    "@vue/compiler-dom": "catalog:",
     "@vue/shared": "catalog:",
     "ast-kit": "catalog:",
     "source-map-js": "catalog:"

packages/compiler/src/compile.ts

@@ -24,7 +24,6 @@ import { transformVSlot } from './transforms/vSlot'
 import { transformVSlots } from './transforms/vSlots'
 import { transformVText } from './transforms/vText'
 import type { ExpressionStatement, JSXElement, JSXFragment } from '@babel/types'
-import type { CompilerOptions as BaseCompilerOptions } from '@vue/compiler-dom'
 
 // code/AST -> IR (transform) -> JS (generate)
 export function compile(
@@ -85,8 +84,7 @@ export function compile(
   return generate(ir, resolvedOptions)
 }
 
-export type CompilerOptions = HackOptions<BaseCompilerOptions> &
-  TransformOptions
+export type CompilerOptions = HackOptions<TransformOptions>
 export type TransformPreset = [
   NodeTransform[],
   Record<string, DirectiveTransform>,

packages/compiler/src/generate.ts

@@ -8,18 +8,34 @@ import {
   INDENT_END,
   INDENT_START,
   NEWLINE,
-} from './generators/utils'
+} from './utils/generate'
 import type { BlockIRNode, RootIRNode } from './ir'
-import type {
-  CodegenOptions as BaseCodegenOptions,
-  BaseCodegenResult,
-  SimpleExpressionNode,
-} from '@vue/compiler-dom'
-
-export type CodegenOptions = Omit<
-  BaseCodegenOptions,
-  'optimizeImports' | 'inline' | 'bindingMetadata' | 'prefixIdentifiers'
-> & {
+import type { SimpleExpressionNode } from './utils'
+import type { ParserPlugin } from '@babel/parser'
+import type { RawSourceMap } from 'source-map-js'
+
+export type CodegenOptions = {
+  /**
+   * Generate source map?
+   * @default false
+   */
+  sourceMap?: boolean
+  /**
+   * Filename for source map generation.
+   * Also used for self-recursive reference in templates
+   * @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.
+   * https://babeljs.io/docs/en/next/babel-parser#plugins
+   */
+  expressionPlugins?: ParserPlugin[]
   templates?: string[]
 }
 
@@ -73,30 +89,24 @@ export class CodegenContext {
     options: CodegenOptions,
   ) {
     const defaultOptions: Required<CodegenOptions> = {
-      mode: 'module',
       sourceMap: false,
-      filename: `template.vue.html`,
-      scopeId: null,
-      runtimeGlobalName: `Vue`,
-      runtimeModuleName: `vue`,
-      ssrRuntimeModuleName: 'vue/server-renderer',
-      ssr: false,
+      filename: `index.jsx`,
       isTS: false,
-      inSSR: false,
+      expressionPlugins: ['jsx'],
       templates: [],
-      expressionPlugins: [],
     }
     this.options = extend(defaultOptions, options)
     this.block = ir.block
   }
 }
 
-export interface VaporCodegenResult
-  extends Omit<BaseCodegenResult, 'preamble'> {
+export interface VaporCodegenResult {
   ast: RootIRNode
   helpers: Set<string>
   templates: string[]
   delegates: Set<string>
+  code: string
+  map?: RawSourceMap
 }
 
 // IR -> JS codegen

packages/compiler/src/generators/block.ts

@@ -1,8 +1,3 @@
-import { toValidAssetId } from '@vue/compiler-dom'
-import type { CodegenContext } from '../generate'
-import type { BlockIRNode } from '../ir'
-import { genEffects, genOperations } from './operation'
-import { genChildren, genSelf } from './template'
 import {
   buildCodeFragment,
   DELIMITERS_ARRAY,
@@ -11,8 +6,13 @@ import {
   INDENT_END,
   INDENT_START,
   NEWLINE,
+  toValidAssetId,
   type CodeFragment,
-} from './utils'
+} from '../utils'
+import type { CodegenContext } from '../generate'
+import type { BlockIRNode } from '../ir'
+import { genEffects, genOperations } from './operation'
+import { genChildren, genSelf } from './template'
 
 export function genBlock(
   oper: BlockIRNode,

packages/compiler/src/generators/component.ts

@@ -1,4 +1,3 @@
-import { createSimpleExpression, toValidAssetId } from '@vue/compiler-dom'
 import { camelize, extend, isArray } from '@vue/shared'
 import { walkIdentifiers } from 'ast-kit'
 import {
@@ -16,13 +15,8 @@ import {
   type IRSlotsStatic,
   type SlotBlockIRNode,
 } from '../ir'
-import type { CodegenContext } from '../generate'
-import { genBlock } from './block'
-import { genDirectiveModifiers, genDirectivesForElement } from './directive'
-import { genEventHandler } from './event'
-import { genExpression } from './expression'
-import { genPropKey, genPropValue } from './prop'
 import {
+  createSimpleExpression,
   DELIMITERS_ARRAY_NEWLINE,
   DELIMITERS_OBJECT,
   DELIMITERS_OBJECT_NEWLINE,
@@ -31,8 +25,15 @@ import {
   INDENT_END,
   INDENT_START,
   NEWLINE,
+  toValidAssetId,
   type CodeFragment,
-} from './utils'
+} from '../utils'
+import type { CodegenContext } from '../generate'
+import { genBlock } from './block'
+import { genDirectiveModifiers, genDirectivesForElement } from './directive'
+import { genEventHandler } from './event'
+import { genExpression } from './expression'
+import { genPropKey, genPropValue } from './prop'
 import { genModelHandler } from './vModel'
 
 export function genCreateComponent(

packages/compiler/src/generators/directive.ts

@@ -1,20 +1,18 @@
-import {
-  createSimpleExpression,
-  isSimpleIdentifier,
-  toValidAssetId,
-} from '@vue/compiler-dom'
 import { extend } from '@vue/shared'
 import { IRNodeTypes, type DirectiveIRNode, type OperationNode } from '../ir'
-import type { CodegenContext } from '../generate'
-import { genExpression } from './expression'
 import {
+  createSimpleExpression,
   DELIMITERS_ARRAY,
   genCall,
   genMulti,
+  isSimpleIdentifier,
   NEWLINE,
+  toValidAssetId,
   type CodeFragment,
   type CodeFragmentDelimiters,
-} from './utils'
+} from '../utils'
+import type { CodegenContext } from '../generate'
+import { genExpression } from './expression'
 import { genVModel } from './vModel'
 import { genVShow } from './vShow'
 

packages/compiler/src/generators/dom.ts

@@ -1,6 +1,6 @@
+import { genCall, NEWLINE, type CodeFragment } from '../utils'
 import type { CodegenContext } from '../generate'
 import type { InsertNodeIRNode, PrependNodeIRNode } from '../ir'
-import { genCall, NEWLINE, type CodeFragment } from './utils'
 
 export function genInsertNode(
   { parent, elements, anchor }: InsertNodeIRNode,

packages/compiler/src/generators/event.ts

@@ -1,23 +1,21 @@
-import {
-  isFnExpression,
-  isMemberExpression,
-  type SimpleExpressionNode,
-} from '@vue/compiler-dom'
 import {
   IRNodeTypes,
   type OperationNode,
   type SetDynamicEventsIRNode,
   type SetEventIRNode,
 } from '../ir'
-import type { CodegenContext } from '../generate'
-import { genExpression } from './expression'
 import {
   DELIMITERS_OBJECT_NEWLINE,
   genCall,
   genMulti,
+  isFnExpression,
+  isMemberExpression,
   NEWLINE,
   type CodeFragment,
-} from './utils'
+  type SimpleExpressionNode,
+} from '../utils'
+import type { CodegenContext } from '../generate'
+import { genExpression } from './expression'
 
 export function genSetEvent(
   oper: SetEventIRNode,
@@ -118,7 +116,7 @@ export function genEventHandler(
   if (value && value.content.trim()) {
     // Determine how the handler should be wrapped so it always reference the
     // latest value when invoked.
-    if (isMemberExpression(value, context.options)) {
+    if (isMemberExpression(value)) {
       // e.g. @click="foo.bar"
       handlerExp = genExpression(value, context)
       if (!extraWrap) {
@@ -127,7 +125,7 @@ export function genEventHandler(
         // can skip this
         handlerExp = [`e => `, ...handlerExp, `(e)`]
       }
-    } else if (isFnExpression(value, context.options)) {
+    } else if (isFnExpression(value)) {
       // Fn expression: @click="e => foo(e)"
       // no need to wrap in this case
       handlerExp = genExpression(value, context)

packages/compiler/src/generators/expression.ts

@@ -1,24 +1,28 @@
+import { isString } from '@vue/shared'
+import { walkIdentifiers } from 'ast-kit'
 import {
   advancePositionWithClone,
+  buildCodeFragment,
+  isConstantExpression,
   isStaticProperty,
   NewlineType,
   TS_NODE_TYPES,
+  type CodeFragment,
   type SimpleExpressionNode,
-  type SourceLocation,
-} from '@vue/compiler-dom'
-import { isString } from '@vue/shared'
-import { walkIdentifiers } from 'ast-kit'
-import { isConstantExpression } from '../utils'
+} from '../utils'
 import type { CodegenContext } from '../generate'
-import { buildCodeFragment, type CodeFragment } from './utils'
-import type { Identifier, Node } from '@babel/types'
+import type { Identifier, Node, SourceLocation } from '@babel/types'
 
 export function genExpression(
   node: SimpleExpressionNode,
   context: CodegenContext,
   assignment?: string,
+  needWrap = false,
 ): CodeFragment[] {
-  const { content, ast, isStatic, loc } = node
+  let { content, ast, isStatic, loc } = node
+  if (needWrap) {
+    content = `() => (${content})`
+  }
 
   if (isStatic) {
     return [[JSON.stringify(content), NewlineType.None, loc]]
@@ -55,8 +59,7 @@ export function genExpression(
   if (ids.length) {
     const [frag, push] = buildCodeFragment()
     const isTSNode = ast && TS_NODE_TYPES.includes(ast.type)
-    const offset =
-      (ast?.start ? ast.start - 1 : 0) - ((ast as any)._offset || 0)
+    const offset = (ast?.start ? ast.start - 1 : 0) - (needWrap ? 7 : 0)
     ids
       .sort((a, b) => a.start! - b.start!)
       .forEach((id, i) => {
@@ -87,9 +90,10 @@ export function genExpression(
             source,
             context,
             {
-              start: advancePositionWithClone(node.loc.start, source, start),
-              end: advancePositionWithClone(node.loc.start, source, end),
-              source,
+              start: advancePositionWithClone(node.loc!.start, source, start),
+              end: advancePositionWithClone(node.loc!.start, source, end),
+              filename: '',
+              identifierName: undefined,
             },
             hasMemberExpression ? undefined : assignment,
             parent,
@@ -113,7 +117,7 @@ export function genExpression(
 function genIdentifier(
   raw: string,
   context: CodegenContext,
-  loc?: SourceLocation,
+  loc?: SourceLocation | null,
   assignment?: string,
   parent?: Node,
 ): CodeFragment[] {