@openedx/frontend-base 1.0.0-alpha.0

package/config/webpack/utils/paragonUtils.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getParagonVersion = getParagonVersion;
+exports.getParagonThemeCss = getParagonThemeCss;
+exports.getParagonCacheGroups = getParagonCacheGroups;
+exports.getParagonEntryPoints = getParagonEntryPoints;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+/**
+ * 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) {
+    const appDependencies = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(dir, 'package.json'), 'utf-8')).dependencies;
+    return Object.keys(appDependencies).find((key) => /@(open)?edx\/brand/.exec(key)) ?? '';
+}
+/**
+ * Attempts to extract the Paragon version from the `node_modules` of
+ * the consuming application.
+ *
+ * @param {string} dir Path to directory containing `node_modules`.
+ * @returns {string} Paragon dependency version of the consuming application
+ */
+function getParagonVersion(dir, { isBrandOverride = false } = {}) {
+    const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
+    const pathToPackageJson = `${dir}/node_modules/${npmPackageName}/package.json`;
+    if (!fs_1.default.existsSync(pathToPackageJson)) {
+        return undefined;
+    }
+    return JSON.parse(fs_1.default.readFileSync(pathToPackageJson, 'utf-8')).version;
+}
+/**
+ * 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 } = {}) {
+    const npmPackageName = isBrandOverride ? getBrandPackageName(dir) : '@openedx/paragon';
+    const pathToParagonThemeOutput = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', 'theme-urls.json');
+    if (!fs_1.default.existsSync(pathToParagonThemeOutput)) {
+        return undefined;
+    }
+    const paragonConfig = JSON.parse(fs_1.default.readFileSync(pathToParagonThemeOutput, 'utf-8'));
+    const { core: themeCore, variants: themeVariants, defaults, } = paragonConfig?.themeUrls || {};
+    const pathToCoreCss = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', themeCore.paths.minified);
+    const coreCssExists = fs_1.default.existsSync(pathToCoreCss);
+    const themeVariantResults = Object.entries(themeVariants || {}).reduce((themeVariantAcc, [themeVariant, value]) => {
+        const themeVariantCssDefault = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.default);
+        const themeVariantCssMinified = path_1.default.resolve(dir, 'node_modules', npmPackageName, 'dist', value.paths.minified);
+        if (!fs_1.default.existsSync(themeVariantCssDefault) && !fs_1.default.existsSync(themeVariantCssMinified)) {
+            return themeVariantAcc;
+        }
+        return ({
+            ...themeVariantAcc,
+            [themeVariant]: {
+                filePath: themeVariantCssMinified,
+                entryName: isBrandOverride ? `brand.theme.variants.${themeVariant}` : `paragon.theme.variants.${themeVariant}`,
+                outputChunkName: isBrandOverride ? `brand-theme-variants-${themeVariant}` : `paragon-theme-variants-${themeVariant}`,
+            },
+        });
+    }, {});
+    if (!coreCssExists || Object.keys(themeVariantResults).length === 0) {
+        return undefined;
+    }
+    const coreResult = {
+        filePath: path_1.default.resolve(dir, pathToCoreCss),
+        entryName: isBrandOverride ? 'brand.theme.core' : 'paragon.theme.core',
+        outputChunkName: isBrandOverride ? 'brand-theme-core' : 'paragon-theme-core',
+    };
+    return {
+        core: fs_1.default.existsSync(pathToCoreCss) ? coreResult : undefined,
+        variants: themeVariantResults,
+        defaults,
+    };
+}
+/**
+ * @typedef CacheGroup
+ * @property {string} type The type of cache group.
+ * @property {string|function} name The name of the cache group.
+ * @property {function} chunks A function that returns true if the chunk should be included in the cache group.
+ * @property {boolean} enforce If true, this cache group will be created even if it conflicts with default cache groups.
+ */
+/**
+ * @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
+ * @returns {Object.<string, CacheGroup>} The cache groups for the Paragon theme CSS.
+ */
+function getParagonCacheGroups(paragonThemeCss) {
+    if (!paragonThemeCss) {
+        return {};
+    }
+    const cacheGroups = {};
+    if (paragonThemeCss.core !== undefined) {
+        const { core } = paragonThemeCss;
+        cacheGroups[paragonThemeCss.core.outputChunkName] = {
+            type: 'css/mini-extract',
+            name: paragonThemeCss.core.outputChunkName,
+            chunks: (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,
+            enforce: true,
+        };
+    });
+    return cacheGroups;
+}
+/**
+ * @param {ParagonThemeCss} paragonThemeCss The Paragon theme CSS metadata.
+ * @returns {Object.<string, string>} The entry points for the Paragon theme CSS. Example: ```
+ * {
+ *   "paragon.theme.core": "/path/to/node_modules/@openedx/paragon/dist/core.min.css",
+ *   "paragon.theme.variants.light": "/path/to/node_modules/@openedx/paragon/dist/light.min.css"
+ * }
+ * ```
+ */
+function getParagonEntryPoints(paragonThemeCss) {
+    if (!paragonThemeCss) {
+        return {};
+    }
+    const entryPoints = {};
+    if (paragonThemeCss.core !== undefined) {
+        entryPoints[paragonThemeCss.core.entryName] = path_1.default.resolve(process.cwd(), paragonThemeCss.core.filePath);
+    }
+    Object.values(paragonThemeCss.variants).forEach(({ filePath, entryName }) => {
+        entryPoints[entryName] = path_1.default.resolve(process.cwd(), filePath);
+    });
+    return entryPoints;
+}

