@modern-js/app-tools 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/js/treeshaking/analyze/nestedRoutes.js

@@ -12,59 +12,47 @@ var LOADING_FILE = 'loading';
 var ERROR_FILE = 'error';
 var LOADER_FILE = 'loader';
 var conventionNames = [LAYOUT_FILE, PAGE_FILE, LOADING_FILE, ERROR_FILE, LOADER_FILE];
-
 var replaceDynamicPath = function replaceDynamicPath(routePath) {
   return routePath.replace(/\[(.*?)\]/g, ':$1');
 };
-
-var createIndexRoute = function createIndexRoute(routeInfo, rootDir, filename) {
+var createIndexRoute = function createIndexRoute(routeInfo, rootDir, filename, entryName) {
   return createRoute(_objectSpread(_objectSpread({}, routeInfo), {}, {
     index: true,
     children: undefined
-  }), rootDir, filename);
+  }), rootDir, filename, entryName);
 };
-
-var createRoute = function createRoute(routeInfo, rootDir, filename) {
-  var id = getRouteId(filename, rootDir);
+var createRoute = function createRoute(routeInfo, rootDir, filename, entryName) {
+  var id = getRouteId(filename, rootDir, entryName);
   return _objectSpread(_objectSpread({}, routeInfo), {}, {
     id: id,
     type: 'nested'
   });
 };
-
 export var walk = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dirname, rootDir, alias) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dirname, rootDir, alias, entryName) {
     var isDirectory, relativeDir, pathSegments, lastSegment, isRoot, isPathlessLayout, isWithoutLayoutPath, routePath, route, items, _iterator, _step, item, itemPath, extname, itemWithoutExt, _isDirectory, childRoute, _route$children, _route$children2, _childRoute, finalRoute;
-
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
             return fs.pathExists(dirname);
-
           case 2:
             if (_context.sent) {
               _context.next = 4;
               break;
             }
-
             return _context.abrupt("return", null);
-
           case 4:
             _context.next = 6;
             return fs.stat(dirname);
-
           case 6:
             isDirectory = _context.sent.isDirectory();
-
             if (isDirectory) {
               _context.next = 9;
               break;
             }
-
             return _context.abrupt("return", null);
-
           case 9:
             relativeDir = path.relative(rootDir, dirname);
             pathSegments = relativeDir.split(path.sep);
@@ -73,11 +61,9 @@ export var walk = /*#__PURE__*/function () {
             isPathlessLayout = lastSegment.startsWith('__');
             isWithoutLayoutPath = lastSegment.includes('.');
             routePath = isRoot || isPathlessLayout ? '/' : "".concat(lastSegment);
-
             if (isWithoutLayoutPath) {
               routePath = lastSegment.split('.').join('/');
             }
-
             routePath = replaceDynamicPath(routePath);
             route = {
               path: routePath,
@@ -85,100 +71,76 @@ export var walk = /*#__PURE__*/function () {
             };
             _context.next = 21;
             return fs.readdir(dirname);
-
           case 21:
             items = _context.sent;
             _iterator = _createForOfIteratorHelper(items);
             _context.prev = 23;
-
             _iterator.s();
-
           case 25:
             if ((_step = _iterator.n()).done) {
               _context.next = 47;
               break;
             }
-
             item = _step.value;
             itemPath = path.join(dirname, item);
             extname = path.extname(item);
             itemWithoutExt = item.slice(0, -extname.length);
             _context.next = 32;
             return fs.stat(itemPath);
-
           case 32:
             _isDirectory = _context.sent.isDirectory();
-
             if (!_isDirectory) {
               _context.next = 38;
               break;
             }
-
             _context.next = 36;
-            return walk(itemPath, rootDir, alias);
-
+            return walk(itemPath, rootDir, alias, entryName);
           case 36:
             childRoute = _context.sent;
-
             if (childRoute) {
               (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.push(childRoute);
             }
-
           case 38:
             if (!(extname && (!JS_EXTENSIONS.includes(extname) || !conventionNames.includes(itemWithoutExt)))) {
               _context.next = 40;
               break;
             }
-
             return _context.abrupt("continue", 45);
-
           case 40:
             if (itemWithoutExt === LAYOUT_FILE) {
               route._component = replaceWithAlias(alias.basename, itemPath, alias.name);
             }
-
             if (itemWithoutExt === PAGE_FILE) {
               _childRoute = createIndexRoute({
                 _component: replaceWithAlias(alias.basename, itemPath, alias.name)
-              }, rootDir, itemPath);
+              }, rootDir, itemPath, entryName);
               (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.push(_childRoute);
             }
-
             if (itemWithoutExt === LOADER_FILE) {
               route.loader = replaceWithAlias(alias.basename, itemPath, alias.name);
             }
-
             if (itemWithoutExt === LOADING_FILE) {
               route.loading = replaceWithAlias(alias.basename, itemPath, alias.name);
             }
-
             if (itemWithoutExt === ERROR_FILE) {
               route.error = replaceWithAlias(alias.basename, itemPath, alias.name);
             }
-
           case 45:
             _context.next = 25;
             break;
-
           case 47:
             _context.next = 52;
             break;
-
           case 49:
             _context.prev = 49;
             _context.t0 = _context["catch"](23);
-
             _iterator.e(_context.t0);
-
           case 52:
             _context.prev = 52;
-
             _iterator.f();
-
             return _context.finish(52);
-
           case 55:
-            finalRoute = createRoute(route, rootDir, path.join(dirname, "".concat(LAYOUT_FILE, ".ts")));
+            finalRoute = createRoute(route, rootDir, path.join(dirname, "".concat(LAYOUT_FILE, ".ts")), entryName);
             /**
              * when the url is /, the __auth/layout.tsx component should not be rendered
              * - routes
@@ -186,13 +148,10 @@ export var walk = /*#__PURE__*/function () {
              *    - layout.tsx
              *  - layout.tsx
              */
-
             if (isPathlessLayout) {
               delete finalRoute.path;
             }
-
             return _context.abrupt("return", finalRoute);
-
           case 58:
           case "end":
             return _context.stop();
@@ -200,8 +159,7 @@ export var walk = /*#__PURE__*/function () {
       }
     }, _callee, null, [[23, 49, 52, 55]]);
   }));
