6 |
10 | );
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/rs-sidecart/src/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default () => (
4 | Nested
7 |App 2
8 |
12 | Header
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/vite-react/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | ReactDOM.render(
7 |
6 |
10 | );
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/examples/version-control/app2/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import ButtonContainer from "./ButtonContainer";
3 |
4 | const App: FC<{ version?: string }> = () => (
5 | Nested
7 |App 2
8 |
6 |
10 | );
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/examples/non-module-federation/app2/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import ButtonContainer from './ButtonContainer';
3 |
4 | const App: FC<{ version?: string }> = () => (
5 | Nested
7 |App 2
8 |
6 |
10 | );
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 |
11 | # Misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 |
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 |
--------------------------------------------------------------------------------
/examples/version-control/app2/site.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app2",
3 | "version": "1.0.0",
4 | "exports": ["./src/App"],
5 | "dependencies": {
6 | "app3": "1.0.0"
7 | },
8 | "registry": "http://localhost:3000/dev.json",
9 | "shared": {
10 | "react": { "singleton": true },
11 | "react-dom": { "singleton": true }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/fronts/README.md:
--------------------------------------------------------------------------------
1 | # fronts
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/README.md:
--------------------------------------------------------------------------------
1 | ## Installation
2 |
3 | ```bash
4 | cd rs-sidecart yarn npm start
5 | cd webpack-spa yarn npm start
6 | cd vite-react yarn npm start
7 | ```
8 |
9 | ## view
10 |
11 | ```
12 | http://localhost:3000
13 | ```
14 |
15 | ## build
16 |
17 | ```
18 | npm run build
19 |
20 | npm run prod
21 | ```
22 |
--------------------------------------------------------------------------------
/examples/basic/app1/src/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import React from 'react';
3 |
4 | const style = { border: '1px solid #000', padding: 12 };
5 |
6 | const Navigation = () => (
7 | Nested
7 |App 2
8 |
8 | Home - About
9 |
10 | );
11 |
12 | export default Navigation;
13 |
--------------------------------------------------------------------------------
/packages/fronts-vue/README.md:
--------------------------------------------------------------------------------
1 | # fronts-vue
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts-vue
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/packages/fronts-react/README.md:
--------------------------------------------------------------------------------
1 | # fronts-react
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts-react
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/packages/fronts-test/README.md:
--------------------------------------------------------------------------------
1 | # fronts-test
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts-test
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/examples/version-control/app1/src/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import React from "react";
3 |
4 | const style = { border: "1px solid #000", padding: 12 };
5 |
6 | const Navigation = () => (
7 |
8 | Home - About
9 |
10 | );
11 |
12 | export default Navigation;
13 |
--------------------------------------------------------------------------------
/packages/fronts-bundler/README.md:
--------------------------------------------------------------------------------
1 | # fronts-bundler
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts-bundler
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/examples/non-module-federation/app1/src/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import React from 'react';
3 |
4 | const style = { border: '1px solid #000', padding: 12 };
5 |
6 | const Navigation = () => (
7 |
8 | Home - About
9 |
10 | );
11 |
12 | export default Navigation;
13 |
--------------------------------------------------------------------------------
/examples/version-control/registry/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "registry",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "http-server api --cors -p 3000"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "MIT",
12 | "devDependencies": {
13 | "http-server": "^0.12.3"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/fronts-transport/README.md:
--------------------------------------------------------------------------------
1 | # fronts-transport
2 |
3 | 
4 |
5 | A progressive micro frontends framework for building Web applications
6 |
7 | ## Usage
8 |
9 | ```sh
10 | yarn add fronts-transport
11 | ```
12 |
13 | You can visit [fronts.js.org](https://fronts.js.org/) for more documentation.
14 |
--------------------------------------------------------------------------------
/packages/fronts-test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fronts-test",
3 | "version": "0.1.1",
4 | "description": "",
5 | "main": "dist/index.cjs.js",
6 | "module": "dist/index.esm.js",
7 | "types": "dist/index.d.ts",
8 | "build": [
9 | "cjs",
10 | "es"
11 | ],
12 | "scripts": {
13 | "test": "echo \"Error: no test specified\" && exit 1"
14 | },
15 | "author": "",
16 | "license": "MIT"
17 | }
18 |
--------------------------------------------------------------------------------
/examples/basic/app1/src/bootstrap.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { boot } from 'fronts';
4 | import App from './App';
5 |
6 | export default function render(element: HTMLElement | null) {
7 | ReactDOM.render(
8 | Home - App2 -{' '}
9 | App4 - App5
10 |
11 | );
12 |
13 | export default Navigation;
14 |
--------------------------------------------------------------------------------
/examples/version-control/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": [
4 | "app1",
5 | "app2",
6 | "app3",
7 | "registry"
8 | ],
9 | "scripts": {
10 | "start": "lerna run --parallel start",
11 | "build": "lerna run build",
12 | "serve": "lerna run --parallel serve",
13 | "clean": "lerna run --parallel clean"
14 | },
15 | "devDependencies": {
16 | "lerna": "^3.22.1"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/examples/basic/app1/src/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const style = {
4 | height: 400,
5 | backgroundColor: '#673ab7',
6 | color: 'white',
7 | padding: 12,
8 | };
9 |
10 | const HomePage = () => (
11 |
12 |
18 | );
19 |
20 | export default HomePage;
21 |
--------------------------------------------------------------------------------
/examples/non-module-federation/app1/src/bootstrap.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { boot } from 'fronts-react';
4 | import App from './App';
5 |
6 | export default function render(element: HTMLElement | null) {
7 | ReactDOM.render(Home Page
13 |Welcome to the future!
14 |15 | a page being provided by App 1 16 |
17 |
12 |
18 | );
19 |
20 | export default HomePage;
21 |
--------------------------------------------------------------------------------
/examples/all-features/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": [
4 | "app1",
5 | "app2",
6 | "app3",
7 | "app4",
8 | "app5",
9 | "app6"
10 | ],
11 | "scripts": {
12 | "start": "lerna run --parallel start",
13 | "build": "lerna run build",
14 | "serve": "lerna run --parallel serve",
15 | "clean": "lerna run --parallel clean"
16 | },
17 | "devDependencies": {
18 | "lerna": "^3.22.1"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/version-control/app1/src/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const style = {
4 | height: 400,
5 | backgroundColor: "#673ab7",
6 | color: "white",
7 | padding: 12,
8 | };
9 |
10 | const HomePage = () => (
11 | Home Page
13 |Welcome to the future!
14 |15 | a page being provided by App 1 16 |
17 |
12 |
18 | );
19 |
20 | export default HomePage;
21 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/vite-react/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/examples/non-module-federation/app1/src/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const style = {
4 | height: 400,
5 | backgroundColor: '#673ab7',
6 | color: 'white',
7 | padding: 12,
8 | };
9 |
10 | const HomePage = () => (
11 | Home Page
13 |Welcome to the future!
14 |15 | a page being provided by App 1 16 |
17 |
12 |
18 | );
19 |
20 | export default HomePage;
21 |
--------------------------------------------------------------------------------
/examples/basic/app3/src/Button.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import * as React from 'react';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: 'aquamarine',
7 | };
8 |
9 | const Button = () => {
10 | const [count, setCount] = React.useState(0);
11 | return (
12 |
15 | );
16 | };
17 |
18 | export default Button;
19 |
--------------------------------------------------------------------------------
/examples/basic/app4/src/Button.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import * as React from 'react';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: 'aquamarine',
7 | };
8 |
9 | const Button = () => {
10 | const [count, setCount] = React.useState(0);
11 | return (
12 |
15 | );
16 | };
17 |
18 | export default Button;
19 |
--------------------------------------------------------------------------------
/examples/all-features/app4/src/Button.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import * as React from 'react';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: 'aquamarine',
7 | };
8 |
9 | const Button = () => {
10 | const [count, setCount] = React.useState(0);
11 | return (
12 |
15 | );
16 | };
17 |
18 | export default Button;
19 |
--------------------------------------------------------------------------------
/packages/fronts-transport/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fronts-transport",
3 | "version": "0.1.1",
4 | "description": "",
5 | "main": "dist/index.cjs.js",
6 | "unpkg": "dist/index.umd.js",
7 | "module": "dist/index.esm.js",
8 | "types": "dist/index.d.ts",
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "author": "unadlib",
13 | "license": "MIT",
14 | "dependencies": {
15 | "data-transport": "^2.1.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/examples/non-module-federation/app3/src/Button.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import * as React from 'react';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: 'aquamarine',
7 | };
8 |
9 | const Button = () => {
10 | const [count, setCount] = React.useState(0);
11 | return (
12 |
15 | );
16 | };
17 |
18 | export default Button;
19 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/webpack-spa/src/App.js:
--------------------------------------------------------------------------------
1 | import LocalButton from "./Button";
2 | import React from "react";
3 |
4 | import Button from "./Button";
5 | const Header = React.lazy(() => import("rollup_spa/Header"));
6 |
7 | const App = () => (
8 | Home Page
13 |Welcome to the future!
14 |15 | a page being provided by App 1 16 |
17 |
9 | Loading the header
}>
10 | Webpack Remote
13 | 14 | 15 | 16 | ); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /packages/fronts-bundler/src/getSiteConfig.ts: -------------------------------------------------------------------------------- 1 | import { SiteConfig } from './interface'; 2 | 3 | export const getSiteConfig = (currentPath: string) => { 4 | let siteConfig: SiteConfig; 5 | try { 6 | // eslint-disable-next-line @typescript-eslint/no-var-requires 7 | siteConfig = require(currentPath); 8 | } catch (e) { 9 | console.error( 10 | `Failed to read the site config file. Please check ${currentPath}.` 11 | ); 12 | throw e; 13 | } 14 | return siteConfig; 15 | }; 16 | -------------------------------------------------------------------------------- /examples/all-features/app3/src/Button.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { getMeta } from 'fronts'; 3 | 4 | const style = { 5 | padding: 12, 6 | backgroundColor: 'aquamarine', 7 | }; 8 | 9 | const Button = () => { 10 | const [count, setCount] = useState(0); 11 | return ( 12 | 18 | ); 19 | }; 20 | 21 | export default Button; 22 | -------------------------------------------------------------------------------- /packages/fronts-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fronts-vue", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "dist/index.cjs.js", 6 | "unpkg": "dist/index.umd.js", 7 | "module": "dist/index.esm.js", 8 | "types": "dist/index.d.ts", 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "MIT", 15 | "peerDependencies": {}, 16 | "dependencies": { 17 | "fronts": "^0.1.1" 18 | }, 19 | "devDependencies": {} 20 | } 21 | -------------------------------------------------------------------------------- /packages/fronts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fronts", 3 | "version": "0.1.1", 4 | "description": "", 5 | "main": "dist/index.cjs.js", 6 | "unpkg": "dist/index.umd.js", 7 | "module": "dist/index.esm.js", 8 | "types": "dist/index.d.ts", 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "peerDependencies": { 13 | "data-transport": "^2.0.1" 14 | }, 15 | "dependencies": { 16 | "fronts-transport": "^0.1.1" 17 | }, 18 | "author": "unadlib", 19 | "license": "MIT" 20 | } 21 | -------------------------------------------------------------------------------- /packages/fronts/src/injectDependencies.ts: -------------------------------------------------------------------------------- 1 | import { identifier } from "./constants"; 2 | 3 | try { 4 | window[identifier] = window[identifier] ?? {}; 5 | window[identifier].__main__ = 6 | window[identifier].__main__ ?? process.env.APP_NAME; 7 | window[identifier].__entry__ = 8 | window[identifier].__entry__ ?? window.location.href; 9 | if (!window[identifier][process.env.APP_NAME!]) { 10 | window[identifier][process.env.APP_NAME!] = JSON.parse( 11 | process.env.FPM_DEPS! 12 | ); 13 | } 14 | } catch (e) { 15 | // 16 | } 17 | -------------------------------------------------------------------------------- /website/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | 3 | /** 4 | * CSS files with the .module.css suffix will be treated as CSS modules 5 | * and scoped locally. 6 | */ 7 | 8 | .heroBanner { 9 | padding: 4rem 0; 10 | text-align: center; 11 | position: relative; 12 | overflow: hidden; 13 | } 14 | 15 | @media screen and (max-width: 966px) { 16 | .heroBanner { 17 | padding: 2rem; 18 | } 19 | } 20 | 21 | .buttons { 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | -------------------------------------------------------------------------------- /examples/version-control/app3/src/Button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | // @ts-ignore 3 | import styles from './styles.css'; 4 | 5 | const style = { 6 | padding: 12, 7 | backgroundColor: 'aquamarine', 8 | }; 9 | 10 | const Button = () => { 11 | const [count, setCount] = React.useState(0); 12 | return ( 13 | 20 | ); 21 | }; 22 | 23 | export default Button; 24 | -------------------------------------------------------------------------------- /examples/all-features/app5/src/main.js: -------------------------------------------------------------------------------- 1 | import { boot } from 'fronts'; 2 | import { createApp } from 'vue'; 3 | import Layout from './Layout'; 4 | 5 | const App = { 6 | components: { 7 | layout: Layout, 8 | }, 9 | template: ` 10 |Vue
11 |
12 |
14 | `,
15 | };
16 |
17 | export default function render(element) {
18 | const app = createApp(App);
19 | app.mount(element);
20 | return () => {
21 | app.unmount(element);
22 | };
23 | }
24 |
25 | boot(render, document.getElementById('app'));
26 |
--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
1 | name: Node.js Package
2 |
3 | on:
4 | release:
5 | types: [created]
6 |
7 | jobs:
8 | publish-npm:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - uses: actions/checkout@v2
12 | - uses: actions/setup-node@v1
13 | with:
14 | node-version: 14
15 | registry-url: https://registry.npmjs.org/
16 | - run: yarn
17 | - run: yarn build
18 | - run: yarn test
19 | - run: npm run publish
20 | env:
21 | NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
22 | CI: true
23 |
--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | name: Node CI
2 |
3 | on: [push]
4 |
5 | jobs:
6 | build:
7 |
8 | runs-on: ubuntu-latest
9 |
10 | strategy:
11 | matrix:
12 | node-version: [12.x, 14.x]
13 |
14 | steps:
15 | - uses: actions/checkout@v1
16 | - name: Use Node.js ${{ matrix.node-version }}
17 | uses: actions/setup-node@v1
18 | with:
19 | node-version: ${{ matrix.node-version }}
20 | - name: yarn install, build, and test
21 | run: |
22 | yarn install
23 | yarn build
24 | yarn test
25 | env:
26 | CI: true
27 |
--------------------------------------------------------------------------------
/examples/basic/app2/src/ButtonContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import App3 from 'app3/src/App';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: '#cccccc',
7 | };
8 |
9 | const ButtonContainer = () => {
10 | const [count, setCount] = useState(0);
11 | return (
12 |
13 | App 2 Container
14 |
17 |
18 |
19 |
21 | );
22 | };
23 |
24 | export default ButtonContainer;
25 |
--------------------------------------------------------------------------------
/packages/fronts-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fronts-react",
3 | "version": "0.1.1",
4 | "description": "",
5 | "main": "dist/index.cjs.js",
6 | "unpkg": "dist/index.umd.js",
7 | "module": "dist/index.esm.js",
8 | "types": "dist/index.d.ts",
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "MIT",
15 | "peerDependencies": {
16 | "react": "^16.13.0"
17 | },
18 | "dependencies": {
19 | "fronts": "^0.1.1"
20 | },
21 | "devDependencies": {
22 | "@types/react": "^16.13.0",
23 | "react": "^16.13.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/vite-react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
5 | "allowJs": false,
6 | "skipLibCheck": false,
7 | "esModuleInterop": false,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "module": "ESNext",
12 | "moduleResolution": "Node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 | "jsx": "react",
17 | "typeRoots": ["./node_modules/@types", "src/types"]
18 | },
19 | "include": ["./src", "serve.js"]
20 | }
21 |
--------------------------------------------------------------------------------
/packages/fronts/src/index.ts:
--------------------------------------------------------------------------------
1 | import './injectDependencies';
2 |
3 | export { globalTransport, GlobalTransport } from 'fronts-transport';
4 |
5 | export * from './loadApp';
6 | export * from './interface';
7 | export * from './boot';
8 | export * from './useApp';
9 | export * from './useIframe';
10 | export * from './useWebComponents';
11 | export * from './importApp';
12 | export * from './injectScript';
13 | export * from './loadScript';
14 | export * from './getAppName';
15 | export * from './cache';
16 | export * from './injectStyle';
17 | export * from './getMeta';
18 | export * from './unmount';
19 | export * from './retargetEvents';
20 | export * from './getUid';
21 |
--------------------------------------------------------------------------------
/packages/fronts-bundler/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fronts-bundler",
3 | "version": "0.1.1",
4 | "description": "",
5 | "main": "dist/index.cjs.js",
6 | "module": "dist/index.esm.js",
7 | "types": "dist/index.d.ts",
8 | "build": [
9 | "cjs",
10 | "es"
11 | ],
12 | "scripts": {
13 | "test": "echo \"Error: no test specified\" && exit 1"
14 | },
15 | "author": "",
16 | "license": "MIT",
17 | "peerDependencies": {
18 | "string-replace-loader": "^3.0.1",
19 | "webpack": "^5.37.0"
20 | },
21 | "devDependencies": {
22 | "webpack": "^5.37.0"
23 | },
24 | "dependencies": {
25 | "string-replace-loader": "^3.0.1"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/fronts-vue/src/interface.ts:
--------------------------------------------------------------------------------
1 | import {
2 | UseIframeOptions,
3 | UseWebComponentsOptions,
4 | UseAppOptions,
5 | } from 'fronts';
6 |
7 | export type UseApp = 18 |
19 |
30 |
33 | {routes.map((route) => (
34 |
42 |
43 | App 1
31 |
14 |
24 | {siteConfig.title}
15 |{siteConfig.tagline}
16 |
17 |
20 | Tutorial - 5min ⏱️
21 |
22 |
23 |
20 |
46 | `,
47 | };
48 |
--------------------------------------------------------------------------------
/examples/basic/app1/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { HashRouter, Route, Switch } from 'react-router-dom';
3 | import { useApp, loadScript } from 'fronts-react';
4 | // import App2 from 'app2/src/App';
5 | import Navigation from './Navigation';
6 | import HomePage from './HomePage';
7 |
8 | const App2 = React.lazy(() => import('app2/src/App'));
9 |
10 | const routes = [
11 | {
12 | path: '/',
13 | component: HomePage,
14 | exact: true,
15 | },
16 | {
17 | path: '/about',
18 | component: () => (
19 | //
21 |
41 | Vue State/Input
22 |
23 |
27 |
28 |
29 |
33 |
34 |
35 |
39 |
40 |
42 |
45 | Button - loaded via Module Federation
43 |
39 |
44 | {routes.map((route) => (
45 |
53 |
54 | App 4 with Non-Module-Federation
40 |App 1
42 |
33 | App 2 Container
34 |
37 |
38 |
39 |
42 |
43 |
46 | );
47 | };
48 |
49 | export default ButtonContainer;
50 |
--------------------------------------------------------------------------------
/scripts/build.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import path from 'path';
3 | import { array } from 'yargs';
4 | import { compile, compileProject, Generate } from './typescript';
5 | import { generateBundledModules } from './rollup';
6 | import { buildTypes as buildTypesObject, handleWorkspaces } from './workspaces';
7 |
8 | process.chdir(path.resolve(__dirname, '..'));
9 |
10 | const projects = array('p').argv.p;
11 |
12 | const generate: Generate = async ({ currentPath, name, packageJson }) => {
13 | const banner = packageJson.bin ? '#!/usr/bin/env node' : undefined;
14 | const { build: buildTypes = ['es', 'cjs', 'umd'] } = packageJson;
15 | for (const buildType of buildTypes) {
16 | await generateBundledModules({
17 | inputFile: path.resolve(currentPath, 'build/index.js'),
18 | outputFile: path.resolve(
19 | currentPath,
20 | `dist/index.${buildTypesObject[buildType]}.js`
21 | ),
22 | format: buildType,
23 | name,
24 | banner,
25 | });
26 | }
27 | };
28 |
29 | /**
30 | * sub-project set { "build": ['es', 'cjs', 'umd'] } for config about build types.
31 | */
32 |
33 | if (projects && projects.length > 0) {
34 | compile(projects, generate);
35 | } else {
36 | handleWorkspaces(async (packageParentDir, packageChildDir) => {
37 | const packageChildPath = path.resolve(packageParentDir, packageChildDir);
38 | await compileProject(generate, packageChildPath);
39 | });
40 | }
41 |
--------------------------------------------------------------------------------
/packages/fronts-transport/src/globalTransport.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/ban-types */
2 | import { ListenerOptions, Transport, TransportOptions } from 'data-transport';
3 | import { broadcastMessage, isParentFronts } from './postMessage';
4 |
5 | interface GlobalTransportOptions extends Partial38 |
39 |
useWebComponents example
40 | 41 |42 |
43 |
useWebComponentsWithReact example
44 |
12 |
13 | 
14 |
16 |
19 |
47 |
48 | );
49 | }
50 |
51 | export default App;
52 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/vite-react/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/examples/version-control/app3/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 | const ModuleFederationPlugin = require('webpack').container
3 | .ModuleFederationPlugin;
4 | const path = require('path');
5 | const { createWebpackConfig, insertStyle } = require('fronts-bundler');
6 |
7 | module.exports = createWebpackConfig({
8 | entry: './src/index',
9 | mode: 'development',
10 | devServer: {
11 | contentBase: path.join(__dirname, 'dist'),
12 | port: 3003,
13 | },
14 | output: {
15 | publicPath: 'auto',
16 | },
17 | resolve: {
18 | extensions: ['.ts', '.tsx', '.js', '.jsx'],
19 | alias: {
20 | react: path.resolve(__dirname, '../../../node_modules/react'),
21 | },
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.(j|t)sx?$/,
27 | loader: 'babel-loader',
28 | exclude: /node_modules/,
29 | options: {
30 | presets: ['@babel/preset-react', '@babel/preset-typescript'],
31 | },
32 | },
33 | {
34 | test: /\.css$/,
35 | exclude: /node_modules/,
36 | use: [
37 | {
38 | loader: 'style-loader',
39 | options: {
40 | insert: insertStyle,
41 | },
42 | },
43 | {
44 | loader: 'css-loader',
45 | options: {
46 | modules: true,
47 | },
48 | },
49 | ],
50 | },
51 | ],
52 | },
53 | plugins: [
54 | new HtmlWebpackPlugin({
55 | template: './public/index.html',
56 | }),
57 | ],
58 | });
59 |
--------------------------------------------------------------------------------
/examples/all-features/app2/src/ButtonContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import { useApp, useWebComponents } from 'fronts';
3 |
4 | const style = {
5 | padding: 12,
6 | backgroundColor: '#cccccc',
7 | };
8 |
9 | const ButtonContainer = () => {
10 | const [count, setCount] = useState(0);
11 |
12 | const ref = useRef(null);
13 | useEffect(() => {
14 | let callback: (() => void) | void;
15 | useApp({
16 | name: 'app3',
17 | target: ref.current!,
18 | loader: () => import('app3/src/bootstrap'),
19 | }).then((unmount) => {
20 | callback = unmount;
21 | });
22 | return () => callback && callback();
23 | }, []);
24 |
25 | const ref1 = useRef(null);
26 | useEffect(() => {
27 | let callback: (() => void) | void;
28 | useWebComponents({
29 | retargetEvent: true,
30 | name: 'app3',
31 | loader: () => import('app3/src/bootstrap'),
32 | target: ref1.current!,
33 | shadowMode: 'open',
34 | useShadowDOM: true,
35 | }).then((unmount) => {
36 | callback = unmount;
37 | });
38 | return () => callback && callback();
39 | }, []);
40 |
41 | return (
42 | Hello Vite + federation! +1+2+3+4
15 |20 | 23 |
24 |
25 | Edit App.tsx and save to test HMR updates.
26 |
28 | 34 | Learn React 35 | 36 | {" | "} 37 | 43 | Vite Docs 44 | 45 |
46 |
43 | App 2 Container
44 |
47 |
48 |
49 | 50 |
51 |
52 |
55 | );
56 | };
57 |
58 | export default ButtonContainer;
59 |
--------------------------------------------------------------------------------
/website/static/img/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/rs-sidecart/webpack.config.js:
--------------------------------------------------------------------------------
1 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
2 | const path = require("path");
3 | const pkg = require("./package.json");
4 |
5 | module.exports = {
6 | entry: "./src/index",
7 | mode: "production",
8 | target: "web",
9 | devtool: "eval-source-map",
10 | output: {
11 | libraryTarget: "system",
12 | libraryExport: "main",
13 | publicPath: "http://localhost:8080/",
14 | },
15 |
16 | resolve: {
17 | extensions: [".jsx", ".js", ".json"],
18 | },
19 |
20 | devServer: {
21 | static: {
22 | directory: path.join(__dirname),
23 | },
24 | port: 8080,
25 | headers: {
26 | "Access-Control-Allow-Origin": "*",
27 | "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
28 | "Access-Control-Allow-Headers":
29 | "X-Requested-With, content-type, Authorization",
30 | },
31 | },
32 |
33 | optimization: {
34 | minimize: true,
35 | },
36 |
37 | module: {
38 | rules: [
39 | {
40 | test: /\.(js|jsx)$/,
41 | exclude: /node_modules/,
42 | use: {
43 | loader: "babel-loader",
44 | options: {
45 | presets: ["@babel/preset-react", "@babel/preset-env"],
46 | },
47 | },
48 | },
49 | ],
50 | },
51 | plugins: [
52 | new ModuleFederationPlugin({
53 | name: "rollup_spa",
54 | library: { type: "system" },
55 | filename: "remoteEntry.js",
56 | remotes: {},
57 | exposes: {
58 | "./Header": "./src/Header",
59 | },
60 | shared: require("./package.json").dependencies,
61 | }),
62 | ],
63 | };
64 |
--------------------------------------------------------------------------------
/packages/fronts/src/useIframe.ts:
--------------------------------------------------------------------------------
1 | import { getUid } from './getUid';
2 | import { getScriptLink } from './importApp';
3 | import { UseIframe } from './interface';
4 |
5 | /**
6 | *
7 | */
8 | export const getIframeUrl = async (siteName: string) => {
9 | let hasVersionControl: boolean;
10 | try {
11 | hasVersionControl = !!process.env.FPM_REG;
12 | } catch (e) {
13 | throw new Error(
14 | `The current running mode is SPA, it does not contain any Micro Frontends mode, please use the native iframe element API instead of 'useIframe()'.`
15 | );
16 | }
17 | if (hasVersionControl) {
18 | const scriptLink = await getScriptLink(siteName);
19 | const url = new URL(scriptLink).origin;
20 | return url;
21 | }
22 | const urlsMap: Record48 |
49 | 50 |
51 |
52 |
useWebComponents example
53 | 54 |useApp Example
26 | 27 | 28 | ); 29 | }, 30 | exact: true, 31 | }, 32 | { 33 | path: '/about', 34 | component: () => { 35 | const App2 = useAppWithReact({ 36 | name: 'app2', 37 | loader: loadScript('http://localhost:3002/bundle.js'), 38 | }); 39 | return ( 40 |
41 |
44 | );
45 | },
46 | exact: true,
47 | },
48 | ];
49 |
50 | const App = () => (
51 | useAppWithReact Example
42 |
53 |
56 | {routes.map((route) => (
57 |
65 |
66 | App 1
54 |
44 |
45 |
46 | );
47 | }),
48 | [loaded]
49 | );
50 | return loaded ? App : ({ fallback }) => fallback ?? null;
51 | };
52 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/webpack-spa/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | const { ModuleFederationPlugin } = require("webpack").container;
4 |
5 | const pkg = require("./package.json");
6 |
7 | /** @type {import('webpack').Configuration} */
8 | module.exports = {
9 | entry: "./src/index",
10 | mode: "production",
11 | target: "web",
12 | devtool: "eval-source-map",
13 | output: {
14 | libraryTarget: "system",
15 | libraryExport: "main",
16 | publicPath: "http://localhost:8081/",
17 | },
18 | optimization: {
19 | minimize: true,
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.jsx?$/,
25 | loader: "babel-loader",
26 | exclude: /node_modules/,
27 | options: {
28 | presets: ["@babel/preset-react"],
29 | },
30 | },
31 | ],
32 | },
33 | plugins: [
34 | new ModuleFederationPlugin({
35 | name: "rwebpackremote",
36 | library: { type: "system" },
37 | filename: "remoteEntry.js",
38 | remotes: {
39 | rollup_spa: "rollup_spa",
40 | },
41 | exposes: {
42 | "./Button": "./src/Button",
43 | },
44 | shared: {
45 | react: {
46 | eager: true,
47 | singleton: true,
48 | requiredVersion: pkg.dependencies.react,
49 | },
50 | "react-dom": {
51 | eager: true,
52 | singleton: true,
53 | requiredVersion: pkg.dependencies["react-dom"],
54 | },
55 | },
56 | }),
57 | ],
58 | devServer: {
59 | static: {
60 | directory: path.join(__dirname),
61 | },
62 | port: 8081,
63 | headers: {
64 | "Access-Control-Allow-Origin": "*",
65 | "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
66 | "Access-Control-Allow-Headers":
67 | "X-Requested-With, content-type, Authorization",
68 | },
69 | },
70 | };
71 |
--------------------------------------------------------------------------------
/examples/vite-react-simple/vite-react/serve.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const express = require("express");
4 | const { createServer: createViteServer } = require("vite");
5 |
6 | const isTest = process.env.NODE_ENV === "test" || !!process.env.VITE_TEST_BUILD;
7 |
8 | async function createServer(
9 | root = process.cwd(),
10 | isProd = process.env.NODE_ENV === "production"
11 | ) {
12 | const app = express();
13 | const resolve = (p) => path.resolve(__dirname, p);
14 | const indexProd = isProd
15 | ? fs.readFileSync(resolve("dist/index.html"), "utf-8")
16 | : "";
17 |
18 | let vite;
19 | if (!isProd) {
20 | vite = await createViteServer({
21 | root,
22 | logLevel: isTest ? "error" : "info",
23 | server: {
24 | middlewareMode: "ssr",
25 | watch: {
26 | usePolling: true,
27 | interval: 100,
28 | },
29 | },
30 | });
31 | app.use(vite.middlewares);
32 | } else {
33 | app.use(require("compression")());
34 | app.use(
35 | require("serve-static")(resolve("dist"), {
36 | index: false,
37 | })
38 | );
39 | }
40 |
41 | app.use("*", async (req, res) => {
42 | try {
43 | const url = req.originalUrl;
44 |
45 | let template;
46 | if (!isProd) {
47 | // always read fresh template in dev
48 | template = fs.readFileSync(resolve("index.html"), "utf-8");
49 | template = await vite.transformIndexHtml(url, template);
50 | } else {
51 | template = indexProd;
52 | }
53 |
54 | res.status(200).set({ "Content-Type": "text/html" }).end(template);
55 | } catch (e) {
56 | !isProd && vite.ssrFixStacktrace(e);
57 | console.log(e.stack);
58 | res.status(500).end(e.stack);
59 | }
60 | });
61 |
62 | app.listen(3000, () => {
63 | console.log("http://localhost:3000");
64 | });
65 | }
66 |
67 | createServer();
68 |
--------------------------------------------------------------------------------
/website/src/components/HomepageFeatures.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import styles from './HomepageFeatures.module.css';
4 |
5 | const FeatureList = [
6 | {
7 | title: 'Easy to Use',
8 | Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
9 | description: (
10 | <>
11 | Quickly build decentralized micro frontends projects, define a micro frontend by setting site.json, similar to package.json of NPM.
12 |
13 | ),
14 | },
15 | {
16 | title: 'Progressive',
17 | Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
18 | description: (
19 | <>
20 | It supports non-module-federation and allows gradual upgrade to support module federation and enable version control system.
21 |
22 | ),
23 | },
24 | {
25 | title: 'Concise & Diversity',
26 | Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
27 | description: (
28 | <>
29 | Provide clean API and support more micro frontends combination capability and provide re-architecture possibilities.
30 |
31 | ),
32 | },
33 | ];
34 |
35 | function Feature({Svg, title, description}) {
36 | return (
37 |
38 |
46 | );
47 | }
48 |
49 | export default function HomepageFeatures() {
50 | return (
51 |
39 |
40 |
41 |
42 |
45 | {title}
43 |{description}
44 |
53 |
59 |
54 | {FeatureList.map((props, idx) => (
55 |
58 | = (target: NodeElement, props?: P) => () => void;
5 |
6 | export type DynamicImport
71 | App 2 Container
72 |
75 |
104 | );
105 | };
106 |
107 | export default ButtonContainer;
108 |
--------------------------------------------------------------------------------
/website/docusaurus.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('@docusaurus/types').DocusaurusConfig} */
2 | module.exports = {
3 | title: 'Fronts',
4 | tagline: 'A progressive micro frontends framework for building Web applications',
5 | url: 'https://fronts.js.org/',
6 | baseUrl: '/',
7 | onBrokenLinks: 'throw',
8 | onBrokenMarkdownLinks: 'warn',
9 | favicon: 'img/favicon.ico',
10 | organizationName: 'unadlib', // Usually your GitHub org/user name.
11 | projectName: 'fronts', // Usually your repo name.
12 | themeConfig: {
13 | navbar: {
14 | title: 'Fronts',
15 | logo: {
16 | alt: 'A progressive micro frontends framework for building Web applications',
17 | src: 'img/logo.svg',
18 | },
19 | items: [
20 | {
21 | type: 'doc',
22 | docId: 'intro',
23 | position: 'left',
24 | label: 'Tutorial',
25 | },
26 | {to: '/blog', label: 'Blog', position: 'left'},
27 | {
28 | href: 'https://github.com/unadlib/fronts',
29 | label: 'GitHub',
30 | position: 'right',
31 | },
32 | ],
33 | },
34 | footer: {
35 | style: 'dark',
36 | links: [
37 | {
38 | title: 'Docs',
39 | items: [
40 | {
41 | label: 'Tutorial',
42 | to: '/docs/intro',
43 | },
44 | ],
45 | },
46 | {
47 | title: 'Community',
48 | items: [
49 | {
50 | label: 'Stack Overflow',
51 | href: 'https://stackoverflow.com/questions/tagged/fronts',
52 | },
53 | {
54 | label: 'Discord',
55 | href: 'https://discordapp.com/invite/fronts',
56 | },
57 | // {
58 | // label: 'Twitter',
59 | // href: 'https://twitter.com/fronts',
60 | // },
61 | ],
62 | },
63 | {
64 | title: 'More',
65 | items: [
66 | {
67 | label: 'Blog',
68 | to: '/blog',
69 | },
70 | {
71 | label: 'GitHub',
72 | href: 'https://github.com/unadlib/fronts',
73 | },
74 | ],
75 | },
76 | ],
77 | copyright: `Copyright © ${new Date().getFullYear()} Fronts Project, Inc. Built with Docusaurus.`,
78 | },
79 | },
80 | presets: [
81 | [
82 | '@docusaurus/preset-classic',
83 | {
84 | docs: {
85 | sidebarPath: require.resolve('./sidebars.js'),
86 | // Please change this to your repo.
87 | editUrl:
88 | 'https://github.com/unadlib/fronts/edit/master/website/',
89 | },
90 | blog: {
91 | showReadingTime: true,
92 | // Please change this to your repo.
93 | editUrl:
94 | 'https://github.com/unadlib/fronts/edit/master/website/blog/',
95 | },
96 | theme: {
97 | customCss: require.resolve('./src/css/custom.css'),
98 | },
99 | },
100 | ],
101 | ],
102 | };
103 |
--------------------------------------------------------------------------------
/examples/all-features/app1/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { HashRouter, Route, Switch } from 'react-router-dom';
3 | // import App2 from 'app2/src/App';
4 | import Navigation from './Navigation';
5 | import HomePage from './HomePage';
6 | import { useIframe, useApp } from 'fronts';
7 | import {
8 | useIframe as useIframeWithReact,
9 | useApp as useAppWithReact,
10 | useWebComponents as useWebComponentsWithReact,
11 | } from 'fronts-react';
12 | import { useRef } from 'react';
13 | import { useEffect } from 'react';
14 |
15 | const App2 = React.lazy(() => import('app2/src/App'));
16 |
17 | const routes = [
18 | {
19 | path: '/',
20 | component: HomePage,
21 | exact: true,
22 | },
23 | {
24 | path: '/app2',
25 | component: () => (
26 | //
76 |
77 | Inline as React Component example
78 |
80 |
81 | useApp example
82 |
83 |
84 |
85 | useAppWithReact example
86 |
88 |
89 | useWebComponent example
90 |
91 |
92 |
93 | useWebComponentWithReact example
94 |
96 |
97 | useIframe example
98 |
99 |
100 |
101 | useIframeWithReact example
102 | useApp example
85 |
86 | useAppWithReact example
87 | useWebComponentsWithReact example
89 |
100 |
113 | App 1
101 |