From af05a56fd31bebe2a126efc24e5858d97d3c09e2 Mon Sep 17 00:00:00 2001
From: Kai Vandivier <kpvandivier@gmail.com>
Date: Mon, 3 Mar 2025 18:24:08 +0100
Subject: [PATCH 1/2] fix: compile styled-jsx in apps

---
 cli/config/makeBabelConfig.js   | 45 +++++++++++++++++++++------------
 cli/src/lib/compiler/compile.js | 16 +++++++-----
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/cli/config/makeBabelConfig.js b/cli/config/makeBabelConfig.js
index 0907fdc4f..6b2039ab1 100644
--- a/cli/config/makeBabelConfig.js
+++ b/cli/config/makeBabelConfig.js
@@ -15,9 +15,36 @@ const getBabelModuleType = (moduleType) => {
             return false
     }
 }
-const makeBabelConfig = ({ moduleType, mode }) => {
+const makeBabelConfig = ({ moduleType, mode, isAppType }) => {
     const isTest = mode === 'test'
 
+    const styledJsxConfig = {
+        env: {
+            production: {
+                plugins: [
+                    [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+                ],
+            },
+            development: {
+                plugins: [
+                    [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+                ],
+            },
+            test: {
+                plugins: [require('styled-jsx/babel-test')],
+            },
+        },
+    }
+
+    // Minimal transpiling for apps
+    if (isAppType) {
+        return {
+            presets: ['@babel/preset-typescript'],
+            ...styledJsxConfig,
+        }
+    }
+
+    // More for libs
     return {
         presets: [
             require('@babel/preset-react'),
@@ -53,21 +80,7 @@ const makeBabelConfig = ({ moduleType, mode }) => {
             // Adds support for default value using ?? operator
             require('@babel/plugin-proposal-nullish-coalescing-operator'),
         ],
-        env: {
-            production: {
-                plugins: [
-                    [require('styled-jsx/babel'), { optimizeForSpeed: true }],
-                ],
-            },
-            development: {
-                plugins: [
-                    [require('styled-jsx/babel'), { optimizeForSpeed: true }],
-                ],
-            },
-            test: {
-                plugins: [require('styled-jsx/babel-test')],
-            },
-        },
+        ...styledJsxConfig,
     }
 }
 
diff --git a/cli/src/lib/compiler/compile.js b/cli/src/lib/compiler/compile.js
index e68744b52..972d7d9bc 100644
--- a/cli/src/lib/compiler/compile.js
+++ b/cli/src/lib/compiler/compile.js
@@ -94,7 +94,9 @@ const compile = async ({
         fs.copySync(paths.shellSourcePublic, paths.shellPublic)
     }
 
-    const babelConfig = makeBabelConfig({ moduleType, mode })
+    const babelConfig = makeBabelConfig({ moduleType, mode, isAppType })
+
+    console.log({ babelConfig })
 
     const copyFile = async (source, destination) => {
         reporter.debug(
@@ -112,18 +114,20 @@ const compile = async ({
                     babelConfig
                 )
 
-                // Always write .js files
-                const jsDestination = normalizeExtension(destination)
+                // Always write .js files for libraries; don't change for apps
+                const resolvedDestination = isAppType
+                    ? destination
+                    : normalizeExtension(destination)
 
                 reporter.debug(
                     `Compiled ${prettyPrint.relativePath(
                         source
                     )} with Babel, saving to ${prettyPrint.relativePath(
-                        jsDestination
+                        resolvedDestination
                     )}`
                 )
 
-                await fs.writeFile(jsDestination, result.code)
+                await fs.writeFile(resolvedDestination, result.code)
             } catch (err) {
                 reporter.dumpErr(err)
                 reporter.error(
@@ -143,7 +147,7 @@ const compile = async ({
             outputDir: outDir,
             // todo: handle lib compilations with Vite
             // https://dhis2.atlassian.net/browse/LIBS-722
-            processFileCallback: isAppType ? copyFile : compileFile,
+            processFileCallback: compileFile,
             watch,
         }),
         isAppType &&

From e8bf56f13457a01e36ba0909d15b0ae9f638b8a2 Mon Sep 17 00:00:00 2001
From: Kai Vandivier <kpvandivier@gmail.com>
Date: Mon, 3 Mar 2025 18:39:33 +0100
Subject: [PATCH 2/2] chore: remove console log

---
 cli/src/lib/compiler/compile.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cli/src/lib/compiler/compile.js b/cli/src/lib/compiler/compile.js
index 972d7d9bc..32a07ded8 100644
--- a/cli/src/lib/compiler/compile.js
+++ b/cli/src/lib/compiler/compile.js
@@ -96,8 +96,6 @@ const compile = async ({
 
     const babelConfig = makeBabelConfig({ moduleType, mode, isAppType })
 
-    console.log({ babelConfig })
-
     const copyFile = async (source, destination) => {
         reporter.debug(
             `Copying ${prettyPrint.relativePath(