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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/CHANGELOG.md +181 -0
  2. package/dist/js/modern/analyze/generateCode.js +29 -37
  3. package/dist/js/modern/analyze/getBundleEntry.js +4 -12
  4. package/dist/js/modern/analyze/getClientRoutes/getRoutes.js +5 -30
  5. package/dist/js/modern/analyze/getClientRoutes/getRoutesLegacy.js +5 -30
  6. package/dist/js/modern/analyze/getClientRoutes/utils.js +0 -3
  7. package/dist/js/modern/analyze/getFileSystemEntry.js +4 -17
  8. package/dist/js/modern/analyze/getHtmlTemplate.js +2 -9
  9. package/dist/js/modern/analyze/getServerRoutes.js +15 -32
  10. package/dist/js/modern/analyze/index.js +79 -22
  11. package/dist/js/modern/analyze/isDefaultExportFunction.js +0 -4
  12. package/dist/js/modern/analyze/makeLegalIdentifier.js +0 -2
  13. package/dist/js/modern/analyze/nestedRoutes.js +8 -33
  14. package/dist/js/modern/analyze/templates.js +22 -37
  15. package/dist/js/modern/analyze/utils.js +0 -7
  16. package/dist/js/modern/builder/builderPlugins/compatModern.js +30 -48
  17. package/dist/js/modern/builder/createHtmlConfig.js +2 -2
  18. package/dist/js/modern/builder/createOutputConfig.js +7 -4
  19. package/dist/js/modern/builder/createSourceConfig.js +0 -11
  20. package/dist/js/modern/builder/createToolsConfig.js +3 -10
  21. package/dist/js/modern/builder/index.js +24 -22
  22. package/dist/js/modern/builder/share.js +0 -4
  23. package/dist/js/modern/builder/webpackPlugins/htmlAsyncChunkPlugin.js +0 -8
  24. package/dist/js/modern/builder/webpackPlugins/htmlBottomTemplate.js +2 -13
  25. package/dist/js/modern/builder/webpackPlugins/routerPlugin.js +97 -0
  26. package/dist/js/modern/commands/build.js +6 -46
  27. package/dist/js/modern/commands/dev.js +4 -16
  28. package/dist/js/modern/commands/inspect.js +3 -20
  29. package/dist/js/modern/commands/start.js +0 -2
  30. package/dist/js/modern/index.js +6 -15
  31. package/dist/js/modern/utils/config.js +1 -12
  32. package/dist/js/modern/utils/createServer.js +0 -5
  33. package/dist/js/modern/utils/getSpecifiedEntries.js +0 -6
  34. package/dist/js/modern/utils/printInstructions.js +2 -1
  35. package/dist/js/modern/utils/routes.js +0 -2
  36. package/dist/js/node/analyze/generateCode.js +29 -60
  37. package/dist/js/node/analyze/getBundleEntry.js +4 -18
  38. package/dist/js/node/analyze/getClientRoutes/getRoutes.js +5 -45
  39. package/dist/js/node/analyze/getClientRoutes/getRoutesLegacy.js +5 -45
  40. package/dist/js/node/analyze/getClientRoutes/index.js +0 -2
  41. package/dist/js/node/analyze/getClientRoutes/utils.js +0 -14
  42. package/dist/js/node/analyze/getFileSystemEntry.js +4 -25
  43. package/dist/js/node/analyze/getHtmlTemplate.js +2 -23
  44. package/dist/js/node/analyze/getServerRoutes.js +14 -40
  45. package/dist/js/node/analyze/index.js +79 -32
  46. package/dist/js/node/analyze/isDefaultExportFunction.js +0 -12
  47. package/dist/js/node/analyze/makeLegalIdentifier.js +0 -4
  48. package/dist/js/node/analyze/nestedRoutes.js +8 -41
  49. package/dist/js/node/analyze/templates.js +22 -47
  50. package/dist/js/node/analyze/utils.js +0 -20
  51. package/dist/js/node/builder/builderPlugins/compatModern.js +30 -59
  52. package/dist/js/node/builder/createHtmlConfig.js +2 -10
  53. package/dist/js/node/builder/createOutputConfig.js +7 -6
  54. package/dist/js/node/builder/createSourceConfig.js +0 -17
  55. package/dist/js/node/builder/createToolsConfig.js +3 -12
  56. package/dist/js/node/builder/index.js +24 -36
  57. package/dist/js/node/builder/share.js +0 -12
  58. package/dist/js/node/builder/webpackPlugins/htmlAsyncChunkPlugin.js +0 -10
  59. package/dist/js/node/builder/webpackPlugins/htmlBottomTemplate.js +2 -15
  60. package/dist/js/node/builder/webpackPlugins/routerPlugin.js +105 -0
  61. package/dist/js/node/commands/build.js +4 -57
  62. package/dist/js/node/commands/deploy.js +0 -2
  63. package/dist/js/node/commands/dev.js +3 -27
  64. package/dist/js/node/commands/index.js +0 -6
  65. package/dist/js/node/commands/inspect.js +3 -27
  66. package/dist/js/node/commands/start.js +0 -11
  67. package/dist/js/node/exports/server.js +0 -1
  68. package/dist/js/node/hooks.js +0 -2
  69. package/dist/js/node/index.js +7 -34
  70. package/dist/js/node/locale/index.js +0 -4
  71. package/dist/js/node/utils/commands.js +0 -2
  72. package/dist/js/node/utils/config.js +1 -25
  73. package/dist/js/node/utils/createServer.js +0 -15
  74. package/dist/js/node/utils/getSpecifiedEntries.js +0 -9
  75. package/dist/js/node/utils/language.js +0 -2
  76. package/dist/js/node/utils/printInstructions.js +2 -5
  77. package/dist/js/node/utils/routes.js +0 -5
  78. package/dist/js/treeshaking/analyze/generateCode.js +57 -100
  79. package/dist/js/treeshaking/analyze/getBundleEntry.js +11 -19
  80. package/dist/js/treeshaking/analyze/getClientRoutes/getRoutes.js +16 -42
  81. package/dist/js/treeshaking/analyze/getClientRoutes/getRoutesLegacy.js +16 -42
  82. package/dist/js/treeshaking/analyze/getClientRoutes/utils.js +0 -3
  83. package/dist/js/treeshaking/analyze/getFileSystemEntry.js +4 -17
  84. package/dist/js/treeshaking/analyze/getHtmlTemplate.js +2 -26
  85. package/dist/js/treeshaking/analyze/getServerRoutes.js +24 -37
  86. package/dist/js/treeshaking/analyze/index.js +185 -65
  87. package/dist/js/treeshaking/analyze/isDefaultExportFunction.js +0 -4
  88. package/dist/js/treeshaking/analyze/makeLegalIdentifier.js +0 -2
  89. package/dist/js/treeshaking/analyze/nestedRoutes.js +9 -51
  90. package/dist/js/treeshaking/analyze/templates.js +31 -50
  91. package/dist/js/treeshaking/analyze/utils.js +7 -14
  92. package/dist/js/treeshaking/builder/builderPlugins/compatModern.js +40 -59
  93. package/dist/js/treeshaking/builder/createHtmlConfig.js +15 -15
  94. package/dist/js/treeshaking/builder/createOutputConfig.js +26 -23
  95. package/dist/js/treeshaking/builder/createSourceConfig.js +7 -19
  96. package/dist/js/treeshaking/builder/createToolsConfig.js +16 -21
  97. package/dist/js/treeshaking/builder/index.js +38 -49
  98. package/dist/js/treeshaking/builder/share.js +0 -4
  99. package/dist/js/treeshaking/builder/webpackPlugins/htmlAsyncChunkPlugin.js +1 -13
  100. package/dist/js/treeshaking/builder/webpackPlugins/htmlBottomTemplate.js +2 -14
  101. package/dist/js/treeshaking/builder/webpackPlugins/routerPlugin.js +121 -0
  102. package/dist/js/treeshaking/commands/build.js +26 -111
  103. package/dist/js/treeshaking/commands/deploy.js +0 -3
  104. package/dist/js/treeshaking/commands/dev.js +13 -35
  105. package/dist/js/treeshaking/commands/inspect.js +5 -28
  106. package/dist/js/treeshaking/commands/start.js +0 -9
  107. package/dist/js/treeshaking/index.js +2 -39
  108. package/dist/js/treeshaking/utils/config.js +1 -17
  109. package/dist/js/treeshaking/utils/createServer.js +0 -10
  110. package/dist/js/treeshaking/utils/getSpecifiedEntries.js +0 -10
  111. package/dist/js/treeshaking/utils/printInstructions.js +0 -5
  112. package/dist/js/treeshaking/utils/routes.js +0 -4
  113. package/dist/types/analyze/index.d.ts +2 -3
  114. package/dist/types/analyze/nestedRoutes.d.ts +1 -1
  115. package/dist/types/analyze/templates.d.ts +3 -1
  116. package/dist/types/builder/builderPlugins/compatModern.d.ts +0 -1
  117. package/dist/types/builder/index.d.ts +2 -6
  118. package/dist/types/builder/webpackPlugins/routerPlugin.d.ts +10 -0
  119. package/dist/types/commands/inspect.d.ts +1 -4
  120. package/dist/types/index.d.ts +0 -2
  121. package/dist/types/utils/config.d.ts +0 -1
  122. package/package.json +23 -22
  123. package/dist/js/modern/utils/createCompiler.js +0 -58
  124. package/dist/js/node/utils/createCompiler.js +0 -75
  125. package/dist/js/treeshaking/utils/createCompiler.js +0 -117
  126. package/dist/types/utils/createCompiler.d.ts +0 -12
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.routesForServer = exports.renderFunction = exports.index = exports.html = exports.fileSystemRoutes = void 0;
7
-
8
7
  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; }
