NextGraph
/
single-spa-experiments
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

module federation with 2 react projects

Browse Source
main
Laurin Weger 2 months ago
parent 090ac22d54
commit 4acbd9900f
Signed by: laurin
GPG Key ID: C62769CE726A5F92
50 changed files with 8461 additions and 463 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 2
      README.md
  3. 28
      host-svelte/.gitignore
  4. 22
      host-svelte/index.html
  5. 1285
      host-svelte/package-lock.json
  6. 15
      host-svelte/package.json
  7. 2189
      host-svelte/pnpm-lock.yaml
  8. 8
      host-svelte/src/App.svelte
  9. 9
      host-svelte/src/importMap.dev.json
  10. 3
      host-svelte/src/main.ts
  11. 39
      host-svelte/src/utils.ts
  12. 26
      host-svelte/vite.config.mts
  13. 75
      react-parcel/README.md
  14. 1
      react-parcel/public/favicon.svg
  15. 24
      react-parcel/public/icons.svg
  16. BIN
      react-parcel/src/assets/hero.png
  17. 1
      react-parcel/src/assets/react.svg
  18. 1
      react-parcel/src/assets/vite.svg
  19. 1
      react-parcel/tsconfig.tsbuildinfo
  20. 34
      react-parcel/vite.config.ts
  21. 0
      remote-react/eslint.config.js
  22. 1
      remote-react/index.html
  23. 514
      remote-react/package-lock.json
  24. 10
      remote-react/package.json
  25. 0
      remote-react/src/App.css
  26. 55
      remote-react/src/App.tsx
  27. 0
      remote-react/src/components/main.tsx
  28. 29
      remote-react/src/components/switch.tsx
  29. 0
      remote-react/src/declarations.d.ts
  30. 0
      remote-react/src/main.tsx
  31. 0
      remote-react/src/spa/application.tsx
  32. 0
      remote-react/src/spa/switch-parcel.tsx
  33. 0
      remote-react/tailwind.config.mts
  34. 0
      remote-react/tsconfig.json
  35. 70
      remote-react/vite.config.ts
  36. 22
      remote-react2/eslint.config.js
  37. 15
      remote-react2/index.html
  38. 4213
      remote-react2/package-lock.json
  39. 33
      remote-react2/package.json
  40. 2
      remote-react2/src/App.css
  41. 0
      remote-react2/src/App.tsx
  42. 3
      remote-react2/src/components/main.tsx
  43. 0
      remote-react2/src/components/switch.tsx
  44. 41
      remote-react2/src/declarations.d.ts
  45. 9
      remote-react2/src/main.tsx
  46. 25
      remote-react2/src/spa/application.tsx
  47. 23
      remote-react2/src/spa/switch-parcel.tsx
  48. 8
      remote-react2/tailwind.config.mts
  49. 17
      remote-react2/tsconfig.json
  50. 70
      remote-react2/vite.config.ts

1
react-parcel/.gitignore → .gitignore vendored
Unescape View File

@ -1,3 +1,4 @@
.mf
# Logs
logs
*.log

2
README.md
Unescape View File

@ -4,4 +4,4 @@ Things to do here:
- host is built on the basis of [vite-ts-single-spa-root-config](git@github.com:long-woo/vite-ts-single-spa-root-config.git)
- The other packages have to export parcels
The parcel apps use an import of @ng/web but `ng` is served from host
The parcel apps use an import of @ng-org/api but `ng` is served from host

28
host-svelte/.gitignore vendored
Unescape View File

@ -1,28 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

22
host-svelte/index.html
Unescape View File

@ -8,9 +8,29 @@
<title>Root Config</title>
<link rel="icon" href="/single-spa.svg">
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.12.1/dist/system.min.js"></script>
<script type="module" src="./src/main.ts"></script>
<script type="module">
function appendReactRefreshScript(origin) {
const reactRefreshInteropabilityScript =
document.createElement("script");
reactRefreshInteropabilityScript.type = "module";
reactRefreshInteropabilityScript.textContent = `
import RefreshRuntime from '${origin}/@react-refresh';
RefreshRuntime.injectIntoGlobalHook(window);
`;
document.head.appendChild(reactRefreshInteropabilityScript);
}
window.$RefreshReg$ = () => { };
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;
const origins = ["http://localhost:5001"];
origins.forEach((origin) => {
appendReactRefreshScript(origin);
});
</script>
</head>
<body>

