@modern-js/runtime 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/js/node/router/runtime/server.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _server = require("react-router-dom/server");
+Object.keys(_server).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _server[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _server[key];
+    }
+  });
+});

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

@@ -61,12 +61,10 @@ const renderNestedRoute = (nestedRoute, parent) => {
       });
     }
   }
-  if (!parent) {
+  if (!parent && element) {
     element = /*#__PURE__*/(0, _jsxRuntime.jsx)(_root.RootLayout, {
       routes: [nestedRoute],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
-        children: element
-      })
+      children: element
     });
   }
   routeProps.element = element;

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

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@modern-js/utils");
+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; }
 const PLUGIN_IDENTIFIER = 'ssr';
 const hasStringSSREntry = userConfig => {
   const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
@@ -42,6 +45,7 @@ var _default = () => ({
           tools: {
             webpackChain: (chain, {
               name,
+              isServer,
               CHAIN_ID
             }) => {
               const userConfig = api.useResolvedConfigContext();
@@ -52,6 +56,16 @@ var _default = () => ({
                   filename: _utils.LOADABLE_STATS_FILE
                 }]);
               }
+
+              // add environment variables to determine the node/browser
+              const prefix = `${appContext.metaName.split(/[-_]/)[0]}_`.toUpperCase();
+              const modernVars = {
+                [`process.env.${prefix}TARGET`]: JSON.stringify(isServer ? 'node' : 'browser')
+              };
+              chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(args => {
+                const [vars, ...rest] = args;
+                return [_objectSpread(_objectSpread({}, vars), modernVars), ...rest];
+              });
             },
             babel: config => {
               const userConfig = api.useResolvedConfigContext();

package/dist/js/node/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -40,7 +40,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       } = routeManifest;
       const cssChunks = [];
       const matches = (0, _reactRouterDom.matchRoutes)(routes, routerContext.location);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(match => {
+      matches === null || matches === void 0 ? void 0 : matches.forEach((match, index) => {
+        // root layout css chunks should't be loaded
+        if (!index) {
+          return;
+        }
         const routeId = match.route.id;
         if (routeId) {
           const {

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _utils = require("@modern-js/utils");
-require("../types");
 const PLUGIN_IDENTIFIER = 'state';
 var _default = () => ({
   name: '@modern-js/plugin-state',

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

@@ -38,9 +38,16 @@ const getStoreConfig = config => {
   const internalPlugins = ['immer', 'effects', 'autoActions', 'devtools'];
   const plugins = [];
   internalPlugins.filter(plugin => config[plugin] !== false).forEach(plugin => plugins.push(StatePluginHandleMap[plugin](config[plugin])));
-  return {
-    plugins
-  };
+  const storeConfig = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (internalPlugins.includes(key)) {
+      plugins.push(StatePluginHandleMap[key](value));
+    } else {
+      storeConfig[key] = value;
+    }
+  }
+  storeConfig.plugins = plugins;
+  return storeConfig;
 };
 const state = config => ({
   name: '@modern-js/plugin-state',

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

@@ -28,7 +28,9 @@ export default (function () {
                  */
                 'styled-components': require.resolve('styled-components')
               },
-              envVars: ['IS_REACT18']
+              globalVars: {
+                'process.env.IS_REACT18': process.env.IS_REACT18
+              }
             }
           };
         },

package/dist/js/treeshaking/core/compatible.js

@@ -5,7 +5,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["context"];
 import React, { useContext, useMemo } from 'react';
-import defaultReactDOM from 'react-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { RuntimeReactContext } from "../runtime-context";
 import { runtime } from "./plugin";
@@ -94,30 +93,14 @@ export var bootstrap = /*#__PURE__*/function () {
   /**
    * root.render need use root to run function
    */
-  root) {
-    var ReactDOM,
-      App,
-      runner,
-      context,
-      runInit,
-      isBrowser,
-      _ssrData$data,
-      _ssrData$data2,
-      ssrData,
-      loadersData,
-      initialLoadersState,
-      initialData,
-      _rootElement,
-      ModernRender,
-      ModernHydrate,
-      isRedirectResponse,
-      _initialData,
-      _args = arguments;
+  root, ReactDOM
+  // eslint-disable-next-line consistent-return
+  ) {
+    var App, runner, context, runInit, isBrowser, _ssrData$data, _ssrData$data2, ssrData, loadersData, initialLoadersState, initialData, rootElement, ModernRender, ModernHydrate, isRedirectResponse, _initialData;
     return _regeneratorRuntime().wrap(function _callee$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            ReactDOM = _args.length > 3 && _args[3] !== undefined ? _args[3] : defaultReactDOM;
             App = BootApp;
             runner = runnerMap.get(App); // ensure Component used is created by `createApp`
             if (!runner) {
@@ -139,20 +122,20 @@ export var bootstrap = /*#__PURE__*/function () {
               });
             }; // don't mount the App, let user in charge of it.
             if (id) {
-              _context2.next = 8;
+              _context2.next = 7;
               break;
             }
             return _context2.abrupt("return", /*#__PURE__*/React.createElement(App, {
               context: context
             }));
-          case 8:
+          case 7:
             isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
             if (!isBrowser) {
-              _context2.next = 29;
+              _context2.next = 30;
               break;
             }
             if (!isClientArgs(id)) {
-              _context2.next = 26;
+              _context2.next = 27;
               break;
             }
             ssrData = window._SSR_DATA;
@@ -173,20 +156,27 @@ export var bootstrap = /*#__PURE__*/function () {
               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;
-            _context2.next = 18;
+            _context2.next = 17;
             return runInit(context);
-          case 18:
+          case 17:
             initialData = _context2.sent;
             if (initialData) {
               context.initialData = initialData;
             }
-            _rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root'); // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+            rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root');
+            if (ReactDOM) {
+              _context2.next = 22;
+              break;
+            }
+            throw Error('The `bootstrap` need provide `ReactDOM` parameter');
+          case 22:
+            // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
             ModernRender = function ModernRender(App) {
               if (IS_REACT18) {
                 if (root) {
                   root.render(App);
                 } else if (ReactDOM.createRoot) {
-                  ReactDOM.createRoot(_rootElement).render(App);
+                  ReactDOM.createRoot(rootElement).render(App);
                 } else {
                   throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `createRoot` method');
                 }
@@ -194,7 +184,7 @@ export var bootstrap = /*#__PURE__*/function () {
                 if (!ReactDOM.render) {
                   throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `render` method');
                 }
-                ReactDOM.render(App, _rootElement);
+                ReactDOM.render(App, rootElement);
               }
             };
             ModernHydrate = function ModernHydrate(App, callback) {
@@ -202,12 +192,12 @@ export var bootstrap = /*#__PURE__*/function () {
                 if (!ReactDOM.hydrateRoot) {
                   throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `hydrateRoot` method');
                 }
-                ReactDOM.hydrateRoot(_rootElement, App);
+                ReactDOM.hydrateRoot(rootElement, App);
               } else {
                 if (!ReactDOM.hydrate) {
                   throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `hydrate` method');
                 }
-                ReactDOM.hydrate(App, _rootElement, callback);
+                ReactDOM.hydrate(App, rootElement, callback);
               }
             };
             return _context2.abrupt("return", runner.client({
@@ -223,12 +213,12 @@ export var bootstrap = /*#__PURE__*/function () {
                 }));
               }
             }));
-          case 26:
-            throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
           case 27:
-            _context2.next = 37;
+            throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
+          case 28:
+            _context2.next = 38;
             break;
-          case 29:
+          case 30:
             Object.assign(context, {
               ssrContext: id,
               isBrowser: false,
@@ -257,12 +247,12 @@ export var bootstrap = /*#__PURE__*/function () {
               }
               return false;
             };
-            _context2.next = 33;
+            _context2.next = 34;
             return runInit(context);
-          case 33:
+          case 34:
             _initialData = _context2.sent;
             if (isRedirectResponse(_initialData)) {
-              _context2.next = 37;
+              _context2.next = 38;
               break;
             }
             context.initialData = _initialData;
@@ -270,14 +260,14 @@ export var bootstrap = /*#__PURE__*/function () {
               App: App,
               context: context
             }));
-          case 37:
+          case 38:
           case "end":
             return _context2.stop();
         }
       }
     }, _callee);
   }));
