npm - @openedx/frontend-base - Versions diffs - 1.0.0-alpha.3 → 1.0.0-alpha.30 - Mend

@openedx/frontend-base 1.0.0-alpha.3 → 1.0.0-alpha.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (806) hide show

package/shell/public/index.html DELETED Viewed

@@ -1,10 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <title>Shell Development Site</title>
-    <link rel="shortcut icon" href="https://edx-cdn.org/v3/default/favicon.ico" type="image/x-icon" />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/shell/router/createRouter.test.tsx DELETED Viewed

@@ -1,50 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import { getBasename } from '../../runtime/initialize';
-import Shell from '../Shell';
-import createRouter from './createRouter';
-import getAppRoutes from './getAppRoutes';
-jest.mock('react-router-dom', () => ({
-  createBrowserRouter: jest.fn(),
-}));
-jest.mock('../../runtime/initialize', () => ({
-  getBasename: jest.fn(),
-}));
-jest.mock('../Shell', () => jest.fn());
-jest.mock('./getAppRoutes', () => jest.fn());
-describe('createRouter', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('should create a router with the correct configuration', () => {
-    const mockRoutes = [{ path: '/', element: <div>Home</div> }];
-    const mockBasename = '/base';
-    (getAppRoutes as jest.Mock).mockReturnValue(mockRoutes);
-    (getBasename as jest.Mock).mockReturnValue(mockBasename);
-    (createBrowserRouter as jest.Mock).mockReturnValue('fake router value');
-    const result = createRouter();
-    expect(getAppRoutes).toHaveBeenCalled();
-    expect(getBasename).toHaveBeenCalled();
-    expect(createBrowserRouter).toHaveBeenCalledWith(
-      [
-        {
-          Component: Shell,
-          children: mockRoutes,
-        },
-      ],
-      {
-        basename: mockBasename,
-      }
-    );
-    // Just proving we actually return the router from createBrowserRouter.
-    expect(result).toEqual('fake router value');
-  });
-});

package/shell/router/createRouter.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import { getBasename } from '../../runtime/initialize';
-import Shell from '../Shell';
-import getAppRoutes from './getAppRoutes';
-export default function createRouter() {
-  return createBrowserRouter([
-    {
-      Component: Shell,
-      children: getAppRoutes(),
-    }
-  ], {
-    basename: getBasename(),
-  });
-}

package/shell/router/getAppRoutes.test.tsx DELETED Viewed

@@ -1,59 +0,0 @@
-import { RouteObject } from 'react-router';
-import { getSiteConfig } from '../../runtime';
-import getAppRoutes from './getAppRoutes';
-jest.mock('../../runtime', () => ({
-  getSiteConfig: jest.fn(),
-}));
-describe('getAppRoutes', () => {
-  it('should return an empty array when no apps are configured', () => {
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [] });
-    const routes = getAppRoutes();
-    expect(routes).toEqual([]);
-  });
-  it('should flatten and return routes from configured apps', () => {
-    const mockApps = [
-      {
-        routes: [
-          { path: '/page1', element: <div>Page 1</div> },
-          { path: '/page2', element: <div>Page 2</div> }
-        ]
-      },
-      {
-        routes: [
-          { path: '/page3', element: <div>Page 3</div> }
-        ]
-      },
-    ];
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
-    const routes = getAppRoutes();
-    expect(routes).toEqual([
-      { path: '/page1', element: <div>Page 1</div> },
-      { path: '/page2', element: <div>Page 2</div> },
-      { path: '/page3', element: <div>Page 3</div> }
-    ]);
-  });
-  it('should ignore apps without routes', () => {
-    const mockRoutes: RouteObject[] = [
-      { path: '/page1', element: <div>Page 1</div> },
-    ];
-    const mockApps = [
-      { routes: mockRoutes },
-      { slots: [] },
-    ];
-    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
-    const routes = getAppRoutes();
-    expect(routes).toEqual(mockRoutes);
-  });
-});

package/shell/router/getAppRoutes.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import { RouteObject } from 'react-router';
-import { getSiteConfig } from '../../runtime';
-import { App } from '../../types';
-export default function getAppRoutes() {
-  const { apps } = getSiteConfig();
-  let routes: RouteObject[] = [];
-  if (apps) {
-    apps.forEach(
-      (app: App) => {
-        if (Array.isArray(app.routes)) {
-          routes = routes.concat(app.routes);
-        }
-      }
-    );
-  }
-  return routes;
-}

