@modern-js/runtime 2.4.1-beta.0 → 2.5.0

package/dist/esm-node/router/runtime/plugin.node.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import serialize from "serialize-javascript";
+import {
+  createStaticHandler,
+  isRouteErrorResponse
+} from "@remix-run/router";
+import {
+  createStaticRouter,
+  StaticRouterProvider
+} from "react-router-dom/server";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { createRoutesFromElements } from "react-router-dom";
+import { RuntimeReactContext } from "../../core";
+import { renderRoutes, urlJoin } from "./utils";
+import { installGlobals } from "./fetch";
+installGlobals();
+function createFetchRequest(req) {
+  const origin = `${req.protocol}://${req.host}`;
+  const url = new URL(req.originalUrl || req.url, origin);
+  const controller = new AbortController();
+  const init = {
+    method: req.method,
+    headers: createFetchHeaders(req.headers),
+    signal: controller.signal
+  };
+  return new Request(url.href, init);
+}
+function createFetchHeaders(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;
+}
+function serializeErrors(errors) {
+  if (!errors) {
+    return null;
+  }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if (isRouteErrorResponse(val)) {
+      serialized[key] = { ...val, __type: "RouteErrorResponse" };
+    } else if (val instanceof Error) {
+      serialized[key] = {
+        message: val.message,
+        __type: "Error"
+      };
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
+}
+const routerPlugin = ({
+  basename = "",
+  routesConfig,
+  createRoutes
+}) => {
+  return {
+    name: "@modern-js/plugin-router",
+    setup: () => {
+      return {
+        async init({ context }, next) {
+          if (!routesConfig && !createRoutes) {
+            return next({ context });
+          }
+          const { request } = context.ssrContext;
+          const baseUrl = request.baseUrl;
+          const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+          const { query } = createStaticHandler(routes, {
+            basename: _basename
+          });
+          const remixRequest = createFetchRequest(request);
+          const routerContext = await query(remixRequest);
+          if (routerContext instanceof Response) {
+            return routerContext;
+          }
+          const router = createStaticRouter(routes, routerContext);
+          context.router = router;
+          context.routerContext = routerContext;
+          context.routes = routes;
+          context.routeManifest = context.ssrContext.routeManifest;
+          return next({ context });
+        },
+        hoc: ({ App }, next) => {
+          if (!routesConfig) {
+            return next({ App });
+          }
+          const getRouteApp = () => {
+            return (props) => {
+              const { router, routerContext } = useContext(RuntimeReactContext);
+              const data = {
+                loaderData: routerContext.loaderData,
+                actionData: routerContext.actionData,
+                errors: serializeErrors(routerContext.errors)
+              };
+              const hydrateScript = `window.__staticRouterHydrationData = ${serialize(
+                data,
+                { isJSON: true }
+              )};`;
+              return /* @__PURE__ */ jsxs(App, {
+                ...props,
+                children: [
+                  /* @__PURE__ */ jsx(StaticRouterProvider, {
+                    router,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  /* @__PURE__ */ jsx("script", {
+                    suppressHydrationWarning: true,
+                    id: "the-nonce",
+                    dangerouslySetInnerHTML: { __html: hydrateScript }
+                  })
+                ]
+              });
+            };
+          };
+          const RouteApp = getRouteApp();
+          if (routesConfig == null ? void 0 : routesConfig.globalApp) {
+            return next({
+              App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
+            });
+          }
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};
+const modifyRoutes = () => {
+};
+export {
+  createFetchHeaders,
+  modifyRoutes,
+  routerPlugin
+};

package/dist/{js/modern → esm-node}/router/runtime/utils.js

@@ -1,34 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import { jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
 import { Route } from "react-router-dom";
@@ -84,24 +53,28 @@ const renderNestedRoute = (nestedRoute, parent) => {
   const childElements = children == null ? void 0 : children.map((childRoute) => {
     return renderNestedRoute(childRoute, nestedRoute);
   });
-  const routeElement = index ? /* @__PURE__ */ jsx(Route, __spreadProps(__spreadValues({}, routeProps), {
+  const routeElement = index ? /* @__PURE__ */ jsx(Route, {
+    ...routeProps,
     index: true
-  }), id) : /* @__PURE__ */ jsx(Route, __spreadProps(__spreadValues({}, routeProps), {
+  }, id) : /* @__PURE__ */ jsx(Route, {
+    ...routeProps,
     index: false,
     children: childElements
-  }), id);
+  }, id);
   return routeElement;
 };
 function getRouteComponents(routes, globalApp) {
-  const Layout = (_a) => {
-    var _b = _a, { Component } = _b, props = __objRest(_b, ["Component"]);
+  const Layout = ({ Component, ...props }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
-      return /* @__PURE__ */ jsx(Component, __spreadValues({}, props));
+      return /* @__PURE__ */ jsx(Component, {
+        ...props
+      });
     }
-    return /* @__PURE__ */ jsx(GlobalLayout, __spreadValues({
-      Component
-    }, props));
+    return /* @__PURE__ */ jsx(GlobalLayout, {
+      Component,
+      ...props
+    });
   };
   const routeElements = [];
   for (const route of routes) {

package/dist/esm-node/router/runtime/withRouter.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+const withRouter = (Component) => {
+  return (props) => {
+    const location = useLocation();
+    const params = useParams();
+    const navigate = useNavigate();
+    return /* @__PURE__ */ jsx(Component, {
+      ...props,
+      location,
+      params,
+      navigate
+    });
+  };
+};
+export {
+  withRouter
+};

package/dist/{js/modern → esm-node}/ssr/cli/index.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import path from "path";
 import {
   getEntryOptions,
@@ -59,9 +43,9 @@ var cli_default = () => ({
             }
           },
           tools: {
-            webpackChain: (chain, { name, isServer, isServiceWorker, CHAIN_ID }) => {
+            webpackChain: (chain, { isServer, isServiceWorker, CHAIN_ID }) => {
               const userConfig = api.useResolvedConfigContext();
-              if (isUseSSRBundle(userConfig) && name !== "server" && hasStringSSREntry(userConfig)) {
+              if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig)) {
                 const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
                 chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableWebpackPlugin, [
                   { filename: LOADABLE_STATS_FILE }
@@ -75,7 +59,10 @@ var cli_default = () => ({
               chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {
                 const [vars, ...rest] = args;
                 return [
-                  __spreadValues(__spreadValues({}, vars), modernVars),
+                  {
+                    ...vars,
+                    ...modernVars
+                  },
                   ...rest
                 ];
               });

package/dist/{js/modern → esm-node}/ssr/index.js

@@ -1,42 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
 import hoistNonReactStatics from "hoist-non-react-statics";
@@ -50,11 +11,12 @@ const ssr = (config) => ({
   setup: () => {
     const mockResp = mockResponse();
     return {
-      client: (_0) => __async(void 0, [_0], function* ({ App, context, ModernRender, ModernHydrate }) {
+      client: async ({ App, context, ModernRender, ModernHydrate }) => {
         var _a;
-        const hydrateContext = __spreadProps(__spreadValues({}, context), {
+        const hydrateContext = {
+          ...context,
           _hydration: true
-        });
+        };
         const callback = () => {
           delete hydrateContext._hydration;
         };
@@ -112,15 +74,16 @@ const ssr = (config) => ({
             }));
           }
         }
-      }),
+      },
       init({ context }, next) {
         var _a, _b;
         const request = (_b = (_a = window == null ? void 0 : window._SSR_DATA) == null ? void 0 : _a.context) == null ? void 0 : _b.request;
         if (!request) {
-          context.ssrContext = __spreadProps(__spreadValues({}, context.ssrContext), {
+          context.ssrContext = {
+            ...context.ssrContext,
             response: mockResp,
             request: formatClient({})
-          });
+          };
           return next({ context });
         }
         context.ssrContext.response = mockResp;
@@ -134,18 +97,20 @@ const ssr = (config) => ({
         if (!request) {
           return next({
             context,
-            pickedContext: __spreadProps(__spreadValues({}, pickedContext), {
+            pickedContext: {
+              ...pickedContext,
               initialData
-            })
+            }
           });
         }
         return next({
           context,
-          pickedContext: __spreadProps(__spreadValues({}, pickedContext), {
+          pickedContext: {
+            ...pickedContext,
             initialData,
             request,
             response: mockResp
-          })
+          }
         });
       }
     };

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

@@ -0,0 +1,41 @@
+import { formatServer } from "./utils";
+import render from "./serverRender";
+const ssr = (config = {}) => ({
+  name: "@modern-js/plugin-ssr",
+  setup: () => {
+    return {
+      server: async ({ App, context }) => {
+        const html = await render({
+          context,
+          App,
+          config
+        });
+        return html;
+      },
+      init({ context }, next) {
+        const { request } = context.ssrContext;
+        context.ssrContext.request = formatServer(request);
+        return next({ context });
+      },
+      pickContext: ({ context, pickedContext }, next) => {
+        const { request, response } = context == null ? void 0 : context.ssrContext;
+        const { initialData } = context;
+        return next({
+          context,
+          pickedContext: {
+            ...pickedContext,
+            initialData,
+            request,
+            response
+          }
+        });
+      }
+    };
+  }
+});
+var index_node_default = ssr;
+export * from "./react";
+export {
+  index_node_default as default,
+  ssr
+};

package/dist/esm-node/ssr/prefetch.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { run } from "@modern-js/utils/ssr";
+import { ChunkExtractor } from "@loadable/server";
+const prefetch = async (App, context) => run(context.ssrContext.request.headers, async () => {
+  var _a;
+  const { ssrContext } = context;
+  const { loadableStats } = ssrContext;
+  if (loadableStats) {
+    const extractor = new ChunkExtractor({
+      stats: loadableStats,
+      entrypoints: [ssrContext.entryName].filter(Boolean)
+    });
+    renderToStaticMarkup(extractor.collectChunks(/* @__PURE__ */ jsx(App, {
+      context
+    })));
+  } else {
+    renderToStaticMarkup(/* @__PURE__ */ jsx(App, {
+      context
+    }));
+  }
+  if (!context.loaderManager.hasPendingLoaders()) {
+    return {
+      initialData: context.initialData,
+      i18nData: context.__i18nData__
+    };
+  }
+  const loadersData = await context.loaderManager.awaitPendingLoaders();
+  Object.keys(loadersData).forEach((id) => {
+    const data = loadersData[id];
+    if (data._error) {
+      ssrContext.logger.error("App Prefetch Loader", data._error);
+      ssrContext.metrics.emitCounter("app.prefetch.loader.error", 1);
+      delete data._error;
+    }
+  });
+  return {
+    loadersData,
+    initialData: context.initialData,
+    i18nData: context.__i18nData__,
+    storeState: (_a = context == null ? void 0 : context.store) == null ? void 0 : _a.getState()
+  };
+});
+var prefetch_default = prefetch;
+export {
+  prefetch_default as default
+};

package/dist/{js/modern → esm-node}/ssr/prefetch.worker.js

@@ -1,27 +1,7 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { jsx } from "react/jsx-runtime";
 import { renderToStaticMarkup } from "react-dom/server";
 import { ChunkExtractor } from "@loadable/server";
-const prefetch = (App, context) => __async(void 0, null, function* () {
+const prefetch = async (App, context) => {
   var _a;
   const { ssrContext } = context;
   const { loadableStats } = ssrContext;
@@ -44,7 +24,7 @@ const prefetch = (App, context) => __async(void 0, null, function* () {
       i18nData: context.__i18nData__
     };
   }
-  const loadersData = yield context.loaderManager.awaitPendingLoaders();
+  const loadersData = await context.loaderManager.awaitPendingLoaders();
   Object.keys(loadersData).forEach((id) => {
     const data = loadersData[id];
     if (data._error) {
@@ -59,7 +39,7 @@ const prefetch = (App, context) => __async(void 0, null, function* () {
     i18nData: context.__i18nData__,
     storeState: (_a = context == null ? void 0 : context.store) == null ? void 0 : _a.getState()
   };
-});
+};
 var prefetch_worker_default = prefetch;
 export {
   prefetch_worker_default as default

package/dist/{js/modern → esm-node}/ssr/react/prerender/index.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import withSideEffect from "react-side-effect";
 import React, { createElement } from "react";
 import {
@@ -51,7 +32,7 @@ const mapStateOnServer = (reduceProps) => {
     const reduceProp = reduceProps[propKey];
     let nextProps = props;
     if (exist(reduceProp)) {
-      nextProps = __spreadProps(__spreadValues({}, props), { [propKey]: reduceProp });
+      nextProps = { ...props, [propKey]: reduceProp };
     }
     return nextProps;
   }, defaultProps);
@@ -80,12 +61,12 @@ function factory(Component) {
       return true;
     }
     render() {
-      const newProps = __spreadValues({}, this.props);
+      const newProps = { ...this.props };
       const validate = this.verify();
       if (!validate) {
         throw new Error("invalid props, check usage");
       }
-      return createElement(Component, __spreadValues({}, newProps));
+      return createElement(Component, { ...newProps });
     }
   }
   Spr.peek = Component.peek;

package/dist/{js/modern → esm-node}/ssr/serverRender/helmet.js

@@ -3,7 +3,7 @@ const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
 const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
-const TEST_TITLE_CONTENT = new RegExp("(?<=<title[^>]*>)([\\s\\S\\n\\r]*?)([.|\\S])([\\s\\S\\n\\r]*?)(?=<\\/title>)");
+const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/;
 function helmet(content, helmetData) {
   let result = content;
   const bodyAttributes = helmetData.bodyAttributes.toString();

package/dist/esm-node/ssr/serverRender/index.js

@@ -0,0 +1,13 @@
+import { isReact18 } from "../utils";
+async function serverRender(options) {
+  if (isReact18() && options.config.mode === "stream") {
+    const pipe = await require("./renderToStream").render(options);
+    return pipe;
+  } else {
+    const html = await require("./renderToString").render(options);
+    return html;
+  }
+}
+export {
+  serverRender as default
+};

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/index.js

@@ -1,23 +1,3 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { createElement } from "react";
 import { run } from "@modern-js/utils/ssr";
 import { PreRender } from "../../react/prerender";
@@ -30,7 +10,7 @@ const render = ({ App, context }) => {
       'The "ssrContext" must not be undefined, but received undefined'
     );
   }
-  return run(ssrContext.request.headers, () => __async(void 0, null, function* () {
+  return run(ssrContext.request.headers, async () => {
     const end = time();
     const rootElement = createElement(App, {
       context: Object.assign(context || {}, {
@@ -51,7 +31,7 @@ const render = ({ App, context }) => {
       }
     });
     return pipe;
-  }));
+  });
 };
 export {
   render