Adds dynamic remotes example

hack/run.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+pnpm install
+pnpm build
+cd packages/examples/react-vite
+pnpm build
+pnpm serve

packages/examples/react-vite/README.md

@@ -4,9 +4,9 @@ This example demos consumption of federated modules from a vite bundle. `host` (
 
 ## Running
 
-First, run `pnpm install`, then `pnpm build` and `pnpm preview`. This will build and serve both `host` and `remote` on ports 5000, 5001 respectively.
+First, run `pnpm install`, then `pnpm build` and `pnpm preview`. This will build and serve both `host` and `remote` on ports 3000, 3001 respectively.
 
-- HOST: [localhost:5000](http://localhost:5000/)
-- REMOTE: [localhost:5001](http://localhost:5001/)
+- HOST: [localhost:3000](http://localhost:3000/)
+- REMOTE: [localhost:3001](http://localhost:3001/)
 
 `CTRL + C` can only stop the host server. You can run `pnpm stop` to stop all services.

packages/examples/react-vite/host/package.json

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5000 --strictPort",
+    "dev": "vite --port 3000 --strictPort",
     "build": "vite build",
-    "preview": "vite preview --port 5000 --strictPort",
-    "serve": "vite preview --port 5000 --strictPort"
+    "preview": "vite preview --port 3000 --strictPort",
+    "serve": "vite preview --port 3000 --strictPort"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -19,4 +19,4 @@
     "@vitejs/plugin-react": "^3.0.0",
     "vite": "^4.0.3"
   }
-}
+}

packages/examples/react-vite/host/src/App.jsx

@@ -1,8 +1,23 @@
+import React, { Suspense } from 'react'
+// FIXME: if you use an import() somewhere in this file
+// it will trigger an auto-injection of this import too
+// which will raise an error
+import {
+  __federation_method_setRemote,
+  __federation_method_getRemote
+} from '__federation__'
 import reactLogo from './assets/react.svg'
 import './App.css'
-import Button from 'remoteApp/Button';
 
 function App() {
+  const RemoteButton = React.lazy(() => {
+    __federation_method_setRemote('myRemote', {
+      url: 'http://localhost:3001/assets/remoteEntry.js',
+      format: 'esm'
+    })
+    return __federation_method_getRemote('myRemote', './Button')
+  })
+
   return (
     <div className="App">
       <div>
@@ -15,7 +30,9 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <Button />
+        <Suspense>
+          <RemoteButton />
+        </Suspense>
         <p>
           Edit <code>src/App.jsx</code> and save to test HMR
         </p>

packages/examples/react-vite/host/vite.config.js

@@ -9,7 +9,9 @@ export default defineConfig({
     federation({
       name: 'app',
       remotes: {
-        remoteApp: 'http://localhost:5001/assets/remoteEntry.js',
+        // FIXME: need a dummy import here or we get a:
+        // "ReferenceError: __rf_placeholder__shareScope is not defined"
+        dummyApp: 'dummy.js',
       },
       shared: ['react','react-dom']
     })

packages/examples/react-vite/package.json

@@ -1,22 +1,21 @@
 {
-    "name": "react-vite",
-    "private": true,
-    "version": "1.0.0",
-    "workspaces": [
-      "host",
-      "remote"
-    ],
-    "scripts": {
-      "build": "pnpm  --parallel --filter \"./**\" build",
-      "serve": "pnpm  --parallel --filter \"./**\" preview",
-      "build:remotes": "pnpm --parallel --filter \"./remote\" build",
-      "serve:remotes": "pnpm --parallel --filter \"./remote\" serve",
-      "dev:hosts": "pnpm --filter \"./host\" dev",
-      "stop": "kill-port --port 5000,5001"
-    },
-    "devDependencies": {
-      "kill-port": "^2.0.1",
-      "@originjs/vite-plugin-federation": "^1.1.10"
-    }
+  "name": "react-vite",
+  "private": true,
+  "version": "1.0.0",
+  "workspaces": [
+    "host",
+    "remote"
+  ],
+  "scripts": {
+    "build": "pnpm  --parallel --filter \"./**\" build",
+    "serve": "pnpm  --parallel --filter \"./**\" preview",
+    "build:remotes": "pnpm --parallel --filter \"./remote\" build",
+    "serve:remotes": "pnpm --parallel --filter \"./remote\" serve",
+    "dev:hosts": "pnpm --filter \"./host\" dev",
+    "stop": "kill-port --port 3000,3001"
+  },
+  "devDependencies": {
+    "kill-port": "^2.0.1",
+    "@originjs/vite-plugin-federation": "^1.1.10"
   }
-  
+}

packages/examples/react-vite/remote/package.json

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5001 --strictPort",
+    "dev": "vite --port 3001 --strictPort",
     "build": "vite build",
-    "preview": "vite preview --port 5001 --strictPort",
-    "serve": "vite preview --port 5001 --strictPort"
+    "preview": "vite preview --port 3001 --strictPort",
+    "serve": "vite preview --port 3001 --strictPort"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -19,4 +19,4 @@
     "@vitejs/plugin-react": "^3.0.0",
     "vite": "^4.0.3"
   }
-}
+}

packages/lib/src/dev/remote-development.ts

@@ -131,7 +131,12 @@ function __federation_method_wrapDefault(module ,need){
 function __federation_method_getRemote(remoteName,  componentName){
   return __federation_method_ensure(remoteName).then((remote) => remote.get(componentName).then(factory => factory()));
 }
-export {__federation_method_ensure, __federation_method_getRemote , __federation_method_unwrapDefault , __federation_method_wrapDefault}
+
+function __federation_method_setRemote(remoteName, remoteConfig) {
+  remotesMap[remoteName] = remoteConfig;
+}
+
+export {__federation_method_ensure, __federation_method_getRemote, __federation_method_setRemote, __federation_method_unwrapDefault , __federation_method_wrapDefault}
 ;`
     },
     config(config: UserConfig) {

packages/lib/src/prod/remote-production.ts

@@ -141,9 +141,14 @@ export function prodRemotePlugin(
                     return __federation_method_ensure(remoteName).then((remote) => remote.get(componentName).then(factory => factory()));
                 }
 
+                function __federation_method_setRemote(remoteName, remoteConfig) {
+                    remotesMap[remoteName] = remoteConfig;
+                }
+
                 export {
                     __federation_method_ensure,
                     __federation_method_getRemote,
+                    __federation_method_setRemote,
                     __federation_method_unwrapDefault,
                     __federation_method_wrapDefault
                 }