@modern-js/runtime 1.4.4 → 1.5.0

package/dist/js/modern/ssr/index.node.js

@@ -8,7 +8,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /* eslint-disable @typescript-eslint/no-require-imports */
 import path from 'path';
-import { registerPrefetch } from '@modern-js/runtime-core';
+import { registerPrefetch } from "../core";
 import { isBrowser } from "../common";
 import prefetch from "./prefetch";
 import { formatServer } from "./utils";

package/dist/js/modern/ssr/prefetch.js

@@ -3,10 +3,10 @@ import fs from 'fs';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { run } from '@modern-js/utils/ssr';
 import { LOADABLE_STATS_FILE } from '@modern-js/utils/constants';
-import { ChunkExtractor } from '@loadable/server'; // todo: SSRContext
-
+import { ChunkExtractor } from '@loadable/server';
 import { jsx as _jsx } from "react/jsx-runtime";
 
+// todo: SSRContext
 const prefetch = async (App, context) => run(context.ssrContext.request.headers, async () => {
   var _context$store;
 

package/dist/js/modern/ssr/serverRender/index.js

@@ -1,5 +1,5 @@
-import { RuntimeContext } from '@modern-js/runtime-core';
 import { run } from '@modern-js/utils/ssr';
+import { RuntimeContext } from "../../core";
 import { PreRender } from "../react/prerender";
 import SSREntry from "./entry";
 import { time } from "./measure";

package/dist/js/modern/ssr/serverRender/styledComponent.js

@@ -1,4 +1,4 @@
-import { ServerStyleSheet } from '@modern-js/runtime-core/styled';
+import { ServerStyleSheet } from 'styled-components';
 export const toHtml = (jsx, renderer, next) => {
   const sheet = new ServerStyleSheet();
   const html = next(sheet.collectStyles(jsx));

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

@@ -5,10 +5,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { useContext } from 'react';
-import { RuntimeReactContext } from '@modern-js/runtime-core';
 import { createStore } from '@modern-js-reduck/store';
 import { Provider } from '@modern-js-reduck/react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { RuntimeReactContext } from "../../core";
 import { isBrowser } from "../../common";
 import { jsx as _jsx } from "react/jsx-runtime";
 

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

@@ -39,9 +39,7 @@ var _default = () => ({
                * But it will not be installed under the user project.
                * So need to add alias
                */
-              'styled-components': require.resolve('styled-components', {
-                paths: [require.resolve('@modern-js/runtime-core')]
-              })
+              'styled-components': require.resolve('styled-components')
             }
           }
         };

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = exports.defineConfig = void 0;
+const APP_CONFIG_SYMBOL = 'config';
+
+const getConfig = Component => // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+Component[APP_CONFIG_SYMBOL];
+
+exports.getConfig = getConfig;
+
+const defineConfig = (Component, config) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  Component[APP_CONFIG_SYMBOL] = config;
+  return Component;
+};
+
+exports.defineConfig = defineConfig;

package/dist/js/node/core/compatible.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRuntimeContext = exports.createApp = exports.bootstrap = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _plugin = require("./plugin");
+
+var _runtimeContext = require("./runtime-context");
+
+var _loaderManager = require("./loader/loaderManager");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["context"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function isClientArgs(id) {
+  return typeof id === 'string' || typeof HTMLElement !== 'undefined' && id instanceof HTMLElement;
+}
+
+const runnerMap = new WeakMap();
+
+const getInitialContext = runner => ({
+  loaderManager: (0, _loaderManager.createLoaderManager)({}),
+  runner,
+  isBrowser: true
+});
+
+const createApp = ({
+  plugins
+}) => {
+  const appRuntime = _plugin.runtime.clone();
+
+  appRuntime.usePlugin(...plugins);
+  return App => {
+    const runner = appRuntime.init();
+
+    const WrapperComponent = props => {
+      const element = /*#__PURE__*/_react.default.createElement(App || _react.default.Fragment, _objectSpread({}, props), props.children);
+
+      const context = (0, _react.useContext)(_runtimeContext.RuntimeReactContext);
+      return runner.provide({
+        element,
+        props: _objectSpread({}, props),
+        context
+      }, {
+        onLast: ({
+          element
+        }) => element
+      });
+    };
+
+    if (App) {
+      (0, _hoistNonReactStatics.default)(WrapperComponent, App);
+    }
+
+    const HOCApp = runner.hoc({
+      App: WrapperComponent
+    }, {
+      onLast: ({
+        App
+      }) => {
+        const WrapComponent = _ref => {
+          var _contextValue;
+
+          let {
+            context
+          } = _ref,
+              props = _objectWithoutProperties(_ref, _excluded);
+
+          let contextValue = context; // We should construct the context, when root component is not passed into `bootstrap`.
+
+          if (!((_contextValue = contextValue) !== null && _contextValue !== void 0 && _contextValue.runner)) {
+            contextValue = getInitialContext(runner);
+            runner.init({
+              context: contextValue
+            }, {
+              onLast: ({
+                context: context1
+              }) => {
+                var _App$init;
+
+                return App === null || App === void 0 ? void 0 : (_App$init = App.init) === null || _App$init === void 0 ? void 0 : _App$init.call(App, context1);
+              }
+            });
+          }
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_runtimeContext.RuntimeReactContext.Provider, {
+            value: contextValue,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread({}, props))
+          });
+        };
+
+        return (0, _hoistNonReactStatics.default)(WrapComponent, App);
+      }
+    });
+    runnerMap.set(HOCApp, runner);
+    return HOCApp;
+  };
+};
+
+exports.createApp = createApp;
+
+const bootstrap = async (BootApp,
+/**
+ * When csr, id is root id.
+ * When ssr, id is serverContext
+ */
+id) => {
+  let App = BootApp;
+  let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
+
+  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 _App, _App$init2;
+
+      return (_App = App) === null || _App === void 0 ? void 0 : (_App$init2 = _App.init) === null || _App$init2 === void 0 ? void 0 : _App$init2.call(_App, context1);
+    }
+  }); // don't mount the App, let user in charge of it.
+
+
+  if (!id) {
+    return /*#__PURE__*/_react.default.createElement(App, {
+      context
+    });
+  }
+
+  const isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
+
+  if (isBrowser) {
+    if (isClientArgs(id)) {
+      var _ssrData$data, _ssrData$data2;
+
+      const ssrData = window._SSR_DATA;
+      const loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data = ssrData.data) === null || _ssrData$data === void 0 ? void 0 : _ssrData$data.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, _objectSpread({
+        loaderManager: (0, _loaderManager.createLoaderManager)(initialLoadersState, {
+          skipStatic: true
+        })
+      }, ssrData ? {
+        ssrContext: ssrData === null || ssrData === void 0 ? void 0 : ssrData.context
+      } : {}));
+      context.initialData = ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data2 = ssrData.data) === null || _ssrData$data2 === void 0 ? void 0 : _ssrData$data2.initialData;
+      const initialData = await runInit(context);
+
+      if (initialData) {
+        context.initialData = initialData;
+      }
+
+      return runner.client({
+        App,
+        context,
+        rootElement: typeof id !== 'string' ? id : document.getElementById(id || 'root')
+      }, {
+        onLast: ({
+          App,
+          rootElement
+        }) => {
+          _reactDom.default.render( /*#__PURE__*/_react.default.createElement(App, {
+            context
+          }), rootElement);
+        }
+      });
+    } 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: (0, _loaderManager.createLoaderManager)({}, {
+        skipNonStatic: id.staticGenerate,
+        // if not static generate, only non-static loader can exec on prod env
+        skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
+      })
+    });
+    const initialData = await runInit(context);
+    context.initialData = initialData;
+    return runner.server({
+      App,
+      context
+    });
+  }
+};
+
+exports.bootstrap = bootstrap;
+
+const useRuntimeContext = () => {
+  const context = (0, _react.useContext)(_runtimeContext.RuntimeReactContext);
+  const memoizedContext = (0, _react.useMemo)(() => context.runner.pickContext({
+    context,
+    pickedContext: {}
+  }, {
+    onLast: ({
+      pickedContext
+    }) => pickedContext
+  }), [context]);
+  return memoizedContext;
+};
+
+exports.useRuntimeContext = useRuntimeContext;

