@openedx/frontend-base 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/tools/config-helpers/createLintConfig.d.ts

@@ -0,0 +1,2 @@
+import { ConfigWithExtends } from 'typescript-eslint';
+export default function createLintConfig(...configs: ConfigWithExtends[]): import("typescript-eslint").FlatConfig.ConfigArray;

package/dist/tools/config-helpers/getBaseConfig.d.ts

@@ -0,0 +1,2 @@
+import { ConfigTypes } from '../types';
+export default function getBaseConfig(configType: ConfigTypes): any;

package/dist/tools/defaultConfigPaths.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultConfigPaths: {
+    babel: string[];
+    "webpack-build": string[];
+    "webpack-dev": string[];
+    "webpack-dev-shell": string[];
+    lint: string[];
+    test: string[];
+};

package/dist/tools/eslint/base.eslint.config.d.ts

@@ -0,0 +1,3 @@
+declare const _exports: tseslint.FlatConfig.Config[];
+export = _exports;
+import tseslint = require("typescript-eslint");

package/{config → dist/tools}/eslint/base.eslint.config.js

@@ -31,7 +31,6 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
             ...globals.browser,
             ...globals.node,
             ...globals.jest,
-            PARAGON_THEME: 'readonly',
             newrelic: 'readonly',
         },
     },
@@ -79,6 +78,8 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
                 caughtErrors: 'none',
             }],
         '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/prefer-nullish-coalescing': 'off',
+        '@typescript-eslint/prefer-optional-chain': 'off',
         '@stylistic/semi': ['error', 'always', { omitLastInOneLineBlock: true, omitLastInOneLineClassBody: true }],
         '@stylistic/quotes': ['error', 'single', {
                 avoidEscape: true,
@@ -103,9 +104,9 @@ module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs
     },
 }, {
     files: [
-        'babel.config.js',
-        'jest.config.js',
-        'eslint.config.js'
+        '**/babel.config.js',
+        '**/jest.config.js',
+        '**/eslint.config.js'
     ],
     rules: {
         '@typescript-eslint/no-require-imports': 'off'

package/dist/tools/eslint.config.d.ts

@@ -0,0 +1,3 @@
+declare const _exports: tseslint.FlatConfig.Config[];
+export = _exports;
+import tseslint = require("typescript-eslint");

package/dist/tools/index.d.ts

@@ -0,0 +1,3 @@
+export { default as createConfig } from './config-helpers/createConfig';
+export { default as createLintConfig } from './config-helpers/createLintConfig';
+export { default as getBaseConfig } from './config-helpers/getBaseConfig';

package/dist/tools/jest/jest.config.d.ts

@@ -0,0 +1,14 @@
+export let testEnvironment: string;
+export namespace testEnvironmentOptions {
+    let url: string;
+}
+export let rootDir: string;
+export let moduleNameMapper: {
+    '\\.(css|scss)$': string;
+    'site.config': string;
+};
+export let collectCoverageFrom: string[];
+export let coveragePathIgnorePatterns: string[];
+export let transformIgnorePatterns: string[];
+export let modulePathIgnorePatterns: string[];
+export let testPathIgnorePatterns: string[];

package/dist/tools/jest.config.d.ts

@@ -0,0 +1,8 @@
+export let testEnvironment: string;
+export namespace testEnvironmentOptions {
+    let url: string;
+}
+export let collectCoverageFrom: string[];
+export let transformIgnorePatterns: string[];
+export let modulePathIgnorePatterns: string[];
+export let testPathIgnorePatterns: string[];

package/dist/tools/types.d.ts

@@ -0,0 +1,20 @@
+export declare enum ConfigTypes {
+    BABEL = "babel",
+    WEBPACK_BUILD = "webpack-build",
+    WEBPACK_DEV = "webpack-dev",
+    WEBPACK_DEV_SHELL = "webpack-dev-shell",
+    LINT = "lint",
+    TEST = "test"
+}
+export declare enum CommandTypes {
+    LINT = "lint",
+    TEST = "test",
+    BUILD = "build",
+    DEV_SHELL = "dev:shell",
+    DEV = "dev",
+    FORMAT_JS = "formatjs",
+    SERVE = "serve",
+    TRANSLATIONS_PULL = "translations:pull",
+    TRANSLATIONS_PREPARE = "translations:prepare",
+    HELP = "help"
+}

package/{tools/dist → dist/tools}/types.js

@@ -19,5 +19,7 @@ var CommandTypes;
     CommandTypes["DEV"] = "dev";
     CommandTypes["FORMAT_JS"] = "formatjs";
     CommandTypes["SERVE"] = "serve";
+    CommandTypes["TRANSLATIONS_PULL"] = "translations:pull";
+    CommandTypes["TRANSLATIONS_PREPARE"] = "translations:prepare";
     CommandTypes["HELP"] = "help";
 })(CommandTypes || (exports.CommandTypes = CommandTypes = {}));