package/shell/setupTest.js DELETED Viewed

@@ -1,48 +0,0 @@
-import '@testing-library/jest-dom';
-import siteConfig from 'site.config';
-import { mergeSiteConfig } from '../runtime';
-jest.mock('universal-cookie', () => {
-  const mCookie = {
-    get: jest.fn(),
-    remove: jest.fn(),
-  };
-  return jest.fn(() => mCookie);
-});
-mergeSiteConfig(siteConfig);
-global.PARAGON_THEME = {
-  paragon: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-  brand: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-};

package/shell/site.config.dev.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-import { devFooterApp, devHeaderApp, devHomeApp, devUserApp, slotShowcaseApp } from './dev';
-import { footerApp, headerApp, shellApp } from '.';
-import './app.scss';
-const siteConfig: SiteConfig = {
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    devUserApp,
-    devHomeApp,
-    devHeaderApp,
-    devFooterApp,
-    slotShowcaseApp,
-  ],
-  externalRoutes: [
-    {
-      role: 'org.openedx.frontend.role.profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'org.openedx.frontend.role.account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'org.openedx.frontend.role.logout',
-      url: 'http://local.openedx.io:8000/logout'
-    },
-  ],
-  // General
-  siteId: 'shell',
-  siteName: 'My Open edX Site',
-  baseUrl: 'http://apps.local.openedx.io:8080',
-  environment: EnvironmentTypes.DEVELOPMENT,
-  // Frontend URLs
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-  // API URLs
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  mfeConfigApiUrl: 'http://apps.local.openedx.io:8080/api/mfe_config/v1',
-};
-export default siteConfig;

package/shell/site.config.test.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-const siteConfig: SiteConfig = {
-  siteId: 'test',
-  siteName: 'Open edX',
-  baseUrl: 'http://localhost:8080',
-  lmsBaseUrl: 'http://localhost:18000',
-  loginUrl: 'http://localhost:18000/login',
-  logoutUrl: 'http://localhost:18000/logout',
-  environment: EnvironmentTypes.TEST,
-  apps: [],
-  segmentKey: 'segment_whoa',
-};
-export default siteConfig;

package/shell/site.tsx DELETED Viewed

@@ -1,41 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import {
-  SITE_INIT_ERROR,
-  SITE_READY,
-  initialize,
-  subscribe
-} from '../runtime';
-import { addAppConfigs } from '../runtime/config';
-import { addAppMessages } from '../runtime/i18n';
-import messages from './i18n';
-import createRouter from './router/createRouter';
-subscribe(SITE_READY, async () => {
-  const queryClient = new QueryClient();
-  const router = createRouter();
-  addAppConfigs();
-  addAppMessages();
-  const root = createRoot(document.getElementById('root') as HTMLElement);
-  root.render(
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </StrictMode>
-  );
-});
-subscribe(SITE_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root') as HTMLElement);
-  root.render(<div>{error.message}</div>);
-});
-initialize({
-  messages,
-});

package/tools/dist/babel/babel.config.js DELETED Viewed

@@ -1,28 +0,0 @@
-"use strict";
-/**
- * This Babel configuration file is for Jest.  The Webpack build does not use Babel.
- */
-module.exports = {
-    presets: [
-        [
-            require.resolve('@babel/preset-env'), {
-                targets: { node: 'current' },
-            },
-        ],
-        [
-            require.resolve('@babel/preset-react'), {
-                runtime: 'automatic',
-            },
-        ],
-        require.resolve('@babel/preset-typescript'),
-    ],
-    env: {
-        i18n: {
-            plugins: [
-                [
-                    'formatjs',
-                ],
-            ],
-        },
-    },
-};

package/tools/dist/cli/intl-imports.js DELETED Viewed