package/config/webpack/webpack.config.build.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const path_1 = __importDefault(require("path"));
+const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const common_config_1 = require("./common-config");
+const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
+const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
+const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+const paragonUtils_1 = require("./utils/paragonUtils");
+const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
+const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
+const aliases = (0, getLocalAliases_1.default)();
+const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.build.tsx');
+const config = {
+    mode: 'production',
+    devtool: 'source-map',
+    entry: {
+        app: path_1.default.resolve(process.cwd(), 'node_modules/@openedx/frontend-base/shell/site'),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
+    },
+    output: {
+        filename: '[name].[chunkhash].js',
+        path: path_1.default.resolve(process.cwd(), 'dist'),
+        publicPath: (0, getPublicPath_1.default)(),
+        clean: true, // Clean the output directory before emit.
+    },
+    resolve: {
+        alias: {
+            ...aliases,
+            'site.config': resolvedSiteConfigPath,
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    module: {
+        rules: [
+            ...(0, common_config_1.getCodeRules)('production', resolvedSiteConfigPath),
+            (0, common_config_1.getStylesheetRule)('production'),
+            ...(0, common_config_1.getFileLoaderRules)(),
+        ],
+    },
+    // Extract common modules among all chunks to one common chunk and extract the Webpack runtime to a single runtime chunk.
+    optimization: {
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
+                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
+            },
+        },
+        minimizer: (0, common_config_1.getImageMinimizer)(),
+    },
+    // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
+    plugins: [
+        // RemoveEmptyScriptsPlugin get rid of empty scripts generated by webpack when using mini-css-extract-plugin
+        // This helps to clean up the final bundle application
+        // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
+        new webpack_remove_empty_scripts_1.default(),
+        // Writes the extracted CSS from each entry to a file in the output directory.
+        new ParagonWebpackPlugin_1.default(),
+        new mini_css_extract_plugin_1.default({
+            filename: '[name].[chunkhash].css',
+        }),
+        (0, common_config_1.getHtmlWebpackPlugin)(),
+        new fork_ts_checker_webpack_plugin_1.default(),
+        new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: false,
+        }),
+    ],
+};
+exports.default = config;

