@modern-js/runtime 2.49.4 → 2.51.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/router/runtime/plugin.node.js +2 -1
- package/dist/cjs/ssr/serverRender/renderToStream/bulidTemplate.before.js +7 -4
- package/dist/cjs/ssr/serverRender/renderToStream/renderToPipe.js +18 -6
- package/dist/cjs/ssr/serverRender/renderToStream/template.js +2 -2
- package/dist/esm/router/runtime/plugin.node.js +5 -5
- package/dist/esm/ssr/serverRender/renderToStream/bulidTemplate.before.js +10 -5
- package/dist/esm/ssr/serverRender/renderToStream/renderToPipe.js +17 -6
- package/dist/esm/ssr/serverRender/renderToStream/template.js +3 -3
- package/dist/esm-node/router/runtime/plugin.node.js +3 -2
- package/dist/esm-node/ssr/serverRender/renderToStream/bulidTemplate.before.js +7 -4
- package/dist/esm-node/ssr/serverRender/renderToStream/renderToPipe.js +18 -6
- package/dist/esm-node/ssr/serverRender/renderToStream/template.js +2 -2
- package/dist/types/document/Body.d.ts +2 -4
- package/dist/types/document/Root.d.ts +2 -3
- package/dist/types/document/Style.d.ts +2 -2
- package/dist/types/exports/server.d.ts +1 -1
- package/dist/types/router/runtime/types.d.ts +2 -2
- package/dist/types/ssr/serverRender/renderToStream/bulidTemplate.before.d.ts +1 -1
- package/dist/types/ssr/serverRender/renderToStream/template.d.ts +1 -1
- package/package.json +10 -10
|
@@ -80,6 +80,7 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
|
|
|
80
80
|
setup: (api) => {
|
|
81
81
|
return {
|
|
82
82
|
async init({ context }, next) {
|
|
83
|
+
var _context_ssrContext;
|
|
83
84
|
if (!routesConfig && !createRoutes) {
|
|
84
85
|
return next({
|
|
85
86
|
context
|
|
@@ -89,7 +90,7 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
|
|
|
89
90
|
const baseUrl = originalBaseUrl || request.baseUrl;
|
|
90
91
|
const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
|
|
91
92
|
const { reporter, serverTiming } = context.ssrContext;
|
|
92
|
-
const requestContext = (0, import_node.createRequestContext)();
|
|
93
|
+
const requestContext = (0, import_node.createRequestContext)((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.loaderContext);
|
|
93
94
|
requestContext.set(import_node.reporterCtx, reporter);
|
|
94
95
|
let routes = createRoutes ? createRoutes() : (0, import_router2.createRoutesFromElements)((0, import_utils.renderRoutes)({
|
|
95
96
|
routesConfig,
|
|
@@ -54,18 +54,21 @@ const checkIsInline = (chunk, enableInline) => {
|
|
|
54
54
|
return false;
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
-
async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
|
|
57
|
+
async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
|
|
58
58
|
const helmetData = import_react_helmet.default.renderStatic();
|
|
59
59
|
const callbacks = [
|
|
60
60
|
(headTemplate) => {
|
|
61
61
|
return helmetData ? (0, import_helmet.default)(headTemplate, helmetData) : headTemplate;
|
|
62
62
|
},
|
|
63
63
|
// @TODO: prefetch scripts of lazy component
|
|
64
|
-
injectCss
|
|
64
|
+
(template) => injectCss(template, styledComponentsStyleTags)
|
|
65
65
|
];
|
|
66
66
|
return (0, import_buildTemplate.buildTemplate)(beforeAppTemplate, callbacks);
|
|
67
|
-
async function injectCss(template) {
|
|
68
|
-
|
|
67
|
+
async function injectCss(template, styledComponentsStyleTags2) {
|
|
68
|
+
let css = await getCssChunks();
|
|
69
|
+
if (styledComponentsStyleTags2) {
|
|
70
|
+
css += styledComponentsStyleTags2;
|
|
71
|
+
}
|
|
69
72
|
return (0, import_utils.safeReplace)(template, import_constants.CHUNK_CSS_PLACEHOLDER, css);
|
|
70
73
|
async function getCssChunks() {
|
|
71
74
|
const { routeManifest, routerContext, routes } = context;
|
|
@@ -22,6 +22,7 @@ __export(renderToPipe_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(renderToPipe_exports);
|
|
24
24
|
var import_stream = require("stream");
|
|
25
|
+
var import_styled_components = require("styled-components");
|
|
25
26
|
var import_types = require("../types");
|
|
26
27
|
var import_common = require("../../../common");
|
|
27
28
|
var import_template = require("./template");
|
|
@@ -33,7 +34,9 @@ var ShellChunkStatus;
|
|
|
33
34
|
function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
34
35
|
var _context_ssrContext;
|
|
35
36
|
let shellChunkStatus = 0;
|
|
36
|
-
const
|
|
37
|
+
const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
|
|
38
|
+
const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
|
|
39
|
+
const sheet = new import_styled_components.ServerStyleSheet();
|
|
37
40
|
const { ssrContext } = context;
|
|
38
41
|
const chunkVec = [];
|
|
39
42
|
const forUserPipe = new Promise((resolve) => {
|
|
@@ -42,13 +45,16 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
42
45
|
({ renderToPipeableStream } = require("react-dom/server"));
|
|
43
46
|
} catch (e) {
|
|
44
47
|
}
|
|
45
|
-
const
|
|
48
|
+
const root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
|
|
49
|
+
let renderLevel = import_types.RenderLevel.SERVER_RENDER;
|
|
50
|
+
const { pipe } = renderToPipeableStream(root, {
|
|
46
51
|
...options,
|
|
47
52
|
nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
|
|
48
53
|
[onReady]() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
54
|
+
const styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
|
|
55
|
+
(0, import_template.getTemplates)(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(({ shellAfter, shellBefore }) => {
|
|
56
|
+
var _options_onReady;
|
|
57
|
+
options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
|
|
52
58
|
const injectableTransform = new import_stream.Transform({
|
|
53
59
|
transform(chunk, _encoding, callback) {
|
|
54
60
|
try {
|
|
@@ -78,12 +84,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
78
84
|
});
|
|
79
85
|
},
|
|
80
86
|
onShellError(error) {
|
|
81
|
-
|
|
87
|
+
renderLevel = import_types.RenderLevel.CLIENT_RENDER;
|
|
88
|
+
(0, import_template.getTemplates)(context, renderLevel, pluginConfig).then(({ shellAfter, shellBefore }) => {
|
|
82
89
|
var _options_onShellError;
|
|
83
90
|
const fallbackHtml = `${shellBefore}${shellAfter}`;
|
|
84
91
|
resolve(fallbackHtml);
|
|
85
92
|
options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
|
|
86
93
|
});
|
|
94
|
+
},
|
|
95
|
+
onError(error) {
|
|
96
|
+
var _options_onError;
|
|
97
|
+
renderLevel = import_types.RenderLevel.CLIENT_RENDER;
|
|
98
|
+
options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
|
|
87
99
|
}
|
|
88
100
|
});
|
|
89
101
|
});
|
|
@@ -24,10 +24,10 @@ module.exports = __toCommonJS(template_exports);
|
|
|
24
24
|
var import_buildTemplate = require("./buildTemplate.after");
|
|
25
25
|
var import_bulidTemplate = require("./bulidTemplate.before");
|
|
26
26
|
const HTML_SEPARATOR = "<!--<?- html ?>-->";
|
|
27
|
-
const getTemplates = async (context, renderLevel, pluginConfig) => {
|
|
27
|
+
const getTemplates = async (context, renderLevel, pluginConfig, styledComponentsStyleTags) => {
|
|
28
28
|
const { ssrContext } = context;
|
|
29
29
|
const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
|
|
30
|
-
const builtBeforeTemplate = await (0, import_bulidTemplate.buildShellBeforeTemplate)(beforeAppTemplate, context, pluginConfig);
|
|
30
|
+
const builtBeforeTemplate = await (0, import_bulidTemplate.buildShellBeforeTemplate)(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags);
|
|
31
31
|
const builtAfterTemplate = await (0, import_buildTemplate.buildShellAfterTemplate)(afterAppHtmlTemplate, {
|
|
32
32
|
context,
|
|
33
33
|
renderLevel
|
|
@@ -10,7 +10,7 @@ import { createStaticHandler } from "@modern-js/runtime-utils/remix-router";
|
|
|
10
10
|
import { createStaticRouter, StaticRouterProvider } from "@modern-js/runtime-utils/node/router";
|
|
11
11
|
import hoistNonReactStatics from "hoist-non-react-statics";
|
|
12
12
|
import { createRoutesFromElements } from "@modern-js/runtime-utils/router";
|
|
13
|
-
import {
|
|
13
|
+
import { reporterCtx, createRequestContext } from "@modern-js/runtime-utils/node";
|
|
14
14
|
import { time } from "@modern-js/runtime-utils/time";
|
|
15
15
|
import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
|
|
16
16
|
import { RuntimeReactContext } from "../../core";
|
|
@@ -88,7 +88,7 @@ var routerPlugin = function(param) {
|
|
|
88
88
|
init: function init(param2, next) {
|
|
89
89
|
var context = param2.context;
|
|
90
90
|
return _async_to_generator(function() {
|
|
91
|
-
var _context_ssrContext, request, ssrMode, nonce, baseUrl, _basename,
|
|
91
|
+
var _context_ssrContext, _context_ssrContext1, request, ssrMode, nonce, baseUrl, _basename, _context_ssrContext2, reporter, serverTiming, requestContext, routes, runner, query, remixRequest, end, routerContext, cost, router;
|
|
92
92
|
return _ts_generator(this, function(_state) {
|
|
93
93
|
switch (_state.label) {
|
|
94
94
|
case 0:
|
|
@@ -100,11 +100,11 @@ var routerPlugin = function(param) {
|
|
|
100
100
|
})
|
|
101
101
|
];
|
|
102
102
|
}
|
|
103
|
-
|
|
103
|
+
_context_ssrContext1 = context.ssrContext, request = _context_ssrContext1.request, ssrMode = _context_ssrContext1.mode, nonce = _context_ssrContext1.nonce;
|
|
104
104
|
baseUrl = originalBaseUrl || request.baseUrl;
|
|
105
105
|
_basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
|
|
106
|
-
|
|
107
|
-
requestContext = createRequestContext();
|
|
106
|
+
_context_ssrContext2 = context.ssrContext, reporter = _context_ssrContext2.reporter, serverTiming = _context_ssrContext2.serverTiming;
|
|
107
|
+
requestContext = createRequestContext((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.loaderContext);
|
|
108
108
|
requestContext.set(reporterCtx, reporter);
|
|
109
109
|
routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
|
|
110
110
|
routesConfig,
|
|
@@ -49,17 +49,17 @@ var checkIsInline = function(chunk, enableInline) {
|
|
|
49
49
|
return false;
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
|
-
function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
|
|
52
|
+
function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
|
|
53
53
|
return _buildShellBeforeTemplate.apply(this, arguments);
|
|
54
54
|
}
|
|
55
55
|
function _buildShellBeforeTemplate() {
|
|
56
|
-
_buildShellBeforeTemplate = _async_to_generator(function(beforeAppTemplate, context, pluginConfig) {
|
|
56
|
+
_buildShellBeforeTemplate = _async_to_generator(function(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
|
|
57
57
|
var helmetData, callbacks;
|
|
58
|
-
function injectCss(template) {
|
|
58
|
+
function injectCss(template, styledComponentsStyleTags2) {
|
|
59
59
|
return _injectCss.apply(this, arguments);
|
|
60
60
|
}
|
|
61
61
|
function _injectCss() {
|
|
62
|
-
_injectCss = _async_to_generator(function(template) {
|
|
62
|
+
_injectCss = _async_to_generator(function(template, styledComponentsStyleTags2) {
|
|
63
63
|
var css;
|
|
64
64
|
function getCssChunks() {
|
|
65
65
|
return _getCssChunks.apply(this, arguments);
|
|
@@ -150,6 +150,9 @@ function _buildShellBeforeTemplate() {
|
|
|
150
150
|
];
|
|
151
151
|
case 1:
|
|
152
152
|
css = _state.sent();
|
|
153
|
+
if (styledComponentsStyleTags2) {
|
|
154
|
+
css += styledComponentsStyleTags2;
|
|
155
|
+
}
|
|
153
156
|
return [
|
|
154
157
|
2,
|
|
155
158
|
safeReplace(template, CHUNK_CSS_PLACEHOLDER, css)
|
|
@@ -166,7 +169,9 @@ function _buildShellBeforeTemplate() {
|
|
|
166
169
|
return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
|
|
167
170
|
},
|
|
168
171
|
// @TODO: prefetch scripts of lazy component
|
|
169
|
-
|
|
172
|
+
function(template) {
|
|
173
|
+
return injectCss(template, styledComponentsStyleTags);
|
|
174
|
+
}
|
|
170
175
|
];
|
|
171
176
|
return [
|
|
172
177
|
2,
|
|
@@ -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 { Transform } from "stream";
|
|
6
|
+
import { ServerStyleSheet } from "styled-components";
|
|
6
7
|
import { RenderLevel } from "../types";
|
|
7
8
|
import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
|
|
8
9
|
import { getTemplates } from "./template";
|
|
@@ -14,7 +15,9 @@ var ShellChunkStatus;
|
|
|
14
15
|
function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
15
16
|
var _context_ssrContext;
|
|
16
17
|
var shellChunkStatus = 0;
|
|
17
|
-
var
|
|
18
|
+
var forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
|
|
19
|
+
var onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
|
|
20
|
+
var sheet = new ServerStyleSheet();
|
|
18
21
|
var ssrContext = context.ssrContext;
|
|
19
22
|
var chunkVec = [];
|
|
20
23
|
var forUserPipe = new Promise(function(resolve) {
|
|
@@ -23,14 +26,17 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
23
26
|
renderToPipeableStream = require("react-dom/server").renderToPipeableStream;
|
|
24
27
|
} catch (e) {
|
|
25
28
|
}
|
|
29
|
+
var root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
|
|
30
|
+
var renderLevel = RenderLevel.SERVER_RENDER;
|
|
26
31
|
var _obj;
|
|
27
|
-
var pipe = renderToPipeableStream(
|
|
32
|
+
var pipe = renderToPipeableStream(root, _object_spread_props(_object_spread({}, options), (_obj = {
|
|
28
33
|
nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce
|
|
29
34
|
}, _define_property(_obj, onReady, function() {
|
|
30
|
-
|
|
35
|
+
var styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
|
|
36
|
+
getTemplates(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(function(param) {
|
|
31
37
|
var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
|
|
32
|
-
var
|
|
33
|
-
options === null || options === void 0 ? void 0 : (
|
|
38
|
+
var _options_onReady;
|
|
39
|
+
options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
|
|
34
40
|
var injectableTransform = new Transform({
|
|
35
41
|
transform: function transform(chunk, _encoding, callback) {
|
|
36
42
|
try {
|
|
@@ -59,13 +65,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
59
65
|
resolve(injectableTransform);
|
|
60
66
|
});
|
|
61
67
|
}), _define_property(_obj, "onShellError", function onShellError(error) {
|
|
62
|
-
|
|
68
|
+
renderLevel = RenderLevel.CLIENT_RENDER;
|
|
69
|
+
getTemplates(context, renderLevel, pluginConfig).then(function(param) {
|
|
63
70
|
var shellAfter = param.shellAfter, shellBefore = param.shellBefore;
|
|
64
71
|
var _options_onShellError;
|
|
65
72
|
var fallbackHtml = "".concat(shellBefore).concat(shellAfter);
|
|
66
73
|
resolve(fallbackHtml);
|
|
67
74
|
options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
|
|
68
75
|
});
|
|
76
|
+
}), _define_property(_obj, "onError", function onError(error) {
|
|
77
|
+
var _options_onError;
|
|
78
|
+
renderLevel = RenderLevel.CLIENT_RENDER;
|
|
79
|
+
options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
|
|
69
80
|
}), _obj))).pipe;
|
|
70
81
|
});
|
|
71
82
|
return forUserPipe;
|
|
@@ -5,7 +5,7 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
|
|
|
5
5
|
import { buildShellBeforeTemplate } from "./bulidTemplate.before";
|
|
6
6
|
var HTML_SEPARATOR = "<!--<?- html ?>-->";
|
|
7
7
|
var getTemplates = function() {
|
|
8
|
-
var _ref = _async_to_generator(function(context, renderLevel, pluginConfig) {
|
|
8
|
+
var _ref = _async_to_generator(function(context, renderLevel, pluginConfig, styledComponentsStyleTags) {
|
|
9
9
|
var ssrContext, _ref2, tmp, beforeAppTemplate, tmp1, afterAppHtmlTemplate, builtBeforeTemplate, builtAfterTemplate;
|
|
10
10
|
return _ts_generator(this, function(_state) {
|
|
11
11
|
switch (_state.label) {
|
|
@@ -14,7 +14,7 @@ var getTemplates = function() {
|
|
|
14
14
|
_ref2 = _sliced_to_array(ssrContext.template.split(HTML_SEPARATOR) || [], 2), tmp = _ref2[0], beforeAppTemplate = tmp === void 0 ? "" : tmp, tmp1 = _ref2[1], afterAppHtmlTemplate = tmp1 === void 0 ? "" : tmp1;
|
|
15
15
|
return [
|
|
16
16
|
4,
|
|
17
|
-
buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig)
|
|
17
|
+
buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags)
|
|
18
18
|
];
|
|
19
19
|
case 1:
|
|
20
20
|
builtBeforeTemplate = _state.sent();
|
|
@@ -37,7 +37,7 @@ var getTemplates = function() {
|
|
|
37
37
|
}
|
|
38
38
|
});
|
|
39
39
|
});
|
|
40
|
-
return function getTemplates2(context, renderLevel, pluginConfig) {
|
|
40
|
+
return function getTemplates2(context, renderLevel, pluginConfig, styledComponentsStyleTags) {
|
|
41
41
|
return _ref.apply(this, arguments);
|
|
42
42
|
};
|
|
43
43
|
}();
|
|
@@ -4,7 +4,7 @@ import { createStaticHandler } from "@modern-js/runtime-utils/remix-router";
|
|
|
4
4
|
import { createStaticRouter, StaticRouterProvider } from "@modern-js/runtime-utils/node/router";
|
|
5
5
|
import hoistNonReactStatics from "hoist-non-react-statics";
|
|
6
6
|
import { createRoutesFromElements } from "@modern-js/runtime-utils/router";
|
|
7
|
-
import {
|
|
7
|
+
import { reporterCtx, createRequestContext } from "@modern-js/runtime-utils/node";
|
|
8
8
|
import { time } from "@modern-js/runtime-utils/time";
|
|
9
9
|
import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
|
|
10
10
|
import { RuntimeReactContext } from "../../core";
|
|
@@ -45,6 +45,7 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
|
|
|
45
45
|
setup: (api) => {
|
|
46
46
|
return {
|
|
47
47
|
async init({ context }, next) {
|
|
48
|
+
var _context_ssrContext;
|
|
48
49
|
if (!routesConfig && !createRoutes) {
|
|
49
50
|
return next({
|
|
50
51
|
context
|
|
@@ -54,7 +55,7 @@ const routerPlugin = ({ basename = "", originalBaseUrl = "", routesConfig, creat
|
|
|
54
55
|
const baseUrl = originalBaseUrl || request.baseUrl;
|
|
55
56
|
const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
|
|
56
57
|
const { reporter, serverTiming } = context.ssrContext;
|
|
57
|
-
const requestContext = createRequestContext();
|
|
58
|
+
const requestContext = createRequestContext((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.loaderContext);
|
|
58
59
|
requestContext.set(reporterCtx, reporter);
|
|
59
60
|
let routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
|
|
60
61
|
routesConfig,
|
|
@@ -21,18 +21,21 @@ const checkIsInline = (chunk, enableInline) => {
|
|
|
21
21
|
return false;
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig) {
|
|
24
|
+
async function buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags) {
|
|
25
25
|
const helmetData = ReactHelmet.renderStatic();
|
|
26
26
|
const callbacks = [
|
|
27
27
|
(headTemplate) => {
|
|
28
28
|
return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
|
|
29
29
|
},
|
|
30
30
|
// @TODO: prefetch scripts of lazy component
|
|
31
|
-
injectCss
|
|
31
|
+
(template) => injectCss(template, styledComponentsStyleTags)
|
|
32
32
|
];
|
|
33
33
|
return buildTemplate(beforeAppTemplate, callbacks);
|
|
34
|
-
async function injectCss(template) {
|
|
35
|
-
|
|
34
|
+
async function injectCss(template, styledComponentsStyleTags2) {
|
|
35
|
+
let css = await getCssChunks();
|
|
36
|
+
if (styledComponentsStyleTags2) {
|
|
37
|
+
css += styledComponentsStyleTags2;
|
|
38
|
+
}
|
|
36
39
|
return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
|
|
37
40
|
async function getCssChunks() {
|
|
38
41
|
const { routeManifest, routerContext, routes } = context;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Transform } from "stream";
|
|
2
|
+
import { ServerStyleSheet } from "styled-components";
|
|
2
3
|
import { RenderLevel } from "../types";
|
|
3
4
|
import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
|
|
4
5
|
import { getTemplates } from "./template";
|
|
@@ -10,7 +11,9 @@ var ShellChunkStatus;
|
|
|
10
11
|
function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
11
12
|
var _context_ssrContext;
|
|
12
13
|
let shellChunkStatus = 0;
|
|
13
|
-
const
|
|
14
|
+
const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
|
|
15
|
+
const onReady = ((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.isSpider) || forceStream2String ? "onAllReady" : "onShellReady";
|
|
16
|
+
const sheet = new ServerStyleSheet();
|
|
14
17
|
const { ssrContext } = context;
|
|
15
18
|
const chunkVec = [];
|
|
16
19
|
const forUserPipe = new Promise((resolve) => {
|
|
@@ -19,13 +22,16 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
19
22
|
({ renderToPipeableStream } = require("react-dom/server"));
|
|
20
23
|
} catch (e) {
|
|
21
24
|
}
|
|
22
|
-
const
|
|
25
|
+
const root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
|
|
26
|
+
let renderLevel = RenderLevel.SERVER_RENDER;
|
|
27
|
+
const { pipe } = renderToPipeableStream(root, {
|
|
23
28
|
...options,
|
|
24
29
|
nonce: ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.nonce,
|
|
25
30
|
[onReady]() {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
31
|
+
const styledComponentsStyleTags = forceStream2String ? sheet.getStyleTags() : "";
|
|
32
|
+
getTemplates(context, renderLevel, pluginConfig, styledComponentsStyleTags).then(({ shellAfter, shellBefore }) => {
|
|
33
|
+
var _options_onReady;
|
|
34
|
+
options === null || options === void 0 ? void 0 : (_options_onReady = options[onReady]) === null || _options_onReady === void 0 ? void 0 : _options_onReady.call(options);
|
|
29
35
|
const injectableTransform = new Transform({
|
|
30
36
|
transform(chunk, _encoding, callback) {
|
|
31
37
|
try {
|
|
@@ -55,12 +61,18 @@ function renderToPipe(rootElement, context, pluginConfig, options) {
|
|
|
55
61
|
});
|
|
56
62
|
},
|
|
57
63
|
onShellError(error) {
|
|
58
|
-
|
|
64
|
+
renderLevel = RenderLevel.CLIENT_RENDER;
|
|
65
|
+
getTemplates(context, renderLevel, pluginConfig).then(({ shellAfter, shellBefore }) => {
|
|
59
66
|
var _options_onShellError;
|
|
60
67
|
const fallbackHtml = `${shellBefore}${shellAfter}`;
|
|
61
68
|
resolve(fallbackHtml);
|
|
62
69
|
options === null || options === void 0 ? void 0 : (_options_onShellError = options.onShellError) === null || _options_onShellError === void 0 ? void 0 : _options_onShellError.call(options, error);
|
|
63
70
|
});
|
|
71
|
+
},
|
|
72
|
+
onError(error) {
|
|
73
|
+
var _options_onError;
|
|
74
|
+
renderLevel = RenderLevel.CLIENT_RENDER;
|
|
75
|
+
options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
|
|
64
76
|
}
|
|
65
77
|
});
|
|
66
78
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { buildShellAfterTemplate } from "./buildTemplate.after";
|
|
2
2
|
import { buildShellBeforeTemplate } from "./bulidTemplate.before";
|
|
3
3
|
const HTML_SEPARATOR = "<!--<?- html ?>-->";
|
|
4
|
-
const getTemplates = async (context, renderLevel, pluginConfig) => {
|
|
4
|
+
const getTemplates = async (context, renderLevel, pluginConfig, styledComponentsStyleTags) => {
|
|
5
5
|
const { ssrContext } = context;
|
|
6
6
|
const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
|
|
7
|
-
const builtBeforeTemplate = await buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig);
|
|
7
|
+
const builtBeforeTemplate = await buildShellBeforeTemplate(beforeAppTemplate, context, pluginConfig, styledComponentsStyleTags);
|
|
8
8
|
const builtAfterTemplate = await buildShellAfterTemplate(afterAppHtmlTemplate, {
|
|
9
9
|
context,
|
|
10
10
|
renderLevel
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export declare function Root(props: {
|
|
3
|
-
children?: any;
|
|
4
3
|
rootId?: string;
|
|
5
|
-
}): JSX.Element;
|
|
4
|
+
} & React.DOMAttributes<HTMLDivElement>): JSX.Element;
|
|
6
5
|
export declare function DefaultRoot(props: {
|
|
7
6
|
children?: any;
|
|
8
7
|
}): JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AfterMatchContext, AfterRenderContext, MiddlewareContext, NextFunction } from '@modern-js/types';
|
|
2
|
-
export type { Container, CacheControl, CacheOptionProvider, CacheOption, } from '@modern-js/types';
|
|
2
|
+
export type { Container, CacheControl, CacheOptionProvider, CacheOption, UnstableMiddlewareContext, UnstableMiddleware, UnstableNext, } from '@modern-js/types';
|
|
3
3
|
export declare const hook: (attacher: ({ addMiddleware, afterMatch, afterRender, }: {
|
|
4
4
|
addMiddleware: (mid: Middleware) => void;
|
|
5
5
|
afterRender: (hook: AfterRenderHook) => void;
|
|
@@ -56,7 +56,7 @@ interface DataFunctionArgs<D = any> {
|
|
|
56
56
|
params: Params;
|
|
57
57
|
context?: D;
|
|
58
58
|
}
|
|
59
|
-
export type LoaderFunctionArgs = DataFunctionArgs<RequestContext
|
|
59
|
+
export type LoaderFunctionArgs<P extends Record<string, unknown> = Record<string, unknown>> = DataFunctionArgs<RequestContext<P>>;
|
|
60
60
|
declare type DataFunctionValue = Response | NonNullable<unknown> | null;
|
|
61
|
-
export type LoaderFunction = (args: LoaderFunctionArgs) => Promise<DataFunctionValue> | DataFunctionValue;
|
|
61
|
+
export type LoaderFunction = <P extends Record<string, unknown> = Record<string, unknown>>(args: LoaderFunctionArgs<P>) => Promise<DataFunctionValue> | DataFunctionValue;
|
|
62
62
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { RuntimeContext, SSRPluginConfig } from '../types';
|
|
2
|
-
export declare function buildShellBeforeTemplate(beforeAppTemplate: string, context: RuntimeContext, pluginConfig: SSRPluginConfig): Promise<string>;
|
|
2
|
+
export declare function buildShellBeforeTemplate(beforeAppTemplate: string, context: RuntimeContext, pluginConfig: SSRPluginConfig, styledComponentsStyleTags?: string): Promise<string>;
|
|
@@ -3,4 +3,4 @@ export type InjectTemplate = {
|
|
|
3
3
|
shellBefore: string;
|
|
4
4
|
shellAfter: string;
|
|
5
5
|
};
|
|
6
|
-
export declare const getTemplates: (context: RuntimeContext, renderLevel: RenderLevel, pluginConfig: SSRPluginConfig) => Promise<InjectTemplate>;
|
|
6
|
+
export declare const getTemplates: (context: RuntimeContext, renderLevel: RenderLevel, pluginConfig: SSRPluginConfig, styledComponentsStyleTags?: string) => Promise<InjectTemplate>;
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "2.
|
|
18
|
+
"version": "2.51.0",
|
|
19
19
|
"engines": {
|
|
20
20
|
"node": ">=14.17.6"
|
|
21
21
|
},
|
|
@@ -170,10 +170,10 @@
|
|
|
170
170
|
"react-side-effect": "^2.1.1",
|
|
171
171
|
"styled-components": "^5.3.1",
|
|
172
172
|
"@swc/helpers": "0.5.3",
|
|
173
|
-
"@modern-js/
|
|
174
|
-
"@modern-js/
|
|
175
|
-
"@modern-js/utils": "2.
|
|
176
|
-
"@modern-js/runtime-utils": "2.
|
|
173
|
+
"@modern-js/types": "2.51.0",
|
|
174
|
+
"@modern-js/plugin": "2.51.0",
|
|
175
|
+
"@modern-js/utils": "2.51.0",
|
|
176
|
+
"@modern-js/runtime-utils": "2.51.0"
|
|
177
177
|
},
|
|
178
178
|
"peerDependencies": {
|
|
179
179
|
"react": ">=17",
|
|
@@ -194,11 +194,11 @@
|
|
|
194
194
|
"ts-jest": "^29.1.0",
|
|
195
195
|
"typescript": "^5",
|
|
196
196
|
"webpack": "^5.91.0",
|
|
197
|
-
"@modern-js/app-tools": "2.
|
|
198
|
-
"@modern-js/core": "2.
|
|
199
|
-
"@
|
|
200
|
-
"@
|
|
201
|
-
"@scripts/jest-config": "2.
|
|
197
|
+
"@modern-js/app-tools": "2.51.0",
|
|
198
|
+
"@modern-js/core": "2.51.0",
|
|
199
|
+
"@scripts/build": "2.51.0",
|
|
200
|
+
"@modern-js/server-core": "2.51.0",
|
|
201
|
+
"@scripts/jest-config": "2.51.0"
|
|
202
202
|
},
|
|
203
203
|
"sideEffects": false,
|
|
204
204
|
"publishConfig": {
|