package/dist/js/node/core/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  createPlugin: true,
+  createRuntime: true,
+  runtime: true,
+  registerInit: true,
+  registerPrefetch: true,
+  defineConfig: true,
+  getConfig: true,
+  RuntimeReactContext: true
+};
+Object.defineProperty(exports, "RuntimeReactContext", {
+  enumerable: true,
+  get: function () {
+    return _runtimeContext.RuntimeReactContext;
+  }
+});
+Object.defineProperty(exports, "createPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugin.createPlugin;
+  }
+});
+Object.defineProperty(exports, "createRuntime", {
+  enumerable: true,
+  get: function () {
+    return _plugin.createRuntime;
+  }
+});
+Object.defineProperty(exports, "defineConfig", {
+  enumerable: true,
+  get: function () {
+    return _appConfig.defineConfig;
+  }
+});
+Object.defineProperty(exports, "getConfig", {
+  enumerable: true,
+  get: function () {
+    return _appConfig.getConfig;
+  }
+});
+Object.defineProperty(exports, "registerInit", {
+  enumerable: true,
+  get: function () {
+    return _plugin.registerInit;
+  }
+});
+Object.defineProperty(exports, "registerPrefetch", {
+  enumerable: true,
+  get: function () {
+    return _plugin.registerPrefetch;
+  }
+});
+Object.defineProperty(exports, "runtime", {
+  enumerable: true,
+  get: function () {
+    return _plugin.runtime;
+  }
+});
+
+var _plugin = require("./plugin");
+
+var _appConfig = require("./app-config");
+
+var _compatible = require("./compatible");
+
+Object.keys(_compatible).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _compatible[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _compatible[key];
+    }
+  });
+});
+
+var _runtimeContext = require("./runtime-context");
+
+var _loader = require("./loader");
+
+Object.keys(_loader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _loader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _loader[key];
+    }
+  });
+});
+
+var _plugin2 = require("@modern-js/plugin");
+
+Object.keys(_plugin2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _plugin2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugin2[key];
+    }
+  });
+});

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useLoader", {
+  enumerable: true,
+  get: function () {
+    return _useLoader.default;
+  }
+});
+
+var _useLoader = _interopRequireDefault(require("./useLoader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/js/node/core/loader/loaderManager.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLoaderManager = exports.LoaderStatus = void 0;
+
+var _invariant = _interopRequireDefault(require("invariant"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Calc id from string or object
+ */
+const createGetId = () => {
+  const idCache = new Map();
+  return objectId => {
+    const cachedId = idCache.get(objectId);
+
+    if (cachedId) {
+      return cachedId;
+    } // WARNING: id should be unique after serialize.
+
+
+    const id = JSON.stringify(objectId);
+    (0, _invariant.default)(id, 'params should be not null value');
+    idCache.set(objectId, id);
+    return id;
+  };
+};
+
+let LoaderStatus;
+exports.LoaderStatus = LoaderStatus;
+
+(function (LoaderStatus) {
+  LoaderStatus[LoaderStatus["idle"] = 0] = "idle";
+  LoaderStatus[LoaderStatus["loading"] = 1] = "loading";
+  LoaderStatus[LoaderStatus["fulfilled"] = 2] = "fulfilled";
+  LoaderStatus[LoaderStatus["rejected"] = 3] = "rejected";
+})(LoaderStatus || (exports.LoaderStatus = LoaderStatus = {}));
+
+const createLoader = (id, initialData = {
+  loading: false,
+  reloading: false,
+  data: undefined,
+  error: undefined
+}, loaderFn, skip = false) => {
+  let promise;
+  let status = LoaderStatus.idle;
+  let {
+    data,
+    error
+  } = initialData;
+  let hasLoaded = false;
+  const handlers = new Set();
+
+  const load = async () => {
+    if (skip) {
+      return promise;
+    }
+
+    if (status === LoaderStatus.loading) {
+      return promise;
+    }
+
+    status = LoaderStatus.loading;
+    notify();
+    promise = loaderFn().then(value => {
+      data = value;
+      error = null;
+      status = LoaderStatus.fulfilled;
+    }).catch(e => {
+      error = e;
+      data = null;
+      status = LoaderStatus.rejected;
+    }).finally(() => {
+      promise = null;
+      hasLoaded = true;
+      notify();
+    });
+    return promise;
+  };
+
+  const getResult = () => ({
+    loading: !hasLoaded && status === LoaderStatus.loading,
+    reloading: hasLoaded && status === LoaderStatus.loading,
+    data,
+    error: error instanceof Error ? `${error.message}` : error,
+    // redundant fields for ssr log
+    _error: error
+  });
+
+  const notify = () => {
+    // don't iterate handlers directly, since it could be modified during iteration
+    [...handlers].forEach(handler => {
+      handler(status, getResult());
+    });
+  };
+
+  const onChange = handler => {
+    handlers.add(handler);
+    return () => {
+      handlers.delete(handler);
+    };
+  };
+
+  return {
+    get result() {
+      return getResult();
+    },
+
+    get promise() {
+      return promise;
+    },
+
+    onChange,
+    load
+  };
+};
+
+/**
+ * Create loaders manager. It's returned instance will add to context
+ * @param initialDataMap used to initialing loader data
+ */
+const createLoaderManager = (initialDataMap, managerOptions = {}) => {
+  const {
+    skipStatic = false,
+    skipNonStatic = false
+  } = managerOptions;
+  const loadersMap = new Map();
+  const getId = createGetId();
+
+  const add = (loaderFn, loaderOptions) => {
+    const id = getId(loaderOptions.params);
+    let loader = loadersMap.get(id); // private property for opting out loader cache, maybe change in future
+
+    const cache = loaderOptions._cache;
+
+    if (!loader || cache === false) {
+      // ignore non-static loader on static phase
+      const ignoreNonStatic = skipNonStatic && !loaderOptions.static; // ignore static loader on non-static phase
+
+      const ignoreStatic = skipStatic && loaderOptions.static;
+      const skipExec = ignoreNonStatic || ignoreStatic;
+      loader = createLoader(id, typeof initialDataMap[id] !== 'undefined' ? initialDataMap[id] : {
+        data: loaderOptions.initialData
+      }, loaderFn, // Todo whether static loader is exec when CSR
+      skipExec);
+      loadersMap.set(id, loader);
+    }
+
+    return id;
+  };
+
+  const get = id => loadersMap.get(id); // check if there has pending loaders
+
+
+  const hasPendingLoaders = () => {
+    for (const loader of loadersMap.values()) {
+      const {
+        promise
+      } = loader;
+
+      if (promise instanceof Promise) {
+        return true;
+      }
+    }
+
+    return false;
+  }; // waiting for all pending loaders to be settled
+
+
+  const awaitPendingLoaders = async () => {
+    const pendingLoaders = [];
+
+    for (const [id, loader] of loadersMap) {
+      const {
+        promise
+      } = loader;
+
+      if (promise instanceof Promise) {
+        pendingLoaders.push([id, loader]);
+      }
+    }
+
+    await Promise.all(pendingLoaders.map(item => item[1].promise));
+    return pendingLoaders.reduce((res, [id, loader]) => {
+      res[id] = loader.result;
+      return res;
+    }, {});
+  };
+
+  return {
+    hasPendingLoaders,
+    awaitPendingLoaders,
+    add,
+    get
+  };
+};
+
+exports.createLoaderManager = createLoaderManager;