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

package/tools/dist/cli/intl-imports.test.js

@@ -0,0 +1,146 @@
+"use strict";
+// Tests for the intl-imports.js command line.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const intl_imports_1 = require("./intl-imports");
+const sampleAppDirectory = path_1.default.join(__dirname, '../../test-site');
+// History for `process.stdout.write` mock calls.
+const logHistory = {
+    log: [],
+    latest: '',
+};
+// History for `fs.writeFileSync` mock calls.
+const writeFileHistory = {
+    log: [],
+    latest: null,
+};
+// Mock for process.stdout.write
+const log = (text) => {
+    logHistory.latest = text;
+    logHistory.log.push(text);
+};
+// Mock for fs.writeFileSync
+const writeFileSync = (filename, content) => {
+    const entry = { filename, content };
+    writeFileHistory.latest = entry;
+    writeFileHistory.log.push(entry);
+};
+// Main with mocked output
+const main = (...directories) => (0, intl_imports_1.main)({
+    directories,
+    log,
+    writeFileSync,
+    pwd: sampleAppDirectory,
+});
+// Clean up mock histories
+afterEach(() => {
+    logHistory.log = [];
+    logHistory.latest = null;
+    writeFileHistory.log = [];
+    writeFileHistory.latest = null;
+});
+describe('help document', () => {
+    it('should print help for --help', () => {
+        main('--help');
+        expect(logHistory.latest).toMatch('Script to generate the src/i18n/index.js');
+    });
+    it('should print help for -h', () => {
+        main('-h');
+        expect(logHistory.latest).toMatch('Script to generate the src/i18n/index.js');
+    });
+});
+describe('error validation', () => {
+    it('expects a list of directories', () => {
+        main();
+        expect(logHistory.log.join('\n')).toMatch('Script to generate the src/i18n/index.js'); // Print help error
+        expect(logHistory.latest).toMatch('Error: A list of directories is required'); // Print error message
+    });
+    it('expects a directory with a relative path of "src/i18n"', () => {
+        (0, intl_imports_1.main)({
+            directories: ['frontend-app-example'],
+            log,
+            writeFileSync,
+            pwd: path_1.default.join(__dirname), // __dirname === `scripts` which has no sub-dir `src/i18n`
+        });
+        expect(logHistory.log.join('\n')).toMatch('Script to generate the src/i18n/index.js'); // Print help on error
+        expect(logHistory.latest).toMatch('Error: src/i18n directory was not found.'); // Print error message
+    });
+});
+describe('generated files', () => {
+    it('writes a correct src/i18n/index.js file', () => {
+        main('frontend-component-singlelang', 'frontend-component-nolangs', 'frontend-component-emptylangs', 'frontend-app-sample');
+        const mainFileActualContent = writeFileHistory.log.find((file) => {
+            return file.filename.endsWith('src/i18n/index.js');
+        })?.content;
+        const mainFileExpectedContent = `// 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.
+//
+
+import messagesFromFrontendComponentSinglelang from './messages/frontend-component-singlelang';
+// Skipped import due to missing 'frontend-component-nolangs/index.js' likely due to empty translations..
+// Skipped import due to missing 'frontend-component-emptylangs/index.js' likely due to empty translations..
+import messagesFromFrontendAppSample from './messages/frontend-app-sample';
+
+export default [
+  messagesFromFrontendComponentSinglelang,
+  messagesFromFrontendAppSample,
+];
+`;
+        expect(mainFileActualContent).toEqual(mainFileExpectedContent);
+    });
+    it('writes a correct frontend-component-singlelang/index.js file', () => {
+        main('frontend-component-singlelang', 'frontend-component-nolangs', 'frontend-component-emptylangs', 'frontend-app-sample');
+        const mainFileActualContent = writeFileHistory.log.find(file => file.filename.endsWith('frontend-component-singlelang/index.js'))?.content;
+        const singleLangExpectedContent = `// 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.
+//
+
+import messagesOfArLanguage from './ar.json';
+
+export default {
+  'ar': messagesOfArLanguage,
+};
+`;
+        expect(mainFileActualContent).toEqual(singleLangExpectedContent);
+    });
+    it('writes a correct frontend-app-sample/index.js file', () => {
+        main('frontend-component-singlelang', 'frontend-component-nolangs', 'frontend-component-emptylangs', 'frontend-app-sample');
+        const mainFileActualContent = writeFileHistory.log.find(file => file.filename.endsWith('frontend-app-sample/index.js'))?.content;
+        const singleLangExpectedContent = `// 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.
+//
+
+import messagesOfArLanguage from './ar.json';
+// Note: Skipped empty 'eo.json' messages file.
+import messagesOfEs419Language from './es_419.json';
+
+export default {
+  'ar': messagesOfArLanguage,
+  'es-419': messagesOfEs419Language,
+};
+`;
+        expect(mainFileActualContent).toEqual(singleLangExpectedContent);
+    });
+});
+describe('list of generated index.js files', () => {
+    it('writes only non-empty languages in addition to the main file', () => {
+        main('frontend-component-singlelang', 'frontend-component-nolangs', 'frontend-component-emptylangs', 'frontend-app-sample');
+        const writtenFiles = writeFileHistory.log
+            .map(file => file.filename)
+            .map(file => path_1.default.relative(sampleAppDirectory, file));
+        expect(writtenFiles).toEqual([
+            'src/i18n/messages/frontend-component-singlelang/index.js',
+            'src/i18n/messages/frontend-app-sample/index.js',
+            'src/i18n/index.js',
+        ]);
+    });
+});