package/{tools/dist → dist/tools}/typescript/tsconfig.json

@@ -16,7 +16,7 @@
         ],
         "isolatedModules": true,
         "module": "ESNext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "noEmit": true,
         "noFallthroughCasesInSwitch": true,
         "noImplicitAny": false,
@@ -24,6 +24,7 @@
         "noUnusedParameters": true,
         "resolveJsonModule": true,
         "skipLibCheck": true,
+        "inlineSources": true,
         "sourceMap": true,
         "strict": true,
         "strictFunctionTypes": false,

package/dist/tools/webpack/common-config/all/getCodeRules.d.ts

@@ -0,0 +1,2 @@
+import { RuleSetRule } from 'webpack';
+export default function getCodeRules(mode: 'dev' | 'production', resolvedSiteConfigPath: string): RuleSetRule[];

package/dist/tools/webpack/common-config/all/getFileLoaderRules.d.ts

@@ -0,0 +1,11 @@
+export default function getFileLoaderRules(): ({
+    test: RegExp;
+    loader: string;
+    options?: undefined;
+} | {
+    test: RegExp;
+    loader: string;
+    options: {
+        name: string;
+    };
+})[];

package/dist/tools/webpack/common-config/all/getImageMinimizer.d.ts

@@ -0,0 +1,5 @@
+import { Compiler } from 'image-minimizer-webpack-plugin';
+import { WebpackPluginInstance } from 'webpack';
+type ImageMinimizerReturnType = (false | '' | 0 | '...' | ((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance | null | undefined)[] | undefined;
+export default function getImageMinimizer(): ImageMinimizerReturnType;
+export {};

package/dist/tools/webpack/common-config/all/getStylesheetRule.d.ts

@@ -0,0 +1,12 @@
+import { RuleSetRule } from 'webpack';
+export declare const PARAGON_PACKAGE: {
+    name: string;
+};
+export declare const SHELL_PACKAGE: {
+    name: string;
+};
+export declare const BRAND_PACKAGE: {
+    name: RegExp;
+};
+export declare const APP_RESOURCE: RegExp;
+export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRule;

package/dist/tools/webpack/common-config/all/getStylesheetRule.js

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APP_RESOURCE = exports.BRAND_PACKAGE = exports.SHELL_PACKAGE = exports.PARAGON_PACKAGE = void 0;
+exports.default = getStylesheetRule;
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const cssnano_1 = __importDefault(require("cssnano"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const path_1 = __importDefault(require("path"));
+const postcss_custom_media_1 = __importDefault(require("postcss-custom-media"));
+const postcss_rtlcss_1 = __importDefault(require("postcss-rtlcss"));
+const postcssWrapLayer_1 = __importDefault(require("./postcssWrapLayer"));
+/*
+ * Resource matchers for each cascade layer.
+ * Order declared at the site level: `paragon, shell, app, site, brand` (later wins).
+ *
+ * - paragon: @openedx/paragon base styles.  First so everything else can override.
+ * - shell:   frontend-base shell styles.
+ * - app:     catch-all for any other stylesheet pulled from node_modules.
+ *            Keeps apps from clobbering site or brand overrides without requiring
+ *            app packages to follow any naming convention or self-declaration.
+ * - site:    the composing site's own source tree (anything outside node_modules).
+ * - brand:   @openedx/brand-* packages, last so build-time brand matches the
+ *            precedence of runtime brand CSS (which is injected unlayered via
+ *            <link> tags and thus beats every layered rule).
+ */
+exports.PARAGON_PACKAGE = { name: '@openedx/paragon' };
+exports.SHELL_PACKAGE = { name: '@openedx/frontend-base' };
+exports.BRAND_PACKAGE = { name: /^@(open)?edx\/brand(-.+)?$/ };
+// The site/app split is positional (my project vs. a dep), so it is path-based.
+exports.APP_RESOURCE = /[\\/](node_modules|packages)[\\/]/;
+/*
+ * There are a few things we need to do here.
+ *
+ * - We only want to use MiniCssExtractPlugin on dependencies in dev, but not on our source code.
+ * - We only want CssNano in production.
+ * - Each resource class (paragon, shell, app, site, brand) is wrapped in its
+ *   own cascade layer by a PostCSS plugin so the cascade order is
+ *   `paragon, shell, app, site, brand`.
+ */
+function getStylesheetRule(mode) {
+    return {
+        test: /(.scss|.css)$/,
+        oneOf: [
+            {
+                descriptionData: exports.PARAGON_PACKAGE,
+                // We need Paragon to not elide CSS: we have to be able to import it
+                // directly from shell/style.ts
+                sideEffects: true,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'paragon'),
+                ],
+            },
+            {
+                descriptionData: exports.SHELL_PACKAGE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'shell'),
+                ],
+            },
+            {
+                descriptionData: exports.BRAND_PACKAGE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'brand'),
+                ],
+            },
+            {
+                resource: { not: [exports.APP_RESOURCE] },
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'site'),
+                ],
+            },
+            {
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'app'),
+                ],
+            },
+        ],
+    };
+}
+function getFirstLoader(mode) {
+    // In dev we keep site/app styles in JS bundles so hot-reloading works;
+    // in production everything is extracted to CSS files.
+    if (mode === 'production') {
+        return mini_css_extract_plugin_1.default.loader;
+    }
+    return require.resolve('style-loader');
+}
+function getStyleUseConfig(mode, layer) {
+    return [
+        {
+            loader: require.resolve('css-loader'), // translates CSS into CommonJS
+            options: {
+                sourceMap: true,
+                modules: {
+                    // namedExport defaults to true in css-loader v7, but we rely on the old behavior.
+                    // Details here:
+                    // https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#700-2024-04-04
+                    namedExport: false,
+                    mode: 'icss',
+                },
+            },
+        },
+        {
+            loader: require.resolve('postcss-loader'),
+            options: {
+                postcssOptions: {
+                    plugins: getPostCssLoaderPlugins(mode, layer),
+                },
+            },
+        },
+        require.resolve('resolve-url-loader'),
+        {
+            loader: require.resolve('sass-loader'), // compiles Sass to CSS
+            options: {
+                sourceMap: true,
+                sassOptions: {
+                    includePaths: [
+                        path_1.default.join(process.cwd(), 'node_modules'),
+                        path_1.default.join(process.cwd(), 'src'),
+                    ],
+                    // Silences compiler deprecation warnings.  They mostly come from bootstrap and/or paragon.
+                    quietDeps: true,
+                    silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'global-builtin', 'legacy-js-api'],
+                },
+            },
+        },
+    ];
+}
+function getPostCssLoaderPlugins(mode, layer) {
+    const plugins = [
+        (0, autoprefixer_1.default)({
+            remove: false, // Prevents removing vendor prefixes
+        }),
+        (0, postcss_rtlcss_1.default)(),
+    ];
+    // We want CSSNano third, and only in production.
+    if (mode === 'production') {
+        plugins.push((0, cssnano_1.default)());
+    }
+    plugins.push((0, postcss_custom_media_1.default)());
+    plugins.push((0, postcssWrapLayer_1.default)({ layer }));
+    return plugins;
+}

