feat: support AST node compilation

Author: zhiyuanzmj

.changeset/afraid-suns-hope.md

@@ -0,0 +1,6 @@
+---
+'@vue-jsx-vapor/compiler': patch
+'@vue-jsx-vapor/babel': patch
+---
+
+support AST node compilation

packages/babel/src/index.ts

@@ -1,8 +1,9 @@
 // @ts-ignore
 import SyntaxJSX from '@babel/plugin-syntax-jsx'
 import { parse } from '@babel/parser'
-import { isJSXElement, transformJSX } from './transform'
-import type { NodePath, VisitNodeFunction } from '@babel/traverse'
+import { transformJSX } from './transform'
+import { isConditionalExpression, isJSXElement } from './utils'
+import type { VisitNodeFunction } from '@babel/traverse'
 import type { JSXElement, JSXFragment, Node } from '@babel/types'
 import type { CompilerOptions } from '@vue-jsx-vapor/compiler'
 import type { Visitor } from '@babel/core'
@@ -13,7 +14,7 @@ export type Options = {
   delegateEventSet: Set<string>
   preambleMap: Map<string, string>
   preambleIndex: number
-  rootCodes: string[]
+  roots: { node: JSXElement | JSXFragment; source: string }[]
   compile?: CompilerOptions
 }
 
@@ -34,7 +35,7 @@ export default (): {
           state.delegateEventSet = new Set<string>()
           state.preambleMap = new Map<string, string>()
           state.preambleIndex = 0
-          state.rootCodes = []
+          state.roots = []
           const collectRoot: VisitNodeFunction<
             Node,
             JSXElement | JSXFragment
@@ -45,17 +46,21 @@ export default (): {
                 !isConditionalExpression(path.parentPath)) ||
               path.parentPath.parent?.type === 'JSXAttribute'
             ) {
-              state.rootCodes.push(path.getSource())
+              state.roots.push({
+                node: path.node,
+                source: path.getSource(),
+              })
             }
           }
           path.traverse({
             JSXElement: collectRoot,
             JSXFragment: collectRoot,
           })
         },
