fix: skip empty text instance creation in jsx conditions

.changeset/mean-pots-allow.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/renderer': patch
+---
+
+fix: skip empty text instance creation in jsx conditions

packages/renderer/src/renderer.js

@@ -11,6 +11,23 @@ import propsEqual from './utils/propsEqual';
 
 const emptyObject = {};
 
+const appendChild = (parentInstance, child) => {
+  const isParentText = parentInstance.type === 'TEXT';
+  const isChildTextInstance = child.type === 'TEXT_INSTANCE';
+  const isOrphanTextInstance = isChildTextInstance && !isParentText;
+
+  // Ignore orphan text instances.
+  // Caused by cases such as <>{name && <Text>{name}</Text>}</>
+  if (isOrphanTextInstance) {
+    console.warn(
+      `Invalid '${child.value}' string child outside <Text> component`,
+    );
+    return;
+  }
+
+  parentInstance.children.push(child);
+};
+
 const createRenderer = ({ onChange = () => {} }) => {
   return ReactFiberReconciler({
     schedulePassiveEffects,
@@ -23,9 +40,7 @@ const createRenderer = ({ onChange = () => {} }) => {
 
     warnsIfNotActing: false,
 
-    appendInitialChild(parentInstance, child) {
-      parentInstance.children.push(child);
-    },
+    appendInitialChild: appendChild,
 
     createInstance(type, { style, children, ...props }) {
       return {
@@ -83,15 +98,13 @@ const createRenderer = ({ onChange = () => {} }) => {
 
     useSyncScheduling: true,
 
-    appendChild(parentInstance, child) {
-      parentInstance.children.push(child);
-    },
+    appendChild,
 
     appendChildToContainer(parentInstance, child) {
       if (parentInstance.type === 'ROOT') {
         parentInstance.document = child;
       } else {
-        parentInstance.children.push(child);
+        appendChild(parentInstance, child);
       }
     },
 

packages/renderer/tests/orphanTexts.test.js

@@ -0,0 +1,48 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+import React from 'react';
+import { Text, Document, Page } from '@react-pdf/primitives';
+import renderToImage from './renderComponent';
+
+const emptyString = '';
+
+const mount = async children => {
+  const image = await renderToImage(
+    <Document>
+      <Page>{children}</Page>
+    </Document>,
+  );
+
+  return image;
+};
+
+describe('renderer', () => {
+  test('empty string', async () => {
+    const image = await mount(<>{emptyString && <Text>{emptyString}</Text>}</>);
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('string', async () => {
+    const image = await mount(<>{'text' || <Text>text</Text>}</>);
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('boolean', async  () => {
+    const image = await mount(<>{true || <Text>text</Text>}</>);
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('zero', async () => {
+    const image = await mount(<>{0 && <Text>text</Text>}</>);
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('numbers', async () => {
+    const image = await mount(<>{10 || <Text>text</Text>}</>);
+
+    expect(image).toMatchImageSnapshot();
+  });
+});