@modern-js/plugin-data-loader 2.6.1-alpha.0 → 2.8.0

package/dist/esm-node/cli/{generate-client.js → generateClient.js}

@@ -7,7 +7,7 @@ const generateClient = ({
   const loadersMap = require(mapFile);
   let requestCode = ``;
   let exportsCode = ``;
-  const requestCreatorPath = path.join(__dirname, "./create-request").replace("/cjs/cli/", "/esm/cli/").replace(/\\/g, "/");
+  const requestCreatorPath = path.join(__dirname, "./createRequest").replace("/cjs/cli/", "/esm/cli/").replace(/\\/g, "/");
   const importCode = `
     import { createRequest } from '${requestCreatorPath}';
   `;

package/dist/esm-node/cli/loader.js

@@ -1,4 +1,4 @@
-import { generateClient } from "./generate-client";
+import { generateClient } from "./generateClient";
 async function loader(source) {
   var _a;
   this.cacheable();

package/dist/esm-node/common/constants.js

@@ -1,6 +1,8 @@
 const LOADER_ID_PARAM = "__loader";
 const DIRECT_PARAM = "__ssrDirect";
+const CONTENT_TYPE_DEFERRED = "text/modernjs-deferred";
 export {
+  CONTENT_TYPE_DEFERRED,
   DIRECT_PARAM,
   LOADER_ID_PARAM
 };

package/dist/esm-node/runtime/index.js

@@ -0,0 +1,162 @@
+import {
+  installGlobals,
+  writeReadableStreamToWritable,
+  Response as NodeResponse
+} from "@remix-run/node";
+import { transformNestedRoutes } from "@modern-js/utils/nestedRoutes";
+import {
+  createStaticHandler,
+  ErrorResponse,
+  UNSAFE_DEFERRED_SYMBOL as DEFERRED_SYMBOL
+} from "@modern-js/utils/remix-router";
+import { isPlainObject } from "@modern-js/utils/lodash";
+import { CONTENT_TYPE_DEFERRED, LOADER_ID_PARAM } from "../common/constants";
+import { createDeferredReadableStream } from "./response";
+installGlobals();
+const redirectStatusCodes = /* @__PURE__ */ new Set([301, 302, 303, 307, 308]);
+function isRedirectResponse(status) {
+  return redirectStatusCodes.has(status);
+}
+function isResponse(value) {
+  return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
+}
+function sortByUrlPath(entries) {
+  entries.sort(function(a, b) {
+    const length1 = a.urlPath.length;
+    const length2 = b.urlPath.length;
+    if (length1 < length2) {
+      return 1;
+    }
+    if (length1 > length2) {
+      return -1;
+    }
+    return 0;
+  });
+  return entries;
+}
+function convertModernRedirectResponse(headers, basename) {
+  const newHeaders = new Headers(headers);
+  let redirectUrl = headers.get("Location");
+  if (basename !== "/") {
+    redirectUrl = redirectUrl.replace(basename, "");
+  }
+  newHeaders.set("X-Modernjs-Redirect", redirectUrl);
+  newHeaders.delete("Location");
+  return new NodeResponse(null, {
+    status: 204,
+    headers: newHeaders
+  });
+}
+const createLoaderHeaders = (requestHeaders) => {
+  const headers = new Headers();
+  for (const [key, values] of Object.entries(requestHeaders)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+  return headers;
+};
+const createLoaderRequest = (context) => {
+  const origin = `${context.protocol}://${context.host}`;
+  const url = new URL(context.url, origin);
+  const controller = new AbortController();
+  const init = {
+    method: context.method,
+    headers: createLoaderHeaders(context.headers),
+    signal: controller.signal
+  };
+  return new Request(url.href, init);
+};
+const sendLoaderResponse = async (res, nodeResponse) => {
+  res.statusMessage = nodeResponse.statusText;
+  res.statusCode = nodeResponse.status;
+  for (const [key, value] of nodeResponse.headers.entries()) {
+    res.setHeader(key, value);
+  }
+  if (nodeResponse.body) {
+    await writeReadableStreamToWritable(nodeResponse.body, res);
+  } else {
+    res.end();
+  }
+};
+const matchEntry = (pathname, entries) => {
+  sortByUrlPath(entries);
+  return entries.find((entry) => pathname.startsWith(entry.urlPath));
+};
+const handleRequest = async ({
+  context,
+  serverRoutes,
+  routes
+}) => {
+  const { method, query } = context;
+  const routeId = query[LOADER_ID_PARAM];
+  const entry = matchEntry(context.path, serverRoutes);
+  if (!routeId || !entry) {
+    return;
+  }
+  if (method.toLowerCase() !== "get") {
+    throw new Error("CSR data loader request only support http GET method");
+  }
+  const basename = entry.urlPath;
+  const dataRoutes = transformNestedRoutes(routes);
+  const staticHandler = createStaticHandler(dataRoutes, {
+    basename
+  });
+  const { res } = context;
+  const request = createLoaderRequest(context);
+  let response;
+  try {
+    response = await staticHandler.queryRoute(request, {
+      routeId,
+      requestContext: context
+    });
+    if (isResponse(response) && isRedirectResponse(response.status)) {
+      response = convertModernRedirectResponse(response.headers, basename);
+    } else if (isPlainObject(response) && DEFERRED_SYMBOL in response) {
+      const deferredData = response[DEFERRED_SYMBOL];
+      const body = createDeferredReadableStream(deferredData, request.signal);
+      const init = deferredData.init || {};
+      if (init.status && isRedirectResponse(init.status)) {
+        if (!init.headers) {
+          throw new Error("redirect response includes no headers");
+        }
+        response = convertModernRedirectResponse(
+          new Headers(init.headers),
+          basename
+        );
+      } else {
+        const headers = new Headers(init.headers);
+        headers.set("Content-Type", CONTENT_TYPE_DEFERRED);
+        init.headers = headers;
+        response = new NodeResponse(body, init);
+      }
+    } else {
+      response = isResponse(response) ? response : new NodeResponse(JSON.stringify(response), {
+        headers: {
+          "Content-Type": "application/json; charset=utf-8"
+        }
+      });
+    }
+  } catch (error) {
+    const message = error instanceof ErrorResponse ? error.data : String(error);
+    response = new NodeResponse(message, {
+      status: 500,
+      headers: {
+        "Content-Type": "text/plain"
+      }
+    });
+  }
+  sendLoaderResponse(res, response);
+};
+export {
+  handleRequest,
+  isRedirectResponse,
+  isResponse,
+  matchEntry
+};

package/dist/esm-node/runtime/response.js

@@ -0,0 +1,79 @@
+import { TextEncoder } from "util";
+import { serializeJson } from "@modern-js/utils/serialize";
+function isTrackedPromise(value) {
+  return value != null && typeof value.then === "function" && value._tracked === true;
+}
+const DEFERRED_VALUE_PLACEHOLDER_PREFIX = "__deferred_promise:";
+function createDeferredReadableStream(deferredData, signal) {
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    async start(controller) {
+      const criticalData = {};
+      const preresolvedKeys = [];
+      for (const [key, value] of Object.entries(deferredData.data)) {
+        if (isTrackedPromise(value)) {
+          criticalData[key] = `${DEFERRED_VALUE_PLACEHOLDER_PREFIX}${key}`;
+          if (typeof value._data !== "undefined" || typeof value._error !== "undefined") {
+            preresolvedKeys.push(key);
+          }
+        } else {
+          criticalData[key] = value;
+        }
+      }
+      controller.enqueue(encoder.encode(`${JSON.stringify(criticalData)}
+
+`));
+      for (const preresolvedKey of preresolvedKeys) {
+        enqueueTrackedPromise(
+          controller,
+          encoder,
+          preresolvedKey,
+          deferredData.data[preresolvedKey]
+        );
+      }
+      const unsubscribe = deferredData.subscribe((aborted, settledKey) => {
+        if (settledKey) {
+          enqueueTrackedPromise(
+            controller,
+            encoder,
+            settledKey,
+            deferredData.data[settledKey]
+          );
+        }
+      });
+      await deferredData.resolveData(signal);
+      unsubscribe();
+      controller.close();
+    }
+  });
+  return stream;
+}
+function enqueueTrackedPromise(controller, encoder, settledKey, promise) {
+  var _a;
+  if ("_error" in promise) {
+    const { _error } = promise;
+    controller.enqueue(
+      encoder.encode(
+        `error:${serializeJson({
+          [settledKey]: {
+            message: _error.message,
+            stack: _error.stack
+          }
+        })}
+
+`
+      )
+    );
+  } else {
+    controller.enqueue(
+      encoder.encode(
+        `data:${JSON.stringify({ [settledKey]: (_a = promise._data) != null ? _a : null })}
+
+`
+      )
+    );
+  }
+}
+export {
+  createDeferredReadableStream
+};

package/dist/esm-node/server/index.js

@@ -1,194 +1,7 @@
 import path from "path";
-import {
-  installGlobals,
-  writeReadableStreamToWritable,
-  Response as NodeResponse
-} from "@remix-run/node";
-import {
-  matchRoutes
-} from "react-router-dom";
+import fs from "fs";
 import { MAIN_ENTRY_NAME, SERVER_BUNDLE_DIRECTORY } from "@modern-js/utils";
-import { LOADER_ID_PARAM } from "../common/constants";
-installGlobals();
-const redirectStatusCodes = /* @__PURE__ */ new Set([301, 302, 303, 307, 308]);
-function sortByUrlPath(entries) {
-  entries.sort(function(a, b) {
-    const length1 = a.urlPath.length;
-    const length2 = b.urlPath.length;
-    if (length1 < length2) {
-      return 1;
-    }
-    if (length1 > length2) {
-      return -1;
-    }
-    return 0;
-  });
-  return entries;
-}
-function isRedirectResponse(response) {
-  return redirectStatusCodes.has(response.status);
-}
-function isResponse(value) {
-  return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
-}
-const json = (data, init = {}) => {
-  const responseInit = typeof init === "number" ? { status: init } : init;
-  const headers = new Headers(responseInit.headers);
-  if (!headers.has("Content-Type")) {
-    headers.set("Content-Type", "application/json; charset=utf-8");
-  }
-  return new NodeResponse(JSON.stringify(data), {
-    ...responseInit,
-    headers
-  });
-};
-const callRouteLoader = async ({
-  routeId,
-  loader,
-  params,
-  request,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext
-}) => {
-  if (!loader) {
-    throw new Error(
-      `You made a ${request.method} request to ${request.url} but did not provide a default component or \`loader\` for route "${routeId}", so there is no way to handle the request.`
-    );
-  }
-  let result;
-  try {
-    result = await loader({
-      request,
-      params
-    });
-  } catch (error) {
-    if (!isResponse(error)) {
-      throw error;
-    }
-    result = error;
-  }
-  if (result === void 0) {
-    throw new Error(
-      `You defined a loader for route "${routeId}" but didn't return anything from your \`loader\` function. Please return a value or \`null\`.`
-    );
-  }
-  return isResponse(result) ? result : json(result);
-};
-const createLoaderHeaders = (requestHeaders) => {
-  const headers = new Headers();
-  for (const [key, values] of Object.entries(requestHeaders)) {
-    if (values) {
-      if (Array.isArray(values)) {
-        for (const value of values) {
-          headers.append(key, value);
-        }
-      } else {
-        headers.set(key, values);
-      }
-    }
-  }
-  return headers;
-};
-const createLoaderRequest = (context) => {
-  const origin = `${context.protocol}://${context.host}`;
-  const url = new URL(context.url, origin);
-  const controller = new AbortController();
-  const init = {
-    method: context.method,
-    headers: createLoaderHeaders(context.headers),
-    signal: controller.signal
-  };
-  return new Request(url.href, init);
-};
-const sendLoaderResponse = async (res, nodeResponse) => {
-  res.statusMessage = nodeResponse.statusText;
-  res.statusCode = nodeResponse.status;
-  for (const [key, value] of nodeResponse.headers.entries()) {
-    res.setHeader(key, value);
-  }
-  if (nodeResponse.body) {
-    await writeReadableStreamToWritable(nodeResponse.body, res);
-  } else {
-    res.end();
-  }
-};
-const getPathWithoutEntry = (pathname, entryPath) => {
-  if (entryPath === "/") {
-    return pathname;
-  }
-  return pathname.replace(entryPath, "");
-};
-const matchEntry = (pathname, entries) => {
-  const newEntries = sortByUrlPath(entries);
-  return newEntries.find((entry) => pathname.startsWith(entry.urlPath));
-};
-const handleRequest = async ({
-  context,
-  serverRoutes,
-  distDir
-}) => {
-  const { method, query } = context;
-  const routeId = query[LOADER_ID_PARAM];
-  if (!routeId || method.toLowerCase() !== "get") {
-    return;
-  }
-  const entry = matchEntry(context.path, serverRoutes);
-  if (!entry) {
-    return;
-  }
-  const routesPath = path.join(
-    distDir,
-    SERVER_BUNDLE_DIRECTORY,
-    `${entry.entryName || MAIN_ENTRY_NAME}-server-loaders`
-  );
-  const { routes } = await import(routesPath);
-  if (!routes) {
-    return;
-  }
-  const { res } = context;
-  const pathname = getPathWithoutEntry(context.path, entry.urlPath);
-  const matches = matchRoutes(routes, pathname);
-  if (!matches) {
-    res.statusCode = 403;
-    res.end(`Route ${pathname} was not matched`);
-    return;
-  }
-  const match = matches == null ? void 0 : matches.find((match2) => match2.route.id === routeId);
-  if (!match) {
-    res.statusCode = 403;
-    res.end(`Route ${routeId} does not match URL ${context.path}`);
-    return;
-  }
-  const request = createLoaderRequest(context);
-  let response;
-  try {
-    response = await callRouteLoader({
-      loader: match.route.loader,
-      routeId: match.route.id,
-      params: match.params,
-      request,
-      loadContext: {}
-    });
-    if (isRedirectResponse(response)) {
-      const headers = new Headers(response.headers);
-      headers.set("X-Modernjs-Redirect", headers.get("Location"));
-      headers.delete("Location");
-      response = new NodeResponse(null, {
-        status: 204,
-        headers
-      });
-    }
-  } catch (error) {
-    const message = String(error);
-    response = new NodeResponse(message, {
-      status: 500,
-      headers: {
-        "Content-Type": "text/plain"
-      }
-    });
-  }
-  sendLoaderResponse(res, response);
-};
+import { matchEntry } from "../runtime";
 var server_default = () => ({
   name: "@modern-js/plugin-data-loader",
   setup: () => ({
@@ -197,19 +10,31 @@ var server_default = () => ({
       distDir
     }) {
       return async (context) => {
+        const entry = matchEntry(context.path, serverRoutes);
+        if (!entry) {
+          return;
+        }
+        const routesPath = path.join(
+          distDir,
+          SERVER_BUNDLE_DIRECTORY,
+          `${entry.entryName || MAIN_ENTRY_NAME}-server-loaders.js`
+        );
+        if (!fs.existsSync(routesPath)) {
+          return;
+        }
+        const { routes, handleRequest } = await import(routesPath);
+        if (!routes) {
+          return;
+        }
         return handleRequest({
           serverRoutes,
-          distDir,
-          context
+          context,
+          routes
         });
       };
     }
   })
 });
 export {
-  server_default as default,
-  getPathWithoutEntry,
-  handleRequest,
-  isRedirectResponse,
-  isResponse
+  server_default as default
 };

package/dist/types/cli/{create-request.d.ts → createRequest.d.ts}

@@ -1,3 +1,4 @@
+import { type UNSAFE_DeferredData as DeferredData } from '@modern-js/utils/remix-router';
 export declare const getRequestUrl: ({
   params,
   request,
@@ -13,4 +14,4 @@ export declare const createRequest: (routeId: string, method?: string) => ({
 }: {
   params: Record<string, string>;
   request: Request;
-}) => Promise<Response>;
+}) => Promise<DeferredData | Response>;

package/dist/types/cli/data.d.ts

@@ -0,0 +1,6 @@
+/**
+ * modified from https://github.com/remix-run/remix/blob/main/packages/remix-react/data.ts
+ * license at https://github.com/remix-run/remix/blob/main/LICENSE.md
+ */
+import { UNSAFE_DeferredData as DeferredData } from '@modern-js/utils/remix-router';
+export declare function parseDeferredReadableStream(stream: ReadableStream<Uint8Array>): Promise<DeferredData>;

package/dist/types/common/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const LOADER_ID_PARAM = "__loader";
-export declare const DIRECT_PARAM = "__ssrDirect";
+export declare const DIRECT_PARAM = "__ssrDirect";
+export declare const CONTENT_TYPE_DEFERRED = "text/modernjs-deferred";

package/dist/types/runtime/index.d.ts

@@ -0,0 +1,15 @@
+import type { ModernServerContext, NestedRoute, ServerRoute } from '@modern-js/types';
+import { Response as NodeResponse } from '@remix-run/node';
+export type ServerContext = Pick<ModernServerContext, 'req' | 'res' | 'params' | 'headers' | 'method' | 'url' | 'host' | 'protocol' | 'origin' | 'href' | 'path' | 'query'>;
+export declare function isRedirectResponse(status: number): boolean;
+export declare function isResponse(value: any): value is NodeResponse;
+export declare const matchEntry: (pathname: string, entries: ServerRoute[]) => ServerRoute | undefined;
+export declare const handleRequest: ({
+  context,
+  serverRoutes,
+  routes
+}: {
+  context: ServerContext;
+  serverRoutes: ServerRoute[];
+  routes: NestedRoute[];
+}) => Promise<void>;

package/dist/types/runtime/response.d.ts

@@ -0,0 +1,2 @@
+import { type UNSAFE_DeferredData as DeferredData } from '@modern-js/utils/remix-router';
+export declare function createDeferredReadableStream(deferredData: DeferredData, signal: AbortSignal): any;

package/dist/types/server/index.d.ts

@@ -1,19 +1,4 @@
 import type { ServerPlugin } from '@modern-js/server-core';
-import type { ModernServerContext, ServerRoute } from '@modern-js/types';
-import { Response as NodeResponse } from '@remix-run/node';
-export type ServerContext = Pick<ModernServerContext, 'req' | 'res' | 'params' | 'headers' | 'method' | 'url' | 'host' | 'protocol' | 'origin' | 'href' | 'path' | 'query'>;
-export declare function isRedirectResponse(response: NodeResponse): boolean;
-export declare function isResponse(value: any): value is NodeResponse;
-export declare const getPathWithoutEntry: (pathname: string, entryPath: string) => string;
-export declare const handleRequest: ({
-  context,
-  serverRoutes,
-  distDir
-}: {
-  context: ServerContext;
-  serverRoutes: ServerRoute[];
-  distDir: string;
-}) => Promise<void>;
 
 declare const _default: () => ServerPlugin;
 

package/package.json

@@ -2,8 +2,8 @@
   "name": "@modern-js/plugin-data-loader",
   "description": "A Progressive React Framework for modern web development.",
   "homepage": "https://modernjs.dev",
-  "bugs": "https://github.com/modern-js-dev/modern.js/issues",
-  "repository": "modern-js-dev/modern.js",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": "web-infra-dev/modern.js",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,7 +11,10 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.6.1-alpha.0",
+  "version": "2.8.0",
+  "engines": {
+    "node": ">=14.17.6"
+  },
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
@@ -24,6 +27,10 @@
     "./server": {
       "jsnext:source": "./src/server/index.ts",
       "default": "./dist/cjs/server/index.js"
+    },
+    "./runtime": {
+      "jsnext:source": "./src/runtime/index.ts",
+      "default": "./dist/esm/runtime/index.js"
     }
   },
   "typesVersions": {
@@ -33,23 +40,21 @@
       ],
       "server": [
         "./dist/types/server/index.d.ts"
+      ],
+      "runtime": [
+        "./dist/types/runtime/index.d.ts"
       ]
     }
   },
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@babel/runtime": "^7.18.0",
-    "@modern-js/utils": "2.5.0",
-    "@remix-run/node": "^1.9.0",
+    "@remix-run/node": "^1.12.0",
     "path-to-regexp": "^6.2.0",
-    "react-router-dom": "^6.6.0"
+    "react-router-dom": "^6.8.1",
+    "@modern-js/utils": "2.8.0"
   },
   "devDependencies": {
-    "@modern-js/core": "2.5.0",
-    "@modern-js/server-core": "2.5.0",
-    "@modern-js/types": "2.5.0",
-    "@scripts/build": "2.5.0",
-    "@scripts/jest-config": "2.5.0",
     "@types/babel__core": "^7.1.15",
     "@types/jest": "^27",
     "@types/node": "^14",
@@ -61,7 +66,12 @@
     "ts-jest": "^27.0.5",
     "typescript": "^4",
     "webpack": "^5.75.0",
-    "webpack-chain": "^6.5.1"
+    "webpack-chain": "^6.5.1",
+    "@modern-js/core": "2.8.0",
+    "@modern-js/server-core": "2.8.0",
+    "@modern-js/types": "2.8.0",
+    "@scripts/jest-config": "2.8.0",
+    "@scripts/build": "2.8.0"
   },
   "sideEffects": false,
   "publishConfig": {