@leafygreen-ui/icon 14.1.0 → 14.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "14.1.0",
+  "version": "14.1.1",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -18,10 +18,13 @@
     "@svgr/core": "^5.3.1",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
+    "rollup": "4.16.1",
     "ts-node": "^10.9.2",
     "xml2json": "^0.12.0",
+    "p-queue": "^8.1.0",
+    "fs-extra": "11.1.1",
+    "@leafygreen-ui/lib": "^15.2.0",
     "@lg-tools/build": "^0.8.0",
-    "@leafygreen-ui/lib": "^15.1.0",
     "@lg-tools/lint": "^3.0.0",
     "@leafygreen-ui/palette": "^5.0.0"
   },
@@ -36,7 +39,8 @@
   },
   "scripts": {
     "prebuild": "ts-node ./scripts/prebuild.ts",
-    "build": "lg-build bundle",
+    "postbuild": "ts-node ./scripts/postbuild.ts",
+    "build": "ts-node ./scripts/build-parallel.ts",
     "tsc": "lg-build tsc",
     "docs": "lg-build docs"
   }

package/rollup.batch.config.mjs

@@ -0,0 +1,19 @@
+import { esmConfig, umdConfig } from '@lg-tools/build/config/rollup.config.mjs';
+
+const DELIMITER = '|';
+
+const iconsEnv = process.env.ICONS || '';
+const iconNames = iconsEnv.split(DELIMITER);
+
+const iconConfigs = [esmConfig, umdConfig].flatMap(config =>
+  iconNames.map(name => ({
+    ...config,
+    input: `src/generated/${name}.tsx`,
+    output: {
+      ...config.output,
+      name: `${name}.js`,
+    },
+  })),
+);
+
+export default iconConfigs;

package/rollup.config.mjs

@@ -3,50 +3,5 @@ import {
   storiesConfig,
   umdConfig,
 } from '@lg-tools/build/config/rollup.config.mjs';
-import fs from 'fs';
-import path from 'path';
 
-/**
- *
- * @returns An array of all generated glyphs
- */
-function getGeneratedFiles() {
-  const directory = path.resolve(process.cwd(), 'src/generated');
-
-  if (!fs.existsSync(directory)) {
-    return [];
-  }
-
-  return fs
-    .readdirSync(directory)
-    .filter(file => /\.tsx?$/.test(file))
-    .map(file => path.resolve(directory, file));
-}
-
-// Create both ESM and UMD builds for each icon
-const iconConfigs = [esmConfig, umdConfig].flatMap(config =>
-  getGeneratedFiles().map(file => ({
-    ...config,
-    input: `src/generated/${path.basename(file)}`,
-    output: {
-      ...config.output,
-      name: `${path.basename(file, path.extname(file))}.js`,
-    },
-  })),
-);
-
-// Until we explicitly code-split the icons, we need to
-// create a separate build for each icon at the `dist` root
-iconConfigs.push(
-  ...getGeneratedFiles().map(file => ({
-    ...umdConfig,
-    input: `src/generated/${path.basename(file)}`,
-    output: {
-      ...umdConfig.output,
-      dir: 'dist',
-      name: `${path.basename(file, path.extname(file))}.js`,
-    },
-  })),
-);
-
-export default [esmConfig, umdConfig, storiesConfig, ...iconConfigs];
+export default [esmConfig, umdConfig, storiesConfig];

package/scripts/build-parallel.ts