package/tools/dist/cli/openedx.js

@@ -8,8 +8,6 @@ const chalk_1 = __importDefault(require("chalk"));
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const types_1 = require("../types");
-const pack_1 = __importDefault(require("./commands/pack"));
-const release_1 = __importDefault(require("./commands/release"));
 const ensureConfigFilenameOption_1 = require("./utils/ensureConfigFilenameOption");
 const prettyPrintTitle_1 = __importDefault(require("./utils/prettyPrintTitle"));
 const printUsage_1 = __importDefault(require("./utils/printUsage"));
@@ -26,18 +24,6 @@ else if ((0, fs_1.existsSync)(path_1.default.resolve(__dirname, '../../../packag
 }
 (0, prettyPrintTitle_1.default)(`Open edX CLI v${version}`);
 switch (commandName) {
-    case types_1.CommandTypes.RELEASE:
-        (0, release_1.default)();
-        break;
-    case types_1.CommandTypes.PACK:
-        if (process.argv[2] === undefined) {
-            console.log(chalk_1.default.red(`${chalk_1.default.bold.red(commandName)} command usage: specify a peer folder where the command should install the package:
-
-      npm run pack my-project`));
-            process.exit(1);
-        }
-        (0, pack_1.default)();
-        break;
     case types_1.CommandTypes.LINT:
         (0, ensureConfigFilenameOption_1.ensureConfigFilenameOption)(types_1.ConfigTypes.LINT, ['-c', '--config']);
         require('.bin/eslint');
@@ -78,7 +64,7 @@ switch (commandName) {
             srcFoldersString = `{${srcFoldersString}}`;
         }
         process.argv = process.argv.concat([
-            '--format', 'node_modules/@openedx/frontend-base/dist/tools/cli/utils/formatter.js',
+            '--format', 'node_modules/@openedx/frontend-base/tools/dist/cli/utils/formatter.js',
             '--ignore', `${srcFoldersString}/**/*.json`,
             '--ignore', `${srcFoldersString}/**/*.d.ts`,
             '--out-file', './temp/formatjs/Default.messages.json',

package/tools/dist/cli/utils/printUsage.js

@@ -11,15 +11,6 @@ function printUsage() {
     console.log('openedx <command> <options>\n');
     console.groupEnd();
     console.log('Commands:\n');
-    console.group();
-    console.log(`${chalk_1.default.bold('release')}\n`);
-    console.group();
-    console.log(`Compile source code for release as a library.  Compiled code is put into the dist folder.\n`);
-    console.groupEnd();
-    console.log(`${chalk_1.default.bold('pack')} <peer folder>\n`);
-    console.group();
-    console.log(`Package the dist folder as an NPM-compatible .tgz file suitable for use with npm install, then install it in the specified peer folder.  The folder is assumed to be a peer of this repository, do not include a path.\n`);
-    console.groupEnd();
     console.log(`${chalk_1.default.bold('lint')} <eslint options>\n`);
     console.group();
     console.log(`Runs ESLint on the source code. Requires an ${chalk_1.default.bold('eslint.config.js')} file.\n`);

package/tools/dist/types.js

@@ -12,8 +12,6 @@ var ConfigTypes;
 })(ConfigTypes || (exports.ConfigTypes = ConfigTypes = {}));
 var CommandTypes;
 (function (CommandTypes) {
-    CommandTypes["RELEASE"] = "release";
-    CommandTypes["PACK"] = "pack";
     CommandTypes["LINT"] = "lint";
     CommandTypes["TEST"] = "test";
     CommandTypes["BUILD"] = "build";

package/tools/dist/webpack/plugins/html-webpack-new-relic-plugin/test/HtmlWebpackNewRelicPlugin.test.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const path_1 = __importDefault(require("path"));
+const webpack_1 = __importDefault(require("webpack"));
+const HtmlWebpackNewRelicPlugin_1 = __importDefault(require("../HtmlWebpackNewRelicPlugin"));
+const OUTPUT_DIR = path_1.default.join(__dirname, './dist');
+describe('HtmlWebpackNewRelicPlugin', () => {
+    const testPluginOptions = {
+        accountID: '121212',
+        agentID: '343434',
+        trustKey: '565656',
+        licenseKey: '123456',
+        applicationID: '654321',
+    };
+    afterEach(() => {
+        if (fs_1.default.existsSync(OUTPUT_DIR)) {
+            fs_1.default.rmSync(OUTPUT_DIR, { recursive: true, force: true });
+        }
+    });
+    it('should append new relic script to body', done => {
+        (0, webpack_1.default)({
+            entry: path_1.default.resolve(__dirname, 'fixtures', 'entry.js'),
+            output: {
+                path: path_1.default.resolve(__dirname, './dist'),
+            },
+            plugins: [
+                new html_webpack_plugin_1.default(),
+                new HtmlWebpackNewRelicPlugin_1.default(testPluginOptions),
+            ],
+        }, (err) => {
+            const htmlFile = path_1.default.resolve(OUTPUT_DIR, 'index.html');
+            expect(err).toBeNull();
+            expect(fs_1.default.existsSync(htmlFile)).toBe(true);
+            const file = fs_1.default.readFileSync(path_1.default.resolve(OUTPUT_DIR, htmlFile), { encoding: 'utf-8' }, (error, data) => data.toString());
+            Object.entries(testPluginOptions).forEach(([optionName, optionValue]) => {
+                expect(file.indexOf(`${optionName}:"${optionValue}"`)).toBeGreaterThan(-1);
+            });
+            done();
+        });
+    });
+    describe('when its missing configuration variables', () => {
+        function testMissingOption(missingOptionName) {
+            it(`should throw error if ${missingOptionName} is missing`, done => {
+                const compiler = (0, webpack_1.default)({
+                    entry: path_1.default.resolve(__dirname, 'fixtures', 'entry.js'),
+                    output: {
+                        path: path_1.default.resolve(__dirname, '../dist'),
+                    },
+                    plugins: [new html_webpack_plugin_1.default()],
+                });
+                const optionsMissingOne = { ...testPluginOptions };
+                delete optionsMissingOne[missingOptionName];
+                expect(() => compiler.options.plugins.push(new HtmlWebpackNewRelicPlugin_1.default(optionsMissingOne))).toThrow(`${missingOptionName} argument is required`);
+                done();
+            });
+        }
+        Object.keys(testPluginOptions).forEach((key) => {
+            testMissingOption(key);
+        });
+    });
+});

package/types.ts

@@ -13,7 +13,7 @@ export interface ExternalRoute {
 export type RoleRouteObject = RouteObject & {
   handle?: {
     /**
-     * A route role is used to identify a route that fulfills a particular role in the site, such as "login", "learnerHome", or "profile".
+     * A route role is used to identify a route that fulfills a particular role in the site.
      */
     role?: string,
   },

package/eslint.config.js

@@ -1,18 +0,0 @@
-// @ts-check
-
-const tseslint = require('typescript-eslint');
-const eslintConfig = require('./tools/eslint/base.eslint.config.js');
-
-module.exports = tseslint.config(
-  {
-    extends: eslintConfig,
-  },
-  {
-    ignores: [
-      'tools/*',
-      'test-site/*',
-      'config/*',
-      'docs/*',
-    ],
-  },
-);

package/frontend-base.d.ts

@@ -1,8 +0,0 @@
-declare module 'site.config' {
-  export default SiteConfig;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}

package/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  projects: [
-    'tools',
-    'runtime',
-    'shell',
-  ],
-};

package/test-site/app.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}

package/test-site/dist/176.436443549ebb858db483.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunktest_site=self.webpackChunktest_site||[]).push([[176],{2176:(e,r,s)=>{s.r(r),s.d(r,{default:()=>y});var t=s(7517),n=s(5029),i=s(8083),l=s(574),a=s(2800),c=s(5601),o=s(3440),d=s(8313),h=s(3273);const p=(0,s(7050).YK)({"test-site.message":{id:"test-site.message",defaultMessage:"This message proves that i18n is working."}});const g=e=>{var{alt:r}=e,s=function(e,r){var s={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(s[t[n]]=e[t[n]])}return s}(e,["alt"]);return(0,t.jsx)("img",Object.assign({alt:r},s))};var x=s(2907),j=s.n(x),m=s(7141),f=s.n(m);const u=(0,d.forwardRef)(((e,r)=>{let{direction:s,gap:t,reversed:n,children:i,className:l}=e,a=function(e,r){var s={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(s[t[n]]=e[t[n]])}return s}(e,["direction","gap","reversed","children","className"]);return d.createElement("div",Object.assign({ref:r,className:f()("horizontal"===s?"pgn__hstack":"pgn__vstack",t?`pgn__stack-gap--${t}`:"",n?"pgn__stack-reversed":"",l)},a),i)}));u.propTypes={children:j().node.isRequired,direction:j().oneOf(["horizontal","vertical"]),gap:j().number,reversed:j().bool,className:j().string},u.defaultProps={direction:"vertical",gap:0,className:void 0,reversed:!1};const b=u;var v=s(4152);const N=()=>{var e,r;return PARAGON_THEME?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h2",{children:"Paragon"}),(0,t.jsxs)(b,{gap:4.5,children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{children:"Component preview"}),(0,t.jsx)("div",{className:"px-3 py-2 bg-light-200",children:(0,t.jsx)(v.Ay,{children:"Hello world"})})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{children:"Exposed theme CSS files"}),(0,t.jsx)("p",{children:(0,t.jsxs)("em",{children:["Note: Depending on the versions of ",(0,t.jsx)("code",{children:"@openedx/paragon"})," and/or ",(0,t.jsx)("code",{children:"@edx/brand"})," installed, it is expected that no exposed theme CSS assets be listed here."]})}),(0,t.jsxs)("ul",{className:"mb-0",children:[PARAGON_THEME.paragon.themeUrls.core.fileName&&(0,t.jsx)("li",{children:(0,t.jsx)("a",{href:`/${PARAGON_THEME.paragon.themeUrls.core.fileName}`,target:"_blank",rel:"noopener noreferrer",children:PARAGON_THEME.paragon.themeUrls.core.fileName})}),(null===(e=PARAGON_THEME.paragon.themeUrls.variants.light)||void 0===e?void 0:e.fileName)&&(0,t.jsx)("li",{children:(0,t.jsx)("a",{href:`/${PARAGON_THEME.paragon.themeUrls.variants.light.fileName}`,target:"_blank",rel:"noopener noreferrer",children:PARAGON_THEME.paragon.themeUrls.variants.light.fileName})}),PARAGON_THEME.brand.themeUrls.core.fileName&&(0,t.jsx)("li",{children:(0,t.jsx)("a",{href:`/${PARAGON_THEME.brand.themeUrls.core.fileName}`,target:"_blank",rel:"noopener noreferrer",children:PARAGON_THEME.brand.themeUrls.core.fileName})}),(null===(r=PARAGON_THEME.brand.themeUrls.variants.light)||void 0===r?void 0:r.fileName)&&(0,t.jsx)("li",{children:(0,t.jsx)("a",{href:`/${PARAGON_THEME.brand.themeUrls.variants.light.fileName}`,target:"_blank",rel:"noopener noreferrer",children:PARAGON_THEME.brand.themeUrls.variants.light.fileName})})]})]}),(0,t.jsxs)("div",{children:[(0,t.jsxs)("h3",{children:["Contents of ",(0,t.jsx)("code",{children:"PARAGON_THEME"})," global variable"]}),(0,t.jsx)("pre",{children:JSON.stringify(PARAGON_THEME,null,2)})]})]})]}):(0,t.jsxs)("p",{children:["Missing ",(0,t.jsx)("code",{children:"PARAGON_THEME"})," global variable. Depending on configuration, this may be OK."]})},A=s.p+"74e025d3fe9a7b7f8503054e2563b353.jpg",O=s.p+"cb28cdb1468c915e27e5cec9af64f22f.svg";function E(e){return e?"✅":"❌"}function y(){const e=(0,n.zn)(),r=(0,n.QR)(),s=(0,i.A)();return(0,d.useEffect)((()=>{(0,l.fH)("The example page can log info, which means logging is configured correctly.")}),[]),(0,t.jsxs)(o.A,{children:[(0,t.jsxs)("h1",{children:[e.siteName," test page"]}),(0,t.jsx)("h2",{children:"Links"}),(0,t.jsxs)("p",{children:["Visit ",(0,t.jsx)(h.N_,{to:"/authenticated",children:"authenticated page"}),"."]}),(0,t.jsxs)("p",{children:["Visit ",(0,t.jsx)(h.N_,{to:"/error",children:"error page"}),"."]}),(0,t.jsx)("h2",{children:"Context Config Test"}),(0,t.jsxs)("p",{children:["Is context.config equal to getSiteConfig()? ",E(e===(0,a.Q2)())]}),(0,t.jsxs)("p",{children:["Is context.authenticatedUser equal to getAuthenticatedUser()? ",E(r===(0,c.vD)())]}),(0,t.jsx)("h2",{children:"SCSS parsing tests"}),(0,t.jsxs)("p",{children:[(0,t.jsx)("span",{className:"red-text",children:'"The Apples"'})," should be red (",(0,t.jsx)("code",{children:"color: red;"})," via ",(0,t.jsx)("code",{children:".red-text"})," CSS class in SCSS stylesheet)"]}),(0,t.jsx)("h2",{children:"TSX parsing tests"}),(0,t.jsx)(g,{src:O,alt:"apple.svg displayed in Image.tsx",style:{width:"10rem"}}),(0,t.jsx)("h2",{children:"SVG import test"}),(0,t.jsx)("img",{src:O,alt:"apple.svg displayed in <img> tag",style:{width:"10rem"}}),(0,t.jsx)("h2",{children:"JPG import test"}),(0,t.jsx)("p",{children:(0,t.jsx)("img",{src:A,alt:"apple.jpg displayed in <img> tag",style:{width:"10rem"}})}),(0,t.jsx)("p",{children:"Photo by Louis Hansel @shotsoflouis on Unsplash"}),(0,t.jsx)("h2",{children:"i18n formatMessage test"}),(0,t.jsx)("p",{children:s.formatMessage(p["test-site.message"])}),(0,t.jsx)("h2",{children:"Authenticated User Test"}),null!==r?(0,t.jsxs)("div",{children:[(0,t.jsxs)("p",{children:["Authenticated Username: ",(0,t.jsx)("strong",{children:r.username})]}),(0,t.jsxs)("p",{children:["Authenticated user's name:",(0,t.jsx)("strong",{children:r.username}),"(Only available if user account has been fetched)"]})]}):(0,t.jsxs)("p",{children:["Unauthenticated ",E(null===r)]}),(0,t.jsx)("h2",{children:"Right-to-left language handling tests"}),(0,t.jsx)("p",{className:"text-align-right",children:"I'm aligned right, but left in RTL."}),(0,t.jsx)(N,{})]})}}}]);
-//# sourceMappingURL=176.436443549ebb858db483.js.map

package/test-site/dist/176.436443549ebb858db483.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"176.436443549ebb858db483.js","mappings":"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","sources":["webpack://test-site/./src/messages.js","webpack://test-site/./src/example-page/Image.tsx","webpack://test-site/./node_modules/@openedx/paragon/src/Stack/index.jsx","webpack://test-site/./src/example-page/ParagonPreview.jsx","webpack://test-site/./src/example-page/apple.jpg","webpack://test-site/./src/example-page/apple.svg","webpack://test-site/./src/example-page/ExamplePage.tsx"],"sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  'test-site.message': {\n    id: 'test-site.message',\n    defaultMessage: 'This message proves that i18n is working.',\n    description: 'A message that proves that internationalization is working.',\n  },\n});\n\nexport default messages;\n","import { CSSProperties } from 'react';\n\ninterface ImageProps {\n  src: string,\n  alt?: string,\n  style?: CSSProperties,\n}\n\nconst Image = ({ alt, ...rest }: ImageProps) => <img alt={alt} {...rest} />;\n\nexport default Image;\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst DIRECTION_VARIANTS = [\n  'horizontal',\n  'vertical',\n];\n\nconst Stack = forwardRef(({\n  direction,\n  gap,\n  reversed,\n  children,\n  className,\n  ...rest\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',\n      gap ? `pgn__stack-gap--${gap}` : '',\n      reversed ? 'pgn__stack-reversed' : '',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nStack.propTypes = {\n  /** Specifies the content of the `Stack`. */\n  children: PropTypes.node.isRequired,\n  /** Specifies direction of the children blocks (column/row). */\n  direction: PropTypes.oneOf(DIRECTION_VARIANTS),\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap: PropTypes.number,\n  /** Specifies the order of the children. */\n  reversed: PropTypes.bool,\n  /** Specifies an additional `className` to add to the base element. */\n  className: PropTypes.string,\n};\n\nStack.defaultProps = {\n  direction: 'vertical',\n  gap: 0,\n  className: undefined,\n  reversed: false,\n};\n\nexport default Stack;\n","import { Button, Stack } from '@openedx/paragon';\n\nconst ParagonPreview = () => {\n  if (!PARAGON_THEME) {\n    return <p>Missing <code>PARAGON_THEME</code> global variable. Depending on configuration, this may be OK.</p>;\n  }\n  return (\n    <>\n      <h2>Paragon</h2>\n\n      <Stack gap={4.5}>\n        <div>\n          <h3>Component preview</h3>\n          <div className=\"px-3 py-2 bg-light-200\">\n            <Button>Hello world</Button>\n          </div>\n        </div>\n        <div>\n          <h3>Exposed theme CSS files</h3>\n          <p>\n            <em>\n              Note: Depending on the versions of <code>@openedx/paragon</code> and/or <code>@edx/brand</code> installed,\n              it is expected that no exposed theme CSS assets be listed here.\n            </em>\n          </p>\n          <ul className=\"mb-0\">\n            {PARAGON_THEME.paragon.themeUrls.core.fileName && (\n              <li>\n                <a href={`/${PARAGON_THEME.paragon.themeUrls.core.fileName}`} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {PARAGON_THEME.paragon.themeUrls.core.fileName}\n                </a>\n              </li>\n            )}\n            {PARAGON_THEME.paragon.themeUrls.variants.light?.fileName && (\n              <li>\n                <a href={`/${PARAGON_THEME.paragon.themeUrls.variants.light.fileName}`} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {PARAGON_THEME.paragon.themeUrls.variants.light.fileName}\n                </a>\n              </li>\n            )}\n            {PARAGON_THEME.brand.themeUrls.core.fileName && (\n              <li>\n                <a href={`/${PARAGON_THEME.brand.themeUrls.core.fileName}`} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {PARAGON_THEME.brand.themeUrls.core.fileName}\n                </a>\n              </li>\n            )}\n            {PARAGON_THEME.brand.themeUrls.variants.light?.fileName && (\n              <li>\n                <a href={`/${PARAGON_THEME.brand.themeUrls.variants.light.fileName}`} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {PARAGON_THEME.brand.themeUrls.variants.light.fileName}\n                </a>\n              </li>\n            )}\n          </ul>\n        </div>\n        <div>\n          <h3>Contents of <code>PARAGON_THEME</code> global variable</h3>\n          <pre>{JSON.stringify(PARAGON_THEME, null, 2)}</pre>\n        </div>\n      </Stack>\n    </>\n  );\n};\n\nexport default ParagonPreview;\n","export default __webpack_public_path__ + \"74e025d3fe9a7b7f8503054e2563b353.jpg\";","export default __webpack_public_path__ + \"cb28cdb1468c915e27e5cec9af64f22f.svg\";","import {\n  getAuthenticatedUser,\n  getSiteConfig,\n  logInfo,\n  useAuthenticatedUser,\n  useSiteConfig,\n  useIntl\n} from '@openedx/frontend-base';\nimport { Container } from '@openedx/paragon';\nimport { useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport messages from '../messages';\nimport Image from './Image';\nimport ParagonPreview from './ParagonPreview';\nimport appleImg from './apple.jpg';\nimport appleUrl from './apple.svg';\n\nfunction printTestResult(value) {\n  return value ? '✅' : '❌';\n}\n\nexport default function ExamplePage() {\n  const config = useSiteConfig();\n  const authenticatedUser = useAuthenticatedUser();\n\n  const intl = useIntl();\n\n  useEffect(() => {\n    logInfo('The example page can log info, which means logging is configured correctly.');\n  }, []);\n\n  return (\n    <Container>\n      <h1>{config.siteName} test page</h1>\n\n      <h2>Links</h2>\n      <p>Visit <Link to=\"/authenticated\">authenticated page</Link>.</p>\n      <p>Visit <Link to=\"/error\">error page</Link>.</p>\n\n      <h2>Context Config Test</h2>\n      <p>Is context.config equal to getSiteConfig()? {printTestResult(config === getSiteConfig())}</p>\n      <p>Is context.authenticatedUser equal to getAuthenticatedUser()? {printTestResult(authenticatedUser === getAuthenticatedUser())}</p>\n\n      <h2>SCSS parsing tests</h2>\n      <p><span className=\"red-text\">&quot;The Apples&quot;</span> should be red (<code>color: red;</code> via <code>.red-text</code> CSS class in SCSS stylesheet)</p>\n\n      <h2>TSX parsing tests</h2>\n      <Image src={appleUrl} alt=\"apple.svg displayed in Image.tsx\" style={{ width: '10rem' }} />\n\n      <h2>SVG import test</h2>\n      <img src={appleUrl} alt=\"apple.svg displayed in <img> tag\" style={{ width: '10rem' }} />\n\n      <h2>JPG import test</h2>\n      <p><img src={appleImg} alt=\"apple.jpg displayed in <img> tag\" style={{ width: '10rem' }} /></p>\n      <p>Photo by Louis Hansel @shotsoflouis on Unsplash</p>\n\n      <h2>i18n formatMessage test</h2>\n      <p>{intl.formatMessage(messages['test-site.message'])}</p>\n\n      <h2>Authenticated User Test</h2>\n      {authenticatedUser !== null ? (\n        <div>\n          <p>Authenticated Username: <strong>{authenticatedUser.username}</strong></p>\n          <p>\n            Authenticated user&apos;s name:\n            <strong>{authenticatedUser.username}</strong>\n            (Only available if user account has been fetched)\n          </p>\n        </div>\n      ) : (\n        <p>Unauthenticated {printTestResult(authenticatedUser === null)}</p>\n      )}\n\n      <h2>Right-to-left language handling tests</h2>\n      <p className=\"text-align-right\">I&apos;m aligned right, but left in RTL.</p>\n      <ParagonPreview />\n    </Container>\n  );\n}\n"],"names":["alt","rest","Stack","forwardRef","_ref","ref","direction","gap","reversed","children","className","React","classNames","propTypes","PropTypes","isRequired","defaultProps","undefined","PARAGON_THEME","Button","paragon","themeUrls","core","fileName","href","target","rel","variants","light","brand","JSON","stringify","printTestResult","value","ExamplePage","config","authenticatedUser","intl","useIntl","useEffect","Container","siteName","to","src","style","width","apple","formatMessage","username"],"sourceRoot":""}

package/test-site/dist/362.536eff787d2380fe246c.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunktest_site=self.webpackChunktest_site||[]).push([[362],{5362:(e,s,t)=>{t.r(s),t.d(s,{default:()=>u});var i=t(7517),n=t(8313),r=t(8083),a=t(3879),c=t(2880),h=t(7409);const o=(0,t(7050).YK)({loading:{id:"loading.message.text",defaultMessage:"Loading"},unexpectedError:{id:"unexpected.error.message.text",defaultMessage:"Oops! An error occurred. Please refresh the screen to try again."}}),d=()=>{const{formatMessage:e}=(0,r.A)();return(0,i.jsx)("div",{children:(0,i.jsx)("h2",{children:e(o.unexpectedError)})})};function l({children:e,className:s,style:t={},ready:r=!0,errorFallbackComponent:o}){const[l,u]=(0,n.useState)({width:0,height:0}),g=(0,n.useMemo)((()=>Object.assign(Object.assign({},l),t)),[l,t]),f=null!=o?o:d;return(0,h.in)(c.GV,(({payload:e})=>{u({width:e.width,height:e.height})})),(0,n.useEffect)((()=>((0,h.dh)(),()=>{(0,h.wt)()})),[]),(0,n.useEffect)((()=>{r&&(0,h.uj)()}),[r]),(0,i.jsx)("div",{className:s,style:g,children:(0,i.jsx)(a.A,{fallbackComponent:(0,i.jsx)(f,{}),children:e})})}function u(){return(0,i.jsx)(l,{children:(0,i.jsxs)("section",{className:"bg-light p-3 h-100",children:[(0,i.jsx)("h4",{children:"Inserted iFrame Widget"}),(0,i.jsx)("p",{children:"This is a component that lives in the test-site but is loaded into the page via an iframe.  This emulates a real-world scenario.  It is NOT testing for cross-origin security issues though, since it's on the same host name."})]})})}}}]);
-//# sourceMappingURL=362.536eff787d2380fe246c.js.map

package/test-site/dist/362.536eff787d2380fe246c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"362.536eff787d2380fe246c.js","mappings":"mMAEA,MAaA,GAbiB,E,QAAA,IAAe,CAC9BA,QAAS,CAAF,oDAKPC,gBAAiB,CAAF,wHCSXC,EAAuB,KAC3B,MAAM,cAAEC,IAAkB,EAAAC,EAAA,KAC1B,OACE,0BACE,wBACGD,EAAc,EAASF,sBAcjB,SAASI,GAAqB,SAC3CC,EAAQ,UAAEC,EAAS,MAAEC,EAAQ,CAAC,EAAC,MAAEC,GAAQ,EAAI,uBAAEC,IAE/C,MAAOC,EAAYC,IAAiB,IAAAC,UAAS,CAC3CC,MAAO,EACPC,OAAQ,IAGJC,GAAa,IAAAC,UAAQ,IAAO,OAAD,wBAC5BN,GACAH,IACD,CAACG,EAAYH,IAIXU,EAAgBR,QAAAA,EAA0BR,EAyBhD,OAvBA,QAAa,MAAe,EAAGiB,cAC7BP,EAAc,CACZE,MAAOK,EAAQL,MACfC,OAAQI,EAAQJ,aAIpB,IAAAK,YAAU,MACR,UAEO,MACL,aAED,KAEH,IAAAA,YAAU,KAGJX,IACF,YAED,CAACA,KAGF,gBAAKF,UAAWA,EAAWC,MAAOQ,EAAU,UAC1C,SAACK,EAAA,EAAa,CAACC,mBAAmB,SAACJ,EAAa,IAAG,SAChDZ,KAIT,CCjFe,SAASiB,IACtB,OACE,SAAClB,EAAoB,WACnB,qBAASE,UAAU,qBAAoB,WACrC,oDACA,8PAMR,C","sources":["webpack://test-site/./node_modules/@openedx/frontend-base/runtime/slots/widget/iframe/IFrameContentWrapper.messages.tsx","webpack://test-site/./node_modules/@openedx/frontend-base/runtime/slots/widget/iframe/IFrameContentWrapper.tsx","webpack://test-site/./src/iframe-widget/IframeWidget.tsx"],"sourcesContent":["import { defineMessages } from '../../../i18n';\n\nconst messages = defineMessages({\n  loading: {\n    id: 'loading.message.text',\n    defaultMessage: 'Loading',\n    description: 'the feature is currently loading',\n  },\n  unexpectedError: {\n    id: 'unexpected.error.message.text',\n    defaultMessage: ' Oops! An error occurred. Please refresh the screen to try again.',\n    description: 'error message when an unexpected error occurs',\n  },\n});\n\nexport default messages;\n","import {\n  FunctionComponent,\n  ReactNode,\n  useEffect, useMemo, useState,\n} from 'react';\n\nimport { useIntl } from '../../../i18n';\nimport { ErrorBoundary } from '../../../react';\nimport { IFRAME_RESIZE } from './constants';\nimport {\n  dispatchMountedEvent,\n  dispatchReadyEvent,\n  dispatchUnmountedEvent,\n  useHostEvent\n} from './hooks';\nimport messages from './IFrameContentWrapper.messages';\n\nconst ErrorFallbackDefault = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      <h2>\n        {formatMessage(messages.unexpectedError)}\n      </h2>\n    </div>\n  );\n};\n\ninterface IFrameContentWrapperProps {\n  children: ReactNode,\n  className?: string,\n  style?: Record<string, string>,\n  ready?: boolean,\n  errorFallbackComponent?: FunctionComponent,\n}\n\nexport default function IFrameContentWrapper({\n  children, className, style = {}, ready = true, errorFallbackComponent,\n}: IFrameContentWrapperProps) {\n  const [dimensions, setDimensions] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const finalStyle = useMemo(() => ({\n    ...dimensions,\n    ...style,\n  }), [dimensions, style]);\n\n  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service\n\n  const ErrorFallback = errorFallbackComponent ?? ErrorFallbackDefault;\n\n  useHostEvent(IFRAME_RESIZE, ({ payload }) => {\n    setDimensions({\n      width: payload.width,\n      height: payload.height,\n    });\n  });\n\n  useEffect(() => {\n    dispatchMountedEvent();\n\n    return () => {\n      dispatchUnmountedEvent();\n    };\n  }, []);\n\n  useEffect(() => {\n    // Ready defaults to true, but can be used to defer rendering the Plugin until certain processes\n    // have occurred or conditions have been met\n    if (ready) {\n      dispatchReadyEvent();\n    }\n  }, [ready]);\n\n  return (\n    <div className={className} style={finalStyle}>\n      <ErrorBoundary fallbackComponent={<ErrorFallback />}>\n        {children}\n      </ErrorBoundary>\n    </div>\n  );\n};\n","import { IFrameContentWrapper } from '@openedx/frontend-base';\n\nexport default function IframeWidget() {\n  return (\n    <IFrameContentWrapper>\n      <section className=\"bg-light p-3 h-100\">\n        <h4>Inserted iFrame Widget</h4>\n        <p>\n          This is a component that lives in the test-site but is loaded into the page via an iframe.  This emulates a real-world scenario.  It is NOT testing for cross-origin security issues though, since it&apos;s on the same host name.\n        </p>\n      </section>\n    </IFrameContentWrapper>\n  );\n}\n"],"names":["loading","unexpectedError","ErrorFallbackDefault","formatMessage","useIntl","IFrameContentWrapper","children","className","style","ready","errorFallbackComponent","dimensions","setDimensions","useState","width","height","finalStyle","useMemo","ErrorFallback","payload","useEffect","ErrorBoundary","fallbackComponent","IframeWidget"],"sourceRoot":""}

package/test-site/dist/653.486966b108d224551296.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunktest_site=self.webpackChunktest_site||[]).push([[653],{8653:(e,s,t)=>{t.r(s),t.d(s,{default:()=>h});var a=t(7517),i=t(3273),n=t(5029),c=t(6024);function h(){const e=(0,n.QR)(),s=(0,n.zn)();return(0,a.jsxs)("main",{className:"p-3",children:[(0,a.jsxs)("h1",{children:[s.siteName," authenticated page."]}),(0,a.jsx)(c.A,{id:"authenticated.page.content",defaultMessage:"This is a localized message. Try it in French."}),(0,a.jsx)("p",{children:null===e?"You are not authenticated.":`Hi there, ${e.username}.`}),(0,a.jsxs)("p",{children:["Visit ",(0,a.jsx)(i.N_,{to:"/",children:"public page"}),"."]})]})}}}]);
-//# sourceMappingURL=653.486966b108d224551296.js.map

package/test-site/dist/653.486966b108d224551296.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"653.486966b108d224551296.js","mappings":"+KAKe,SAASA,IACtB,MAAMC,GAAoB,UACpBC,GAAS,UAEf,OACE,kBAAMC,UAAU,MAAK,WACnB,0BAAKD,EAAOE,SAAQ,2BACpB,SAAC,IAAgB,oGACjB,uBAA0B,OAAtBH,EAA6B,6BAA+B,aAAaA,EAAkBI,eAC/F,mCAAS,SAAC,KAAI,CAACC,GAAG,IAAG,yBAAmB,SAG9C,C","sources":["webpack://test-site/./src/authenticated-page/AuthenticatedPage.tsx"],"sourcesContent":["import { Link } from 'react-router-dom';\n\nimport { useAuthenticatedUser, useSiteConfig } from '@openedx/frontend-base';\nimport { FormattedMessage } from 'react-intl';\n\nexport default function AuthenticatedPage() {\n  const authenticatedUser = useAuthenticatedUser();\n  const config = useSiteConfig();\n\n  return (\n    <main className=\"p-3\">\n      <h1>{config.siteName} authenticated page.</h1>\n      <FormattedMessage id=\"authenticated.page.content\" defaultMessage=\"This is a localized message.  Try it in French.\" description=\"This is a test message to prove localization works.\" />\n      <p>{authenticatedUser === null ? 'You are not authenticated.' : `Hi there, ${authenticatedUser.username}.`}</p>\n      <p>Visit <Link to=\"/\">public page</Link>.</p>\n    </main>\n  );\n}\n"],"names":["AuthenticatedPage","authenticatedUser","config","className","siteName","username","to"],"sourceRoot":""}