[LG-5528] chore: Consistent UMD global naming (#3137)

* add missing storybook-utils dep

* ensure lg packages have umd global name

* use same umd global name to build icons

* fix unsupported TS warning in lint

* changesets

* changeset

* Update tools/build/config/utils/constructUMDGlobalName.mjs

Co-authored-by: Terrence Keane <[email protected]>

* Update tools/build/config/utils/getDirectGlyphImports.mjs

* Apply suggestions from code review

---------

Co-authored-by: Terrence Keane <[email protected]>

Author: TheSonOfThomp

.changeset/build-umd-global.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/build': patch
+---
+
+Adds reusable `constructUMDGlobalName` function to generate consistent UMD global names when building

.changeset/icon-build-umd.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/icon': patch
+---
+
+Updates build script to use the new consistent UMD global names
+Adds missing `@lg-tools/storybook-utils` devDependency

.changeset/lint-ts-eslint.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/lint': patch
+---
+
+Updates to latest @typescript-eslint packages

packages/icon/package.json

@@ -42,6 +42,7 @@
     "@leafygreen-ui/palette": "workspace:^",
     "@lg-tools/build": "workspace:^",
     "@lg-tools/lint": "workspace:^",
+    "@lg-tools/storybook-utils": "workspace:^",
     "@svgr/core": "^5.3.1",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",

packages/icon/scripts/build/build-batch.ts

@@ -6,6 +6,10 @@ import { GENERATED_DIR } from './constants';
 async function getBatchBuildOptions(
   batch: Array<string>,
 ): Promise<Array<MergedRollupOptions>> {
+  const { constructUMDGlobalName } = await import(
+    '@lg-tools/build/config/utils/constructUMDGlobalName.mjs'
+  );
+
   const { esmConfig, umdConfig } = await import(
     '@lg-tools/build/config/rollup.config.mjs'
   );
@@ -18,14 +22,14 @@ async function getBatchBuildOptions(
       output: [esmConfig.output],
     },
     // UMD builds need a single input file
-    ...batch.map(icon => {
+    ...batch.map(iconName => {
       return {
         ...umdConfig,
-        input: `${GENERATED_DIR}/${icon}.tsx`,
+        input: `${GENERATED_DIR}/${iconName}.tsx`,
         output: [
           {
             ...umdConfig.output,
-            name: `LeafyGreen_${icon}Icon`,
+            name: constructUMDGlobalName('icon', iconName),
             dir: `dist/umd`,
           },
         ],

pnpm-lock.yaml

@@ -0,0 +1,21 @@
+/**
+ * Constructs a UMD global name from a package name.
+ * E.g., '@leafygreen-ui/button' becomes 'leafyGreen_Button'
+ *
+ * @param {string} packageName - The name of the package (e.g., '@leafygreen-ui/button').
+ * @param {string} [suffix] - An optional suffix to append to the global name (e.g., 'Icon').
+ * @returns {string} - The constructed UMD global name (e.g., 'leafyGreenIconBeaker').
+ */
+export const constructUMDGlobalName = (packageName, suffix = '') => {
+  const name = packageName.split('/').pop();
+  const prefix = 'leafyGreen';
+  const sentenceCasePackageName = toPascalCase(name);
+  const sentenceCaseSuffix = toPascalCase(suffix);
+  return `${prefix}${sentenceCasePackageName}${sentenceCaseSuffix}`;
+};
+
+const toPascalCase = str => {
+  return str
+    .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+    .replace(/^[a-z]/, letter => letter.toUpperCase());
+};

tools/build/config/utils/constructUMDGlobalName.mjs

@@ -0,0 +1,22 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * @returns An array of all glyph import paths
+ */
+export function getDirectGlyphImports(allDependencies) {
+  const pkgHasIconDependency = allDependencies['@leafygreen-ui/icon'];
+  const glyphsDir = path.resolve(process.cwd(), '../icon/src/glyphs');
+
+  if (pkgHasIconDependency && fs.existsSync(glyphsDir)) {
+    return fs
+      .readdirSync(glyphsDir)
+      .filter(filePath => /.svg/.test(filePath))
+      .map(
+        fileName =>
+          `@leafygreen-ui/icon/dist/${path.basename(fileName, '.svg')}`,
+      );
+  }
+
+  return [];
+}

tools/build/config/utils/getDirectGlyphImports.mjs

@@ -1,28 +1,45 @@
+import fs from 'fs';
 import path from 'path';
 
+import { getDirectGlyphImports } from './getDirectGlyphImports.mjs';
+import { constructUMDGlobalName } from './constructUMDGlobalName.mjs';
+
 export function getUMDGlobals() {
   // Read from the current package's package.json
   // to get the package name and dependencies
-  const { dependencies, devDependencies, peerDependencies } = import(
-    path.resolve(process.cwd(), 'package.json'),
-    { with: { type: 'json' } }
-  );
+  const packageJsonPath = path.resolve(process.cwd(), 'package.json');
+  const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  const {
+    dependencies = {},
+    devDependencies = {},
+    peerDependencies = {},
+  } = JSON.parse(packageJsonContent);
 
   const allDependencies = {
     ...dependencies,
     ...devDependencies,
     ...peerDependencies,
   };
 
-  const lgGlobals = Object.keys(allDependencies).reduce((acc, pkg) => {
-    acc[pkg] = pkg;
-    return acc;
-  }, {});
+  const lgGlobals = Object.entries(allDependencies).reduce(
+    (acc, [pkg, version]) => {
+      // Only include packages in this monorepo
+      if (version.includes('workspace:')) {
+        acc[pkg] = constructUMDGlobalName(pkg);
+      }
+      return acc;
+    },
+    {},
+  );
 
-  const iconGlobals = getDirectGlyphImports().reduce((acc, glyph) => {
-    acc[glyph] = /[^/]+$/.exec(glyph)[0];
-    return acc;
-  }, {});
+  const iconGlobals = getDirectGlyphImports(allDependencies).reduce(
+    (acc, glyph) => {
+      const iconName = /[^/]+$/.exec(glyph)[0]; // Get the part after the last slash
+      acc[glyph] = constructUMDGlobalName('icon', iconName);
+      return acc;
+    },
+    {},
+  );
 
   // Mapping of packages to the `window` property they'd be
   // bound to if used in the browser without a module loader.
@@ -59,25 +76,5 @@ export function getUMDGlobals() {
     }
   }
 
-  /**
-   * @returns An array of all glyph import paths
-   */
-  function getDirectGlyphImports() {
-    const pkgHasIconDependency = allDependencies['@leafygreen-ui/icon'];
-    const glyphsDir = path.resolve(process.cwd(), '../icon/src/glyphs');
-
-    if (pkgHasIconDependency && fs.existsSync(glyphsDir)) {
-      return fs
-        .readdirSync(glyphsDir)
-        .filter(path => /.svg/.test(path))
-        .map(
-          fileName =>
-            `@leafygreen-ui/icon/dist/${path.basename(fileName, '.svg')}`,
-        );
-    }
-
-    return [];
-  }
-
   return globals;
 }

tools/build/config/utils/getUMDGlobals.mjs

@@ -25,8 +25,8 @@
     "@types/cli-progress": "^3.11.6",
     "@types/cross-spawn": "6.0.2",
     "@types/prettier": "^2.7.0",
-    "@typescript-eslint/eslint-plugin": "8.17.0",
-    "@typescript-eslint/parser": "8.17.0",
+    "@typescript-eslint/eslint-plugin": "8.44.0",
+    "@typescript-eslint/parser": "8.44.0",
     "chalk": "4.1.2",
     "cross-spawn": "7.0.3",
     "eslint": "9.16.0",