feat(infrastructure): Added ability import components directly to support fed modules tree-shaking of shared packages.

package.json

@@ -67,14 +67,15 @@
     "typescript": "^4.7.4"
   },
   "scripts": {
-    "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:subpaths && yarn build:cjs",
+    "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:subpaths && yarn build:cjs && yarn build:single:packages",
     "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json",
     "build:esm": "tsc --build --verbose packages/tsconfig.json",
     "build:integration": "lerna run build:demo-app --stream",
     "build:docs": "yarn workspace @patternfly/react-docs build:docs",
     "build:generate": "lerna run generate --parallel --stream",
     "build:subpaths": "lerna run subpaths --parallel --stream",
     "build:umd": "lerna run build:umd --parallel --stream",
+    "build:single:packages": "lerna run build:single:packages",
     "clean": "yarn clean:build && lerna run clean --parallel",
     "clean:build": "rimraf .cache .eslintcache coverage",
     "generate": "yarn plop",

packages/react-charts/package.json

@@ -56,7 +56,8 @@
     "react-dom": "^17 || ^18"
   },
   "scripts": {
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "build:single:packages" : "node ../../scripts/build-single-packages.js --config single-packages.config.json"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.157",

packages/react-charts/single-packages.config.json

@@ -0,0 +1,17 @@
+{
+    "packageName": "@patternfly/react-charts",
+    "modules": [ 
+        {
+            "name": "dist/esm",
+            "type": "esm"
+        },
+        {
+            "name": "dist/js",
+            "type": "cjs"
+        }
+    ],
+    "exclude": [
+        "dist/esm/deprecated/index.js",
+        "dist/esm/next/index.js"
+    ]
+}

packages/react-core/package.json

@@ -40,6 +40,7 @@
   "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",
     "clean": "rimraf dist",
     "generate": "node scripts/copyStyles.js",
     "subpaths": "node scripts/createSubpaths.js"

packages/react-core/single-packages.config.json

@@ -0,0 +1,14 @@
+{
+    "packageName": "@patternfly/react-core",
+    "modules": [ 
+        {
+            "name": "dist/esm",
+            "type": "esm"
+        },
+        {
+            "name": "dist/js",
+            "type": "cjs"
+        }
+    ],
+    "exclude": []
+}

packages/react-table/package.json

@@ -35,6 +35,7 @@
   "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",
     "clean": "rimraf dist",
     "subpaths": "node scripts/createSubpaths.js"
   },

packages/react-table/single-packages.config.json

@@ -0,0 +1,21 @@
+{
+    "packageName": "@patternfly/react-table",
+    "modules": [ 
+        {
+            "name": "components",
+            "type": "esm"
+        },
+        {
+            "name": "deprecated",
+            "type": "esm"
+        },
+        {
+            "name": "dist/js",
+            "type": "cjs"
+        }
+    ],
+    "exclude": [
+        "dist/esm/deprecated/index.js",
+        "dist/esm/next/index.js"
+    ]
+}

scripts/build-single-packages.js

@@ -0,0 +1,81 @@
+/* eslint-disable no-console */
+const fse = require('fs-extra');
+const glob = require('glob');
+
+const root = process.cwd();
+const packageJson = require(`${root}/package.json`);
+
+if (!(process.argv.includes('--config')  && process.argv.indexOf('--config') + 1 < process.argv.length)) {
+  console.log('--config is required followed by the config file name');
+  process.exit(1);
+}
+
+const configJson = require(`${root}/${process.argv[process.argv.indexOf('--config') + 1]}`);
+
+const foldersexclude = configJson.exclude ? configJson.exclude : []
+
+if (!configJson.modules || configJson.modules.length === 0) {
+  console.log('modules are required');
+  process.exit(1);
+}
+
+const components = configJson.modules.map(module => ({
+    files: glob
+      .sync(`${root}/${module.name}/**/**/index.js`)
+      .filter((item) => !foldersexclude.some((name) => item.includes(name)))
+      .map((name) => name.replace(/\/$/, '')),
+    type: module.type
+  }));
+
+async function createPackage(component, dist) {
+  const cmds = [];
+  const destFile = component.replace(/index.js/g, 'package.json');
+  const pathAsArray = component.split('/');
+  const esmRelative = `.${component.split(`${root}`)[1]}`;
+
+  const packageName = configJson.packageName;
+  if (!packageName) {
+    console.log("packageName is required!")
+    process.exit(1);
+  }
+
+  let componentName = pathAsArray[pathAsArray.length - 2];
+  if (pathAsArray.includes("next")) {
+    componentName = `${componentName.toLowerCase()}-next-${dist}`;
+  } else if (pathAsArray.includes("deprecated")) {
+    componentName = `${componentName.toLowerCase()}-deprecated-${dist}`;
+  } else {
+    componentName = `${componentName.toLowerCase()}-${dist}`;
+  }
+
+  const content = {
+    name: `${packageName}-${componentName}`,
+    main: 'index.js',
+    module: esmRelative,
+    typings: 'index.d.ts',
+    version: packageJson.version
+  };
+
+  cmds.push(fse.writeJSON(destFile, content));
+
+  return Promise.all(cmds);
+}
+
+async function generatePackages(components, dist) {
+  const cmds = components.map((component) => createPackage(component, dist));
+  return Promise.all(cmds);
+}
+
+async function run(components, dist) {
+  try {
+    await generatePackages(components, dist);
+  } catch (error) {
+    console.log(error)
+    process.exit(1);
+  }
+}
+
+components.forEach(component => {
+  run(component.files, component.type);
+});
+