build(@deephaven/icons): Properly package icons and remove unnecessary files in dist

jest.config.base.cjs

@@ -14,10 +14,8 @@ module.exports = {
       './__mocks__/spectrumTheme$1Mock.js'
     ),
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.join(
-      __dirname,
-      './__mocks__/fileMock.js'
-    ),
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      path.join(__dirname, './__mocks__/fileMock.js'),
     '^fira$': 'identity-obj-proxy',
     '^monaco-editor$': path.join(
       __dirname,
@@ -26,11 +24,8 @@ module.exports = {
     ),
     // Handle monaco worker files
     '\\.worker.*$': 'identity-obj-proxy',
-    '^@deephaven/icons$': path.join(
-      __dirname,
-      './packages/icons/dist/index.js'
-    ),
-    '^@deephaven/(.*)$': path.join(__dirname, './packages/$1/src'),
+    // All packages except icons use src code
+    '^@deephaven/(?!icons)(.*)$': path.join(__dirname, './packages/$1/src'),
   },
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: [path.join(__dirname, './jest.setup.ts')],

packages/code-studio/vite.config.ts

@@ -87,11 +87,7 @@ export default defineConfig(({ mode }) => {
                 replacement: `${packagesDir}/$1/scss/$2`,
               },
               {
-                find: /^@deephaven\/icons$/,
-                replacement: `${packagesDir}/icons/dist/index.es.js`,
-              },
-              {
-                find: /^@deephaven\/(.*)/,
+                find: /^@deephaven\/(?!icons)(.*)/, // Icons package can not import from src
                 replacement: `${packagesDir}/$1/src`,
               },
             ]

packages/embed-chart/vite.config.ts

@@ -64,11 +64,7 @@ export default defineConfig(({ mode }) => {
                 replacement: `${packagesDir}/$1/scss/$2`,
               },
               {
-                find: /^@deephaven\/icons$/,
-                replacement: `${packagesDir}/icons/dist/index.es.js`,
-              },
-              {
-                find: /^@deephaven\/(.*)/,
+                find: /^@deephaven\/(?!icons)(.*)/, // Icons package can not import from src
                 replacement: `${packagesDir}/$1/src`,
               },
             ]

packages/embed-grid/vite.config.ts

@@ -64,11 +64,7 @@ export default defineConfig(({ mode }) => {
                 replacement: `${packagesDir}/$1/scss/$2`,
               },
               {
-                find: /^@deephaven\/icons$/,
-                replacement: `${packagesDir}/icons/dist/index.es.js`,
-              },
-              {
-                find: /^@deephaven\/(.*)/,
+                find: /^@deephaven\/(?!icons)(.*)/, // Icons package can not import from src
                 replacement: `${packagesDir}/$1/src`,
               },
             ]

packages/icons/package.json

@@ -3,11 +3,18 @@
   "version": "0.45.0",
   "description": "Icons used in Deephaven client apps. Extends vscode-codicons to be font-awesome svg-core compatible and adds additional icons in a similar style.",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "type": "module",
   "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
   "files": [
-    "dist"
+    "dist/index.cjs",
+    "dist/index.js",
+    "dist/index.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -16,9 +23,10 @@
     "watch": "chokidar \"src/**/*\" -c \"npm run build\"",
     "svgo-dh": "svgo -q -f ./src/icons/ -o ./dist/svg/dh",
     "svgo-vs": "svgo -q -f \"../../node_modules/@vscode/codicons/src/icons/\" -o ./dist/svg/vs",
-    "build": "run-s build:icons build:js",
+    "build": "run-s build:icons build:js clean:dist:icons",
     "build:icons": "run-p svgo-dh svgo-vs",
-    "build:js": "node ./scripts/build.js"
+    "build:js": "node ./scripts/build.js",
+    "clean:dist:icons": "rimraf ./dist/svg"
   },
   "repository": {
     "type": "git",

packages/icons/scripts/build.js

@@ -5,8 +5,7 @@ import path from 'path';
 import parser from 'svg-parser';
 import svgPathTools from 'svg-path-tools';
 // template shape based on fortawesome/fontawesome-free export file shape
-import { dtsFile, jsFile } from './template/file.js';
-import { indexdts, indexjs, indexesjs } from './template/indicies.js';
+import { dtsIndex, cjsIndex, mjsIndex } from './template/indicies.js';
 
 const { parse } = parser;
 const { parse: parsePath, scale, stringify } = svgPathTools;
@@ -76,27 +75,6 @@ function parseSvg(content) {
   }
 }
 
