refactor: migrate to vue/core's vapor branch

Author: zhiyuanzmj

.changeset/honest-drinks-scream.md

@@ -0,0 +1,7 @@
+---
+'@vue-jsx-vapor/compiler': minor
+'unplugin-vue-jsx-vapor': minor
+'@vue-jsx-vapor/babel': minor
+---
+
+migrate to vue/core's vapor branch

packages/babel/src/index.ts

@@ -41,10 +41,8 @@ export default (): {
             JSXElement | JSXFragment
           > = (path) => {
             if (
-              (path.parent?.type !== 'JSXExpressionContainer' &&
-                !isJSXElement(path.parent) &&
-                !isConditionalExpression(path.parentPath)) ||
-              path.parentPath.parent?.type === 'JSXAttribute'
+              !isJSXElement(path.parent) &&
+              !isConditionalExpression(path.parentPath)
             ) {
               state.roots.push({
                 node: path.node,
@@ -90,7 +88,7 @@ export default (): {
             const importResult = Array.from(importSet)
               .map((i) => `${i} as _${i}`)
               .join(', ')
-            statements.unshift(`import { ${importResult} } from 'vue/vapor';\n`)
+            statements.unshift(`import { ${importResult} } from 'vue';\n`)
           }
 
           path.node.body.unshift(

packages/babel/src/transform.ts

@@ -10,38 +10,27 @@ export const transformJSX: VisitNodeFunction<
   Options,
   JSXElement | JSXFragment
 > = (path, state) => {
-  if (
-    !(
-      path.parent?.type !== 'JSXExpressionContainer' &&
-      !isJSXElement(path.parent)
-    )
-  ) {
-    return
-  }
+  if (isJSXElement(path.parent)) return
 
   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,
+  let { code, helpers, preamble, map } = compile(root.node, {
     isTS,
     filename: state.filename,
     sourceMap: true,
     source: ' '.repeat(root.node.start || 0) + root.source,
     ...state?.compile,
   })
 
-  vaporHelpers.forEach((helper) => state.importSet.add(helper))
+  helpers.forEach((helper) => state.importSet.add(helper))
 
   preamble = preamble.replaceAll(
     /(?<=const )t(?=(\d))/g,
     `_t${state.preambleIndex}`,
   )
-  code = code
-    .replaceAll(/(?<== )t(?=\d)/g, `_t${state.preambleIndex}`)
-    .replaceAll('_ctx: any', '')
-    .replaceAll('$event: any', '$event')
+  code = code.replaceAll(/(?<== )t(?=\d)/g, `_t${state.preambleIndex}`)
   state.preambleIndex++
 
   for (const [, key, value] of preamble.matchAll(
@@ -59,7 +48,7 @@ export const transformJSX: VisitNodeFunction<
     events.split(', ').forEach((event) => state.delegateEventSet.add(event))
   }
 
-  const ast = parse(code, {
+  const ast = parse(`(() => {${code}})()`, {
     sourceFilename: state.filename,
     plugins: isTS ? ['jsx', 'typescript'] : ['jsx'],
   })

packages/babel/test/transform.spec.ts

@@ -13,26 +13,26 @@ describe('transform', () => {
       },
     )!
     expect(code).toMatchInlineSnapshot(`
-      "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template, createIf as _createIf } from 'vue/vapor';
+      "import { delegateEvents as _delegateEvents, template as _template, createIf as _createIf } from 'vue';
       import { setText as _setText } from 'unplugin-vue-jsx-vapor/helper.js';
-      const _t00 = _template("<div></div>");
+      const _t00 = _template("<div></div>", true);
       const _t10 = _template("<div>Hello</div>");
       const _t11 = _template("<div>World</div>");
       _delegateEvents("click", "dblclick");
       const a = (() => {
         const n0 = _t00();
         _setText(n0, () => Hello);
-        _delegate(n0, "click", () => onClick);
+        n0.$evtclick = e => onClick(e);
         return n0;
       })();
       const b = (() => {
         const n0 = _createIf(() => foo, () => {
           const n2 = _t10();
-          _delegate(n2, "click", () => onClick);
+          n2.$evtclick = e => onClick(e);
           return n2;
         }, () => {
           const n4 = _t11();
-          _delegate(n4, "dblclick", () => onDblclick);
+          n4.$evtdblclick = e => onDblclick(e);
           return n4;
         });
         return n0;

packages/compiler/package.json

@@ -57,11 +57,8 @@
   "dependencies": {
     "@babel/parser": "catalog:",
     "@babel/types": "catalog:",
-    "@vue-macros/common": "^1.10.4",
-    "@vue/compiler-core": "catalog:",
     "@vue/compiler-dom": "catalog:",
     "@vue/compiler-vapor": "catalog:",
-    "@vue/runtime-vapor": "catalog:",
     "@vue/shared": "catalog:"
   }
 }

packages/compiler/src/compile.ts

@@ -1,15 +1,9 @@
-import {
-  type CompilerOptions as BaseCompilerOptions,
-  ErrorCodes,
-  createCompilerError,
-  defaultOnError,
-} from '@vue/compiler-dom'
 import { extend, isString } from '@vue/shared'
+import { parse } from '@babel/parser'
 import {
   type VaporCodegenResult as BaseVaporCodegenResult,
   generate,
-} from '@vue/compiler-vapor'
-import { parse } from '@babel/parser'
+} from './patched/compiler-vapor.js'
 import {
   type DirectiveTransform,
   type NodeTransform,
@@ -19,21 +13,24 @@ import {
 import { transformElement } from './transforms/transformElement'
 import { transformChildren } from './transforms/transformChildren'
 import { transformTemplateRef } from './transforms/transformTemplateRef'
-import {
-  type HackOptions,
-  IRNodeTypes,
-  type RootIRNode,
-  type RootNode,
-} from './ir'
 import { transformText } from './transforms/transformText'
 import { transformVBind } from './transforms/vBind'
 import { transformVOn } from './transforms/vOn'
 import { transformVSlot } from './transforms/vSlot'
 import { transformVModel } from './transforms/vModel'
 import { transformVShow } from './transforms/vShow'
 import { transformVHtml } from './transforms/vHtml'
+import {
+  type HackOptions,
+  IRNodeTypes,
+  type RootIRNode,
+  type RootNode,
+} from './ir'
+import type { CompilerOptions as BaseCompilerOptions } from '@vue/compiler-dom'
 import type { Expression, JSXElement, JSXFragment } from '@babel/types'
 
+export { generate }
+
 export interface VaporCodegenResult
   extends Omit<BaseVaporCodegenResult, 'ast'> {
   ast: RootIRNode
@@ -44,14 +41,8 @@ export function compile(
   source: string | JSXElement | JSXFragment,
   options: CompilerOptions = {},
 ): VaporCodegenResult {
-  const onError = options.onError || defaultOnError
-  const isModuleMode = options.mode === 'module'
-
-  if (options.scopeId && !isModuleMode) {
-    onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
-  }
-
   const resolvedOptions = extend({}, options, {
+    inline: true,
     prefixIdentifiers: false,
     expressionPlugins: options.expressionPlugins || ['jsx'],
   })
@@ -89,10 +80,6 @@ export function compile(
     type: IRNodeTypes.ROOT,
     children,
     source: isString(source) ? source : options.source || '',
-    components: [],
-    directives: [],
-    helpers: new Set(),
-    temps: 0,
   }
   const [nodeTransforms, directiveTransforms] = getBaseTransformPreset()