@modern-js/runtime 2.48.3 → 2.48.4-alpha.0

package/dist/js/modern/exports/head.js

@@ -0,0 +1,6 @@
+import head from "react-helmet";
+var head_default = head;
+export * from "react-helmet";
+export {
+  head_default as default
+};

package/dist/js/modern/exports/loadable.js

@@ -0,0 +1,6 @@
+import loadable from "@loadable/component";
+var loadable_default = loadable;
+export * from "@loadable/component";
+export {
+  loadable_default as default
+};

package/dist/js/modern/exports/server.js

@@ -0,0 +1,4 @@
+const hook = (attacher) => attacher;
+export {
+  hook
+};

package/dist/js/modern/exports/styled.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+var styled_default = styled;
+export * from "styled-components";
+export {
+  styled_default as default
+};

package/dist/js/modern/index.js

@@ -0,0 +1,22 @@
+import { isBrowser } from "./common";
+import {
+  createApp,
+  createPlugin,
+  useLoader,
+  bootstrap,
+  RuntimeReactContext,
+  defineConfig,
+  registerInit,
+  useRuntimeContext
+} from "./core";
+export {
+  RuntimeReactContext,
+  bootstrap,
+  createApp,
+  createPlugin,
+  defineConfig,
+  isBrowser,
+  registerInit,
+  useLoader,
+  useRuntimeContext
+};

package/dist/js/modern/router/cli/index.js

@@ -0,0 +1,120 @@
+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 {
+  getEntryOptions,
+  createRuntimeExportsUtils,
+  PLUGIN_SCHEMAS
+} from "@modern-js/utils";
+const PLUGIN_IDENTIFIER = "router";
+const ROUTES_IDENTIFIER = "routes";
+const isV5 = (config) => {
+  var _a, _b;
+  return ((_b = (_a = config == null ? void 0 : config.runtime) == null ? void 0 : _a.router) == null ? void 0 : _b.mode) === "react-router-5";
+};
+var cli_default = () => ({
+  name: "@modern-js/plugin-router",
+  required: ["@modern-js/runtime"],
+  setup: (api) => {
+    const runtimeConfigMap = /* @__PURE__ */ new Map();
+    let pluginsExportsUtils;
+    return {
+      config() {
+        const appContext = api.useAppContext();
+        pluginsExportsUtils = createRuntimeExportsUtils(
+          appContext.internalDirectory,
+          "plugins"
+        );
+        return {
+          source: {
+            alias: {
+              "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
+            }
+          }
+        };
+      },
+      validateSchema() {
+        return PLUGIN_SCHEMAS["@modern-js/plugin-router"];
+      },
+      modifyEntryImports({ entrypoint, imports }) {
+        const { entryName, fileSystemRoutes } = entrypoint;
+        const userConfig = api.useResolvedConfigContext();
+        const { packageName } = api.useAppContext();
+        const runtimeConfig = getEntryOptions(
+          entryName,
+          userConfig.runtime,
+          userConfig.runtimeByEntries,
+          packageName
+        );
+        runtimeConfigMap.set(entryName, runtimeConfig);
+        if (runtimeConfig == null ? void 0 : runtimeConfig.router) {
+          if (!isV5(userConfig)) {
+            imports.push({
+              value: "@modern-js/runtime/plugins",
+              specifiers: [{ imported: PLUGIN_IDENTIFIER }]
+            });
+          }
+        } else if (fileSystemRoutes) {
+          throw new Error(
+            `should enable runtime.router for entry ${entryName}`
+          );
+        }
+        return {
+          entrypoint,
+          imports
+        };
+      },
+      modifyEntryRuntimePlugins({ entrypoint, plugins }) {
+        const { entryName, fileSystemRoutes } = entrypoint;
+        const { serverRoutes } = api.useAppContext();
+        const userConfig = api.useResolvedConfigContext();
+        const runtimeConfig = runtimeConfigMap.get(entryName);
+        if (runtimeConfig.router && !isV5(userConfig)) {
+          const serverBase = serverRoutes.filter((route) => route.entryName === entryName).map((route) => route.urlPath).sort((a, b) => a.length - b.length > 0 ? -1 : 1);
+          plugins.push({
+            name: PLUGIN_IDENTIFIER,
+            options: JSON.stringify(__spreadProps(__spreadValues({
+              serverBase
+            }, runtimeConfig.router), {
+              routesConfig: fileSystemRoutes ? `{ ${ROUTES_IDENTIFIER}, globalApp: App }` : void 0
+            })).replace(
+              /"routesConfig"\s*:\s*"((\S|\s)+)"/g,
+              '"routesConfig": $1,'
+            )
+          });
+        }
+        return {
+          entrypoint,
+          plugins
+        };
+      },
+      addRuntimeExports() {
+        const userConfig = api.useResolvedConfigContext();
+        if (!isV5(userConfig)) {
+          pluginsExportsUtils.addExport(
+            `export { default as router } from '@modern-js/runtime/router'`
+          );
+        }
+      }
+    };
+  }
+});
+export {
+  cli_default as default
+};

