fix: update init command to cater for TS project configurations

- add custom declaration files for React and CSS modules - install relevant type definitions: react, jest, etc - add eslint config file and install eslint dependencies
dhis2 · Aug 22, 2024 · f68468d · f68468d
1 parent c509324
commit f68468d
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 16 deletions.
diff --git a/cli/config/init-typescript/.eslintrc.js b/cli/config/init-typescript/.eslintrc.js
@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [
+        config.eslintReact,
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/typescript',
+    ],
+    settings: {
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
+    },
+    globals: {
+        cy: 'readonly',
+        Cypress: 'readonly',
+    },
+    rules: {
+        'react/prop-types': 'off',
+        'react/display-name': 'off',
+        'import/extensions': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+    },
+}
diff --git a/cli/config/init-typescript/App.test.tsx b/cli/config/init-typescript/App.test.tsx
@@ -1,12 +1,17 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App.tsx'
+import App from './App'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
+
+    const data = {
+        resource: "test",
+    }
+
     ReactDOM.render(
-        <CustomDataProvider>
+        <CustomDataProvider data={data}>
             <App />
         </CustomDataProvider>,
         div

diff --git a/cli/config/init-typescript/custom.d.ts b/cli/config/init-typescript/custom.d.ts
@@ -0,0 +1,8 @@
+import 'react'
+
+declare module 'react' {
+    interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        jsx?: boolean
+        global?: boolean
+    }
+}
diff --git a/cli/config/init-typescript/entrypoint.tsx b/cli/config/init-typescript/entrypoint.tsx
@@ -1,16 +1,22 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import React from 'react'
+import React, { FC } from 'react'
 import classes from './App.module.css'
 
+interface QueryResults {
+    me: {
+        name: string
+    }
+}
+
 const query = {
     me: {
         resource: 'me',
     },
 }
 
-const MyApp = () => {
-    const { error, loading, data } = useDataQuery(query)
+const MyApp: FC = () => {
+    const { error, loading, data } = useDataQuery<QueryResults>(query)
 
     if (error) {
         return <span>{i18n.t('ERROR')}</span>
@@ -22,7 +28,7 @@ const MyApp = () => {
 
     return (
         <div className={classes.container}>
-            <h1>{i18n.t('Hello {{name}}', { name: data.me.name })}</h1>
+            <h1>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h1>
             <h3>{i18n.t('Welcome to DHIS2!')}</h3>
         </div>
     )

diff --git a/cli/config/init-typescript/global.d.ts b/cli/config/init-typescript/global.d.ts
@@ -0,0 +1,7 @@
+declare module '*.module.css' {
+  interface Classes {
+    [key: string]: string
+  }
+  const classes: Classes
+  export default classes
+}
diff --git a/cli/src/commands/init.js b/cli/src/commands/init.js
@@ -199,20 +199,43 @@ const handler = async ({ force, name, cwd, lib, typeScript }) => {
             cwd: paths.base,
         })
 
-        // Todo: check why d2 start is renaming TS files to JS
+        // install any other TS dependencies needed
+        reporter.info('install type definitions')
+        await exec({
+            cmd: 'yarn',
+            args: ['add', '@types/react @types/react-dom @types/jest', '--dev'],
+            cwd: paths.base,
+        })
 
+        // add global.d.ts to get rid of CSS module errors
+        // something like https://github.com/dhis2/data-exchange-app/pull/79/files#diff-858566d2d4cf06579a908cb85f587c5752fa0fa6a47d579277749006e86f0834
+        // (but maybe something better)
+        reporter.info('add declaration files')
+        const srcDir = path.join(paths.base, 'src')
+
+        if (!fs.existsSync(srcDir)) {
+            fs.mkdirpSync(srcDir);
+        }
+        fs.copyFileSync(paths.initGlobalDeclaration, path.join(srcDir, 'global.d.ts'))
+
+        // also look at copying src/custom.d.ts https://github.com/dhis2/data-exchange-app/pull/79/files#diff-5f2ca1b1541dc3023f81543689da349e59b97c708462dd8da4640b399362edc7
+
+        fs.copyFileSync(paths.initCustomDeclaration, path.join(srcDir, 'custom.d.ts'))
+
         // ToDO: make custom eslint config part of the template (and copy it)0
         // 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"
 
-        // ToDO: install any other TS dependencies needed
-        // add global.d.ts to get rid of CSS module errors
-        // something like https://github.com/dhis2/data-exchange-app/pull/79/files#diff-858566d2d4cf06579a908cb85f587c5752fa0fa6a47d579277749006e86f0834
-        // (but maybe something better)
-
-        // also look at copying src/custom.d.ts https://github.com/dhis2/data-exchange-app/pull/79/files#diff-5f2ca1b1541dc3023f81543689da349e59b97c708462dd8da4640b399362edc7
+        await exec({
+            cmd: 'yarn',
+            args: ['add', '@typescript-eslint/eslint-plugin @typescript-eslint/parser', '--dev'],
+            cwd: paths.base,
+        })
+         // copy eslint config
+         reporter.info('Copying eslint')
+         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
 

diff --git a/cli/src/lib/paths.js b/cli/src/lib/paths.js
@@ -27,7 +27,7 @@ module.exports = (cwd = process.cwd(), { typeScript } = {}) => {
     const paths = {
         initAppModuleCss: path.join(
             __dirname,
-            `../../config/${initFolder}/App.module.css`
+            `../../config/App.module.css`
         ),
         initAppTestJsx: path.join(
             __dirname,
@@ -47,18 +47,31 @@ module.exports = (cwd = process.cwd(), { typeScript } = {}) => {
         ),
         initPackageJson: path.join(
             __dirname,
-            `../../config/${initFolder}/package.json`
+            `../../config/package.json`
         ),
         initReadme: path.join(
             __dirname,
-            `../../config/${initFolder}/README.md`
+            `../../config/README.md`
         ),
 
         initTSConfig: path.join(
             __dirname,
             `../../config/init-typescript/tsconfig.json`
         ),
 
+        initEslint: path.join(
+            __dirname,
+            `../../config/init-typescript/.eslintrc.js`
+        ),
+        initGlobalDeclaration: path.join(
+            __dirname,
+            '../../config/init-typescript/global.d.ts'
+        ),
+        initCustomDeclaration: path.join(
+            __dirname, 
+            '../../config/init-typescript/custom.d.ts'
+        ),
+
         configDefaults: path.join(
             __dirname,
             typeScript
@@ -85,6 +98,7 @@ module.exports = (cwd = process.cwd(), { typeScript } = {}) => {
         i18nStrings: path.join(base, './i18n'),
         i18nLocales: path.join(base, './src/locales'),
         tsConfig: path.join(base, './tsconfig.json'),
+        eslintConfig: path.join(base, './.eslintrc.js'),
 
         d2: path.join(base, './.d2/'),
         appOutputFilename: 'App.jsx',