[icons] Only ship ES modules

packages/material-ui-icons/builder.test.js

@@ -94,7 +94,7 @@ describe('builder', () => {
       expect(fs.existsSync(actualFilePath)).to.equal(true);
 
       const actualFileData = fs.readFileSync(actualFilePath, { encoding: 'utf8' });
-      expect(actualFileData).to.include("import createSvgIcon from './utils/createSvgIcon'");
+      expect(actualFileData).to.include("import createSvgIcon from './utils/createSvgIcon.js'");
     });
   });
 

packages/material-ui-icons/fixtures/material-design-icons/expected/AccessAlarms.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="m22 5.7-4.6-3.9-1.3 1.5 4.6 3.9L22 5.7zM7.9 3.4 6.6 1.9 2 5.7l1.3 1.5 4.6-3.8zM12.5 8H11v6l4.7 2.9.8-1.2-4-2.4V8zM12 4c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/AccessAlarmsTwoTone.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <React.Fragment><path d="M12 6c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm3.7 10.9L11 14V8h1.5v5.3l4 2.4-.8 1.2z" opacity=".3" /><path d="m22 5.7-4.6-3.9-1.3 1.5 4.6 3.9zM12.5 8H11v6l4.7 2.9.8-1.2-4-2.4zM12 4c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM7.9 3.4 6.6 1.9 2 5.7l1.3 1.5z" /></React.Fragment>

packages/material-ui-icons/fixtures/material-design-icons/expected/Accessibility.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/ElevenMp.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM11 5.5v6H9.5V7H8V5.5h3zm5 0v6h-1.5V7H13V5.5h3zm-.5 8.5H17v1.5h-1.5z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/FiveMp.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM14.5 7h-3v1h2c.55 0 1 .45 1 1v1.5c0 .55-.45 1-1 1H10V10h3V9h-3V5.5h4.5V7zm1 7H17v1.5h-1.5z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/QueueMusicOutlined.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="m22 6h-5v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6zm-7 0H3v2h12V6zm0 4H3v2h12v-2zm-4 4H3v2h8v-2zm4 3c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/SixtyFps.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M19 8v8h-4V8h4m0-3h-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3h4c1.66 0 3-1.34 3-3V8c0-1.66-1.34-3-3-3zm-9 3V5H5C3.34 5 2 6.34 2 8v8c0 1.66 1.34 3 3 3h3c1.66 0 3-1.34 3-3v-3c0-1.66-1.34-3-3-3H5V8h5zm-2 5v3H5v-3h3z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/StarRounded.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="m12 17.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/ThirtyFps.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M2 5v3h6v2.5H3v3h5V16H2v3h6c1.66 0 3-1.34 3-3v-1.9c0-1.16-.94-2.1-2.1-2.1 1.16 0 2.1-.94 2.1-2.1V8c0-1.66-1.34-3-3-3H2zm17 3v8h-4V8h4m0-3h-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3h4c1.66 0 3-1.34 3-3V8c0-1.66-1.34-3-3-3z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/TimesOneMobiledata.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M4 7h4v10H6V9H4V7zm11.83 4.72L18.66 7h-2.33l-1.66 2.77L13 7h-2.33l2.83 4.72L10.33 17h2.33l2-3.34 2 3.34H19l-3.17-5.28z" />

packages/material-ui-icons/fixtures/material-design-icons/expected/TwentyFourMp.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM10 9H8v1h3v1.5H6.5V9c0-.55.45-1 1-1h2V7h-3V5.5H10c.55 0 1 .45 1 1V8c0 .55-.45 1-1 1zm8.5 1h-1v1.5H16V10h-3V5.5h1.5v3H16v-3h1.5v3h1V10zm-3 4H17v1.5h-1.5z" />

packages/material-ui-icons/package.json