package/dist/tools/webpack/common-config/all/postcssWrapLayer.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'postcss';
+export default function postcssWrapLayer({ layer }: {
+    layer: string;
+}): Plugin;

package/dist/tools/webpack/common-config/all/postcssWrapLayer.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = postcssWrapLayer;
+const postcss_1 = require("postcss");
+/*
+ * Wraps every top-level rule in the stylesheet in a single `@layer <name> { ... }`
+ * block, so that downstream cascade-layer ordering applies uniformly to everything
+ * produced by this compilation unit.
+ *
+ * Nodes left at the root (not moved into the layer):
+ * - `@charset`, `@import`, `@use`, `@forward` (must stay at the top of a stylesheet)
+ * - `@layer` statements and blocks (already layered, or declaring layer order)
+ */
+function postcssWrapLayer({ layer }) {
+    const keepAtTop = new Set(['charset', 'import', 'use', 'forward', 'layer']);
+    return {
+        postcssPlugin: 'postcss-wrap-layer',
+        Once(root) {
+            const layerRule = new postcss_1.AtRule({ name: 'layer', params: layer });
+            root.each(node => {
+                if (node.type === 'atrule' && keepAtTop.has(node.name)) {
+                    return;
+                }
+                node.remove();
+                layerRule.append(node);
+            });
+            if (layerRule.nodes && layerRule.nodes.length > 0) {
+                root.append(layerRule);
+            }
+        },
+    };
+}