-        exit: (path, { delegateEventSet, importSet, preambleMap }) => {
-          const statements: string[] = []
+        exit: (path, state) => {
+          const { delegateEventSet, importSet, preambleMap } = state
 
+          const statements: string[] = []
           if (delegateEventSet.size) {
             statements.unshift(
               `_delegateEvents(${Array.from(delegateEventSet).join(', ')});`,
@@ -97,14 +102,3 @@ export default (): {
     },
   }
 }
-
-export function isConditionalExpression(path: NodePath<Node> | null): boolean {
-  return !!(
-    path &&
-    (path?.type === 'LogicalExpression' ||
-      path.type === 'ConditionalExpression') &&
-    (path.parent.type === 'JSXExpressionContainer' ||
-      (path.parent.type === 'ConditionalExpression' &&
-        isConditionalExpression(path.parentPath)))
-  )
-}

packages/babel/src/transform.ts

@@ -2,29 +2,36 @@ import { compile } from '@vue-jsx-vapor/compiler'
 import { parse } from '@babel/parser'
 import { SourceMapConsumer } from 'source-map-js'
 import traverse, { type VisitNodeFunction } from '@babel/traverse'
+import { isJSXElement } from './utils'
 import type { Options } from '.'
-import type { JSXElement, JSXFragment, Node } from '@babel/types'
+import type { JSXElement, JSXFragment } from '@babel/types'
 
 export const transformJSX: VisitNodeFunction<
   Options,
   JSXElement | JSXFragment
 > = (path, state) => {
-  const { parent, node } = path
-  if (!(parent?.type !== 'JSXExpressionContainer' && !isJSXElement(parent))) {
+  if (
+    !(
+      path.parent?.type !== 'JSXExpressionContainer' &&
+      !isJSXElement(path.parent)
+    )
+  ) {
     return
   }
 
-  let { code, vaporHelpers, preamble, map } = compile(
-    state.rootCodes.shift()!,
-    {
-      mode: 'module',
-      inline: true,
-      isTS: state.filename?.endsWith('tsx'),
-      filename: state.filename,
-      sourceMap: true,
-      ...state?.compile,
-    },
-  )
+  const root = state.roots.shift()
+  if (!root) return
+  const isTS = state.filename?.endsWith('tsx')
+  let { code, vaporHelpers, preamble, map } = compile(root.node, {
+    mode: 'module',
+    inline: true,
+    isTS,
+    filename: state.filename,
+    sourceMap: true,
+    source: ' '.repeat(root.node.start || 0) + root.source,
+    ...state?.compile,
+  })
+
   vaporHelpers.forEach((helper) => state.importSet.add(helper))
 
   preamble = preamble.replaceAll(
@@ -54,34 +61,24 @@ export const transformJSX: VisitNodeFunction<
 
   const ast = parse(code, {
     sourceFilename: state.filename,
-    startLine: node.loc!.start.line - 1,
-    plugins: ['jsx'],
+    plugins: isTS ? ['jsx', 'typescript'] : ['jsx'],
   })
 
   if (map) {
     const consumer = new SourceMapConsumer(map)
-    const line = node.loc!.start.line - 1
     traverse(ast, {
       Identifier({ node: id }) {
-        const originalLoc = consumer.originalPositionFor({
-          ...id.loc!.start,
-          line: id.loc!.start.line - line + 1,
-        })
-        const column = originalLoc.line === 1 ? node.loc!.start.column : 0
+        if (!id.loc) return
+        const originalLoc = consumer.originalPositionFor(id.loc.start)
         if (originalLoc.column) {
-          id.loc!.start.line = line + originalLoc.line + (path.hub ? 0 : 1)
-          id.loc!.start.column = column + originalLoc.column
-          id.loc!.end.line = line + originalLoc.line
-          id.loc!.end.column = column + originalLoc.column + id.name.length
+          id.loc.start.line = originalLoc.line
+          id.loc.start.column = originalLoc.column
+          id.loc.end.line = originalLoc.line
+          id.loc.end.column = originalLoc.column + id.name.length
         }
       },
     })
   }
-  path.replaceWith(ast.program.body[0])
-}
 
-export function isJSXElement(
-  node?: Node | null,
-): node is JSXElement | JSXFragment {
-  return !!node && (node.type === 'JSXElement' || node.type === 'JSXFragment')
+  path.replaceWith(ast.program.body[0])
 }

packages/babel/src/utils.ts

@@ -0,0 +1,19 @@
+import type { NodePath } from '@babel/traverse'
+import type { JSXElement, JSXFragment, Node } from '@babel/types'
+
+export function isConditionalExpression(path: NodePath<Node> | null): boolean {
+  return !!(
+    path &&
+    (path?.type === 'LogicalExpression' ||
+      path.type === 'ConditionalExpression') &&
+    (path.parent.type === 'JSXExpressionContainer' ||
+      (path.parent.type === 'ConditionalExpression' &&
+        isConditionalExpression(path.parentPath)))
+  )
+}
+
+export function isJSXElement(
+  node?: Node | null,
+): node is JSXElement | JSXFragment {
+  return !!node && (node.type === 'JSXElement' || node.type === 'JSXFragment')
+}

packages/compiler/src/compile.ts

@@ -32,7 +32,7 @@ import { transformVSlot } from './transforms/vSlot'
 import { transformVModel } from './transforms/vModel'
 import { transformVShow } from './transforms/vShow'
 import { transformVHtml } from './transforms/vHtml'
-import type { JSXElement, JSXFragment, Program } from '@babel/types'
+import type { Expression, JSXElement, JSXFragment } from '@babel/types'
 
 export interface VaporCodegenResult
   extends Omit<BaseVaporCodegenResult, 'ast'> {
@@ -41,16 +41,11 @@ export interface VaporCodegenResult
 
 // code/AST -> IR (transform) -> JS (generate)
 export function compile(
-  source: string | Program,
+  source: string | JSXElement | JSXFragment,
   options: CompilerOptions = {},
 ): VaporCodegenResult {
   const onError = options.onError || defaultOnError
   const isModuleMode = options.mode === 'module'
-  const __BROWSER__ = false
-  /* istanbul ignore if */
-  if (__BROWSER__ && isModuleMode) {
-    onError(createCompilerError(ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED))
-  }
 
   if (options.scopeId && !isModuleMode) {
     onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
@@ -60,7 +55,7 @@ export function compile(
     prefixIdentifiers: false,
     expressionPlugins: options.expressionPlugins || ['jsx'],
   })
-  if (!__BROWSER__ && options.isTS) {
+  if (options.isTS) {
     const { expressionPlugins } = resolvedOptions
     if (!expressionPlugins.includes('typescript')) {
       resolvedOptions.expressionPlugins = [
@@ -70,27 +65,30 @@ export function compile(
     }
   }
 
-  const {
-    body: [statement],
-  } = isString(source)
-    ? parse(source, {
-        sourceType: 'module',
-        plugins: resolvedOptions.expressionPlugins,
-      }).program
-    : source
-  let children!: JSXElement[] | JSXFragment['children']
-  if (statement.type === 'ExpressionStatement') {
-    children =
-      statement.expression.type === 'JSXFragment'
-        ? statement.expression.children
-        : statement.expression.type === 'JSXElement'
-          ? [statement.expression]
-          : []
+  let expression!: Expression
+  if (isString(source)) {
+    const {
+      body: [statement],
+    } = parse(source, {
+      sourceType: 'module',
+      plugins: resolvedOptions.expressionPlugins,
+    }).program
+    if (statement.type === 'ExpressionStatement') {
+      expression = statement.expression
+    }
+  } else {
+    expression = source
   }
+  const children =
+    expression.type === 'JSXFragment'
+      ? expression.children
+      : expression.type === 'JSXElement'
+        ? [expression]
+        : []
   const ast: RootNode = {
     type: IRNodeTypes.ROOT,
     children,
-    source: isString(source) ? source : '', // TODO
+    source: isString(source) ? source : options.source || '',
     components: [],
     directives: [],
     helpers: new Set(),
@@ -116,7 +114,9 @@ export function compile(
   return generate(ir as any, resolvedOptions) as unknown as VaporCodegenResult
 }
 
-export type CompilerOptions = HackOptions<BaseCompilerOptions>
+export type CompilerOptions = HackOptions<BaseCompilerOptions> & {
+  source?: string
+}
 export type TransformPreset = [
   NodeTransform[],
   Record<string, DirectiveTransform>,