expand on sample (#4313)

Author: ScriptedAlchemy

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

@@ -1,35 +1,44 @@
-import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './host/apis.d.ts';
-import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1 } from './remote/apis.d.ts';
-    declare module "@module-federation/runtime" {
-      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
-      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
-T extends RemoteKeys_1 ? PackageType_1<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 | RemoteKeys_1;
-      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
-T extends RemoteKeys_1 ? PackageType_1<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 | RemoteKeys_1;
-      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
-T extends RemoteKeys_1 ? PackageType_1<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 | RemoteKeys_1;
-      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
-T extends RemoteKeys_1 ? PackageType_1<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>>;
-    }
-    
+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/host/apis.d.ts

@@ -1,2 +1,9 @@
 import React from 'react';
-export declare const Button: () => React.JSX.Element;
+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/host/compiled-types/src/components/Content.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

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

@@ -9,7 +9,7 @@
     "start": "modern start",
     "serve": "modern serve",
     "new": "modern new",
-    "lint": "biome check",
+    "lint": "biome check --write",
     "prepare": "simple-git-hooks",
     "upgrade": "modern upgrade"
   },

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

@@ -1,18 +1,18 @@
-import {init} from '@modern-js/runtime/mf';
+import { init } from '@modern-js/runtime/mf';
 import router from '@modern-js/runtime/router';
 console.log(33333);
 init({
-    name:'host',
-    remotes:[],
-    shared: {
-        '@modern-js/runtime/router': {
-            version: "2.60.2",
-            scope: "default",
-            lib: ()=> router,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: ">1"
-            }
-        }
-    }
-})
+  name: 'host',
+  remotes: [],
+  shared: {
+    '@modern-js/runtime/router': {
+      version: '2.60.2',
+      scope: 'default',
+      lib: () => router,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: '>1',
+      },
+    },
+  },
+});

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

@@ -1,26 +1,44 @@
-import React from 'react';
-import Comp from 'remote/Image';
 import Button from 'antd/lib/button';
+import * as React from 'react';
+import Comp from 'remote/Image';
 import stuff from './stuff.module.css';
 
 export default (): JSX.Element => (
   <div
     id="nested-remote-components"
     style={{
-      backgroundColor: '#e91ece',
-      color: 'lightgrey',
-      padding: '1rem',
+      backgroundColor: '#9c27b0',
+      color: '#ffffff',
+      padding: '2rem',
+      borderRadius: '8px',
+      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+      maxWidth: '800px',
+      margin: '2rem auto',
     }}
   >
-    <h2 onClick={() => alert('Client side Javascript works!')}>
-      <strong>nested remote</strong>
+    <h2
+      onClick={() => alert('Client side Javascript works!')}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          alert('Client side Javascript works!');
+        }
+      }}
+      style={{
+        marginBottom: '1.5rem',
+        cursor: 'pointer',
+      }}
+    >
+      <strong>Nested Remote Component</strong>
     </h2>
     <Button
       id="nested-remote-components-button"
       className={stuff['test-remote2']}
       onClick={() =>
         alert('[nested-remote-components] Client side Javascript works!')
       }
+      style={{
+        marginBottom: '1.5rem',
+      }}
     >
       Click me to test <strong>nested remote</strong> interactive!
     </Button>

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

@@ -41,9 +41,9 @@ main {
 
 .title {
   display: flex;
-  margin: 4rem 0 4rem;
+  margin: 2rem 0;
   align-items: center;
-  font-size: 4rem;
+  font-size: 3.5rem;
   font-weight: 600;
 }
 
@@ -54,14 +54,16 @@ main {
 
 .name {
   color: #4ecaff;
+  text-shadow: 0 2px 4px rgba(78, 202, 255, 0.2);
 }
 
 .description {
   text-align: center;
   line-height: 1.5;
   font-size: 1.3rem;
   color: #1b3a42;
-  margin-bottom: 5rem;
+  margin-bottom: 3rem;
+  max-width: 600px;
 }
 
 .code {
@@ -125,3 +127,70 @@ main {
   margin-left: 0.5rem;
   margin-top: 3px;
 }
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+h1 {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+}
+
+.feature-list li {
+  margin: 1rem 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 6px;
+  color: #0066cc;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+  background: #e9ecef;
+  transform: translateX(5px);
+}
+
+.info-section {
+  background: #f8f9fa;
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin-top: 2rem;
+}
+
+.info-section h3 {
+  color: #2c3e50;
+  margin-top: 0;
+}
+
+.remote-component-wrapper {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin-top: 2rem;
+  width: 100%;
+  max-width: 800px;
+}