fix: roughly turning files into TypeScript

There were a lot of problems here.  I found a number of what appear to be bugs in the code, and the data structures aren’t well-documented enough for me to tell what’s an error vs. expected behavior.

I attempted to make some TypeScript types for the data structures, but had to give up.  I ended up annotating many variables with the `any` type, and also had to add // @ts-ignore comments in a number of places to get the build to work.

README.md

@@ -443,6 +443,14 @@ Then work through the conflicts and use a merge commit to add the history into t
 
 Then move the files out of the way (move src to some other sub-dir, mostly) to make room for the next repo.
 
+### Latest repository merges
+
+- frontend-component-header - Up to date as of 9/12/2024
+- frontend-component-footer - Up to date as of 9/12/2024
+- frontend-platform
+- frontend-build - Up to date as of 9/12/2024
+- frontend-plugin-framework
+
 # Other notable changes
 
 - Cease using `AUTHN_MINIMAL_HEADER`, replace it with an actual minimal header.

package.json

@@ -62,7 +62,6 @@
 		"@module-federation/enhanced": "^0.4.0",
 		"@module-federation/runtime": "^0.2.6",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-
 		"@types/gradient-string": "^1.1.6",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
@@ -106,9 +105,9 @@
 		"lodash.merge": "^4.6.2",
 		"lodash.snakecase": "^4.1.1",
 		"mini-css-extract-plugin": "1.6.2",
-    		"parse5": "7.1.2",
+		"parse5": "7.1.2",
 		"postcss": "8.4.40",
-    		"postcss-custom-media": "10.0.8",
+		"postcss-custom-media": "10.0.8",
 		"postcss-loader": "7.3.4",
 		"postcss-rtlcss": "5.1.2",
 		"prop-types": "^15.8.1",
@@ -133,7 +132,7 @@
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.1",
 		"webpack-merge": "^5.10.0",
