@openedx/frontend-base 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist/types.js

@@ -0,0 +1,7 @@
+export var EnvironmentTypes;
+(function (EnvironmentTypes) {
+    EnvironmentTypes["PRODUCTION"] = "production";
+    EnvironmentTypes["DEVELOPMENT"] = "development";
+    EnvironmentTypes["TEST"] = "test";
+})(EnvironmentTypes || (EnvironmentTypes = {}));
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AA0HA,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,6CAAyB,CAAA;IACzB,+CAA2B,CAAA;IAC3B,iCAAa,CAAA;AACf,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B","sourcesContent":["import { FC, ReactElement, ReactNode } from 'react';\nimport { MessageDescriptor } from 'react-intl';\nimport { RouteObject } from 'react-router';\nimport { SlotOperation } from './runtime/slots/types';\n\n// Apps\n\nexport interface ExternalRoute {\n  role: string,\n  url: string,\n}\n\nexport type RoleRouteObject = RouteObject & {\n  handle?: {\n    /**\n     * Route roles identify the purpose(s) a route fulfills in the site.\n     */\n    roles?: string[],\n  },\n};\n\nexport type AppConfig = Record<string, unknown>;\n\nexport type AppProvider = FC<{ children?: ReactNode }>;\n\nexport interface App {\n  appId: string,\n  routes?: RoleRouteObject[],\n  providers?: AppProvider[],\n  slots?: SlotOperation[],\n  externalScripts?: ExternalScriptLoaderClass[],\n  config?: AppConfig,\n  provides?: Record<string, unknown>,\n}\n\n// External Scripts\n\nexport interface ExternalScriptLoader {\n  loadScript(): void,\n}\n\nexport type ExternalScriptLoaderClass = new (data: { config: AppConfig }) => ExternalScriptLoader;\n\n// Site Config\n\nexport interface RequiredSiteConfig {\n  siteId: string,\n  siteName: string,\n  baseUrl: string,\n\n  // Backends\n  lmsBaseUrl: string,\n\n  // Frontends\n  loginUrl: string,\n  logoutUrl: string,\n}\n\nexport type LocalizedMessages = Record<string, Record<string, string>>;\nexport type SiteMessages = LocalizedMessages[];\n\nexport interface OptionalSiteConfig {\n  // Site environment\n  environment: EnvironmentTypes,\n\n  // Apps, routes, and URLs\n  apps: App[],\n  basename: string,\n  externalRoutes: ExternalRoute[],\n  externalLinkUrlOverrides: string[],\n  runtimeConfigJsonUrl: string | null,\n  commonAppConfig: AppConfig,\n  headerLogoImageUrl: string,\n\n  // Theme\n  theme: Theme,\n\n  // Cookies\n  accessTokenCookieName: string,\n  languagePreferenceCookieName: string,\n  userInfoCookieName: string,\n\n  // Paths\n  csrfTokenApiPath: string,\n  refreshAccessTokenApiPath: string,\n\n  // Logging\n  ignoredErrorRegex: RegExp | null,\n\n  // Analytics\n  segmentKey: string | null,\n}\n\nexport type SiteConfig = RequiredSiteConfig & Partial<OptionalSiteConfig>;\n\nexport interface ThemeVariant {\n  url: string,\n}\n\nexport interface ThemeDefaults {\n  light?: string,\n  dark?: string,\n}\n\nexport type ThemeVariants = Record<string, ThemeVariant>;\n\nexport interface Theme {\n  core?: ThemeVariant,\n  defaults?: ThemeDefaults,\n  variants?: ThemeVariants,\n}\n\nexport interface User {\n  administrator: boolean,\n  email: string,\n  name: string,\n  roles: string[],\n  userId: number,\n  username: string,\n  avatar: string,\n}\n\nexport enum EnvironmentTypes {\n  PRODUCTION = 'production',\n  DEVELOPMENT = 'development',\n  TEST = 'test',\n}\n\n// Menu Items\n\nexport type MenuItemName = string | MessageDescriptor | ReactElement;\n"]}

package/package.json

