Convert scripts to ES modules

Signed-off-by: Jon Koops <[email protected]>

.github/actions/setup-project/action.yml

@@ -62,7 +62,7 @@ runs:
     - name: Run build
       if: inputs.skip-build != 'true' && steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
-      run: yarn build && yarn build:umd
+      run: yarn build && yarn build:umd && yarn clean:exports
       env:
         # Disable V8 compile cache to hard crashes in Node.js. This can likely be removed once upgraded to the next LTS version (version 22).
         # See: https://github.com/nodejs/node/issues/51555

.github/split.js → .github/split.mjs

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-const fs = require('fs');
-const path = require('path');
+import fs from 'node:fs';
+import path from 'node:path';
 
-const BASE_DIR = path.join(__dirname, '../packages/react-integration/cypress/integration');
+const BASE_DIR = path.resolve(import.meta.dirname, '../packages/react-integration/cypress/integration');
 const WORKER_NUM = +process.env.WORKER_NUM;
 const WORKER_COUNT = +process.env.WORKER_COUNT;
 

.github/upload-preview.js → .github/upload-preview.mjs

@@ -1,8 +1,9 @@
 /* eslint-disable no-console, camelcase */
-const path = require('path');
-const { Octokit } = require('@octokit/rest');
+import { Octokit } from '@octokit/rest';
+import path from 'node:path';
+import surge from 'surge';
+
 const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN });
-const surge = require('surge');
 const publishFn = surge().publish();
 
 // From github actions

.github/workflows/documentation.yml

@@ -39,11 +39,11 @@ jobs:
 
       - name: Upload documentation
         if: always()
-        run: node .github/upload-preview.js packages/react-docs/public
+        run: node .github/upload-preview.mjs packages/react-docs/public
 
       - name: Run accessibility tests
         run: yarn serve:docs & yarn test:a11y
 
       - name: Upload accessibility results
         if: always()
-        run: node .github/upload-preview.js packages/react-docs/coverage
+        run: node .github/upload-preview.mjs packages/react-docs/coverage

.github/workflows/main.yml

@@ -93,7 +93,7 @@ jobs:
         run: printenv
 
       - name: Run Cypress tests
-        run: yarn serve:integration & yarn test:integration -s $(node .github/split.js)
+        run: yarn serve:integration & yarn test:integration -s $(node .github/split.mjs)
         env:
           WORKER_NUM: ${{ matrix.worker }}
           WORKER_COUNT: 5

packages/react-charts/package.json

@@ -58,7 +58,7 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json"
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.5",

packages/react-core/package.json

@@ -40,11 +40,11 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated",
-    "generate": "node scripts/copyStyles.js",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
-    "clean:exports": "node scripts/cleanDistExports.js"
+    "generate": "node scripts/copyStyles.mjs",
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json",
+    "clean:exports": "node scripts/cleanDistExports.mjs"
   },
   "dependencies": {
     "@patternfly/react-icons": "workspace:^",

packages/react-core/scripts/cleanDistExports.js → packages/react-core/scripts/cleanDistExports.mjs

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'node:fs';
+import path from 'node:path';
 
 const distIndexFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.js'));
 const distIndexDeclarationFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.d.ts'));

packages/react-core/scripts/copyStyles.js → packages/react-core/scripts/copyStyles.mjs

@@ -1,8 +1,11 @@
-const { copySync, readFileSync, writeFileSync } = require('fs-extra');
-const { resolve, dirname, join } = require('path');
-const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+import { copySync } from 'fs-extra/esm';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { resolve, dirname, join } from 'node:path';
+import { parse as parseCSS, stringify as stringifyCSS } from 'css';
 
-const stylesDir = resolve(__dirname, '../dist/styles');
+const require = createRequire(import.meta.url);
+const stylesDir = resolve(import.meta.dirname, '../dist/styles');
 const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
 
 const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;

packages/react-icons/package.json

@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist src/icons src/index.js src/index.d.ts",
     "generate": "rimraf dist/esm/icons dist/js/icons && node scripts/writeIcons.mjs"
   },

packages/react-icons/scripts/generateIcons.mjs

@@ -1,6 +1,6 @@
-import faIcons from './icons/fontawesomeIcons.js';
+import faIcons from './icons/fontawesomeIcons.mjs';
 import patternflyIcons from './icons/patternflyIcons.mjs';