-
-  return function walk(_x, _x2, _x3) {
+  return function walk(_x, _x2, _x3, _x4) {
     return _ref.apply(this, arguments);
   };
 }();

package/dist/js/treeshaking/analyze/templates.js

@@ -2,19 +2,19 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 export var index = function index(_ref) {
   var mountId = _ref.mountId,
-      imports = _ref.imports,
-      renderFunction = _ref.renderFunction,
-      exportStatement = _ref.exportStatement;
+    imports = _ref.imports,
+    renderFunction = _ref.renderFunction,
+    exportStatement = _ref.exportStatement;
   return "\nconst IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';\nconst IS_REACT18 = process.env.IS_REACT18 === 'true';\nconst MOUNT_ID = '".concat(mountId, "';\n\n").concat(imports, "\n\nlet AppWrapper = null;\n\nlet root = null;\n\nfunction render() {\n  ").concat(renderFunction, "\n}\n\nAppWrapper = render();\n\n").concat(exportStatement, ";\n");
 };
 export var renderFunction = function renderFunction(_ref2) {
   var plugins = _ref2.plugins,
-      customBootstrap = _ref2.customBootstrap,
-      fileSystemRoutes = _ref2.fileSystemRoutes;
+    customBootstrap = _ref2.customBootstrap,
+    fileSystemRoutes = _ref2.fileSystemRoutes;
   return "\n  AppWrapper = createApp({\n    plugins: [\n     ".concat(plugins.map(function (_ref3) {
     var name = _ref3.name,
-        options = _ref3.options,
-        args = _ref3.args;
+      options = _ref3.options,
+      args = _ref3.args;
     return "".concat(name, "({...").concat(options, ", ...App?.config?.").concat(args || name, "}),");
   }).join('\n'), "\n    ]\n  })(").concat(fileSystemRoutes ? '' : "App", ")\n\n  if (IS_BROWSER) {\n    ").concat(customBootstrap ? "customBootstrap(AppWrapper);" : "bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM);", "\n  }\n\n  return AppWrapper\n");
 };