1285
host-svelte/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
host-svelte/package.json
Unescape View File

@ -4,20 +4,27 @@
"description": "Single-spa host app running svelte.",
"scripts": {
"dev": "vite",
"build": "vite build"
"build": "vite build",
"preview": "vite build && vite preview --port 5000"
},
"dependencies": {
"@ark-ui/svelte": "^5.21.2",
"@module-federation/enhanced": "^2.4.0",
"@module-federation/runtime": "^2.4.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"single-spa": "^6.0.1",
"single-spa-svelte": "^2.1.1"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^6.0.0",
"@module-federation/vite": "^1.15.4",
"@tailwindcss/vite": "^4.2.4",
"daisyui": "^5.5.19",
"svelte": "^5.55.5",
"tailwindcss": "^4.2.4",
"typescript": "^6.0.3",
"vite": "^7.0.0",
"typescript": "^6.0.0 || ^5",
"vite": "^7 || ^8",
"vite-plugin-single-spa": "^1.1.1"
}
}

2189
host-svelte/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

8
host-svelte/src/App.svelte
Unescape View File

@ -2,15 +2,17 @@
import Counter from "./lib/Counter.svelte";
import Slider from "./lib/Slider.svelte";
import Parcel from "./lib/Parcel.svelte";
import { loadModule } from "./utils";
export let mountParcel;
const switchParcelConfig = () =>
import(/* @vite-ignore */ "@react-parcel/" + "switch").then(
loadModule("http://localhost:5001/remoteEntry.js", "switch-parcel").then(
(mod) => mod.default ?? mod,
);
const reactAppConfig = () =>
import(/* @vite-ignore */ "@react-parcel/" + "application").then(
loadModule("http://localhost:5002/remoteEntry.js", "application").then(
(mod) => mod.default ?? mod,
);
@ -72,6 +74,8 @@
<section id="center" class="grid gap-6 md:grid-cols-2">
<Parcel {mountParcel} config={reactAppConfig} />
<Parcel {mountParcel} config={reactAppConfig} />
<Parcel {mountParcel} config={switchParcelConfig} />
</section>
</div>
</main>

9
host-svelte/src/importMap.dev.json
Unescape View File

@ -1,9 +0,0 @@
{
"imports": {
"root-config": "./root-config.js",
"@react-parcel/switch": "http://localhost:5001/switch-parcel.js",
"@react-parcel/application": "http://localhost:5001/application.js",
"@react-parcel-dev/switch": "http://localhost:5001/src/spa/switch-parcel.tsx"
}
}

3
host-svelte/src/main.ts
Unescape View File

@ -1,6 +1,9 @@
import "./app.css";
import { registerApplication, start } from "single-spa";
import * as singleSpaSvelte from "./host-svelte.single-spa";
import { init } from "@module-federation/enhanced/runtime";
init({ name: "host-svelte", remotes: [] });
registerApplication(
"host-svelte",

39
host-svelte/src/utils.ts
Unescape View File

@ -0,0 +1,39 @@
import {
init,
registerRemotes,
loadRemote,
} from "@module-federation/enhanced/runtime";
let initialized = false;
function ensureRuntime() {
if (!initialized) {
console.log("starting mf runtime.");
init({
name: "host-svelte",
remotes: [],
});
initialized = true;
}
}
const remoteKeys: string[] = [];
export function loadModule(entryUri: string, moduleName: string) {
ensureRuntime();
const remoteKey = entryUri + "|" + moduleName;
// Register remote if it is not already.
if (!remoteKeys.includes(remoteKey)) {
registerRemotes([
{
entry: entryUri,
name: remoteKey,
version: entryUri,
type: "module",
},
]);
remoteKeys.push(remoteKey);
}
return loadRemote(remoteKey + "/" + moduleName);
}

26
host-svelte/vite.config.mts
Unescape View File

@ -2,9 +2,13 @@ import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import tailwindcss from "@tailwindcss/vite";
import vitePluginSingleSpa from "vite-plugin-single-spa";
import { federation } from "@module-federation/vite";
// https://vite.dev/config/
export default defineConfig({
resolve: {
dedupe: ["react", "react-dom"],
},
plugins: [
svelte(),
tailwindcss(),
@ -15,6 +19,28 @@ export default defineConfig({
type: "importmap",
},
}),
federation({
name: "host-svelte",
remotes: {},
shared: {
"@ark-ui/svelte": {}, // Takes 2mb unzipped, maybe leave since tree-shaking should do its job?
react: {
singleton: true,
},
"react/jsx-runtime": {
singleton: true,
},
"react/jsx-dev-runtime": {
singleton: true,
},
"react-dom": {
singleton: true,
},
"react-dom/client": {
singleton: true,
},
},
}),
],
build: {
modulePreload: false,

75
react-parcel/README.md
Unescape View File

@ -1,75 +0,0 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
## React Compiler
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
Note: This will impact Vite dev & build performances.
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

1
react-parcel/public/favicon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 9.3 KiB

24
react-parcel/public/icons.svg
Unescape View File

@ -1,24 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="bluesky-icon" viewBox="0 0 16 17">
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
</symbol>
<symbol id="discord-icon" viewBox="0 0 20 19">
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
</symbol>
<symbol id="documentation-icon" viewBox="0 0 21 20">
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
</symbol>
<symbol id="github-icon" viewBox="0 0 19 19">
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
</symbol>
<symbol id="social-icon" viewBox="0 0 20 20">
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
</symbol>
<symbol id="x-icon" viewBox="0 0 19 19">
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
</symbol>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
react-parcel/src/assets/hero.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

1
react-parcel/src/assets/react.svg
Unescape View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

1
react-parcel/src/assets/vite.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 8.5 KiB

1
react-parcel/tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long

34
react-parcel/vite.config.ts
Unescape View File

@ -1,34 +0,0 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import vitePluginSingleSpa from "vite-plugin-single-spa";
// https://vite.dev/config/
export default defineConfig({
plugins: [
react({}),
tailwindcss(),
vitePluginSingleSpa({
type: "mife",
serverPort: 5001,
spaEntryPoints: ["src/spa/application.tsx", "src/spa/switch-parcel.tsx"],
cssStrategy: "multiMife",
// TODO:
assetFileNames: "",
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
// cssCodeSplit: false,
},
server: {
port: 5001,
strictPort: true,
cors: true,
origin: "http://localhost:5001",
},
base: "http://localhost:5001",
});

0
react-parcel/eslint.config.js → remote-react/eslint.config.js
Unescape View File

1
react-parcel/index.html → remote-react/index.html
Unescape View File

@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./src/main.tsx"></script>
<title>remote-react</title>

514
react-parcel/package-lock.json → remote-react/package-lock.json generated
Unescape View File

@ -9,13 +9,13 @@
"version": "0.0.0",
"dependencies": {
"@ark-ui/react": "^5.36.2",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"react-router-dom": "^7.15.0",
"single-spa": "^6.0.1",
"single-spa-react": "^6.0.2"
},
"devDependencies": {
"@module-federation/vite": "^1.15.4",
"@tailwindcss/vite": "^4.2.4",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
@ -958,6 +958,134 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@module-federation/error-codes": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-2.4.0.tgz",
"integrity": "sha512-ktCZtwOoiKR1URJyBt223OsOFAUvc13rICYif55mt7+DomtELlh5FicnEz6mPLBUwmNM9vyBMvkxOdp+fQ5oUg==",
"dev": true,
"license": "MIT"
},
"node_modules/@module-federation/managers": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/managers/-/managers-2.4.0.tgz",
"integrity": "sha512-Z8j6aog44G1gt4yIAaeDowwZ7xg0aAxTA1Hq69euJK9cR9MDEaLbLUk57jDoiRj6xLwlCiw7ozY+U15BQATk6Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@module-federation/sdk": "2.4.0",
"find-pkg": "2.0.0"
}
},
"node_modules/@module-federation/runtime": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-2.4.0.tgz",
"integrity": "sha512-IrLAMwUuteRgFlEkg9jrn4bk8uC897FnXvfNmkKD8/qIoNtSd+32e5ouQn+PEYbX/RjRUB1TYveY6rYHpTPkyg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@module-federation/error-codes": "2.4.0",
"@module-federation/runtime-core": "2.4.0",
"@module-federation/sdk": "2.4.0"
}
},
"node_modules/@module-federation/runtime-core": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-2.4.0.tgz",
"integrity": "sha512-0S8fDw28DXDW17lTQwq5vfJWe2lG0Lw3+w4vk3DVVImLwXXay+OGxLDxzWUfypWcMznfpnoAnFUMO3PtuXziuA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@module-federation/error-codes": "2.4.0",
"@module-federation/sdk": "2.4.0"
}
},
"node_modules/@module-federation/sdk": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-2.4.0.tgz",
"integrity": "sha512-eZDdF5B69W9npuka0VL24FY7XDM+YAwwfkscSeWOSqv4/8Hm0xmcmSurlP6NIOrwbeogerRCtEcnx/TFXYjoow==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"node-fetch": "^2.7.0 || ^3.3.2"
},
"peerDependenciesMeta": {
"node-fetch": {
"optional": true
}
}
},
"node_modules/@module-federation/third-party-dts-extractor": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/third-party-dts-extractor/-/third-party-dts-extractor-2.4.0.tgz",
"integrity": "sha512-4v24t6L3dET/6abMOM2fiM3roT0c8mi21/i+uDc6WG7U0i+Xp2SojBppTs6gnT0lkwMTe+u6xIpNQakdUftHsg==",
"dev": true,
"license": "MIT",
"dependencies": {
"find-pkg": "2.0.0",
"resolve": "1.22.8"
}
},
"node_modules/@module-federation/vite": {
"version": "1.15.4",
"resolved": "https://registry.npmjs.org/@module-federation/vite/-/vite-1.15.4.tgz",
"integrity": "sha512-44l8xYOermWM0hhuTLuGE0AKaX6W2yqQ/hTyVqiEHa23gPHFUNjJs1Cr6+A5fG38XMl+0Vzn11luT3zwp1xJjQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@module-federation/dts-plugin": "2.4.0",
"@module-federation/runtime": "2.4.0",
"@module-federation/sdk": "2.4.0",
"es-module-lexer": "^2.0.0",
"estree-walker": "^3.0.3",
"pathe": "^2.0.3"
},
"peerDependencies": {
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@module-federation/vite/node_modules/@module-federation/dts-plugin": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@module-federation/dts-plugin/-/dts-plugin-2.4.0.tgz",
"integrity": "sha512-sa6v5ByyqMRHzpwDu0zc7s5mZ39EFIkG0jkRfZU09pzkrJEIy4uZ1Kt9SLysFB8RBMIAvAakAfqDlVWvf1lndg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@module-federation/error-codes": "2.4.0",
"@module-federation/managers": "2.4.0",
"@module-federation/sdk": "2.4.0",
"@module-federation/third-party-dts-extractor": "2.4.0",
"adm-zip": "0.5.10",
"ansi-colors": "4.1.3",
"isomorphic-ws": "5.0.0",
"node-schedule": "2.1.1",
"undici": "7.24.7",
"ws": "8.18.0"
},
"peerDependencies": {
"typescript": "^4.9.0 || ^5.0.0",
"vue-tsc": ">=1.0.24"
},
"peerDependenciesMeta": {
"vue-tsc": {
"optional": true
}
}
},
"node_modules/@module-federation/vite/node_modules/typescript": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/@napi-rs/wasm-runtime": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@ -2681,6 +2809,26 @@
"integrity": "sha512-XUpqDtXfHe7CySjOhLPLj9H8rxbiFUJAGgmBzNdpsGPP4wx12cpOXrpSjRXZ2kMwooMPz/P7RPDBteto8sqhAQ==",
"license": "MIT"
},
"node_modules/adm-zip": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz",
"integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0"
}
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.27",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz",
@ -2775,6 +2923,19 @@
"url": "https://opencollective.com/express"
}
},
"node_modules/cron-parser": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
"integrity": "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"luxon": "^3.2.1"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@ -2840,6 +3001,13 @@
"node": ">=10.13.0"
}
},
"node_modules/es-module-lexer": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
"integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
"dev": true,
"license": "MIT"
},
"node_modules/esbuild": {
"version": "0.27.7",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
@ -2892,6 +3060,29 @@
"node": ">=6"
}
},
"node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/expand-tilde": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
"integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
"dev": true,
"license": "MIT",
"dependencies": {
"homedir-polyfill": "^1.0.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/fdir": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@ -2910,6 +3101,32 @@
}
}
},
"node_modules/find-file-up": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-2.0.1.tgz",
"integrity": "sha512-qVdaUhYO39zmh28/JLQM5CoYN9byEOKEH4qfa8K1eNV17W0UUMJ9WgbR/hHFH+t5rcl+6RTb5UC7ck/I+uRkpQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"resolve-dir": "^1.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/find-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-2.0.0.tgz",
"integrity": "sha512-WgZ+nKbELDa6N3i/9nrHeNznm+lY3z4YfhDDWgW+5P0pdmMj26bxaxU11ookgY3NyP9GC7HvZ9etp0jRFqGEeQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"find-file-up": "^2.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -2925,6 +3142,16 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@ -2935,6 +3162,38 @@
"node": ">=6.9.0"
}
},
"node_modules/global-modules": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
"integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
"dev": true,
"license": "MIT",
"dependencies": {
"global-prefix": "^1.0.1",
"is-windows": "^1.0.1",
"resolve-dir": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/global-prefix": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
"integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
"dev": true,
"license": "MIT",
"dependencies": {
"expand-tilde": "^2.0.2",
"homedir-polyfill": "^1.0.1",
"ini": "^1.3.4",
"is-windows": "^1.0.1",
"which": "^1.2.14"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@ -2942,6 +3201,82 @@
"dev": true,
"license": "ISC"
},
"node_modules/hasown": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
"integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
"dev": true,
"license": "MIT",
"dependencies": {
"parse-passwd": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/ini": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true,
"license": "ISC"
},
"node_modules/is-core-module": {
"version": "2.16.2",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
"integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
"dev": true,
"license": "MIT",
"dependencies": {
"hasown": "^2.0.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-windows": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true,
"license": "ISC"
},
"node_modules/isomorphic-ws": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
"integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"ws": "*"
}
},
"node_modules/jiti": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@ -3246,6 +3581,13 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/long-timeout": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/long-timeout/-/long-timeout-0.1.1.tgz",
"integrity": "sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==",
"dev": true,
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -3256,6 +3598,16 @@
"yallist": "^3.0.2"
}
},
"node_modules/luxon": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
"integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -3289,6 +3641,45 @@
"dev": true,
"license": "MIT"
},
"node_modules/node-schedule": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/node-schedule/-/node-schedule-2.1.1.tgz",
"integrity": "sha512-OXdegQq03OmXEjt2hZP33W2YPs/E5BcFQks46+G2gAxs4gHOIVD1u7EqlYLYSKsaIpyKCK9Gbk0ta1/gjRSMRQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"cron-parser": "^4.2.0",
"long-timeout": "0.1.1",
"sorted-array-functions": "^1.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/parse-passwd": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
"integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true,
"license": "MIT"
},
"node_modules/pathe": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
"dev": true,
"license": "MIT"
},
"node_modules/perfect-freehand": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/perfect-freehand/-/perfect-freehand-1.2.3.tgz",
@ -3360,24 +3751,24 @@
}
},
"node_modules/react": {
"version": "19.2.5",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
"integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
"version": "19.2.6",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
"integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.2.5",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
"integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
"version": "19.2.6",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
"integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
"license": "MIT",
"dependencies": {
"scheduler": "^0.27.0"
},
"peerDependencies": {
"react": "^19.2.5"
"react": "^19.2.6"
}
},
"node_modules/react-refresh": {
@ -3428,6 +3819,38 @@
"react-dom": ">=18"
}
},
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-core-module": "^2.13.0",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
},
"bin": {
"resolve": "bin/resolve"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/resolve-dir": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
"integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
"dev": true,
"license": "MIT",
"dependencies": {
"expand-tilde": "^2.0.0",
"global-modules": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/rollup": {
"version": "4.60.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.3.tgz",
@ -3495,12 +3918,6 @@
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
"license": "MIT"
},
"node_modules/single-spa": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/single-spa/-/single-spa-6.0.3.tgz",
"integrity": "sha512-pXlwHXHhs3hx/MnGQHBLdFCVAN2rlm9TLBKazbDMyZ25QRxoen2vlUZ47MyXKa9K8Gd5UZs/gkuQad4TGbViwg==",
"license": "MIT"
},
"node_modules/single-spa-react": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/single-spa-react/-/single-spa-react-6.0.2.tgz",
@ -3523,6 +3940,13 @@
}
}
},
"node_modules/sorted-array-functions": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/sorted-array-functions/-/sorted-array-functions-1.3.0.tgz",
"integrity": "sha512-2sqgzeFlid6N4Z2fUQ1cvFmTOLRi/sEDzSQ0OKYchqgoPmQBVyM3959qYx3fpS6Esef80KjmpgPeEr028dP3OA==",
"dev": true,
"license": "MIT"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@ -3533,6 +3957,19 @@
"node": ">=0.10.0"
}
},
"node_modules/supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tailwindcss": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
@ -3591,6 +4028,16 @@
"node": ">=14.17"
}
},
"node_modules/undici": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/undici/-/undici-7.24.7.tgz",
"integrity": "sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=20.18.1"
}
},
"node_modules/undici-types": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
@ -3720,6 +4167,41 @@
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"dev": true,
"license": "ISC",
"dependencies": {
"isexe": "^2.0.0"
},
"bin": {
"which": "bin/which"
}
},
"node_modules/ws": {
"version": "8.18.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": ">=5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

10
react-parcel/package.json → remote-react/package.json
Unescape View File

@ -8,17 +8,17 @@
"build": "tsc -b && vite build",
"lint": "eslint .",
"serve": "vite serve",
"preview": "vite preview"
"preview": "vite build && vite preview"
},
"dependencies": {
"@ark-ui/react": "^5.36.2",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"react-router-dom": "^7.15.0",
"single-spa-react": "^6.0.2",
"single-spa": "^6.0.1"
"single-spa-react": "^6.0.2"
},
"devDependencies": {
"@module-federation/vite": "^1.15.4",
"@tailwindcss/vite": "^4.2.4",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",

0
react-parcel/src/App.css → remote-react/src/App.css
Unescape View File

55
remote-react/src/App.tsx
Unescape View File

@ -0,0 +1,55 @@
import { Link, Route, Routes } from "react-router-dom";
import SwitchComponent from "./components/switch";
import { MemoryRouter, HashRouter } from "react-router-dom";
import "./App.css";
function MainPage() {
return (
<div>
<button className="btn btn-primary">No effect button</button>
</div>
);
}
function SwitchPage() {
return (
<div>
<SwitchComponent />
</div>
);
}
function App() {
return (
<MemoryRouter>
<div className="mx-auto flex max-w-5xl flex-col gap-8 px-6 py-10">
<div>
<h1>React Application</h1>
</div>
<div className="navbar bg-base-100 shadow-sm gap-4">
<div>
<Link className="btn" to="/">
Main page
</Link>
</div>
<div>
<Link className="btn" to="/switch">
Switch Component page
</Link>
</div>
</div>
<main>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/switch" element={<SwitchPage />} />
</Routes>
</main>
</div>
</MemoryRouter>
);
}
export default App;

0
react-parcel/src/components/main.tsx → remote-react/src/components/main.tsx
Unescape View File

29
remote-react/src/components/switch.tsx
Unescape View File

@ -0,0 +1,29 @@
import { Switch } from "@ark-ui/react/switch";
import { useState } from "react";
export default function SwitchComponent() {
const [toggled, setToggled] = useState(false);
return (
<div className="card bg-base-200 shadow-sm">
<div className="card-body gap-4">
<div className="flex items-center justify-between gap-6">
<h2 className="card-title text-base">React Switch Component</h2>
<Switch.Root className="flex items-center gap-3">
<Switch.Context>
{(context) => (
<Switch.Label className="text-sm font-medium">
{context.checked ? "Checked" : "Unchecked"}
</Switch.Label>
)}
</Switch.Context>
<Switch.Control className="inline-flex h-7 w-12 items-center rounded-full bg-base-300 p-1 transition data-[state=checked]:bg-primary">
<Switch.Thumb className="h-5 w-5 rounded-full bg-base-100 shadow transition data-[state=checked]:translate-x-5" />
</Switch.Control>
<Switch.HiddenInput onChange={(e) => setToggled(!!toggled)} />
</Switch.Root>
</div>
</div>
</div>
);
}

0
react-parcel/src/declarations.d.ts → remote-react/src/declarations.d.ts vendored
Unescape View File

0
react-parcel/src/main.tsx → remote-react/src/main.tsx
Unescape View File

0
react-parcel/src/spa/application.tsx → remote-react/src/spa/application.tsx
Unescape View File

0
react-parcel/src/spa/switch-parcel.tsx → remote-react/src/spa/switch-parcel.tsx
Unescape View File

0
react-parcel/tailwind.config.mts → remote-react/tailwind.config.mts
Unescape View File

0
react-parcel/tsconfig.json → remote-react/tsconfig.json
Unescape View File

70
remote-react/vite.config.ts
Unescape View File

@ -0,0 +1,70 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import vitePluginSingleSpa from "vite-plugin-single-spa";
import { federation } from "@module-federation/vite";
import pkg from "./package.json";
const sharedConfig = {
react: {
requiredVersion: pkg.dependencies.react,
singleton: true,
import: false,
},
"react-dom": {
requiredVersion: pkg.dependencies["react-dom"],
singleton: true,
import: false,
},
} as const;
export default defineConfig({
resolve: {
dedupe: Object.keys(sharedConfig),
},
plugins: [
react({}),
tailwindcss(),
vitePluginSingleSpa({
type: "mife",
serverPort: 5001,
spaEntryPoints: [],
cssStrategy: "multiMife",
// TODO:
assetFileNames: "",
}),
federation({
name: "remote-react",
filename: "remoteEntry.js",
exposes: {
"./application": "./src/spa/application.tsx",
"./switch-parcel": "./src/spa/switch-parcel.tsx",
},
shared: sharedConfig,
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
rollupOptions: {
// external: [
// "single-spa",
// "react",
// "react/jsx-dev-runtime",
// "react/jsx-runtime",
// "react-dom",
// "react-dom/client",
// "@example/root-config",
// ],
},
// cssCodeSplit: false,
},
server: {
port: 5001,
strictPort: true,
cors: true,
origin: "http://localhost:5001",
},
base: "http://localhost:5001",
});

22
remote-react2/eslint.config.js
Unescape View File

@ -0,0 +1,22 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
globals: globals.browser,
},
},
])