@@ -1,32 +1,45 @@
 {
   "name": "@openedx/frontend-base",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.31",
   "description": "Build tools, setup and config for frontend apps",
   "publishConfig": {
     "access": "public"
   },
-  "main": "index.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./tools": "./dist/tools/index.js",
+    "./tools/tsconfig.json": "./dist/tools/typescript/tsconfig.json",
+    "./shell/app.scss": "./dist/shell/app.scss",
+    "./shell/site": "./dist/shell/site.js"
+  },
   "files": [
-    "/config",
-    "/runtime",
-    "/tools/dist",
-    "/shell",
-    "/types.ts"
+    "/dist"
   ],
   "bin": {
-    "intl-imports.js": "tools/dist/cli/scripts/intl-imports.js",
-    "openedx": "tools/dist/cli/openedx.js",
-    "transifex-utils.js": "tools/dist/cli/scripts/transifex-utils.js"
+    "openedx": "./dist/tools/cli/openedx.js"
+  },
+  "atlasTranslations": {
+    "path": "translations/frontend-base/src/i18n/messages",
+    "dependencies": [
+      "@openedx/paragon"
+    ]
   },
   "scripts": {
     "build": "make build",
-    "clean": "rm -rf dist",
-    "dev": "npm run build && node ./tools/dist/cli/openedx.js dev:shell",
+    "clean": "make clean",
+    "dev": "npm run build && node ./dist/tools/cli/openedx.js dev:shell",
     "docs": "jsdoc -c jsdoc.json",
-    "docs:watch": "nodemon -w runtime -w docs/template -w README.md -e js,jsx,ts,tsx --exec npm run docs",
     "lint": "eslint .; npm run lint:tools; npm --prefix ./test-site run lint",
+    "lint:fix": "eslint . --fix; npm run lint:fix:tools",
     "lint:tools": "cd ./tools && eslint . && cd ..",
-    "test": "jest"
+    "lint:fix:tools": "cd ./tools && eslint . --fix && cd ..",
+    "pack": "mkdir -p pack && npm pack --silent --pack-destination pack >/dev/null && mv \"$(ls -t pack/*.tgz | head -n 1)\" pack/openedx-frontend-base.tgz",
+    "prepack": "npm run build",
+    "test": "jest",
+    "watch:build": "nodemon --exec 'npm run build'",
+    "watch:docs": "nodemon --watch docs/template --watch README.md --exec npm run docs",
+    "watch:pack": "nodemon --exec 'npm run pack'",
+    "i18n_extract": "npm run build && node ./dist/tools/cli/openedx.js formatjs extract --include=shell"
   },
   "repository": {
     "type": "git",
@@ -55,8 +68,10 @@
     "@formatjs/ts-transformer": "^3.13.14",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@stylistic/eslint-plugin": "^2.9.0",
+    "@tanstack/react-query-devtools": "^5.99.0",
     "@types/eslint__js": "^8.42.3",
     "@types/gradient-string": "^1.1.6",
+    "@types/lodash.keyby": "^4.6.9",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "axios-cache-interceptor": "^1.6.0",
@@ -86,10 +101,12 @@
     "image-minimizer-webpack-plugin": "3.8.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-localstorage-mock": "^2.4.26",
     "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
     "localforage-memoryStorageDriver": "^0.9.2",
     "lodash.camelcase": "^4.3.0",
+    "lodash.keyby": "^4.6.0",
     "lodash.memoize": "^4.1.2",
     "lodash.merge": "^4.6.2",
     "lodash.snakecase": "^4.1.1",
@@ -101,7 +118,7 @@
     "postcss-rtlcss": "^5.5.0",
     "prop-types": "^15.8.1",
     "react-dev-utils": "12.0.1",
-    "react-focus-on": "^3.9.4",
+    "react-focus-on": "^3.10.2",
     "react-intl": "^6.6.6",
     "react-refresh": "0.16.0",
     "react-refresh-typescript": "^2.0.9",
@@ -113,7 +130,8 @@
     "sharp": "^0.33.5",
     "source-map-loader": "4.0.2",
     "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.7",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
     "universal-cookie": "^8.0.1",
@@ -132,12 +150,12 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@tsconfig/node20": "^20.1.5",
+    "@tsconfig/node24": "^24.0.4",
     "@types/compression": "^1.7.5",
     "@types/jest": "^29.5.14",
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^18.19.43",
+    "@types/node": "^24.12.0",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.6",
     "axios-mock-adapter": "^1.22.0",
@@ -146,7 +164,7 @@
     "nodemon": "^3.1.4"
   },
   "peerDependencies": {
-    "@openedx/paragon": "^22.20.2",
+    "@openedx/paragon": "^23.20.0",
     "@tanstack/react-query": "^5.81.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/config/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext",
-      "esnext.intl",
-      "es2017.intl",
-      "es2018.intl"
-    ],
-    "isolatedModules": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "strictFunctionTypes": false,
-    "target": "ES6"
-  }
-}

