perf: switch to ESM by default (#3688)

Author: ScriptedAlchemy

.changeset/gold-bottles-promise.md

@@ -0,0 +1,15 @@
+---
+'@module-federation/inject-external-runtime-core-plugin': minor
+'@module-federation/webpack-bundler-runtime': minor
+'@module-federation/data-prefetch': minor
+'@module-federation/runtime-tools': minor
+'@module-federation/runtime-core': minor
+'@module-federation/enhanced': minor
+'bundle-size': minor
+'@module-federation/runtime': minor
+'@module-federation/node': minor
+'@module-federation/sdk': minor
+'@module-federation/esbuild': patch
+---
+
+Switch to esm modules by default

.cursorignore

@@ -5,15 +5,9 @@
 **/dist/
 
 # Documentation and config files
-**/*.md
 **/*.yaml
 **/*.yml
-**/.eslintrc*
-**/.prettierrc*
-**/.swcrc
-**/jest.config.*
-**/tsconfig.*
-**/*/stats.json
+
 
 # Explicitly ignore specific packages
 packages/typescript/
@@ -24,7 +18,6 @@ packages/native-federation-typescript/
 packages/esbuild/
 
 # Ignore specific directories
-apps/
 webpack/tooling/
 webpack/setup/
 webpack/test/
@@ -35,7 +28,7 @@ tools/
 .vscode/
 .verdaccio/
 
-!apps/manifest-demo/*.ts
+
 
 # Ignore specific files
 .cursorignore

apps/bundle-size/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/bundle-size/cypress.config.ts

@@ -0,0 +1,7 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
+});

apps/bundle-size/cypress/e2e/app.cy.ts

@@ -0,0 +1,80 @@
+import { getH1, getH3 } from '../support/app.po';
+
+describe('3005-runtime-host/', () => {
+  beforeEach(() => cy.visit('/'));
+
+  describe('Welcome message', () => {
+    it('should display welcome message', () => {
+      getH1().contains('Runtime Demo');
+    });
+  });
+
+  describe('Image checks', () => {
+    it('should check that the home-webpack-png and remote1-webpack-png images are not 404', () => {
+      // Get the src attribute of the home-webpack-png image
+      cy.get('img.home-webpack-png')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          cy.log(src);
+          cy.request(src).its('status').should('eq', 200);
+        });
+
+      // Get the src attribute of the shop-webpack-png image
+      cy.get('img.remote1-webpack-png')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          // Send a GET request to the src URL
+          cy.request(src).its('status').should('eq', 200);
+        });
+    });
+
+    it('should check that the home-webpack-svg and remote1-webpack-svg images are not 404', () => {
+      // Get the src attribute of the home-webpack-png image
+      cy.get('img.home-webpack-svg')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          cy.log(src);
+          cy.request(src).its('status').should('eq', 200);
+        });
+
+      // Get the src attribute of the shop-webpack-png image
+      cy.get('img.remote1-webpack-svg')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          // Send a GET request to the src URL
+          cy.request(src).its('status').should('eq', 200);
+        });
+    });
+  });
+
+  describe('Shared react hook check', () => {
+    it('should display text which comes from remote1 hook', () => {
+      cy.get('.remote1-text')
+        .invoke('html')
+        .should('equal', 'Custom hook from localhost:3006 works!');
+    });
+  });
+
+  describe('dynamic remote check', () => {
+    describe('dynamic-remote/ButtonOldAnt', () => {
+      it('should display remote button', () => {
+        cy.get('button.test-remote2').contains('Button');
+      });
+      it('should use host shared(antd)', () => {
+        cy.get('button.test-remote2').contains('Button from antd@4.24.15');
+      });
+    });
+  });
+});

apps/bundle-size/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/bundle-size/cypress/support/app.po.ts

@@ -0,0 +1,3 @@
+export const getH1 = () => cy.get('h1');
+export const getH2 = () => cy.get('h2');
+export const getH3 = () => cy.get('h3');

apps/bundle-size/cypress/support/commands.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  // console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/bundle-size/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

apps/bundle-size/cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}