Convert script to TypeScript

packages/dnb-eufemia/package.json

@@ -40,7 +40,7 @@
     "build:types:dev": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'",
     "build:types:esm": "yarn tsc --project tsconfig.definitions.json --declarationDir ./build/esm --rootDir src",
     "precommit": "yarn lint-staged",
-    "dev:icons": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/convertIcons' --ignore '/icons/**' --ignore '*.json'",
+    "dev:icons": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/convertIcons' --ext ts --ignore '/icons/**' --ignore '*.json'",
     "dev:packages": "nodemon --exec 'yarn build:packages && yarn build:copy' --ext js,html,json,css,scss --watch './src/**/*' --ignore './umd/*'",
     "dev:resources": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/resources/makeResourcesPackage.js' --ext js,html,json,css,scss --watch './build/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
     "dev:tasks": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/dev.js' --watch 'rollup.config.js' --ext js,html,json,css,scss --watch './src/components/**/*' --watch './src/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
@@ -156,6 +156,7 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
+    "@types/fs-extra": "11.0.1",
     "@types/jest": "29.2.6",
     "@types/jest-axe": "3.5.5",
     "@types/jest-image-snapshot": "6.1.0",

packages/dnb-eufemia/scripts/prebuild/tasks/convertSvgToJsx.js → packages/dnb-eufemia/scripts/prebuild/tasks/convertSvgToJsx.ts

@@ -27,6 +27,14 @@ import packpath from 'packpath'
 const FALLBACK = 'dnb' // defines if an index file should be created
 const ROOT_DIR = packpath.self()
 
