Generate dist/dynamic-modules.json for relevant packages

scripts/build-single-packages.js

@@ -1,65 +1,73 @@
 /* eslint-disable no-console */
 const fse = require('fs-extra');
+const path = require('path');
 const glob = require('glob');
-const path = require('path')
+const getDynamicModuleMap = require('./parse-dynamic-modules');
 
 const root = process.cwd();
 const packageJson = require(`${root}/package.json`);
 
-if (!(process.argv.includes('--config')  && process.argv.indexOf('--config') + 1 < process.argv.length)) {
+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 : []
+const foldersExclude = configJson.exclude ? configJson.exclude : [];
 
-let moduleGlob = configJson.moduleGlob
-if(moduleGlob && !Array.isArray(moduleGlob)) {
- moduleGlob = [moduleGlob]
+let moduleGlob = configJson.moduleGlob;
+
+if (moduleGlob && !Array.isArray(moduleGlob)) {
+ moduleGlob = [moduleGlob];
 } else if (!moduleGlob) {
- moduleGlob = ['/dist/esm/*/*/**/index.js']
+ moduleGlob = ['/dist/esm/*/*/**/index.js'];
 }
+
 const components = {
  // need the /*/*/ to avoid grabbing top level index files
  /**
  * We don't want the /index.js or /components/index.js to be have packages
  * These files will not help with tree shaking in module federation environments
  */
- files: moduleGlob.map(pattern => glob
- .sync(`${root}${pattern}`)
- .filter((item) => !foldersExclude.some((name) => item.includes(name)))
- .map((name) => name.replace(/\/$/, '')))
- .flat(),
- }
-
-
+ files: moduleGlob
+ .map((pattern) =>
+ glob
+ .sync(`${root}${pattern}`)
+ .filter((item) => !foldersExclude.some((name) => item.includes(name)))
+ .map((name) => name.replace(/\/$/, ''))
+ )
+ .flat()
+};
 
 async function createPackage(component) {
  const cmds = [];
  let destFile = component.replace(/[^/]+\.js$/g, 'package.json').replace('/dist/esm/', '/dist/dynamic/');
- if(component.match(/index\.js$/)) {
+
+ if (component.match(/index\.js$/)) {
  destFile = component.replace(/[^/]+\.js$/g, 'package.json').replace('/dist/esm/', '/dist/dynamic/');
  } else {
  destFile = component.replace(/\.js$/g, '/package.json').replace('/dist/esm/', '/dist/dynamic/');
  }
+
  const pathAsArray = component.split('/');
- const destDir = destFile.replace(/package\.json$/, '')
- const esmRelative = path.relative(destDir, component)
- const cjsRelative = path.relative(destDir, component.replace('/dist/esm/', '/dist/js/'))
- const typesRelative = path.relative(destDir, component.replace(/\.js$/, '.d.ts'))
+ const destDir = destFile.replace(/package\.json$/, '');
+ const esmRelative = path.relative(destDir, component);
+ const cjsRelative = path.relative(destDir, component.replace('/dist/esm/', '/dist/js/'));
+ const typesRelative = path.relative(destDir, component.replace(/\.js$/, '.d.ts'));
 
  const packageName = configJson.packageName;
+
  if (!packageName) {
- console.log("packageName is required!")
+ console.log('packageName is required!');
  process.exit(1);
  }
 
  let componentName = pathAsArray[pathAsArray.length - (component.match(/index\.js$/) ? 2 : 1)];
- if (pathAsArray.includes("next")) {
+
+ if (pathAsArray.includes('next')) {
  componentName = `${componentName.toLowerCase()}-next-dynamic`;
- } else if (pathAsArray.includes("deprecated")) {
+ } else if (pathAsArray.includes('deprecated')) {
  componentName = `${componentName.toLowerCase()}-deprecated-dynamic`;
  } else {
  componentName = `${componentName.toLowerCase()}-dynamic`;
@@ -75,25 +83,39 @@ async function createPackage(component) {
  };
 
  // use ensureFile to not having to create all the directories
- fse.ensureDirSync(destDir)
- cmds.push(fse.writeJSON(destFile, content))
+ fse.ensureDirSync(destDir);
+ cmds.push(fse.writeJSON(destFile, content));
 
  return Promise.all(cmds);
 }
 
-async function generatePackages(components, dist) {
- const cmds = components.map((component) => createPackage(component, dist));
+async function generatePackages(components) {
+ const cmds = components.map((component) => createPackage(component));
  return Promise.all(cmds);
 }
 
-async function run(components) {
+async function generateDynamicModuleMap() {
+ const moduleMap = getDynamicModuleMap(root);
+
+ if (Object.keys(moduleMap).length === 0) {
+ return Promise.resolve();
+ }
+
+ const moduleMapSorted = Object.keys(moduleMap)
+ .sort()
+ .reduce((acc, key) => ({ ...acc, [key]: moduleMap[key] }), {});
+
+ return fse.writeJSON(path.resolve(root, 'dist/dynamic-modules.json'), moduleMapSorted, { spaces: 2 });
+}
+
+async function run() {
  try {
- await generatePackages(components);
+ await generatePackages(components.files);
+ await generateDynamicModuleMap();
  } catch (error) {
- console.log(error)
+ console.log(error);
  process.exit(1);
  }
 }
 
-run(components.files);
-
+run();

scripts/parse-dynamic-modules.js

@@ -0,0 +1,159 @@
+/* eslint-disable no-console */
+const fs = require('fs-extra');
+const path = require('path');
+const glob = require('glob');
+const ts = require('typescript');
+
+/** @type {ts.CompilerOptions} */
+const tsConfigBase = require(path.resolve(__dirname, '../packages/tsconfig.base.json'));
+
+/** @type {ts.CompilerOptions} */
+const defaultCompilerOptions = {
+ target: tsConfigBase.target,
+ module: tsConfigBase.module,
+ moduleResolution: tsConfigBase.moduleResolution,
+ esModuleInterop: tsConfigBase.esModuleInterop,
+ allowJs: true,
+ strict: false,
+ skipLibCheck: true,
+ noEmit: true
+};
+
+/**
+ * Map all exports of the given index module to their corresponding dynamic modules.
+ *
+ * Example: `@patternfly/react-core` package provides ESModules index at `dist/esm/index.js`
+ * which exports Alert component related code & types via `dist/esm/components/Alert/index.js`
+ * module.
+ *
+ * Given the example above, this function should return a mapping like so:
+ * ```js
+ * {
+ * Alert: 'dist/dynamic/components/Alert',
+ * AlertProps: 'dist/dynamic/components/Alert',
+ * AlertContext: 'dist/dynamic/components/Alert',
+ * // ...
+ * }
+ * ```
+ *
+ * The above mapping can be used when generating import statements like so:
+ * ```ts
+ * import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert';
+ * ```
+ *
+ * It may happen that the same export is provided by multiple dynamic modules;
+ * in such case, the resolution favors modules with most specific file paths, for example
+ * `dist/dynamic/components/Wizard/hooks` is favored over `dist/dynamic/components/Wizard`.
+ *
+ * Dynamic modules nested under `deprecated` or `next` directories are ignored.
+ *
+ * If the referenced index module does not exist, an empty object is returned.
+ *
+ * @param {string} basePath
+ * @param {string} indexModule
+ * @param {string} resolutionField
+ * @param {ts.CompilerOptions} tsCompilerOptions
+ * @returns {Record<string, string>}
+ */
+const getDynamicModuleMap = (
+ basePath,
+ indexModule = 'dist/esm/index.js',
+ resolutionField = 'module',
+ tsCompilerOptions = defaultCompilerOptions
+) => {
+ if (!path.isAbsolute(basePath)) {
+ throw new Error('Package base path must be absolute');
+ }
+
+ const indexModulePath = path.resolve(basePath, indexModule);
+
+ if (!fs.existsSync(indexModulePath)) {
+ return {};
+ }
+
+ /** @type {Record<string, string>} */
+ const dynamicModulePathToPkgDir = glob.sync(`${basePath}/dist/dynamic/**/package.json`).reduce((acc, pkgFile) => {
+ const pkg = require(pkgFile);
+ const pkgModule = pkg[resolutionField];
+
+ if (!pkgModule) {
+ throw new Error(`Missing field ${resolutionField} in ${pkgFile}`);
+ }
+
+ const pkgResolvedPath = path.resolve(path.dirname(pkgFile), pkgModule);
+ const pkgRelativePath = path.dirname(path.relative(basePath, pkgFile));
+
+ acc[pkgResolvedPath] = pkgRelativePath;
+
+ return acc;
+ }, {});
+
+ const dynamicModulePaths = Object.keys(dynamicModulePathToPkgDir);
+ const compilerHost = ts.createCompilerHost(tsCompilerOptions);
+ const program = ts.createProgram([indexModulePath, ...dynamicModulePaths], tsCompilerOptions, compilerHost);
+ const errorDiagnostics = ts.getPreEmitDiagnostics(program).filter((d) => d.category === ts.DiagnosticCategory.Error);
+
+ if (errorDiagnostics.length > 0) {
+ const { getCanonicalFileName, getCurrentDirectory, getNewLine } = compilerHost;
+
+ console.error(
+ ts.formatDiagnostics(errorDiagnostics, {
+ getCanonicalFileName,
+ getCurrentDirectory,
+ getNewLine
+ })
+ );
+
+ throw new Error(`Detected TypeScript errors while parsing modules at ${basePath}`);
+ }
+
+ const typeChecker = program.getTypeChecker();
+
+ /** @param {ts.SourceFile} sourceFile */
+ const getExportNames = (sourceFile) =>
+ typeChecker.getExportsOfModule(typeChecker.getSymbolAtLocation(sourceFile)).map((symbol) => symbol.getName());
+
+ const indexModuleExports = getExportNames(program.getSourceFile(indexModulePath));
+
+ /** @type {Record<string, string[]>} */
+ const dynamicModuleExports = dynamicModulePaths.reduce((acc, modulePath) => {
+ acc[modulePath] = getExportNames(program.getSourceFile(modulePath));
+ return acc;
+ }, {});
+
+ /** @param {string[]} modulePaths */
+ const getMostSpecificModulePath = (modulePaths) =>
+ modulePaths.reduce((acc, p) => {
+ const pathSpecificity = p.split(path.sep).length;
+ const currSpecificity = acc.split(path.sep).length;
+
+ if (pathSpecificity > currSpecificity) {
+ return p;
+ }
+
+ if (pathSpecificity === currSpecificity) {
+ return !p.endsWith('index.js') && acc.endsWith('index.js') ? p : acc;
+ }
+
+ return acc;
+ }, '');
+
+ return indexModuleExports.reduce((acc, exportName) => {
+ const foundModulePaths = Object.keys(dynamicModuleExports).filter((modulePath) =>
+ dynamicModuleExports[modulePath].includes(exportName)
+ );
+
+ const filteredModulePaths = foundModulePaths.filter((modulePath) => {
+ const dirNames = path.dirname(modulePath).split(path.sep);
+ return !dirNames.includes('deprecated') && !dirNames.includes('next');
+ });
+
+ if (filteredModulePaths.length > 0) {
+ acc[exportName] = dynamicModulePathToPkgDir[getMostSpecificModulePath(filteredModulePaths)];
+ }
+
+ return acc;
+ }, {});
+};
+
+module.exports = getDynamicModuleMap;