Federation (#5)

Author: ScriptedAlchemy

.github/workflows/e2e-tests.yml

@@ -1,4 +1,4 @@
-name: E2E Tests
+name: Build Test
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
     branches: [ main ]
 
 jobs:
-  e2e-tests:
+  build-test:
     runs-on: ubuntu-latest
 
     steps:
@@ -40,6 +40,12 @@ jobs:
       
       - name: Install dependencies
         run: pnpm install
+
+      - name: Build package
+        run: pnpm build
+        
+      - name: Run publint
+        run: npx publint --errors-only
 
       - name: Install Playwright browsers
         run: npx playwright install --with-deps chromium

.prettierignore

@@ -0,0 +1,20 @@
+# Build artifacts
+dist/
+node_modules/
+.git/
+.vscode/
+.idea/
+
+# Examples directory (not our focus)
+examples/
+
+# Test files (only focusing on src)
+tests/
+
+# Coverage reports
+coverage/
+
+# Lock files
+pnpm-lock.yaml
+package-lock.json
+yarn.lock 

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+} 

README.md

@@ -41,6 +41,10 @@ export default defineConfig(() => {
       pluginReactRouter({
         // Optional: Enable custom server mode
         customServer: false,
+        // Optional: Specify server output format
+        serverOutput: "commonjs",
+        //Optional: enable experimental support for module federation
+        federation: false
       }), 
       pluginReact()
     ],
@@ -60,7 +64,19 @@ pluginReactRouter({
    * Enable this when you want to handle server setup manually.
    * @default false
    */
-  customServer?: boolean
+  customServer?: boolean,
+
+  /**
+   * Specify the output format for server-side code.
+   * Options: "commonjs" | "module"
+   * @default "module"
+   */
+  serverOutput?: "commonjs" | "module"
+  /**
+   * Enable experimental support for module federation
+   * @default false
+   */
+  federation?: boolean
 })
 ```
 

examples/cloudflare/package.json

@@ -21,8 +21,8 @@
     "@cloudflare/workers-types": "^4.20241112.0",
     "@react-router/cloudflare": "^7.4.0",
     "@react-router/dev": "^7.4.0",
-    "@rsbuild/core": "^1.2.3",
-    "@rsbuild/plugin-react": "^1.1.0",
+    "@rsbuild/core": "^1.2.19",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@rsbuild/plugin-react-router": "workspace:*",
     "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20",

examples/custom-node-server/package.json

@@ -8,7 +8,10 @@
     "dev": "RSDOCTOR=false node server.js",
     "start": "NODE_ENV=production node server.js",
     "build": "rsbuild build",
-    "typecheck": "react-router typegen && tsc"
+    "typecheck": "react-router typegen && tsc",
+    "test:e2e": "pnpm run dev & sleep 5 && playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui"
   },
   "keywords": [],
   "author": "",
@@ -23,9 +26,10 @@
     "react-router": "^7.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.1",
     "@react-router/dev": "^7.4.0",
-    "@rsbuild/core": "^1.2.3",
-    "@rsbuild/plugin-react": "^1.1.0",
+    "@rsbuild/core": "^1.2.19",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@rsbuild/plugin-react-router": "workspace:*",
     "@rsdoctor/rspack-plugin": "^0.4.13",
     "@types/express": "^5.0.0",

examples/custom-node-server/playwright.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  // Maximum time one test can run for
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000
+  },
+  // Run tests in files in parallel
+  fullyParallel: false,
+  // Fail the build on CI if you accidentally left test.only in the source code
+  forbidOnly: !!process.env.CI,
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+  
+  // Shared settings for all the projects below
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`
+    baseURL: 'http://localhost:3000',
+    
+    // Collect trace when retrying the failed test
+    trace: 'on-first-retry',
+    
+    // Take screenshot on test failure
+    screenshot: 'only-on-failure',
+  },
+
+  // Configure only Chrome desktop browser
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ]
+}); 

examples/custom-node-server/server/app.ts

@@ -7,7 +7,7 @@ declare module 'react-router' {
   }
 }
 
-export const index = createRequestHandler({
+export const app = createRequestHandler({
   // @ts-expect-error - virtual module provided by React Router at build time
   build: () => import('virtual/react-router/server-build'),
   getLoadContext() {

examples/custom-node-server/server/index.ts

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}