Fix for tspan (#2149)

* fix tspan

* add changeset

Author: jeetiss

.changeset/nasty-dolphins-hide.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/renderer': patch
+---
+
+Fix "Invalid" error when a text label is a child of a Tspan element

packages/renderer/src/renderer.js

@@ -12,11 +12,12 @@ import propsEqual from './utils/propsEqual';
 const emptyObject = {};
 
 const appendChild = (parentInstance, child) => {
-  const isParentLink = parentInstance.type === 'LINK';
-  const isParentText = parentInstance.type === 'TEXT';
+  const isParentText =
+    parentInstance.type === 'TEXT' ||
+    parentInstance.type === 'LINK' ||
+    parentInstance.type === 'TSPAN';
   const isChildTextInstance = child.type === 'TEXT_INSTANCE';
-  const isOrphanTextInstance =
-    isChildTextInstance && !isParentText && !isParentLink;
+  const isOrphanTextInstance = isChildTextInstance && !isParentText;
 
   // Ignore orphan text instances.
   // Caused by cases such as <>{name && <Text>{name}</Text>}</>

packages/renderer/tests/snapshots/svg-test-js-svg-should-render-tspan-component-1-snap.png

@@ -0,0 +1,39 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import React from 'react';
+import { Document, Page, Svg, Font, Text, Tspan } from '..';
+import renderToImage from './renderComponent';
+
+// pdf.js does not render default fonts in node and I use Open Sans (:
+Font.register({
+  family: 'Open Sans',
+  src: 'https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf',
+});
+
+const mount = async children => {
+  const image = await renderToImage(
+    <Document>
+      <Page style={{ border: '1 solid #e2e2e2' }} size={[54, 47]}>
+        {children}
+      </Page>
+    </Document>,
+  );
+
+  return image;
+};
+
+describe('Svg', () => {
+  test('should render Tspan component', async () => {
+    const image = await mount(
+      <Svg width={52} viewBox="0 0 52 45">
+        <Text x={2} y={20} style={{ fontFamily: 'Open Sans' }}>
+          hello{' '}
+          <Tspan x={2} y={35} fill="red">
+            world
+          </Tspan>
+        </Text>
+      </Svg>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
+});