package/config/types.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandTypes = exports.ConfigTypes = void 0;
-var ConfigTypes;
-(function (ConfigTypes) {
-    ConfigTypes["BABEL"] = "babel";
-    ConfigTypes["WEBPACK_BUILD"] = "webpack-build";
-    ConfigTypes["WEBPACK_DEV"] = "webpack-dev";
-    ConfigTypes["WEBPACK_DEV_SHELL"] = "webpack-dev-shell";
-    ConfigTypes["LINT"] = "lint";
-    ConfigTypes["TEST"] = "test";
-})(ConfigTypes || (exports.ConfigTypes = ConfigTypes = {}));
-var CommandTypes;
-(function (CommandTypes) {
-    CommandTypes["LINT"] = "lint";
-    CommandTypes["TEST"] = "test";
-    CommandTypes["BUILD"] = "build";
-    CommandTypes["DEV_SHELL"] = "dev:shell";
-    CommandTypes["DEV"] = "dev";
-    CommandTypes["FORMAT_JS"] = "formatjs";
-    CommandTypes["SERVE"] = "serve";
-    CommandTypes["HELP"] = "help";
-})(CommandTypes || (exports.CommandTypes = CommandTypes = {}));

package/config/webpack/common-config/all/getIgnoreWarnings.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getIgnoreWarnings;
-function getIgnoreWarnings() {
-    return [
-        // Ignore warnings raised by source-map-loader.
-        // some third party packages may ship miss-configured sourcemaps, that interrupts the build
-        // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
-        (warning) => !!(
-        // @ts-expect-error 'resource' is something TypeScript can't find for whatever reason.
-        warning.module?.resource.includes('node_modules')
-            && warning.details?.includes('source-map-loader')),
-    ];
-}

package/config/webpack/common-config/dev/getDevServer.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getDevServer;
-const path_1 = __importDefault(require("path"));
-const getPublicPath_1 = __importDefault(require("../../utils/getPublicPath"));
-function getDevServer() {
-    return {
-        allowedHosts: 'all',
-        headers: {
-            'Access-Control-Allow-Origin': '*',
-        },
-        // For obvious reasons, 'auto' won't work for publicPath here, so we
-        // force '/' unless PUBLIC_PATH is set.
-        historyApiFallback: {
-            index: path_1.default.join((0, getPublicPath_1.default)('/'), 'index.html'),
-            disableDotRule: true,
-        },
-        host: 'apps.local.openedx.io',
-        hot: true,
-        port: process.env.PORT ?? 8080,
-        proxy: [
-            {
-                context: ['/api/mfe_config/v1'],
-                target: 'http://local.openedx.io:8000',
-                changeOrigin: true,
-            }
-        ],
-        // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-        // for the WebpackDevServer client so it can learn when the files were
-        // updated. The WebpackDevServer client is included as an entry point
-        // in the webpack development configuration. Note that only changes
-        // to CSS are currently hot reloaded. JS changes will refresh the browser.
-        webSocketServer: 'ws',
-    };
-}

package/config/webpack/plugins/html-webpack-new-relic-plugin/test/HtmlWebpackNewRelicPlugin.test.js