@@ -4,7 +4,18 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Material Design icons distributed as SVG React components.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./*": "./lib/*.js"
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": "./index.js",
+      "./*": "./*.js"
+    },
+    "type": "module"
+  },
   "keywords": [
     "react",
     "react-component",
@@ -24,12 +35,12 @@
   "homepage": "https://material-ui.com/components/icons",
   "scripts": {
     "build": "cp -r lib/ build/ && yarn build:typings && yarn build:copy-files",
-    "build:lib": "yarn build:node && yarn build:stable",
+    "build:lib": "yarn build:stable",
     "build:lib:clean": "rimraf lib/ && yarn build:lib",
     "build:legacy": "echo 'Skip legacy build'",
     "build:modern": "echo 'Skip modern build'",
-    "build:node": "node ../../scripts/build node --largeFiles --outDir lib",
-    "build:stable": "node ../../scripts/build stable --largeFiles --outDir lib",
+    "build:node": "echo 'Skip node build'",
+    "build:stable": "node ../../scripts/build stable --largeFiles --onlyESModules --outDir lib",
     "build:copy-files": "node ../../scripts/copy-files.js",
     "build:typings": "babel-node --config-file ../../babel.config.js ./scripts/create-typings.js",
     "prebuild": "rimraf build",
@@ -60,9 +71,6 @@
     "yargs": "^17.0.1"
   },
   "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "engines": {
     "node": ">=12.0.0"
   }

packages/material-ui-icons/scripts/create-typings.js

@@ -4,7 +4,7 @@ import chalk from 'chalk';
 import fse from 'fs-extra';
 import glob from 'fast-glob';
 
-const SRC_DIR = path.resolve(__dirname, '../lib/esm');
+const SRC_DIR = path.resolve(__dirname, '../lib');
 const TARGET_DIR = path.resolve(__dirname, '../build');
 
 function normalizeFileName(file) {

packages/material-ui-icons/templateSvgIcon.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createSvgIcon from './utils/createSvgIcon';
+import createSvgIcon from './utils/createSvgIcon.js';
 
 export default createSvgIcon(
   {{{paths}}}

scripts/build.js

@@ -18,14 +18,20 @@ const validBundles = [
 ];
 
 async function run(argv) {
-  const { bundle, largeFiles, outDir: relativeOutDir, verbose } = argv;
+  const { bundle, largeFiles, onlyESModules, outDir: relativeOutDir, verbose } = argv;
 
   if (validBundles.indexOf(bundle) === -1) {
     throw new TypeError(
       `Unrecognized bundle '${bundle}'. Did you mean one of "${validBundles.join('", "')}"?`,
     );
   }
 
+  if (onlyESModules && bundle === 'node') {
+    throw new TypeError(
+      'This script is not intended for packages that only ship ES modules but also want a separate build for node.',
+    );
+  }
+
   const env = {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
@@ -62,7 +68,7 @@ async function run(argv) {
     {
       node: topLevelPathImportsCanBePackages ? './node' : './',
       modern: './modern',
-      stable: topLevelPathImportsCanBePackages ? './' : './esm',
+      stable: topLevelPathImportsCanBePackages || onlyESModules ? './' : './esm',
       legacy: './legacy',
     }[bundle],
   );
@@ -116,6 +122,11 @@ yargs
           default: false,
           describe: 'Set to `true` if you know you are transpiling large files.',
         })
+        .option('onlyESModules', {
+          type: 'boolean',
+          default: false,
+          describe: 'Set to `true` if the package only ships with ES modules.',
+        })
         .option('out-dir', { default: './build', type: 'string' })
         .option('verbose', { type: 'boolean' });
     },

scripts/copy-files.js

@@ -86,9 +86,14 @@ async function typescriptCopy({ from, to }) {
 
 async function createPackageFile() {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
-  const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = JSON.parse(
-    packageData,
-  );
+  const {
+    nyc,
+    scripts,
+    devDependencies,
+    workspaces,
+    publishConfig: { exports: publishedExports, type: publishedType, ...publishConfig },
+    ...packageDataOther
+  } = JSON.parse(packageData);
 
   const newPackageData = {
     ...packageDataOther,
@@ -104,6 +109,9 @@ async function createPackageFile() {
         }
       : {}),
     types: './index.d.ts',
+    type: publishedType,
+    exports: publishedExports,
+    publishConfig,
   };
 
   const targetPath = path.resolve(buildPath, './package.json');