From a91067d3da083395c47d27aa18ed2cc76e10cd61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <Tobias.Hoegh@dnb.no>
Date: Mon, 19 Jan 2026 15:55:25 +0100
Subject: [PATCH] feat: add support for TypeScript

---
 __mocks__/ExamplesTypeAnnotations.tsx  | 13 +++++++
 __tests__/babelPluginReactLive.test.ts | 47 +++++++++++++++++++++++++-
 babelPluginReactLive.js                |  2 +-
 package.json                           |  2 +-
 4 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 __mocks__/ExamplesTypeAnnotations.tsx

diff --git a/__mocks__/ExamplesTypeAnnotations.tsx b/__mocks__/ExamplesTypeAnnotations.tsx
new file mode 100644
index 0000000..b67dfb1
--- /dev/null
+++ b/__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>
+  )
+}
diff --git a/__tests__/babelPluginReactLive.test.ts b/__tests__/babelPluginReactLive.test.ts
index a76380f..19dc161 100644
--- a/__tests__/babelPluginReactLive.test.ts
+++ b/__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)
diff --git a/babelPluginReactLive.js b/babelPluginReactLive.js
index d0dd4c1..8415b75 100644
--- a/babelPluginReactLive.js
+++ b/babelPluginReactLive.js
@@ -20,7 +20,7 @@ function babelPluginReactLive(babel, options) {
 
     code = prettier.format(code, {
       ...prettierrc,
-      parser: 'babel',
+      parser: 'babel-ts',
     })
 
     // Prettier adds a leading ;
diff --git a/package.json b/package.json
index d3305b0..57874f9 100644
--- a/package.json
+++ b/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",