@openedx/frontend-base 1.0.0-alpha.0 → 1.0.0-alpha.2

package/tools/dist/cli/commands/release.js

@@ -1,28 +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 = release;
-const chalk_1 = __importDefault(require("chalk"));
-const child_process_1 = require("child_process");
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
-function release() {
-    const tsconfigPath = path_1.default.resolve(process.cwd(), './tsconfig.build.json');
-    if (!(0, fs_1.existsSync)(tsconfigPath)) {
-        console.error(chalk_1.default.red('openedx release: the library must include a tsconfig.build.json. Aborting.'));
-        process.exit(1);
-    }
-    // Clean up our dist folder.
-    (0, fs_1.rmSync)(path_1.default.resolve(process.cwd(), 'dist'), { recursive: true, force: true });
-    (0, child_process_1.execSync)(`tsc --project ${path_1.default.resolve(process.cwd(), './tsconfig.build.json')}`, { stdio: 'inherit' });
-    // Copy all non JS/TS files from src into dist.  This is so imports of our assets still work.
-    (0, child_process_1.execSync)(`rsync -aR src/**/* --exclude='*.tsx' --exclude='*.ts' --exclude='*.js' --exclude='*.jsx' dist/`);
-    // The above rsync command will put the files in dist/src - move them up a folder into dist,
-    // merging them into the compiled code there, and then delete dist/src.
-    if ((0, fs_1.existsSync)(path_1.default.resolve(process.cwd(), 'dist/src'))) {
-        (0, child_process_1.execSync)('cp -R dist/src/* dist');
-        (0, child_process_1.execSync)('rm -rf dist/src');
-    }
-}

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

@@ -1,124 +0,0 @@
-// @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,
-        PARAGON_THEME: 'readonly',
-        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',
-      '@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/eslint/modules.d.ts

@@ -1,5 +0,0 @@
-// This file needs to exist to declare modules for dependencies that don't publish their types.
-
-declare module 'eslint-plugin-jest';
-declare module 'eslint-plugin-jsx-a11y';
-declare module 'eslint-plugin-react-hooks';

package/tools/eslint.config.js

@@ -1,15 +0,0 @@
-// @ts-check
-
-const tseslint = require('typescript-eslint');
-const eslintConfig = require('./eslint/base.eslint.config.js');
-
-module.exports = tseslint.config(
-  {
-    extends: eslintConfig,
-  },
-  {
-    rules: {
-      '@typescript-eslint/no-require-imports': 'off'
-    }
-  },
-);

package/tools/index.ts

@@ -1,3 +0,0 @@
-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/tools/jest/jest.config.js

@@ -1,30 +0,0 @@
-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/jest.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  testEnvironment: 'node',
-  testEnvironmentOptions: {
-    url: 'http://localhost/',
-  },
-  collectCoverageFrom: [
-    'cli/**/*.{js,jsx,ts,tsx}',
-  ],
-  transformIgnorePatterns: [
-    '/node_modules/(?!(@openedx|@edx)/)',
-  ],
-  modulePathIgnorePatterns: [
-    '/dist/',
-  ],
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/dist/',
-  ],
-};

package/tools/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "extends": "@tsconfig/node20/tsconfig.json",
-  "compilerOptions": {
-    "rootDir": ".",
-    "outDir": "dist",
-    "noEmit": false,
-    "allowJs": true,
-    "resolveJsonModule": true,
-  },
-  "include": [
-    "babel/**/*",
-    "cli/**/*",
-    "config-helpers/**/*",
-    "jest/jest.config.js",
-    "typescript/tsconfig.json",
-    "webpack/**/*",
-    "types.ts",
-    "index.ts",
-    "defaultConfigPaths.ts",
-    "eslint/**/*",
-    "eslint.config.js",
-    "jest.config.js",
-  ],
-}

package/tools/types.ts

@@ -1,21 +0,0 @@
-export enum ConfigTypes {
-  BABEL = 'babel',
-  WEBPACK_BUILD = 'webpack-build',
-  WEBPACK_DEV = 'webpack-dev',
-  WEBPACK_DEV_SHELL = 'webpack-dev-shell',
-  LINT = 'lint',
-  TEST = 'test',
-}
-
-export enum CommandTypes {
-  RELEASE = 'release',
-  PACK = 'pack',
-  LINT = 'lint',
-  TEST = 'test',
-  BUILD = 'build',
-  DEV_SHELL = 'dev:shell',
-  DEV = 'dev',
-  FORMAT_JS = 'formatjs',
-  SERVE = 'serve',
-  HELP = 'help',
-}

package/tools/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/webpack/common-config/README.md

@@ -1,15 +0,0 @@
-# Using this 'common-config' folder
-
-**Don't try too hard to re-use code.**
-
-If extracting webpack config to this folder makes the config harder to reason, then it's not worth it.
-
-The things that have been extracted so far are either:
-
-1) So similar (or exactly the same) across configs that they're easy to understand.  `getHtmlWebpackPlugin`, `getImageMinimizer`, `ignoreWarnings`, and `getFileLoaderRules` fit in this category.
-2) Need to be kept in sync and tended to drift, despite being a bit different.  The `getStylesheetRule` and `getCodeRules` functions fit in this category.  They are arguably easier to reason all in one place so we can understand the differences between
-them.
-
-What they all share in common is that they're fairly long and make the configs harder to read.  Extracting them has made the configs about a page of text and all the important high-level stuff that makes them different is still present.
-
-More or less.  Use your judgment.

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

