@modern-js/runtime 1.4.2 → 1.5.0

package/dist/js/treeshaking/core/loader/useLoader.js

@@ -0,0 +1,107 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useContext, useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import invariant from 'invariant';
+import { RuntimeReactContext } from "../runtime-context";
+import { LoaderStatus } from "./loaderManager";
+
+var useLoader = function useLoader(loaderFn) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    params: undefined
+  };
+  var context = useContext(RuntimeReactContext);
+  var isSSRRender = Boolean(context.ssr);
+  var loaderManager = context.loaderManager;
+  var loaderRef = useRef();
+  var unlistenLoaderChangeRef = useRef(null); // SSR render should ignore `_cache` prop
+
+  if (isSSRRender && Object.prototype.hasOwnProperty.call(options, '_cache')) {
+    delete options._cache;
+  }
+
+  var load = useCallback(function (params) {
+    var _unlistenLoaderChange, _window, _window$_SSR_DATA, _window$_SSR_DATA$dat, _window$_SSR_DATA$dat2, _loaderRef$current2;
+
+    if (typeof params === 'undefined') {
+      var _loaderRef$current;
+
+      return (_loaderRef$current = loaderRef.current) === null || _loaderRef$current === void 0 ? void 0 : _loaderRef$current.load();
+    }
+
+    var id = loaderManager.add(function () {
+      try {
+        var _res = loaderFn(context, params);
+
+        if (_res instanceof Promise) {
+          return _res;
+        }
+
+        return Promise.resolve(_res);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }, _objectSpread(_objectSpread({}, options), {}, {
+      params: params
+    }));
+    loaderRef.current = loaderManager.get(id); // unsubscribe old loader onChange event
+
+    (_unlistenLoaderChange = unlistenLoaderChangeRef.current) === null || _unlistenLoaderChange === void 0 ? void 0 : _unlistenLoaderChange.call(unlistenLoaderChangeRef);
+
+    if (isSSRRender) {
+      return undefined;
+    } // skip this loader, then try to unlisten loader change
+
+
+    if (options.skip) {
+      return undefined;
+    } // do not load data again in CSR hydrate stage if SSR data exists
+
+
+    if (context._hydration && ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : (_window$_SSR_DATA$dat = _window$_SSR_DATA.data) === null || _window$_SSR_DATA$dat === void 0 ? void 0 : (_window$_SSR_DATA$dat2 = _window$_SSR_DATA$dat.loadersData[id]) === null || _window$_SSR_DATA$dat2 === void 0 ? void 0 : _window$_SSR_DATA$dat2.error) === null) {
+      return undefined;
+    }
+
+    var res = loaderRef.current.load();
+    unlistenLoaderChangeRef.current = (_loaderRef$current2 = loaderRef.current) === null || _loaderRef$current2 === void 0 ? void 0 : _loaderRef$current2.onChange(function (_status, _result) {
+      setResult(_result);
+
+      if (_status === LoaderStatus.fulfilled) {
+        var _options$onSuccess;
+
+        options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, _result.data);
+      }
+
+      if (_status === LoaderStatus.rejected) {
+        var _options$onError;
+
+        options === null || options === void 0 ? void 0 : (_options$onError = options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(options, _result.error);
+      }
+    });
+    return res;
+  }, [options.skip]);
+  useEffect(function () {
+    return function () {
+      var _unlistenLoaderChange2;
+
+      (_unlistenLoaderChange2 = unlistenLoaderChangeRef.current) === null || _unlistenLoaderChange2 === void 0 ? void 0 : _unlistenLoaderChange2.call(unlistenLoaderChangeRef);
+    };
+  }, []);
+  useMemo(function () {
+    var _options$params;
+
+    var p = (_options$params = options.params) !== null && _options$params !== void 0 ? _options$params : loaderFn.id;
+    invariant(typeof p !== 'undefined' && p !== null, 'Params is required in useLoader');
+    load(p);
+  }, [options.params]);
+
+  var _useState = useState(loaderRef.current.result),
+      _useState2 = _slicedToArray(_useState, 2),
+      result = _useState2[0],
+      setResult = _useState2[1];
+
+  return _objectSpread(_objectSpread({}, result), {}, {
+    reload: load
+  });
+};
+
+export default useLoader;

