@modern-js/runtime 2.17.1 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @modern-js/runtime
 
+## 2.18.0
+
+### Minor Changes
+
+- 7de6599: feat: rspack-provider support modern.js ssr mode
+  feat: rspack-provider 支持 modern.js ssr 模式
+
+### Patch Changes
+
+- @modern-js/plugin@2.18.0
+- @modern-js/types@2.18.0
+- @modern-js/utils@2.18.0
+
 ## 2.17.1
 
 ### Patch Changes

package/README.md

@@ -24,3 +24,9 @@ Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/
 ## License
 
 Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).
+
+## Credist
+
+Thanks to:
+
+- [@loadable/webpack-plugin](https://github.com/gregberge/loadable-components) to create a webpack plugin prepare for loadable usage in ssr.

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

@@ -42,16 +42,31 @@ const _default = () => {
         config() {
           const appContext = api.useAppContext();
           pluginsExportsUtils = (0, _utils.createRuntimeExportsUtils)(appContext.internalDirectory, "plugins");
+          const userConfig = api.useResolvedConfigContext();
           const { bundlerType = "webpack" } = api.useAppContext();
-          const babelConfig = bundlerType === "webpack" ? (config) => {
-            var _config_plugins;
-            (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
-            const userConfig = api.useResolvedConfigContext();
-            if ((0, _utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
-              var _config_plugins1;
-              (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+          const babelConfig = (() => {
+            if (bundlerType === "webpack") {
+              return (config) => {
+                var _config_plugins;
+                (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
+                if ((0, _utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
+                  var _config_plugins1;
+                  (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+                }
+              };
+            } else if (bundlerType === "rspack") {
+              if ((0, _utils.isUseSSRBundle)(userConfig)) {
+                return (config) => {
+                  var _config_plugins;
+                  (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
+                  if (hasStringSSREntry(userConfig)) {
+                    var _config_plugins1;
+                    (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+                  }
+                };
+              }
             }
-          } : void 0;
+          })();
           return {
             source: {
               alias: {
@@ -64,11 +79,11 @@ const _default = () => {
               }
             },
             tools: {
-              webpackChain: (chain, { isServer, isServiceWorker, CHAIN_ID }) => {
-                const userConfig = api.useResolvedConfigContext();
-                if ((0, _utils.isUseSSRBundle)(userConfig) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig)) {
-                  const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
-                  chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableWebpackPlugin, [
+              bundlerChain(chain, { isServer, isServiceWorker, CHAIN_ID }) {
+                const userConfig2 = api.useResolvedConfigContext();
+                if ((0, _utils.isUseSSRBundle)(userConfig2) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig2)) {
+                  const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
+                  chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
                     {
                       filename: _utils.LOADABLE_STATS_FILE
                     }

package/dist/cjs/ssr/cli/loadable-bundler-plugin.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const _path = /* @__PURE__ */ _interop_require_default(require("path"));
+const _utils = require("@modern-js/utils");
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _interop_require_default(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+class LoadablePlugin {
+  apply(compiler) {
+    this.compiler = compiler;
+    compiler.options.output.chunkLoadingGlobal = this.opts.chunkLoadingGlobal;
+    if (this.opts.outputAsset || this.opts.writeToDisk) {
+      compiler.hooks.make.tap(LoadablePlugin.name, (compilation) => {
+        compilation.hooks.processAssets.tap({
+          name: LoadablePlugin.name,
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
+        }, () => {
+          const asset = this.handleEmit(compilation);
+          if (asset) {
+            compilation.emitAsset(this.opts.filename, asset);
+          }
+        });
+      });
+    }
+  }
+  handleEmit(compilation) {
+    const stats = compilation.getStats().toJson({
+      all: false,
+      assets: true,
+      // rspack not support cachedAssets,
+      cachedAssets: true,
+      chunks: true,
+      chunkGroups: true,
+      entrypoints: true,
+      // rspack not support chunkGroupChildren.
+      chunkGroupChildren: true,
+      hash: true,
+      ids: true,
+      outputPath: true,
+      publicPath: true
+    });
+    const output = {
+      ...stats,
+      generator: "loadable-components",
+      chunks: [
+        ...stats.chunks || []
+      ].map((chunk) => {
+        return {
+          id: chunk.id,
+          files: [
+            ...chunk.files || []
+          ]
+        };
+      })
+    };
+    const result = JSON.stringify(output, null, 2);
+    if (this.opts.writeToDisk) {
+      this.writeAssetsFile(result);
+    }
+    if (this.opts.outputAsset) {
+      return {
+        source() {
+          return result;
+        },
+        size() {
+          return result.length;
+        }
+      };
+    }
+    return null;
+  }
+  writeAssetsFile(manifest) {
+    var _this_compiler;
+    const outputFolder = (_this_compiler = this.compiler) === null || _this_compiler === void 0 ? void 0 : _this_compiler.options.output.path;
+    const outputFile = _path.default.resolve(outputFolder || "", this.opts.filename);
+    _utils.fs.outputFileSync(outputFile, manifest);
+  }
+  constructor({ filename = "loadable-stats.json", path, writeToDisk, outputAsset = true, chunkLoadingGlobal = "__LOADABLE_LOADED_CHUNKS__" } = {
+    filename: "loadable-stats.json",
+    outputAsset: true,
+    chunkLoadingGlobal: "__LOADABLE_LOADED_CHUNKS__"
+  }) {
+    _define_property(this, "opts", void 0);
+    _define_property(this, "compiler", void 0);
+    this.opts = {
+      filename,
+      path,
+      writeToDisk,
+      outputAsset,
+      chunkLoadingGlobal
+    };
+    this.compiler = null;
+  }
+}
+module.exports = LoadablePlugin;

package/dist/esm/core/compatible.js

@@ -41,7 +41,7 @@ function _async_to_generator(fn) {
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -245,7 +245,7 @@ var runnerMap = /* @__PURE__ */ new WeakMap();
 var getInitialContext = function(runner) {
   return {
     loaderManager: createLoaderManager({}),
-    runner,
+    runner: runner,
     isBrowser: true,
     routeManifest: typeof window !== "undefined" && window[ROUTE_MANIFEST]
   };
@@ -262,9 +262,9 @@ export var createApp = function(param) {
       var element = /* @__PURE__ */ React.createElement(App || React.Fragment, App ? _object_spread({}, props) : null, App ? props.children : /* @__PURE__ */ React.cloneElement(props.children, _object_spread({}, (_props_children = props.children) === null || _props_children === void 0 ? void 0 : _props_children.props, props)));
       var context = useContext(RuntimeReactContext);
       return runner.provide({
-        element,
+        element: element,
         props: _object_spread({}, props),
-        context
+        context: context
       }, {
         onLast: function(param2) {
           var element2 = param2.element;
@@ -340,7 +340,7 @@ export var bootstrap = function() {
             return [
               2,
               /* @__PURE__ */ React.createElement(App, {
-                context
+                context: context
               })
             ];
           }
@@ -418,15 +418,15 @@ export var bootstrap = function() {
           return [
             2,
             runner.client({
-              App,
-              context,
-              ModernRender,
-              ModernHydrate
+              App: App,
+              context: context,
+              ModernRender: ModernRender,
+              ModernHydrate: ModernHydrate
             }, {
               onLast: function(param) {
                 var App2 = param.App;
                 ModernRender(/* @__PURE__ */ React.createElement(App2, {
-                  context
+                  context: context
                 }));
               }
             })
@@ -476,8 +476,8 @@ export var bootstrap = function() {
             return [
               2,
               runner.server({
-                App,
-                context
+                App: App,
+                context: context
               })
             ];
           }
@@ -497,7 +497,7 @@ export var useRuntimeContext = function() {
   var context = useContext(RuntimeReactContext);
   var memoizedContext = useMemo(function() {
     return context.runner.pickContext({
-      context,
+      context: context,
       pickedContext: {}
     }, {
       onLast: function(param) {

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

@@ -285,7 +285,7 @@ var createLoader = function(id) {
     return {
       loading: !hasLoaded && status === LoaderStatus.loading,
       reloading: hasLoaded && status === LoaderStatus.loading,
-      data,
+      data: data,
       error: _instanceof(error, Error) ? "".concat(error.message) : error,
       // redundant fields for ssr log
       _error: error
@@ -309,8 +309,8 @@ var createLoader = function(id) {
     get promise() {
       return promise;
     },
-    onChange,
-    load
+    onChange: onChange,
+    load: load
   };
 };
 export var createLoaderManager = function(initialDataMap) {
@@ -425,9 +425,9 @@ export var createLoaderManager = function(initialDataMap) {
     };
   }();
   return {
-    hasPendingLoaders,
-    awaitPendingLoaders,
-    add,
-    get
+    hasPendingLoaders: hasPendingLoaders,
+    awaitPendingLoaders: awaitPendingLoaders,
+    add: add,
+    get: get
   };
 };

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

@@ -12,7 +12,7 @@ function _array_with_holes(arr) {
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -148,7 +148,7 @@ var useLoader = function(loaderFn) {
         return Promise.reject(e);
       }
     }, _object_spread_props(_object_spread({}, options), {
-      params
+      params: params
     }));
     loaderRef.current = loaderManager.get(id);
     (_unlistenLoaderChangeRef_current = unlistenLoaderChangeRef.current) === null || _unlistenLoaderChangeRef_current === void 0 ? void 0 : _unlistenLoaderChangeRef_current.call(unlistenLoaderChangeRef);

package/dist/esm/core/plugin.js

@@ -138,12 +138,12 @@ var server = createAsyncPipeline();
 var init = createAsyncPipeline();
 var pickContext = createPipeline();
 var runtimeHooks = {
-  hoc,
-  provide,
-  client,
-  server,
-  init,
-  pickContext
+  hoc: hoc,
+  provide: provide,
+  client: client,
+  server: server,
+  init: init,
+  pickContext: pickContext
 };
 export var createRuntime = function() {
   return createManager(runtimeHooks);

package/dist/esm/document/Html.js

@@ -81,11 +81,11 @@ export function Html(props) {
   return /* @__PURE__ */ _jsx("html", {
     children: /* @__PURE__ */ _jsxs(DocumentStructureContext.Provider, {
       value: {
-        hasSetHead,
-        hasSetScripts,
-        hasSetLinks,
-        hasSetRoot,
-        hasSetBody,
+        hasSetHead: hasSetHead,
+        hasSetScripts: hasSetScripts,
+        hasSetLinks: hasSetLinks,
+        hasSetRoot: hasSetRoot,
+        hasSetBody: hasSetBody,
         docChild: children
       },
       children: [

package/dist/esm/document/cli/index.js

@@ -41,7 +41,7 @@ function _async_to_generator(fn) {
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -233,7 +233,7 @@ export default function() {
             config: {
               output: config.output
             },
-            entryName,
+            entryName: entryName,
             templateParams: templateParameters
           };
         }
@@ -253,8 +253,8 @@ export default function() {
                       htmlWebpackPlugin = param.htmlWebpackPlugin;
                       documentParams = getDocParams({
                         config: api.useResolvedConfigContext(),
-                        entryName,
-                        templateParameters
+                        entryName: entryName,
+                        templateParameters: templateParameters
                       });
                       tempTsConfigFile = path.join(internalDirectory, "./document/_tempTsconfig.json");
                       userTsConfigFilePath = path.join(appDirectory, "tsconfig.json");
@@ -322,7 +322,7 @@ export default function() {
                                   }
                                   return {
                                     path: args.path,
-                                    external
+                                    external: external
                                   };
                                 });
                               }
@@ -398,7 +398,7 @@ export default function() {
                         hackParameters
                       );
                       var documentHtmlOptions = templateContent ? {
-                        templateContent,
+                        templateContent: templateContent,
                         inject: false
                       } : {};
                       return _object_spread({}, options, documentHtmlOptions);

package/dist/esm/document/constants.js

@@ -1,7 +1,7 @@
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true

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

@@ -1,7 +1,7 @@
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -107,8 +107,8 @@ export default function() {
             throw new Error("should enable runtime.router for entry ".concat(entryName));
           }
           return {
-            entrypoint,
-            imports
+            entrypoint: entrypoint,
+            imports: imports
           };
         },
         modifyEntryRuntimePlugins: function modifyEntryRuntimePlugins(param) {
@@ -128,15 +128,15 @@ export default function() {
             plugins.push({
               name: PLUGIN_IDENTIFIER,
               options: JSON.stringify(_object_spread_props(_object_spread({
-                serverBase
+                serverBase: serverBase
               }, runtimeConfig.router), {
                 routesConfig: fileSystemRoutes ? "{ ".concat(ROUTES_IDENTIFIER, ", globalApp: App }") : void 0
               })).replace(/"routesConfig"\s*:\s*"((\S|\s)+)"/g, '"routesConfig": $1,')
             });
           }
           return {
-            entrypoint,
-            plugins
+            entrypoint: entrypoint,
+            plugins: plugins
           };
         },
         addRuntimeExports: function addRuntimeExports() {

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

@@ -97,7 +97,7 @@ var DeferredDataScripts = function() {
           deferredDataScripts.push(/* @__PURE__ */ _jsx(DeferredDataScript, {
             data: deferredData.data[key],
             dataKey: key,
-            routeId
+            routeId: routeId
           }, "".concat(routeId, " | ").concat(key)));
           return "".concat(JSON.stringify(key), ": _ROUTER_DATA.s(").concat(JSON.stringify(routeId), ",").concat(JSON.stringify(key), ") ");
         } else {
@@ -146,8 +146,8 @@ var DeferredDataScript = function(param) {
     children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ _jsx(Await, {
       resolve: data,
       errorElement: /* @__PURE__ */ _jsx(ErrorDeferredDataScript, {
-        routeId,
-        dataKey
+        routeId: routeId,
+        dataKey: dataKey
       }),
       children: function(data2) {
         return /* @__PURE__ */ _jsx("script", {

package/dist/esm/router/runtime/PrefetchLink.js

@@ -41,7 +41,7 @@ function _async_to_generator(fn) {
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -380,7 +380,7 @@ var createDataHref = function(href) {
   return /* @__PURE__ */ _jsx("link", {
     rel: "prefetch",
     as: "fetch",
-    href
+    href: href
   }, href);
 };
 var getDataHref = function(route, pathname, basename) {
@@ -404,9 +404,9 @@ var PrefetchPageLinks = function(param) {
     return null;
   }
   return /* @__PURE__ */ _jsx(PrefetchDataLinks, {
-    matches,
-    pathname,
-    routeManifest
+    matches: matches,
+    pathname: pathname,
+    routeManifest: routeManifest
   });
 };
 var PrefetchDataLinks = function(param) {
@@ -455,10 +455,10 @@ var createPrefetchLink = function(Link2) {
       children: [
         /* @__PURE__ */ _jsx(Link2, _object_spread({
           ref: forwardedRef,
-          to
+          to: to
         }, props, prefetchHandlers)),
         shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /* @__PURE__ */ _jsx(PrefetchPageLinks, {
-          pathname
+          pathname: pathname
         }) : null
       ]
     });

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

@@ -1,7 +1,7 @@
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -89,8 +89,8 @@ export var routerPlugin = function(param) {
         init: function init(param2, next) {
           var context = param2.context;
           context.router = {
-            useMatches,
-            useLocation
+            useMatches: useMatches,
+            useLocation: useLocation
           };
           Object.defineProperty(context, "routes", {
             get: function get() {
@@ -98,14 +98,14 @@ export var routerPlugin = function(param) {
             }
           });
           return next({
-            context
+            context: context
           });
         },
         hoc: function(param2, next) {
           var App = param2.App;
           if (!finalRouteConfig && !createRoutes) {
             return next({
-              App
+              App: App
             });
           }
           var getRouteApp = function() {
@@ -114,7 +114,7 @@ export var routerPlugin = function(param) {
               beforeCreateRouter = false;
               routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
                 routesConfig: finalRouteConfig,
-                props
+                props: props
               }));
               var runner = api.useHookRunners();
               routes = runner.modifyRoutes(routes);
@@ -128,14 +128,14 @@ export var routerPlugin = function(param) {
               }
               var router = supportHtml5History ? createBrowserRouter(routes, {
                 basename: _basename,
-                hydrationData
+                hydrationData: hydrationData
               }) : createHashRouter(routes, {
                 basename: _basename,
-                hydrationData
+                hydrationData: hydrationData
               });
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(RouterProvider, {
-                  router
+                  router: router
                 })
               }));
             };

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

@@ -41,7 +41,7 @@ function _async_to_generator(fn) {
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
-      value,
+      value: value,
       enumerable: true,
       configurable: true,
       writable: true
@@ -337,7 +337,7 @@ export var routerPlugin = function(param) {
                     return [
                       2,
                       next({
-                        context
+                        context: context
                       })
                     ];
                   }
@@ -345,8 +345,8 @@ export var routerPlugin = function(param) {
                   baseUrl = request.baseUrl;
                   _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
                   routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                    routesConfig,
-                    ssrMode
+                    routesConfig: routesConfig,
+                    ssrMode: ssrMode
                   }));
                   query = createStaticHandler(routes, {
                     basename: _basename
@@ -374,7 +374,7 @@ export var routerPlugin = function(param) {
                   return [
                     2,
                     next({
-                      context
+                      context: context
                     })
                   ];
               }
@@ -385,7 +385,7 @@ export var routerPlugin = function(param) {
           var App = param2.App;
           if (!routesConfig) {
             return next({
-              App
+              App: App
             });
           }
           var getRouteApp = function() {
@@ -393,7 +393,7 @@ export var routerPlugin = function(param) {
               var _useContext = useContext(RuntimeReactContext), router = _useContext.router, routerContext = _useContext.routerContext;
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router,
+                  router: router,
                   context: routerContext,
                   hydrate: false
                 })