@modern-js/runtime 2.59.0 → 2.60.0
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.
- package/dist/cjs/cli/ssr/index.js +1 -1
- package/dist/cjs/core/server/string/index.js +6 -6
- package/dist/cjs/router/runtime/plugin.js +15 -3
- package/dist/esm/cli/ssr/index.js +4 -3
- package/dist/esm/core/server/react/prerender/index.js +2 -3
- package/dist/esm/core/server/requestHandler.js +2 -1
- package/dist/esm/core/server/stream/afterTemplate.js +2 -1
- package/dist/esm/core/server/string/index.js +15 -31
- package/dist/esm/core/server/string/ssrData.js +2 -1
- package/dist/esm/router/cli/code/index.js +3 -2
- package/dist/esm/router/runtime/plugin.js +18 -4
- package/dist/esm-node/cli/ssr/index.js +1 -1
- package/dist/esm-node/core/server/string/index.js +6 -6
- package/dist/esm-node/router/runtime/plugin.js +16 -4
- package/package.json +12 -12
|
@@ -57,7 +57,7 @@ const ssrBuilderPlugin = (modernAPI) => ({
|
|
|
57
57
|
name: "@modern-js/builder-plugin-ssr",
|
|
58
58
|
setup(api) {
|
|
59
59
|
api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig }) => {
|
|
60
|
-
const isServerEnvironment = config.output.target === "node" || name === "
|
|
60
|
+
const isServerEnvironment = config.output.target === "node" || name === "workerSSR";
|
|
61
61
|
const userConfig = modernAPI.useResolvedConfigContext();
|
|
62
62
|
const useLoadablePlugin = (0, import_utils.isUseSSRBundle)(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
|
|
63
63
|
return mergeEnvironmentConfig(config, {
|
|
@@ -102,26 +102,26 @@ const renderString = async (request, serverRoot, options) => {
|
|
|
102
102
|
});
|
|
103
103
|
};
|
|
104
104
|
async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, { onError, onTiming }) {
|
|
105
|
-
const end = (0, import_time.time)();
|
|
106
105
|
let html = "";
|
|
107
106
|
let helmetData;
|
|
107
|
+
const finalApp = collectors.reduce((pre, creator) => {
|
|
108
|
+
var _creator_collect;
|
|
109
|
+
return ((_creator_collect = creator.collect) === null || _creator_collect === void 0 ? void 0 : _creator_collect.call(creator, pre)) || pre;
|
|
110
|
+
}, App);
|
|
108
111
|
try {
|
|
109
|
-
const
|
|
110
|
-
var _creator_collect;
|
|
111
|
-
return ((_creator_collect = creator.collect) === null || _creator_collect === void 0 ? void 0 : _creator_collect.call(creator, pre)) || pre;
|
|
112
|
-
}, App);
|
|
112
|
+
const end = (0, import_time.time)();
|
|
113
113
|
if (chunkSet.renderLevel >= import_constants.RenderLevel.SERVER_PREFETCH) {
|
|
114
114
|
html = import_server.default.renderToString(finalApp);
|
|
115
115
|
chunkSet.renderLevel = import_constants.RenderLevel.SERVER_RENDER;
|
|
116
116
|
}
|
|
117
117
|
helmetData = import_react_helmet.default.renderStatic();
|
|
118
|
-
await Promise.all(collectors.map((component) => component.effect()));
|
|
119
118
|
const cost = end();
|
|
120
119
|
onTiming(import_tracer.SSRTimings.RENDER_HTML, cost);
|
|
121
120
|
} catch (e) {
|
|
122
121
|
chunkSet.renderLevel = import_constants.RenderLevel.CLIENT_RENDER;
|
|
123
122
|
onError(import_tracer.SSRErrors.RENDER_HTML, e);
|
|
124
123
|
}
|
|
124
|
+
await Promise.all(collectors.map((component) => component.effect()));
|
|
125
125
|
const { ssrScripts, cssChunk, jsChunk } = chunkSet;
|
|
126
126
|
const finalHtml = await (0, import_shared.buildHtml)(htmlTemplate, [
|
|
127
127
|
createReplaceHtml(html),
|
|
@@ -135,12 +135,24 @@ const routerPlugin = (userConfig = {}) => {
|
|
|
135
135
|
getBlockNavState
|
|
136
136
|
]);
|
|
137
137
|
};
|
|
138
|
+
const Null = () => null;
|
|
138
139
|
return (props) => {
|
|
139
140
|
beforeCreateRouter = false;
|
|
140
141
|
const router = useCreateRouter(props);
|
|
141
|
-
return
|
|
142
|
-
router
|
|
143
|
-
|
|
142
|
+
return (
|
|
143
|
+
// To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
|
|
144
|
+
// According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
|
|
145
|
+
// To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.RouterProvider, {
|
|
149
|
+
router
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Null, {}),
|
|
152
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Null, {})
|
|
153
|
+
]
|
|
154
|
+
})
|
|
155
|
+
);
|
|
144
156
|
};
|
|
145
157
|
};
|
|
146
158
|
return getRouteApp();
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
2
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
|
+
import { _ as _type_of } from "@swc/helpers/_/_type_of";
|
|
3
4
|
import path from "path";
|
|
4
5
|
import { LOADABLE_STATS_FILE, isUseSSRBundle } from "@modern-js/utils";
|
|
5
6
|
var hasStringSSREntry = function(userConfig) {
|
|
6
7
|
var isStreaming = function(ssr) {
|
|
7
|
-
return ssr && typeof ssr === "object" && ssr.mode === "stream";
|
|
8
|
+
return ssr && (typeof ssr === "undefined" ? "undefined" : _type_of(ssr)) === "object" && ssr.mode === "stream";
|
|
8
9
|
};
|
|
9
10
|
var server = userConfig.server, output = userConfig.output;
|
|
10
11
|
if (((server === null || server === void 0 ? void 0 : server.ssr) || output.ssg) && !isStreaming(server.ssr)) {
|
|
11
12
|
return true;
|
|
12
13
|
}
|
|
13
|
-
if ((server === null || server === void 0 ? void 0 : server.ssrByEntries) &&
|
|
14
|
+
if ((server === null || server === void 0 ? void 0 : server.ssrByEntries) && _type_of(server.ssrByEntries) === "object") {
|
|
14
15
|
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
15
16
|
try {
|
|
16
17
|
for (var _iterator = Object.keys(server.ssrByEntries)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
@@ -46,7 +47,7 @@ var ssrBuilderPlugin = function(modernAPI) {
|
|
|
46
47
|
setup: function setup(api) {
|
|
47
48
|
api.modifyEnvironmentConfig(function(config, param) {
|
|
48
49
|
var name = param.name, mergeEnvironmentConfig = param.mergeEnvironmentConfig;
|
|
49
|
-
var isServerEnvironment = config.output.target === "node" || name === "
|
|
50
|
+
var isServerEnvironment = config.output.target === "node" || name === "workerSSR";
|
|
50
51
|
var userConfig = modernAPI.useResolvedConfigContext();
|
|
51
52
|
var useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
|
|
52
53
|
return mergeEnvironmentConfig(config, {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { _ as _call_super } from "@swc/helpers/_/_call_super";
|
|
1
2
|
import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
|
|
2
3
|
import { _ as _create_class } from "@swc/helpers/_/_create_class";
|
|
3
4
|
import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
4
5
|
import { _ as _inherits } from "@swc/helpers/_/_inherits";
|
|
5
6
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
6
7
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
7
|
-
import { _ as _create_super } from "@swc/helpers/_/_create_super";
|
|
8
8
|
import React, { createElement } from "react";
|
|
9
9
|
import withSideEffect from "react-side-effect";
|
|
10
10
|
import { aggKeysFromPropsList, aggMatchesFromPropsList, exist, getOutermostProperty } from "./util";
|
|
@@ -55,10 +55,9 @@ function factory(Component) {
|
|
|
55
55
|
var Spr = /* @__PURE__ */ function(_React_Component) {
|
|
56
56
|
"use strict";
|
|
57
57
|
_inherits(Spr2, _React_Component);
|
|
58
|
-
var _super = _create_super(Spr2);
|
|
59
58
|
function Spr2() {
|
|
60
59
|
_class_call_check(this, Spr2);
|
|
61
|
-
return
|
|
60
|
+
return _call_super(this, Spr2, arguments);
|
|
62
61
|
}
|
|
63
62
|
var _proto = Spr2.prototype;
|
|
64
63
|
_proto.verify = function verify() {
|
|
@@ -3,6 +3,7 @@ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
|
|
|
3
3
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
4
4
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
5
5
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
6
|
+
import { _ as _type_of } from "@swc/helpers/_/_type_of";
|
|
6
7
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
7
8
|
import { getPathname, parseCookie, parseHeaders, parseQuery } from "@modern-js/runtime-utils/universal/request";
|
|
8
9
|
import { getGlobalAppInit } from "../context";
|
|
@@ -30,7 +31,7 @@ function createSSRContext(request, options) {
|
|
|
30
31
|
}
|
|
31
32
|
var ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
|
|
32
33
|
var ssrMode = getSSRMode(ssrConfig);
|
|
33
|
-
var loaderFailureMode = typeof ssrConfig === "object" ? ssrConfig.loaderFailureMode : void 0;
|
|
34
|
+
var loaderFailureMode = (typeof ssrConfig === "undefined" ? "undefined" : _type_of(ssrConfig)) === "object" ? ssrConfig.loaderFailureMode : void 0;
|
|
34
35
|
return {
|
|
35
36
|
nonce,
|
|
36
37
|
loaderContext,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
2
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
3
|
+
import { _ as _type_of } from "@swc/helpers/_/_type_of";
|
|
3
4
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
4
5
|
import { serializeJson } from "@modern-js/runtime-utils/node";
|
|
5
6
|
import { SSR_DATA_PLACEHOLDER } from "../constants";
|
|
@@ -57,7 +58,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
|
|
|
57
58
|
function createReplaceSSRData(options) {
|
|
58
59
|
var runtimeContext = options.runtimeContext, nonce = options.nonce, renderLevel = options.renderLevel, ssrConfig = options.ssrConfig;
|
|
59
60
|
var _runtimeContext_ssrContext = runtimeContext.ssrContext, request = _runtimeContext_ssrContext.request, reporter = _runtimeContext_ssrContext.reporter;
|
|
60
|
-
var headers = typeof ssrConfig === "object" && ssrConfig.unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(function(param) {
|
|
61
|
+
var headers = (typeof ssrConfig === "undefined" ? "undefined" : _type_of(ssrConfig)) === "object" && ssrConfig.unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(function(param) {
|
|
61
62
|
var _param = _sliced_to_array(param, 2), key = _param[0], _ = _param[1];
|
|
62
63
|
var _ssrConfig_unsafeHeaders_map, _ssrConfig_unsafeHeaders;
|
|
63
64
|
return (_ssrConfig_unsafeHeaders = ssrConfig.unsafeHeaders) === null || _ssrConfig_unsafeHeaders === void 0 ? void 0 : (_ssrConfig_unsafeHeaders_map = _ssrConfig_unsafeHeaders.map(function(header) {
|
|
@@ -121,53 +121,37 @@ function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, _)
|
|
|
121
121
|
}
|
|
122
122
|
function _generateHtml() {
|
|
123
123
|
_generateHtml = _async_to_generator(function(App, htmlTemplate, chunkSet, collectors, htmlModifiers, param) {
|
|
124
|
-
var onError, onTiming,
|
|
124
|
+
var onError, onTiming, html, helmetData, finalApp, end, cost, ssrScripts, cssChunk, jsChunk, finalHtml;
|
|
125
125
|
return _ts_generator(this, function(_state) {
|
|
126
126
|
switch (_state.label) {
|
|
127
127
|
case 0:
|
|
128
128
|
onError = param.onError, onTiming = param.onTiming;
|
|
129
|
-
end = time();
|
|
130
129
|
html = "";
|
|
131
|
-
_state.label = 1;
|
|
132
|
-
case 1:
|
|
133
|
-
_state.trys.push([
|
|
134
|
-
1,
|
|
135
|
-
3,
|
|
136
|
-
,
|
|
137
|
-
4
|
|
138
|
-
]);
|
|
139
130
|
finalApp = collectors.reduce(function(pre, creator) {
|
|
140
131
|
var _creator_collect;
|
|
141
132
|
return ((_creator_collect = creator.collect) === null || _creator_collect === void 0 ? void 0 : _creator_collect.call(creator, pre)) || pre;
|
|
142
133
|
}, App);
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
chunkSet.renderLevel
|
|
134
|
+
try {
|
|
135
|
+
end = time();
|
|
136
|
+
if (chunkSet.renderLevel >= RenderLevel.SERVER_PREFETCH) {
|
|
137
|
+
html = ReactDomServer.renderToString(finalApp);
|
|
138
|
+
chunkSet.renderLevel = RenderLevel.SERVER_RENDER;
|
|
139
|
+
}
|
|
140
|
+
helmetData = ReactHelmet.renderStatic();
|
|
141
|
+
cost = end();
|
|
142
|
+
onTiming(SSRTimings.RENDER_HTML, cost);
|
|
143
|
+
} catch (e) {
|
|
144
|
+
chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
|
|
145
|
+
onError(SSRErrors.RENDER_HTML, e);
|
|
146
146
|
}
|
|
147
|
-
helmetData = ReactHelmet.renderStatic();
|
|
148
147
|
return [
|
|
149
148
|
4,
|
|
150
149
|
Promise.all(collectors.map(function(component) {
|
|
151
150
|
return component.effect();
|
|
152
151
|
}))
|
|
153
152
|
];
|
|
154
|
-
case
|
|
153
|
+
case 1:
|
|
155
154
|
_state.sent();
|
|
156
|
-
cost = end();
|
|
157
|
-
onTiming(SSRTimings.RENDER_HTML, cost);
|
|
158
|
-
return [
|
|
159
|
-
3,
|
|
160
|
-
4
|
|
161
|
-
];
|
|
162
|
-
case 3:
|
|
163
|
-
e = _state.sent();
|
|
164
|
-
chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
|
|
165
|
-
onError(SSRErrors.RENDER_HTML, e);
|
|
166
|
-
return [
|
|
167
|
-
3,
|
|
168
|
-
4
|
|
169
|
-
];
|
|
170
|
-
case 4:
|
|
171
155
|
ssrScripts = chunkSet.ssrScripts, cssChunk = chunkSet.cssChunk, jsChunk = chunkSet.jsChunk;
|
|
172
156
|
return [
|
|
173
157
|
4,
|
|
@@ -179,7 +163,7 @@ function _generateHtml() {
|
|
|
179
163
|
createReplaceHelemt(helmetData)
|
|
180
164
|
].concat(_to_consumable_array(htmlModifiers)))
|
|
181
165
|
];
|
|
182
|
-
case
|
|
166
|
+
case 2:
|
|
183
167
|
finalHtml = _state.sent();
|
|
184
168
|
return [
|
|
185
169
|
2,
|
|
@@ -5,6 +5,7 @@ import { _ as _class_private_field_set } from "@swc/helpers/_/_class_private_fie
|
|
|
5
5
|
import { _ as _class_private_method_get } from "@swc/helpers/_/_class_private_method_get";
|
|
6
6
|
import { _ as _class_private_method_init } from "@swc/helpers/_/_class_private_method_init";
|
|
7
7
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
8
|
+
import { _ as _type_of } from "@swc/helpers/_/_type_of";
|
|
8
9
|
import { serializeJson } from "@modern-js/runtime-utils/node";
|
|
9
10
|
import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../../constants";
|
|
10
11
|
import { attributesToString, serializeErrors } from "../utils";
|
|
@@ -37,7 +38,7 @@ var SSRDataCollector = /* @__PURE__ */ function() {
|
|
|
37
38
|
function getSSRData() {
|
|
38
39
|
var _$_class_private_field_get = _class_private_field_get(this, _options), prefetchData = _$_class_private_field_get.prefetchData, chunkSet = _$_class_private_field_get.chunkSet, ssrConfig = _$_class_private_field_get.ssrConfig, ssrContext = _$_class_private_field_get.ssrContext;
|
|
39
40
|
var reporter = ssrContext.reporter, request = ssrContext.request;
|
|
40
|
-
var headers = typeof ssrConfig === "object" && ssrConfig.unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(function(param) {
|
|
41
|
+
var headers = (typeof ssrConfig === "undefined" ? "undefined" : _type_of(ssrConfig)) === "object" && ssrConfig.unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(function(param) {
|
|
41
42
|
var _param = _sliced_to_array(param, 2), key = _param[0], _ = _param[1];
|
|
42
43
|
var _ssrConfig_unsafeHeaders_map, _ssrConfig_unsafeHeaders;
|
|
43
44
|
return (_ssrConfig_unsafeHeaders = ssrConfig.unsafeHeaders) === null || _ssrConfig_unsafeHeaders === void 0 ? void 0 : (_ssrConfig_unsafeHeaders_map = _ssrConfig_unsafeHeaders.map(function(header) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
|
|
2
|
+
import { _ as _type_of } from "@swc/helpers/_/_type_of";
|
|
2
3
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
3
4
|
import path from "path";
|
|
4
5
|
import { fs, filterRoutesForServer, filterRoutesLoader, getEntryOptions, isRouterV5, isSSGEntry, isUseSSRBundle, logger } from "@modern-js/utils";
|
|
@@ -103,7 +104,7 @@ var generateCode = function() {
|
|
|
103
104
|
ssr = getEntryOptions(entryName, isMainEntry, _$config.server.ssr, _$config.server.ssrByEntries, packageName);
|
|
104
105
|
useSSG = isSSGEntry(_$config, entryName, entrypoints);
|
|
105
106
|
if (ssr) {
|
|
106
|
-
mode = typeof ssr === "object" ? ssr.mode || "string" : "string";
|
|
107
|
+
mode = (typeof ssr === "undefined" ? "undefined" : _type_of(ssr)) === "object" ? ssr.mode || "string" : "string";
|
|
107
108
|
}
|
|
108
109
|
if (mode === "stream") {
|
|
109
110
|
hasPageRoute = routes.some(function(route2) {
|
|
@@ -222,7 +223,7 @@ var generateCode = function() {
|
|
|
222
223
|
hookRunners = api.useHookRunners();
|
|
223
224
|
isV5 = isRouterV5(config);
|
|
224
225
|
getRoutes = isV5 ? getClientRoutesLegacy : getClientRoutes;
|
|
225
|
-
oldVersion =
|
|
226
|
+
oldVersion = _type_of(config === null || config === void 0 ? void 0 : config.runtime.router) === "object" ? Boolean((config === null || config === void 0 ? void 0 : config.runtime.router).oldVersion) : false;
|
|
226
227
|
return [
|
|
227
228
|
4,
|
|
228
229
|
Promise.all(entrypoints.map(generateEntryCode))
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
2
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
3
|
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
5
|
import { merge } from "@modern-js/runtime-utils/merge";
|
|
6
6
|
import { parsedJSONFromElement } from "@modern-js/runtime-utils/parsed";
|
|
7
7
|
import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
|
|
@@ -118,12 +118,26 @@ var routerPlugin = function() {
|
|
|
118
118
|
getBlockNavState
|
|
119
119
|
]);
|
|
120
120
|
};
|
|
121
|
+
var Null = function() {
|
|
122
|
+
return null;
|
|
123
|
+
};
|
|
121
124
|
return function(props) {
|
|
122
125
|
beforeCreateRouter = false;
|
|
123
126
|
var router = useCreateRouter(props);
|
|
124
|
-
return
|
|
125
|
-
router
|
|
126
|
-
|
|
127
|
+
return (
|
|
128
|
+
// To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
|
|
129
|
+
// According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
|
|
130
|
+
// To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
|
|
131
|
+
/* @__PURE__ */ _jsxs(_Fragment, {
|
|
132
|
+
children: [
|
|
133
|
+
/* @__PURE__ */ _jsx(RouterProvider, {
|
|
134
|
+
router
|
|
135
|
+
}),
|
|
136
|
+
/* @__PURE__ */ _jsx(Null, {}),
|
|
137
|
+
/* @__PURE__ */ _jsx(Null, {})
|
|
138
|
+
]
|
|
139
|
+
})
|
|
140
|
+
);
|
|
127
141
|
};
|
|
128
142
|
};
|
|
129
143
|
return getRouteApp();
|
|
@@ -23,7 +23,7 @@ const ssrBuilderPlugin = (modernAPI) => ({
|
|
|
23
23
|
name: "@modern-js/builder-plugin-ssr",
|
|
24
24
|
setup(api) {
|
|
25
25
|
api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig }) => {
|
|
26
|
-
const isServerEnvironment = config.output.target === "node" || name === "
|
|
26
|
+
const isServerEnvironment = config.output.target === "node" || name === "workerSSR";
|
|
27
27
|
const userConfig = modernAPI.useResolvedConfigContext();
|
|
28
28
|
const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
|
|
29
29
|
return mergeEnvironmentConfig(config, {
|
|
@@ -69,26 +69,26 @@ const renderString = async (request, serverRoot, options) => {
|
|
|
69
69
|
});
|
|
70
70
|
};
|
|
71
71
|
async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, { onError, onTiming }) {
|
|
72
|
-
const end = time();
|
|
73
72
|
let html = "";
|
|
74
73
|
let helmetData;
|
|
74
|
+
const finalApp = collectors.reduce((pre, creator) => {
|
|
75
|
+
var _creator_collect;
|
|
76
|
+
return ((_creator_collect = creator.collect) === null || _creator_collect === void 0 ? void 0 : _creator_collect.call(creator, pre)) || pre;
|
|
77
|
+
}, App);
|
|
75
78
|
try {
|
|
76
|
-
const
|
|
77
|
-
var _creator_collect;
|
|
78
|
-
return ((_creator_collect = creator.collect) === null || _creator_collect === void 0 ? void 0 : _creator_collect.call(creator, pre)) || pre;
|
|
79
|
-
}, App);
|
|
79
|
+
const end = time();
|
|
80
80
|
if (chunkSet.renderLevel >= RenderLevel.SERVER_PREFETCH) {
|
|
81
81
|
html = ReactDomServer.renderToString(finalApp);
|
|
82
82
|
chunkSet.renderLevel = RenderLevel.SERVER_RENDER;
|
|
83
83
|
}
|
|
84
84
|
helmetData = ReactHelmet.renderStatic();
|
|
85
|
-
await Promise.all(collectors.map((component) => component.effect()));
|
|
86
85
|
const cost = end();
|
|
87
86
|
onTiming(SSRTimings.RENDER_HTML, cost);
|
|
88
87
|
} catch (e) {
|
|
89
88
|
chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
|
|
90
89
|
onError(SSRErrors.RENDER_HTML, e);
|
|
91
90
|
}
|
|
91
|
+
await Promise.all(collectors.map((component) => component.effect()));
|
|
92
92
|
const { ssrScripts, cssChunk, jsChunk } = chunkSet;
|
|
93
93
|
const finalHtml = await buildHtml(htmlTemplate, [
|
|
94
94
|
createReplaceHtml(html),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { merge } from "@modern-js/runtime-utils/merge";
|
|
3
3
|
import { parsedJSONFromElement } from "@modern-js/runtime-utils/parsed";
|
|
4
4
|
import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
|
|
@@ -109,12 +109,24 @@ const routerPlugin = (userConfig = {}) => {
|
|
|
109
109
|
getBlockNavState
|
|
110
110
|
]);
|
|
111
111
|
};
|
|
112
|
+
const Null = () => null;
|
|
112
113
|
return (props) => {
|
|
113
114
|
beforeCreateRouter = false;
|
|
114
115
|
const router = useCreateRouter(props);
|
|
115
|
-
return
|
|
116
|
-
router
|
|
117
|
-
|
|
116
|
+
return (
|
|
117
|
+
// To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
|
|
118
|
+
// According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
|
|
119
|
+
// To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
|
|
120
|
+
/* @__PURE__ */ _jsxs(_Fragment, {
|
|
121
|
+
children: [
|
|
122
|
+
/* @__PURE__ */ _jsx(RouterProvider, {
|
|
123
|
+
router
|
|
124
|
+
}),
|
|
125
|
+
/* @__PURE__ */ _jsx(Null, {}),
|
|
126
|
+
/* @__PURE__ */ _jsx(Null, {})
|
|
127
|
+
]
|
|
128
|
+
})
|
|
129
|
+
);
|
|
118
130
|
};
|
|
119
131
|
};
|
|
120
132
|
return getRouteApp();
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "2.
|
|
18
|
+
"version": "2.60.0",
|
|
19
19
|
"engines": {
|
|
20
20
|
"node": ">=14.17.6"
|
|
21
21
|
},
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
"@modern-js-reduck/plugin-immutable": "^1.1.10",
|
|
187
187
|
"@modern-js-reduck/react": "^1.1.10",
|
|
188
188
|
"@modern-js-reduck/store": "^1.1.10",
|
|
189
|
-
"@swc/helpers": "0.5.
|
|
189
|
+
"@swc/helpers": "0.5.13",
|
|
190
190
|
"@types/loadable__component": "^5.13.4",
|
|
191
191
|
"@types/react-helmet": "^6.1.2",
|
|
192
192
|
"@types/styled-components": "^5.1.14",
|
|
@@ -199,11 +199,11 @@
|
|
|
199
199
|
"react-is": "^18",
|
|
200
200
|
"react-side-effect": "^2.1.1",
|
|
201
201
|
"styled-components": "^5.3.1",
|
|
202
|
-
"@modern-js/plugin": "2.
|
|
203
|
-
"@modern-js/
|
|
204
|
-
"@modern-js/
|
|
205
|
-
"@modern-js/utils": "2.
|
|
206
|
-
"@modern-js/
|
|
202
|
+
"@modern-js/plugin": "2.60.0",
|
|
203
|
+
"@modern-js/runtime-utils": "2.60.0",
|
|
204
|
+
"@modern-js/types": "2.60.0",
|
|
205
|
+
"@modern-js/utils": "2.60.0",
|
|
206
|
+
"@modern-js/plugin-data-loader": "2.60.0"
|
|
207
207
|
},
|
|
208
208
|
"peerDependencies": {
|
|
209
209
|
"react": ">=17",
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
},
|
|
212
212
|
"devDependencies": {
|
|
213
213
|
"@remix-run/web-fetch": "^4.1.3",
|
|
214
|
-
"@rsbuild/core": "1.0.
|
|
214
|
+
"@rsbuild/core": "1.0.2",
|
|
215
215
|
"@testing-library/react": "^13.4.0",
|
|
216
216
|
"@types/cookie": "0.5.1",
|
|
217
217
|
"@types/invariant": "^2.2.30",
|
|
@@ -226,10 +226,10 @@
|
|
|
226
226
|
"ts-jest": "^29.1.0",
|
|
227
227
|
"typescript": "^5",
|
|
228
228
|
"webpack": "^5.94.0",
|
|
229
|
-
"@modern-js/core": "2.
|
|
230
|
-
"@
|
|
231
|
-
"@scripts/
|
|
232
|
-
"@
|
|
229
|
+
"@modern-js/core": "2.60.0",
|
|
230
|
+
"@modern-js/app-tools": "2.60.0",
|
|
231
|
+
"@scripts/build": "2.60.0",
|
|
232
|
+
"@scripts/jest-config": "2.60.0"
|
|
233
233
|
},
|
|
234
234
|
"sideEffects": false,
|
|
235
235
|
"publishConfig": {
|