feat(gatsby-transformer-react-docgen): allow parsing typescript files (…

…#11265) Typescript has no mime type :/
gatsbyjs · Jan 29, 2019 · c9a8991 · c9a8991
1 parent 068fb08
commit c9a8991
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js b/packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js
@@ -28,7 +28,10 @@ describe(`transformer-react-doc-gen: onCreateNode`, () => {
       opts
     )
 
+  let consoleError
   beforeEach(() => {
+    consoleError = global.console.error
+    global.console.error = jest.fn()
     createdNodes = []
     updatedNodes = []
     node = {
@@ -46,16 +49,35 @@ describe(`transformer-react-doc-gen: onCreateNode`, () => {
     }
   })
 
-  it(`should only process javascript and jsx nodes`, async () => {
-    loadNodeContent = jest.fn(() => new Promise(() => {}))
+  afterAll(() => {
+    global.console.error = consoleError
+  })
 
-    expect(await run({ internal: { mediaType: `text/x-foo` } })).toBeUndefined()
-    expect(
-      run({ internal: { mediaType: `application/javascript` } })
-    ).toBeDefined()
-    expect(run({ internal: { mediaType: `text/jsx` } })).toBeDefined()
+  it(`should only process javascript, jsx, and typescript nodes`, async () => {
+    loadNodeContent = jest.fn().mockResolvedValue({})
+
+    const unknown = [
+      null,
+      { internal: { mediaType: `text/x-foo` } },
+      { internal: { mediaType: `text/markdown` } },
+    ]
+
+    const expected = [
+      { internal: { mediaType: `application/javascript` } },
+      { internal: { mediaType: `text/jsx` } },
+      { internal: { mediaType: `text/tsx` } },
+      { internal: {}, extension: `tsx` },
+      { internal: {}, extension: `ts` },
+    ]
+
+    await Promise.all(
+      []
+        .concat(unknown)
+        .concat(expected)
+        .map(node => run(node))
+    )
 
-    expect(loadNodeContent.mock.calls).toHaveLength(2)
+    expect(loadNodeContent).toHaveBeenCalledTimes(expected.length)
   })
 
   it(`should extract all components in a file`, async () => {

diff --git a/packages/gatsby-transformer-react-docgen/src/on-node-create.js b/packages/gatsby-transformer-react-docgen/src/on-node-create.js
@@ -10,6 +10,19 @@ const digest = str =>
 const propsId = (parentId, name) => `${parentId}--ComponentProp-${name}`
 const descId = parentId => `${parentId}--ComponentDescription`
 
+function canParse(node) {
+  return (
+    node &&
+    (node.internal.mediaType === `application/javascript` ||
+      // Typescript doesn't really have a mime type and .ts files are a media file :/
+      node.internal.mediaType === `application/typescript` ||
+      node.internal.mediaType === `text/jsx` ||
+      node.internal.mediaType === `text/tsx` ||
+      node.extension === `tsx` ||
+      node.extension === `ts`)
+  )
+}
+
 function createDescriptionNode(node, entry, actions, createNodeId) {
   if (!entry.description) return node
   const { createNode } = actions
@@ -69,11 +82,7 @@ export default async function onCreateNode(
 ) {
   const { createNode, createParentChildLink } = actions
 
-  if (
-    node.internal.mediaType !== `application/javascript` &&
-    node.internal.mediaType !== `text/jsx`
-  )
-    return
+  if (!canParse(node)) return
 
   const content = await loadNodeContent(node)