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

package/tools/dist/eslint/base.eslint.config.js

@@ -1,113 +0,0 @@
-"use strict";
-// @ts-check
-const { fixupPluginRules } = require('@eslint/compat');
-const eslint = require('@eslint/js');
-const formatjs = require('eslint-plugin-formatjs');
-const jest = require('eslint-plugin-jest');
-const jsxA11y = require('eslint-plugin-jsx-a11y');
-const react = require('eslint-plugin-react');
-const reactHooks = require('eslint-plugin-react-hooks');
-const globals = require('globals');
-const tseslint = require('typescript-eslint');
-const stylistic = require('@stylistic/eslint-plugin');
-module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs.stylisticTypeChecked, ...tseslint.configs.recommended, stylistic.configs['recommended-flat'], {
-    ignores: [
-        'coverage/*',
-        'dist/*',
-        'node_modules/*',
-        '**/__mocks__/*',
-        '**/__snapshots__/*',
-    ],
-}, {
-    languageOptions: {
-        parserOptions: {
-            projectService: true,
-        }
-    }
-}, {
-    languageOptions: {
-        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.languageOptions : {}),
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-            ...globals.jest,
-            newrelic: 'readonly',
-        },
-    },
-    plugins: {
-        jest,
-        // Type assertion is workaround for incorrect TypeScript
-        // types in eslint-plugin-react
-        //
-        // TODO: Remove when types are fixed in eslint-plugin-react
-        // - https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
-        react: /** @type {import('eslint').ESLint.Plugin} */ (react),
-        'react-hooks': fixupPluginRules(reactHooks),
-        formatjs,
-        'jsx-a11y': jsxA11y,
-    },
-    settings: {
-        react: {
-            version: 'detect',
-        }
-    }
-}, {
-    rules: {
-        // For some reasons the 'flat' key in react.configs is optional, so Typescript complains if
-        // we don't guard using it.  But... it exists in the export, so something's odd with their types.
-        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.rules : {}),
-        ...(react.configs.flat !== undefined ? react.configs.flat['jsx-runtime'].rules : {}),
-        ...reactHooks.configs.recommended.rules,
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/non-nullable-type-assertion-style': 'off',
-        'react/no-array-index-key': 'error',
-        'formatjs/enforce-description': ['error', 'literal'],
-        'jsx-a11y/label-has-associated-control': ['error', {
-                labelComponents: [],
-                labelAttributes: [],
-                controlComponents: [],
-                assert: 'htmlFor',
-                depth: 25,
-            }],
-        // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340#issuecomment-338424908
-        'jsx-a11y/anchor-is-valid': ['error', {
-                components: ['Link'],
-                specialLink: ['to'],
-            }],
-        '@typescript-eslint/no-unused-vars': ['error', {
-                caughtErrors: 'none',
-            }],
-        '@typescript-eslint/no-empty-function': 'off',
-        '@typescript-eslint/prefer-nullish-coalescing': 'off',
-        '@stylistic/semi': ['error', 'always', { omitLastInOneLineBlock: true, omitLastInOneLineClassBody: true }],
-        '@stylistic/quotes': ['error', 'single', {
-                avoidEscape: true,
-                allowTemplateLiterals: true,
-            }],
-        '@stylistic/comma-dangle': 'off',
-        '@stylistic/quote-props': ['error', 'as-needed'],
-        '@stylistic/arrow-parens': 'off',
-        '@stylistic/jsx-one-expression-per-line': 'off',
-        '@stylistic/multiline-ternary': 'off',
-        '@stylistic/brace-style': ['error', '1tbs'],
-        '@stylistic/member-delimiter-style': ['error', {
-                multiline: {
-                    delimiter: 'comma',
-                    requireLast: true,
-                },
-                singleline: {
-                    delimiter: 'comma',
-                    requireLast: false,
-                }
-            }],
-    },
-}, {
-    files: [
-        'babel.config.js',
-        'jest.config.js',
-        'eslint.config.js'
-    ],
-    rules: {
-        '@typescript-eslint/no-require-imports': 'off'
-    }
-});

package/tools/dist/index.js

@@ -1,12 +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.getBaseConfig = exports.createLintConfig = exports.createConfig = void 0;
-var createConfig_1 = require("./config-helpers/createConfig");
-Object.defineProperty(exports, "createConfig", { enumerable: true, get: function () { return __importDefault(createConfig_1).default; } });
-var createLintConfig_1 = require("./config-helpers/createLintConfig");
-Object.defineProperty(exports, "createLintConfig", { enumerable: true, get: function () { return __importDefault(createLintConfig_1).default; } });
-var getBaseConfig_1 = require("./config-helpers/getBaseConfig");
-Object.defineProperty(exports, "getBaseConfig", { enumerable: true, get: function () { return __importDefault(getBaseConfig_1).default; } });

package/tools/dist/jest/jest.config.js

