Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React dynamic remotes + bug case / Help needed #450

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

React dynamic remotes + bug case / Help needed #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6aa25ca
Add new example
xepozz Jul 3, 2023
52c01ad
Try another way to load deps
xepozz Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/examples/react-vite-dynamic/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# React - Vite Federation Demo

This example demos consumption of federated modules from a vite bundle. `host` (react based) depends on a component exposed by `remote` app (react based).

## Running

Install `pnpm` as per instructions provided [here](https://pnpm.io/installation)

Run `pnpm install`, then `pnpm run build` and `pnpm run serve`. This will build and serve both `host` and `remote` on ports 5000, 5001 respectively.

- HOST: [localhost:5000](http://localhost:5000/)
- REMOTE: [localhost:5001](http://localhost:5001/)

`CTRL + C` can only stop the host server. You can run `pnpm stop` to stop all services.
22 changes: 22 additions & 0 deletions packages/examples/react-vite-dynamic/__tests__/react-vite.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { browserLogs, page } from '~utils'
import { expect, test } from 'vitest'

test('should have no 404s', () => {
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('404')
})
})

test('remote button', async () => {
expect(
await page.textContent('#click-btn')
).toBe('Click me: 0')
})

test('click event', async () => {
await page.click('#click-btn');
expect(
await page.textContent('#click-btn')
).toBe('Click me: 1')
})

13 changes: 13 additions & 0 deletions packages/examples/react-vite-dynamic/host/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions packages/examples/react-vite-dynamic/host/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "@react-vite-dynamic/app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --port 5000 --strictPort",
"build": "vite build",
"preview": "vite preview --port 5000 --strictPort",
"serve": "vite preview --port 5000 --strictPort"
},
"dependencies": {
"@originjs/vite-plugin-federation": "^1.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^3.0.0",
"vite": "^4.3.2"
}
}
1 change: 1 addition & 0 deletions packages/examples/react-vite-dynamic/host/public/vite.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions packages/examples/react-vite-dynamic/host/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
30 changes: 30 additions & 0 deletions packages/examples/react-vite-dynamic/host/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import reactLogo from './assets/react.svg'
import './App.css'
import {RemoteButton} from "./RemoteComponent.jsx";

function App() {
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<RemoteButton />
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
)
}

export default App
74 changes: 74 additions & 0 deletions packages/examples/react-vite-dynamic/host/src/RemoteComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import {lazy, Suspense} from "react";
import {ErrorBoundary} from "react-error-boundary";

const remotesMap = {};
// const __vite__import = name => import(/* @vite-ignore */name);

const shareScope = {
// 'react': {
// 'default': {
// get: () => __vite__import('http://localhost:5001/assets/__federation_shared_react.js'),
// loaded: 1
// }
// },
// 'react-dom': {
// 'default': {
// get: () => __vite__import('http://localhost:5001/assets/__federation_shared_react-dom.js'),
// loaded: 1
// }
// },
};

if (!globalThis.__federation_shared__){
globalThis.__federation_shared__=shareScope
}
var __federation__ = {
ensure: async (remoteId) => {
const remote = remotesMap[remoteId];
if (remote.inited) {
return remote.lib;
}
return new Promise((resolve) => {
// debugger;
import(/* @vite-ignore */ remote.url).then((lib) => {
debugger;
console.log('lib', lib);
if (!remote.inited) {
lib.init(globalThis.__federation_shared__);
remote.lib = lib;
remote.inited = true;
}
resolve(remote.lib);
});
});
},
};
const loadComponent = (url, scope, module) => async () => {
remotesMap[scope] = {
url: url,
};

return __federation__.ensure(scope).then((remote) => remote.get(module).then((factory) => factory()));
};

const ModuleLoader = ({module, props, scope, url}) => {
if (!module) {
return <Alert severity="error">Module name cannot be empty</Alert>;
}

const Component = lazy(loadComponent(url, scope, module));

return (
<Suspense fallback={<>Loading...</>}>
<Component {...props} />
</Suspense>
);
};

export const RemoteButton = () => {
const url = 'http://localhost:5001/assets/remoteEntry.js'

return <ErrorBoundary fallback={<>Failed to load remote component...</>}>
<ModuleLoader module={'./Button'} scope={'remote_app'} url={url}/>
</ErrorBoundary>
}
1 change: 1 addition & 0 deletions packages/examples/react-vite-dynamic/host/src/assets/react.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions packages/examples/react-vite-dynamic/host/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
10 changes: 10 additions & 0 deletions packages/examples/react-vite-dynamic/host/src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
21 changes: 21 additions & 0 deletions packages/examples/react-vite-dynamic/host/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
federation({
name: 'app',
remotes: {},
shared: ['react','react-dom']
})
],
build: {
modulePreload: false,
target: 'esnext',
minify: false,
cssCodeSplit: false
}
})
20 changes: 20 additions & 0 deletions packages/examples/react-vite-dynamic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "react-vite-dynamic",
"private": true,
"version": "1.0.0",
"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"
},
"dependencies": {
"@originjs/vite-plugin-federation": "^1.2.3",
"react-error-boundary": "^4.0.10"
}
}
3 changes: 3 additions & 0 deletions packages/examples/react-vite-dynamic/pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
packages:
- "host"
- "remote"
13 changes: 13 additions & 0 deletions packages/examples/react-vite-dynamic/remote/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions packages/examples/react-vite-dynamic/remote/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "@react-vite-dynamic/shared",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --port 5001 --strictPort",
"build": "vite build",
"preview": "vite preview --port 5001 --strictPort",
"serve": "vite preview --port 5001 --strictPort"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^3.0.0",
"vite": "^4.3.2"
}
}
1 change: 1 addition & 0 deletions packages/examples/react-vite-dynamic/remote/public/vite.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.