+type TransformedIcons = Array<{ name: string }>
+type IconItem = { filename: string; basename: string; name: string }
+type ForwardParams = {
+  icons: Array<IconItem>
+  destPath: string
+  assetsDir: string
+}
+
 export default async function convertSvgToJsx({
   srcPath = './assets/icons/**/*.svg',
   destPath = './src/icons',
@@ -68,7 +76,7 @@ export default async function convertSvgToJsx({
       `> PrePublish: converting "svg to jsx" for "${assetsDir}" as started ...`
     )
 
-    const icons = await transformSvg({
+    const icons: TransformedIcons = await transformSvg({
       srcPath,
       destPath,
       assetsDir,
@@ -83,19 +91,18 @@ export default async function convertSvgToJsx({
       } icons with ${icons.length / sizes.length} in total)`
     )
 
-    await controllRoutine({ icons })
+    await controllRoutine(icons)
   })
 }
 
-const controllRoutine = async ({ icons }) => {
-  const listOfIcons = Object.values(icons)
+const controllRoutine = async (icons: TransformedIcons) => {
   const sizes = Object.values(ICON_SIZES).filter(({ suffix }) =>
     Boolean(suffix)
   )
 
   sizes.forEach(({ suffix: size }) => {
-    listOfIcons.forEach(({ name: origName }) => {
-      const foundNames = listOfIcons.filter(({ name }) => {
+    icons.forEach(({ name: origName }) => {
+      const foundNames = icons.filter(({ name }) => {
         if (origName.endsWith(`${NAME_SEPARATOR}${size}`)) {
           return origName.replace(`${NAME_SEPARATOR}${size}`, '') === name
         }
@@ -144,7 +151,7 @@ const transformSvgToReact = ({ srcPath, destPath }) => {
     try {
       gulp
         .src(srcPath, { cwd: ROOT_DIR })
-        .pipe(transform('utf8', transformToJsx))
+        .pipe(transform('utf8' as gulp.Encoding, transformToJsx))
         .pipe(
           rename((path) => {
             path.extname = '.tsx'
@@ -159,7 +166,7 @@ const transformSvgToReact = ({ srcPath, destPath }) => {
   })
 }
 
-const transformToJsx = (content, file) => {
+const transformToJsx = (content, file): PromiseLike<string> => {
   if (String(content).trim().length === 0) {
     fs.unlinkSync(file.path)
     return Promise.resolve('')
@@ -192,7 +199,7 @@ const transformToJsx = (content, file) => {
         .then((res) => {
           log.info(`> PrePublish: Icon was converted: ${basename}`)
           resolve(
-            '/** This file is auto generated by convertSvgToJsx.js */\n\n' +
+            '/** This file is auto generated by convertSvgToJsx.ts */\n\n' +
               prettier
                 .format(res, {
                   ...prettierrc,
@@ -221,7 +228,7 @@ const makeIconsEntryFiles = async ({
   customIconsLockFilePath = null,
 }) => {
   // get all the svg icons we find
-  const icons = (
+  const icons: Array<IconItem> = (
     await globby([
       path.resolve(destPath, assetsDir, '*.tsx'),
       '!**/index*',
@@ -255,7 +262,6 @@ const makeIconsEntryFiles = async ({
 
   await generateIndexFile({ icons, destPath, assetsDir })
   await generateGroupFiles({
-    icons,
     destPath,
     assetsDir,
     customIconsLockFilePath,
@@ -264,7 +270,11 @@ const makeIconsEntryFiles = async ({
   return icons
 }
 
-const generateIndexFile = async ({ icons, destPath, assetsDir }) => {
+const generateIndexFile = async ({
+  icons,
+  destPath,
+  assetsDir,
+}: ForwardParams) => {
   // the index.ts file will contain "all icons"
   // even the ones which don't exists in the lock file
   // this is in contrast to the "groups", they will only contain the icons, deticated to the current figma document
@@ -279,7 +289,7 @@ const generateIndexFile = async ({ icons, destPath, assetsDir }) => {
   const _keys = icons.map(({ name }) => name).join(', ')
 
   const indexContent = prettier.format(
-    `/** This file is auto generated by convertSvgToJsx.js */
+    `/** This file is auto generated by convertSvgToJsx.ts */
 
       ${_imports}
 
@@ -309,41 +319,41 @@ const generateGroupFiles = async ({
   destPath,
   assetsDir,
   customIconsLockFilePath,
-}) => {
+}: Partial<ForwardParams> & { customIconsLockFilePath: string }) => {
   // get the svg lock file
   const { iconsLockFile } = IconsConfig({ assetsDir })
-  const lockFileContent = await readIconsLockFile({
-    file: customIconsLockFilePath || iconsLockFile,
-  })
+  const lockFileContent: Record<string, { bundleName: string }> =
+    await readIconsLockFile({
+      file: customIconsLockFilePath || iconsLockFile,
+    })
 
   // from the svg lock file we can generate groups out of the "bundleName"
-  const groups = Object.entries(lockFileContent).reduce(
-    (acc, [file, { bundleName }]) => {
-      acc[bundleName] = acc[bundleName] || []
-      const basename = path.basename(file)
-      const filename = basename.replace(path.extname(file), '')
-      const filePath = path.resolve(
-        ROOT_DIR,
-        destPath,
-        assetsDir,
-        `${filename}.tsx`
-      )
+  const groups: Record<string, Array<IconItem>> = Object.entries(
+    lockFileContent
+  ).reduce((acc, [file, { bundleName }]) => {
+    acc[bundleName] = acc[bundleName] || []
+    const basename = path.basename(file)
+    const filename = basename.replace(path.extname(file), '')
+    const filePath = path.resolve(
+      ROOT_DIR,
+      destPath,
+      assetsDir,
+      `${filename}.tsx`
+    )
 
-      // make sure the file actually exists
-      if (fs.existsSync(filePath)) {
-        acc[bundleName].push({
-          filename,
-          basename,
-          name: iconCase(filename),
-        })
-      } else {
-        log.fail(`The file "${filePath}" did not exist!`)
-      }
+    // make sure the file actually exists
+    if (fs.existsSync(filePath)) {
+      acc[bundleName].push({
+        filename,
+        basename,
+        name: iconCase(filename),
+      })
+    } else {
+      log.fail(`The file "${filePath}" did not exist!`)
+    }
 
-      return acc
-    },
-    {}
-  )
+    return acc
+  }, {})
 
   try {
     await asyncForEach(
@@ -367,7 +377,7 @@ const generateGroupFiles = async ({
         const _keys = entries.map(({ name }) => name).join(', ')
 
         const groupFileContent = prettier.format(
-          `/** This file is auto generated by convertSvgToJsx.js */
+          `/** This file is auto generated by convertSvgToJsx.ts */
 
             ${_imports}
 
@@ -391,11 +401,11 @@ const generateFallbackIndexFiles = async ({
   icons,
   destPath,
   assetsDir,
-}) => {
+}: ForwardParams) => {
   try {
     await asyncForEach(Object.entries(icons), async ([, { filename }]) => {
       const indexFileContent = prettier.format(
-        `/** This file is auto generated by convertSvgToJsx.js */
+        `/** This file is auto generated by convertSvgToJsx.ts */
                 
             import icon from './${assetsDir}/${filename}'
             export default icon

packages/dnb-eufemia/scripts/tools/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Tools we want to reuse
+ *
+ */
+
+// export type AsyncForEachArray = Array<unknown>
+export type AsyncForEachCallback<TBase> = (
+  item: Array<TBase>[number],
+  i: number,
+  array: Array<TBase>
+) => unknown
+
+export async function asyncForEach<TBase>(
+  array: Array<TBase>,
+  callback: AsyncForEachCallback<TBase>
+) {
+  let res = []
+  for (let i = 0, l = array.length; i < l; ++i) {
+    const cur = await callback(array[i] as typeof array[number], i, array)
+    if (typeof cur !== 'undefined') {
+      res = res.concat(cur)
+    }
+  }
+  return res
+}

packages/dnb-eufemia/src/components/icon/__tests__/test-files/index.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import question from './question'
 

packages/dnb-eufemia/src/components/icon/__tests__/test-files/question.tsx

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import React from 'react'
 const bell = (props) => (

packages/dnb-eufemia/src/icons/above_the_line.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/above_the_line'
 export default icon

packages/dnb-eufemia/src/icons/above_the_line_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/above_the_line_medium'
 export default icon

packages/dnb-eufemia/src/icons/account.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account'
 export default icon

packages/dnb-eufemia/src/icons/account_card.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_card'
 export default icon

packages/dnb-eufemia/src/icons/account_card_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_card_medium'
 export default icon

packages/dnb-eufemia/src/icons/account_in.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_in'
 export default icon

packages/dnb-eufemia/src/icons/account_in_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_in_medium'
 export default icon

packages/dnb-eufemia/src/icons/account_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_medium'
 export default icon

packages/dnb-eufemia/src/icons/account_out.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_out'
 export default icon

packages/dnb-eufemia/src/icons/account_out_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_out_medium'
 export default icon

packages/dnb-eufemia/src/icons/account_percent.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_percent'
 export default icon

packages/dnb-eufemia/src/icons/account_percent_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/account_percent_medium'
 export default icon

packages/dnb-eufemia/src/icons/add.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/add'
 export default icon

packages/dnb-eufemia/src/icons/add_circled.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/add_circled'
 export default icon

packages/dnb-eufemia/src/icons/add_circled_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/add_circled_medium'
 export default icon

packages/dnb-eufemia/src/icons/add_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/add_medium'
 export default icon

packages/dnb-eufemia/src/icons/ainvoice.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/ainvoice'
 export default icon

packages/dnb-eufemia/src/icons/ainvoice_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/ainvoice_medium'
 export default icon

packages/dnb-eufemia/src/icons/ambulance.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/ambulance'
 export default icon

packages/dnb-eufemia/src/icons/ambulance_medium.ts

@@ -1,4 +1,4 @@
-/** This file is auto generated by convertSvgToJsx.js */
+/** This file is auto generated by convertSvgToJsx.ts */
 
 import icon from './dnb/ambulance_medium'
 export default icon