chore: wip

Author: 2heal1

apps/modern-component-data-fetch/provider/modern.config.ts

@@ -6,12 +6,12 @@ export default defineConfig({
   runtime: {
     router: true,
   },
-  server: {
-    ssr: {
-      mode: 'stream',
-    },
-    port: 5002,
-  },
+  // server: {
+  //   ssr: {
+  //     mode: 'stream',
+  //   },
+  //   port: 5002,
+  // },
   plugins: [
     appTools({
       bundler: 'rspack',

packages/modernjs/src/cli/server/data-fetch-server-plugin.ts

@@ -1,3 +1,5 @@
+import { DATA_FETCH_QUERY } from '../../constant';
+import logger from '../../runtime/logger';
 import type { ServerPluginLegacy } from '@modern-js/server-core';
 
 export default (): ServerPluginLegacy => ({
@@ -16,8 +18,30 @@ export default (): ServerPluginLegacy => ({
         config.render!.middleware!.push(
           async (ctx: { request: any }, next: () => any) => {
             const { request } = ctx;
-            console.log('request.url: ', request.url);
-            return next();
+            try {
+              const url = new URL(request.url);
+              const dataFetchId = url.searchParams.get(DATA_FETCH_QUERY);
+              if (!dataFetchId) {
+                return next();
+              }
+              logger.debug('dataFetchId: ', dataFetchId);
+
+              const fetchDataPromise =
+                globalThis.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(
+                  dataFetchId,
+                );
+              if (!fetchDataPromise) {
+                return next();
+              }
+
+              const fetchDataFn = await fetchDataPromise;
+              if (!fetchDataFn) {
+                return next();
+              }
+              return fetchDataFn();
+            } catch (e) {
+              return next();
+            }
           },
         );
         return config;

packages/modernjs/src/constant.ts

@@ -1,2 +1,3 @@
 export const LOCALHOST = 'localhost';
 export const PLUGIN_IDENTIFIER = '[ Modern.js Module Federation ]';
+export const DATA_FETCH_QUERY = 'x-mf-data-fetch';

packages/modernjs/src/runtime/dataFetch.ts

@@ -1,20 +1,47 @@
 import { isBrowserEnv, composeKeyWithSeparator } from '@module-federation/sdk';
 import helpers from '@module-federation/runtime/helpers';
-import { getDataFetchInfo, isSSRDowngrade } from './utils';
+import { getDataFetchInfo, isCSROnly, isSSRDowngrade } from './utils';
+import logger from './logger';
+import { DATA_FETCH_QUERY } from '../constant';
 
 export async function fetchData(id: string): Promise<unknown | undefined> {
+  const fn = async () => {
+    const fetchDataPromise =
+      helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(id);
+    if (!fetchDataPromise) {
+      return;
+    }
+
+    const fetchDataFn = await fetchDataPromise;
+    if (!fetchDataFn) {
+      return;
+    }
+    return fetchDataFn();
+  };
   if (isBrowserEnv()) {
     if (!globalThis._MF__DATA_FETCH_ID_MAP__) {
       globalThis._MF__DATA_FETCH_ID_MAP__ = {};
     }
+
     if (globalThis._MF__DATA_FETCH_ID_MAP__[id]) {
       return;
     }
+
     if (isSSRDowngrade()) {
-      console.log('==========ssr downgrade!');
-      // wip...
-      // fetch("host/server")
+      logger.debug('==========ssr downgrade!');
+      // const
+      const currentUrl = new URL(window.location.href);
+      currentUrl.searchParams.set(DATA_FETCH_QUERY, id);
+      const fetchUrl = currentUrl.toString();
+      const data = await fetch(fetchUrl).then((res) => res.json());
+      return data;
     }
+
+    if (isCSROnly()) {
+      logger.debug('==========csr only!');
+      return fn();
+    }
+
     let res;
     let rej;
     const p = new Promise((resolve, reject) => {
@@ -25,17 +52,7 @@ export async function fetchData(id: string): Promise<unknown | undefined> {
     return globalThis._MF__DATA_FETCH_ID_MAP__[id][0];
   }
 
-  const fetchDataPromise =
-    helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(id);
-  if (!fetchDataPromise) {
-    return;
-  }
-
-  const fetchDataFn = await fetchDataPromise;
-  if (!fetchDataFn) {
-    return;
-  }
-  return fetchDataFn();
+  return fn();
 }
 
 export function getDataFetchMapKey(

packages/modernjs/src/runtime/utils.ts

@@ -63,9 +63,9 @@ export function getLoadedRemoteInfos(
 }
 
 export function isSSRDowngrade() {
-  if (typeof window === 'undefined') {
-    return true;
-  }
-
   return window._SSR_DATA?.renderLevel !== 2;
 }
+
+export function isCSROnly() {
+  return window._SSR_DATA === undefined;
+}