Merge branch 'alpha' into migration-guide-docs

.eslintignore

@@ -7,4 +7,3 @@ cli/config/templates/init-typescript/entrypoint.tsx
 cli/config/templates/init-typescript/App.test.tsx
 cli/config/templates/init-typescript/global.d.ts
 cli/config/templates/init-typescript/modules.d.ts
-cli/config/templates/init-typescript/eslint.config.js

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [12.0.0-alpha.21](https://github.com/dhis2/app-platform/compare/v12.0.0-alpha.20...v12.0.0-alpha.21) (2024-10-30)
+
+
+### Bug Fixes
+
+* env refactor for Vite wrap-up [LIBS-690] ([#889](https://github.com/dhis2/app-platform/issues/889)) ([84da4e6](https://github.com/dhis2/app-platform/commit/84da4e6464e8dda752857706c91f2e1ba6ab35af))
+
+# [12.0.0-alpha.20](https://github.com/dhis2/app-platform/compare/v12.0.0-alpha.19...v12.0.0-alpha.20) (2024-10-28)
+
+
+### Bug Fixes
+
+* remove custom eslint from TS template ([71cef4b](https://github.com/dhis2/app-platform/commit/71cef4b335be3a697926e7cacd2641d35a6adb4d))
+
 # [12.0.0-alpha.19](https://github.com/dhis2/app-platform/compare/v12.0.0-alpha.18...v12.0.0-alpha.19) (2024-10-10)
 
 

adapter/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-adapter",
-    "version": "12.0.0-alpha.19",
+    "version": "12.0.0-alpha.21",
     "repository": {
         "type": "git",
         "url": "https://github.com/amcgee/dhis2-app-platform",
@@ -21,11 +21,11 @@
         "build"
     ],
     "dependencies": {
-        "@dhis2/pwa": "12.0.0-alpha.19",
+        "@dhis2/pwa": "12.0.0-alpha.21",
         "moment": "^2.24.0"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "12.0.0-alpha.19",
+        "@dhis2/cli-app-scripts": "12.0.0-alpha.21",
         "@testing-library/react": "^16.0.1",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",

cli/config/d2ConfigDefaults.js

@@ -22,55 +22,4 @@ const defaultsLib = {
     },
 }
 
-const defaultsPWA = {
-    pwa: {
-        /**
-         * If true, service worker is registered to perform offline caching
-         * and use of cacheable sections & recording mode is enabled
-         */
-        enabled: false,
-        caching: {
-            /**
-             * If true, don't cache requests to exteral domains in app shell.
-             * Doesn't affect recording mode
-             */
-            omitExternalRequestsFromAppShell: false,
-            /** Deprecated version of above */
-            omitExternalRequests: false,
-            /**
-             * Don't cache URLs matching patterns in this array in app shell.
-             * Doesn't affect recording mode
-             */
-            patternsToOmitFromAppShell: [],
-            /** Deprecated version of above */
-            patternsToOmit: [],
-            /**
-             * Don't cache URLs matching these patterns in recorded sections.
-             * Can still be cached in app shell unless filtered there too.
-             */
-            patternsToOmitFromCacheableSections: [],
-            /**
-             * In addition to the contents of an app's 'build' folder, other
-             * URLs can be precached by adding them to this list which will
-             * add them to the precache manifest at build time. The format of
-             * this list must match the Workbox precache list format:
-             * https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list
-             */
-            additionalManifestEntries: [],
-            /**
-             * By default, all the contents of the `build` folder are added to
-             * the precache to give the app the best chances of functioning
-             * completely while offline. Developers may choose to omit some
-             * of these files (for example, thousands of font or image files)
-             * if they cause cache bloat and the app can work fine without
-             * them precached. See LIBS-482
-             *
-             * The globs should be relative to the public dir of the built app.
-             * Used in injectPrecacheManifest.js
-             */
-            globsToOmitFromPrecache: [],
-        },
-    },
-}
-
-module.exports = { defaultsApp, defaultsLib, defaultsPWA }
+module.exports = { defaultsApp, defaultsLib }

cli/config/d2ConfigDefaults.typescript.js

@@ -14,55 +14,4 @@ const defaultsLib = {
     },
 }
 
-const defaultsPWA = {
-    pwa: {
-        /**
-         * If true, service worker is registered to perform offline caching
-         * and use of cacheable sections & recording mode is enabled
-         */
-        enabled: false,
-        caching: {
-            /**
-             * If true, don't cache requests to exteral domains in app shell.
-             * Doesn't affect recording mode
-             */
-            omitExternalRequestsFromAppShell: false,
-            /** Deprecated version of above */
-            omitExternalRequests: false,
-            /**
-             * Don't cache URLs matching patterns in this array in app shell.
-             * Doesn't affect recording mode
-             */
-            patternsToOmitFromAppShell: [],
-            /** Deprecated version of above */
-            patternsToOmit: [],
-            /**
-             * Don't cache URLs matching these patterns in recorded sections.
-             * Can still be cached in app shell unless filtered there too.
-             */
-            patternsToOmitFromCacheableSections: [],
-            /**
-             * In addition to the contents of an app's 'build' folder, other
-             * URLs can be precached by adding them to this list which will
-             * add them to the precache manifest at build time. The format of
-             * this list must match the Workbox precache list format:
-             * https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list
-             */
-            additionalManifestEntries: [],
-            /**
-             * By default, all the contents of the `build` folder are added to
-             * the precache to give the app the best chances of functioning
-             * completely while offline. Developers may choose to omit some
-             * of these files (for example, thousands of font or image files)
-             * if they cause cache bloat and the app can work fine without
-             * them precached. See LIBS-482
-             *
-             * The globs should be relative to the public dir of the built app.
-             * Used in injectPrecacheManifest.js
-             */
-            globsToOmitFromPrecache: [],
-        },
-    },
-}
-
-module.exports = { defaultsApp, defaultsLib, defaultsPWA }
+module.exports = { defaultsApp, defaultsLib }

cli/config/makeViteConfig.mjs

@@ -18,7 +18,7 @@ import dynamicImport from 'vite-plugin-dynamic-import'
  * Vite normally throws an error when JSX syntax is used in a file without a
  * .jsx or .tsx extension. This is by design, in order to improve transform
  * performance by not parsing JS files for JSX.
- * 
+ *
  * This plugin and the `optimizeDeps` options in this config object,
  * along with the `jsxRuntime: 'classic'` option in the React plugin of the main
  * config, can enable support for JSX in .js files. This config object is
@@ -28,20 +28,22 @@ import dynamicImport from 'vite-plugin-dynamic-import'
  * todo: deprecate -- this config has a performance cost, especially on startup
  */
 const jsxInJsConfig = {
-    plugins: [{
-        name: 'treat-js-files-as-jsx',
-        async transform(code, id) {
-            if (!id.match(/src\/.*\.js$/)) {
-                return null
-            }
-            // Use the exposed transform from vite, instead of directly
-            // transforming with esbuild
-            return transformWithEsbuild(code, id, {
-                loader: 'jsx',
-                jsx: 'automatic',
-            })
+    plugins: [
+        {
+            name: 'treat-js-files-as-jsx',
+            async transform(code, id) {
+                if (!id.match(/src\/.*\.js$/)) {
+                    return null
+                }
+                // Use the exposed transform from vite, instead of directly
+                // transforming with esbuild
+                return transformWithEsbuild(code, id, {
+                    loader: 'jsx',
+                    jsx: 'automatic',
+                })
+            },
         },
-    }],
+    ],
     optimizeDeps: {
         force: true,
         esbuildOptions: { loader: { '.js': 'jsx' } },
@@ -72,8 +74,17 @@ const handleAssetFileNames = ({ name }) => {
 
 /**
  * Setting up static variable replacements at build time.
- * Use individual properties for drop-in replacements instead of a whole
+ * Vite adds env vars (from .env files, user env, and CLI args) to
+ * `import.meta.env`; for backwards compatibility and generalization, we also
+ * add those to `process.env`.
+ *
+ * Note that variables added to `import.meta.env` here will be available in
+ * index.html, e.g. import.meta.env.DHIS2_APP_NAME will populate
+ * %DHIS2_APP_NAME% in HTML
+ *
+ * Uses individual properties for drop-in replacements instead of a whole
  * object, which allows for better dead code elimination.
+ *
  * For env vars for now, we keep the behavior in /src/lib/shell/env.js:
  * loading, filtering, and prefixing env vars for CRA.
  * Once we remove support for those variables, we just need:
@@ -86,17 +97,16 @@ const handleAssetFileNames = ({ name }) => {
 const getDefineOptions = (env) => {
     const defineOptions = {}
     Object.entries(env).forEach(([key, val]) => {
-        // 'DHIS2_'-prefixed vars go on import.meta.env
+        // Each `val` should be a string already, but we need to stringify again
+        // for it to appear as a string in the resulting code:
+        // '"value"' here => 'value' in the code
+        const stringifiedVal = JSON.stringify(val)
+
+        defineOptions[`process.env.${key}`] = stringifiedVal
+        // 'DHIS2_'-prefixed vars go on import.meta.env too
         if (key.startsWith('DHIS2_')) {
-            defineOptions[`import.meta.env.${key}`] = JSON.stringify(val)
-            return
+            defineOptions[`import.meta.env.${key}`] = stringifiedVal
         }
-        // For backwards compatibility, add REACT_APP_DHIS2_... and other env
-        // vars to process.env. These env vars have been filtered by getEnv().
-        // They will be statically replaced at build time.
-        // Env vars in this format will be removed in future versions
-        // todo: deprecate in favor of import.meta.env
-        defineOptions[`process.env.${key}`] = JSON.stringify(val)
     })
     return defineOptions
 }
@@ -169,7 +179,7 @@ export default ({ paths, config, env, host, force, allowJsxInJs }) => {
             react({
                 babel: { plugins: ['styled-jsx/babel'] },
                 // todo: deprecate with other jsx-in-js config
-                // This option allows HMR of JSX-in-JS files, 
+                // This option allows HMR of JSX-in-JS files,
                 // but it isn't possible to add with merge config:
                 jsxRuntime: allowJsxInJs ? 'classic' : 'automatic',
             }),

cli/config/templates/init-typescript/App.test.tsx

@@ -1,20 +1,21 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
 it('renders without crashing', () => {
-    const div = document.createElement('div')
+    const container = document.createElement('div')
 
     const data = {
         resource: 'test',
     }
 
-    ReactDOM.render(
+    const root = createRoot(container)
+    root.render(
         <CustomDataProvider data={data}>
             <App />
-        </CustomDataProvider>,
-        div
+        </CustomDataProvider>
     )
-    ReactDOM.unmountComponentAtNode(div)
+
+    root.unmount()
 })

cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/cli-app-scripts",
-    "version": "12.0.0-alpha.19",
+    "version": "12.0.0-alpha.21",
     "engines": {
         "node": "^18.0.0 || >=20.0.0"
     },
@@ -29,7 +29,7 @@
         "@babel/preset-env": "^7.14.7",
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.6.0",
-        "@dhis2/app-shell": "12.0.0-alpha.19",
+        "@dhis2/app-shell": "12.0.0-alpha.21",
         "@dhis2/cli-helpers-engine": "^3.2.2",
         "@jest/core": "^27.0.6",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",

cli/src/commands/build.js

@@ -154,7 +154,7 @@ const handler = async ({
                 })
                 await build(viteConfig)
 
-                if (config.pwa.enabled) {
+                if (config.pwa?.enabled) {
                     reporter.info('Compiling service worker...')
                     await compileServiceWorker({ env, paths, mode })
 

cli/src/commands/init.js

@@ -160,7 +160,7 @@ const handler = async ({ force, name, cwd, lib, typeScript }) => {
         reporter.info('Installing @dhis2/cli-app-scripts...')
         await exec({
             cmd: 'yarn',
-            args: ['add', '--dev', '@dhis2/cli-app-scripts'],
+            args: ['add', '--dev', '@dhis2/cli-app-scripts@alpha'],
             cwd: paths.base,
         })
     }
@@ -192,23 +192,18 @@ const handler = async ({ force, name, cwd, lib, typeScript }) => {
         fs.copyFileSync(paths.initTSConfig, paths.tsConfig)
 
         reporter.info('install TypeScript as a dev dependency')
-        // ToDO: restrict the major version of TS we install
+
         await exec({
             cmd: 'yarn',
-            args: ['add', 'typescript', '--dev'],
+            args: ['add', 'typescript@^5', '--dev'],
             cwd: paths.base,
         })
 
         // install any other TS dependencies needed
         reporter.info('install type definitions')
         await exec({
             cmd: 'yarn',
-            args: [
-                'add',
-                '@types/react @types/react-dom @types/jest',
-                '@types/eslint',
-                '--dev',
-            ],
+            args: ['add', '@types/react @types/react-dom @types/jest', '--dev'],
             cwd: paths.base,
         })
 
@@ -230,25 +225,6 @@ const handler = async ({ force, name, cwd, lib, typeScript }) => {
             paths.initModulesDeclaration,
             path.join(typesDir, 'modules.d.ts')
         )
-
-        // ToDO: make custom eslint config part of the template (and copy it)
-        // similar to: https://github.com/dhis2/data-exchange-app/pull/79/files#diff-e2954b558f2aa82baff0e30964490d12942e0e251c1aa56c3294de6ec67b7cf5
-        // install dependencies needed for eslint
-        // "@typescript-eslint/eslint-plugin"
-        // "@typescript-eslint/parser"
-
-        reporter.info('setting up eslint configuration')
-        await exec({
-            cmd: 'yarn',
-            args: ['add', 'eslint @eslint/js typescript-eslint', '--dev'],
-            cwd: paths.base,
-        })
-        // copy eslint config
-        fs.copyFileSync(paths.initEslint, paths.eslintConfig)
-
-        // ToDO: we're hardcoding running TS, we need to figure out how to pass the argument from the CLI
-
-        // ToDO: aim to have a TS project that runs with "yarn start" and "yarn build"
     }
 
     const extension = typeScript ? 'ts' : 'js'