+ +### 3\. Creating a Plugin Component + +This is a React component that your `webpack.config.js` file exposes.
+This minimal example shows how to accept `props`, which can be passed from the [plugin configuration file](#plugin-configuration-file-reference "See the configuration file reference"). + +
+ +```typescript +// src/MyCustomComponent.tsx +import React from 'react'; + +// A simple component with inline prop types +const MyCustomComponent = ({ message }: { message?: string }) => { + return ( +
+ This is the plugin component.
+ {message &&
+ );
+};
+
+export default MyCustomComponent;
+```
+
+Message from props: {message}
} ++ +### 4\. Federation Configuration + +The core of the plugin is its Webpack configuration.
+All plugins should use this sample `webpack.config.js` as a base. + +
+ +```javascript +const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); +const { NativeFederationTypeScriptHost } = require('@module-federation/native-federation-typescript/webpack'); + +module.exports = (env, argv) => { + const dev = argv.mode !== 'production'; + + const moduleFederationConfig = { + name: 'my_plugin', // A unique name for your plugin + filename: 'remoteEntry.js', + exposes: { + // Maps a public name to a component file + './MyCustomComponent': './src/MyCustomComponent.tsx', + }, + remotes: { + // Allows importing from the host application. The URL is switched automatically. + impress: dev + ? 'impress@http://localhost:3000/_next/static/chunks/remoteEntry.js' // Development + : 'impress@/_next/static/chunks/remoteEntry.js', // Production + }, + shared: { + // Defines shared libraries to avoid duplication + react: { singleton: true }, + 'react-dom': { singleton: true }, + 'styled-components': { singleton: true }, + '@openfun/cunningham-react': { singleton: true }, + '@tanstack/react-query': { singleton: true }, + }, + }; + + return { + devServer: { + // The port should match the one in your plugin's configuration file + port: 8080, + }, + entry: './src/index.tsx', // Your plugin's entry point; can be an empty file as modules are exposed directly. + plugins: [ + new ModuleFederationPlugin(moduleFederationConfig), + // This plugin enables type-sharing for intellisense + ...(dev ? [NativeFederationTypeScriptHost({ moduleFederationConfig })] : []), + ], + // ... other webpack config (output, module rules, etc.) + }; +}; +``` + +> Don't change `remotes.impress` if you want your [released plugin](#releasing-a-plugin "Learn how to release a plugin") to be [deployable by others](#deploying-docs-with-plugins "Learn about deployment"). + +
+ +### 5\. Enabling Type-Sharing for Intellisense + +To get autocompletion for components and hooks exposed by the host,
+configure your plugin's `tsconfig.json` to find the host's types. + +
+ +In your plugin's `tsconfig.json`: + +```json +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "*": ["./@mf-types/*"] + } + } +} +``` + +
+ +When you run the host application with `NEXT_PUBLIC_DEVELOP_PLUGINS=true`, it generates a `@mf-types.zip` file.
+The `NativeFederationTypeScriptHost` plugin in your webpack config will automatically download and unpack it,
+making the host's types available to your plugin and IDE. + +
+ +### 6\. Running and Configuring Your Plugin + +With the host application already running (from step 1),
+you can now start your plugin's development server and configure the host to load it. + +
+ +1. **Start the plugin**:
+ In your plugin's project directory, run `yarn dev`. +2. **Configure the host**:
+ Tell the host to load your plugin by editing its configuration file.
+ When running Docs locally, this file is located at `src/backend/impress/configuration/plugins/default.json`.
+ Update it to point to your local plugin's `remoteEntry.js`. + +
+ +```json +{ + "id": "my-custom-component", + "remote": { + "url": "http://localhost:8080/remoteEntry.js", + "name": "my_plugin", + "module": "./MyCustomComponent" + }, + "injection": { + "target": "#some-element-in-the-host" + }, + "props": { + "message": "Hello from the configuration!" + } +} +``` + +
+ +After changing the `target` to a valid CSS selector in the host's DOM, save the file.
+The host application will automatically detect the change and inject your component, passing the `props` object along. + +Your component should appear in the running host application after a reload. + +
+ +## Host-Plugin Interaction + +### Host Exports + +The host automatically exposes many of its components and hooks.
+You can import them in the plugin as if they were local modules, thanks to the [`remotes` configuration](#4-federation-configuration "See the remotes config in Webpack") in the `webpack.config.js`. + +
+ +```typescript +// In the plugin's code +import { Icon } from 'impress/components'; +import { useAuthQuery } from 'impress/features/auth/api'; +``` + +
+ +### Choosing Shared Dependencies + +Sharing dependencies is critical for performance and stability. + +
+ + - **Minimal Shared Libraries**:
+ Always share **`react`**, **`react-dom`**, **`styled-components`**, and **`@openfun/cunningham-react`** to use the same instances as the host. + - **Sharing State**:
+ Libraries that rely on a global context (like `@tanstack/react-query`) **must** be shared to access the host's state and cache. + - **Discovering More Shared Libraries**: With `NEXT_PUBLIC_DEVELOP_PLUGINS=true`,
+ [the host prints its shared dependency map to the Next.js dev server logs on startup](#1-prepare-the-host-environment "See how to prepare the host").
+ You can use this to align versions and add more shared libraries to your plugin. + +
+ +> **Important**: Both the host and the plugin must declare a dependency in [`moduleFederationConfig.shared`](#4-federation-configuration "See the federation configuration") for it to become a true singleton.
+> If a shared dependency is omitted from the plugin's config, Webpack will bundle a separate copy, breaking the singleton pattern. + +
+ +## Development Workflow + +### Test and Debug + + - Use the `[PluginSystem]` logs in the browser console to see if the plugin is loading correctly. + - Errors in the plugin are caught by an `ErrorBoundary` and will not crash the host. + +
+ +Common Errors: +| Issue | Cause/Fix | +| :--- | :--- | +| Unreachable `remoteEntry.js` | Check the `url` in the [plugin configuration](#6-running-and-configuring-your-plugin "See how to configure the plugin"). | +| Library version conflicts | Ensure `shared` library versions in `package.json` match the [host's versions](#1-prepare-the-host-environment "See how to check host versions"). | +| Invalid CSS selectors | Validate the `target` selector against the host's DOM. | + +
+ +### Best Practices + + - Build modular components with well-typed props. + - Prefer using the host's exposed types and components over implementing new ones. + - Keep shared dependency versions aligned with the host
+ and re-test after host upgrades. + - Treat plugin bundles as untrusted: vet dependencies and avoid unsafe scripts. + +
+ +## Plugin Configuration File Reference + +This section provides a detailed reference for all fields in the plugin configuration JSON. +For deployment details, see [Deploying Docs with Plugins](#deploying-docs-with-plugins "Learn about production deployment"). + +
+ +### Configuration Structure + +| Field | Type | Required | Description | +| :--- | :--- | :--- | :--- | +| `id` | String | Yes | Unique component identifier (e.g., "my-widget"). | +| `remote` | Object | Yes | Remote module details. | +| - `url` | String | Yes | Path to `remoteEntry.js` (absolute/relative). | +| - `name` | String | Yes | Federation remote name (e.g., "myPlugin"). | +| - `module` | String | Yes | Exposed module (e.g., "./Widget"). | +| `injection`| Object | Yes | Integration control. | +| - `target` | String | Yes | CSS selector for insertion point. | +| - `position` | String | No (default: "append") | Insertion position (`before`, `after`, `replace`, `prepend`, `append`). See [examples](#injection-position-examples "See injection examples"). | +| - `observerRoots` | String/Boolean | No | DOM observation: CSS selector, `true` (observe whole document), or `false` (default; disable observers). | +| `props` | Object | No | Props passed to the [plugin component](#3-creating-a-plugin-component "See how to create a component with props"). | +| `visibility` | Object | No | Visibility controls. | +| - `routes` | Array | No | Path globs (e.g., `["/docs/*", "!/docs/secret*"]`); supports `*` and `?` wildcards plus negation (`!`). | + +
+ +### Injection Position Examples + +The `injection.position` property controls how the plugin is inserted relative to the `target` element. + +
+
+ +**before** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item2", + "position": "before" + } +} +``` + +```html +
+ +**after** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item1", + "position": "after" + } +} +``` + +```html +
+ +**prepend** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#some-element-in-the-host", + "position": "prepend" + } +} +``` + +```html +
+ +**append** (default) + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#some-element-in-the-host", + "position": "append" + } +} +``` + +```html +
+ +**replace** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item1", + "position": "replace" + } +} +``` + +```html +
+
+View injection examples
+ ++ +**before** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item2", + "position": "before" + } +} +``` + +```html +
-
+
+
+
+
+ +**after** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item1", + "position": "after" + } +} +``` + +```html +
-
+
+
+
+
+ +**prepend** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#some-element-in-the-host", + "position": "prepend" + } +} +``` + +```html +
-
+
+
+
+
+ +**append** (default) + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#some-element-in-the-host", + "position": "append" + } +} +``` + +```html +
-
+
+
+
+
+ +**replace** + +```json +{ + "id": "my-custom-component-0", + "injection": { + "target": "#item1", + "position": "replace" + } +} +``` + +```html +
-
+
+
+
+
+ +## Releasing a Plugin + +When you are ready to release your plugin, you need to create a production build. + +
+ +Run the build command in your plugin's directory:
+ +```bash +yarn build +``` + +This command bundles your code for production.
+Webpack will generate a **`dist`** folder (or similar) containing the **`remoteEntry.js`** file and other JavaScript chunks.
+The `remoteEntry.js` is the manifest that tells other applications what modules your plugin exposes.
+These are the files you will need for deployment. + +
+ +The [`webpack.config.js` provided](#4-federation-configuration "See the federation configuration") is already configured to switch the `remotes` URL to the correct production path automatically,
+so no code changes are needed before building. + +
+ +## Deploying Docs with Plugins + +To use plugins in a production environment, you need to deploy both the plugin assets and the configuration file.
+The recommended approach is to serve the plugin's static files from the same webserver that serves the host (docs frontend). + +
+ +1. **Deploy Plugin Assets**:
+ Copy the contents of your plugin's build output directory (e.g., `dist/`)
+ into the frontend container's `/usr/share/nginx/html/assets` directory at a chosen path.
+ E.g.: Placing assets in `/usr/share/nginx/html/assets/plugins/my-plugin/`
+ would make the plugin's **`remoteEntry.js`** available at `https://production.domain/assets/plugins/my-plugin/remoteEntry.js`. + +
+ +2. **Deploy Plugin Configuration**: The host's [plugin configuration file](#plugin-configuration-file-reference "See the configuration file reference") must be updated to point to the deployed assets.
+ This file is typically managed via infrastructure methods
+ (e.g., a Kubernetes configmap replacing `/app/impress/configuration/plugins/default.json` in the backend container). + +
+ +Update the **`remote.url`** to the public-facing path that matches where you deployed the assets: + +```json +{ + "id": "my-custom-component", + "remote": { + "url": "/assets/plugins/my-plugin/remoteEntry.js", + "name": "my_plugin", + "module": "./MyCustomComponent" + }, + "injection": { + "target": "#some-element-in-the-host" + }, + "props": { + "message": "Hello from production!" + } +} +``` \ No newline at end of file diff --git a/env.d/development/common b/env.d/development/common index a0cf0fe5c0..4839310989 100644 --- a/env.d/development/common +++ b/env.d/development/common @@ -66,3 +66,7 @@ COLLABORATION_WS_URL=ws://localhost:4444/collaboration/ws/ DJANGO_SERVER_TO_SERVER_API_TOKENS=server-api-token Y_PROVIDER_API_BASE_URL=http://y-provider-development:4444/api/ Y_PROVIDER_API_KEY=yprovider-api-key + +# Cache +PLUGINS_CONFIG_CACHE_TIMEOUT=0 +THEME_CUSTOMIZATION_CACHE_TIMEOUT=0 \ No newline at end of file diff --git a/src/backend/core/api/viewsets.py b/src/backend/core/api/viewsets.py index 1fb95c4eb6..dbb2b5c0be 100644 --- a/src/backend/core/api/viewsets.py +++ b/src/backend/core/api/viewsets.py @@ -2164,6 +2164,7 @@ def get(self, request): dict_settings[setting] = getattr(settings, setting) dict_settings["theme_customization"] = self._load_theme_customization() + dict_settings["plugins"] = self._load_plugins_config() return drf.response.Response(dict_settings) @@ -2201,3 +2202,44 @@ def _load_theme_customization(self): ) return theme_customization + + def _load_plugins_config(self): + if not settings.PLUGINS_CONFIG_FILE_PATH: + return [] + + cache_key = ( + f"plugins_config_{slugify(settings.PLUGINS_CONFIG_FILE_PATH)}" + ) + plugins_config = cache.get(cache_key) + if plugins_config is not None: + return plugins_config + + plugins_config = [] + try: + with open( + settings.PLUGINS_CONFIG_FILE_PATH, "r", encoding="utf-8" + ) as f: + data = json.load(f) + # Support both array format and object with "plugins" key + if isinstance(data, list): + plugins_config = data + elif isinstance(data, dict): + plugins_config = data.get("plugins", []) + except FileNotFoundError: + logger.error( + "Plugins configuration file not found: %s", + settings.PLUGINS_CONFIG_FILE_PATH, + ) + except json.JSONDecodeError: + logger.error( + "Plugins configuration file is not a valid JSON: %s", + settings.PLUGINS_CONFIG_FILE_PATH, + ) + else: + cache.set( + cache_key, + plugins_config, + settings.PLUGINS_CONFIG_CACHE_TIMEOUT, + ) + + return plugins_config diff --git a/src/backend/impress/configuration/plugins/default.json b/src/backend/impress/configuration/plugins/default.json new file mode 100644 index 0000000000..3627c8593a --- /dev/null +++ b/src/backend/impress/configuration/plugins/default.json @@ -0,0 +1,54 @@ +[ + { + "id": "my-custom-component-in-header", + "remote": { + "url": "http://localhost:3002/remoteEntry.js", + "name": "plugin_frontend", + "module": "MyCustomComponent" + }, + "injection": { + "target": "body header [data-testid=\"header-logo-link\"]", + "position": "after", + "observerRoots": "body header" + }, + "props": { + "customMessage": "Plugin Demo", + "showDebugInfo": true + }, + "visibility": { + "routes": [ + "/docs/*" + ] + } + }, + { + "id": "central-header-menu", + "remote": { + "url": "http://localhost:3002/remoteEntry.js", + "name": "plugin_frontend", + "module": "./MyCustomHeaderMenu" + }, + "injection": { + "target": "body header [data-testid=\"header-logo-link\"]", + "position": "after", + "observerRoots": "body header" + }, + "props": { + "icsBaseUrl": "http://localhost:8000", + "portalBaseUrl": "http://localhost:8001" + } + }, + { + "id": "theme-demo-panel", + "remote": { + "url": "http://localhost:3002/remoteEntry.js", + "name": "plugin_frontend", + "module": "./ThemingDemo" + }, + "injection": { + "target": "body", + "position": "append", + "observerRoots": false + } + } +] \ No newline at end of file diff --git a/src/backend/impress/settings.py b/src/backend/impress/settings.py index 151f2bfdaa..b438575a2f 100755 --- a/src/backend/impress/settings.py +++ b/src/backend/impress/settings.py @@ -496,6 +496,18 @@ class Base(Configuration): environ_prefix=None, ) + PLUGINS_CONFIG_FILE_PATH = values.Value( + os.path.join(BASE_DIR, "impress/configuration/plugins/default.json"), + environ_name="PLUGINS_CONFIG_FILE_PATH", + environ_prefix=None, + ) + + PLUGINS_CONFIG_CACHE_TIMEOUT = values.Value( + 60 * 60 * 2, + environ_name="PLUGINS_CONFIG_CACHE_TIMEOUT", + environ_prefix=None, + ) + # Posthog POSTHOG_KEY = values.DictValue( None, environ_name="POSTHOG_KEY", environ_prefix=None diff --git a/src/frontend/apps/impress-plugin/.gitignore b/src/frontend/apps/impress-plugin/.gitignore new file mode 100644 index 0000000000..1207decc84 --- /dev/null +++ b/src/frontend/apps/impress-plugin/.gitignore @@ -0,0 +1,2 @@ +@mf-types/ +node_modules/ \ No newline at end of file diff --git a/src/frontend/apps/impress-plugin/README.md b/src/frontend/apps/impress-plugin/README.md new file mode 100644 index 0000000000..0f4360cf6e --- /dev/null +++ b/src/frontend/apps/impress-plugin/README.md @@ -0,0 +1,14 @@ +# Impress Plugin + +Minimal Module Federation Plugin for Impress + +## Development + +```bash +yarn install +yarn dev +``` + +Server runs on http://localhost:3002 + +Remote entry point: http://localhost:3002/remoteEntry.js diff --git a/src/frontend/apps/impress-plugin/package.json b/src/frontend/apps/impress-plugin/package.json new file mode 100644 index 0000000000..5a3de8cef4 --- /dev/null +++ b/src/frontend/apps/impress-plugin/package.json @@ -0,0 +1,37 @@ +{ + "name": "app-impress-plugin", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "webpack serve --mode development", + "build": "webpack --mode production" + }, + "devDependencies": { + "@module-federation/native-federation-typescript": "0.6.2", + "@openfun/cunningham-react": "3.2.3", + "@types/react": "19.1.1", + "@types/react-dom": "19.1.1", + "css-loader": "^7.1.2", + "html-webpack-plugin": "^5.6.3", + "style-loader": "^4.0.0", + "ts-loader": "^9.5.1", + "typescript": "*", + "webpack": "^5.101.3", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^5.2.0" + }, + "dependencies": { + "react": "19.1.1", + "react-dom": "19.1.1", + "styled-components": "6.1.19", + "@openfun/cunningham-react": "3.2.3", + "react-i18next": "15.7.3", + "react-aria-components": "1.12.1", + "@gouvfr-lasuite/ui-kit": "0.16.1", + "yjs": "13.6.27", + "clsx": "2.1.1", + "cmdk": "1.1.1", + "react-intersection-observer": "9.16.0", + "@tanstack/react-query": "5.87.4" + } +} diff --git a/src/frontend/apps/impress-plugin/src/MyCustomComponent.tsx b/src/frontend/apps/impress-plugin/src/MyCustomComponent.tsx new file mode 100644 index 0000000000..cf8633046f --- /dev/null +++ b/src/frontend/apps/impress-plugin/src/MyCustomComponent.tsx @@ -0,0 +1,489 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { Button, Popover } from 'react-aria-components'; +import styled from 'styled-components'; +import { useTranslation } from 'react-i18next'; +import { useAuthQuery } from 'impress/features/auth/api'; +import { Icon, Loading, Box, Text } from 'impress/components'; + +// Styled Components showcasing styled-components integration +const StyledButton = styled(Button)` + cursor: pointer; + border: 1px solid #0066cc; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 8px 16px; + border-radius: 8px; + font-family: Marianne, Arial, serif; + font-weight: 500; + font-size: 0.875rem; + transition: all 0.2s ease-in-out; + display: flex; + align-items: center; + gap: 8px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); + } + + &:active { + transform: translateY(0); + } + + &:focus-visible { + outline: 2px solid #667eea; + outline-offset: 2px; + } +`; + +const StyledPopover = styled(Popover)` + background-color: white; + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); + border: 1px solid #e0e0e0; + min-width: 400px; + max-width: 500px; + max-height: 600px; + overflow: hidden; + display: flex; + flex-direction: column; +`; + +const TabContainer = styled.div` + display: flex; + border-bottom: 2px solid #f0f0f0; + background-color: #fafafa; +`; + +const Tab = styled.button<{ $active: boolean }>` + flex: 1; + padding: 12px 16px; + border: none; + background: ${props => props.$active ? 'white' : 'transparent'}; + color: ${props => props.$active ? '#667eea' : '#666'}; + font-weight: ${props => props.$active ? '600' : '400'}; + font-size: 0.875rem; + cursor: pointer; + border-bottom: 2px solid ${props => props.$active ? '#667eea' : 'transparent'}; + margin-bottom: -2px; + transition: all 0.2s ease-in-out; + + &:hover { + background-color: ${props => props.$active ? 'white' : '#f5f5f5'}; + color: ${props => props.$active ? '#667eea' : '#333'}; + } +`; + +const TabContent = styled.div` + padding: 20px; + overflow-y: auto; + max-height: 500px; +`; + +const InfoCard = styled.div` + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + border-radius: 8px; + padding: 16px; + margin-bottom: 12px; + border-left: 4px solid #667eea; +`; + +const InfoRow = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + + &:last-child { + border-bottom: none; + } +`; + +const Label = styled.span` + font-weight: 600; + color: #333; + font-size: 0.875rem; +`; + +const Value = styled.span` + color: #666; + font-size: 0.875rem; + font-family: 'Courier New', monospace; + background-color: rgba(0, 0, 0, 0.05); + padding: 2px 8px; + border-radius: 4px; +`; + +const FeatureList = styled.ul` + list-style: none; + padding: 0; + margin: 0; +`; + +const FeatureItem = styled.li` + display: flex; + align-items: center; + gap: 12px; + padding: 10px; + margin-bottom: 8px; + background-color: #f9f9f9; + border-radius: 6px; + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: #f0f0f0; + } +`; + +interface ComponentProps { + customMessage?: string; + showDebugInfo?: boolean; +} + +const MyCustomComponent: React.FC
+ {JSON.stringify(authData, null, 2)}
+
+ -
+
window.location.pathname- Get current path
+ window.addEventListener('popstate')- Detect route changes
+ - Plugin config
visibility.routes- Control when plugin appears
+
visibility.routes config option with
+ glob patterns (e.g., ["/docs/*", "!/docs/secret"]). The plugin system
+ automatically shows/hides your plugin based on the current route!
+ -
+ {category.entries.map((entry) => (
+
-
+ {
+ e.stopPropagation();
+ setIsOpen(false);
+ }}
+ target={entry.target}
+ className="menu-link"
+ role="menuitem"
+ >
+
+ {entry.display_name} + +
+ ))}
+
+
+
+ );
+};
+
+export default ThemingDemo;
diff --git a/src/frontend/apps/impress-plugin/src/index.tsx b/src/frontend/apps/impress-plugin/src/index.tsx
new file mode 100644
index 0000000000..b6d4b6dc76
--- /dev/null
+++ b/src/frontend/apps/impress-plugin/src/index.tsx
@@ -0,0 +1,2 @@
+// This file is just to satisfy webpack's entry point requirement
+// The actual component is exposed via Module Federation
\ No newline at end of file
diff --git a/src/frontend/apps/impress-plugin/tsconfig.json b/src/frontend/apps/impress-plugin/tsconfig.json
new file mode 100644
index 0000000000..577fd83d47
--- /dev/null
+++ b/src/frontend/apps/impress-plugin/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM"],
+ "jsx": "react-jsx",
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "outDir": "./dist",
+ "baseUrl": ".",
+ "paths": {
+ "*": ["./@mf-types/*"],
+ }
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/src/frontend/apps/impress-plugin/webpack.config.js b/src/frontend/apps/impress-plugin/webpack.config.js
new file mode 100644
index 0000000000..bed2b6563f
--- /dev/null
+++ b/src/frontend/apps/impress-plugin/webpack.config.js
@@ -0,0 +1,80 @@
+const path = require('path');
+const { NativeFederationTypeScriptHost } = require('@module-federation/native-federation-typescript/webpack');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+
+const moduleFederationConfig = {
+ name: 'plugin_frontend',
+ filename: 'remoteEntry.js',
+ exposes: {
+ './MyCustomComponent': './src/MyCustomComponent.tsx',
+ './MyCustomHeaderMenu': './src/MyCustomHeaderMenu.tsx',
+ './ThemingComponent': './src/ThemingComponent.tsx',
+ './ThemingDemo': './src/ThemingDemo.tsx',
+ },
+ remotes: {
+ impress: 'impress@http://localhost:3000/_next/static/chunks/remoteEntry.js',
+ },
+ shared: {
+ react: { singleton: true },
+ 'react-dom': { singleton: true },
+ 'styled-components': { singleton: true },
+ 'react-aria-components': { singleton: true },
+ '@openfun/cunningham-react': { singleton: true },
+ 'react-i18next': { singleton: true },
+ 'yjs': { singleton: true },
+ '@gouvfr-lasuite/ui-kit': { singleton: true },
+ 'clsx': { singleton: true },
+ 'cmdk': { singleton: true },
+ 'react-intersection-observer': { singleton: true },
+ '@tanstack/react-query': { singleton: true },
+ 'zustand': { singleton: true },
+ },
+};
+
+module.exports = (env, argv) => {
+ const dev = argv.mode !== 'production';
+
+ return {
+ entry: './src/index.tsx',
+ mode: dev ? 'development' : 'production',
+ devServer: dev ? {
+ port: 3002,
+ hot: true,
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+ 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+ },
+ } : undefined,
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ publicPath: dev ? 'http://localhost:3002/' : undefined,
+ },
+ resolve: {
+ extensions: ['.tsx', '.ts', '.js', '.jsx'],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader'],
+ },
+ ],
+ },
+ plugins: [
+ new ModuleFederationPlugin(moduleFederationConfig),
+ ...(dev
+ ? [
+ NativeFederationTypeScriptHost({
+ moduleFederationConfig,
+ }),
+ ]
+ : []),
+ ],
+ };
+};
diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env
index bcf7592f3f..eab3683874 100644
--- a/src/frontend/apps/impress/.env
+++ b/src/frontend/apps/impress/.env
@@ -1,3 +1,3 @@
-NEXT_PUBLIC_API_ORIGIN=
-NEXT_PUBLIC_SW_DEACTIVATED=
-NEXT_PUBLIC_PUBLISH_AS_MIT=true
+NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
+NEXT_PUBLIC_SW_DEACTIVATED=false
+NEXT_PUBLIC_PUBLISH_AS_MIT=false
diff --git a/src/frontend/apps/impress/.env.development b/src/frontend/apps/impress/.env.development
index 248c726545..2de6c5b581 100644
--- a/src/frontend/apps/impress/.env.development
+++ b/src/frontend/apps/impress/.env.development
@@ -1,3 +1,5 @@
NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
NEXT_PUBLIC_PUBLISH_AS_MIT=false
NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_DEVELOP_PLUGINS=false
+
diff --git a/src/frontend/apps/impress/mf.config.js b/src/frontend/apps/impress/mf.config.js
new file mode 100644
index 0000000000..fe0837cb33
--- /dev/null
+++ b/src/frontend/apps/impress/mf.config.js
@@ -0,0 +1,305 @@
+const path = require('path');
+
+const ts = require('typescript');
+
+/**
+ * @file This file configures Module Federation for the 'impress' application.
+ * It automatically exposes components and shares dependencies.
+ */
+
+/**
+ * Extracts the root name of a package from an import specifier.
+ * e.g., '@scope/name/foo' becomes '@scope/name', and 'next/link' becomes 'next'.
+ * @param {string} spec - The import specifier.
+ * @returns {string} The root package name.
+ */
+function pkgRootName(spec) {
+ // '@scope/name/foo' -> '@scope/name', 'next/link' -> 'next'
+ if (spec.startsWith('@')) {
+ const [scope, name] = spec.split('/');
+ return `${scope}/${name || ''}`;
+ }
+ return spec.split('/')[0];
+}
+
+/**
+ * Checks if an import specifier is a relative path or a path alias.
+ * @param {string} spec - The import specifier.
+ * @returns {boolean} True if the path is relative or an alias.
+ */
+function isRelativeOrAlias(spec) {
+ return spec.startsWith('.') || spec.startsWith('/') || spec.startsWith('@/');
+}
+
+/**
+ * Builds the key for the 'exposes' object from an absolute file path.
+ * This creates a public path like './components/Button' from a file path.
+ * @param {string} absPath - The absolute path to the file.
+ * @param {string} root - The project root directory.
+ * @returns {string} The key for the 'exposes' object.
+ */
+function buildExposeKey(absPath, root) {
+ const relPath = path.relative(root, absPath).replace(/\\/g, '/'); // Convert backslashes to forward slashes
+
+ // Remove 'src/' prefix to create cleaner public paths
+ const pathWithoutSrc = relPath.startsWith('src/')
+ ? relPath.substring(4)
+ : relPath;
+
+ const relNoExt = pathWithoutSrc.replace(/\.(t|j)sx?$/, ''); // Remove file extension
+ // Remove '/index' from the end of the path to allow importing the directory
+ const withoutIndex = relNoExt.replace(/\/index$/, '');
+ return './' + withoutIndex;
+}
+
+/**
+ * Scans specified folders for TypeScript/JavaScript files to expose via Module Federation.
+ * It uses the TypeScript compiler API to find all files with actual runtime exports.
+ * @param {string[]} folders - An array of folder paths to scan.
+ * @returns {{exposes: Record+ 🎨 Theme Override Demo +
+ +
+
+
+
+
+
+ setPrimaryColor(e.target.value)}
+ disabled={!enabled}
+ style={{
+ width: '100%',
+ height: '36px',
+ border: '1px solid var(--c--theme--colors--greyscale-300)',
+ borderRadius: '6px',
+ cursor: enabled ? 'pointer' : 'not-allowed',
+ }}
+ />
+
+ {primaryColor}
+
+
+
+
+
+ setSecondaryColor(e.target.value)}
+ disabled={!enabled}
+ style={{
+ width: '100%',
+ height: '36px',
+ border: '1px solid var(--c--theme--colors--greyscale-300)',
+ borderRadius: '6px',
+ cursor: enabled ? 'pointer' : 'not-allowed',
+ }}
+ />
+
+ {secondaryColor}
+
+
+
+
+ Preview: Gradient with current colors
+
+
+
+ 💡 This demo overrides primary-500, primary-600, and secondary-500 tokens.
+ Any component using these tokens will update!
+
+