@@ -1,51 +0,0 @@
-import { transform } from '@formatjs/ts-transformer';
-import ReactRefreshTypeScript from 'react-refresh-typescript';
-
-import { RuleSetRule } from 'webpack';
-
-export default function getCodeRules(mode: 'dev' | 'production', resolvedSiteConfigPath: string) {
-  const rules: RuleSetRule[] = [
-    {
-      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 = [
-              transform({
-                overrideIdFn: '[sha512:contenthash:base64:6]',
-              }),
-            ];
-            if (mode === 'dev') {
-              before.push(ReactRefreshTypeScript());
-            }
-            return {
-              before,
-            };
-          },
-        },
-      },
-    },
-  ];
-
-  if (mode === 'production') {
-    rules.push({
-      test: /\.(js|jsx|ts|tsx)$/,
-      use: [
-        require.resolve('source-map-loader'),
-      ],
-      enforce: 'pre',
-    });
-  }
-
-  return rules;
-}

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

@@ -1,23 +0,0 @@
-export default 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/webpack/common-config/all/getIgnoreWarnings.ts

@@ -1,13 +0,0 @@
-import { WebpackError } from 'webpack';
-
-export default 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: WebpackError) => !!(
-      // @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/webpack/common-config/all/getImageMinimizer.ts

@@ -1,26 +0,0 @@
-import ImageMinimizerPlugin, { Compiler } from 'image-minimizer-webpack-plugin';
-import { WebpackPluginInstance } from 'webpack';
-
-// This is pulled from the definition of optimization.minimizer in the webpack Configuration type.
-type ImageMinimizerReturnType = (false | '' | 0 | '...' | ((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance | null | undefined)[] | undefined;
-
-export default function getImageMinimizer(): ImageMinimizerReturnType {
-  return [
-    '...',
-    new ImageMinimizerPlugin({
-      minimizer: {
-        implementation: ImageMinimizerPlugin.sharpMinify,
-        options: {
-          encodeOptions: {
-            ...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => (
-              { ...accumulator, [value]: { progressive: true, quality: 65 } }
-            ), {}),
-            gif: {
-              effort: 5,
-            },
-          },
-        },
-      },
-    }),
-  ];
-}

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

@@ -1,111 +0,0 @@
-import PostCssAutoprefixerPlugin from 'autoprefixer';
-import CssNano from 'cssnano';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import path from 'path';
-import PostCssCustomMediaCSS from 'postcss-custom-media';
-import PostCssRTLCSS from 'postcss-rtlcss';
-import { RuleSetRule } from 'webpack';
-
-/**
- * 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.
- */
-export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRule {
-  if (mode === 'production') {
-    // In the production case, all files should go through MiniCssExtractPlugin.
-    return {
-      test: /(.scss|.css)$/,
-      use: [
-        MiniCssExtractPlugin.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: [
-            MiniCssExtractPlugin.loader,
-            ...getStyleUseConfig(mode),
-          ],
-        },
-        {
-          use: [
-            require.resolve('style-loader'), // creates style nodes from JS strings
-            ...getStyleUseConfig(mode),
-          ],
-        },
-      ]
-    };
-  }
-}
-
-function getStyleUseConfig(mode: 'dev' | 'production') {
-  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.join(process.cwd(), 'node_modules'),
-            path.join(process.cwd(), 'src'),
-          ],
-          // Silences compiler deprecation warnings.  They mostly come from bootstrap and/or paragon.
-          quietDeps: true,
-          silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin', 'legacy-js-api'],
-        },
-      },
-    },
-  ];
-}
-
-/**
- * This exists just to conditionally include CssNano in production.
- */
-function getPostCssLoaderPlugins(mode: 'dev' | 'production') {
-  const plugins: any[] = [
-    PostCssAutoprefixerPlugin({
-      remove: false, // Prevents removing vendor prefixes
-    }),
-    PostCssRTLCSS(),
-  ];
-
-  // We want CSSNano third, and only in production.
-  if (mode === 'production') {
-    plugins.push(CssNano());
-  }
-
-  plugins.push(PostCssCustomMediaCSS());
-  return plugins;
-}

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

@@ -1,35 +0,0 @@
-import path from 'path';
-import { Configuration } from 'webpack-dev-server';
-
-import getPublicPath from '../../utils/getPublicPath';
-
-export default function getDevServer(): Configuration {
-  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.join(getPublicPath('/'), '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/webpack/common-config/index.ts

@@ -1,6 +0,0 @@
-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';

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

@@ -1,11 +0,0 @@
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import path from 'path';
-
-// Generates an HTML file in the output directory.
-export default function getHtmlWebpackPlugin() {
-  return new HtmlWebpackPlugin({
-    inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-    template: path.resolve(process.cwd(), 'public/index.html'),
-    chunks: ['app'],
-  });
-}

package/tools/webpack/modules.d.ts

@@ -1,6 +0,0 @@
-// This file needs to exist to declare modules for dependencies that don't publish their types.
-
-declare module 'postcss-custom-media';
-declare module '@edx/new-relic-source-map-webpack-plugin';
-declare module 'mini-css-extract-plugin';
-declare module 'webpack-bundle-analyzer';