15
remote-react2/index.html
Unescape View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./src/main.tsx"></script>
<title>remote-react</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

4213
remote-react2/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

33
remote-react2/package.json
Unescape View File

@ -0,0 +1,33 @@
{
"name": "single-spa-react-routed",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"serve": "vite serve",
"preview": "vite build && vite preview"
},
"dependencies": {
"@ark-ui/react": "^5.36.2",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"react-router-dom": "^7.15.0",
"single-spa-react": "^6.0.2"
},
"devDependencies": {
"@module-federation/vite": "^1.15.4",
"@tailwindcss/vite": "^4.2.4",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.0.0",
"daisyui": "^5.5.19",
"tailwindcss": "^4.2.4",
"typescript": "~6.0.2",
"vite": "^7.0.0",
"vite-plugin-single-spa": "^1.1.1"
}
}

2
remote-react2/src/App.css
Unescape View File

@ -0,0 +1,2 @@
@config "../tailwind.config.mts";
@import "tailwindcss";

0
react-parcel/src/App.tsx → remote-react2/src/App.tsx
Unescape View File

3
remote-react2/src/components/main.tsx
Unescape View File

@ -0,0 +1,3 @@
import App from '../App'
export default App

0
react-parcel/src/components/switch.tsx → remote-react2/src/components/switch.tsx
Unescape View File

