Convert icons scripts to ESM (#35101)

Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>

.eslintrc.js

@@ -185,6 +185,7 @@ module.exports = {
     {
       files: [
         // matching the pattern of the test runner
+        '*.test.mjs',
         '*.test.js',
         '*.test.mjs',
         '*.test.ts',

modules/waterfall/Queue.js → modules/waterfall/Queue.mjs

@@ -1,4 +1,4 @@
-import waitUntil from './waitUntil';
+import waitUntil from './waitUntil.mjs';
 
 class Queue {
   pendingEntries = [];

modules/waterfall/waitUntil.js → modules/waterfall/waitUntil.mjs

@@ -1,4 +1,4 @@
-import sleep from './sleep';
+import sleep from './sleep.mjs';
 
 export default async function waitUntil(test, options = {}) {
   const { delay = 5e3, tries = -1 } = options;

package.json

@@ -30,7 +30,7 @@
     "docs:typescript": "yarn docs:typescript:formatted --watch",
     "docs:typescript:check": "yarn workspace docs typescript",
     "docs:typescript:formatted": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/formattedTSDemos",
-    "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/updateIconSynonyms && yarn prettier",
+    "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && yarn prettier",
     "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --parallel build:modern",
     "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots",
     "install:codesandbox": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install --ignore-engines",

packages/mui-icons-material/builder.js → packages/mui-icons-material/builder.mjs

@@ -3,13 +3,16 @@ import yargs from 'yargs';
 import path from 'path';
 import rimraf from 'rimraf';
 import Mustache from 'mustache';
-import Queue from 'modules/waterfall/Queue';
-import intersection from 'lodash/intersection';
 import globAsync from 'fast-glob';
 import * as svgo from 'svgo';
+import { fileURLToPath } from 'url';
+import intersection from 'lodash/intersection.js';
+import Queue from '../../modules/waterfall/Queue.mjs';
 
-export const RENAME_FILTER_DEFAULT = './renameFilters/default';
-export const RENAME_FILTER_MUI = './renameFilters/material-design-icons';
+const currentDirectory = fileURLToPath(new URL('.', import.meta.url));
+
+export const RENAME_FILTER_DEFAULT = './renameFilters/default.mjs';
+export const RENAME_FILTER_MUI = './renameFilters/material-design-icons.mjs';
 
 /**
  * Converts directory separators to slashes, so the path can be used in fast-glob.
@@ -43,6 +46,7 @@ async function generateIndex(options) {
       const typename = path.basename(file).replace('.js', '');
       return `export { default as ${typename} } from './${typename}';\n`;
     })
+    .sort()
     .join('');
 
   await fse.writeFile(path.join(options.outputDir, 'index.js'), index);
@@ -247,7 +251,7 @@ export async function handler(options) {
 
   const [svgPaths, template] = await Promise.all([
     globAsync(normalizePath(path.join(options.svgDir, options.glob))),
-    fse.readFile(path.join(__dirname, 'templateSvgIcon.js'), {
+    fse.readFile(path.join(currentDirectory, 'templateSvgIcon.js'), {
       encoding: 'utf8',
     }),
   ]);
@@ -267,7 +271,7 @@ export async function handler(options) {
   queue.push(svgPaths);
   await queue.wait({ empty: true });
 
-  let legacyFiles = await globAsync(normalizePath(path.join(__dirname, '/legacy', '*.js')));
+  let legacyFiles = await globAsync(normalizePath(path.join(currentDirectory, '/legacy', '*.js')));
   legacyFiles = legacyFiles.map((file) => path.basename(file));
   let generatedFiles = await globAsync(normalizePath(path.join(options.outputDir, '*.js')));
   generatedFiles = generatedFiles.map((file) => path.basename(file));
@@ -282,14 +286,18 @@ export async function handler(options) {
     );
   }
 
-  await fse.copy(path.join(__dirname, '/legacy'), options.outputDir);
-  await fse.copy(path.join(__dirname, '/custom'), options.outputDir);
+  await fse.copy(path.join(currentDirectory, '/legacy'), options.outputDir);
+  await fse.copy(path.join(currentDirectory, '/custom'), options.outputDir);
 
   await generateIndex(options);
 }
 
-if (require.main === module) {
-  yargs
+const nodePath = path.resolve(process.argv[1]);
+const modulePath = path.resolve(fileURLToPath(import.meta.url));
+const isRunningDirectlyViaCLI = nodePath === modulePath;
+
+if (isRunningDirectlyViaCLI) {
+  yargs(process.argv.slice(2))
     .command({
       command: '$0>',
       description: "Build JSX components from SVG's.",

packages/mui-icons-material/builder.test.js → packages/mui-icons-material/builder.test.mjs

@@ -2,17 +2,20 @@ import { expect } from 'chai';
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import fse from 'fs-extra';
-import { RENAME_FILTER_MUI, RENAME_FILTER_DEFAULT, getComponentName, handler } from './builder';
+import { RENAME_FILTER_MUI, RENAME_FILTER_DEFAULT, getComponentName, handler } from './builder.mjs';
+
+const currentDirectory = fileURLToPath(new URL('.', import.meta.url));
 
 const DISABLE_LOG = true;
 
 // To cut down on test time, use fixtures instead of node_modules
-// const MUI_ICONS_ROOT = path.join(__dirname, '../node_modules/material-design-icons/');
-const MUI_ICONS_ROOT = path.join(__dirname, './fixtures/material-design-icons/');
+// const MUI_ICONS_ROOT = path.join(currentDirectory, '../node_modules/material-design-icons/');
+const MUI_ICONS_ROOT = path.join(currentDirectory, './fixtures/material-design-icons/');
 const MUI_ICONS_SVG_DIR = path.join(MUI_ICONS_ROOT, 'svg');
 
-const GAME_ICONS_ROOT = path.join(__dirname, './fixtures/game-icons/');
+const GAME_ICONS_ROOT = path.join(currentDirectory, './fixtures/game-icons/');
 const GAME_ICONS_SVG_DIR = path.join(GAME_ICONS_ROOT, 'svg/icons/');
 
 describe('builder', () => {