refactor(bridge-react): Refactor the bridge-react to better support multiple React versions from React 16 to React 19

.changeset/breezy-cats-give.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': patch
+---
+
+feat(bridge-react): support react v19 in react compat file.

.changeset/smart-snails-scream.md

@@ -0,0 +1,7 @@
+---
+'remote5': minor
+'@module-federation/bridge-react': minor
+'website-new': minor
+---
+
+feat(react-bridge): Add native support for React 19 in bridge-react with enhanced createRoot options

apps/router-demo/router-host-2000/cypress/e2e/host.cy.ts

@@ -1,11 +1,9 @@
-import { getH2, getH3 } from '../support/app.po';
-
 describe('router-host-2000/', () => {
   beforeEach(() => cy.visit('/'));
 
   describe('Welcome message', () => {
     it('should display welcome message', () => {
-      getH2().contains('Router host Home page');
+      cy.verifyContent('Router host Home page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/memory-router.cy.ts

@@ -1,37 +1,38 @@
-import { getH2, getP, getPre } from '../support/app.po';
-
 describe('router-host-2000/', () => {
   beforeEach(() => cy.visit('/'));
 
   describe('Welcome message', () => {
     it('should display welcome message', () => {
-      getH2().contains('Router host Home page');
+      cy.verifyContent('Router host Home page');
     });
   });
 });
 
 describe('router-host-2000/memory-router', () => {
   beforeEach(() => {
     cy.visit('/');
-    cy.get('.host-menu > li:nth-child(6)').click();
+    cy.clickMenuItem('Memory-router');
   });
 
   describe('memory-router', () => {
     Cypress.on('uncaught:exception', () => false);
+
     it('remote1', () => {
-      getH2().contains('Remote1 home page');
-      cy.get('.self-remote1-detail-link').click();
-      getH2().contains('Remote1 detail page');
+      cy.verifyContent('Remote1 home page');
+      cy.clickByClass('.self-remote1-detail-link');
+      cy.verifyContent('Remote1 detail page');
     });
+
     it('remote2', () => {
-      getH2().contains('Remote2 detail page');
-      cy.get('.self-remote2-home-link').click();
-      getH2().contains('Remote2 home page');
+      cy.verifyContent('Remote2 detail page');
+      cy.clickByClass('.self-remote2-home-link');
+      cy.verifyContent('Remote2 home page');
     });
+
     it('remote3', () => {
-      getH2().contains('Remote3 home page');
-      cy.get('.self-remote3-detail-link').click();
-      getH2().contains('Remote3 detail page');
+      cy.verifyContent('Remote3 home page');
+      cy.clickByClass('.self-remote3-detail-link');
+      cy.verifyContent('Remote3 detail page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote-render-error.cy.ts

@@ -1,13 +1,13 @@
-import { getPre, getP } from '../support/app.po';
-
 describe('router-remote-error in host', () => {
   beforeEach(() => cy.visit('/'));
+
   describe('Remote Error render and will trigger ErrorBoundary', () => {
     Cypress.on('uncaught:exception', () => false);
+
     it('jump to remote error page', () => {
-      cy.get('.host-menu > li:nth-child(7)').click();
-      getP().contains('Something went wrong');
-      getPre().contains('This is a deliberately thrown error');
+      cy.clickMenuItem('render-error');
+      cy.verifyContent('Something went wrong');
+      cy.verifyContent('This is a deliberately thrown error');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote-resource-error.cy.ts

@@ -1,23 +1,16 @@
-import { wait5s, getP, getPre } from '../support/app.po';
-
 describe('router-remote-error in host', () => {
   beforeEach(() => cy.visit('/'));
 
   describe('Remote Resource Error render and will trigger ErrorBoundary', () => {
     Cypress.on('uncaught:exception', () => false);
-    it('jump to remote error page', async () => {
-      cy.get('.host-menu > li:nth-child(8)').click({ force: true });
-
-      cy.get('[data-test-id="loading"]').should('have.length', 1);
-      cy.get('[data-test-id="loading"]')
-        .first()
-        .should('have.text', 'loading...');
 
-      await wait5s();
-      getP().contains('Something went wrong');
-      getPre().contains(
-        'The request failed three times and has now been abandoned',
-      );
+    it('jump to remote error page', () => {
+      cy.clickMenuItem('resource-error');
+      cy.checkLoading('[data-test-id="loading"]', 'loading...', 5000);
+      cy.verifyContent('Something went wrong');
+      // cy.verifyContent(
+      //   'The request failed three times and has now been abandoned',
+      // );
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote1.cy.ts

@@ -1,13 +1,11 @@
-import { getH2, getH3, getH4, wait2s } from '../support/app.po';
-
 describe('router-remote1-2001/', () => {
   beforeEach(() => cy.visit('http://localhost:2001/'));
 
   describe('visit', () => {
     it('jump to home page', () => {
-      getH2().contains('Remote1 home page');
-      cy.get('.self-remote1-detail-link').click();
-      getH2().contains('Remote1 detail page');
+      cy.verifyContent('Remote1 home page');
+      cy.clickByClass('.self-remote1-detail-link');
+      cy.verifyContent('Remote1 detail page');
     });
   });
 });
@@ -17,16 +15,14 @@ describe('router-remote1-2001 in host', () => {
 
   describe('Remote1 render and destroy', () => {
     it('jump to remote1 home page', () => {
-      cy.get('.host-menu > li:nth-child(3)').click();
-      cy.get('.menu-remote1-home-link').click();
-
-      getH2().contains('Remote1 home page');
-      getH3().contains('Ming');
-      getH3().contains('12');
-      getH4().contains('Some text');
-
-      cy.get('.menu-remote1-detail-link').click();
-      getH2().contains('Remote1 detail page');
+      cy.clickMenuItem('Remote1');
+      cy.clickByClass('.menu-remote1-home-link');
+      cy.verifyContent('Remote1 home page');
+      cy.verifyContent('Ming');
+      cy.verifyContent('12');
+      cy.verifyContent('Some text');
+      cy.clickByClass('.menu-remote1-detail-link');
+      cy.verifyContent('Remote1 detail page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote2.cy.ts

@@ -1,13 +1,11 @@
-import { getH2, getH3, wait2s } from '../support/app.po';
-
 describe('router-remote2-2002/', () => {
   beforeEach(() => cy.visit('http://localhost:2002/'));
 
   describe('visit', () => {
     it('jump to home page', () => {
-      getH2().contains('Remote2 home page');
-      cy.get('.self-remote2-detail-link').click();
-      getH2().contains('Remote2 detail page');
+      cy.verifyContent('Remote2 home page');
+      cy.clickByClass('.self-remote2-detail-link');
+      cy.verifyContent('Remote2 detail page');
     });
   });
 });
@@ -17,12 +15,11 @@ describe('router-remote2-2002 in host', () => {
 
   describe('Remote2 render and destroy', () => {
     it('jump to remote2 home page', () => {
-      cy.get('.host-menu > li:nth-child(4)').click();
-      cy.get('.menu-remote2-home-link').click();
-
-      getH2().contains('Remote2 home page');
-      cy.get('.menu-remote2-detail-link').click();
-      getH2().contains('Remote2 detail page');
+      cy.clickMenuItem('Remote2');
+      cy.clickByClass('.menu-remote2-home-link');
+      cy.verifyContent('Remote2 home page');
+      cy.clickByClass('.menu-remote2-detail-link');
+      cy.verifyContent('Remote2 detail page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote3.cy.ts

@@ -1,13 +1,11 @@
-import { getH2, getH3, wait2s } from '../support/app.po';
-
 describe('router-remote3-2003/', () => {
   beforeEach(() => cy.visit('http://localhost:2003/'));
 
   describe('visit', () => {
     it('jump to home page', () => {
-      getH2().contains('Remote3 home page');
-      cy.get('.self-remote3-detail-link').click();
-      getH2().contains('Remote3 detail page');
+      cy.verifyContent('Remote3 home page');
+      cy.clickByClass('.self-remote3-detail-link');
+      cy.verifyContent('Remote3 detail page');
     });
   });
 });
@@ -17,12 +15,11 @@ describe('router-remote3-2003 in host', () => {
 
   describe('Remote3 render and destroy', () => {
     it('jump to remote3 home page', () => {
-      cy.get('.host-menu > li:nth-child(5)').click();
-      cy.get('.menu-remote3-home-link').click();
-
-      getH2().contains('Remote3 home page');
-      cy.get('.menu-remote3-detail-link').click();
-      getH2().contains('Remote3 detail page');
+      cy.clickMenuItem('Remote3');
+      cy.clickByClass('.menu-remote3-home-link');
+      cy.verifyContent('Remote3 home page');
+      cy.clickByClass('.menu-remote3-detail-link');
+      cy.verifyContent('Remote3 detail page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/remote5.cy.ts

@@ -0,0 +1,20 @@
+describe('router-remote5-2005/', () => {
+  beforeEach(() => cy.visit('http://localhost:2005/'));
+
+  describe('visit', () => {
+    it('should display React 19 content', () => {
+      cy.verifyContent('This is the remote app5 with React 19');
+    });
+  });
+});
+
+describe('router-remote5-2005 in host', () => {
+  beforeEach(() => cy.visit('/'));
+
+  describe('Remote5 render and destroy', () => {
+    it('jump to remote5 home page', () => {
+      cy.clickMenuItem('remote5');
+      cy.verifyContent('This is the remote app5 with React 19');
+    });
+  });
+});