41
remote-react2/src/declarations.d.ts vendored
Unescape View File

@ -0,0 +1,41 @@
declare module "*.html" {
const rawHtmlFile: string;
export = rawHtmlFile;
}
declare module "*.bmp" {
const src: string;
export default src;
}
declare module "*.gif" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.webp" {
const src: string;
export default src;
}
declare module "*.svg" {
const src: string;
export default src;
}
declare module "*.css";

9
remote-react2/src/main.tsx
Unescape View File

@ -0,0 +1,9 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);

25
remote-react2/src/spa/application.tsx
Unescape View File

@ -0,0 +1,25 @@
import "../App.css";
import React from "react";
import ReactDOMClient from "react-dom/client";
import rootComponent from "../App.tsx";
import singleSpaReact from "single-spa-react";
import { cssLifecycleFactory } from "vite-plugin-single-spa/ex";
const lc = singleSpaReact({
React,
ReactDOMClient,
rootComponent,
// Only necessary, if we wanted the app to boot itself.
// domElementGetter: (props) => document.getElementById("root"),
errorBoundary(err, info, props) {
console.error("err", err, "info", info, "props", props);
return <div>Oops, an error occurred. Please refresh.</div>;
},
});
const cssLc = cssLifecycleFactory("application", {});
export const bootstrap = [cssLc.bootstrap, lc.bootstrap];
export const mount = [cssLc.mount, lc.mount];
export const unmount = [cssLc.unmount, lc.unmount];
export default { bootstrap, mount, unmount };