package/dist/tools/webpack/common-config/dev/getDevServer.d.ts

@@ -0,0 +1,2 @@
+import { Configuration } from 'webpack-dev-server';
+export default function getDevServer(): Configuration;

package/{tools/dist → dist/tools}/webpack/common-config/dev/getDevServer.js

@@ -12,18 +12,16 @@ function getDevServer() {
         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'),
+            index: path_1.default.join((0, getPublicPath_1.default)(), 'index.html'),
             disableDotRule: true,
         },
-        host: 'apps.local.openedx.io',
+        host: '0.0.0.0',
         hot: true,
         port: process.env.PORT ?? 8080,
         proxy: [
             {
-                context: ['/api/mfe_config/v1'],
+                context: ['/api/frontend_site_config/v1'],
                 target: 'http://local.openedx.io:8000',
                 changeOrigin: true,
             }

package/dist/tools/webpack/common-config/index.d.ts

@@ -0,0 +1,7 @@
+export { default as getCodeRules } from './all/getCodeRules';
+export { default as getFileLoaderRules } from './all/getFileLoaderRules';
+export { default as getImageMinimizer } from './all/getImageMinimizer';
+export { default as getStylesheetRule } from './all/getStylesheetRule';
+export { default as getDevServer } from './dev/getDevServer';
+export { default as getHtmlWebpackPlugin } from './site/getHtmlWebpackPlugin';
+export { default as getI18nMessagesFallbackPlugin } from './site/getI18nMessagesFallbackPlugin';

package/{config → dist/tools}/webpack/common-config/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHtmlWebpackPlugin = exports.getDevServer = exports.getStylesheetRule = exports.getImageMinimizer = exports.getFileLoaderRules = exports.getCodeRules = void 0;
+exports.getI18nMessagesFallbackPlugin = exports.getHtmlWebpackPlugin = exports.getDevServer = exports.getStylesheetRule = exports.getImageMinimizer = exports.getFileLoaderRules = exports.getCodeRules = void 0;
 var getCodeRules_1 = require("./all/getCodeRules");
 Object.defineProperty(exports, "getCodeRules", { enumerable: true, get: function () { return __importDefault(getCodeRules_1).default; } });
 var getFileLoaderRules_1 = require("./all/getFileLoaderRules");
@@ -16,3 +16,5 @@ var getDevServer_1 = require("./dev/getDevServer");
 Object.defineProperty(exports, "getDevServer", { enumerable: true, get: function () { return __importDefault(getDevServer_1).default; } });
 var getHtmlWebpackPlugin_1 = require("./site/getHtmlWebpackPlugin");
 Object.defineProperty(exports, "getHtmlWebpackPlugin", { enumerable: true, get: function () { return __importDefault(getHtmlWebpackPlugin_1).default; } });
+var getI18nMessagesFallbackPlugin_1 = require("./site/getI18nMessagesFallbackPlugin");
+Object.defineProperty(exports, "getI18nMessagesFallbackPlugin", { enumerable: true, get: function () { return __importDefault(getI18nMessagesFallbackPlugin_1).default; } });

package/dist/tools/webpack/common-config/site/getHtmlWebpackPlugin.d.ts

@@ -0,0 +1,2 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+export default function getHtmlWebpackPlugin(): HtmlWebpackPlugin;

package/{config → dist/tools}/webpack/common-config/site/getHtmlWebpackPlugin.js

@@ -6,11 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = getHtmlWebpackPlugin;
 const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
 const path_1 = __importDefault(require("path"));
-// Generates an HTML file in the output directory.
+/*
+ * Generates an HTML file in the output directory.
+ *
+ * `cssLayerOrder` is listed first so its <link> is injected before any other
+ * stylesheet. That file contains the `@layer paragon, shell, app, site, brand;`
+ * statement, which locks in cascade-layer priority before any layer name is
+ * mentioned by the rest of the CSS the browser parses.
+ */
 function getHtmlWebpackPlugin() {
     return new html_webpack_plugin_1.default({
-        inject: true, // Appends script tags linking to the webpack bundles at the end of the body
+        inject: true,
         template: path_1.default.resolve(process.cwd(), 'public/index.html'),
-        chunks: ['app'],
+        chunks: ['cssLayerOrder', 'app'],
+        chunksSortMode: 'manual',
     });
 }

package/dist/tools/webpack/common-config/site/getI18nMessagesFallbackPlugin/emptyI18n.d.ts

@@ -0,0 +1,2 @@
+declare const _default: never[];
+export default _default;

package/{config/webpack/types.js → dist/tools/webpack/common-config/site/getI18nMessagesFallbackPlugin/emptyI18n.js}

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [];

package/dist/tools/webpack/common-config/site/getI18nMessagesFallbackPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import webpack from 'webpack';
+export default function getI18nMessagesFallbackPlugin(): webpack.NormalModuleReplacementPlugin;

package/dist/tools/webpack/common-config/site/getI18nMessagesFallbackPlugin/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getI18nMessagesFallbackPlugin;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const webpack_1 = __importDefault(require("webpack"));
+// When messages.ts hasn't been generated yet (i.e. translations:pull hasn't been run),
+// replace the ./messages import in src/i18n/index.ts with an empty fallback so webpack
+// doesn't error on the missing file.
+function getI18nMessagesFallbackPlugin() {
+    return new webpack_1.default.NormalModuleReplacementPlugin(
+    // Matches the raw import string `./messages` — anchored to avoid partial matches.
+    /^\.\/messages$/, (resource) => {
+        // Only apply to imports from src/i18n/ — exact match to avoid false positives.
+        if (resource.context !== path_1.default.resolve(process.cwd(), 'src', 'i18n'))
+            return;
+        // If messages.ts exists, let webpack resolve it normally.
+        if (fs_1.default.existsSync(path_1.default.join(resource.context, 'messages.ts')))
+            return;
+        // File is missing — substitute the empty fallback module.
+        resource.request = require.resolve('./emptyI18n');
+    });
+}

package/dist/tools/webpack/plugins/html-webpack-new-relic-plugin/HtmlWebpackNewRelicPlugin.d.ts

@@ -0,0 +1,16 @@
+import { Compiler } from 'webpack';
+declare enum OptionTypes {
+    ACCOUNT_ID = "accountID",
+    AGENT_ID = "agentID",
+    APPLICATION_ID = "applicationID",
+    LICENSE_KEY = "licenseKey",
+    TRUST_KEY = "trustKey"
+}
+type HtmlWebpackNewRelicPluginOptions = Record<OptionTypes, string | undefined>;
+export default class HtmlWebpackNewRelicPlugin {
+    options: HtmlWebpackNewRelicPluginOptions;
+    newRelicString: string;
+    constructor(options: Partial<HtmlWebpackNewRelicPluginOptions>);
+    apply(compiler: Compiler): void;
+}
+export {};

package/dist/tools/webpack/plugins/html-webpack-new-relic-plugin/index.d.ts

@@ -0,0 +1,2 @@
+export default HtmlWebpackNewRelicPlugin;
+import HtmlWebpackNewRelicPlugin from './HtmlWebpackNewRelicPlugin';

package/dist/tools/webpack/plugins/html-webpack-new-relic-plugin/test/fixtures/entry.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tools/webpack/utils/getPublicPath.d.ts

@@ -0,0 +1 @@
+export default function getPublicPath(defaultPath?: string): string;

package/{tools/dist → dist/tools}/webpack/utils/getPublicPath.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = getPublicPath;
-function getPublicPath(defaultPath = 'auto') {
+function getPublicPath(defaultPath = '/') {
     return process.env.PUBLIC_PATH ?? defaultPath;
 }

package/dist/tools/webpack/utils/getResolvedSiteConfigPath.d.ts

@@ -0,0 +1 @@
+export default function getResolvedSiteConfigPath(defaultFilename: string): string;

package/dist/tools/webpack/utils/getResolvedSiteI18nPath.d.ts

@@ -0,0 +1 @@
+export default function getResolvedSiteI18nPath(defaultDirname: string): string;

package/dist/tools/webpack/utils/getResolvedSiteI18nPath.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getResolvedSiteI18nPath;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function getResolvedSiteI18nPath(defaultDirname) {
+    const siteI18nPath = process.env.SITE_I18N_PATH;
+    if (siteI18nPath !== undefined) {
+        const absolutePath = path_1.default.resolve(process.cwd(), siteI18nPath);
+        if (fs_1.default.existsSync(absolutePath)) {
+            return absolutePath;
+        }
+        console.error(`Invalid site i18n path (${siteI18nPath}) specified as an environment variable. Aborting.`);
+        process.exit(1);
+    }
+    const defaultPath = path_1.default.resolve(process.cwd(), defaultDirname);
+    if (fs_1.default.existsSync(defaultPath)) {
+        return defaultPath;
+    }
+    console.error(`Default site i18n directory (${defaultPath}) does not exist. Aborting.`);
+    process.exit(1);
+}

package/dist/tools/webpack/webpack.config.build.d.ts

@@ -0,0 +1,3 @@
+import { Configuration } from 'webpack';
+declare const config: Configuration;
+export default config;

package/{config → dist/tools}/webpack/webpack.config.build.js

@@ -6,25 +6,21 @@ 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 tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
 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 getResolvedSiteI18nPath_1 = __importDefault(require("./utils/getResolvedSiteI18nPath"));
 const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.build.tsx');
+const resolvedSiteI18nPath = (0, getResolvedSiteI18nPath_1.default)('src/i18n');
 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),
+        cssLayerOrder: '@openedx/frontend-base/shell/layer-order.scss',
+        app: '@openedx/frontend-base/shell/site',
     },
     output: {
         filename: '[name].[chunkhash].js',
@@ -34,9 +30,15 @@ const config = {
     },
     resolve: {
         alias: {
-            ...aliases,
             'site.config': resolvedSiteConfigPath,
+            'site.i18n': resolvedSiteI18nPath,
         },
+        plugins: [
+            new tsconfig_paths_webpack_plugin_1.default({
+                configFile: path_1.default.resolve(process.cwd(), 'tsconfig.json'),
+                extensions: ['.ts', '.tsx', '.js', '.jsx'],
+            }),
+        ],
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
     },
     module: {
@@ -51,10 +53,6 @@ const config = {
         runtimeChunk: 'single',
         splitChunks: {
             chunks: 'all',
-            cacheGroups: {
-                ...(0, paragonUtils_1.getParagonCacheGroups)(paragonThemeCss),
-                ...(0, paragonUtils_1.getParagonCacheGroups)(brandThemeCss),
-            },
         },
         minimizer: (0, common_config_1.getImageMinimizer)(),
     },
@@ -65,11 +63,11 @@ const config = {
         // 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)(),
+        (0, common_config_1.getI18nMessagesFallbackPlugin)(),
         new fork_ts_checker_webpack_plugin_1.default(),
         new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
             analyzerMode: 'static',

package/dist/tools/webpack/webpack.config.dev.d.ts

@@ -0,0 +1,3 @@
+import { Configuration } from 'webpack';
+declare const config: Configuration;
+export default config;