@@ -1,30 +0,0 @@
-"use strict";
-const path = require('path');
-module.exports = {
-    testEnvironment: 'jsdom',
-    testEnvironmentOptions: {
-        url: 'http://localhost/',
-    },
-    rootDir: process.cwd(),
-    moduleNameMapper: {
-        '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
-        'site.config': path.resolve(process.cwd(), './site.config.test.tsx'),
-    },
-    collectCoverageFrom: [
-        'src/**/*.{js,jsx,ts,tsx}',
-    ],
-    coveragePathIgnorePatterns: [
-        '/node_modules/',
-    ],
-    transformIgnorePatterns: [
-        '/node_modules/(?!(@openedx|@edx)/)',
-    ],
-    modulePathIgnorePatterns: [
-        '/dist/',
-    ],
-    testPathIgnorePatterns: [
-        '/site.config.test.tsx',
-        '/node_modules/',
-        '/dist/',
-    ],
-};

package/tools/dist/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/tools/dist/typescript/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/tools/dist/webpack/common-config/all/getCodeRules.js

@@ -1,52 +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 = getCodeRules;
-const ts_transformer_1 = require("@formatjs/ts-transformer");
-const react_refresh_typescript_1 = __importDefault(require("react-refresh-typescript"));
-function getCodeRules(mode, resolvedSiteConfigPath) {
-    const rules = [
-        {
-            test: /\.(js|jsx|ts|tsx)$/,
-            include: [
-                /src/,
-                /node_modules\/@openedx\/frontend-base/,
-                resolvedSiteConfigPath,
-            ],
-            use: {
-                loader: require.resolve('ts-loader'),
-                options: {
-                    transpileOnly: true,
-                    compilerOptions: {
-                        noEmit: false,
-                    },
-                    getCustomTransformers() {
-                        const before = [
-                            (0, ts_transformer_1.transform)({
-                                overrideIdFn: '[sha512:contenthash:base64:6]',
-                            }),
-                        ];
-                        if (mode === 'dev') {
-                            before.push((0, react_refresh_typescript_1.default)());
-                        }
-                        return {
-                            before,
-                        };
-                    },
-                },
-            },
-        },
-    ];
-    if (mode === 'production') {
-        rules.push({
-            test: /\.(js|jsx|ts|tsx)$/,
-            use: [
-                require.resolve('source-map-loader'),
-            ],
-            enforce: 'pre',
-        });
-    }
-    return rules;
-}

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getFileLoaderRules;
-function getFileLoaderRules() {
-    return [
-        // Webpack, by default, uses the url-loader for images and fonts that are required/included by
-        // files it processes, which just base64 encodes them and inlines them in the javascript
-        // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-        // file-loader instead to copy the files directly to the output directory.
-        {
-            test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
-            loader: require.resolve('file-loader'),
-        },
-        {
-            test: /favicon.ico$/,
-            loader: require.resolve('file-loader'),
-            options: {
-                name: '[name].[ext]', // <-- retain original file name
-            },
-        },
-        {
-            test: /\.(jpe?g|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
-            loader: require.resolve('file-loader'),
-        },
-    ];
-}

package/tools/dist/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/tools/dist/webpack/common-config/all/getImageMinimizer.js

@@ -1,25 +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 = getImageMinimizer;
-const image_minimizer_webpack_plugin_1 = __importDefault(require("image-minimizer-webpack-plugin"));
-function getImageMinimizer() {
-    return [
-        '...',
-        new image_minimizer_webpack_plugin_1.default({
-            minimizer: {
-                implementation: image_minimizer_webpack_plugin_1.default.sharpMinify,
-                options: {
-                    encodeOptions: {
-                        ...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => ({ ...accumulator, [value]: { progressive: true, quality: 65 } }), {}),
-                        gif: {
-                            effort: 5,
-                        },
-                    },
-                },
-            },
-        }),
-    ];
-}

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

@@ -1,112 +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 = 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"));
-/**
- * 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.
- */
-function getStylesheetRule(mode) {
-    if (mode === 'production') {
-        // In the production case, all files should go through MiniCssExtractPlugin.
-        return {
-            test: /(.scss|.css)$/,
-            use: [
-                mini_css_extract_plugin_1.default.loader,
-                ...getStyleUseConfig(mode),
-            ],
-        };
-    }
-    else {
-        // In the dev case, only our @openedx dependencies go through MiniCssExtractPlugin.
-        // We are not extracting CSS from the javascript bundles in development because extracting
-        // prevents hot-reloading from working, it increases build time, and we don't care about
-        // flash-of-unstyled-content issues in development.
-        return {
-            test: /(.scss|.css)$/,
-            oneOf: [
-                {
-                    resource: /(@openedx\/paragon|@(open)?edx\/brand)/,
-                    use: [
-                        mini_css_extract_plugin_1.default.loader,
-                        ...getStyleUseConfig(mode),
-                    ],
-                },
-                {
-                    use: [
-                        require.resolve('style-loader'), // creates style nodes from JS strings
-                        ...getStyleUseConfig(mode),
-                    ],
-                },
-            ]
-        };
-    }
-}
-function getStyleUseConfig(mode) {
-    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), // Different behavior for dev and production.
-                },
-            },
-        },
-        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'],
-                },
-            },
-        },
-    ];
-}
-/**
- * This exists just to conditionally include CssNano in production.
- */
-function getPostCssLoaderPlugins(mode) {
-    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)());
-    return plugins;
-}

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

@@ -1,18 +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.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; } });

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

@@ -1,16 +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 = 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.
-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
-        template: path_1.default.resolve(process.cwd(), 'public/index.html'),
-        chunks: ['app'],
-    });
-}