23
remote-react2/src/spa/switch-parcel.tsx
Unescape View File

@ -0,0 +1,23 @@
import React from "react";
import ReactDOMClient from "react-dom/client";
import rootComponent from "../components/switch.tsx";
import singleSpaReact from "single-spa-react";
import { cssLifecycleFactory } from "vite-plugin-single-spa/ex";
import "../App.css";
const lc = singleSpaReact({
React,
ReactDOMClient,
rootComponent,
errorBoundary(err, info, props) {
console.error("err", err, "info", info, "props", props);
return <div>Oops, an error occurred. Please refresh.</div>;
},
});
const cssLc = cssLifecycleFactory("switch-parcel", {});
export const bootstrap = [cssLc.bootstrap, lc.bootstrap];
export const mount = [cssLc.mount, lc.mount];
export const unmount = [cssLc.unmount, lc.unmount];
export default { bootstrap, mount, unmount };

8
remote-react2/tailwind.config.mts
Unescape View File

@ -0,0 +1,8 @@
// @ts-ignore
import daisyui from "daisyui";
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{html,js,ts,css,tsx}"],
plugins: [daisyui],
};

17
remote-react2/tsconfig.json
Unescape View File

@ -0,0 +1,17 @@
{
"compilerOptions": {
"declarationDir": "dist",
"isolatedModules": true,
"composite": true,
"target": "esnext",
"moduleResolution": "bundler",
"esModuleInterop": true,
"module": "esnext",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowImportingTsExtensions": true,
"declaration": true,
"emitDeclarationOnly": true,
"jsx": "react-jsx"
}
}