@@ -1,66 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
-const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
-const path_1 = __importDefault(require("path"));
-const webpack_1 = __importDefault(require("webpack"));
-const HtmlWebpackNewRelicPlugin_1 = __importDefault(require("../HtmlWebpackNewRelicPlugin"));
-const OUTPUT_DIR = path_1.default.join(__dirname, './dist');
-describe('HtmlWebpackNewRelicPlugin', () => {
-    const testPluginOptions = {
-        accountID: '121212',
-        agentID: '343434',
-        trustKey: '565656',
-        licenseKey: '123456',
-        applicationID: '654321',
-    };
-    afterEach(() => {
-        if (fs_1.default.existsSync(OUTPUT_DIR)) {
-            fs_1.default.rmSync(OUTPUT_DIR, { recursive: true, force: true });
-        }
-    });
-    it('should append new relic script to body', done => {
-        (0, webpack_1.default)({
-            entry: path_1.default.resolve(__dirname, 'fixtures', 'entry.js'),
-            output: {
-                path: path_1.default.resolve(__dirname, './dist'),
-            },
-            plugins: [
-                new html_webpack_plugin_1.default(),
-                new HtmlWebpackNewRelicPlugin_1.default(testPluginOptions),
-            ],
-        }, (err) => {
-            const htmlFile = path_1.default.resolve(OUTPUT_DIR, 'index.html');
-            expect(err).toBeNull();
-            expect(fs_1.default.existsSync(htmlFile)).toBe(true);
-            const file = fs_1.default.readFileSync(path_1.default.resolve(OUTPUT_DIR, htmlFile), { encoding: 'utf-8' }, (error, data) => data.toString());
-            Object.entries(testPluginOptions).forEach(([optionName, optionValue]) => {
-                expect(file.indexOf(`${optionName}:"${optionValue}"`)).toBeGreaterThan(-1);
-            });
-            done();
-        });
-    });
-    describe('when its missing configuration variables', () => {
-        function testMissingOption(missingOptionName) {
-            it(`should throw error if ${missingOptionName} is missing`, done => {
-                const compiler = (0, webpack_1.default)({
-                    entry: path_1.default.resolve(__dirname, 'fixtures', 'entry.js'),
-                    output: {
-                        path: path_1.default.resolve(__dirname, '../dist'),
-                    },
-                    plugins: [new html_webpack_plugin_1.default()],
-                });
-                const optionsMissingOne = { ...testPluginOptions };
-                delete optionsMissingOne[missingOptionName];
-                expect(() => compiler.options.plugins.push(new HtmlWebpackNewRelicPlugin_1.default(optionsMissingOne))).toThrow(`${missingOptionName} argument is required`);
-                done();
-            });
-        }
-        Object.keys(testPluginOptions).forEach((key) => {
-            testMissingOption(key);
-        });
-    });
-});