package/config/webpack/webpack.config.dev.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const path_1 = __importDefault(require("path"));
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const common_config_1 = require("./common-config");
+const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
+const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
+const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+const paragonUtils_1 = require("./utils/paragonUtils");
+const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
+const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
+const aliases = (0, getLocalAliases_1.default)();
+const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.dev.tsx');
+const config = {
+    entry: {
+        app: path_1.default.resolve(process.cwd(), 'node_modules/@openedx/frontend-base/shell/site'),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
+    },
+    output: {
+        path: path_1.default.resolve(process.cwd(), './dist'),
+        publicPath: (0, getPublicPath_1.default)(),
+    },
+    resolve: {
+        alias: {
+            ...aliases,
+            'site.config': resolvedSiteConfigPath,
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    mode: 'development',
+    devtool: 'eval-source-map',
+    module: {
+        rules: [
+            ...(0, common_config_1.getCodeRules)('dev', resolvedSiteConfigPath),
+            (0, common_config_1.getStylesheetRule)('dev'),
+            ...(0, common_config_1.getFileLoaderRules)(),
+        ],
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
+                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
+            },
+        },
+        minimizer: (0, common_config_1.getImageMinimizer)(),
+    },
+    // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
+    plugins: [
+        // RemoveEmptyScriptsPlugin get rid of empty scripts generated by webpack when using mini-css-extract-plugin
+        // This helps to clean up the final bundle application
+        // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
+        new webpack_remove_empty_scripts_1.default(),
+        new ParagonWebpackPlugin_1.default(),
+        // Writes the extracted CSS from each entry to a file in the output directory.
+        new mini_css_extract_plugin_1.default({
+            filename: '[name].css',
+        }),
+        (0, common_config_1.getHtmlWebpackPlugin)(),
+        new react_refresh_webpack_plugin_1.default(),
+        new fork_ts_checker_webpack_plugin_1.default(),
+    ],
+    // This configures webpack-dev-server which serves bundles from memory and provides live
+    // reloading.
+    devServer: (0, common_config_1.getDevServer)(),
+};
+exports.default = config;

package/config/webpack/webpack.config.dev.shell.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ts_transformer_1 = require("@formatjs/ts-transformer");
+const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const path_1 = __importDefault(require("path"));
+const react_refresh_typescript_1 = __importDefault(require("react-refresh-typescript"));
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const common_config_1 = require("./common-config");
+const ParagonWebpackPlugin_1 = __importDefault(require("./plugins/paragon-webpack-plugin/ParagonWebpackPlugin"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const getLocalAliases_1 = __importDefault(require("./utils/getLocalAliases"));
+const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+const paragonUtils_1 = require("./utils/paragonUtils");
+const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
+const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
+const aliases = (0, getLocalAliases_1.default)();
+const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('shell/site.config.dev.tsx');
+const config = {
+    entry: {
+        app: path_1.default.resolve(process.cwd(), 'shell/site'),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(paragonThemeCss),
+        ...(0, paragonUtils_1.getParagonEntryPoints)(brandThemeCss),
+    },
+    output: {
+        path: path_1.default.resolve(process.cwd(), './dist'),
+        publicPath: (0, getPublicPath_1.default)(),
+    },
+    resolve: {
+        alias: {
+            ...aliases,
+            'site.config': resolvedSiteConfigPath,
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    mode: 'development',
+    devtool: 'eval-source-map',
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx|ts|tsx)$/,
+                include: [
+                    /shell/,
+                    /runtime/,
+                    path_1.default.resolve(process.cwd(), 'types'),
+                    resolvedSiteConfigPath,
+                ],
+                use: {
+                    loader: require.resolve('ts-loader'),
+                    options: {
+                        transpileOnly: true,
+                        compilerOptions: {
+                            noEmit: false,
+                        },
+                        getCustomTransformers() {
+                            return {
+                                before: [
+                                    (0, ts_transformer_1.transform)({
+                                        overrideIdFn: '[sha512:contenthash:base64:6]',
+                                    }),
+                                    (0, react_refresh_typescript_1.default)()
+                                ],
+                            };
+                        },
+                    },
+                },
+            },
+            (0, common_config_1.getStylesheetRule)('dev'),
+            ...(0, common_config_1.getFileLoaderRules)(),
+        ],
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
+                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
+            },
+        },
+        minimizer: (0, common_config_1.getImageMinimizer)(),
+    },
+    // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
+    plugins: [
+        // RemoveEmptyScriptsPlugin get rid of empty scripts generated by webpack when using mini-css-extract-plugin
+        // This helps to clean up the final bundle application
+        // See: https://www.npmjs.com/package/webpack-remove-empty-scripts#usage-with-mini-css-extract-plugin
+        new webpack_remove_empty_scripts_1.default(),
+        new ParagonWebpackPlugin_1.default(),
+        // Writes the extracted CSS from each entry to a file in the output directory.
+        new mini_css_extract_plugin_1.default({
+            filename: '[name].css',
+        }),
+        new html_webpack_plugin_1.default({
+            inject: true, // Appends script tags linking to the webpack bundles at the end of the body
+            template: path_1.default.resolve(process.cwd(), 'shell/public/index.html'),
+            chunks: ['app'],
+        }),
+        new react_refresh_webpack_plugin_1.default(),
+        new fork_ts_checker_webpack_plugin_1.default(),
+    ],
+    // This configures webpack-dev-server which serves bundles from memory and provides live
+    // reloading.
+    devServer: (0, common_config_1.getDevServer)(),
+};
+exports.default = config;

