feat: add support for TypeScript

Author: Tobias Høegh

__mocks__/ExamplesTypeAnnotations.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const ComponentBox = ({ children }) => children
+
+export const MockTypeAnnotations = () => {
+  const value = 'hello' as string
+
+  return (
+    <ComponentBox data-test="id">
+      <span>{value as string}</span>
+    </ComponentBox>
+  )
+}

__tests__/babelPluginReactLive.test.ts

@@ -134,9 +134,54 @@ describe('transformFileAsync', () => {
     expect(formattedCode.match(/\{`/g)).toHaveLength(8)
     expect(formattedCode.match(/`\}/g)).toHaveLength(8)
   })
+
+  it('should format TypeScript syntax with the babel-ts parser', async () => {
+    const targetFileWithTypes = nodePath.resolve(
+      __dirname,
+      '../__mocks__/ExamplesTypeAnnotations.tsx'
+    )
+    const pluginOptionsWithTypes = {
+      componentName: 'ComponentBox',
+      filesToMatch: ['ExamplesTypeAnnotations.tsx'],
+      prettierPath,
+    }
+
+    const babelFileResult = await transformFileAsync(targetFileWithTypes, {
+      code: true,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: { firefox: '100' },
+          },
+        ],
+      ],
+      plugins: [[babelPluginReactLive, pluginOptionsWithTypes]],
+    })
+
+    const code = removeConsoleNinja(String(babelFileResult?.code))
+
+    const formattedCode = prettier.format(code, {
+      filepath: 'file.tsx',
+      semi: false,
+    })
+
+    expect(formattedCode).toMatchInlineSnapshot(`
+      "const ComponentBox = ({ children }) => children
+      export const MockTypeAnnotations = () => {
+        const value = "hello"
+        return (
+          <ComponentBox data-test="id">{\`<span>{value as string}</span>
+      \`}</ComponentBox>
+        )
+      }
+      "
+    `)
+  })
 })
 
-function removeConsoleNinja(code) {
+function removeConsoleNinja(code: string): string {
   if (code.includes('oo_cm')) {
     const index = code.indexOf('function oo_cm()')
     code = code.slice(0, index)

babelPluginReactLive.js

@@ -20,7 +20,7 @@ function babelPluginReactLive(babel, options) {
 
     code = prettier.format(code, {
       ...prettierrc,
-      parser: 'babel',
+      parser: 'babel-ts',
     })
 
     // Prettier adds a leading ;

package.json

@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/dnbexperience/eufemia.git"
   },
-  "version": "1.4.4",
+  "version": "1.4.5",
   "main": "babelPluginReactLive.js",
   "scripts": {
     "test": "jest",