package/dist/js/treeshaking/core/plugin.js

@@ -0,0 +1,105 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { createManager, createPipeline, createAsyncPipeline } from '@modern-js/plugin';
+import { createLoaderManager } from "./loader/loaderManager";
+var hoc = createPipeline(); // eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+var provide = createPipeline();
+var client = createAsyncPipeline();
+var server = createAsyncPipeline();
+var init = createAsyncPipeline();
+var pickContext = createPipeline();
+var runtimeHooks = {
+  hoc: hoc,
+  provide: provide,
+  client: client,
+  server: server,
+  init: init,
+  pickContext: pickContext
+};
+/** All hooks of runtime plugin. */
+
+export var createRuntime = function createRuntime() {
+  return createManager(runtimeHooks);
+};
+/**
+ * register init hook. It would be revoked both ssr and csr.
+ */
+
+var registerInit = function registerInit(App, _init) {
+  var originalInit = App.init;
+
+  App.init = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!context.loaderManager) {
+                context.loaderManager = createLoaderManager({});
+              }
+
+              _context.next = 3;
+              return Promise.all([originalInit === null || originalInit === void 0 ? void 0 : originalInit(context), _init === null || _init === void 0 ? void 0 : _init(context)]);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+/**
+ * register prefetch hook. It would be revoked both ssr and csr.
+ * But if ssr success, It wont exec in csr again.
+ * If ssr prefetch failed, It will fallback to exec in csr.
+ */
+
+
+var registerPrefetch = function registerPrefetch(App, prefetch) {
+  var originalPrefetch = App.prefetch;
+
+  App.prefetch = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(context) {
+      var originResult, result;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return originalPrefetch === null || originalPrefetch === void 0 ? void 0 : originalPrefetch(context);
+
+            case 2:
+              originResult = _context2.sent;
+              _context2.next = 5;
+              return prefetch === null || prefetch === void 0 ? void 0 : prefetch(context);
+
+            case 5:
+              result = _context2.sent;
+              return _context2.abrupt("return", _objectSpread(_objectSpread({}, originResult), result));
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function (_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};
+
+export var runtime = createRuntime();
+var createPlugin = runtime.createPlugin;
+export { createPlugin };
+export { registerInit, registerPrefetch };

package/dist/js/treeshaking/core/runtime-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var RuntimeReactContext = /*#__PURE__*/createContext({});

package/dist/js/treeshaking/exports/styled.js

@@ -1,3 +1,3 @@
-import styled from '@modern-js/runtime-core/styled';
+import styled from 'styled-components';
 export default styled;
-export * from '@modern-js/runtime-core/styled';
+export * from 'styled-components';

package/dist/js/treeshaking/index.js

@@ -1 +1 @@
-export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from '@modern-js/runtime-core';
+export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from "./core";

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

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import path from 'path';
 import { getEntryOptions, createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
 var PLUGIN_IDENTIFIER = 'router';
 var ROUTES_IDENTIFIER = 'routes';
@@ -10,7 +9,6 @@ export default (function () {
     setup: function setup(api) {
       var runtimeConfigMap = new Map();
       var pluginsExportsUtils;
-      var runtimeModulePath = path.resolve(__dirname, '../');
       return {
         config: function config() {
           var appContext = api.useAppContext();
@@ -92,7 +90,7 @@ export default (function () {
           };
         },
         addRuntimeExports: function addRuntimeExports() {
-          pluginsExportsUtils.addExport("export { default as router } from '".concat(runtimeModulePath, "'"));
+          pluginsExportsUtils.addExport("export { default as router } from '@modern-js/runtime/runtime-router'");
         }
       };
     }

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

@@ -2,8 +2,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext } from 'react';
 import { createBrowserHistory, createHashHistory } from 'history';
 import { Router, StaticRouter } from 'react-router-dom';
-import { RuntimeReactContext } from '@modern-js/runtime-core';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { RuntimeReactContext } from "../../core";
 import { isBrowser } from "../../common";
 import { renderRoutes, getLocation, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -60,11 +60,13 @@ export function renderRoutes(routesConfig) {
   });
 }
 export function getLocation(serverContext) {
+  var _url$replace;
+
   var _ref2 = (serverContext === null || serverContext === void 0 ? void 0 : serverContext.request) || {},
       pathname = _ref2.pathname,
       url = _ref2.url;
 
-  var cleanUrl = url.replace('http://', '').replace('https://', '');
+  var cleanUrl = url === null || url === void 0 ? void 0 : (_url$replace = url.replace('http://', '')) === null || _url$replace === void 0 ? void 0 : _url$replace.replace('https://', '');
   var index = (cleanUrl || '').indexOf(pathname);
 
   if (index === -1) {

package/dist/js/treeshaking/ssr/cli/index.js

@@ -1,4 +1,3 @@
-import path from 'path';
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 var PLUGIN_IDENTIFIER = 'ssr';
 export default (function () {
@@ -8,7 +7,6 @@ export default (function () {
     setup: function setup(api) {
       var ssrConfigMap = new Map();
       var pluginsExportsUtils;
-      var ssrModulePath = path.resolve(__dirname, '../');
       return {
         config: function config() {
           var appContext = api.useAppContext();
@@ -54,7 +52,7 @@ export default (function () {
               packageName = _api$useAppContext.packageName,
               entrypoints = _api$useAppContext.entrypoints;
 
-          pluginsExportsUtils.addExport("export { default as ssr } from '".concat(ssrModulePath, "'")); // if use ssg then set ssr config to true
+          pluginsExportsUtils.addExport("export { default as ssr } from '@modern-js/runtime/runtime-ssr'"); // if use ssg then set ssr config to true
 
           var ssrConfig = getEntryOptions(entryName, userConfig.server.ssr, userConfig.server.ssrByEntries, packageName);
           var ssgConfig = userConfig.output.ssg;

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

@@ -6,7 +6,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 
 /* 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/treeshaking/ssr/prefetch.js

@@ -5,10 +5,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
 var prefetch = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(App, context) {
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {

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

@@ -1,7 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-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/treeshaking/ssr/serverRender/styledComponent.js

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

package/dist/js/treeshaking/state/cli/index.js

@@ -1,4 +1,3 @@
-import path from 'path';
 import { getEntryOptions, createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
 import "../types";
 var PLUGIN_IDENTIFIER = 'state';
@@ -9,7 +8,6 @@ export default (function () {
     setup: function setup(api) {
       var stateConfigMap = new Map();
       var pluginsExportsUtils;
-      var stateModulePath = path.resolve(__dirname, '../');
       return {
         config: function config() {
           var appContext = api.useAppContext();
@@ -92,7 +90,7 @@ export default (function () {
           return PLUGIN_SCHEMAS['@modern-js/plugin-state'];
         },
         addRuntimeExports: function addRuntimeExports() {
-          pluginsExportsUtils.addExport("export { default as state } from '".concat(stateModulePath, "'"));
+          pluginsExportsUtils.addExport("export { default as state } from '@modern-js/runtime/runtime-state'");
         }
       };
     }

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

@@ -1,9 +1,9 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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/types/core/app-config.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export interface AppConfig {
+  [key: string]: any;
+}
+export declare const getConfig: (Component: React.ComponentType<any>) => AppConfig | undefined;
+export declare const defineConfig: (Component: React.ComponentType<any>, config: AppConfig) => React.ComponentType<any>;

package/dist/types/core/compatible.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Plugin } from './plugin';
+import { TRuntimeContext } from './runtime-context';
+export declare type CreateAppOptions = {
+  plugins: Plugin[];
+};
+export declare const createApp: ({
+  plugins
+}: CreateAppOptions) => (App?: React.ComponentType<any>) => React.ComponentType<any>;
+declare type BootStrap<T = unknown> = (App: React.ComponentType, id?: string | Record<string, any> | HTMLElement) => Promise<T>;
+export declare const bootstrap: BootStrap;
+export declare const useRuntimeContext: () => TRuntimeContext;
+export {};

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

@@ -0,0 +1,9 @@
+export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from './plugin';
+export type { Plugin } from './plugin';
+export { defineConfig, getConfig } from './app-config';
+export type { AppConfig } from './app-config';
+export * from './compatible';
+export type { TRuntimeContext, RuntimeContext } from './runtime-context';
+export { RuntimeReactContext } from './runtime-context';
+export * from './loader';
+export * from '@modern-js/plugin';

package/dist/types/core/loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useLoader } from './useLoader';
+export type { SSRData, SSRContainer } from './useLoader';

package/dist/types/core/loader/loaderManager.d.ts

@@ -0,0 +1,57 @@
+import { LoaderOptions } from './useLoader';
+export declare enum LoaderStatus {
+  idle = 0,
+  loading = 1,
+  fulfilled = 2,
+  rejected = 3,
+}
+export declare type LoaderResult = {
+  loading: boolean;
+  reloading: boolean;
+  data: any;
+  error: any;
+  _error?: any;
+};
+declare const createLoader: (id: string, initialData: Partial<LoaderResult> | undefined, loaderFn: () => Promise<any>, skip?: boolean) => {
+  readonly result: {
+    loading: boolean;
+    reloading: boolean;
+    data: any;
+    error: any;
+    _error: any;
+  };
+  readonly promise: Promise<any> | null;
+  onChange: (handler: (status: LoaderStatus, result: LoaderResult) => void) => () => void;
+  load: () => Promise<any>;
+};
+declare type ManagerOption = {
+  /**
+   * whether current manage only exec static loader
+   */
+  skipStatic?: boolean;
+  skipNonStatic?: boolean;
+};
+/**
+ * Create loaders manager. It's returned instance will add to context
+ * @param initialDataMap used to initialing loader data
+ */
+
+export declare const createLoaderManager: (initialDataMap: Record<string, LoaderResult>, managerOptions?: ManagerOption) => {
+  hasPendingLoaders: () => boolean;
+  awaitPendingLoaders: () => Promise<Record<string, LoaderResult>>;
+  add: (loaderFn: () => Promise<any>, loaderOptions: LoaderOptions) => any;
+  get: (id: string) => {
+    readonly result: {
+      loading: boolean;
+      reloading: boolean;
+      data: any;
+      error: any;
+      _error: any;
+    };
+    readonly promise: Promise<any> | null;
+    onChange: (handler: (status: LoaderStatus, result: LoaderResult) => void) => () => void;
+    load: () => Promise<any>;
+  } | undefined;
+};
+export declare type Loader = ReturnType<typeof createLoader>;
+export {};

package/dist/types/core/loader/useLoader.d.ts

@@ -0,0 +1,54 @@
+import { LoaderResult } from './loaderManager';
+export interface SSRData {
+  loadersData: Record<string, LoaderResult | undefined>;
+  initialData?: Record<string, unknown>;
+}
+export interface SSRContainer {
+  data?: SSRData;
+}
+declare global {
+  interface Window {
+    _SSR_DATA?: SSRContainer;
+  }
+}
+export interface LoaderOptions<Params = any, TData = any, TError extends Error = any> {
+  /**
+   * Revoke when loader excuted successfully.
+   */
+  onSuccess?: (data: TData) => void;
+  /**
+   * Revoke when loader ended with error
+   */
+
+  onError?: (error: TError) => void;
+  /**
+   * initialData to display once loader is ready.
+   */
+
+  initialData?: TData;
+  /**
+   * whether skip loader
+   * if true, the loader will not exec.
+   */
+
+  skip?: boolean;
+  /**
+   * User params, it will pass to loader's second parameter.
+   */
+
+  params?: Params;
+  /**
+   * whether loader can exec on build phase.
+   */
+
+  static?: boolean;
+}
+declare type LoaderFn<P = any, T = any> = (context: any, params: P) => Promise<T>;
+declare const useLoader: <TData = any, Params = any, E = any>(loaderFn: LoaderFn<Params, TData>, options?: LoaderOptions<Params, any, any>) => {
+  reload: (params?: Params | undefined) => Promise<any> | undefined;
+  loading: boolean;
+  reloading: boolean;
+  data: TData;
+  error: E;
+};
+export default useLoader;