diff --git a/.eslintrc.js b/.eslintrc.js
index 237b4781c..1895af582 100755
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,8 +1,22 @@
+const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies
const { getBaseConfig } = require('@openedx/frontend-build');
const config = getBaseConfig('eslint');
+config.settings = {
+ 'import/resolver': {
+ webpack: {
+ config: path.resolve(__dirname, 'webpack.dev.config.js'),
+ },
+ alias: {
+ map: [
+ ['@communications-app', '.'],
+ ],
+ extensions: ['.ts', '.js', '.jsx', '.json'],
+ },
+ },
+};
config.rules = {
'import/no-extraneous-dependencies': ['error', {
devDependencies: [
@@ -12,11 +26,12 @@ config.rules = {
'example/*',
],
}],
+ 'import/prefer-default-export': 'off',
'import/extensions': ['error', {
- ignore: ['@edx/frontend-platform*'],
+ ignore: ['@edx/frontend-platform*', '@openedx/frontend-build*'],
}],
'import/no-unresolved': ['error', {
- ignore: ['@edx/frontend-platform*'],
+ ignore: ['@edx/frontend-platform*', '@openedx/frontend-build*'],
}],
'jsx-a11y/anchor-is-valid': ['error', {
components: ['Link'],
@@ -25,4 +40,13 @@ config.rules = {
}],
};
+config.overrides = [
+ {
+ files: ['plugins/**/*.jsx'],
+ rules: {
+ 'import/no-extraneous-dependencies': 'off',
+ },
+ },
+];
+
module.exports = config;
diff --git a/example/ExamplePage.jsx b/example/ExamplePage.jsx
index 1b513ded3..d588a1852 100644
--- a/example/ExamplePage.jsx
+++ b/example/ExamplePage.jsx
@@ -5,6 +5,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { logInfo } from '@edx/frontend-platform/logging';
import { AppContext } from '@edx/frontend-platform/react';
import { ensureConfig, mergeConfig, getConfig } from '@edx/frontend-platform';
+import PluggableComponent from '@root_path/src/react/PluggableComponent';
import messages from './messages';
mergeConfig({
@@ -49,6 +50,11 @@ class ExamplePage extends Component {
JS_FILE_VAR var came through: {getConfig().JS_FILE_VAR}
Visit
Visit
+
+ {title}
+
+ );
+}
+
+TestComponent.defaultProps = {
+ handleClick: () => {},
+};
+
+TestComponent.propTypes = {
+ handleClick: PropTypes.func,
+ title: PropTypes.string.isRequired,
+};
+
+export default TestComponent;
diff --git a/plugins/any-mfe-plugins/TestComponent/package.json b/plugins/any-mfe-plugins/TestComponent/package.json
new file mode 100644
index 000000000..1036d52e5
--- /dev/null
+++ b/plugins/any-mfe-plugins/TestComponent/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "@openedx-plugins/any-mfe-plugins-test",
+ "version": "1.0.0",
+ "description": "edx input form to use it in this mfe",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "peerDependencies": {
+ "prop-types": "*",
+ "react": "*"
+ }
+}
diff --git a/src/react/PluggableComponent/MultiplePlugins.jsx b/src/react/PluggableComponent/MultiplePlugins.jsx
new file mode 100644
index 000000000..6f7bc2365
--- /dev/null
+++ b/src/react/PluggableComponent/MultiplePlugins.jsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect, useRef } from 'react';
+import loadable from '@loadable/component';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PropTypes from 'prop-types';
+
+import { isPluginAvailable, getPluginsByPrefix } from './utils';
+
+function MultiplePlugins({
+ plugins,
+ pluggableComponentProps,
+ prefix,
+ loadingComponent,
+ containerPluginsProps,
+}) {
+ const [pluginComponents, setPluginComponents] = useState({});
+ const loadedAllPluginsRef = useRef(null);
+
+ useEffect(() => {
+ const loadPlugins = (pluginsList) => {
+ pluginsList.forEach((plugin, index) => {
+ // Initially set the loading component for each plugin
+ setPluginComponents(previousPluginComponents => ({
+ ...previousPluginComponents,
+ [plugin.id]: loadingComponent || null,
+ }));
+
+ const loadPlugin = async () => {
+ try {
+ const hasModuleInstalled = await isPluginAvailable(plugin.name);
+ if (hasModuleInstalled) {
+ const PluginComponent = loadable(() => import(`@node_modules/@openedx-plugins/${plugin.name}`));
+ setPluginComponents(previousPluginComponents => ({
+ ...previousPluginComponents,
+ [plugin.id]: (
+
+ {Object.entries(pluginComponents).map(([pluginKey, Component]) => (
+
+ {Component}
+
+ ))}
+
+ );
+}
+
+MultiplePlugins.defaultProps = {
+ plugins: [],
+ pluggableComponentProps: {},
+ prefix: '',
+ loadingComponent: null,
+ containerPluginsProps: {},
+};
+
+MultiplePlugins.propTypes = {
+ plugins: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ })),
+ pluggableComponentProps: PropTypes.shape({}),
+ prefix: PropTypes.string,
+ loadingComponent: PropTypes.node,
+ containerPluginsProps: PropTypes.shape({}),
+};
+
+export default MultiplePlugins;
diff --git a/src/react/PluggableComponent/MultiplePlugins.test.jsx b/src/react/PluggableComponent/MultiplePlugins.test.jsx
new file mode 100644
index 000000000..f3526d366
--- /dev/null
+++ b/src/react/PluggableComponent/MultiplePlugins.test.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import MultiplePlugins from './MultiplePlugins';
+
+describe('MultiplePlugins', () => {
+ const mockPlugins = [
+ { id: 'plugin1', name: 'Plugin1' },
+ { id: 'plugin2', name: 'Plugin2' },
+ ];
+
+ beforeEach(() => {
+ jest.resetModules();
+ jest.clearAllMocks();
+ });
+
+ /* eslint-disable react/prop-types */
+ test('initializes with loading components for each plugin', async () => {
+ const { getAllByText } = render(
+ Loading...}
+ />,
+ );
+
+ const [pluginLoading1, pluginLoading2] = getAllByText('Loading...');
+
+ expect(pluginLoading1).toBeInTheDocument();
+ expect(pluginLoading1).toHaveTextContent('Loading...');
+ expect(pluginLoading2).toBeInTheDocument();
+ expect(pluginLoading2).toHaveTextContent('Loading...');
+ });
+
+ test('loads a plugins list successfully', async () => {
+ const mockValidPlugins = [
+ { id: 'plugin1', name: 'any-mfe-plugins-test' },
+ ];
+
+ function MockPluginComponent() {
+ return Mocked Plugin Component
;
+ }
+
+ jest.mock(
+ '@node_modules/@openedx-plugins/any-mfe-plugins-test',
+ () => MockPluginComponent,
+ );
+
+ const { getByTestId } = render(
+ Mocked Plugin Component
;
+ }
+
+ jest.mock(
+ '@node_modules/@openedx-plugins/any-mfe-plugins-test',
+ () => MockPluginComponent,
+ );
+
+ const { getByTestId } = render(
+ {props.title}
;
+ }
+
+ jest.mock(
+ '@node_modules/@openedx-plugins/any-mfe-plugins-test',
+ () => MockPluginComponent,
+ );
+
+ const { getByTestId, rerender } = render(
+
+
+ button title
+
+
+`;
diff --git a/src/react/PluggableComponent/index.jsx b/src/react/PluggableComponent/index.jsx
new file mode 100644
index 000000000..6bb8ce925
--- /dev/null
+++ b/src/react/PluggableComponent/index.jsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect, useRef } from 'react';
+import loadable from '@loadable/component';
+import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { isPluginAvailable } from './utils';
+import MultiplePlugins from './MultiplePlugins';
+
+/**
+ * PluggableComponent - A component that allows dynamic loading and replacement of child components.
+ *
+ * @param {object} props - Component props
+ * @param {React.ReactNode} props.children - Child elements to be passed to the plugin component
+ * @param {React.ReactNode} props.loadingComponent - Component to be rendered while the plugin is loading
+ * @param {string} props.as - String indicating the module to import dynamically
+ * @param {string} props.id - Identifier for the plugin
+ * @param {object} props.pluggableComponentProps - Additional props to be passed to the dynamically loaded component
+ * @param {string} props.pluginsPrefix - Prefix used to identify plugins. This is used without the 'plugins' prop.
+ * @param {Array} props.plugins -
+ * An array of plugin configurations.
+ * Each configuration is an object that may include plugin-specific properties.
+ * @param {object} props.containerPluginsProps -
+ * Props to be spread on the container that wraps multiple plugin components.
+ * Useful for passing classNames or styles for layout.
+ * @returns {React.ReactNode} - Rendered component
+ */
+function PluggableComponent({
+ children,
+ loadingComponent,
+ as,
+ id,
+ pluginsPrefix,
+ plugins,
+ containerPluginsProps,
+ ...pluggableComponentProps
+}) {
+ const [newComponent, setNewComponent] = useState(children || null);
+ const loadedComponentRef = useRef(null);
+ const [isLoadingComponent, setIsLoadingComponent] = useState(false);
+ const hasConfigForMultiplePlugins = pluginsPrefix || plugins.length;
+
+ useEffect(() => {
+ const loadPluginComponent = async () => {
+ setIsLoadingComponent(true);
+
+ try {
+ const hasModuleInstalled = await isPluginAvailable(as);
+
+ if (hasModuleInstalled) {
+ const PluginComponent = loadable(() => import(`@node_modules/@openedx-plugins/${as}`));
+
+ const component = children ? (
+
+ {children}
+
+ ) : (
+
+
setShowContent((prev) => !prev)}>
+ Toggle Content
+
+ {showContent &&
Toggle On
}
+
+ Hi this is the original component
+ ,
+ );
+
+ await waitFor(() => {
+ const buttonComponent = screen.getByTestId('button-test');
+ expect(buttonComponent).toBeInTheDocument();
+ expect(screen.getByText(props.title)).toBeInTheDocument();
+ fireEvent.click(buttonComponent);
+ expect(handleClickMock).toHaveBeenCalled();
+ expect(container).toMatchSnapshot();
+ });
+ });
+
+ test('loads children component when import is invalid', async () => {
+ render(
+
+ Plugin Loaded
+ ,
+ );
+
+ await waitFor(() => {
+ const defaultComponent = screen.getByTestId('plugin');
+ expect(screen.getByText('Plugin Loaded')).toBeInTheDocument();
+ expect(defaultComponent).toBeInTheDocument();
+ });
+ });
+
+ test('loads children component when import is empty', async () => {
+ render(
+
+ Plugin Loaded
+ ,
+ );
+
+ await waitFor(() => {
+ const defaultComponent = screen.getByTestId('plugin');
+ expect(screen.getByText('Plugin Loaded')).toBeInTheDocument();
+ expect(defaultComponent).toBeInTheDocument();
+ });
+ });
+
+ test('returns null when do not have children and import is invalid', async () => {
+ render(
+
+ ,
+ );
+
+ await waitFor(() => {
+ const toggleContent = screen.queryByTestId('toggle-content');
+ expect(toggleContent).not.toBeInTheDocument();
+ });
+
+ const toggleButton = getByText('Toggle Content');
+ fireEvent.click(toggleButton);
+
+ await waitFor(() => {
+ const toggleContent = getByTestId('toggle-content');
+ expect(toggleContent).toBeInTheDocument();
+ expect(toggleContent).toHaveTextContent('Toggle On');
+ });
+ });
+
+ test('renders loadingComponent while the plugin is loading', async () => {
+ jest.mock('./utils', () => ({
+ isPluginAvailable: jest.fn().mockImplementation(
+ () => new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(true);
+ }, 1000);
+ }),
+ ),
+ }));
+
+ await waitFor(() => {
+ const { getByText } = render(
+ Loading...}
+ />,
+ );
+ expect(getByText('Loading...')).toBeInTheDocument();
+ });
+ });
+
+ test('renders multiple plugins', async () => {
+ function MockPluginComponent() {
+ return Mocked Plugin Component
;
+ }
+
+ // Mock the dynamic import to resolve with the MockPluginComponent
+ jest.mock('@node_modules/@openedx-plugins/any-mfe-plugins-test', () => MockPluginComponent, { virtual: true });
+
+ const { getByTestId } = render(
+ Mocked Plugin Component
;
+ }
+
+ // Mock the dynamic import to resolve with the MockPluginComponent
+ jest.mock('@node_modules/@openedx-plugins/any-mfe-plugins-test', () => MockPluginComponent, { virtual: true });
+
+ const { getByTestId } = render(
+ } A promise that resolves to `true` if the plugin is available, otherwise `false`.
+ */
+export const isPluginAvailable = async (pluginName) => {
+ if (!pluginName) { return false; }
+
+ try {
+ await import(`@node_modules/@openedx-plugins/${pluginName}`);
+ return true;
+ } catch {
+ return false;
+ }
+};
+
+/**
+ * Retrieves a list of plugins that match a given prefix from the project's dependencies.
+ *
+ * This function filters the project's dependencies listed in the `package.json` file,
+ * looking for ones that match a specified prefix. The prefix is used to identify related
+ * plugins within the `@openedx-plugins` namespace. Each matching plugin's name is then
+ * formatted and returned as part of an array of plugin objects, each containing the
+ * plugin's `id` and `name`.
+ *
+ * @param {string} prefix - The prefix to filter plugins by.
+ * @returns {Array} An array of objects, each representing a plugin. Each object
+ * contains the `id` and `name` of the plugin.
+ */
+export const getPluginsByPrefix = (prefix) => {
+ const dependenciesKeys = Object.keys(packageJson.dependencies);
+ return dependenciesKeys.reduce(
+ (pluginsFiltered, pluginName) => {
+ if (pluginName.startsWith(`@openedx-plugins/${prefix}`)) {
+ const pluginFormatted = pluginName.split('/')[1];
+ const pluginData = {
+ id: pluginFormatted,
+ name: pluginFormatted,
+ };
+ return [...pluginsFiltered, pluginData];
+ }
+ return pluginsFiltered;
+ },
+ [],
+ );
+};
diff --git a/src/react/PluggableComponent/utils.test.js b/src/react/PluggableComponent/utils.test.js
new file mode 100644
index 000000000..17151c922
--- /dev/null
+++ b/src/react/PluggableComponent/utils.test.js
@@ -0,0 +1,52 @@
+import { isPluginAvailable, getPluginsByPrefix } from './utils';
+
+jest.mock('@root_path/package.json', () => ({
+ dependencies: {
+ '@openedx-plugins/plugin-a': '1.0.0',
+ '@openedx-plugins/prefix-plugin-b': '1.2.3',
+ 'some-other-dependency': '2.3.4',
+ '@openedx-plugins/prefix-plugin-c': '3.4.5',
+ '@another-prefix/plugin-d': '4.5.6',
+ },
+}));
+
+describe('Utils', () => {
+ describe('isPluginAvailable util', () => {
+ test('returns true if a plugin is installed', async () => {
+ const checkBoxPlugin = await isPluginAvailable('any-mfe-plugins-test');
+ expect(checkBoxPlugin).toBe(true);
+ });
+
+ test('returns false if a plugin is not installed', async () => {
+ const nonexistentPlugin = await isPluginAvailable('nonexistentPlugin');
+ expect(nonexistentPlugin).toBe(false);
+ });
+
+ test('returns false if an empty string is provided as plugin name', async () => {
+ const emptyPlugin = await isPluginAvailable('');
+ expect(emptyPlugin).toBe(false);
+ });
+
+ test('returns false if null is provided as plugin name', async () => {
+ const nullPLugin = await isPluginAvailable(null);
+ expect(nullPLugin).toBe(false);
+ });
+ });
+
+ describe('getPluginsByPrefix', () => {
+ test('should return an array of plugin names filtered by the given prefix', () => {
+ const plugins = getPluginsByPrefix('prefix');
+ const mockExpectedResult = [
+ { id: 'prefix-plugin-b', name: 'prefix-plugin-b' },
+ { id: 'prefix-plugin-c', name: 'prefix-plugin-c' },
+ ];
+ expect(plugins).toEqual(mockExpectedResult);
+ });
+
+ test('should return an empty array if no plugins match the given prefix', () => {
+ const plugins = getPluginsByPrefix('nonexistent');
+ expect(plugins).toHaveLength(0);
+ expect(plugins).toEqual([]);
+ });
+ });
+});
diff --git a/src/react/utils/contextFactory/index.js b/src/react/utils/contextFactory/index.js
new file mode 100644
index 000000000..44aa088e5
--- /dev/null
+++ b/src/react/utils/contextFactory/index.js
@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import withProvider from './withProvider';
+
+export default (reducer, initialState) => {
+ const StateContext = createContext({ ...initialState });
+ const DispatchContext = createContext(() => {});
+
+ const useSelector = (selector) => {
+ const state = useContext(StateContext);
+ return selector(state);
+ };
+
+ const useDispatch = () => {
+ const dispatch = useContext(DispatchContext);
+ return dispatch;
+ };
+
+ const withContextProvider = withProvider({
+ stateContext: StateContext,
+ dispatchContext: DispatchContext,
+ reducer,
+ initialState,
+ });
+
+ return {
+ withContextProvider, useSelector, useDispatch, StateContext, DispatchContext,
+ };
+};
diff --git a/src/react/utils/contextFactory/index.test.js b/src/react/utils/contextFactory/index.test.js
new file mode 100644
index 000000000..0666a6d59
--- /dev/null
+++ b/src/react/utils/contextFactory/index.test.js
@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import contextFactory from '.';
+
+const INITIAL_STATE = { foo: { bar: 2 } };
+const reducer = jest.fn(() => INITIAL_STATE);
+
+test('useSelector returns the state', () => {
+ const { useSelector } = contextFactory(reducer, INITIAL_STATE);
+
+ const { result } = renderHook(() => useSelector((state) => state));
+ expect(result.current).toEqual(INITIAL_STATE);
+});
diff --git a/src/react/utils/contextFactory/withProvider.jsx b/src/react/utils/contextFactory/withProvider.jsx
new file mode 100644
index 000000000..5df3142ff
--- /dev/null
+++ b/src/react/utils/contextFactory/withProvider.jsx
@@ -0,0 +1,23 @@
+import { useReducer } from 'react';
+
+const withProvider = ({
+ stateContext: StateContext,
+ dispatchContext: DispatchContext,
+ reducer,
+ initialState,
+}) => (WrappedComponent) => {
+ function ProviderWrapper(props) {
+ const [state, dispatch] = useReducer(reducer, initialState);
+ return (
+
+
+
+
+ );
+ }
+
+ return ProviderWrapper;
+};
+
+export default withProvider;