-import customIcons from './icons/customIcons.js';
+import customIcons from './icons/customIcons.mjs';
 
 /**
  * Generates icons from FontAwesome, PatternFly CSS, and custom icons in this repo.

packages/react-icons/scripts/icons/customIcons.js → packages/react-icons/scripts/icons/customIcons.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   openshift: {
     xOffset: 116,
     yOffset: 0,

packages/react-icons/scripts/icons/fontawesomeIcons.js → packages/react-icons/scripts/icons/fontawesomeIcons.mjs

@@ -1,6 +1,6 @@
-const { fas } = require('@fortawesome/free-solid-svg-icons');
-const { far } = require('@fortawesome/free-regular-svg-icons');
-const { fab } = require('@fortawesome/free-brands-svg-icons');
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
 
 /**
  * @param {object} icon FontAwesome icon to convert
@@ -50,8 +50,10 @@ function convertIcons(icons) {
     }, {});
 }
 
-module.exports = {
+const faIcons = {
   ...convertIcons(fas),
   ...convertIcons(fab),
   ...convertIcons(far)
 };
+
+export default faIcons;

packages/react-table/package.json

@@ -35,9 +35,9 @@
   "homepage": "https://github.com/patternfly/patternfly-react/tree/main/packages/react-table#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist components deprecated",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
     "@patternfly/react-core": "workspace:^",

packages/react-templates/package.json

@@ -28,9 +28,9 @@
   "homepage": "https://github.com/patternfly/patternfly-react/tree/main/packages/react-templates#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist components deprecated",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
     "@patternfly/react-core": "workspace:^",

packages/react-tokens/package.json

@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "generate": "yarn clean && node scripts/writeTokens.js",
+    "generate": "yarn clean && node scripts/writeTokens.mjs",
     "clean": "rimraf dist"
   },
   "devDependencies": {

packages/react-tokens/scripts/generateTokens.js → packages/react-tokens/scripts/generateTokens.mjs

@@ -1,8 +1,10 @@
-const { glob } = require('glob');
-const { dirname, basename, sep } = require('path');
-const { parse, stringify } = require('css');
-const { readFileSync } = require('fs');
+import { glob } from 'glob';
+import { createRequire } from 'node:module';
+import { dirname, basename, sep } from 'node:path';
+import { parse, stringify } from 'css';
+import { readFileSync } from 'node:fs';
 
+const require = createRequire(import.meta.url);
 const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
 const version = 'v6';
 
@@ -91,7 +93,7 @@ const getLocalVarsMap = (cssFiles) => {
  *   }
  * }
  */
