perf: use createElementVNode (#2)

Author: KaelWD

packages/babel-plugin-jsx/src/index.ts

@@ -61,6 +61,7 @@ export default declare<VueJSXPluginOptions, BabelCore.PluginObj<State>>(
             if (hasJSX(path)) {
               const importNames = [
                 'createVNode',
+                'createElementVNode',
                 'Fragment',
                 'resolveComponent',
                 'withDirectives',
@@ -73,6 +74,10 @@ export default declare<VueJSXPluginOptions, BabelCore.PluginObj<State>>(
                 'vModelDynamic',
                 'resolveDirective',
                 'mergeProps',
+                'normalizeProps',
+                'normalizeClass',
+                'normalizeStyle',
+                'guardReactiveProps',
                 'createTextVNode',
                 'isVNode',
               ];
@@ -179,6 +184,7 @@ export default declare<VueJSXPluginOptions, BabelCore.PluginObj<State>>(
 
               if (pragma) {
                 state.set('createVNode', () => t.identifier(pragma));
+                state.set('createElementVNode', () => t.identifier(pragma));
               }
 
               if (file.ast.comments) {

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -310,7 +310,19 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
       );
     } else {
       // single no need for a mergeProps call
-      propsExpression = mergeArgs[0];
+      if (isComponent) {
+        // createVNode already normalizes props
+        propsExpression = mergeArgs[0];
+      } else {
+        propsExpression = t.callExpression(
+          createIdentifier(state, 'normalizeProps'),
+          [
+            t.callExpression(createIdentifier(state, 'guardReactiveProps'), [
+              mergeArgs[0],
+            ]),
+          ]
+        );
+      }
     }
   } else if (properties.length) {
     // single no need for spread
@@ -320,6 +332,27 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
       propsExpression = t.objectExpression(
         dedupeProperties(properties, mergeProps)
       );
+      for (let i = 0; i < propsExpression.properties.length; i++) {
+        const property = propsExpression.properties[i];
+        if (
+          !t.isObjectProperty(property) ||
+          !t.isStringLiteral(property.key) ||
+          !t.isExpression(property.value) ||
+          isConstant(property.value)
+        )
+          continue;
+        if (property.key.value === 'class') {
+          property.value = t.callExpression(
+            createIdentifier(state, 'normalizeClass'),
+            [property.value]
+          );
+        } else if (property.key.value === 'style') {
+          property.value = t.callExpression(
+            createIdentifier(state, 'normalizeStyle'),
+            [property.value]
+          );
+        }
+      }
     }
   }
 
@@ -553,7 +586,7 @@ const transformJSXElement = (
   }
 
   const createVNode = t.callExpression(
-    createIdentifier(state, 'createVNode'),
+    createIdentifier(state, isComponent ? 'createVNode' : 'createElementVNode'),
     [
       tag,
       props,

packages/babel-plugin-jsx/test/__snapshots__/resolve-type.test.tsx.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`resolve type > runtime props > basic 1`] = `
-"import { createVNode as _createVNode } from "vue";
+"import { createElementVNode as _createElementVNode } from "vue";
 interface Props {
   foo?: string;
 }
-const App = defineComponent((props: Props) => _createVNode("div", null, null), {
+const App = defineComponent((props: Props) => _createElementVNode("div", null, null), {
   props: {
     foo: {
       type: String,