package/config/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = require("webpack");
-const paragonUtils_1 = require("../../utils/paragonUtils");
-const utils_1 = require("./utils");
-// Get Paragon and brand versions / CSS files from disk.
-const paragonVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd());
-const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
-const brandVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd(), { isBrandOverride: true });
-const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
-/**
- * 1. Injects `PARAGON_THEME` global variable into the HTML document during the Webpack compilation process.
- * 2. Injects `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS into the HTML document.
- */
-class ParagonWebpackPlugin {
-    pluginName;
-    paragonThemeUrlsConfig;
-    processAssetsHandlers;
-    paragonMetadata;
-    constructor({ processAssetsHandlers = [] } = {}) {
-        this.pluginName = 'ParagonWebpackPlugin';
-        this.paragonThemeUrlsConfig = {};
-        this.paragonMetadata = {};
-        // List of handlers to be executed after processing assets during the Webpack compilation.
-        this.processAssetsHandlers = [
-            this.resolveParagonThemeUrlsFromConfig,
-            this.injectParagonMetadataIntoDocument,
-            this.injectParagonStylesheetsIntoDocument,
-            ...processAssetsHandlers,
-        ].map(handler => handler.bind(this));
-    }
-    /**
-     * Resolves the MFE configuration from ``PARAGON_THEME_URLS`` in the environment variables. `
-     *
-     * @returns {Object} Metadata about the Paragon and brand theme URLs from configuration.
-     */
-    async resolveParagonThemeUrlsFromConfig() {
-        try {
-            this.paragonThemeUrlsConfig = JSON.parse(process.env.PARAGON_THEME_URLS ?? '{}');
-        }
-        catch (error) {
-            console.info('Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.');
-        }
-    }
-    /**
-     * Generates `PARAGON_THEME` global variable in HTML document.
-     * @param {Object} compilation Webpack compilation object.
-     */
-    injectParagonMetadataIntoDocument(compilation) {
-        const paragonMetadata = (0, utils_1.injectMetadataIntoDocument)(compilation, {
-            paragonThemeCss,
-            paragonVersion,
-            brandThemeCss,
-            brandVersion,
-        });
-        if (paragonMetadata) {
-            this.paragonMetadata = paragonMetadata;
-        }
-    }
-    injectParagonStylesheetsIntoDocument(compilation) {
-        const file = compilation.getAsset('index.html');
-        // If the `index.html` hasn't loaded yet, or there are no Paragon theme URLs, then there is nothing to do yet.
-        if (!file || Object.keys(this.paragonThemeUrlsConfig || {}).length === 0) {
-            return;
-        }
-        // Generates `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS files.
-        const paragonStylesheetUrls = (0, utils_1.getParagonStylesheetUrls)({
-            paragonThemeUrls: this.paragonThemeUrlsConfig,
-            paragonVersion,
-            brandVersion,
-        });
-        const { core: paragonCoreCss, variants: paragonThemeVariantCss, } = paragonStylesheetUrls;
-        // We do not expect to have a Buffer here, ever.
-        const originalSource = file.source.source();
-        // Inject core CSS
-        let newSource = (0, utils_1.injectParagonCoreStylesheets)({
-            source: originalSource,
-            paragonCoreCss,
-            paragonThemeCss,
-            brandThemeCss,
-        });
-        // Inject theme variant CSS
-        newSource = (0, utils_1.injectParagonThemeVariantStylesheets)({
-            // @ts-expect-error newSource is possibly undefined here.
-            source: newSource.source(),
-            paragonThemeVariantCss,
-            paragonThemeCss,
-            brandThemeCss,
-        });
-        // @ts-expect-error newSource is possibly undefined here.
-        compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
-    }
-    apply(compiler) {
-        compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
-            compilation.hooks.processAssets.tap({
-                name: this.pluginName,
-                stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-                additionalAssets: true,
-            }, () => {
-                // Iterate through each configured handler, passing the compilation to each.
-                this.processAssetsHandlers.forEach(async (handler) => {
-                    await handler(compilation);
-                });
-            });
-        });
-    }
-}
-exports.default = ParagonWebpackPlugin;

package/config/webpack/plugins/paragon-webpack-plugin/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ParagonWebpackPlugin_1 = __importDefault(require("./ParagonWebpackPlugin"));
-exports.default = ParagonWebpackPlugin_1.default;

package/config/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCoreCssAsset = findCoreCssAsset;
-exports.findThemeVariantCssAssets = findThemeVariantCssAssets;
-exports.getCssAssetsFromCompilation = getCssAssetsFromCompilation;
-/**
- * Finds the core CSS asset from the given array of Paragon assets.
- *
- * @param {Array} paragonAssets - An array of Paragon assets.
- * @return {Object|undefined} The core CSS asset, or undefined if not found.
- */
-function findCoreCssAsset(paragonAssets) {
-    return paragonAssets?.find((asset) => asset.name.includes('core') && asset.name.endsWith('.css'));
-}
-/**
- * Finds the theme variant CSS assets from the given Paragon assets based on the provided options.
- *
- * @param {Array} paragonAssets - An array of Paragon assets.
- * @param {Object} options - The options for finding the theme variant CSS assets.
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the theme variant is a brand override.
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
- * @return {Object} - The theme variant CSS assets.
- */
-function findThemeVariantCssAssets(paragonAssets, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
-    const themeVariantsSource = isBrandOverride ? brandThemeCss?.variants : paragonThemeCss?.variants;
-    const themeVariantCssAssets = {};
-    Object.entries(themeVariantsSource || {}).forEach(([themeVariant, value]) => {
-        const foundThemeVariantAsset = paragonAssets.find((asset) => asset.name.includes(value.outputChunkName));
-        if (!foundThemeVariantAsset) {
-            return;
-        }
-        themeVariantCssAssets[themeVariant] = {
-            fileName: foundThemeVariantAsset.name,
-        };
-    });
-    return themeVariantCssAssets;
-}
-/**
- * Retrieves the CSS assets from the compilation based on the provided options.
- *
- * @param {Object} compilation - The compilation object.
- * @param {Object} options - The options for retrieving the CSS assets.
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the assets are for a brand override.
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
- * @return {Object} - The CSS assets, including the core CSS asset and theme variant CSS assets.
- */
-function getCssAssetsFromCompilation(compilation, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
-    const assetSubstring = isBrandOverride ? 'brand' : 'paragon';
-    const paragonAssets = compilation.getAssets().filter(asset => asset.name.includes(assetSubstring) && asset.name.endsWith('.css'));
-    const coreCssAsset = findCoreCssAsset(paragonAssets);
-    const themeVariantCssAssets = findThemeVariantCssAssets(paragonAssets, {
-        isBrandOverride,
-        paragonThemeCss,
-        brandThemeCss,
-    });
-    return {
-        coreCssAsset: {
-            fileName: coreCssAsset?.name,
-        },
-        themeVariantCssAssets,
-    };
-}