-async function createDefinition(file) {
-  // use imported template literals to build files
-  const dtsContent = dtsFile(file.prefixedName);
-  const jsContent = jsFile(file, file.width, file.height, file.path);
-
-  try {
-    await Promise.all([
-      await fs.writeFile(
-        path.join(BUILD_DIR, `${file.prefixedName}.d.ts`),
-        dtsContent
-      ),
-      await fs.writeFile(
-        path.join(BUILD_DIR, `${file.prefixedName}.js`),
-        jsContent
-      ),
-    ]);
-  } catch (e) {
-    console.error('Unable to create definition for', file, ':', e);
-  }
-}
-
 async function getSVGFiles(src) {
   const files = await getFiles(src);
   return files.map(f => {
@@ -200,20 +178,17 @@ async function build(buildSources) {
   // flatten the array, as mulitple sources may have been passed in
   files = files.flat();
 
-  // write out the individual definition files
-  await Promise.all(files.map(file => createDefinition(file)));
-
   // write out an index.d.ts
-  const indexdtsContent = indexdts(files, buildSources);
+  const indexdtsContent = dtsIndex(files, buildSources);
   await fs.writeFile(`${BUILD_DIR}/index.d.ts`, indexdtsContent);
 
-  // write out index.js
-  const indexjsContent = indexjs(files);
-  await fs.writeFile(`${BUILD_DIR}/index.js`, indexjsContent);
+  // write out CJS
+  const indexjsContent = cjsIndex(files);
+  await fs.writeFile(`${BUILD_DIR}/index.cjs`, indexjsContent);
 
-  // write out index.es.js
-  const indexesjsContent = indexesjs(files);
-  await fs.writeFile(`${BUILD_DIR}/index.es.js`, indexesjsContent);
+  // write out ESM
+  const indexesjsContent = mjsIndex(files);
+  await fs.writeFile(`${BUILD_DIR}/index.js`, indexesjsContent);
 
   console.log('deephaven-app-icons build complete!');
 }

packages/icons/scripts/template/indicies.js

@@ -1,4 +1,4 @@
-export const indexdts = (files, sources) => {
+export const dtsIndex = (files, sources) => {
   const top = files
     .map(file => `export const ${file.prefixedName}: IconDefinition;`)
     .join('\n');
@@ -7,25 +7,23 @@ export const indexdts = (files, sources) => {
     .map(src => `export const ${src.prefix}: IconPack;`)
     .join('\n');
 
-  return ` 
-${top}
+  return `${top}
 import { IconDefinition, IconLookup, IconName, IconPrefix, IconPack } from '@fortawesome/fontawesome-common-types';
 export { IconDefinition, IconLookup, IconName, IconPrefix, IconPack } from '@fortawesome/fontawesome-common-types';
 export const prefix: IconPrefix;
 ${bottom}
 `;
 };
 
-export const indexjs = files => {
+export const cjsIndex = files => {
   const iconVar = files
     .map(
-      file => `
-  var ${file.prefixedName} = {
+      file => `const ${file.prefixedName} = {
     prefix: "${file.prefix}",
     iconName: "${file.name}",
     icon: [${file.width}, ${file.height}, [], "f000", ${
-        file.path ? `"${file.path}"` : file.path
-      }]
+      file.path ? `"${file.path}"` : file.path
+    }]
   };`
     )
     .join('');
@@ -44,8 +42,8 @@ export const indexjs = files => {
     (factory((global['deephaven-app-icons'] = {})));
   }(this, (function (exports) { 'use strict';
 
-  var prefix = "dh";${iconVar}
-  var _iconsCache = {
+  const prefix = "dh";${iconVar}
+  const _iconsCache = {
 ${cache}
   };
 
@@ -59,16 +57,15 @@ ${exps}
 `;
 };
 
-export const indexesjs = files => {
+export const mjsIndex = files => {
   const iconVar = files
     .map(
-      file => `
-var ${file.prefixedName} = {
+      file => `const ${file.prefixedName} = {
   prefix: "${file.prefix}",
   iconName: "${file.name}",
   icon: [${file.width}, ${file.height}, [], "f000", ${
-        file.path ? `"${file.path}"` : file.path
-      }]
+    file.path ? `"${file.path}"` : file.path
+  }]
 };`
     )
     .join('');
@@ -79,9 +76,8 @@ var ${file.prefixedName} = {
 
   const exps = files.map(file => `${file.prefixedName}, `).join('');
 
-  return `
-var prefix = "dh";${iconVar}
-var _iconsCache = {
+  return `const prefix = "dh";${iconVar}
+const _iconsCache = {
 ${cache}
 };