@openedx/frontend-base 1.0.0-alpha.9 → 1.0.1-alpha.1

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/dist/tools/webpack/common-config/dev/getDevServer.js

@@ -0,0 +1,36 @@
+"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': '*',
+        },
+        historyApiFallback: {
+            index: path_1.default.join((0, getPublicPath_1.default)(), 'index.html'),
+            disableDotRule: true,
+        },
+        host: '0.0.0.0',
+        hot: true,
+        port: process.env.PORT ?? 8080,
+        proxy: [
+            {
+                context: ['/api/frontend_site_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/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/dist/tools/webpack/common-config/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+Object.defineProperty(exports, "getFileLoaderRules", { enumerable: true, get: function () { return __importDefault(getFileLoaderRules_1).default; } });
+var getImageMinimizer_1 = require("./all/getImageMinimizer");
+Object.defineProperty(exports, "getImageMinimizer", { enumerable: true, get: function () { return __importDefault(getImageMinimizer_1).default; } });
+var getStylesheetRule_1 = require("./all/getStylesheetRule");
+Object.defineProperty(exports, "getStylesheetRule", { enumerable: true, get: function () { return __importDefault(getStylesheetRule_1).default; } });
+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/dist/tools/webpack/common-config/site/getHtmlWebpackPlugin.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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.
+ *
+ * `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,
+        template: path_1.default.resolve(process.cwd(), 'public/index.html'),
+        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/dist/tools/webpack/common-config/site/getI18nMessagesFallbackPlugin/emptyI18n.js

@@ -0,0 +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/dist/tools/webpack/utils/getPublicPath.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getPublicPath;
+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/dist/tools/webpack/webpack.config.build.js

@@ -0,0 +1,78 @@
+"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 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 getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+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: {
+        cssLayerOrder: '@openedx/frontend-base/shell/layer-order.scss',
+        app: '@openedx/frontend-base/shell/site',
+    },
+    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: {
+            '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: {
+        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',
+        },
+        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 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',
+            openAnalyzer: false,
+        }),
+    ],
+};
+exports.default = config;

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

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

package/dist/tools/webpack/webpack.config.dev.js

@@ -0,0 +1,78 @@
+"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 tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const common_config_1 = require("./common-config");
+const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+const getResolvedSiteI18nPath_1 = __importDefault(require("./utils/getResolvedSiteI18nPath"));
+const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('site.config.dev.tsx');
+const resolvedSiteI18nPath = (0, getResolvedSiteI18nPath_1.default)('src/i18n');
+const config = {
+    entry: {
+        cssLayerOrder: '@openedx/frontend-base/shell/layer-order.scss',
+        app: '@openedx/frontend-base/shell/site',
+    },
+    output: {
+        path: path_1.default.resolve(process.cwd(), './dist'),
+        publicPath: (0, getPublicPath_1.default)(),
+    },
+    resolve: {
+        alias: {
+            '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'],
+    },
+    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',
+        },
+        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 mini_css_extract_plugin_1.default({
+            filename: '[name].css',
+        }),
+        (0, common_config_1.getHtmlWebpackPlugin)(),
+        (0, common_config_1.getI18nMessagesFallbackPlugin)(),
+        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)(),
+    // Limit the number of watched files to avoid `inotify` resource starvation.
+    watchOptions: {
+        ignored: /node_modules/
+    }
+};
+exports.default = config;

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

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

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

@@ -0,0 +1,105 @@
+"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 html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const getPublicPath_1 = __importDefault(require("./utils/getPublicPath"));
+const getResolvedSiteConfigPath_1 = __importDefault(require("./utils/getResolvedSiteConfigPath"));
+const getResolvedSiteI18nPath_1 = __importDefault(require("./utils/getResolvedSiteI18nPath"));
+const resolvedSiteConfigPath = (0, getResolvedSiteConfigPath_1.default)('shell/site.config.dev.tsx');
+const resolvedSiteI18nPath = (0, getResolvedSiteI18nPath_1.default)('test-site/src/i18n');
+const config = {
+    entry: {
+        cssLayerOrder: path_1.default.resolve(process.cwd(), 'shell/layer-order.scss'),
+        app: path_1.default.resolve(process.cwd(), 'shell/site'),
+    },
+    output: {
+        path: path_1.default.resolve(process.cwd(), './dist'),
+        publicPath: (0, getPublicPath_1.default)(),
+    },
+    resolve: {
+        alias: {
+            'site.config': resolvedSiteConfigPath,
+            'site.i18n': resolvedSiteI18nPath,
+        },
+        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',
+        },
+        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 mini_css_extract_plugin_1.default({
+            filename: '[name].css',
+        }),
+        new html_webpack_plugin_1.default({
+            inject: true,
+            template: path_1.default.resolve(process.cwd(), 'shell/public/index.html'),
+            chunks: ['cssLayerOrder', 'app'],
+            chunksSortMode: 'manual',
+        }),
+        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)(),
+    // Limit the number of watched files to avoid `inotify` resource starvation.
+    watchOptions: {
+        ignored: /node_modules/
+    }
+};
+exports.default = config;

package/dist/types.d.ts

@@ -0,0 +1,93 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { MessageDescriptor } from 'react-intl';
+import { RouteObject } from 'react-router';
+import { SlotOperation } from './runtime/slots/types';
+export interface ExternalRoute {
+    role: string;
+    url: string;
+}
+export type RoleRouteObject = RouteObject & {
+    handle?: {
+        /**
+         * Route roles identify the purpose(s) a route fulfills in the site.
+         */
+        roles?: string[];
+    };
+};
+export type AppConfig = Record<string, unknown>;
+export type AppProvider = FC<{
+    children?: ReactNode;
+}>;
+export interface App {
+    appId: string;
+    routes?: RoleRouteObject[];
+    providers?: AppProvider[];
+    slots?: SlotOperation[];
+    externalScripts?: ExternalScriptLoaderClass[];
+    config?: AppConfig;
+    provides?: Record<string, unknown>;
+}
+export interface ExternalScriptLoader {
+    loadScript(): void;
+}
+export type ExternalScriptLoaderClass = new (data: {
+    config: AppConfig;
+}) => ExternalScriptLoader;
+export interface RequiredSiteConfig {
+    siteId: string;
+    siteName: string;
+    baseUrl: string;
+    lmsBaseUrl: string;
+    loginUrl: string;
+    logoutUrl: string;
+}
+export type LocalizedMessages = Record<string, Record<string, string>>;
+export type SiteMessages = LocalizedMessages[];
+export interface OptionalSiteConfig {
+    environment: EnvironmentTypes;
+    cmsBaseUrl: string;
+    apps: App[];
+    basename: string;
+    externalRoutes: ExternalRoute[];
+    externalLinkUrlOverrides: string[];
+    runtimeConfigJsonUrl: string | null;
+    commonAppConfig: AppConfig;
+    headerLogoImageUrl: string;
+    theme: Theme;
+    accessTokenCookieName: string;
+    languagePreferenceCookieName: string;
+    userInfoCookieName: string;
+    csrfTokenApiPath: string;
+    refreshAccessTokenApiPath: string;
+    ignoredErrorRegex: RegExp | null;
+    segmentKey: string | null;
+}
+export type SiteConfig = RequiredSiteConfig & Partial<OptionalSiteConfig>;
+export interface ThemeVariant {
+    url: string;
+}
+export interface ThemeDefaults {
+    light?: string;
+    dark?: string;
+}
+export type ThemeVariants = Record<string, ThemeVariant>;
+export interface Theme {
+    core?: ThemeVariant;
+    defaults?: ThemeDefaults;
+    variants?: ThemeVariants;
+}
+export interface User {
+    administrator: boolean;
+    email: string;
+    name: string;
+    roles: string[];
+    userId: number;
+    username: string;
+    avatar: string;
+}
+export declare enum EnvironmentTypes {
+    PRODUCTION = "production",
+    DEVELOPMENT = "development",
+    TEST = "test"
+}
+export type MenuItemName = string | MessageDescriptor | ReactElement;

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":"AA6HA,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  // Backends\n  cmsBaseUrl: string,\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"]}