-    		"webpack-remove-empty-scripts": "1.0.4"
+		"webpack-remove-empty-scripts": "1.0.4"
 	},
 	"devDependencies": {
 		"@testing-library/dom": "^8.20.1",
@@ -155,7 +154,7 @@
 		"react-test-renderer": "^17.0.2"
 	},
 	"peerDependencies": {
-		"@openedx/paragon": "^22.6.1",
+		"@openedx/paragon": "^22.8.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-redux": "^8.1.3",

config/data/paragonUtils.js → tools/webpack/paragonUtils.ts

@@ -1,13 +1,15 @@
-const path = require('path');
-const fs = require('fs');
+import fs from 'fs';
+import path from 'path';
+import { Chunk } from 'webpack';
+import { ParagonThemeCss, ParagonThemeUrlsFile } from './types';
 
 /**
  * Retrieves the name of the brand package from the given directory.
  *
  * @param {string} dir - The directory path containing the package.json file.
  * @return {string} The name of the brand package, or an empty string if not found.
  */
-function getBrandPackageName(dir) {
+function getBrandPackageName(dir: string) {
   const appDependencies = JSON.parse(fs.readFileSync(path.resolve(dir, 'package.json'), 'utf-8')).dependencies;
   return Object.keys(appDependencies).find((key) => key.match(/@(open)?edx\/brand/)) || '';
 }
@@ -19,7 +21,7 @@ function getBrandPackageName(dir) {
  * @param {string} dir Path to directory containing `node_modules`.
  * @returns {string} Paragon dependency version of the consuming application
  */
-function getParagonVersion(dir, { isBrandOverride = false } = {}) {
+export function getParagonVersion(dir: string, { isBrandOverride = false } = {}) {
   const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
   const pathToPackageJson = `${dir}/node_modules/${npmPackageName}/package.json`;
   if (!fs.existsSync(pathToPackageJson)) {
@@ -28,40 +30,24 @@ function getParagonVersion(dir, { isBrandOverride = false } = {}) {
   return JSON.parse(fs.readFileSync(pathToPackageJson, 'utf-8')).version;
 }
 
-/**
- * @typedef {Object} ParagonThemeCssAsset
- * @property {string} filePath
- * @property {string} entryName
- * @property {string} outputChunkName
- */
 
-/**
- * @typedef {Object} ParagonThemeVariantCssAsset
- * @property {string} filePath
- * @property {string} entryName
- * @property {string} outputChunkName
- */
 
-/**
- * @typedef {Object} ParagonThemeCss
- * @property {ParagonThemeCssAsset} core The metadata about the core Paragon theme CSS
- * @property {Object.<string, ParagonThemeVariantCssAsset>} variants A collection of theme variants.
- */
+
 
 /**
  * Attempts to extract the Paragon theme CSS from the locally installed `@openedx/paragon` package.
  * @param {string} dir Path to directory containing `node_modules`.
  * @param {boolean} isBrandOverride
  * @returns {ParagonThemeCss}
  */
-function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
+export function getParagonThemeCss(dir: string, { isBrandOverride = false } = {}): ParagonThemeCss | undefined {
   const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
   const pathToParagonThemeOutput = path.resolve(dir, 'node_modules', npmPackageName, 'dist', 'theme-urls.json');
 
   if (!fs.existsSync(pathToParagonThemeOutput)) {
     return undefined;
   }
-  const paragonConfig = JSON.parse(fs.readFileSync(pathToParagonThemeOutput, 'utf-8'));
+  const paragonConfig: ParagonThemeUrlsFile = JSON.parse(fs.readFileSync(pathToParagonThemeOutput, 'utf-8'));
   const {
     core: themeCore,
     variants: themeVariants,
@@ -89,7 +75,7 @@ function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
     });
   }, {});
 
-  if (!coreCssExists || themeVariantResults.length === 0) {
+  if (!coreCssExists || Object.keys(themeVariantResults).length === 0) {
     return undefined;
   }
 
@@ -118,24 +104,27 @@ function getParagonThemeCss(dir, { isBrandOverride = false } = {}) {
  * @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
  * @returns {Object.<string, CacheGroup>} The cache groups for the Paragon theme CSS.
  */
-function getParagonCacheGroups(paragonThemeCss) {
+export function getParagonCacheGroups(paragonThemeCss: ParagonThemeCss | undefined) {
   if (!paragonThemeCss) {
     return {};
   }
-  const cacheGroups = {
-    [paragonThemeCss.core.outputChunkName]: {
+  const cacheGroups: { [index: string]: { type: string, name: string, chunks: (chunk: Chunk) => boolean, enforce: boolean } } = {};
+
+  if (paragonThemeCss.core !== undefined) {
+    const { core } = paragonThemeCss;
+    cacheGroups[paragonThemeCss.core.outputChunkName] = {
       type: 'css/mini-extract',
       name: paragonThemeCss.core.outputChunkName,
-      chunks: chunk => chunk.name === paragonThemeCss.core.entryName,
+      chunks: (chunk: Chunk) => chunk.name === core.entryName,
       enforce: true,
-    },
-  };
+    }
+  }
 
   Object.values(paragonThemeCss.variants).forEach(({ entryName, outputChunkName }) => {
     cacheGroups[outputChunkName] = {
       type: 'css/mini-extract',
       name: outputChunkName,
-      chunks: chunk => chunk.name === entryName,
+      chunks: (chunk: Chunk) => chunk.name === entryName,
       enforce: true,
     };
   });
@@ -151,21 +140,17 @@ function getParagonCacheGroups(paragonThemeCss) {
  * }
  * ```
  */
-function getParagonEntryPoints(paragonThemeCss) {
+export function getParagonEntryPoints(paragonThemeCss: ParagonThemeCss | undefined) {
   if (!paragonThemeCss) {
     return {};
   }
 
-  const entryPoints = { [paragonThemeCss.core.entryName]: path.resolve(process.cwd(), paragonThemeCss.core.filePath) };
+  const entryPoints: { [entryName: string]: string } = {};
+  if (paragonThemeCss.core !== undefined) {
+    entryPoints[paragonThemeCss.core.entryName] = path.resolve(process.cwd(), paragonThemeCss.core.filePath);
+  }
   Object.values(paragonThemeCss.variants).forEach(({ filePath, entryName }) => {
     entryPoints[entryName] = path.resolve(process.cwd(), filePath);
   });
   return entryPoints;
 }
-
-module.exports = {
-  getParagonVersion,
-  getParagonThemeCss,
-  getParagonCacheGroups,
-  getParagonEntryPoints,
-};