@@ -1,233 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.main = main;
-const scriptHelpDocument = `
-NAME
-  intl-imports.js — Script to generate the src/i18n/index.js file that exports messages from all the languages for Micro-frontends.
-SYNOPSIS
-  intl-imports.js [DIRECTORY ...]
-DESCRIPTION
-  This script is intended to run after 'atlas' has pulled the files.
-  This expects to run inside a Micro-frontend root directory with the following structure:
-    frontend-app-learning $ tree src/i18n/
-    src/i18n/
-    ├── index.js
-    └── messages
-        ├── frontend-app-example
-        │   ├── ar.json
-        │   ├── es_419.json
-        │   └── zh_CN.json
-        ├── frontend-component-footer
-        │   ├── ar.json
-        │   ├── es_419.json
-        │   └── zh_CN.json
-        └── frontend-component-header (empty directory)
-  With the structure above it's expected to run with the following command in Makefile:
-    $ node_modules/.bin/intl-imports.js frontend-component-footer frontend-component-header frontend-app-example
-  It will generate two type of files:
-   - Main src/i18n/index.js which overrides the Micro-frontend provided with a sample output of:
-      """
-      import messagesFromFrontendComponentFooter from './messages/frontend-component-footer';
-      // Skipped import due to missing './messages/frontend-component-footer/index.js' likely due to empty translations.
-      import messagesFromFrontendAppExample from './messages/frontend-app-example';
-      export default [
-        messagesFromFrontendComponentFooter,
-        messagesFromFrontendAppExample,
-      ];
-      """
-   - Each sub-directory has src/i18n/messages/frontend-component-header/index.js which is imported by the main file.:
-      """
-      import messagesOfArLanguage from './ar.json';
-      import messagesOfDeLanguage from './de.json';
-      import messagesOfEs419Language from './es_419.json';
-      export default {
-        'ar': messagesOfArLanguage,
-        'de': messagesOfDeLanguage,
-        'es-419': messagesOfEs419Language,
-      };
-     """
-`;
-const fs_1 = __importDefault(require("fs"));
-const lodash_camelcase_1 = __importDefault(require("lodash.camelcase"));
-const path_1 = __importDefault(require("path"));
-const loggingPrefix = path_1.default.basename(`${__filename}`); // the name of this JS file
-// Header note for generated src/i18n/index.js file
-const filesCodeGeneratorNoticeHeader = `// This file is generated by the openedx/frontend-base's "intl-import.js" script.
-//
-// Refer to the i18n documents in https://docs.openedx.org/en/latest/developers/references/i18n.html to update
-// the file and use the Micro-frontend i18n pattern in new repositories.
-//
-`;
-/**
- * Create frontend-app-example/index.js file with proper imports.
- *
- * @param directory - a directory name containing .json files from Transifex e.g. "frontend-app-example".
- * @param log - Mockable process.stdout.write
- * @param writeFileSync - Mockable fs.writeFileSync
- * @param i18nDir - Path to `src/i18n` directory
- *
- * @return object - An object containing directory name and whether its "index.js" file was successfully written.
- */
-function generateSubdirectoryMessageFile({ directory, log, writeFileSync, i18nDir, }) {
-    const importLines = [];
-    const messagesLines = [];
-    const counter = { nonEmptyLanguages: 0 };
-    const messagesDir = `${i18nDir}/messages`; // The directory of Micro-frontend i18n messages
-    try {
-        const files = fs_1.default.readdirSync(`${messagesDir}/${directory}`, { withFileTypes: true });
-        files.sort(); // Sorting ensures a consistent generated `index.js` order of imports cross-platforms.
-        const jsonFiles = files.filter(file => file.isFile() && file.name.endsWith('.json'));
-        if (!jsonFiles.length) {
-            log(`${loggingPrefix}: Not creating '${directory}/index.js' because no .json translation files were found.\n`);
-            return {
-                directory,
-                isWritten: false,
-            };
-        }
-        jsonFiles.forEach((file) => {
-            const filename = file.name;
-            // Gets `fr_CA` from `fr_CA.json`
-            const languageCode = filename.replace(/\.json$/, '');
-            // React-friendly language code fr_CA --> fr-ca
-            const reactIntlLanguageCode = languageCode.toLowerCase().replace(/_/g, '-');
-            // camelCase variable name
-            const messagesCamelCaseVar = (0, lodash_camelcase_1.default)(`messages_Of_${languageCode}_Language`);
-            const filePath = `${messagesDir}/${directory}/${filename}`;
-            try {
-                const entries = JSON.parse(fs_1.default.readFileSync(filePath, { encoding: 'utf8' }));
-                if (!Object.keys(entries).length) {
-                    importLines.push(`// Note: Skipped empty '${filename}' messages file.`);
-                    return; // Skip the language
-                }
-            }
-            catch (e) {
-                importLines.push(`// Error: unable to parse '${filename}' messages file.`);
-                log(`${loggingPrefix}: NOTICE: Skipping '${directory}/${filename}' due to error: ${e}.\n`);
-                return; // Skip the language
-            }
-            counter.nonEmptyLanguages += 1;
-            importLines.push(`import ${messagesCamelCaseVar} from './${filename}';`);
-            messagesLines.splice(1, 0, `  '${reactIntlLanguageCode}': ${messagesCamelCaseVar},`);
-        });
-        if (counter.nonEmptyLanguages) {
-            // See the help message above for sample output.
-            const messagesFileContent = [
-                filesCodeGeneratorNoticeHeader,
-                importLines.join('\n'),
-                '\nexport default {',
-                messagesLines.join('\n'),
-                '};\n',
-            ].join('\n');
-            writeFileSync(`${messagesDir}/${directory}/index.js`, messagesFileContent);
-            return {
-                directory,
-                isWritten: true,
-            };
-        }
-        log(`${loggingPrefix}: Skipping '${directory}' because no languages were found.\n`);
-    }
-    catch (e) {
-        log(`${loggingPrefix}: NOTICE: Skipping '${directory}' due to error: ${e}.\n`);
-    }
-    return {
-        directory,
-        isWritten: false,
-    };
-}
-/**
- * Create main `src/i18n/index.js` messages import file.
- *
- *
- * @param processedDirectories - List of directories with a boolean flag whether its "index.js" file is written
- *                               The format is "[\{ directory: "frontend-component-example", isWritten: false \}, ...]"
- * @param log - Mockable process.stdout.write
- * @param writeFileSync - Mockable fs.writeFileSync
- * @param i18nDir` - Path to `src/i18n` directory
- */
-function generateMainMessagesFile({ processedDirectories, log, writeFileSync, i18nDir, }) {
-    const importLines = [];
-    const exportLines = [];
-    processedDirectories.forEach(processedDirectory => {
-        const { directory, isWritten } = processedDirectory;
-        if (isWritten) {
-            const moduleCamelCaseVariableName = (0, lodash_camelcase_1.default)(`messages_from_${directory}`);
-            importLines.push(`import ${moduleCamelCaseVariableName} from './messages/${directory}';`);
-            exportLines.push(`  ${moduleCamelCaseVariableName},`);
-        }
-        else {
-            const skipMessage = `Skipped import due to missing '${directory}/index.js' likely due to empty translations.`;
-            importLines.push(`// ${skipMessage}.`);
-            log(`${loggingPrefix}: ${skipMessage}\n`);
-        }
-    });
-    // See the help message above for sample output.
-    const indexFileContent = [
-        filesCodeGeneratorNoticeHeader,
-        importLines.join('\n'),
-        '\nexport default [',
-        exportLines.join('\n'),
-        '];\n',
-    ].join('\n');
-    writeFileSync(`${i18nDir}/index.js`, indexFileContent);
-}
-/*
- * Main function of the file.
- */
-function main({ directories, log, writeFileSync, pwd, }) {
-    const i18nDir = `${pwd}/src/i18n`; // The Micro-frontend i18n root directory
-    if (directories.includes('--help') || directories.includes('-h')) {
-        log(scriptHelpDocument);
-    }
-    else if (!directories.length) {
-        log(scriptHelpDocument);
-        log(`${loggingPrefix}: Error: A list of directories is required.\n`);
-    }
-    else if (!fs_1.default.existsSync(i18nDir) || !fs_1.default.lstatSync(i18nDir).isDirectory()) {
-        log(scriptHelpDocument);
-        log(`${loggingPrefix}: Error: src/i18n directory was not found.\n`);
-    }
-    else {
-        // If we're here, we know that directories is an array, so cast it as one.
-        const processedDirectories = directories.map((directory) => generateSubdirectoryMessageFile({
-            directory,
-            log,
-            writeFileSync,
-            i18nDir,
-        }));
-        generateMainMessagesFile({
-            processedDirectories,
-            log,
-            writeFileSync,
-            i18nDir,
-        });
-    }
-}
-if (require.main === module) {
-    // Run the main() function if called from the command line.
-    main({
-        directories: process.argv.slice(2),
-        log: text => process.stdout.write(text),
-        writeFileSync: fs_1.default.writeFileSync,
-        pwd: process.env.PWD ?? '.',
-    });
-}