@modern-js/runtime 2.31.2 → 2.31.3-alpha.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Modern.js
+Copyright (c) 2021-present Modern.js
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/cli/index.js

@@ -55,7 +55,8 @@ const runtimePlugin = () => ({
               * But it will not be installed under the user project.
               * So need to add alias
               */
-              "styled-components": require.resolve("styled-components")
+              "styled-components": require.resolve("styled-components"),
+              "@modern-js/utils": require.resolve("@modern-js/utils")
             },
             globalVars: {
               "process.env.IS_REACT18": process.env.IS_REACT18

package/dist/cjs/document/Style.js

@@ -15,11 +15,11 @@ const _constants = require("./constants");
 function Style(props) {
   const { content, children } = props;
   const contentStr = children || content;
-  const contentIIFE = encodeURIComponent(`(${contentStr})()`);
+  const styleContent = encodeURIComponent(`${contentStr}`);
   return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
     children: [
       `${_constants.DOCUMENT_STYLE_PLACEHOLDER_START}`,
-      `${contentIIFE}`,
+      `${styleContent}`,
       `${_constants.DOCUMENT_STYLE_PLACEHOLDER_END}`
     ]
   });

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

@@ -28,6 +28,7 @@ const _remixrouter = require("@modern-js/utils/runtime/remix-router");
 const _router = require("@modern-js/utils/runtime-node/router");
 const _hoistnonreactstatics = /* @__PURE__ */ _interop_require_default._(require("hoist-non-react-statics"));
 const _router1 = require("@modern-js/utils/runtime/router");
+const _runtimenode = require("@modern-js/utils/runtime-node");
 const _core = require("../../core");
 const _utils = require("./utils");
 const _fetch = require("./fetch");
@@ -89,7 +90,12 @@ const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
             basename: _basename
           });
           const remixRequest = createFetchRequest(request);
-          const routerContext = await query(remixRequest);
+          const requestContext = (0, _runtimenode.createRequestContext)();
+          const { reporter } = context.ssrContext;
+          requestContext.set(_runtimenode.reporterCtx, reporter);
+          const routerContext = await query(remixRequest, {
+            requestContext
+          });
           if (routerContext instanceof Response) {
             return routerContext;
           }

package/dist/esm/cli/index.js

