feat: add data loader demo

modernjs-ssr-data-loader/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com

modernjs-ssr-data-loader/README.md

@@ -0,0 +1,14 @@
+# advance-ssr-demo
+
+This demo shows ssr with data loader in provider and ssr by route abilities.
+
+## how to start?
+
+Run `yarn` to install the dependencies.
+
+Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3062 and 3061 respectively.
+
+
+Visit follow url in browser:
+* [SSR with data loader in provider](http://localhost:3062/entry-one/nested-routes/pathname)
+* [CSR](http://localhost:3062/entry-two)

modernjs-ssr-data-loader/host/@mf-types/index.d.ts

@@ -0,0 +1,44 @@
+import type {
+  PackageType as PackageType_0,
+  RemoteKeys as RemoteKeys_0,
+} from './remote/apis.d.ts';
+declare module '@module-federation/runtime' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@module-federation/enhanced/runtime' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@module-federation/runtime-tools' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@modern-js/runtime/mf' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}

modernjs-ssr-data-loader/host/@mf-types/remote/Button.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/components/Button';
+export { default } from './compiled-types/src/components/Button';

modernjs-ssr-data-loader/host/@mf-types/remote/Image.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/components/Image';
+export { default } from './compiled-types/src/components/Image';

modernjs-ssr-data-loader/host/@mf-types/remote/apis.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'remote/Image' | 'remote/Button' | 'remote/main/mf-routes' | 'remote/main/route-server-loaders';
+    type PackageType<T> = T extends 'remote/main/route-server-loaders' ? typeof import('remote/main/route-server-loaders') :T extends 'remote/main/mf-routes' ? typeof import('remote/main/mf-routes') :T extends 'remote/Button' ? typeof import('remote/Button') :T extends 'remote/Image' ? typeof import('remote/Image') :any;

modernjs-ssr-data-loader/host/@mf-types/remote/compiled-types/src/components/Button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ButtonProps {
+    onClick?: () => void;
+    children?: React.ReactNode;
+    variant?: 'primary' | 'secondary';
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

modernjs-ssr-data-loader/host/@mf-types/remote/compiled-types/src/components/Image.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

modernjs-ssr-data-loader/host/@mf-types/remote/main/mf-routes.d.ts

@@ -0,0 +1,2 @@
+export * from './../compiled-types/node_modules/.federation/data-loader/main/mf-routes';
+export { default } from './../compiled-types/node_modules/.federation/data-loader/main/mf-routes';

modernjs-ssr-data-loader/host/@mf-types/remote/main/route-server-loaders.d.ts

@@ -0,0 +1,2 @@
+export * from './../compiled-types/node_modules/.federation/data-loader/main/route-server-loaders-client';
+export { default } from './../compiled-types/node_modules/.federation/data-loader/main/route-server-loaders-client';

modernjs-ssr-data-loader/host/CHANGELOG.md

@@ -0,0 +1,27 @@
+# modernjs-ssr-nested-remote
+
+## 0.1.13
+
+### Patch Changes
+
+- @module-federation/[email protected]
+
+## 0.1.12
+
+### Patch Changes
+
+- Updated dependencies [85ae159]
+  - @module-federation/[email protected]
+
+## 0.1.13
+
+### Patch Changes
+
+- @module-federation/[email protected]
+
+## 0.1.12
+
+### Patch Changes
+
+- Updated dependencies [fa37cc4]
+  - @module-federation/[email protected]

modernjs-ssr-data-loader/host/biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "defaultBranch": "main",
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "arrowParentheses": "asNeeded",
+      "jsxQuoteStyle": "double",
+      "lineWidth": 80
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": [".vscode/**/*", "node_modules/**/*", "dist/**/*"]
+  }
+}

modernjs-ssr-data-loader/host/modern.config.ts

@@ -0,0 +1,24 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+    ssrByRouteIds: ['entry-one_nested-routes/pathname/layout'],
+    port: 3062,
+  },
+  plugins: [
+    appTools({
+      bundler: 'webpack',
+    }),
+    moduleFederationPlugin({
+      importRoutes: true,
+    }),
+  ],
+});

modernjs-ssr-data-loader/host/module-federation.config.ts

@@ -0,0 +1,15 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  filename: 'remoteEntry.js',
+  // exposes: {
+  //   './Content': './src/entry-one/components/Content.tsx',
+  // },
+  remotes: {
+    remote: 'remote@http://localhost:3061/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

modernjs-ssr-data-loader/host/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "modernjs-ssr-data-loader-host",
+  "private": true,
+  "version": "0.1.13",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "biome check --write",
+    "prepare": "simple-git-hooks",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "biome check --files-ignore-unknown=true"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "dependencies": {
+    "@modern-js/runtime": "2.60.2",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@module-federation/modern-js": "0.0.0-next-20241018073518",
+    "@babel/runtime": "7.24.4",
+    "antd": "4.24.15"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "2.60.2",
+    "@modern-js/tsconfig": "2.60.2",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.5.0",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "lint-staged": "~13.1.0",
+    "prettier": "~2.8.1",
+    "rimraf": "~3.0.2",
+    "simple-git-hooks": "^2.11.1",
+    "@biomejs/biome": "1.8.3"
+  }
+}