fix(titleProp): handle the existing title case by using element instead of value (children) (#315)

Instead of return the children of title from conditional expression, we can return the title element itself e.g. If title is undefined then return the existing title else return:
`<title>{title}</title>`

Author: Sudhir Mitharwal

packages/babel-plugin-svg-dynamic-title/src/index.js

@@ -11,31 +11,36 @@ const plugin = ({ types: t }) => ({
         return
       }
 
-      function getTitleElement(existingTitleChildren = []) {
-        // create the expression for the title rendering
-        let expression = t.identifier('title')
-        // get the existing title string value
-        const existingTitle = (existingTitleChildren || [])
-          .map(c => c.value)
-          .join()
-        if (existingTitle) {
-          // if title exists
-          // render as follows
-          // {title === undefined ? existingTitle : title}
-          expression = t.conditionalExpression(
-            t.binaryExpression('===', expression, t.identifier('undefined')),
-            t.stringLiteral(existingTitle),
-            expression,
-          )
-        }
-
-        // create a title element with the given expression
+      function createTitle(children = []) {
         return t.jsxElement(
           t.jsxOpeningElement(t.jsxIdentifier('title'), []),
           t.jsxClosingElement(t.jsxIdentifier('title')),
-          [t.jsxExpressionContainer(expression)],
+          children,
         )
       }
+      function getTitleElement(existingTitleChildren = []) {
+        const titleExpression = t.identifier('title')
+        let titleElement = createTitle([
+          t.jsxExpressionContainer(titleExpression),
+        ])
+        if (existingTitleChildren && existingTitleChildren.length) {
+          // if title already exists
+          // render as follows
+          const fallbackTitleElement = createTitle(existingTitleChildren)
+          // {title === undefined ? fallbackTitleElement : titleElement}
+          const conditionalExpressionForTitle = t.conditionalExpression(
+            t.binaryExpression(
+              '===',
+              titleExpression,
+              t.identifier('undefined'),
+            ),
+            fallbackTitleElement,
+            titleElement,
+          )
+          titleElement = t.jsxExpressionContainer(conditionalExpressionForTitle)
+        }
+        return titleElement
+      }
 
       // store the title element
       let titleElement

packages/babel-plugin-svg-dynamic-title/src/index.test.js

@@ -17,12 +17,23 @@ describe('plugin', () => {
     )
   })
 
-  it('should add title attribute and fallback to existing title', () => {
-    expect(testPlugin('<svg><title>Hello</title></svg>')).toMatchInlineSnapshot(
-      `"<svg><title>{title === undefined ? \\"Hello\\" : title}</title></svg>;"`,
+  it('should add title element and fallback to existing title', () => {
+    // testing when the existing title contains a simple string
+    expect(testPlugin(`<svg><title>Hello</title></svg>`)).toMatchInlineSnapshot(
+      `"<svg>{title === undefined ? <title>Hello</title> : <title>{title}</title>}</svg>;"`,
+    )
+    // testing when the existing title contains an JSXExpression
+    expect(
+      testPlugin(`<svg><title>{"Hello"}</title></svg>`),
+    ).toMatchInlineSnapshot(
+      `"<svg>{title === undefined ? <title>{\\"Hello\\"}</title> : <title>{title}</title>}</svg>;"`,
+    )
+  })
+  it('should support empty title', () => {
+    expect(testPlugin('<svg><title></title></svg>')).toMatchInlineSnapshot(
+      `"<svg><title>{title}</title></svg>;"`,
     )
   })
-
   it('should support self closing title', () => {
     expect(testPlugin('<svg><title /></svg>')).toMatchInlineSnapshot(
       `"<svg><title>{title}</title></svg>;"`,

packages/babel-preset/src/index.test.js

@@ -69,8 +69,9 @@ describe('preset', () => {
             `)
   })
   it('should handle titleProp and fallback on existing title', () => {
+    // testing when existing title has string as chilren
     expect(
-      testPreset('<svg><title>Old</title></svg>', {
+      testPreset(`<svg><title>Hello</title></svg>`, {
         titleProp: true,
         state: {
           componentName: 'SvgComponent',
@@ -81,7 +82,24 @@ describe('preset', () => {
                   
                   const SvgComponent = ({
                     title
-                  }) => <svg><title>{title === undefined ? \\"Old\\" : title}</title></svg>;
+                  }) => <svg>{title === undefined ? <title>Hello</title> : <title>{title}</title>}</svg>;
+                  
+                  export default SvgComponent;"
+            `)
+    // testing when existing title has JSXExpression as children
+    expect(
+      testPreset(`<svg><title>{"Hello"}</title></svg>`, {
+        titleProp: true,
+        state: {
+          componentName: 'SvgComponent',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = ({
+                    title
+                  }) => <svg>{title === undefined ? <title>{\\"Hello\\"}</title> : <title>{title}</title>}</svg>;
                   
                   export default SvgComponent;"
             `)