Convert scripts to ES modules (#10834)

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

.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

package.json

@@ -90,7 +90,6 @@
     "build:single:packages": "lerna run build:single:packages",
     "clean": "yarn clean:build && lerna run clean --parallel",
     "clean:build": "rimraf .cache .eslintcache coverage",
-    "clean:exports": "lerna run clean:exports --parallel --stream",
     "generate": "yarn plop",
     "lint": "eslint . --cache --cache-strategy content",
     "lint:all": "yarn lint:md && yarn lint:ts",

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,10 @@
   "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"
   },
   "dependencies": {
     "@patternfly/react-icons": "workspace:^",

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-integration/cypress/support/index.js

@@ -16,6 +16,3 @@ import 'cypress-plugin-tab';
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

packages/react-integration/package.json

@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "build:integration:report": "cd results && junit-merge * && node ../scripts/junit2html.js",
+    "build:integration:report": "cd results && junit-merge * && node ../scripts/junit2html.mjs",
     "clean": "rimraf cypress/videos cypress/screenshots",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",

packages/react-integration/scripts/htmlReport.js → packages/react-integration/scripts/htmlReport.mjs

@@ -1,4 +1,4 @@
-const xmlDocument = require('xmldoc');
+import xmlDocument from 'xmldoc';
 
 // stacked bar chart & execution details data gets captured during input xml parsing
 let dataSeries = '';
@@ -188,7 +188,7 @@ const generateTSTable = function (testConfig) {
  * @param {any} reportXml - XML data
  * @param {object} testConfig - config object
  */
-function getHTMLReport(reportXml, testConfig) {
+export function getHTMLReport(reportXml, testConfig) {
   const testDetails = generateTDTable(reportXml);
   const testSummary = generateTSTable(testConfig);
 
@@ -203,6 +203,3 @@ function getHTMLReport(reportXml, testConfig) {
 
   return htmlReport;
 }
-
-// @exports
-export default { getHTMLReport };

packages/react-integration/scripts/junit2html.mjs

@@ -0,0 +1,8 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { getHTMLReport } from './htmlReport.mjs';
+
+const junitXml = fs.readFileSync(path.join(import.meta.dirname, '../results/merged-test-results.xml'), 'utf8');
+const htmlReport = getHTMLReport(junitXml, { reportTitle: 'Cypress Test Coverage Execution Report' });
+
+fs.writeFileSync(path.join(import.meta.dirname, '../results/index.html'), htmlReport);

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, ''));
+}