70
remote-react2/vite.config.ts
Unescape View File

@ -0,0 +1,70 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import vitePluginSingleSpa from "vite-plugin-single-spa";
import { federation } from "@module-federation/vite";
import pkg from "./package.json";
const sharedConfig = {
react: {
requiredVersion: pkg.dependencies.react,
singleton: true,
import: false,
},
"react-dom": {
requiredVersion: pkg.dependencies["react-dom"],
singleton: true,
import: false,
},
} as const;
export default defineConfig({
resolve: {
dedupe: Object.keys(sharedConfig),
},
plugins: [
react({}),
tailwindcss(),
vitePluginSingleSpa({
type: "mife",
serverPort: 5002,
spaEntryPoints: [],
cssStrategy: "multiMife",
// TODO:
assetFileNames: "",
}),
federation({
name: "remote-react2",
filename: "remoteEntry.js",
exposes: {
"./application": "./src/spa/application.tsx",
"./switch-parcel": "./src/spa/switch-parcel.tsx",
},
shared: sharedConfig,
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
rollupOptions: {
// external: [
// "single-spa",
// "react",
// "react/jsx-dev-runtime",
// "react/jsx-runtime",
// "react-dom",
// "react-dom/client",
// "@example/root-config",
// ],
},
// cssCodeSplit: false,
},
server: {
port: 5002,
strictPort: true,
cors: true,
origin: "http://localhost:5002",
},
base: "http://localhost:5002",
});
Write Preview
Loading…
Cancel
Save