package/eslint.config.js

@@ -0,0 +1,18 @@
+// @ts-check
+
+const tseslint = require('typescript-eslint');
+const eslintConfig = require('./tools/eslint/base.eslint.config.js');
+
+module.exports = tseslint.config(
+  {
+    extends: eslintConfig,
+  },
+  {
+    ignores: [
+      'tools/*',
+      'test-site/*',
+      'config/*',
+      'docs/*',
+    ],
+  },
+);

package/frontend-base.d.ts

@@ -0,0 +1,8 @@
+declare module 'site.config' {
+  export default SiteConfig;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/index.ts

@@ -0,0 +1,7 @@
+export * from './runtime';
+
+export type * from './types';
+
+export * from './types';
+
+export * from './shell';

package/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  projects: [
+    'tools',
+    'runtime',
+    'shell',
+  ],
+};

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "@openedx/frontend-base",
+  "version": "1.0.0-alpha.0",
+  "description": "Build tools, setup and config for frontend apps",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.ts",
+  "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"
+  },
+  "scripts": {
+    "build": "make build",
+    "clean": "rm -rf dist",
+    "dev": "npm run build && node ./tools/dist/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:tools": "cd ./tools && eslint . && cd ..",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openedx/frontend-base.git"
+  },
+  "keywords": [],
+  "author": "Open edX Community",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/openedx/frontend-base/issues"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "homepage": "https://github.com/openedx/frontend-base#readme",
+  "dependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.24.7",
+    "@edx/new-relic-source-map-webpack-plugin": "2.1.0",
+    "@eslint/compat": "^1.2.1",
+    "@eslint/js": "^9.13.0",
+    "@formatjs/cli": "^6.0.3",
+    "@formatjs/ts-transformer": "^3.13.14",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@stylistic/eslint-plugin": "^2.9.0",
+    "@types/eslint__js": "^8.42.3",
+    "@types/gradient-string": "^1.1.6",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.9",
+    "axios-cache-interceptor": "^1.6.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-formatjs": "^10.5.16",
+    "chalk": "^4.1.2",
+    "classnames": "^2.5.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression": "^1.7.4",
+    "css-loader": "^7.1.2",
+    "cssnano": "^6.1.2",
+    "eslint": "^9.13.0",
+    "eslint-plugin-formatjs": "^5.1.3",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "express": "^4.18.2",
+    "file-loader": "6.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "form-urlencoded": "^6.1.5",
+    "glob": "^7.2.3",
+    "globals": "^15.11.0",
+    "gradient-string": "^2.0.2",
+    "html-webpack-plugin": "5.6.0",
+    "identity-obj-proxy": "3.0.0",
+    "image-minimizer-webpack-plugin": "3.8.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jwt-decode": "^3.1.2",
+    "localforage": "^1.10.0",
+    "localforage-memoryStorageDriver": "^0.9.2",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.memoize": "^4.1.2",
+    "lodash.merge": "^4.6.2",
+    "lodash.snakecase": "^4.1.1",
+    "mini-css-extract-plugin": "1.6.2",
+    "parse5": "7.1.2",
+    "postcss": "^8.4.47",
+    "postcss-custom-media": "10.0.8",
+    "postcss-loader": "7.3.4",
+    "postcss-rtlcss": "^5.5.0",
+    "prop-types": "^15.8.1",
+    "react-dev-utils": "12.0.1",
+    "react-focus-on": "^3.9.4",
+    "react-intl": "^6.6.6",
+    "react-refresh": "0.16.0",
+    "react-refresh-typescript": "^2.0.9",
+    "react-responsive": "^10.0.0",
+    "react-transition-group": "^4.4.5",
+    "resolve-url-loader": "^5.0.0",
+    "sass-embedded": "^1.87.0",
+    "sass-loader": "^16.0.2",
+    "sharp": "^0.33.5",
+    "source-map-loader": "4.0.2",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "universal-cookie": "^8.0.1",
+    "url-loader": "^4.1.1",
+    "uuid": "^11.0.2",
+    "webpack": "^5.97.1",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
+    "webpack-merge": "^5.10.0",
+    "webpack-remove-empty-scripts": "1.0.4"
+  },
+  "devDependencies": {
+    "@edx/browserslist-config": "^1.5.0",
+    "@testing-library/dom": "^10.4.0",
+    "@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",
+    "@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/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "axios-mock-adapter": "^1.22.0",
+    "jest-chain": "^1.1.6",
+    "jsdoc": "^4.0.3",
+    "nodemon": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@openedx/paragon": "^22.20.2",
+    "@tanstack/react-query": "^5.81.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.26.1",
+    "react-router-dom": "^6.26.1"
+  }
+}