9
-
10
8
  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; }
11
-
12
9
  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; }
13
-
14
10
  const index = ({
15
11
  mountId,
16
12
  imports,
@@ -35,9 +31,7 @@ AppWrapper = render();
35
31
 
36
32
  ${exportStatement};
37
33
  `;
38
-
39
34
  exports.index = index;
40
-
41
35
  const renderFunction = ({
42
36
  plugins,
43
37
  customBootstrap,
@@ -59,9 +53,7 @@ const renderFunction = ({
59
53
 
60
54
  return AppWrapper
61
55
  `;
62
-
63
56
  exports.renderFunction = renderFunction;
64
-
65
57
  const html = partials => `
66
58
  <!DOCTYPE html>
67
59
  <html>
@@ -92,9 +84,7 @@ const html = partials => `
92
84
 
93
85
  </html>
94
86
  `;
95
-
96
87
  exports.html = html;
97
-
98
88
  const routesForServer = ({
99
89
  routes,
100
90
  alias
@@ -104,37 +94,28 @@ const routesForServer = ({
104
94
  basename
105
95
  } = alias;
106
96
  const loaders = [];
107
-
108
97
  const traverseRouteTree = route => {
109
98
  let children;
110
-
111
99
  if ('children' in route && route.children) {
112
100
  var _route$children;
113
-
114
101
  children = route === null || route === void 0 ? void 0 : (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.map(traverseRouteTree);
115
102
  }
116
-
117
103
  let loader;
118
-
119
104
  if (route.type === 'nested') {
120
105
  if (route.loader) {
121
106
  loaders.push(route.loader);
122
107
  loader = `loader_${loaders.length - 1}`;
123
108
  }
124
109
  }
125
-
126
110
  const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
127
111
  loader,
128
112
  children
129
113
  });
130
-
131
114
  return finalRoute;
132
115
  };
133
-
134
116
  let routesCode = `
135
117
  export const routes = [
136
118
  `;
137
-
138
119
  for (const route of routes) {
139
120
  if ('type' in route) {
140
121
  const newRoute = traverseRouteTree(route);
@@ -143,7 +124,6 @@ const routesForServer = ({
143
124
  routesCode += `${JSON.stringify(route, null, 2)}`;
144
125
  }
145
126
  }
146
-
147
127
  routesCode += `\n];`;
148
128
  const importLoadersCode = loaders.map((loader, index) => {
149
129
  const realLoaderPath = loader.replace(name, basename);
@@ -154,93 +134,89 @@ const routesForServer = ({
154
134
  ${routesCode}
155
135
  `;
156
136
  };
157
-
158
137
  exports.routesForServer = routesForServer;
159
-
160
138
  const fileSystemRoutes = ({
161
139
  routes,
162
140
  ssrMode,
163
- nestedRoutesEntry
141
+ nestedRoutesEntry,
142
+ entryName
164
143
  }) => {
165
- const importLazyCode = ssrMode === 'stream' ? 'import { lazy } from "react";' : `import loadable from '@modern-js/runtime/loadable'`;
144
+ // The legacy mode and pages dir routes should use loadable
145
+ // nested routes + renderTostring should use loadable.lazy
146
+ // nested routes + renderToStream should use react.lazy
147
+ const importLazyCode = `
148
+ import { lazy } from "react";
149
+ import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
150
+ `;
166
151
  let dataLoaderPath = '';
167
-
168
152
  if (ssrMode) {
169
153
  dataLoaderPath = require.resolve(`@modern-js/plugin-data-loader/loader`);
170
-
171
154
  if (nestedRoutesEntry) {
172
- dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}!`;
155
+ dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}&entryName=${entryName}!`;
173
156
  }
174
157
  }
175
-
176
158
  const loadings = [];
177
159
  const errors = [];
178
160
  const loaders = [];
179
-
180
161
  const traverseRouteTree = route => {
181
162
  let children;
182
-
183
163
  if ('children' in route && route.children) {
184
164
  var _route$children2;
185
-
186
165
  children = route === null || route === void 0 ? void 0 : (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.map(traverseRouteTree);
187
166
  }
188
-
189
167
  let loading;
190
168
  let error;
191
169
  let loader;
192
-
170
+ let component = '';
193
171
  if (route.type === 'nested') {
194
172
  if (route.loading) {
195
173
  loadings.push(route.loading);
196
174
  loading = `loading_${loadings.length - 1}`;
197
175
  }
198
-
199
176
  if (route.error) {
200
177
  errors.push(route.error);
201
178
  error = `error_${errors.length - 1}`;
202
179
  }
203
-
204
180
  if (route.loader) {
205
181
  loaders.push(route.loader);
206
182
  loader = `loader_${loaders.length - 1}`;
207
183
  }
184
+ if (route._component) {
185
+ if (ssrMode === 'stream') {
186
+ component = `lazy(() => import(/* webpackChunkName: "${route.id}" */ /* webpackMode: "lazy-once" */ '${route._component}'))`;
187
+ } else {
188
+ component = `loadable(() => import(/* webpackChunkName: "${route.id}" */ /* webpackMode: "lazy-once" */ '${route._component}'))`;
189
+ }
190
+ }
191
+ } else if (route._component) {
192
+ component = `loadable(() => import('${route._component}'))`;
208
193
  }
209
-
210
194
  const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
211
195
  loading,
212
196
  loader,
213
197
  error,
214
198
  children
215
199
  });
216
-
217
200
  if (route._component) {
218
- const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
219
201
  finalRoute.component = component;
220
202
  }
221
-
222
203
  return finalRoute;
223
204
  };
