+ {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 00000000..b6d4b6dc
--- /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 00000000..577fd83d
--- /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 00000000..bed2b656
--- /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 bcf7592f..eab36838 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 248c7265..2de6c5b5 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 00000000..fe0837cb
--- /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!
+
+