feat: Bridge about React v19

dev/app-main/src/components/constant.tsx

@@ -36,6 +36,16 @@ export const subAppMenus = [
       { path: 'react18/about', title: '关于' },
     ],
   },
+  {
+    key: 'react19',
+    path: '/react19',
+    icon: <img src={reactSvg} className="sidebar-item-icon" />,
+    title: '【子应用】react19',
+    routes: [
+      { path: 'react19/home', title: '首页' },
+      { path: 'react19/about', title: '关于' },
+    ],
+  },
   {
     key: 'vue3',
     path: '/vue3',

dev/app-main/src/constant.ts

@@ -38,6 +38,11 @@ export const localApps: AppInfo = [
     activeWhen: '/react18',
     entry: getProxyHost('dev/react18'),
   },
+  {
+    name: 'react19',
+    activeWhen: '/react19',
+    entry: getProxyHost('dev/react19'),
+  },
   {
     name: 'vue3',
     activeWhen: '/vue3',

dev/app-react-19/.babelrc

@@ -0,0 +1,33 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react", {
+      "runtime": "automatic"
+    }
+  ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+          "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}

dev/app-react-19/LICENSE

@@ -0,0 +1,48 @@
+MIT License
+
+Copyright (c) 2021 Bytedance Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+The code implementation modified from external library  are:
+
+- single-spa
+
+  License (MIT)
+
+  Copyright (c) 2020 single-spa
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.

dev/app-react-19/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@garfish-dev/react19",
+  "private": true,
+  "dependencies": {
+    "@garfish/bridge-react-v19": "workspace:*",
+    "babel-runtime": "^6.26.0",
+    "history": "^5.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-router-dom": "6.3.0",
+    "redux": "^4.1.2",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.1.2",
+    "mobx": "^6.3.6",
+    "@arco-design/web-react": "^2.28.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-decorators": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.14.5",
+    "@babel/register": "^7.13.14",
+    "@babel/runtime": "^7.14.6",
+    "babel-loader": "^8.1.0",
+    "babel-register": "^6.26.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "less": "^3.13.1",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.35.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.2.1",
+    "@uiw/react-md-editor": "3.9.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "react-refresh": "^0.11.0"
+  },
+  "scripts": {
+    "start": "cross-env NODE_ENV=development webpack-dev-server --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress"
+  }
+}

dev/app-react-19/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>app react v19</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

dev/app-react-19/src/App.less

@@ -0,0 +1,58 @@
+@import '../node_modules/@arco-design/web-react/dist/css/index.less';
+
+@prefix: sub-app-react16;
+
+.@{prefix}-layout-content {
+  .App {
+    text-align: center;
+    background-color: #282c34;
+    font-size: 18px;
+    overflow: hidden;
+    color: white;
+  }
+
+  .App-logo {
+    height: 200px;
+    pointer-events: none;
+  }
+
+  .App ul {
+    display: inline-block;
+    list-style: none;
+  }
+
+  .App li {
+    display: inline-block;
+    list-style: none;
+    padding: 10px;
+  }
+
+  .App a:visited {
+    color: #61dafb;
+  }
+
+  .App a.active {
+    color: #7fffd4;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+
+  .click-btn {
+    color: coral;
+    cursor: pointer;
+    margin-top: 6px;
+  }
+
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

dev/app-react-19/src/App.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState, createContext } from 'react';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { AppInfo } from '@garfish/bridge-react-v19';
+import { Layout } from '@arco-design/web-react';
+import logo from './logo.svg';
+import './App.less';
+
+export const SubAppContext = createContext<AppInfo>({} as AppInfo);
+const Content = Layout.Content;
+
+export const prefixCls = 'sub-app-react19';
+
+const App = () => {
+  const location = useLocation();
+  const [isActive, setIsActive] = useState('home');
+
+  useEffect(() => {
+    setIsActive(location.pathname.includes('about') ? 'about' : 'home');
+  }, [location.pathname]);
+
+  return (
+    <SubAppContext.Consumer>
+      {(appInfo) => {
+        return (
+          <Content>
+            <div className="App">
+              <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <p>
+                  Thank you for the React applications use garfish.
+                  <span style={{ color: 'aqua' }}> This is React19. </span>
+                </p>
+                <p>
+                  Edit <code>src/App.js</code> and save to reload.
+                </p>
+
+                <ul>
+                  <li onClick={() => setIsActive('home')}>
+                    <NavLink
+                      to="/home"
+                      className={isActive === 'home' ? 'tabActive' : ''}
+                    >
+                      Home
+                    </NavLink>
+                  </li>
+                  <li onClick={() => setIsActive('about')}>
+                    <NavLink
+                      to="/about"
+                      className={isActive === 'home' ? 'tabActive' : ''}
+                    >
+                      About
+                    </NavLink>
+                  </li>
+                </ul>
+              </header>
+              <Outlet />
+            </div>
+          </Content>
+        );
+      }}
+    </SubAppContext.Consumer>
+  );
+};
+
+export default App;

dev/app-react-19/src/ErrorBoundary.tsx

@@ -0,0 +1,13 @@
+import { Result } from '@arco-design/web-react';
+
+const Error = () => {
+  return (
+    <Result
+      status="error"
+      title="Error message"
+      subTitle="Something went wrong. Please try again. "
+    ></Result>
+  );
+};
+
+export default Error;

dev/app-react-19/src/PageNotFound.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Result } from '@arco-design/web-react';
+
+const PageNotFound = () => {
+  return <Result status="404" subTitle="Whoops, that page is gone. "></Result>;
+};
+
+export default PageNotFound;

dev/app-react-19/src/index.tsx

@@ -0,0 +1,38 @@
+import { createRoot } from 'react-dom/client';
+import { reactBridge } from '@garfish/bridge-react-v19';
+import RootComponent from './root';
+import ErrorBoundary from './ErrorBoundary';
+
+export const provider = reactBridge({
+  el: '#root', //mount node
+  rootComponent: RootComponent, // a class or stateless function component
+  errorBoundary: (e: any) => <ErrorBoundary />,
+});
+
+// 在首次加载和执行时会触发该函数
+// export const provider = () => {
+//   let root = null;
+//   return {
+//     render({ basename, dom, store, props }) {
+//       const container = dom.querySelector('#root');
+//       root = createRoot(container!);
+//       (root as any).render(<RootComponent basename={basename} />);
+//     },
+//     destroy({ dom }) {
+//       (root as any).unmount();
+//     },
+//   };
+// };
+
+// 这能够让子应用独立运行起来，以保证后续子应用能脱离主应用独立运行，方便调试、开发
+if (!window.__GARFISH__) {
+  const container = document.getElementById('root');
+  const root = createRoot(container!);
+  root.render(
+    <RootComponent
+      basename={
+        process.env.NODE_ENV === 'production' ? '/examples/subapp/react18' : '/'
+      }
+    />,
+  );
+}

dev/app-react-19/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;