-  return function bootstrap(_x, _x2, _x3) {
+  return function bootstrap(_x, _x2, _x3, _x4) {
     return _ref6.apply(this, arguments);
   };
 }();

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

@@ -1,6 +1,7 @@
 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 _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import path from 'path';
 import React from 'react';
 import ReactDomServer from 'react-dom/server';
@@ -9,14 +10,21 @@ import { createDebugger, findExists } from '@modern-js/utils';
 import { DocumentContext } from "../DocumentContext";
 import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SEPARATOR } from "../constants";
 var debug = createDebugger('html_genarate');
-var getDocumenByEntryName = function getDocumenByEntryName(entrypoints, entryName) {
+
+// get the entry document file,
+// if not exist, fallback to src/
+var getDocumenByEntryName = function getDocumenByEntryName(entrypoints, entryName, fallbackDir) {
   var _entrypoints$find;
   var entryDir = (_entrypoints$find = entrypoints.find(function (item) {
     return item.entryName === entryName;
   })) === null || _entrypoints$find === void 0 ? void 0 : _entrypoints$find.absoluteEntryDir;
-  var docFile = findExists(DOC_EXT.map(function (item) {
+  var entryDirs = DOC_EXT.map(function (item) {
     return "".concat(entryDir).concat(path.sep).concat(DOCUMENT_FILE_NAME, ".").concat(item);
-  }));
+  });
+  var fallbackDirs = fallbackDir ? DOC_EXT.map(function (item) {
+    return [fallbackDir, 'src', "".concat(DOCUMENT_FILE_NAME, ".").concat(item)].join(path.sep);
+  }) : [];
+  var docFile = findExists([].concat(_toConsumableArray(entryDirs), _toConsumableArray(fallbackDirs)));
   return docFile || undefined;
 };
 export default (function () {
@@ -47,13 +55,10 @@ export default (function () {
                 documentEntry = function documentEntry(entryName, templateParameters) {
                   var _api$useAppContext = api.useAppContext(),
                     entrypoints = _api$useAppContext.entrypoints,
-                    internalDirectory = _api$useAppContext.internalDirectory;
+                    internalDirectory = _api$useAppContext.internalDirectory,
+                    appDirectory = _api$useAppContext.appDirectory;
                   // search the document.[tsx|jsx|js|ts] under entry
-                  // if not, use main as default
-                  var documentFilePath = getDocumenByEntryName(entrypoints, entryName);
-                  if (!documentFilePath) {
-                    documentFilePath = getDocumenByEntryName(entrypoints, 'main');
-                  }
+                  var documentFilePath = getDocumenByEntryName(entrypoints, entryName, appDirectory);
                   // if no document file, do nothing as default
                   if (!documentFilePath) {
                     return null;

package/dist/js/treeshaking/document/constants.js

@@ -10,7 +10,7 @@ export var HTML_SSRDATASCRIPT_SEPARATOR = '<!--<?- SSRDataScript ?>-->';
 export var DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
 export var DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
 export var DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATASCRIPT_SEPARATOR);
-export var DOCUMENT_FILE_NAME = 'document';
+export var DOCUMENT_FILE_NAME = 'Document';
 export var DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent('<!-- chunk scripts placeholder -->');
 export var DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent('<!-- no-script -->');
 export var PLACEHOLDER_REPLACER_MAP = (_PLACEHOLDER_REPLACER = {}, _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_NO_SCRIPTE_PLACEHOLDER, "We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue."), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, HTML_CHUNKSMAP_SEPARATOR), _defineProperty(_PLACEHOLDER_REPLACER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, HTML_SSRDATASCRIPT_SEPARATOR), _PLACEHOLDER_REPLACER);

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

@@ -2,13 +2,15 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { renderRoutes } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var routerPlugin = function routerPlugin(_ref) {
   var _ref$serverBase = _ref.serverBase,
     serverBase = _ref$serverBase === void 0 ? [] : _ref$serverBase,
     _ref$supportHtml5Hist = _ref.supportHtml5History,
     supportHtml5History = _ref$supportHtml5Hist === void 0 ? true : _ref$supportHtml5Hist,
+    _ref$basename = _ref.basename,
+    basename = _ref$basename === void 0 ? '' : _ref$basename,
     routesConfig = _ref.routesConfig,
     createRoutes = _ref.createRoutes;
   var select = function select(pathname) {
@@ -24,7 +26,7 @@ export var routerPlugin = function routerPlugin(_ref) {
           var App = _ref2.App;
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig) {
+          if (!routesConfig && !createRoutes) {
             return next({
               App: App
             });
@@ -32,13 +34,13 @@ export var routerPlugin = function routerPlugin(_ref) {
           var getRouteApp = function getRouteApp() {
             return function (props) {
               var _window$_SERVER_DATA;
-              var routeElements = renderRoutes(routesConfig);
-              var routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+              var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
               var baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
+              var _basename = baseUrl === '/' ? urlJoin(baseUrl, basename) : baseUrl;
               var router = supportHtml5History ? createBrowserRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               }) : createHashRouter(routes, {
-                basename: baseUrl
+                basename: _basename
               });
               return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
                 children: /*#__PURE__*/_jsx(RouterProvider, {
@@ -48,7 +50,7 @@ export var routerPlugin = function routerPlugin(_ref) {
             };
           };
           var RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

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

@@ -10,7 +10,7 @@ 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 } from "./utils";
+import { renderRoutes, urlJoin } from "./utils";
 
 // Polyfill Web Fetch API
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,7 +68,9 @@ export function createFetchHeaders(requestHeaders) {
   return headers;
 }
 export var routerPlugin = function routerPlugin(_ref) {
-  var routesConfig = _ref.routesConfig,
+  var _ref$basename = _ref.basename,
+    basename = _ref$basename === void 0 ? '' : _ref$basename,
+    routesConfig = _ref.routesConfig,
     createRoutes = _ref.createRoutes;
   return {
     name: '@modern-js/plugin-router',
@@ -76,13 +78,13 @@ export var routerPlugin = function routerPlugin(_ref) {
       return {
         init: function init(_ref2, next) {
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var context, _ref3, request, routeElements, routes, _createStaticHandler, query, remixRequest, routerContext, router;
+            var context, _ref3, request, baseUrl, _basename, routes, _createStaticHandler, query, remixRequest, routerContext, router;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
                     context = _ref2.context;
-                    if (routesConfig) {
+                    if (!(!routesConfig && !createRoutes)) {
                       _context.next = 3;
                       break;
                     }
@@ -91,20 +93,23 @@ export var routerPlugin = function routerPlugin(_ref) {
                     }));
                   case 3:
                     _ref3 = context.ssrContext, request = _ref3.request;
-                    routeElements = renderRoutes(routesConfig);
-                    routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
-                    _createStaticHandler = createStaticHandler(routes), query = _createStaticHandler.query;
+                    baseUrl = request.baseUrl;
+                    _basename = baseUrl === '/' ? urlJoin(baseUrl, basename) : baseUrl;
+                    routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+                    _createStaticHandler = createStaticHandler(routes, {
+                      basename: _basename
+                    }), query = _createStaticHandler.query;
                     remixRequest = createFetchRequest(request);
-                    _context.next = 10;
+                    _context.next = 11;
                     return query(remixRequest);
-                  case 10:
+                  case 11:
                     routerContext = _context.sent;
                     if (!(routerContext instanceof Response)) {
-                      _context.next = 13;
+                      _context.next = 14;
                       break;
                     }
                     return _context.abrupt("return", routerContext);
-                  case 13:
+                  case 14:
                     router = createStaticRouter(routes, routerContext);
                     context.router = router;
                     context.routerContext = routerContext;
@@ -114,7 +119,7 @@ export var routerPlugin = function routerPlugin(_ref) {
                     return _context.abrupt("return", next({
                       context: context
                     }));
-                  case 19:
+                  case 20:
                   case "end":
                     return _context.stop();
                 }
@@ -146,7 +151,7 @@ export var routerPlugin = function routerPlugin(_ref) {
             };
           };
           var RouteApp = getRouteApp();
-          if (routesConfig.globalApp) {
+          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });

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

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

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

@@ -45,12 +45,10 @@ var renderNestedRoute = function renderNestedRoute(nestedRoute, parent) {
       });
     }
   }
-  if (!parent) {
+  if (!parent && element) {
     element = /*#__PURE__*/_jsx(RootLayout, {
       routes: [nestedRoute],
-      children: /*#__PURE__*/_jsx(Suspense, {
-        children: element
-      })
+      children: element
     });
   }
   routeProps.element = element;

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

@@ -1,3 +1,7 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 var PLUGIN_IDENTIFIER = 'ssr';
@@ -39,6 +43,7 @@ export default (function () {
             tools: {
               webpackChain: function webpackChain(chain, _ref) {
                 var name = _ref.name,
+                  isServer = _ref.isServer,
                   CHAIN_ID = _ref.CHAIN_ID;
                 var userConfig = api.useResolvedConfigContext();
                 if (isUseSSRBundle(userConfig) && name !== 'server' && hasStringSSREntry(userConfig)) {
@@ -48,6 +53,16 @@ export default (function () {
                     filename: LOADABLE_STATS_FILE
                   }]);
                 }
+
+                // add environment variables to determine the node/browser
+                var prefix = "".concat(appContext.metaName.split(/[-_]/)[0], "_").toUpperCase();
+                var modernVars = _defineProperty({}, "process.env.".concat(prefix, "TARGET"), JSON.stringify(isServer ? 'node' : 'browser'));
+                chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap(function (args) {
+                  var _args = _toArray(args),
+                    vars = _args[0],
+                    rest = _args.slice(1);
+                  return [_objectSpread(_objectSpread({}, vars), modernVars)].concat(_toConsumableArray(rest));
+                });
               },
               babel: function babel(config) {
                 var userConfig = api.useResolvedConfigContext();

package/dist/js/treeshaking/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -34,7 +34,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       var routeAssets = routeManifest.routeAssets;
       var cssChunks = [];
       var matches = matchRoutes(routes, routerContext.location);
-      matches === null || matches === void 0 ? void 0 : matches.forEach(function (match) {
+      matches === null || matches === void 0 ? void 0 : matches.forEach(function (match, index) {
+        // root layout css chunks should't be loaded
+        if (!index) {
+          return;
+        }
         var routeId = match.route.id;
         if (routeId) {
           var _routeAssets$routeId$ = routeAssets[routeId].assets,

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

@@ -1,5 +1,4 @@
 import { getEntryOptions, createRuntimeExportsUtils, PLUGIN_SCHEMAS } from '@modern-js/utils';
-import "../types";
 var PLUGIN_IDENTIFIER = 'state';
 export default (function () {
   return {

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

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useContext } from 'react';
 import { createStore } from '@modern-js-reduck/store';
 import { Provider } from '@modern-js-reduck/react';
@@ -21,9 +22,19 @@ var getStoreConfig = function getStoreConfig(config) {
   }).forEach(function (plugin) {
     return plugins.push(StatePluginHandleMap[plugin](config[plugin]));
   });
-  return {
-    plugins: plugins
-  };
+  var storeConfig = {};
+  for (var _i = 0, _Object$entries = Object.entries(config); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (internalPlugins.includes(key)) {
+      plugins.push(StatePluginHandleMap[key](value));
+    } else {
+      storeConfig[key] = value;
+    }
+  }
+  storeConfig.plugins = plugins;
+  return storeConfig;
 };
 var state = function state(config) {
   return {

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

@@ -1,3 +1,3 @@
-import type { CliPlugin } from '@modern-js/core';
-declare const _default: () => CliPlugin;
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+declare const _default: () => CliPlugin<AppTools>;
 export default _default;

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { Renderer } from 'react-dom';
+import type { hydrateRoot, createRoot } from 'react-dom/client';
 import { RuntimeContext, TRuntimeContext } from '../runtime-context';
 import { Plugin } from './plugin';
 export declare type CreateAppOptions = {
@@ -7,15 +9,11 @@ export declare type CreateAppOptions = {
 export declare const createApp: ({
   plugins
 }: CreateAppOptions) => (App?: React.ComponentType<any>) => React.ComponentType<any>;
-interface HydrateFunc {
-  (container: Element | Document, initialChildren: React.ReactNode): void;
-  (initialChildren: React.ReactNode, container: Element | Document, callback?: () => void): void;
-}
 declare type BootStrap<T = unknown> = (App: React.ComponentType, id: string | HTMLElement | RuntimeContext, root?: any, ReactDOM?: {
-  render?: (children: React.ReactNode, rootElement?: HTMLElement) => void;
-  hydrate?: HydrateFunc;
-  createRoot?: (rootElement: HTMLElement) => any;
-  hydrateRoot?: HydrateFunc;
+  render?: Renderer;
+  hydrate?: Renderer;
+  createRoot?: typeof createRoot;
+  hydrateRoot?: typeof hydrateRoot;
 }) => Promise<T>;
 export declare const bootstrap: BootStrap;
 export declare const useRuntimeContext: () => TRuntimeContext;