@modern-js/runtime 2.32.1 → 2.32.2-alpha.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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/document/cli/index.js +9 -4
- package/dist/cjs/ssr/serverRender/renderToString/buildHtml.js +47 -0
- package/dist/cjs/ssr/serverRender/renderToString/entry.js +14 -28
- package/dist/cjs/ssr/serverRender/renderToString/loadable.js +57 -40
- package/dist/cjs/ssr/serverRender/renderToString/render.js +35 -0
- package/dist/cjs/ssr/serverRender/renderToString/styledComponent.js +20 -9
- package/dist/esm/document/cli/index.js +10 -5
- package/dist/esm/ssr/serverRender/renderToString/buildHtml.js +29 -0
- package/dist/esm/ssr/serverRender/renderToString/entry.js +15 -47
- package/dist/esm/ssr/serverRender/renderToString/loadable.js +86 -56
- package/dist/esm/ssr/serverRender/renderToString/render.js +39 -0
- package/dist/esm/ssr/serverRender/renderToString/styledComponent.js +31 -7
- package/dist/esm-node/document/cli/index.js +9 -4
- package/dist/esm-node/ssr/serverRender/renderToString/buildHtml.js +19 -0
- package/dist/esm-node/ssr/serverRender/renderToString/entry.js +14 -27
- package/dist/esm-node/ssr/serverRender/renderToString/loadable.js +55 -38
- package/dist/esm-node/ssr/serverRender/renderToString/render.js +24 -0
- package/dist/esm-node/ssr/serverRender/renderToString/styledComponent.js +18 -7
- package/dist/types/ssr/serverRender/renderToStream/template.d.ts +4 -1
- package/dist/types/ssr/serverRender/renderToString/buildHtml.d.ts +6 -0
- package/dist/types/ssr/serverRender/renderToString/entry.d.ts +0 -1
- package/dist/types/ssr/serverRender/renderToString/loadable.d.ts +21 -2
- package/dist/types/ssr/serverRender/renderToString/render.d.ts +14 -0
- package/dist/types/ssr/serverRender/renderToString/styledComponent.d.ts +15 -2
- package/dist/types/ssr/serverRender/renderToString/type.d.ts +0 -12
- package/package.json +7 -7
- package/dist/cjs/ssr/serverRender/constants.js +0 -16
- package/dist/cjs/ssr/serverRender/renderToStream/loadable.js +0 -30
- package/dist/cjs/ssr/serverRender/renderToStream/styledComponent.js +0 -19
- package/dist/cjs/ssr/serverRender/renderToStream/type.js +0 -4
- package/dist/cjs/ssr/serverRender/renderToString/reduce.js +0 -17
- package/dist/cjs/ssr/serverRender/renderToString/template.js +0 -79
- package/dist/esm/ssr/serverRender/constants.js +0 -6
- package/dist/esm/ssr/serverRender/renderToStream/loadable.js +0 -21
- package/dist/esm/ssr/serverRender/renderToStream/styledComponent.js +0 -10
- package/dist/esm/ssr/serverRender/renderToStream/type.js +0 -1
- package/dist/esm/ssr/serverRender/renderToString/reduce.js +0 -9
- package/dist/esm/ssr/serverRender/renderToString/template.js +0 -81
- package/dist/esm-node/ssr/serverRender/constants.js +0 -6
- package/dist/esm-node/ssr/serverRender/renderToStream/loadable.js +0 -20
- package/dist/esm-node/ssr/serverRender/renderToStream/styledComponent.js +0 -9
- package/dist/esm-node/ssr/serverRender/renderToStream/type.js +0 -1
- package/dist/esm-node/ssr/serverRender/renderToString/reduce.js +0 -5
- package/dist/esm-node/ssr/serverRender/renderToString/template.js +0 -60
- package/dist/types/ssr/serverRender/constants.d.ts +0 -5
- package/dist/types/ssr/serverRender/renderToStream/loadable.d.ts +0 -16
- package/dist/types/ssr/serverRender/renderToStream/styledComponent.d.ts +0 -12
- package/dist/types/ssr/serverRender/renderToStream/type.d.ts +0 -4
- package/dist/types/ssr/serverRender/renderToString/reduce.d.ts +0 -3
- package/dist/types/ssr/serverRender/renderToString/template.d.ts +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @modern-js/runtime
|
|
2
2
|
|
|
3
|
+
## 2.32.2-alpha.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 6ea89abebde: fix: html has placeholder when not set partials
|
|
8
|
+
fix: html 在没有设置 partials 的时候,会多出占位符
|
|
9
|
+
- 44da57b845c: refactor: runtime server ssr
|
|
10
|
+
refactor: 重构 runtime server ssr
|
|
11
|
+
- Updated dependencies [bc1f8daf0ff]
|
|
12
|
+
- @modern-js/utils@2.32.2-alpha.0
|
|
13
|
+
- @modern-js/plugin@2.32.2-alpha.0
|
|
14
|
+
- @modern-js/types@2.32.2-alpha.0
|
|
15
|
+
|
|
3
16
|
## 2.32.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -138,12 +138,17 @@ const documentPlugin = () => ({
|
|
|
138
138
|
htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "script").join(""),
|
|
139
139
|
htmlWebpackPlugin.tags.bodyTags.toString()
|
|
140
140
|
].join("");
|
|
141
|
+
const partialsContent = {
|
|
142
|
+
partialsTop: "",
|
|
143
|
+
partialsHead: "",
|
|
144
|
+
partialsBody: ""
|
|
145
|
+
};
|
|
141
146
|
if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
html = html.replace(_constants.TOP_PARTICALS_SEPARATOR, partialsTop).replace(_constants.HEAD_PARTICALS_SEPARATOR, partialsHead).replace(_constants.BODY_PARTICALS_SEPARATOR, partialsBody);
|
|
147
|
+
partialsContent.partialsTop = partialsByEntrypoint[entryName].top.join("\n");
|
|
148
|
+
partialsContent.partialsHead = partialsByEntrypoint[entryName].head.join("\n");
|
|
149
|
+
partialsContent.partialsBody = partialsByEntrypoint[entryName].body.join("\n");
|
|
146
150
|
}
|
|
151
|
+
html = html.replace(_constants.TOP_PARTICALS_SEPARATOR, partialsContent.partialsTop).replace(_constants.HEAD_PARTICALS_SEPARATOR, partialsContent.partialsHead).replace(_constants.BODY_PARTICALS_SEPARATOR, partialsContent.partialsBody);
|
|
147
152
|
const links = [
|
|
148
153
|
htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "link").join("")
|
|
149
154
|
].join("");
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
buildHtml: function() {
|
|
14
|
+
return buildHtml;
|
|
15
|
+
},
|
|
16
|
+
createReplaceHtml: function() {
|
|
17
|
+
return createReplaceHtml;
|
|
18
|
+
},
|
|
19
|
+
createReplaceSSRDataScript: function() {
|
|
20
|
+
return createReplaceSSRDataScript;
|
|
21
|
+
},
|
|
22
|
+
createReplaceChunkJs: function() {
|
|
23
|
+
return createReplaceChunkJs;
|
|
24
|
+
},
|
|
25
|
+
createReplaceChunkCss: function() {
|
|
26
|
+
return createReplaceChunkCss;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
function buildHtml(template, callbacks) {
|
|
30
|
+
return callbacks.reduce((tmp, cb) => cb(tmp), template);
|
|
31
|
+
}
|
|
32
|
+
function createReplaceHtml(html) {
|
|
33
|
+
const HTML_REG = /<!--<\?-\s*html\s*\?>-->/;
|
|
34
|
+
return (template) => template.replace(HTML_REG, html);
|
|
35
|
+
}
|
|
36
|
+
function createReplaceSSRDataScript(data) {
|
|
37
|
+
const SSR_DATA_REG = /<!--<\?-\s*SSRDataScript\s*\?>-->/;
|
|
38
|
+
return (template) => template.replace(SSR_DATA_REG, data);
|
|
39
|
+
}
|
|
40
|
+
function createReplaceChunkJs(js) {
|
|
41
|
+
const CHUNK_JS_REG = /<!--<\?-\s*chunksMap\.js\s*\?>-->/;
|
|
42
|
+
return (template) => template.replace(CHUNK_JS_REG, js);
|
|
43
|
+
}
|
|
44
|
+
function createReplaceChunkCss(css) {
|
|
45
|
+
const CHUNK_CSS_REG = /<!--<\?-\s*chunksMap\.css\s*\?>-->/;
|
|
46
|
+
return (template) => template.replace(CHUNK_CSS_REG, css);
|
|
47
|
+
}
|
|
@@ -10,9 +10,7 @@ Object.defineProperty(exports, "default", {
|
|
|
10
10
|
});
|
|
11
11
|
const _define_property = require("@swc/helpers/_/_define_property");
|
|
12
12
|
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
13
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
14
13
|
const _react = /* @__PURE__ */ _interop_require_default._(require("react"));
|
|
15
|
-
const _server = /* @__PURE__ */ _interop_require_default._(require("react-dom/server"));
|
|
16
14
|
const _runtimenode = require("@modern-js/utils/runtime-node");
|
|
17
15
|
const _reacthelmet = /* @__PURE__ */ _interop_require_default._(require("react-helmet"));
|
|
18
16
|
const _time = require("@modern-js/utils/universal/time");
|
|
@@ -22,10 +20,10 @@ const _types = require("../types");
|
|
|
22
20
|
const _prefetch = /* @__PURE__ */ _interop_require_default._(require("../../prefetch"));
|
|
23
21
|
const _utils1 = require("../utils");
|
|
24
22
|
const _tracker = require("../tracker");
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
23
|
+
const _loadable = require("./loadable");
|
|
24
|
+
const _render = require("./render");
|
|
25
|
+
const _styledComponent = require("./styledComponent");
|
|
26
|
+
const _buildHtml = require("./buildHtml");
|
|
29
27
|
const buildTemplateData = (context, data, renderLevel, tracker) => {
|
|
30
28
|
const { request, enableUnsafeCtx } = context;
|
|
31
29
|
const unsafeContext = {
|
|
@@ -71,16 +69,14 @@ class Entry {
|
|
|
71
69
|
loaderData: routerContext.loaderData,
|
|
72
70
|
errors: (0, _utils.serializeErrors)(routerContext.errors)
|
|
73
71
|
} : void 0;
|
|
74
|
-
let html = "";
|
|
75
72
|
const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel, this.tracker);
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
73
|
+
const ssrDataScripts = this.getSSRDataScript(templateData, routerData);
|
|
74
|
+
const html = (0, _buildHtml.buildHtml)(this.template, [
|
|
75
|
+
(0, _buildHtml.createReplaceChunkCss)(this.result.chunksMap.css),
|
|
76
|
+
(0, _buildHtml.createReplaceChunkJs)(this.result.chunksMap.js),
|
|
77
|
+
(0, _buildHtml.createReplaceHtml)(this.result.html || ""),
|
|
78
|
+
(0, _buildHtml.createReplaceSSRDataScript)(ssrDataScripts)
|
|
79
|
+
]);
|
|
84
80
|
const helmetData = _reacthelmet.default.renderStatic();
|
|
85
81
|
return helmetData ? (0, _helmet.default)(html, helmetData) : html;
|
|
86
82
|
}
|
|
@@ -108,20 +104,14 @@ class Entry {
|
|
|
108
104
|
ssr: true
|
|
109
105
|
})
|
|
110
106
|
});
|
|
111
|
-
|
|
107
|
+
html = (0, _render.createRender)(App).addCollector((0, _styledComponent.createStyledCollector)(this.result)).addCollector((0, _loadable.createLoadableCollector)({
|
|
112
108
|
stats: ssrContext.loadableStats,
|
|
113
|
-
host: this.host,
|
|
114
109
|
result: this.result,
|
|
115
110
|
entryName: this.entryName,
|
|
116
111
|
config: this.pluginConfig,
|
|
117
112
|
nonce: this.nonce,
|
|
118
113
|
template: this.template
|
|
119
|
-
};
|
|
120
|
-
html = (0, _reduce.reduce)(App, renderContext, [
|
|
121
|
-
_styledComponent.toHtml,
|
|
122
|
-
_loadable.toHtml,
|
|
123
|
-
(jsx) => _server.default.renderToString(jsx)
|
|
124
|
-
]);
|
|
114
|
+
})).finish();
|
|
125
115
|
const cost = end();
|
|
126
116
|
this.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_HTML, cost);
|
|
127
117
|
this.result.renderLevel = _types.RenderLevel.SERVER_RENDER;
|
|
@@ -143,9 +133,7 @@ class Entry {
|
|
|
143
133
|
<script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>` : `
|
|
144
134
|
<script type="application/json" id="${_utils1.ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
|
|
145
135
|
}
|
|
146
|
-
return
|
|
147
|
-
SSRDataScript: ssrDataScripts
|
|
148
|
-
};
|
|
136
|
+
return ssrDataScripts;
|
|
149
137
|
}
|
|
150
138
|
constructor(options) {
|
|
151
139
|
_define_property._(this, "entryName", void 0);
|
|
@@ -154,13 +142,11 @@ class Entry {
|
|
|
154
142
|
_define_property._(this, "tracker", void 0);
|
|
155
143
|
_define_property._(this, "template", void 0);
|
|
156
144
|
_define_property._(this, "App", void 0);
|
|
157
|
-
_define_property._(this, "fragments", void 0);
|
|
158
145
|
_define_property._(this, "pluginConfig", void 0);
|
|
159
146
|
_define_property._(this, "host", void 0);
|
|
160
147
|
_define_property._(this, "nonce", void 0);
|
|
161
148
|
const { ctx, config } = options;
|
|
162
149
|
const { entryName, template, request: { host }, nonce } = ctx;
|
|
163
|
-
this.fragments = (0, _template.toFragments)(template, entryName);
|
|
164
150
|
this.template = template;
|
|
165
151
|
this.entryName = entryName;
|
|
166
152
|
this.host = host;
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "createLoadableCollector", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return createLoadableCollector;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
const _define_property = require("@swc/helpers/_/_define_property");
|
|
11
12
|
const _server = require("@loadable/server");
|
|
12
13
|
const _utils = require("../utils");
|
|
13
14
|
const extname = (uri) => {
|
|
@@ -17,47 +18,63 @@ const extname = (uri) => {
|
|
|
17
18
|
}
|
|
18
19
|
return `.${(_uri = uri) === null || _uri === void 0 ? void 0 : _uri.split(".").pop()}` || "";
|
|
19
20
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const extractor = new _server.ChunkExtractor({
|
|
26
|
-
stats,
|
|
27
|
-
entrypoints: [
|
|
28
|
-
renderer.entryName
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
const html = next(extractor.collectChunks(jsx));
|
|
32
|
-
const chunks = extractor.getChunkAssets(extractor.chunks);
|
|
33
|
-
chunksMap.js = (chunksMap.js || "") + (0, _utils.getLoadableScripts)(extractor);
|
|
34
|
-
for (const v of chunks) {
|
|
35
|
-
const fileType = extname(v.url).slice(1);
|
|
36
|
-
const attributes = {};
|
|
37
|
-
const { crossorigin, scriptLoading = "defer" } = config;
|
|
38
|
-
if (crossorigin) {
|
|
39
|
-
attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
|
|
21
|
+
class LoadableCollector {
|
|
22
|
+
collect(comopnent) {
|
|
23
|
+
const { stats, entryName } = this.options;
|
|
24
|
+
if (!stats) {
|
|
25
|
+
return comopnent;
|
|
40
26
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
27
|
+
this.extractor = new _server.ChunkExtractor({
|
|
28
|
+
stats,
|
|
29
|
+
entrypoints: [
|
|
30
|
+
entryName
|
|
31
|
+
]
|
|
32
|
+
});
|
|
33
|
+
return this.extractor.collectChunks(comopnent);
|
|
34
|
+
}
|
|
35
|
+
effect() {
|
|
36
|
+
if (!this.extractor) {
|
|
37
|
+
return;
|
|
49
38
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
const { result: { chunksMap }, config, template, nonce } = this.options;
|
|
40
|
+
const { extractor } = this;
|
|
41
|
+
const chunks = extractor.getChunkAssets(extractor.chunks);
|
|
42
|
+
chunksMap.js = (chunksMap.js || "") + (0, _utils.getLoadableScripts)(extractor);
|
|
43
|
+
for (const v of chunks) {
|
|
44
|
+
const fileType = extname(v.url).slice(1);
|
|
45
|
+
const attributes = {};
|
|
46
|
+
const { crossorigin, scriptLoading = "defer" } = config;
|
|
47
|
+
if (crossorigin) {
|
|
48
|
+
attributes.crossorigin = crossorigin === true ? "anonymous" : crossorigin;
|
|
49
|
+
}
|
|
50
|
+
switch (scriptLoading) {
|
|
51
|
+
case "defer":
|
|
52
|
+
attributes.defer = true;
|
|
53
|
+
break;
|
|
54
|
+
case "module":
|
|
55
|
+
attributes.type = "module";
|
|
56
|
+
break;
|
|
57
|
+
default:
|
|
58
|
+
}
|
|
59
|
+
if (fileType === "js") {
|
|
60
|
+
const jsChunkReg = new RegExp(`<script .*src="${v.url}".*>`);
|
|
61
|
+
if (!jsChunkReg.test(template)) {
|
|
62
|
+
attributes.nonce = nonce;
|
|
63
|
+
const attrsStr = (0, _utils.attributesToString)(attributes);
|
|
64
|
+
chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
|
|
65
|
+
}
|
|
66
|
+
} else if (fileType === "css") {
|
|
54
67
|
const attrsStr = (0, _utils.attributesToString)(attributes);
|
|
55
|
-
chunksMap[fileType] += `<
|
|
68
|
+
chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
|
|
56
69
|
}
|
|
57
|
-
} else if (fileType === "css") {
|
|
58
|
-
const attrsStr = (0, _utils.attributesToString)(attributes);
|
|
59
|
-
chunksMap[fileType] += `<link${attrsStr} href="${v.url}" rel="stylesheet" />`;
|
|
60
70
|
}
|
|
61
71
|
}
|
|
62
|
-
|
|
63
|
-
|
|
72
|
+
constructor(options) {
|
|
73
|
+
_define_property._(this, "options", void 0);
|
|
74
|
+
_define_property._(this, "extractor", void 0);
|
|
75
|
+
this.options = options;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
function createLoadableCollector(options) {
|
|
79
|
+
return new LoadableCollector(options);
|
|
80
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "createRender", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return createRender;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _define_property = require("@swc/helpers/_/_define_property");
|
|
12
|
+
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
13
|
+
const _server = /* @__PURE__ */ _interop_require_default._(require("react-dom/server"));
|
|
14
|
+
class Render {
|
|
15
|
+
addCollector(collector) {
|
|
16
|
+
this.collectors.push(collector);
|
|
17
|
+
return this;
|
|
18
|
+
}
|
|
19
|
+
finish() {
|
|
20
|
+
const App = this.collectors.reduce((pre, collector) => collector.collect(pre), this.App);
|
|
21
|
+
const html = _server.default.renderToString(App);
|
|
22
|
+
this.collectors.forEach((component) => {
|
|
23
|
+
component.effect();
|
|
24
|
+
});
|
|
25
|
+
return html;
|
|
26
|
+
}
|
|
27
|
+
constructor(App) {
|
|
28
|
+
_define_property._(this, "App", void 0);
|
|
29
|
+
_define_property._(this, "collectors", []);
|
|
30
|
+
this.App = App;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
function createRender(App) {
|
|
34
|
+
return new Render(App);
|
|
35
|
+
}
|
|
@@ -2,17 +2,28 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "createStyledCollector", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return createStyledCollector;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
const _define_property = require("@swc/helpers/_/_define_property");
|
|
11
12
|
const _styledcomponents = require("styled-components");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
class StyledCollector {
|
|
14
|
+
collect(comopnent) {
|
|
15
|
+
return this.sheet.collectStyles(comopnent);
|
|
16
|
+
}
|
|
17
|
+
effect() {
|
|
18
|
+
const css = this.sheet.getStyleTags();
|
|
19
|
+
this.result.chunksMap.css += css;
|
|
20
|
+
}
|
|
21
|
+
constructor(result) {
|
|
22
|
+
_define_property._(this, "sheet", new _styledcomponents.ServerStyleSheet());
|
|
23
|
+
_define_property._(this, "result", void 0);
|
|
24
|
+
this.result = result;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function createStyledCollector(result) {
|
|
28
|
+
return new StyledCollector(result);
|
|
29
|
+
}
|
|
@@ -57,7 +57,7 @@ export var documentPlugin = function() {
|
|
|
57
57
|
}
|
|
58
58
|
return function() {
|
|
59
59
|
var _ref2 = _async_to_generator(function(param) {
|
|
60
|
-
var htmlWebpackPlugin, _tsConfig, _partialsByEntrypoint, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, partialsByEntrypoint, scripts,
|
|
60
|
+
var htmlWebpackPlugin, _tsConfig, _partialsByEntrypoint, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, partialsByEntrypoint, scripts, partialsContent, links, metas, nonce, nonceAttr, finalHtml;
|
|
61
61
|
return _ts_generator(this, function(_state2) {
|
|
62
62
|
switch (_state2.label) {
|
|
63
63
|
case 0:
|
|
@@ -163,12 +163,17 @@ export var documentPlugin = function() {
|
|
|
163
163
|
}).join(""),
|
|
164
164
|
htmlWebpackPlugin.tags.bodyTags.toString()
|
|
165
165
|
].join("");
|
|
166
|
+
partialsContent = {
|
|
167
|
+
partialsTop: "",
|
|
168
|
+
partialsHead: "",
|
|
169
|
+
partialsBody: ""
|
|
170
|
+
};
|
|
166
171
|
if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
|
|
167
|
-
partialsTop = partialsByEntrypoint[entryName].top.join("\n");
|
|
168
|
-
partialsHead = partialsByEntrypoint[entryName].head.join("\n");
|
|
169
|
-
partialsBody = partialsByEntrypoint[entryName].body.join("\n");
|
|
170
|
-
html = html.replace(TOP_PARTICALS_SEPARATOR, partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsBody);
|
|
172
|
+
partialsContent.partialsTop = partialsByEntrypoint[entryName].top.join("\n");
|
|
173
|
+
partialsContent.partialsHead = partialsByEntrypoint[entryName].head.join("\n");
|
|
174
|
+
partialsContent.partialsBody = partialsByEntrypoint[entryName].body.join("\n");
|
|
171
175
|
}
|
|
176
|
+
html = html.replace(TOP_PARTICALS_SEPARATOR, partialsContent.partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsContent.partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsContent.partialsBody);
|
|
172
177
|
links = [
|
|
173
178
|
htmlWebpackPlugin.tags.headTags.filter(function(item) {
|
|
174
179
|
return item.tagName === "link";
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export function buildHtml(template, callbacks) {
|
|
2
|
+
return callbacks.reduce(function(tmp, cb) {
|
|
3
|
+
return cb(tmp);
|
|
4
|
+
}, template);
|
|
5
|
+
}
|
|
6
|
+
export function createReplaceHtml(html) {
|
|
7
|
+
var HTML_REG = /<!--<\?-\s*html\s*\?>-->/;
|
|
8
|
+
return function(template) {
|
|
9
|
+
return template.replace(HTML_REG, html);
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
export function createReplaceSSRDataScript(data) {
|
|
13
|
+
var SSR_DATA_REG = /<!--<\?-\s*SSRDataScript\s*\?>-->/;
|
|
14
|
+
return function(template) {
|
|
15
|
+
return template.replace(SSR_DATA_REG, data);
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export function createReplaceChunkJs(js) {
|
|
19
|
+
var CHUNK_JS_REG = /<!--<\?-\s*chunksMap\.js\s*\?>-->/;
|
|
20
|
+
return function(template) {
|
|
21
|
+
return template.replace(CHUNK_JS_REG, js);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export function createReplaceChunkCss(css) {
|
|
25
|
+
var CHUNK_CSS_REG = /<!--<\?-\s*chunksMap\.css\s*\?>-->/;
|
|
26
|
+
return function(template) {
|
|
27
|
+
return template.replace(CHUNK_CSS_REG, css);
|
|
28
|
+
};
|
|
29
|
+
}
|
|
@@ -5,7 +5,6 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
|
5
5
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
6
6
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
7
7
|
import React from "react";
|
|
8
|
-
import ReactDomServer from "react-dom/server";
|
|
9
8
|
import { serializeJson } from "@modern-js/utils/runtime-node";
|
|
10
9
|
import ReactHelmet from "react-helmet";
|
|
11
10
|
import { time } from "@modern-js/utils/universal/time";
|
|
@@ -15,10 +14,10 @@ import { RenderLevel } from "../types";
|
|
|
15
14
|
import prefetch from "../../prefetch";
|
|
16
15
|
import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
|
|
17
16
|
import { SSRErrors, SSRTimings, createSSRTracker } from "../tracker";
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import
|
|
21
|
-
import
|
|
17
|
+
import { createLoadableCollector } from "./loadable";
|
|
18
|
+
import { createRender } from "./render";
|
|
19
|
+
import { createStyledCollector } from "./styledComponent";
|
|
20
|
+
import { buildHtml, createReplaceChunkCss, createReplaceChunkJs, createReplaceHtml, createReplaceSSRDataScript } from "./buildHtml";
|
|
22
21
|
var buildTemplateData = function(context, data, renderLevel, tracker) {
|
|
23
22
|
var request = context.request, enableUnsafeCtx = context.enableUnsafeCtx;
|
|
24
23
|
var unsafeContext = {
|
|
@@ -51,13 +50,11 @@ var Entry = /* @__PURE__ */ function() {
|
|
|
51
50
|
_define_property(this, "tracker", void 0);
|
|
52
51
|
_define_property(this, "template", void 0);
|
|
53
52
|
_define_property(this, "App", void 0);
|
|
54
|
-
_define_property(this, "fragments", void 0);
|
|
55
53
|
_define_property(this, "pluginConfig", void 0);
|
|
56
54
|
_define_property(this, "host", void 0);
|
|
57
55
|
_define_property(this, "nonce", void 0);
|
|
58
56
|
var ctx = options.ctx, config = options.config;
|
|
59
57
|
var entryName = ctx.entryName, template = ctx.template, host = ctx.request.host, nonce = ctx.nonce;
|
|
60
|
-
this.fragments = toFragments(template, entryName);
|
|
61
58
|
this.template = template;
|
|
62
59
|
this.entryName = entryName;
|
|
63
60
|
this.host = host;
|
|
@@ -81,7 +78,7 @@ var Entry = /* @__PURE__ */ function() {
|
|
|
81
78
|
value: function renderToHtml(context) {
|
|
82
79
|
var _this = this;
|
|
83
80
|
return _async_to_generator(function() {
|
|
84
|
-
var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, routerContext, routerData,
|
|
81
|
+
var _ssrContext_redirection, _ssrContext_redirection1, _ssrContext_redirection2, ssrContext, prefetchData, routerContext, routerData, templateData, ssrDataScripts, html, helmetData;
|
|
85
82
|
return _ts_generator(this, function(_state) {
|
|
86
83
|
switch (_state.label) {
|
|
87
84
|
case 0:
|
|
@@ -118,33 +115,14 @@ var Entry = /* @__PURE__ */ function() {
|
|
|
118
115
|
loaderData: routerContext.loaderData,
|
|
119
116
|
errors: serializeErrors(routerContext.errors)
|
|
120
117
|
} : void 0;
|
|
121
|
-
html = "";
|
|
122
118
|
templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker);
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
} else {
|
|
131
|
-
html += fragment.getValue(_this.result);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
} catch (err) {
|
|
135
|
-
_didIteratorError = true;
|
|
136
|
-
_iteratorError = err;
|
|
137
|
-
} finally {
|
|
138
|
-
try {
|
|
139
|
-
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
140
|
-
_iterator.return();
|
|
141
|
-
}
|
|
142
|
-
} finally {
|
|
143
|
-
if (_didIteratorError) {
|
|
144
|
-
throw _iteratorError;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
119
|
+
ssrDataScripts = _this.getSSRDataScript(templateData, routerData);
|
|
120
|
+
html = buildHtml(_this.template, [
|
|
121
|
+
createReplaceChunkCss(_this.result.chunksMap.css),
|
|
122
|
+
createReplaceChunkJs(_this.result.chunksMap.js),
|
|
123
|
+
createReplaceHtml(_this.result.html || ""),
|
|
124
|
+
createReplaceSSRDataScript(ssrDataScripts)
|
|
125
|
+
]);
|
|
148
126
|
helmetData = ReactHelmet.renderStatic();
|
|
149
127
|
return [
|
|
150
128
|
2,
|
|
@@ -216,22 +194,14 @@ var Entry = /* @__PURE__ */ function() {
|
|
|
216
194
|
ssr: true
|
|
217
195
|
})
|
|
218
196
|
});
|
|
219
|
-
|
|
197
|
+
html = createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
|
|
220
198
|
stats: ssrContext.loadableStats,
|
|
221
|
-
host: this.host,
|
|
222
199
|
result: this.result,
|
|
223
200
|
entryName: this.entryName,
|
|
224
201
|
config: this.pluginConfig,
|
|
225
202
|
nonce: this.nonce,
|
|
226
203
|
template: this.template
|
|
227
|
-
};
|
|
228
|
-
html = reduce(App, renderContext, [
|
|
229
|
-
styledComponentRenderer.toHtml,
|
|
230
|
-
loadableRenderer.toHtml,
|
|
231
|
-
function(jsx) {
|
|
232
|
-
return ReactDomServer.renderToString(jsx);
|
|
233
|
-
}
|
|
234
|
-
]);
|
|
204
|
+
})).finish();
|
|
235
205
|
var cost = end();
|
|
236
206
|
this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
|
|
237
207
|
this.result.renderLevel = RenderLevel.SERVER_RENDER;
|
|
@@ -254,9 +224,7 @@ var Entry = /* @__PURE__ */ function() {
|
|
|
254
224
|
var serializedRouterData = serializeJson(routerData);
|
|
255
225
|
ssrDataScripts += useInlineScript ? "\n<script".concat(attrsStr, ">window._ROUTER_DATA = ").concat(serializedRouterData, "</script>") : '\n<script type="application/json" id="'.concat(ROUTER_DATA_JSON_ID, '">').concat(serializedRouterData, "</script>");
|
|
256
226
|
}
|
|
257
|
-
return
|
|
258
|
-
SSRDataScript: ssrDataScripts
|
|
259
|
-
};
|
|
227
|
+
return ssrDataScripts;
|
|
260
228
|
}
|
|
261
229
|
}
|
|
262
230
|
]);
|