package/dist/js/modern/router/index.js

@@ -0,0 +1,7 @@
+import { default as default2 } from "./runtime";
+import { default as default3 } from "./runtime";
+export * from "./runtime";
+export {
+  default3 as default,
+  default2 as router
+};

package/dist/js/modern/router/runtime/DefaultNotFound.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+const DefaultNotFound = () => /* @__PURE__ */ jsx("div", {
+  style: {
+    margin: "150px auto",
+    textAlign: "center",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  children: "404"
+});
+export {
+  DefaultNotFound
+};

package/dist/js/modern/router/runtime/index.js

@@ -0,0 +1,9 @@
+import { routerPlugin } from "./plugin";
+var runtime_default = routerPlugin;
+import { modifyRoutes } from "./plugin";
+export * from "react-router-dom";
+export * from "./withRouter";
+export {
+  runtime_default as default,
+  modifyRoutes
+};

package/dist/js/modern/router/runtime/plugin.js

@@ -0,0 +1,104 @@
+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 { jsx } from "react/jsx-runtime";
+import {
+  createBrowserRouter,
+  createHashRouter,
+  RouterProvider,
+  createRoutesFromElements,
+  useMatches,
+  useLocation
+} from "react-router-dom";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { renderRoutes, urlJoin } from "./utils";
+let finalRouteConfig = {
+  routes: []
+};
+let beforeCreateRouter = true;
+function modifyRoutes(modifyFunction) {
+  if (beforeCreateRouter) {
+    const { routes: originRoutes } = finalRouteConfig;
+    const newRoutes = modifyFunction(originRoutes);
+    finalRouteConfig.routes = newRoutes;
+  } else {
+    console.error(
+      "It is not allowed to modify routes config after create router."
+    );
+  }
+}
+const routerPlugin = ({
+  serverBase = [],
+  supportHtml5History = true,
+  basename = "",
+  routesConfig,
+  createRoutes
+}) => {
+  const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+  finalRouteConfig = routesConfig;
+  return {
+    name: "@modern-js/plugin-router",
+    setup: () => {
+      return {
+        init({ context }, next) {
+          context.router = {
+            useMatches,
+            useLocation
+          };
+          return next({ context });
+        },
+        hoc: ({ App }, next) => {
+          if (!finalRouteConfig && !createRoutes) {
+            return next({ App });
+          }
+          const getRouteApp = () => {
+            return (props) => {
+              var _a;
+              beforeCreateRouter = true;
+              const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
+              const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
+              const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
+              const router = supportHtml5History ? createBrowserRouter(routes, { basename: _basename }) : createHashRouter(routes, { basename: _basename });
+              return /* @__PURE__ */ jsx(App, __spreadProps(__spreadValues({}, props), {
+                children: /* @__PURE__ */ jsx(RouterProvider, {
+                  router
+                })
+              }));
+            };
+          };
+          const RouteApp = getRouteApp();
+          if (routesConfig == null ? void 0 : routesConfig.globalApp) {
+            return next({
+              App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
+            });
+          }
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};
+export {
+  beforeCreateRouter,
+  finalRouteConfig,
+  modifyRoutes,
+  routerPlugin
+};

package/dist/js/modern/router/runtime/plugin.node.js

@@ -0,0 +1,149 @@
+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 { useContext } from "react";
+import { createStaticHandler } from "@remix-run/router";
+import {
+  createStaticRouter,
+  StaticRouterProvider
+} from "react-router-dom/server";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { installGlobals } from "@remix-run/node";
+import { createRoutesFromElements } from "react-router-dom";
+import { RuntimeReactContext } from "../../core";
+import { renderRoutes, urlJoin } from "./utils";
+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;
+}
+const routerPlugin = ({
+  basename = "",
+  routesConfig,
+  createRoutes
+}) => {
+  return {
+    name: "@modern-js/plugin-router",
+    setup: () => {
+      return {
+        init(_0, _1) {
+          return __async(this, arguments, function* ({ 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 = yield 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);
+              return /* @__PURE__ */ jsx(App, __spreadProps(__spreadValues({}, props), {
+                children: /* @__PURE__ */ jsx(StaticRouterProvider, {
+                  router,
+                  context: routerContext,
+                  nonce: "the-nonce"
+                })
+              }));
+            };
+          };
+          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/router/runtime/server.js

@@ -0,0 +1 @@
+export * from "react-router-dom/server";

package/dist/js/modern/router/runtime/utils.js

@@ -0,0 +1,196 @@
+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";
+import { DefaultNotFound } from "./DefaultNotFound";
+const renderNestedRoute = (nestedRoute, parent) => {
+  const { children, index, id, component, isRoot } = nestedRoute;
+  const Component = component;
+  const routeProps = {
+    caseSensitive: nestedRoute.caseSensitive,
+    path: nestedRoute.path,
+    id: nestedRoute.id,
+    loader: createLoader(nestedRoute),
+    action: nestedRoute.action,
+    hasErrorBoundary: nestedRoute.hasErrorBoundary,
+    shouldRevalidate: nestedRoute.shouldRevalidate,
+    handle: nestedRoute.handle,
+    index: nestedRoute.index,
+    element: nestedRoute.element,
+    errorElement: nestedRoute.errorElement
+  };
+  if (nestedRoute.error) {
+    const errorElement = /* @__PURE__ */ jsx(nestedRoute.error, {});
+    routeProps.errorElement = errorElement;
+  }
+  let element;
+  if (Component) {
+    if (parent == null ? void 0 : parent.loading) {
+      const Loading = parent.loading;
+      if (isLoadableComponent(Component)) {
+        element = /* @__PURE__ */ jsx(Component, {
+          fallback: /* @__PURE__ */ jsx(Loading, {})
+        });
+      } else {
+        element = /* @__PURE__ */ jsx(Suspense, {
+          fallback: /* @__PURE__ */ jsx(Loading, {}),
+          children: /* @__PURE__ */ jsx(Component, {})
+        });
+      }
+    } else if (isLoadableComponent(Component) || isRoot) {
+      element = /* @__PURE__ */ jsx(Component, {});
+    } else {
+      element = /* @__PURE__ */ jsx(Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ jsx(Component, {})
+      });
+    }
+  } else {
+    nestedRoute.loading = parent == null ? void 0 : parent.loading;
+  }
+  if (element) {
+    routeProps.element = element;
+  }
+  const childElements = children == null ? void 0 : children.map((childRoute) => {
+    return renderNestedRoute(childRoute, nestedRoute);
+  });
+  const routeElement = index ? /* @__PURE__ */ jsx(Route, __spreadProps(__spreadValues({}, routeProps), {
+    index: true
+  }), id) : /* @__PURE__ */ jsx(Route, __spreadProps(__spreadValues({}, routeProps), {
+    index: false,
+    children: childElements
+  }), id);
+  return routeElement;
+};
+function getRouteComponents(routes, globalApp) {
+  const Layout = (_a) => {
+    var _b = _a, { Component } = _b, props = __objRest(_b, ["Component"]);
+    const GlobalLayout = globalApp;
+    if (!GlobalLayout) {
+      return /* @__PURE__ */ jsx(Component, __spreadValues({}, props));
+    }
+    return /* @__PURE__ */ jsx(GlobalLayout, __spreadValues({
+      Component
+    }, props));
+  };
+  const routeElements = [];
+  for (const route of routes) {
+    if (route.type === "nested") {
+      const routeElement = renderNestedRoute(route);
+      routeElements.push(routeElement);
+    } else {
+      const routeElement = /* @__PURE__ */ jsx(Route, {
+        path: route.path,
+        element: /* @__PURE__ */ jsx(Layout, {
+          Component: route.component
+        })
+      }, route.path);
+      routeElements.push(routeElement);
+    }
+  }
+  routeElements.push(/* @__PURE__ */ jsx(Route, {
+    path: "*",
+    element: /* @__PURE__ */ jsx(DefaultNotFound, {})
+  }, "*"));
+  return routeElements;
+}
+function renderRoutes(routesConfig) {
+  if (!routesConfig) {
+    return null;
+  }
+  const { routes, globalApp } = routesConfig;
+  if (!routes) {
+    return null;
+  }
+  const routeElements = getRouteComponents(routes, globalApp);
+  return routeElements;
+}
+function getLocation(serverContext) {
+  var _a;
+  const { pathname, url } = (serverContext == null ? void 0 : serverContext.request) || {};
+  const cleanUrl = (_a = url == null ? void 0 : url.replace("http://", "")) == null ? void 0 : _a.replace("https://", "");
+  const index = (cleanUrl || "").indexOf(pathname);
+  if (index === -1) {
+    return pathname;
+  }
+  return cleanUrl.substring(index);
+}
+const urlJoin = (...parts) => {
+  const separator = "/";
+  const replace = new RegExp(`${separator}{1,}`, "g");
+  return standardSlash(parts.join(separator).replace(replace, separator));
+};
+function standardSlash(str) {
+  let addr = str;
+  if (!addr || typeof addr !== "string") {
+    return addr;
+  }
+  if (addr.startsWith(".")) {
+    addr = addr.slice(1);
+  }
+  if (!addr.startsWith("/")) {
+    addr = `/${addr}`;
+  }
+  if (addr.endsWith("/") && addr !== "/") {
+    addr = addr.slice(0, addr.length - 1);
+  }
+  return addr;
+}
+function createLoader(route) {
+  const { loader } = route;
+  if (loader) {
+    return (args) => {
+      if (typeof route.lazyImport === "function") {
+        route.lazyImport();
+      }
+      return loader(args);
+    };
+  } else {
+    return () => {
+      if (typeof route.lazyImport === "function") {
+        route.lazyImport();
+      }
+      return null;
+    };
+  }
+}
+function isLoadableComponent(component) {
+  return component && component.displayName === "Loadable" && component.preload && typeof component.preload === "function";
+}
+export {
+  getLocation,
+  getRouteComponents,
+  renderRoutes,
+  standardSlash,
+  urlJoin
+};