@@ -39,7 +39,8 @@ export var runtimePlugin = function() {
                 * But it will not be installed under the user project.
                 * So need to add alias
                 */
-                "styled-components": require.resolve("styled-components")
+                "styled-components": require.resolve("styled-components"),
+                "@modern-js/utils": require.resolve("@modern-js/utils")
               },
               globalVars: {
                 "process.env.IS_REACT18": process.env.IS_REACT18

package/dist/esm/document/Style.js

@@ -3,11 +3,11 @@ import { DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END } from
 export function Style(props) {
   var content = props.content, children = props.children;
   var contentStr = children || content;
-  var contentIIFE = encodeURIComponent("(".concat(contentStr, ")()"));
+  var styleContent = encodeURIComponent("".concat(contentStr));
   return /* @__PURE__ */ _jsxs(_Fragment, {
     children: [
       "".concat(DOCUMENT_STYLE_PLACEHOLDER_START),
-      "".concat(contentIIFE),
+      "".concat(styleContent),
       "".concat(DOCUMENT_STYLE_PLACEHOLDER_END)
     ]
   });

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

@@ -10,6 +10,7 @@ import { createStaticHandler } from "@modern-js/utils/runtime/remix-router";
 import { createStaticRouter, StaticRouterProvider } from "@modern-js/utils/runtime-node/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { createRoutesFromElements } from "@modern-js/utils/runtime/router";
+import { createRequestContext, reporterCtx } from "@modern-js/utils/runtime-node";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { installGlobals } from "./fetch";
@@ -87,7 +88,7 @@ export var routerPlugin = function(param) {
         init: function init(param2, next) {
           var context = param2.context;
           return _async_to_generator(function() {
-            var _context_ssrContext, request, ssrMode, nonce, baseUrl, _basename, routes, runner, query, remixRequest, routerContext, router;
+            var _context_ssrContext, request, ssrMode, nonce, baseUrl, _basename, routes, runner, query, remixRequest, requestContext, reporter, routerContext, router;
             return _ts_generator(this, function(_state) {
               switch (_state.label) {
                 case 0:
@@ -115,9 +116,14 @@ export var routerPlugin = function(param) {
                     basename: _basename
                   }).query;
                   remixRequest = createFetchRequest(request);
+                  requestContext = createRequestContext();
+                  reporter = context.ssrContext.reporter;
+                  requestContext.set(reporterCtx, reporter);
                   return [
                     4,
-                    query(remixRequest)
+                    query(remixRequest, {
+                      requestContext: requestContext
+                    })
                   ];
                 case 1:
                   routerContext = _state.sent();

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

@@ -35,7 +35,8 @@ export const runtimePlugin = () => ({
               * But it will not be installed under the user project.
               * So need to add alias
               */
-              "styled-components": require.resolve("styled-components")
+              "styled-components": require.resolve("styled-components"),
+              "@modern-js/utils": require.resolve("@modern-js/utils")
             },
             globalVars: {
               "process.env.IS_REACT18": process.env.IS_REACT18

package/dist/esm-node/document/Style.js

@@ -3,11 +3,11 @@ import { DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END } from
 export function Style(props) {
   const { content, children } = props;
   const contentStr = children || content;
-  const contentIIFE = encodeURIComponent(`(${contentStr})()`);
+  const styleContent = encodeURIComponent(`${contentStr}`);
   return /* @__PURE__ */ _jsxs(_Fragment, {
     children: [
       `${DOCUMENT_STYLE_PLACEHOLDER_START}`,
-      `${contentIIFE}`,
+      `${styleContent}`,
       `${DOCUMENT_STYLE_PLACEHOLDER_END}`
     ]
   });

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

@@ -4,6 +4,7 @@ import { createStaticHandler } from "@modern-js/utils/runtime/remix-router";
 import { createStaticRouter, StaticRouterProvider } from "@modern-js/utils/runtime-node/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { createRoutesFromElements } from "@modern-js/utils/runtime/router";
+import { createRequestContext, reporterCtx } from "@modern-js/utils/runtime-node";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
 import { installGlobals } from "./fetch";
@@ -65,7 +66,12 @@ export const routerPlugin = ({ basename = "", routesConfig, createRoutes }) => {
             basename: _basename
           });
           const remixRequest = createFetchRequest(request);
-          const routerContext = await query(remixRequest);
+          const requestContext = createRequestContext();
+          const { reporter } = context.ssrContext;
+          requestContext.set(reporterCtx, reporter);
+          const routerContext = await query(remixRequest, {
+            requestContext
+          });
           if (routerContext instanceof Response) {
             return routerContext;
           }

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

@@ -0,0 +1,72 @@
+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 path from "path";
+import { PLUGIN_SCHEMAS, cleanRequireCache, isReact18 } from "@modern-js/utils";
+import PluginState from "../state/cli";
+import PluginSSR from "../ssr/cli";
+import PluginRouter from "../router/cli";
+import Document from "../document/cli";
+var cli_default = () => ({
+  name: "@modern-js/runtime",
+  post: [
+    "@modern-js/plugin-router",
+    "@modern-js/plugin-ssr",
+    "@modern-js/plugin-document",
+    "@modern-js/plugin-state",
+    "@modern-js/plugin-design-token"
+  ],
+  usePlugins: [PluginState(), PluginSSR(), PluginRouter(), Document()],
+  setup: (api) => {
+    return {
+      config() {
+        const dir = api.useAppContext().internalDirectory || "";
+        process.env.IS_REACT18 = isReact18(path.join(dir, "../../")).toString();
+        return {
+          runtime: {},
+          runtimeByEntries: {},
+          source: {
+            alias: {
+              "styled-components": require.resolve("styled-components")
+            },
+            globalVars: {
+              "process.env.IS_REACT18": process.env.IS_REACT18
+            }
+          }
+        };
+      },
+      validateSchema() {
+        return PLUGIN_SCHEMAS["@modern-js/runtime"];
+      },
+      beforeRestart() {
+        return __async(this, null, function* () {
+          cleanRequireCache([
+            require.resolve("../state/cli"),
+            require.resolve("../router/cli"),
+            require.resolve("../ssr/cli")
+          ]);
+        });
+      }
+    };
+  }
+});
+export {
+  cli_default as default
+};

package/dist/js/modern/common.js

@@ -0,0 +1,4 @@
+const isBrowser = () => typeof window !== "undefined" && window.name !== "nodejs";
+export {
+  isBrowser
+};

package/dist/js/modern/core/app-config.js

@@ -0,0 +1,10 @@
+const APP_CONFIG_SYMBOL = "config";
+const getConfig = (Component) => Component[APP_CONFIG_SYMBOL];
+const defineConfig = (Component, config) => {
+  Component[APP_CONFIG_SYMBOL] = config;
+  return Component;
+};
+export {
+  defineConfig,
+  getConfig
+};

package/dist/js/modern/core/compatible.js

@@ -0,0 +1,285 @@
+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;
+};
+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;
+};
+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 React, { useContext, useMemo } from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
+import {
+  RuntimeReactContext
+} from "../runtime-context";
+import { runtime } from "./plugin";
+import { createLoaderManager } from "./loader/loaderManager";
+const IS_REACT18 = process.env.IS_REACT18 === "true";
+function isClientArgs(id) {
+  return typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
+}
+const runnerMap = /* @__PURE__ */ new WeakMap();
+const getInitialContext = (runner) => ({
+  loaderManager: createLoaderManager({}),
+  runner,
+  isBrowser: true,
+  routeManifest: typeof window !== "undefined" && window[ROUTE_MANIFEST]
+});
+const createApp = ({ plugins }) => {
+  const appRuntime = runtime.clone();
+  appRuntime.usePlugin(...plugins);
+  return (App) => {
+    const runner = appRuntime.init();
+    const WrapperComponent = (props) => {
+      const element = React.createElement(
+        App || React.Fragment,
+        __spreadValues({}, props),
+        props.children
+      );
+      const context = useContext(RuntimeReactContext);
+      return runner.provide(
+        { element, props: __spreadValues({}, props), context },
+        {
+          onLast: ({ element: element2 }) => element2
+        }
+      );
+    };
+    if (App) {
+      hoistNonReactStatics(WrapperComponent, App);
+    }
+    const HOCApp = runner.hoc(
+      { App: WrapperComponent },
+      {
+        onLast: ({ App: App2 }) => {
+          const WrapComponent = (_a) => {
+            var _b = _a, { context } = _b, props = __objRest(_b, ["context"]);
+            let contextValue = context;
+            if (!(contextValue == null ? void 0 : contextValue.runner)) {
+              contextValue = getInitialContext(runner);
+              runner.init(
+                { context: contextValue },
+                {
+                  onLast: ({ context: context1 }) => {
+                    var _a2;
+                    return (_a2 = App2 == null ? void 0 : App2.init) == null ? void 0 : _a2.call(App2, context1);
+                  }
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx(RuntimeReactContext.Provider, {
+              value: contextValue,
+              children: /* @__PURE__ */ jsx(App2, __spreadValues({}, props))
+            });
+          };
+          return hoistNonReactStatics(WrapComponent, App2);
+        }
+      }
+    );
+    runnerMap.set(HOCApp, runner);
+    return HOCApp;
+  };
+};
+const bootstrap = (BootApp, id, root, ReactDOM) => __async(void 0, null, function* () {
+  var _a, _b;
+  let App = BootApp;
+  let runner = runnerMap.get(App);
+  if (!runner) {
+    App = createApp({ plugins: [] })(App);
+    runner = runnerMap.get(App);
+  }
+  const context = getInitialContext(runner);
+  const runInit = (_context) => runner.init(
+    { context: _context },
+    {
+      onLast: ({ context: context1 }) => {
+        var _a2;
+        return (_a2 = App == null ? void 0 : App.init) == null ? void 0 : _a2.call(App, context1);
+      }
+    }
+  );
+  if (!id) {
+    return React.createElement(App, {
+      context
+    });
+  }
+  const isBrowser = typeof window !== "undefined" && window.name !== "nodejs";
+  if (isBrowser) {
+    if (isClientArgs(id)) {
+      const ssrData = window._SSR_DATA;
+      const loadersData = ((_a = ssrData == null ? void 0 : ssrData.data) == null ? void 0 : _a.loadersData) || {};
+      const initialLoadersState = Object.keys(loadersData).reduce(
+        (res, key) => {
+          const loaderData = loadersData[key];
+          if (loaderData.loading !== false) {
+            return res;
+          }
+          res[key] = loaderData;
+          return res;
+        },
+        {}
+      );
+      Object.assign(context, __spreadValues({
+        loaderManager: createLoaderManager(initialLoadersState, {
+          skipStatic: true
+        })
+      }, ssrData ? { ssrContext: ssrData == null ? void 0 : ssrData.context } : {}));
+      context.initialData = (_b = ssrData == null ? void 0 : ssrData.data) == null ? void 0 : _b.initialData;
+      const initialData = yield runInit(context);
+      if (initialData) {
+        context.initialData = initialData;
+      }
+      const rootElement = typeof id !== "string" ? id : document.getElementById(id || "root");
+      if (!ReactDOM) {
+        throw Error("The `bootstrap` need provide `ReactDOM` parameter");
+      }
+      const ModernRender = (App2) => {
+        if (IS_REACT18) {
+          if (root) {
+            root.render(App2);
+          } else if (ReactDOM.createRoot) {
+            ReactDOM.createRoot(rootElement).render(App2);
+          } else {
+            throw Error(
+              "The `bootstrap` `ReactDOM` parameter needs to provide the `createRoot` method"
+            );
+          }
+        } else {
+          if (!ReactDOM.render) {
+            throw Error(
+              "The `bootstrap` `ReactDOM` parameter needs to provide the `render` method"
+            );
+          }
+          ReactDOM.render(App2, rootElement);
+        }
+      };
+      const ModernHydrate = (App2, callback) => {
+        if (IS_REACT18) {
+          if (!ReactDOM.hydrateRoot) {
+            throw Error(
+              "The `bootstrap` `ReactDOM` parameter needs to provide the `hydrateRoot` method"
+            );
+          }
+          ReactDOM.hydrateRoot(rootElement, App2);
+        } else {
+          if (!ReactDOM.hydrate) {
+            throw Error(
+              "The `bootstrap` `ReactDOM` parameter needs to provide the `hydrate` method"
+            );
+          }
+          ReactDOM.hydrate(App2, rootElement, callback);
+        }
+      };
+      return runner.client(
+        {
+          App,
+          context,
+          ModernRender,
+          ModernHydrate
+        },
+        {
+          onLast: ({ App: App2 }) => {
+            ModernRender(React.createElement(App2, { context }));
+          }
+        }
+      );
+    } else {
+      throw Error(
+        "`bootstrap` needs id in browser environment, it needs to be string or element"
+      );
+    }
+  } else {
+    Object.assign(context, {
+      ssrContext: id,
+      isBrowser: false,
+      loaderManager: createLoaderManager(
+        {},
+        {
+          skipNonStatic: id.staticGenerate,
+          skipStatic: process.env.NODE_ENV === "production" && !id.staticGenerate
+        }
+      )
+    });
+    const isRedirectResponse = (result) => {
+      if (typeof Response !== "undefined" && result instanceof Response && result.status >= 300 && result.status <= 399) {
+        const { status } = result;
+        const redirectUrl = result.headers.get("Location") || "/";
+        const { ssrContext } = context;
+        if (ssrContext) {
+          ssrContext.res.statusCode = status;
+          ssrContext.res.setHeader("Location", redirectUrl);
+          ssrContext.redirection.status = status;
+          ssrContext.redirection.url = redirectUrl;
+        }
+        return true;
+      }
+      return false;
+    };
+    const initialData = yield runInit(context);
+    if (!isRedirectResponse(initialData)) {
+      context.initialData = initialData;
+      return runner.server({
+        App,
+        context
+      });
+    }
+  }
+});
+const useRuntimeContext = () => {
+  const context = useContext(RuntimeReactContext);
+  const memoizedContext = useMemo(
+    () => context.runner.pickContext(
+      { context, pickedContext: {} },
+      {
+        onLast: ({ pickedContext }) => pickedContext
+      }
+    ),
+    [context]
+  );
+  return memoizedContext;
+};
+export {
+  bootstrap,
+  createApp,
+  useRuntimeContext
+};

package/dist/js/modern/core/index.js

@@ -0,0 +1,16 @@
+import { createPlugin, createRuntime, runtime, registerInit } from "./plugin";
+import { defineConfig, getConfig } from "./app-config";
+export * from "./compatible";
+import { RuntimeReactContext, ServerRouterContext } from "../runtime-context";
+export * from "./loader";
+export * from "@modern-js/plugin";
+export {
+  RuntimeReactContext,
+  ServerRouterContext,
+  createPlugin,
+  createRuntime,
+  defineConfig,
+  getConfig,
+  registerInit,
+  runtime
+};

package/dist/js/modern/core/loader/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./useLoader";
+export {
+  default2 as useLoader
+};