224
-
225
205
  let routeComponentsCode = `
226
206
  export const routes = [
227
207
  `;
228
-
229
208
  for (const route of routes) {
230
209
  if ('type' in route) {
231
210
  const newRoute = traverseRouteTree(route);
232
- routeComponentsCode += `${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')},`;
211
+ routeComponentsCode += `${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, '"')},`;
233
212
  } else {
234
- const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
235
-
213
+ const component = `loadable(() => import('${route._component}'))`;
236
214
  const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
237
215
  component
238
216
  });
239
-
240
217
  routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1')},`;
241
218
  }
242
219
  }
243
-
244
220
  routeComponentsCode += `\n];`;
245
221
  const importLoadingCode = loadings.map((loading, index) => {
246
222
  return `import loading_${index} from '${loading}';\n`;
@@ -259,5 +235,4 @@ const fileSystemRoutes = ({
259
235
  ${routeComponentsCode}
260
236
  `;
261
237
  };
262
-
263
238
  exports.fileSystemRoutes = fileSystemRoutes;
@@ -4,29 +4,20 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.walkDirectory = exports.replaceWithAlias = exports.isRouteComponentFile = exports.getDefaultImports = void 0;
7
-
8
7
  var _fs = _interopRequireDefault(require("fs"));
9
-
10
8
  var _path = _interopRequireDefault(require("path"));
11
-
12
9
  var _utils = require("@modern-js/utils");
13
-
14
10
  var _constants = require("./constants");
15
-
16
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
12
  const walkDirectory = dir => _fs.default.readdirSync(dir).reduce((previous, filename) => {
19
13
  const filePath = _path.default.join(dir, filename);
20
-
21
14
  if (_fs.default.statSync(filePath).isDirectory()) {
22
15
  return [...previous, ...walkDirectory(filePath)];
23
16
  } else {
24
17
  return [...previous, filePath];
25
18
  }
26
19
  }, []);
27
-
28
20
  exports.walkDirectory = walkDirectory;
29
-
30
21
  const getDefaultImports = ({
31
22
  entrypoint,
32
23
  srcDirectory,
@@ -63,7 +54,6 @@ const getDefaultImports = ({
63
54
  }],
64
55
  value: (0, _utils.normalizeToPosixPath)(customBootstrap.replace(srcDirectory, internalSrcAlias))
65
56
  }].filter(Boolean);
66
-
67
57
  if (fileSystemRoutes) {
68
58
  const route = {
69
59
  specifiers: [{
@@ -71,7 +61,6 @@ const getDefaultImports = ({
71
61
  }],
72
62
  value: (0, _utils.normalizeToPosixPath)(`${internalDirAlias}/${entryName}/${_constants.FILE_SYSTEM_ROUTES_FILE_NAME}`)
73
63
  };
74
-
75
64
  if (fileSystemRoutes.globalApp) {
76
65
  imports.push({
77
66
  specifiers: [{
@@ -82,7 +71,6 @@ const getDefaultImports = ({
82
71
  } else {
83
72
  route.initialize = 'const App = false;';
84
73
  }
85
-
86
74
  imports.push(route);
87
75
  } else {
88
76
  imports.push({
@@ -92,26 +80,18 @@ const getDefaultImports = ({
92
80
  value: (0, _utils.normalizeToPosixPath)(entry.replace(srcDirectory, internalSrcAlias))
93
81
  });
94
82
  }
95
-
96
83
  return imports;
97
84
  };
98
-
99
85
  exports.getDefaultImports = getDefaultImports;
100
-
101
86
  const isRouteComponentFile = filePath => {
102
87
  if (/\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/.test(filePath)) {
103
88
  return false;
104
89
  }
105
-
106
90
  if (['.js', '.jsx', '.ts', '.tsx'].includes(_path.default.extname(filePath))) {
107
91
  return true;
108
92
  }
109
-
110
93
  return false;
111
94
  };
112
-
113
95
  exports.isRouteComponentFile = isRouteComponentFile;
114
-
115
96
  const replaceWithAlias = (base, filePath, alias) => (0, _utils.normalizeToPosixPath)(_path.default.join(alias, _path.default.relative(base, filePath)));
116
-
117
97
  exports.replaceWithAlias = replaceWithAlias;
@@ -4,37 +4,24 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.PluginCompatModern = void 0;
7
-
8
7
  var _path = require("path");
9
-
10
8
  var _builderShared = require("@modern-js/builder-shared");
11
-
12
9
  var _lodash = require("@modern-js/utils/lodash");
13
-
14
10
  var _htmlWebpackPlugin = _interopRequireDefault(require("@modern-js/builder-webpack-provider/html-webpack-plugin"));
15
-
16
11
  var _utils = require("@modern-js/utils");
17
-
18
12
  var _htmlBottomTemplate = require("../webpackPlugins/htmlBottomTemplate");
19
-
20
13
  var _htmlAsyncChunkPlugin = require("../webpackPlugins/htmlAsyncChunkPlugin");
21
-
22
14
  var _share = require("../share");
23
-
15
+ var _routerPlugin = _interopRequireDefault(require("../webpackPlugins/routerPlugin"));
24
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
17
  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; }
27
-
28
18
  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; }
29
-
30
19
  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; }
31
-
32
20
  /**
33
21
  * Provides default configuration consistent with `@modern-js/webpack`
34
22
  */
35
23
  const PluginCompatModern = (appContext, modernConfig, options) => ({
36
24
  name: 'builder-plugin-compat-modern',
37
-
38
25
  setup(api) {
39
26
  api.modifyBuilderConfig(config => {
40
27
  if (isStreamingSSR(modernConfig)) {
@@ -44,7 +31,6 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
44
31
  }
45
32
  });
46
33
  }
47
-
48
34
  return config;
49
35
  });
50
36
  api.modifyWebpackChain((chain, {
@@ -52,8 +38,8 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
52
38
  CHAIN_ID,
53
39
  isProd
54
40
  }) => {
55
- const builderNormalizedConfig = api.getNormalizedConfig(); // set webpack config name
56
-
41
+ const builderNormalizedConfig = api.getNormalizedConfig();
42
+ // set webpack config name
57
43
  if (target === 'node') {
58
44
  chain.name('server');
59
45
  } else if (target === 'modern-web') {
@@ -61,13 +47,12 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
61
47
  } else {
62
48
  chain.name('client');
63
49
  }
50
+ chain.resolve.modules.add('node_modules').add((0, _path.join)(api.context.rootPath, 'node_modules'));
64
51
 
65
- chain.resolve.modules.add('node_modules').add((0, _path.join)(api.context.rootPath, 'node_modules')); // apply node compat
66
-
52
+ // apply node compat
67
53
  if (target === 'node') {
68
54
  applyNodeCompat(chain, modernConfig, isProd);
69
55
  }
70
-
71
56
  if (isHtmlEnabled(builderNormalizedConfig, target)) {
72
57
  applyBottomHtmlWebpackPlugin({
73
58
  api,
@@ -81,39 +66,39 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
81
66
  CHAIN_ID,
82
67
  modernConfig
83
68
  });
84
- } // apply copy plugin
85
- // const copyPatterns = createCopyPatterns(chain, appContext, modernConfig);
86
-
69
+ }
87
70
 
71
+ // apply copy plugin
72
+ // const copyPatterns = createCopyPatterns(chain, appContext, modernConfig);
88
73
  const defaultCopyPattern = (0, _share.createCopyPattern)(appContext, modernConfig, 'public', chain);
89
74
  chain.plugin(CHAIN_ID.PLUGIN.COPY).tap(args => {
90
75
  var _args$;
91
-
92
76
  return [{
93
77
  patterns: [...(((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.patterns) || []), defaultCopyPattern]
94
78
  }];
95
79
  });
96
-
80
+ const {
81
+ entrypoints
82
+ } = appContext;
83
+ const existNestedRoutes = entrypoints.some(entrypoint => entrypoint.nestedRoutesEntry);
84
+ chain.plugin('route-plugin').use(_routerPlugin.default, [{
85
+ existNestedRoutes
86
+ }]);
97
87
  function isHtmlEnabled(config, target) {
98
88
  var _config$tools;
99
-
100
89
  return ((_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : _config$tools.htmlPlugin) !== false && target !== 'node' && target !== 'web-worker';
101
90
  }
102
91
  });
103
-
104
92
  if (options) {
105
93
  applyCallbacks(api, options);
106
94
  }
107
95
  }
108
-
109
96
  });
97
+
110
98
  /**
111
99
  * register builder hooks callback
112
100
  */
113
-
114
-
115
101
  exports.PluginCompatModern = PluginCompatModern;
116
-
117
102
  function applyCallbacks(api, options) {
118
103
  options.onAfterBuild && api.onAfterBuild(options.onAfterBuild);
119
104
  options.onAfterCreateCompiler && api.onAfterCreateCompiler(options.onAfterCreateCompiler);
@@ -124,40 +109,35 @@ function applyCallbacks(api, options) {
124
109
  options.onDevCompileDone && api.onDevCompileDone(options.onDevCompileDone);
125
110
  options.onExit && api.onExit(options.onExit);
126
111
  }
112
+
127
113
  /**
128
114
  * compat some config, if target is `node`
129
115
  */
130
-
131
-
132
116
  function applyNodeCompat(chain, modernConfig, isProd) {
133
117
  // apply node resolve extensions
134
118
  for (const ext of ['.node.js', '.node.jsx', '.node.ts', '.node.tsx']) {
135
119
  chain.resolve.extensions.prepend(ext);
136
- } // apply filterEntriesBySSRConfig
137
-
120
+ }
138
121
 
122
+ // apply filterEntriesBySSRConfig
139
123
  filterEntriesBySSRConfig(isProd, chain, modernConfig.server, modernConfig.output);
140
-
141
124
  function filterEntriesBySSRConfig(isProd, chain, serverConfig, outputConfig) {
142
125
  var _outputConfig$ssg;
143
-
144
- const entries = chain.entryPoints.entries(); // if prod and ssg config is true or function
145
-
126
+ const entries = chain.entryPoints.entries();
127
+ // if prod and ssg config is true or function
146
128
  if (isProd && ((outputConfig === null || outputConfig === void 0 ? void 0 : outputConfig.ssg) === true || typeof (outputConfig === null || outputConfig === void 0 ? void 0 : (_outputConfig$ssg = outputConfig.ssg) === null || _outputConfig$ssg === void 0 ? void 0 : _outputConfig$ssg[0]) === 'function')) {
147
129
  return;
148
- } // if single entry has ssg config
149
- // `ssg: {}` is not allowed if multi entry
150
-
130
+ }
151
131
 
132
+ // if single entry has ssg config
133
+ // `ssg: {}` is not allowed if multi entry
152
134
  const entryNames = Object.keys(entries);
153
-
154
135
  if (isProd && entryNames.length === 1 && outputConfig !== null && outputConfig !== void 0 && outputConfig.ssg) {
155
136
  return;
156
- } // collect all ssg entries
157
-
137
+ }
158
138
 
139
+ // collect all ssg entries
159
140
  const ssgEntries = [];
160
-
161
141
  if (isProd && outputConfig !== null && outputConfig !== void 0 && outputConfig.ssg) {
162
142
  const {
163
143
  ssg
@@ -168,7 +148,6 @@ function applyNodeCompat(chain, modernConfig, isProd) {
168
148
  }
169
149
  });
170
150
  }
171
-
172
151
  const {
173
152
  ssr,
174
153
  ssrByEntries
@@ -180,11 +159,10 @@ function applyNodeCompat(chain, modernConfig, isProd) {
180
159
  });
181
160
  }
182
161
  }
162
+
183
163
  /**
184
164
  * inject bottom template
185
165
  */
186
-
187
-
188
166
  function applyBottomHtmlWebpackPlugin({
189
167
  api,
190
168
  chain,
@@ -200,29 +178,24 @@ function applyBottomHtmlWebpackPlugin({
200
178
  title: (0, _utils.getEntryOptions)(entryName, modernConfig.output.title, modernConfig.output.titleByEntries, appContext.packageName),
201
179
  mountId: modernConfig.output.mountId
202
180
  }, (0, _utils.getEntryOptions)(entryName, modernConfig.output.templateParameters, modernConfig.output.templateParametersByEntries, appContext.packageName));
203
-
204
181
  chain.plugin(`${CHAIN_ID.PLUGIN.HTML}-${entryName}`).tap(args => [_objectSpread(_objectSpread({}, args[0] || {}), {}, {
205
182
  __internal__: true,
206
183
  bottomTemplate: appContext.htmlTemplates[`__${entryName}-bottom__`] && (0, _lodash.template)(appContext.htmlTemplates[`__${entryName}-bottom__`])(baseTemplateParams)
207
184
  })]);
208
185
  }
209
-
210
186
  chain.plugin(CHAIN_ID.PLUGIN.BOTTOM_TEMPLATE).use(_htmlBottomTemplate.BottomTemplatePlugin, [_htmlWebpackPlugin.default]);
211
187
  }
212
-
213
188
  const isStreamingSSR = userConfig => {
214
189
  const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
215
-
216
190
  const {
217
191
  server
218
192
  } = userConfig;
219
-
220
193
  if (isStreaming(server.ssr)) {
221
194
  return true;
222
- } // Since we cannot apply different plugins for different entries,
223
- // we regard the whole app as streaming ssr only if one entry meets the requirement.
224
-
195
+ }
225
196
 
197
+ // Since we cannot apply different plugins for different entries,
198
+ // we regard the whole app as streaming ssr only if one entry meets the requirement.
226
199
  if (server !== null && server !== void 0 && server.ssrByEntries && typeof server.ssrByEntries === 'object') {
227
200
  for (const name of Object.keys(server.ssrByEntries)) {
228
201
  if (isStreaming(server.ssrByEntries[name])) {
@@ -230,10 +203,8 @@ const isStreamingSSR = userConfig => {
230
203
  }
231
204
  }
232
205
  }
233
-
234
206
  return false;
235
207
  };
236
-
237
208
  function applyAsyncChunkHtmlPlugin({
238
209
  chain,
239
210
  modernConfig,
@@ -7,13 +7,9 @@ exports.createBuilderAppIcon = createBuilderAppIcon;
7
7
  exports.createBuilderCrossorigin = createBuilderCrossorigin;
8
8
  exports.createBuilderFavicon = createBuilderFavicon;
9
9
  exports.createHtmlConfig = createHtmlConfig;
10
-
11
10
  var _path = _interopRequireDefault(require("path"));
12
-
13
11
  var _utils = require("@modern-js/utils");
14
-
15
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
13
  function createHtmlConfig(normalizedConfig, appContext) {
18
14
  const {
19
15
  disableHtmlFolder,
@@ -32,8 +28,9 @@ function createHtmlConfig(normalizedConfig, appContext) {
32
28
  } = normalizedConfig.output;
33
29
  const {
34
30
  configDir
35
- } = normalizedConfig.source; // transform Modernjs `output.scriptExt` to Builder `html.crossorigin` configuration
31
+ } = normalizedConfig.source;
36
32
 
33
+ // transform Modernjs `output.scriptExt` to Builder `html.crossorigin` configuration
37
34
  const builderCrossorigin = createBuilderCrossorigin(scriptExt);
38
35
  const builderAppIcon = createBuilderAppIcon(configDir, appContext);
39
36
  const builderFavicon = createBuilderFavicon(favicon, configDir, appContext);
@@ -55,21 +52,16 @@ function createHtmlConfig(normalizedConfig, appContext) {
55
52
  templateParametersByEntries: templateParametersByEntries
56
53
  };
57
54
  }
58
-
59
55
  const ICON_EXTENSIONS = ['png', 'jpg', 'jpeg', 'svg', 'ico'];
60
-
61
56
  function createBuilderAppIcon(configDir, appContext) {
62
57
  const appIcon = (0, _utils.findExists)(ICON_EXTENSIONS.map(ext => _path.default.resolve(appContext.appDirectory, configDir, `icon.${ext}`)));
63
58
  return typeof appIcon === 'string' ? appIcon : undefined;
64
59
  }
65
-
66
60
  function createBuilderCrossorigin(scriptExt) {
67
61
  var _scriptExtCustomConfi;
68
-
69
62
  const scriptExtCustomConfig = scriptExt === null || scriptExt === void 0 ? void 0 : scriptExt.custom;
70
63
  return scriptExtCustomConfig !== null && scriptExtCustomConfig !== void 0 && (_scriptExtCustomConfi = scriptExtCustomConfig.test) !== null && _scriptExtCustomConfi !== void 0 && _scriptExtCustomConfi.test('.js') && (scriptExtCustomConfig === null || scriptExtCustomConfig === void 0 ? void 0 : scriptExtCustomConfig.attribute) === 'crossorigin' ? scriptExtCustomConfig.value : undefined;
71
64
  }
72
-
73
65
  function createBuilderFavicon(favicon, configDir, appContext) {
74
66
  const defaultFavicon = (0, _utils.findExists)(ICON_EXTENSIONS.map(ext => _path.default.resolve(appContext.appDirectory, configDir, `favicon.${ext}`)));
75
67
  return favicon || defaultFavicon || undefined;
@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.createOutputConfig = createOutputConfig;
7
-
8
7
  var _share = require("./share");
9
-
10
8
  function createOutputConfig(normalizedConfig, appContext) {
11
9
  // TODO: add `externals` options in Modern.
10
+
12
11
  const {
13
12
  assetPrefix,
14
13
  copy,
@@ -21,6 +20,7 @@ function createOutputConfig(normalizedConfig, appContext) {
21
20
  disableInlineRuntimeChunk,
22
21
  disableMinimize,
23
22
  disableSourceMap,
23
+ disableTsChecker,
24
24
  enableCssModuleTSDeclaration,
25
25
  enableInlineScripts,
26
26
  enableInlineStyles,
@@ -41,10 +41,10 @@ function createOutputConfig(normalizedConfig, appContext) {
41
41
  js: jsPath,
42
42
  html: htmlPath,
43
43
  // `@modern-js/webpack` output all media files to `dist/media` by default
44
- svg: mediaPath || 'midia',
45
- image: mediaPath || 'midia',
46
- font: mediaPath || 'midia',
47
- media: mediaPath || 'midia'
44
+ svg: mediaPath || 'media',
45
+ image: mediaPath || 'media',
46
+ font: mediaPath || 'media',
47
+ media: mediaPath || 'media'
48
48
  },
49
49
  dataUriLimit: {
50
50
  svg: dataUriLimit,
@@ -56,6 +56,7 @@ function createOutputConfig(normalizedConfig, appContext) {
56
56
  disableInlineRuntimeChunk,
57
57
  disableMinimize,
58
58
  disableSourceMap,
59
+ disableTsChecker,
59
60
  enableCssModuleTSDeclaration,
60
61
  enableInlineScripts,
61
62
  enableInlineStyles,