package/config/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectMetadataIntoDocument = injectMetadataIntoDocument;
-const webpack_1 = require("webpack");
-const assetUtils_1 = require("./assetUtils");
-const scriptUtils_1 = require("./scriptUtils");
-/**
- * Injects metadata into the HTML document by modifying the 'index.html' asset in the compilation.
- *
- * @param {Object} compilation - The Webpack compilation object.
- * @param {Object} options - The options object.
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
- * @param {string} options.paragonVersion - The version of the Paragon theme.
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
- * @param {string} options.brandVersion - The version of the brand theme.
- * @return {Object|undefined} The script contents object if the 'index.html' asset exists, otherwise undefined.
- */
-function injectMetadataIntoDocument(compilation, { paragonThemeCss, paragonVersion, brandThemeCss, brandVersion, }) {
-    const file = compilation.getAsset('index.html');
-    if (!file) {
-        return undefined;
-    }
-    const { coreCssAsset: paragonCoreCssAsset, themeVariantCssAssets: paragonThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
-        brandThemeCss,
-        paragonThemeCss,
-    });
-    const { coreCssAsset: brandCoreCssAsset, themeVariantCssAssets: brandThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
-        isBrandOverride: true,
-        brandThemeCss,
-        paragonThemeCss,
-    });
-    const scriptContents = (0, scriptUtils_1.generateScriptContents)({
-        paragonCoreCssAsset,
-        paragonThemeVariantCssAssets,
-        brandCoreCssAsset,
-        brandThemeVariantCssAssets,
-        paragonThemeCss,
-        paragonVersion,
-        brandThemeCss,
-        brandVersion,
-    });
-    // We expect this to be a string at all times.
-    const originalSource = file.source.source();
-    const newSource = (0, scriptUtils_1.insertScriptContentsIntoDocument)({
-        originalSource,
-        // @ts-expect-error This parameter doesn't exist in the function.
-        coreCssAsset: paragonCoreCssAsset,
-        themeVariantCssAssets: paragonThemeVariantCssAssets,
-        scriptContents,
-    });
-    compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
-    return scriptContents;
-}

package/config/webpack/plugins/paragon-webpack-plugin/utils/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectParagonThemeVariantStylesheets = exports.injectParagonCoreStylesheets = exports.getParagonStylesheetUrls = exports.injectMetadataIntoDocument = void 0;
-var htmlUtils_1 = require("./htmlUtils");
-Object.defineProperty(exports, "injectMetadataIntoDocument", { enumerable: true, get: function () { return htmlUtils_1.injectMetadataIntoDocument; } });
-var paragonStylesheetUtils_1 = require("./paragonStylesheetUtils");
-Object.defineProperty(exports, "getParagonStylesheetUrls", { enumerable: true, get: function () { return paragonStylesheetUtils_1.getParagonStylesheetUrls; } });
-Object.defineProperty(exports, "injectParagonCoreStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonCoreStylesheets; } });
-Object.defineProperty(exports, "injectParagonThemeVariantStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonThemeVariantStylesheets; } });