feat: include react project

react/package.json

@@ -1,27 +1,26 @@
 {
-  "name": "library1",
+  "name": "ufabc-next-web-react",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "webpack serve --mode development"
+    "serve": "webpack serve --mode development"
   },
-  "author": "Renan Zago Lorijola <[email protected]>",
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.31",
-    "@types/react-dom": "^18.0.11",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^0.15.6",
-    "html-webpack-plugin": "^5.5.0",
+    "@types/node": "^18.16.3",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.3",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.1",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
-    "typescript": "^5.0.2",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "typescript": "^5.0.4",
+    "webpack": "^5.82.0",
+    "webpack-cli": "^5.0.2",
+    "webpack-dev-server": "^4.13.3"
   },
   "engines": {
     "node": ">=v18.4.0",

react/src/bootstrap.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
-import HelloWorld from "./components/HelloWorld";
+import HelloWorld from './components/HelloWorld';
 
-const rootElement = document.getElementById("app");
+const rootElement = document.getElementById('app');
 
-if (!rootElement) throw new Error("Failed to find the root element.");
+if (!rootElement) throw new Error('Failed to find the root element.');
 
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
     <HelloWorld name="John" />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

react/src/components/HelloWorld.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 type HelloWorldProps = {
   name: string;

react/src/components/Test.tsx

@@ -1,4 +1,3 @@
 export default function HelloWorld() {
-    return <h1>Test React Component</h1>;
-  }
-
+  return <h1>Test React Component</h1>;
+}

react/src/index.ts

@@ -1,3 +1,3 @@
-import("./bootstrap");
+import('./bootstrap');
 
 export {};

react/tsconfig.json

@@ -21,4 +21,4 @@
   "types": ["react/next", "react-dom/next"],
   "include": ["src"],
   "exclude": ["node_modules"]
-}
+}

src/utils/moduleFederation.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { defineAsyncComponent, h } from 'vue';
 import Loading from '@/components/MFLoading.vue';
 import Error from '@/components/MFError.vue';
@@ -12,7 +13,7 @@ export function defineFederatedReactComponent({
   return defineAsyncComponent({
     loader: async () =>
       defineReactComponent({
-        component: ((await loader()) as any)[component],
+        component: (await loader())[component],
         ...options,
       }),
     loadingComponent: Loading,
@@ -21,7 +22,7 @@ export function defineFederatedReactComponent({
   });
 }
 
-export function defineReactComponent({ component, ...options }: any) {
+export function defineReactComponent({ component, ...options }: any = {}) {
   return {
     ...options,
     setup(props: React.Attributes) {

src/views/HistoryView.vue

@@ -26,10 +26,7 @@ async function loginDev() {
 const HelloWorld = defineFederatedReactComponent({
   loader: () => import('react/HelloWorld'),
   props: {
-    name: { type: String, default: 'unknown' },
-  },
-  mounted() {
-    //
+    name: { type: String, default: 'World' },
   },
 });
 </script>