perf: switch to ESM by default

.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 [email protected]');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "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"
+  ]
+}

apps/bundle-size/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "bundle-size",
+  "private": true,
+  "version": "0.0.0",
+  "devDependencies": {
+    "@module-federation/core": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
+    "@module-federation/typescript": "workspace:*",
+    "@module-federation/enhanced": "workspace:*",
+    "@module-federation/dts-plugin": "workspace:*",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "react-refresh": "0.14.2"
+  },
+  "dependencies": {
+    "antd": "4.24.15"
+  }
+}

apps/bundle-size/project.json

@@ -0,0 +1,145 @@
+{
+  "name": "bundle-size",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/bundle-size/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "apps/bundle-size/dist",
+        "index": "apps/bundle-size/src/index.html",
+        "baseHref": "/",
+        "main": "apps/bundle-size/src/index.ts",
+        "tsConfig": "apps/bundle-size/tsconfig.app.json",
+        "styles": [],
+        "scripts": [],
+        "webpackConfig": "apps/bundle-size/webpack.config.js",
+        "babelUpwardRootMode": true
+      },
+      "configurations": {
+        "development": {
+          "extractLicenses": false,
+          "optimization": false,
+          "sourceMap": true,
+          "vendorChunk": true
+        },
+        "production": {
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": false,
+          "vendorChunk": false
+        }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
+    },
+    "serve": {
+      "executor": "@nx/webpack:dev-server",
+      "defaultConfiguration": "production",
+      "options": {
+        "buildTarget": "bundle-size:build",
+        "hmr": true,
+        "port": 3005,
+        "devRemotes": ["3006-runtime-remote"]
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "bundle-size:build:development"
+        },
+        "production": {
+          "buildTarget": "bundle-size:build:production",
+          "hmr": false
+        }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/bundle-size/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "bundle-size:build",
+        "port": 3005
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "bundle-size:build:development"
+        },
+        "production": {
+          "buildTarget": "bundle-size:build:production"
+        }
+      }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/bundle-size/cypress.config.ts",
+        "testingType": "e2e",
+        "baseUrl": "http://127.0.0.1:3005",
+        "browser": "chrome"
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
+      "configurations": {
+        "development": {
+          "runnerUi": true,
+          "browser": "electron",
+          "exit": false,
+          "watch": true
+        }
+      }
+    },
+    "test:e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": true,
+        "commands": [
+          {
+            "command": "lsof -i :3005 || nx run bundle-size:serve",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "sleep 4 && nx run bundle-size:e2e",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "getsize": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx nx build bundle-size --configuration=production && sleep 1 && if [ -f apps/bundle-size/dist/remoteEntry.js ]; then ls -lah apps/bundle-size/dist/remoteEntry.js | awk '{print \"remoteEntry.js size: \" $5}' && gzip -c apps/bundle-size/dist/remoteEntry.js | wc -c | awk '{print \"gzip size: \" $1 \" bytes\"}' && brotli -c apps/bundle-size/dist/remoteEntry.js | wc -c | awk '{print \"brotli size: \" $1 \" bytes\"}'; else echo \"remoteEntry.js not found\"; fi"
+          }
+        ]
+      }
+    }
+  }
+}