fix: leave compilation to Vite to enable HMR and .jsx files

dhis2 · Apr 22, 2024 · 554ac0b · 554ac0b
1 parent 93799a6
commit 554ac0b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 38 deletions.
diff --git a/cli/src/lib/compiler/compile.js b/cli/src/lib/compiler/compile.js
@@ -1,22 +1,23 @@
 const path = require('path')
-const babel = require('@babel/core')
-const { reporter, prettyPrint } = require('@dhis2/cli-helpers-engine')
+// const babel = require('@babel/core')
+const { reporter /* prettyPrint */ } = require('@dhis2/cli-helpers-engine')
 const chokidar = require('chokidar')
 const fs = require('fs-extra')
-const makeBabelConfig = require('../../../config/makeBabelConfig.js')
+// const makeBabelConfig = require('../../../config/makeBabelConfig.js')
 const {
     verifyEntrypoints,
     createAppEntrypointWrapper,
     createPluginEntrypointWrapper,
 } = require('./entrypoints.js')
-const {
-    extensionPattern,
-    normalizeExtension,
-} = require('./extensionHelpers.js')
+// const {
+// extensionPattern,
+// normalizeExtension,
+// } = require('./extensionHelpers.js')
 
 const watchFiles = ({ inputDir, outputDir, processFileCallback, watch }) => {
     const compileFile = async (source) => {
-        const relative = normalizeExtension(path.relative(inputDir, source))
+        const relative = path.relative(inputDir, source)
+        // const relative = normalizeExtension(path.relative(inputDir, source))
         const destination = path.join(outputDir, relative)
         reporter.debug(
             `File ${relative} changed or added... dest: `,
@@ -64,7 +65,7 @@ const compile = async ({
     config,
     paths,
     moduleType = 'es',
-    mode = 'development',
+    // mode = 'development',
     watch = false,
 }) => {
     const isApp = config.type === 'app'
@@ -94,37 +95,40 @@ const compile = async ({
         fs.copySync(paths.shellSourcePublic, paths.shellPublic)
     }
 
-    const babelConfig = makeBabelConfig({ moduleType, mode })
+    // const babelConfig = makeBabelConfig({ moduleType, mode })
 
     const copyFile = async (source, destination) => {
+        reporter.info(`Copying file ${source}`)
         await fs.copy(source, destination)
     }
-    const compileFile = async (source, destination) => {
-        if (source.match(extensionPattern)) {
-            try {
-                const result = await babel.transformFileAsync(
-                    source,
-                    babelConfig
-                )
-                await fs.writeFile(destination, result.code)
-            } catch (err) {
-                reporter.dumpErr(err)
-                reporter.error(
-                    `Failed to compile ${prettyPrint.relativePath(
-                        source
-                    )}. Fix the problem and save the file to automatically reload.`
-                )
-            }
-        } else {
-            await copyFile(source, destination)
-        }
-    }
+    // const compileFile = async (source, destination) => {
+    //     reporter.info(`compiling file ${source}`)
+    //     if (source.match(extensionPattern)) {
+    //         try {
+    //             const result = await babel.transformFileAsync(
+    //                 source,
+    //                 babelConfig
+    //             )
+    //             await fs.writeFile(destination, result.code)
+    //         } catch (err) {
+    //             reporter.dumpErr(err)
+    //             reporter.error(
+    //                 `Failed to compile ${prettyPrint.relativePath(
+    //                     source
+    //                 )}. Fix the problem and save the file to automatically reload.`
+    //             )
+    //         }
+    //     } else {
+    //         await copyFile(source, destination)
+    //     }
+    // }
 
     return Promise.all([
         watchFiles({
             inputDir: paths.src,
             outputDir: outDir,
-            processFileCallback: compileFile,
+            // todo: still compile for libs?
+            processFileCallback: copyFile,
             watch,
         }),
         isApp &&

diff --git a/cli/src/lib/compiler/entrypoints.js b/cli/src/lib/compiler/entrypoints.js
@@ -1,7 +1,6 @@
 const path = require('path')
 const { reporter, chalk } = require('@dhis2/cli-helpers-engine')
 const fs = require('fs-extra')
-const { normalizeExtension } = require('./extensionHelpers.js')
 
 const verifyEntrypoint = ({ entrypoint, basePath, resolveModule }) => {
     if (!entrypoint.match(/^(\.\/)?src\//)) {
@@ -81,12 +80,11 @@ exports.verifyEntrypoints = ({
 
 const getEntrypointWrapper = async ({ entrypoint, paths }) => {
     const relativeEntrypoint = entrypoint.replace(/^(\.\/)?src\//, '')
-    const outRelativeEntrypoint = normalizeExtension(relativeEntrypoint)
     const shellAppSource = await fs.readFile(paths.shellSourceEntrypoint)
 
     return shellAppSource
         .toString()
-        .replace(/'.\/D2App\/app'/g, `'./D2App/${outRelativeEntrypoint}'`)
+        .replace(/'.\/D2App\/app'/g, `'./D2App/${relativeEntrypoint}'`)
 }
 
 exports.createAppEntrypointWrapper = async ({ entrypoint, paths }) => {

diff --git a/examples/simple-app/d2.config.js b/examples/simple-app/d2.config.js
@@ -8,7 +8,7 @@ const config = {
     // standalone: true, // Don't bake-in a DHIS2 base URL, allow the user to choose
 
     entryPoints: {
-        app: './src/App.js',
+        app: './src/App.jsx',
     },
 
     dataStoreNamespace: 'testapp-namespace',

diff --git a/examples/simple-app/src/Alerter.js → examples/simple-app/src/Alerter.jsx b/examples/simple-app/src/Alerter.js → examples/simple-app/src/Alerter.jsx
@@ -23,7 +23,7 @@ export const Alerter = () => {
                 checked={critical}
                 onChange={() => setCritical(!critical)}
             />
-            <Button onClick={() => show(message)}>Show alert</Button>
+            <Button onClick={() => show(message)}>Show alert loolooloo</Button>
             <Button onClick={hide}>Hide alert</Button>
             <style jsx>{`
                 div {

diff --git a/examples/simple-app/src/App.js → examples/simple-app/src/App.jsx b/examples/simple-app/src/App.js → examples/simple-app/src/App.jsx
@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import moment from 'moment'
 import React from 'react'
-import { Alerter } from './Alerter.js'
+import { Alerter } from './Alerter.jsx'
 import style from './App.style.js'
 import i18n from './locales/index.js'
 
@@ -21,6 +21,7 @@ const Component = () => {
             {data && (
                 <>
                     <h1>{i18n.t('Hello {{name}}', { name: data.me.name })}</h1>
+                    <h2>:O</h2>
                     <h3>
                         {i18n.t('Have a great {{dayOfTheWeek}}!', {
                             dayOfTheWeek:

diff --git a/shell/vite.config.js b/shell/vite.config.js
@@ -18,6 +18,7 @@ export default defineConfig(({ mode }) => {
 
     return {
         plugins: [
+            // Allow JSX in JS files pt. 1
             {
                 name: 'treat-js-files-as-jsx',
                 async transform(code, id) {
@@ -33,7 +34,11 @@ export default defineConfig(({ mode }) => {
                     })
                 },
             },
-            react(),
+            react({
+                babel: {
+                    plugins: ['styled-jsx/babel'],
+                },
+            }),
         ],
 
         // By default, assets are resolved to the root of the domain ('/'), but
@@ -49,6 +54,14 @@ export default defineConfig(({ mode }) => {
         // Need to add vars on process.env here -- drop-in replacement
         define: defineOptions,
 
+        server: {
+            port: 5173,
+            // strictPort: true,
+            // hmr: {
+            //     port: 5573,
+            // },
+        },
+
         build: {
             rollupOptions: {
                 input: {
@@ -72,6 +85,7 @@ export default defineConfig(({ mode }) => {
             },
         },
 
+        // Allow JSX in JS files pt. 2
         optimizeDeps: {
             force: true,
             esbuildOptions: {