package/runtime/analytics/MockAnalyticsService.js

@@ -0,0 +1,71 @@
+/**
+ * The MockAnalyticsService implements all functions of AnalyticsService as Jest mocks (jest.fn())).
+ * It emulates the behavior of a real analytics service but witohut making any requests. It has no
+ * other functionality.
+ *
+ * @implements {AnalyticsService}
+ * @memberof module:Analytics
+ */
+class MockAnalyticsService {
+  static hasIdentifyBeenCalled = false;
+
+  constructor({ httpClient, loggingService }) {
+    this.loggingService = loggingService;
+    this.httpClient = httpClient;
+  }
+
+  checkIdentifyCalled = jest.fn(() => {
+    if (!this.hasIdentifyBeenCalled) {
+      this.loggingService.logError('Identify must be called before other tracking events.');
+    }
+  });
+
+  /**
+   * Returns a resolved promise.
+   *
+   * @returns {Promise} The promise returned by HttpClient.post.
+   */
+  sendTrackingLogEvent = jest.fn(() => Promise.resolve());
+
+  /**
+   * No-op, but records that identify has been called.
+   *
+   * @param {string} userId
+   * @throws {Error} If userId argument is not supplied.
+   */
+  identifyAuthenticatedUser = jest.fn((userId) => {
+    if (!userId) {
+      throw new Error('UserId is required for identifyAuthenticatedUser.');
+    }
+    this.hasIdentifyBeenCalled = true;
+  });
+
+  /**
+   * No-op, but records that it has been called to prevent double-identification.
+   * @returns {Promise} A resolved promise.
+   */
+  identifyAnonymousUser = jest.fn(() => {
+    this.hasIdentifyBeenCalled = true;
+    return Promise.resolve();
+  });
+
+  /**
+   * Logs the event to the console.
+   *
+   * Checks whether identify has been called, logging an error to the logging service if not.
+   */
+  sendTrackEvent = jest.fn(() => {
+    this.checkIdentifyCalled();
+  });
+
+  /**
+   * Logs the event to the console.
+   *
+   * Checks whether identify has been called, logging an error to the logging service if not.
+   */
+  sendPageEvent = jest.fn(() => {
+    this.checkIdentifyCalled();
+  });
+}
+
+export default MockAnalyticsService;