don't gate behind optimize

Author: KaelWD

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

@@ -184,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

@@ -78,7 +78,7 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
 
   const mergeArgs: (t.CallExpression | t.ObjectExpression | t.Identifier)[] =
     [];
-  const { mergeProps = true, optimize = false } = state.opts;
+  const { mergeProps = true } = state.opts;
   props.forEach((prop) => {
     if (prop.isJSXAttribute()) {
       let name = getJSXAttributeName(prop);
@@ -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,34 +332,25 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
       propsExpression = t.objectExpression(
         dedupeProperties(properties, mergeProps)
       );
-      if (optimize) {
-        if (hasClassBinding) {
-          const klass = propsExpression.properties.find(
-            (prop) =>
-              t.isObjectProperty(prop) &&
-              t.isStringLiteral(prop.key) &&
-              prop.key.value === 'class'
+      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]
           );
-          if (t.isObjectProperty(klass)) {
-            klass.value = t.callExpression(
-              createIdentifier(state, 'normalizeClass'),
-              [klass.value as any]
-            );
-          }
-        }
-        if (hasStyleBinding) {
-          const style = propsExpression.properties.find(
-            (prop) =>
-              t.isObjectProperty(prop) &&
-              t.isStringLiteral(prop.key) &&
-              prop.key.value === 'style'
+        } else if (property.key.value === 'style') {
+          property.value = t.callExpression(
+            createIdentifier(state, 'normalizeStyle'),
+            [property.value]
           );
-          if (t.isObjectProperty(style)) {
-            style.value = t.callExpression(
-              createIdentifier(state, 'normalizeStyle'),
-              [style.value as any]
-            );
-          }
         }
       }
     }
@@ -583,12 +586,7 @@ const transformJSXElement = (
   }
 
   const createVNode = t.callExpression(
-    optimize
-      ? createIdentifier(
-          state,
-          isComponent ? 'createVNode' : 'createElementVNode'
-        )
-      : 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,

packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`_Fragment already imported > _Fragment already imported 1`] = `
-"import { Fragment as _Fragment, Fragment as _Fragment2, createTextVNode as _createTextVNode, createVNode as _createVNode } from 'vue';
-const Root1 = () => _createVNode(_Fragment2, null, [_createTextVNode("root1")]);
-const Root2 = () => _createVNode(_Fragment, null, [_createTextVNode("root2")]);"
+"import { Fragment as _Fragment, Fragment as _Fragment2, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from 'vue';
+const Root1 = () => _createElementVNode(_Fragment2, null, [_createTextVNode("root1")]);
+const Root2 = () => _createElementVNode(_Fragment, null, [_createTextVNode("root2")]);"
 `;
 
 exports[`MereProps Order > MereProps Order 1`] = `
@@ -125,8 +125,8 @@ _withDirectives(_createElementVNode("input", {
 `;
 
 exports[`isCustomElement > isCustomElement 1`] = `
-"import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
-_createVNode("foo", null, [_createVNode("span", null, [_createTextVNode("foo")])]);"
+"import { createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue";
+_createElementVNode("foo", null, [_createElementVNode("span", null, [_createTextVNode("foo")])]);"
 `;
 
 exports[`named import specifier \`Keep Alive\` > named import specifier \`Keep Alive\` 1`] = `
@@ -141,7 +141,7 @@ _createElementVNode(Vue.KeepAlive, null, [_createTextVNode("123")]);"
 `;
 
 exports[`override props multiple > multiple 1`] = `
-"import { resolveComponent as _resolveComponent, createVNode as _createVNode } from "vue";
+"import { resolveComponent as _resolveComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
 _createVNode(_resolveComponent("A"), {
   "loading": true,
   ...a,
@@ -150,13 +150,13 @@ _createVNode(_resolveComponent("A"), {
     d: 2
   },
   "class": "x",
-  "style": x
+  "style": _normalizeStyle(x)
 }, null);"
 `;
 
 exports[`override props single > single 1`] = `
-"import { createVNode as _createVNode } from "vue";
-_createVNode("div", a, null);"
+"import { createElementVNode as _createElementVNode } from "vue";
+_createElementVNode("div", a, null);"
 `;
 
 exports[`passing object slots via JSX children directive in slot > directive in slot 1`] = `
@@ -274,8 +274,8 @@ _createElementVNode("div", null, [_createTextVNode("Vue")]);"
 `;
 
 exports[`single no need for a mergeProps call > single no need for a mergeProps call 1`] = `
-"import { createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue";
-_createElementVNode("div", x, [_createTextVNode("single")], 16);"
+"import { createTextVNode as _createTextVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createElementVNode as _createElementVNode } from "vue";
+_createElementVNode("div", _normalizeProps(_guardReactiveProps(x)), [_createTextVNode("single")], 16);"
 `;
 
 exports[`specifiers should be merged into a single importDeclaration > specifiers should be merged into a single importDeclaration 1`] = `