-function generateTokens() {
+export function generateTokens() {
   const cssFiles = glob
     .sync(['{**/{components,layouts}/**/*.css', '**/patternfly-charts.css', '**/patternfly-variables.css}'].join(','), {
       cwd: pfStylesDir,
@@ -249,7 +251,3 @@ function generateTokens() {
 
   return fileTokens;
 }
-
-module.exports = {
-  generateTokens
-};

packages/react-tokens/scripts/writeTokens.js → packages/react-tokens/scripts/writeTokens.mjs

@@ -1,8 +1,8 @@
-const { outputFileSync } = require('fs-extra');
-const { resolve, join } = require('path');
-const { generateTokens } = require('./generateTokens');
+import { outputFileSync } from 'fs-extra/esm';
+import { resolve, join } from 'node:path';
+import { generateTokens } from './generateTokens.mjs';
 
-const outDir = resolve(__dirname, '../dist');
+const outDir = resolve(import.meta.dirname, '../dist');
 
 const writeESMExport = (tokenName, tokenString) =>
   outputFileSync(

plopfile.mjs

@@ -0,0 +1,12 @@
+import { setActionTypes } from './scripts/generators/actionTypes.mjs';
+import { setHelpers } from './scripts/generators/helpers.mjs';
+import setPFGenerators from './scripts/generators/patternfly-component/index.mjs';
+import setPackageGenerators from './scripts/generators/package/index.mjs';
+
+export default function (plop) {
+  setHelpers(plop);
+  setActionTypes(plop);
+
+  setPFGenerators(plop);
+  setPackageGenerators(plop);
+}

scripts/build-single-packages.js → scripts/build-single-packages.mjs

@@ -1,9 +1,11 @@
 /* eslint-disable no-console */
-const fse = require('fs-extra');
-const path = require('path');
-const { glob } = require('glob');
-const getDynamicModuleMap = require('./parse-dynamic-modules');
+import fse from 'fs-extra';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { glob } from 'glob';
+import getDynamicModuleMap from './parse-dynamic-modules.mjs';
 
+const require = createRequire(import.meta.url);
 const root = process.cwd();
 const packageJson = require(`${root}/package.json`);
 

scripts/exportSubpaths.js → scripts/exportSubpaths.mjs

@@ -1,7 +1,9 @@
 /* eslint-disable no-console */
-const fse = require('fs-extra');
-const path = require('path');
+import fse from 'fs-extra';
+import { createRequire } from 'node:module';
+import path from 'node:path';
 
+const require = createRequire(import.meta.url);
 const root = process.cwd();
 const packageJson = require(`${root}/package.json`);
 

scripts/generators/actionTypes.js → scripts/generators/actionTypes.mjs

@@ -1,9 +1,9 @@
-const path = require('path');
-const fs = require('fs-extra');
+import path from 'node:path';
+import fs from 'fs-extra';
 
-const ADD_TO_BARREL_FILE = 'addToBarrelFile';
+export const ADD_TO_BARREL_FILE = 'addToBarrelFile';
 
-function setActionTypes(plop) {
+export function setActionTypes(plop) {
   plop.setActionType(ADD_TO_BARREL_FILE, addToBarrelFile);
 }
 
@@ -29,8 +29,3 @@ async function addToBarrelFile(answers, config, plop) {
   await fs.outputFile(pathToFile, updatedLines.join('\n'));
   return `-> ${pathToFile}`;
 }
-
-module.exports = {
-  setActionTypes,
-  ADD_TO_BARREL_FILE
-};

scripts/generators/helpers.mjs

@@ -0,0 +1,5 @@
+export const REMOVE_NPM_SCOPE = 'removeNPMScope';
+
+export function setHelpers(plop) {
+  plop.setHelper(REMOVE_NPM_SCOPE, (text) => text.replace(/^@patternfly\//i, ''));
+}

scripts/generators/package/index.js → scripts/generators/package/index.mjs

@@ -1,9 +1,9 @@
-const { join, resolve } = require('path');
-const { REMOVE_NPM_SCOPE } = require('../helpers');
+import { join, resolve } from 'node:path';
+import { REMOVE_NPM_SCOPE } from '../helpers.mjs';
 
-const packagesRoot = resolve(__dirname, '../../../packages');
+const packagesRoot = resolve(import.meta.dirname, '../../../packages');
 
-function setPackageGenerators(plop) {
+export default function setPackageGenerators(plop) {
   plop.setGenerator('Package', {
     description: 'A new package for the monorepo',
     prompts: [
@@ -30,7 +30,7 @@ function setPackageGenerators(plop) {
         {
           type: 'add',
           path: join(packageBaseTemplate, `package.json`),
-          templateFile: resolve(__dirname, './package.json.hbs')
+          templateFile: resolve(import.meta.dirname, './package.json.hbs')
         },
         {
           type: 'add',
@@ -42,17 +42,17 @@ function setPackageGenerators(plop) {
         answers.buildsWithTypescript && {
           type: 'add',
           path: join(packageBaseTemplate, `.npmignore`),
-          templateFile: resolve(__dirname, './.npmignore')
+          templateFile: resolve(import.meta.dirname, './.npmignore')
         },
         answers.buildsWithTypescript && {
           type: 'add',
           path: join(packageBaseTemplate, `tsconfig.json`),
-          templateFile: resolve(__dirname, './tsconfig.json')
+          templateFile: resolve(import.meta.dirname, './tsconfig.json')
         },
         answers.buildsWithTypescript && {
           type: 'add',
           path: join(packageBaseTemplate, `tsconfig.cjs.json`),
-          templateFile: resolve(__dirname, './tsconfig.cjs.json')
+          templateFile: resolve(import.meta.dirname, './tsconfig.cjs.json')
         },
         {
           type: 'add',
@@ -63,5 +63,3 @@ function setPackageGenerators(plop) {
     }
   });
 }
-
-module.exports = setPackageGenerators;