@@ -0,0 +1,110 @@
+/* eslint-disable no-console */
+import { exec } from 'child_process';
+import { Command } from 'commander';
+import fs from 'fs';
+import path from 'path';
+
+const ICON_DIR = path.resolve(process.cwd(), 'src/generated');
+
+const iconNames = fs
+  .readdirSync(ICON_DIR)
+  .filter(f => /\.tsx?$/.test(f))
+  .map(f => path.basename(f, path.extname(f)));
+
+const BATCH_SIZE = 10;
+const NUM_WORKERS = 4;
+
+const DELIMITER = '|';
+const ROLLUP_CONFIG_PATH = 'rollup.config.mjs';
+const ROLLUP_BATCH_CONFIG_PATH = 'rollup.batch.config.mjs';
+
+const program = new Command()
+  .description('Split icon files into batches for bundling in parallel')
+  .option('-v, --verbose', 'Enable verbose output', false)
+  .parse();
+
+const options = program.opts();
+
+/** Splits an array into chunks of a specified size. */
+function chunkArray<T>(arr: Array<T>, size: number): Array<Array<T>> {
+  const chunks: Array<Array<T>> = [];
+
+  for (let i = 0; i < arr.length; i += size) {
+    chunks.push(arr.slice(i, i + size));
+  }
+
+  return chunks;
+}
+
+/**
+ * Runs the Rollup build command for index and story files.
+ */
+async function buildExportsAndStories(): Promise<void> {
+  const cmd = `pnpm exec rollup -c ${ROLLUP_CONFIG_PATH}`;
+
+  await new Promise<void>((resolve, reject) => {
+    exec(cmd, error => {
+      if (error) {
+        reject(new Error(`Exports and stories build failed: ${error.message}`));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Runs the Rollup build command for a batch of icons.
+ */
+async function buildBatch(batch: Array<string>): Promise<void> {
+  const batchArg = batch.join(DELIMITER);
+  const cmd = `pnpm exec rollup -c ${ROLLUP_BATCH_CONFIG_PATH} --environment "ICONS:${batchArg}"`;
+
+  if (options.verbose) {
+    console.log(`Building icon batch: ${batch.join(', ')}`);
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    exec(cmd, error => {
+      if (error) {
+        reject(new Error(`Batch build failed: ${error.message}`));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Splits a list into batches, then uses a concurrency-limited queue to
+ * build all batches in parallel. Waits until all batches have finished.
+ */
+async function buildAllBatches(
+  batchSize = 10,
+  numWorkers = 4,
+  fullBatch: Array<string>,
+): Promise<void> {
+  const { default: PQueue } = await import('p-queue');
+
+  const queue = new PQueue({ concurrency: numWorkers });
+  const batches = chunkArray(fullBatch, batchSize);
+
+  for (const batch of batches) {
+    queue.add(() => buildBatch(batch));
+  }
+
+  await queue.onIdle();
+}
+
+async function main(): Promise<void> {
+  try {
+    await buildExportsAndStories();
+    await buildAllBatches(BATCH_SIZE, NUM_WORKERS, iconNames);
+    console.log('All icons built successfully (°ロ°) !');
+  } catch (err) {
+    console.error('Build failed:', err);
+    process.exit(1);
+  }
+}
+
+main();

package/scripts/postbuild.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+import fs from 'fs-extra';
+import path from 'path';
+
+async function copy(sourceDir: string, targetDir: string): Promise<void> {
+  try {
+    if (!(await fs.pathExists(sourceDir))) {
+      console.error(`Source directory does not exist: ${sourceDir}`);
+      return;
+    }
+
+    console.log(`Copying files from ${sourceDir} to ${targetDir}.`);
+    await fs.copy(sourceDir, targetDir, { overwrite: true });
+    console.log('Copy completed successfully.');
+  } catch (error) {
+    console.error('Error while copying files:', error);
+  }
+}
+
+/**
+ * Keeps backward compatibility for imports like 'leafygreen-ui/icon/dist/MyIconName'.
+ */
+const sourceDir = path.resolve(process.cwd(), 'dist/umd');
+const targetDir = path.resolve(process.cwd(), 'dist');
+
+copy(sourceDir, targetDir);

package/src/Icon.stories.tsx

@@ -14,7 +14,7 @@ import { GlyphName } from './glyphs';
 import Icon, { glyphs, IconProps, Size } from '.';
 
 const meta: StoryMetaType<typeof Icon> = {
-  title: 'Components/Icon',
+  title: 'Components/Display/Icon',
   component: Icon,
   parameters: {
     default: 'LiveExample',

package/src/Icon.tsx

@@ -1,4 +1,7 @@
 import { createIconComponent } from './createIconComponent';
 import { glyphs } from './glyphs';
 
+/**
+ * The LeafyGreen system icons are a clear and concise set of glyphs designed to be minimal in form and express a variety of use-cases for all digital products.
+ */
 export const Icon = createIconComponent(glyphs);