fix: don't transform empty string to boolean

closes #653
vuejs · Jun 29, 2023 · a030d15 · a030d15
1 parent e73b065
commit a030d15
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts
@@ -16,6 +16,7 @@ import {
   transformJSXSpreadAttribute,
   transformJSXSpreadChild,
   transformJSXText,
+  transformText,
   walksScope,
 } from './utils';
 import SlotFlags from './slotFlags';
@@ -36,7 +37,7 @@ const getJSXAttributeValue = (
     return transformJSXElement(valuePath, state);
   }
   if (valuePath.isStringLiteral()) {
-    return transformJSXText(valuePath);
+    return t.stringLiteral(transformText(valuePath.node.value));
   }
   if (valuePath.isJSXExpressionContainer()) {
     return transformJSXExpressionContainer(valuePath);

diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts
@@ -140,8 +140,12 @@ export const getJSXAttributeName = (path: NodePath<t.JSXAttribute>): string => {
 export const transformJSXText = (
   path: NodePath<t.JSXText | t.StringLiteral>
 ): t.StringLiteral | null => {
-  const { node } = path;
-  const lines = node.value.split(/\r\n|\n|\r/);
+  const str = transformText(path.node.value);
+  return str !== '' ? t.stringLiteral(str) : null;
+};
+
+export const transformText = (text: string) => {
+  const lines = text.split(/\r\n|\n|\r/);
 
   let lastNonEmptyLine = 0;
 
@@ -182,7 +186,7 @@ export const transformJSXText = (
     }
   }
 
-  return str !== '' ? t.stringLiteral(str) : null;
+  return str;
 };
 
 /**

diff --git a/packages/babel-plugin-jsx/test/index.test.tsx b/packages/babel-plugin-jsx/test/index.test.tsx
@@ -254,6 +254,15 @@ describe('Transform JSX', () => {
 
     expect(calls).toEqual(expect.arrayContaining([3, 4]));
   });
+
+  test('empty string', () => {
+    const wrapper = shallowMount({
+      setup() {
+        return () => <h1 title=""></h1>;
+      },
+    });
+    expect(wrapper.html()).toBe('<h1 title=""></h1>');
+  });
 });
 
 describe('directive', () => {