@@ -23,46 +23,35 @@ export var html = function html(partials) {
 };
 export var routesForServer = function routesForServer(_ref4) {
   var routes = _ref4.routes,
-      alias = _ref4.alias;
+    alias = _ref4.alias;
   var name = alias.name,
-      basename = alias.basename;
+    basename = alias.basename;
   var loaders = [];
-
   var traverseRouteTree = function traverseRouteTree(route) {
     var children;
-
     if ('children' in route && route.children) {
       var _route$children;
-
       children = route === null || route === void 0 ? void 0 : (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.map(traverseRouteTree);
     }
-
     var loader;
-
     if (route.type === 'nested') {
       if (route.loader) {
         loaders.push(route.loader);
         loader = "loader_".concat(loaders.length - 1);
       }
     }
-
     var finalRoute = _objectSpread(_objectSpread({}, route), {}, {
       loader: loader,
       children: children
     });
-
     return finalRoute;
   };
-
   var routesCode = "\n  export const routes = [\n  ";
-
   var _iterator = _createForOfIteratorHelper(routes),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var route = _step.value;
-
       if ('type' in route) {
         var newRoute = traverseRouteTree(route);
         routesCode += "".concat(JSON.stringify(newRoute, null, 2).replace(/"(loader_[^"])"/g, '$1'), ",");
@@ -75,7 +64,6 @@ export var routesForServer = function routesForServer(_ref4) {
   } finally {
     _iterator.f();
   }
-
   routesCode += "\n];";
   var importLoadersCode = loaders.map(function (loader, index) {
     var realLoaderPath = loader.replace(name, basename);
@@ -85,87 +73,81 @@ export var routesForServer = function routesForServer(_ref4) {
 };
 export var fileSystemRoutes = function fileSystemRoutes(_ref5) {
   var routes = _ref5.routes,
-      ssrMode = _ref5.ssrMode,
-      nestedRoutesEntry = _ref5.nestedRoutesEntry;
-  var importLazyCode = ssrMode === 'stream' ? 'import { lazy } from "react";' : "import loadable from '@modern-js/runtime/loadable'";
+    ssrMode = _ref5.ssrMode,
+    nestedRoutesEntry = _ref5.nestedRoutesEntry,
+    entryName = _ref5.entryName;
+  // The legacy mode and pages dir routes should use loadable
+  // nested routes + renderTostring should use loadable.lazy
+  // nested routes + renderToStream should use react.lazy
+  var importLazyCode = "\n    import { lazy } from \"react\";\n    import loadable, { lazy as loadableLazy } from \"@modern-js/runtime/loadable\"\n  ";
   var dataLoaderPath = '';
-
   if (ssrMode) {
     dataLoaderPath = require.resolve("@modern-js/plugin-data-loader/loader");
-
     if (nestedRoutesEntry) {
-      dataLoaderPath = "".concat(dataLoaderPath, "?routesDir=").concat(nestedRoutesEntry, "!");
+      dataLoaderPath = "".concat(dataLoaderPath, "?routesDir=").concat(nestedRoutesEntry, "&entryName=").concat(entryName, "!");
     }
   }
-
   var loadings = [];
   var errors = [];
   var loaders = [];
-
   var traverseRouteTree = function traverseRouteTree(route) {
     var children;
-
     if ('children' in route && route.children) {
       var _route$children2;
-
       children = route === null || route === void 0 ? void 0 : (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.map(traverseRouteTree);
     }
-
     var loading;
     var error;
     var loader;
-
+    var component = '';
     if (route.type === 'nested') {
       if (route.loading) {
         loadings.push(route.loading);
         loading = "loading_".concat(loadings.length - 1);
       }
-
       if (route.error) {
         errors.push(route.error);
         error = "error_".concat(errors.length - 1);
       }
-
       if (route.loader) {
         loaders.push(route.loader);
         loader = "loader_".concat(loaders.length - 1);
       }
+      if (route._component) {
+        if (ssrMode === 'stream') {
+          component = "lazy(() => import(/* webpackChunkName: \"".concat(route.id, "\" */  /* webpackMode: \"lazy-once\" */ '").concat(route._component, "'))");
+        } else {
+          component = "loadable(() => import(/* webpackChunkName: \"".concat(route.id, "\" */  /* webpackMode: \"lazy-once\" */ '").concat(route._component, "'))");
+        }
+      }
+    } else if (route._component) {
+      component = "loadable(() => import('".concat(route._component, "'))");
     }
-
     var finalRoute = _objectSpread(_objectSpread({}, route), {}, {
       loading: loading,
       loader: loader,
       error: error,
       children: children
     });
-
     if (route._component) {
-      var component = ssrMode === 'stream' ? "lazy(() => import('".concat(route._component, "'))") : "loadable(() => import('".concat(route._component, "'))");
       finalRoute.component = component;
     }
-
     return finalRoute;
   };
-
   var routeComponentsCode = "\n    export const routes = [\n  ";
-
   var _iterator2 = _createForOfIteratorHelper(routes),
-      _step2;
-
+    _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var route = _step2.value;
-
       if ('type' in route) {
         var newRoute = traverseRouteTree(route);
-        routeComponentsCode += "".concat(JSON.stringify(newRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(error_[^"])"/g, '$1'), ",");
+        routeComponentsCode += "".concat(JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, '$1').replace(/"(loadableLazy.*\))"/g, '$1').replace(/"(lazy.*\))"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(error_[^"])"/g, '$1').replace(/\\"/g, '"'), ",");
       } else {
-        var component = ssrMode === 'stream' ? "lazy(() => import('".concat(route._component, "'))") : "loadable(() => import('".concat(route._component, "'))");
-
+        var component = "loadable(() => import('".concat(route._component, "'))");
         var finalRoute = _objectSpread(_objectSpread({}, route), {}, {
           component: component
         });
-
         routeComponentsCode += "".concat(JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1'), ",");
       }
     }
@@ -174,7 +156,6 @@ export var fileSystemRoutes = function fileSystemRoutes(_ref5) {
   } finally {
     _iterator2.f();
   }
-
   routeComponentsCode += "\n];";
   var importLoadingCode = loadings.map(function (loading, index) {
     return "import loading_".concat(index, " from '").concat(loading, "';\n");

package/dist/js/treeshaking/analyze/utils.js

@@ -6,7 +6,6 @@ import { FILE_SYSTEM_ROUTES_FILE_NAME } from "./constants";
 export var walkDirectory = function walkDirectory(dir) {
   return fs.readdirSync(dir).reduce(function (previous, filename) {
     var filePath = path.join(dir, filename);
-
     if (fs.statSync(filePath).isDirectory()) {
       return [].concat(_toConsumableArray(previous), _toConsumableArray(walkDirectory(filePath)));
     } else {
@@ -16,14 +15,14 @@ export var walkDirectory = function walkDirectory(dir) {
 };
 export var getDefaultImports = function getDefaultImports(_ref) {
   var entrypoint = _ref.entrypoint,
-      srcDirectory = _ref.srcDirectory,
-      internalSrcAlias = _ref.internalSrcAlias,
-      internalDirAlias = _ref.internalDirAlias,
-      internalDirectory = _ref.internalDirectory;
+    srcDirectory = _ref.srcDirectory,
+    internalSrcAlias = _ref.internalSrcAlias,
+    internalDirAlias = _ref.internalDirAlias,
+    internalDirectory = _ref.internalDirectory;
   var entryName = entrypoint.entryName,
-      fileSystemRoutes = entrypoint.fileSystemRoutes,
-      customBootstrap = entrypoint.customBootstrap,
-      entry = entrypoint.entry;
+    fileSystemRoutes = entrypoint.fileSystemRoutes,
+    customBootstrap = entrypoint.customBootstrap,
+    entry = entrypoint.entry;
   var imports = [{
     specifiers: [{
       local: 'React'
@@ -47,7 +46,6 @@ export var getDefaultImports = function getDefaultImports(_ref) {
     }],
     value: normalizeToPosixPath(customBootstrap.replace(srcDirectory, internalSrcAlias))
   }].filter(Boolean);
-
   if (fileSystemRoutes) {
     var route = {
       specifiers: [{
@@ -55,7 +53,6 @@ export var getDefaultImports = function getDefaultImports(_ref) {
       }],
       value: normalizeToPosixPath("".concat(internalDirAlias, "/").concat(entryName, "/").concat(FILE_SYSTEM_ROUTES_FILE_NAME))
     };
-
     if (fileSystemRoutes.globalApp) {
       imports.push({
         specifiers: [{
@@ -66,7 +63,6 @@ export var getDefaultImports = function getDefaultImports(_ref) {
     } else {
       route.initialize = 'const App = false;';
     }
-
     imports.push(route);
   } else {
     imports.push({
@@ -76,18 +72,15 @@ export var getDefaultImports = function getDefaultImports(_ref) {
       value: normalizeToPosixPath(entry.replace(srcDirectory, internalSrcAlias))
     });
   }
-
   return imports;
 };
 export var isRouteComponentFile = function isRouteComponentFile(filePath) {
   if (/\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/.test(filePath)) {
     return false;
   }
-
   if (['.js', '.jsx', '.ts', '.tsx'].includes(path.extname(filePath))) {
     return true;
   }
-
   return false;
 };
 export var replaceWithAlias = function replaceWithAlias(base, filePath, alias) {