@modern-js/runtime 3.5.0 → 3.6.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/index.js +1 -11
- package/dist/cjs/core/browser/hydrate.js +4 -13
- package/dist/cjs/core/browser/index.js +14 -34
- package/dist/esm/cli/index.mjs +2 -12
- package/dist/esm/core/browser/hydrate.mjs +3 -8
- package/dist/esm/core/browser/index.mjs +11 -25
- package/dist/esm-node/cli/index.mjs +2 -12
- package/dist/esm-node/core/browser/hydrate.mjs +3 -8
- package/dist/esm-node/core/browser/index.mjs +11 -25
- package/dist/esm-node/core/server/stream/beforeTemplate.mjs +2 -2
- package/dist/esm-node/core/server/string/loadable.mjs +2 -2
- package/dist/esm-node/router/cli/index.mjs +2 -2
- package/dist/types/core/browser/hydrate.d.ts +1 -2
- package/dist/types/core/browser/index.d.ts +2 -4
- package/package.json +11 -11
package/dist/cjs/cli/index.js
CHANGED
|
@@ -101,12 +101,10 @@ const runtimePlugin = (params)=>({
|
|
|
101
101
|
});
|
|
102
102
|
api.config(()=>{
|
|
103
103
|
const { appDirectory, metaName } = api.getAppContext();
|
|
104
|
-
const isReact18 = (0, utils_namespaceObject.isReact18)(appDirectory);
|
|
105
|
-
process.env.IS_REACT18 = isReact18.toString();
|
|
106
104
|
return {
|
|
107
105
|
source: {
|
|
108
106
|
globalVars: {
|
|
109
|
-
'process.env.IS_REACT18':
|
|
107
|
+
'process.env.IS_REACT18': 'true'
|
|
110
108
|
},
|
|
111
109
|
include: [
|
|
112
110
|
new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
|
|
@@ -115,14 +113,6 @@ const runtimePlugin = (params)=>({
|
|
|
115
113
|
tools: {
|
|
116
114
|
bundlerChain: (chain)=>{
|
|
117
115
|
chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(external_path_default().resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
|
|
118
|
-
},
|
|
119
|
-
rspack: (_config, { appendPlugins, rspack })=>{
|
|
120
|
-
if (!isReact18) appendPlugins([
|
|
121
|
-
new rspack.IgnorePlugin({
|
|
122
|
-
resourceRegExp: /^react-dom\/client$/,
|
|
123
|
-
contextRegExp: /@modern-js\/runtime/
|
|
124
|
-
})
|
|
125
|
-
]);
|
|
126
116
|
}
|
|
127
117
|
}
|
|
128
118
|
};
|
|
@@ -28,15 +28,13 @@ var __webpack_require__ = {};
|
|
|
28
28
|
var __webpack_exports__ = {};
|
|
29
29
|
__webpack_require__.r(__webpack_exports__);
|
|
30
30
|
__webpack_require__.d(__webpack_exports__, {
|
|
31
|
-
hydrateRoot: ()=>hydrateRoot
|
|
32
|
-
isReact18: ()=>isReact18
|
|
31
|
+
hydrateRoot: ()=>hydrateRoot
|
|
33
32
|
});
|
|
34
33
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
35
34
|
const component_namespaceObject = require("@loadable/component");
|
|
36
35
|
const external_constants_js_namespaceObject = require("../constants.js");
|
|
37
36
|
const wrapper_js_namespaceObject = require("../react/wrapper.js");
|
|
38
37
|
const external_withCallback_js_namespaceObject = require("./withCallback.js");
|
|
39
|
-
const isReact18 = ()=>'true' === process.env.IS_REACT18;
|
|
40
38
|
function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
41
39
|
const hydrateContext = {
|
|
42
40
|
...context,
|
|
@@ -50,7 +48,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
50
48
|
};
|
|
51
49
|
const renderLevel = window?._SSR_DATA?.renderLevel || external_constants_js_namespaceObject.RenderLevel.CLIENT_RENDER;
|
|
52
50
|
const renderMode = window?._SSR_DATA?.mode || 'string';
|
|
53
|
-
if (
|
|
51
|
+
if ('stream' === renderMode) return streamSSRHydrate();
|
|
54
52
|
function streamSSRHydrate() {
|
|
55
53
|
if (renderLevel !== external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER) return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
|
|
56
54
|
{
|
|
@@ -65,7 +63,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
65
63
|
function stringSSRHydrate() {
|
|
66
64
|
if (renderLevel === external_constants_js_namespaceObject.RenderLevel.CLIENT_RENDER) return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
|
|
67
65
|
if (renderLevel === external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
|
|
68
|
-
|
|
66
|
+
(0, component_namespaceObject.loadableReady)(()=>{
|
|
69
67
|
const SSRApp = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_withCallback_js_namespaceObject.WithCallback, {
|
|
70
68
|
callback: callback,
|
|
71
69
|
children: App
|
|
@@ -74,21 +72,14 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
74
72
|
resolve(root);
|
|
75
73
|
});
|
|
76
74
|
});
|
|
77
|
-
else (0, component_namespaceObject.loadableReady)(()=>{
|
|
78
|
-
ModernHydrate((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, hydrateContext), callback).then((root)=>{
|
|
79
|
-
resolve(root);
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
75
|
});
|
|
83
76
|
console.warn(`unknow render level: ${renderLevel}, execute render()`);
|
|
84
77
|
return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
|
|
85
78
|
}
|
|
86
79
|
}
|
|
87
80
|
exports.hydrateRoot = __webpack_exports__.hydrateRoot;
|
|
88
|
-
exports.isReact18 = __webpack_exports__.isReact18;
|
|
89
81
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
90
|
-
"hydrateRoot"
|
|
91
|
-
"isReact18"
|
|
82
|
+
"hydrateRoot"
|
|
92
83
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
93
84
|
Object.defineProperty(exports, '__esModule', {
|
|
94
85
|
value: true
|
|
@@ -37,20 +37,18 @@ var __webpack_require__ = {};
|
|
|
37
37
|
var __webpack_exports__ = {};
|
|
38
38
|
__webpack_require__.r(__webpack_exports__);
|
|
39
39
|
__webpack_require__.d(__webpack_exports__, {
|
|
40
|
-
|
|
41
|
-
hydrateWithReact18: ()=>hydrateWithReact18,
|
|
40
|
+
hydrateWithReact: ()=>hydrateWithReact,
|
|
42
41
|
render: ()=>render,
|
|
43
|
-
|
|
44
|
-
renderWithReact18: ()=>renderWithReact18
|
|
42
|
+
renderWithReact: ()=>renderWithReact
|
|
45
43
|
});
|
|
46
44
|
const constants_namespaceObject = require("@modern-js/utils/universal/constants");
|
|
47
45
|
const external_cookie_namespaceObject = require("cookie");
|
|
48
46
|
var external_cookie_default = /*#__PURE__*/ __webpack_require__.n(external_cookie_namespaceObject);
|
|
47
|
+
const client_namespaceObject = require("react-dom/client");
|
|
49
48
|
const index_js_namespaceObject = require("../context/index.js");
|
|
50
49
|
const runtime_js_namespaceObject = require("../context/runtime.js");
|
|
51
50
|
const wrapper_js_namespaceObject = require("../react/wrapper.js");
|
|
52
51
|
const external_hydrate_js_namespaceObject = require("./hydrate.js");
|
|
53
|
-
const IS_REACT18 = 'true' === process.env.IS_REACT18;
|
|
54
52
|
const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
|
|
55
53
|
const [key, value] = item.split('=');
|
|
56
54
|
if (key) res[key] = value;
|
|
@@ -108,52 +106,34 @@ async function render(App, id) {
|
|
|
108
106
|
await runBeforeRender(context);
|
|
109
107
|
const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
|
|
110
108
|
async function ModernRender(App) {
|
|
111
|
-
|
|
112
|
-
return renderFunc(App, rootElement);
|
|
109
|
+
return renderWithReact(App, rootElement);
|
|
113
110
|
}
|
|
114
|
-
async function ModernHydrate(App
|
|
115
|
-
|
|
116
|
-
return hydrateFunc(App, rootElement, callback);
|
|
111
|
+
async function ModernHydrate(App) {
|
|
112
|
+
return hydrateWithReact(App, rootElement);
|
|
117
113
|
}
|
|
118
114
|
if (window._SSR_DATA) return (0, external_hydrate_js_namespaceObject.hydrateRoot)(App, context, ModernRender, ModernHydrate);
|
|
119
115
|
return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
|
|
120
116
|
}
|
|
121
117
|
throw Error('`render` function needs id in browser environment, it needs to be string or element');
|
|
122
118
|
}
|
|
123
|
-
async function
|
|
124
|
-
const
|
|
125
|
-
const root = ReactDOM.createRoot(rootElement);
|
|
119
|
+
async function renderWithReact(App, rootElement) {
|
|
120
|
+
const root = (0, client_namespaceObject.createRoot)(rootElement);
|
|
126
121
|
root.render(App);
|
|
127
122
|
return root;
|
|
128
123
|
}
|
|
129
|
-
async function
|
|
130
|
-
const
|
|
131
|
-
ReactDOM.render(App, rootElement);
|
|
132
|
-
return rootElement;
|
|
133
|
-
}
|
|
134
|
-
async function hydrateWithReact18(App, rootElement) {
|
|
135
|
-
const ReactDOM = await import("react-dom/client");
|
|
136
|
-
const root = ReactDOM.hydrateRoot(rootElement, App, {
|
|
124
|
+
async function hydrateWithReact(App, rootElement) {
|
|
125
|
+
const root = (0, client_namespaceObject.hydrateRoot)(rootElement, App, {
|
|
137
126
|
identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
|
|
138
127
|
});
|
|
139
128
|
return root;
|
|
140
129
|
}
|
|
141
|
-
|
|
142
|
-
const ReactDOM = await import("react-dom");
|
|
143
|
-
const root = ReactDOM.hydrate(App, rootElement, callback);
|
|
144
|
-
return root;
|
|
145
|
-
}
|
|
146
|
-
exports.hydrateWithReact17 = __webpack_exports__.hydrateWithReact17;
|
|
147
|
-
exports.hydrateWithReact18 = __webpack_exports__.hydrateWithReact18;
|
|
130
|
+
exports.hydrateWithReact = __webpack_exports__.hydrateWithReact;
|
|
148
131
|
exports.render = __webpack_exports__.render;
|
|
149
|
-
exports.
|
|
150
|
-
exports.renderWithReact18 = __webpack_exports__.renderWithReact18;
|
|
132
|
+
exports.renderWithReact = __webpack_exports__.renderWithReact;
|
|
151
133
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
152
|
-
"
|
|
153
|
-
"hydrateWithReact18",
|
|
134
|
+
"hydrateWithReact",
|
|
154
135
|
"render",
|
|
155
|
-
"
|
|
156
|
-
"renderWithReact18"
|
|
136
|
+
"renderWithReact"
|
|
157
137
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
158
138
|
Object.defineProperty(exports, '__esModule', {
|
|
159
139
|
value: true
|
package/dist/esm/cli/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import path_0 from "path";
|
|
2
|
-
import { cleanRequireCache
|
|
2
|
+
import { cleanRequireCache } from "@modern-js/utils";
|
|
3
3
|
import { documentPlugin } from "../document/cli/index.mjs";
|
|
4
4
|
import { routerPlugin } from "../router/cli/index.mjs";
|
|
5
5
|
import { builderPluginAlias } from "./alias.mjs";
|
|
@@ -54,12 +54,10 @@ const runtimePlugin = (params)=>({
|
|
|
54
54
|
});
|
|
55
55
|
api.config(()=>{
|
|
56
56
|
const { appDirectory, metaName } = api.getAppContext();
|
|
57
|
-
const isReact18 = utils_isReact18(appDirectory);
|
|
58
|
-
process.env.IS_REACT18 = isReact18.toString();
|
|
59
57
|
return {
|
|
60
58
|
source: {
|
|
61
59
|
globalVars: {
|
|
62
|
-
'process.env.IS_REACT18':
|
|
60
|
+
'process.env.IS_REACT18': 'true'
|
|
63
61
|
},
|
|
64
62
|
include: [
|
|
65
63
|
new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
|
|
@@ -68,14 +66,6 @@ const runtimePlugin = (params)=>({
|
|
|
68
66
|
tools: {
|
|
69
67
|
bundlerChain: (chain)=>{
|
|
70
68
|
chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(path_0.resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
|
|
71
|
-
},
|
|
72
|
-
rspack: (_config, { appendPlugins, rspack })=>{
|
|
73
|
-
if (!isReact18) appendPlugins([
|
|
74
|
-
new rspack.IgnorePlugin({
|
|
75
|
-
resourceRegExp: /^react-dom\/client$/,
|
|
76
|
-
contextRegExp: /@modern-js\/runtime/
|
|
77
|
-
})
|
|
78
|
-
]);
|
|
79
69
|
}
|
|
80
70
|
}
|
|
81
71
|
};
|
|
@@ -3,7 +3,6 @@ import { loadableReady } from "@loadable/component";
|
|
|
3
3
|
import { RenderLevel } from "../constants.mjs";
|
|
4
4
|
import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
|
|
5
5
|
import { WithCallback } from "./withCallback.mjs";
|
|
6
|
-
const isReact18 = ()=>'true' === process.env.IS_REACT18;
|
|
7
6
|
function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
8
7
|
const hydrateContext = {
|
|
9
8
|
...context,
|
|
@@ -17,7 +16,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
17
16
|
};
|
|
18
17
|
const renderLevel = window?._SSR_DATA?.renderLevel || RenderLevel.CLIENT_RENDER;
|
|
19
18
|
const renderMode = window?._SSR_DATA?.mode || 'string';
|
|
20
|
-
if (
|
|
19
|
+
if ('stream' === renderMode) return streamSSRHydrate();
|
|
21
20
|
function streamSSRHydrate() {
|
|
22
21
|
if (renderLevel !== RenderLevel.SERVER_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
23
22
|
{
|
|
@@ -32,7 +31,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
32
31
|
function stringSSRHydrate() {
|
|
33
32
|
if (renderLevel === RenderLevel.CLIENT_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
34
33
|
if (renderLevel === RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
|
|
35
|
-
|
|
34
|
+
loadableReady(()=>{
|
|
36
35
|
const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
|
|
37
36
|
callback: callback,
|
|
38
37
|
children: App
|
|
@@ -40,14 +39,10 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
40
39
|
ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext)).then((root)=>{
|
|
41
40
|
resolve(root);
|
|
42
41
|
});
|
|
43
|
-
}) : loadableReady(()=>{
|
|
44
|
-
ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root)=>{
|
|
45
|
-
resolve(root);
|
|
46
|
-
});
|
|
47
42
|
});
|
|
48
43
|
});
|
|
49
44
|
console.warn(`unknow render level: ${renderLevel}, execute render()`);
|
|
50
45
|
return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
51
46
|
}
|
|
52
47
|
}
|
|
53
|
-
export { hydrateRoot
|
|
48
|
+
export { hydrateRoot };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
|
|
2
2
|
import cookie from "cookie";
|
|
3
|
+
import { createRoot, hydrateRoot } from "react-dom/client";
|
|
3
4
|
import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
|
|
4
5
|
import { getInitialContext } from "../context/runtime.mjs";
|
|
5
6
|
import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
|
|
6
|
-
import { hydrateRoot } from "./hydrate.mjs";
|
|
7
|
-
const IS_REACT18 = 'true' === process.env.IS_REACT18;
|
|
7
|
+
import { hydrateRoot as external_hydrate_mjs_hydrateRoot } from "./hydrate.mjs";
|
|
8
8
|
const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
|
|
9
9
|
const [key, value] = item.split('=');
|
|
10
10
|
if (key) res[key] = value;
|
|
@@ -62,39 +62,25 @@ async function render(App, id) {
|
|
|
62
62
|
await runBeforeRender(context);
|
|
63
63
|
const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
|
|
64
64
|
async function ModernRender(App) {
|
|
65
|
-
|
|
66
|
-
return renderFunc(App, rootElement);
|
|
65
|
+
return renderWithReact(App, rootElement);
|
|
67
66
|
}
|
|
68
|
-
async function ModernHydrate(App
|
|
69
|
-
|
|
70
|
-
return hydrateFunc(App, rootElement, callback);
|
|
67
|
+
async function ModernHydrate(App) {
|
|
68
|
+
return hydrateWithReact(App, rootElement);
|
|
71
69
|
}
|
|
72
|
-
if (window._SSR_DATA) return
|
|
70
|
+
if (window._SSR_DATA) return external_hydrate_mjs_hydrateRoot(App, context, ModernRender, ModernHydrate);
|
|
73
71
|
return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
74
72
|
}
|
|
75
73
|
throw Error('`render` function needs id in browser environment, it needs to be string or element');
|
|
76
74
|
}
|
|
77
|
-
async function
|
|
78
|
-
const
|
|
79
|
-
const root = ReactDOM.createRoot(rootElement);
|
|
75
|
+
async function renderWithReact(App, rootElement) {
|
|
76
|
+
const root = createRoot(rootElement);
|
|
80
77
|
root.render(App);
|
|
81
78
|
return root;
|
|
82
79
|
}
|
|
83
|
-
async function
|
|
84
|
-
const
|
|
85
|
-
ReactDOM.render(App, rootElement);
|
|
86
|
-
return rootElement;
|
|
87
|
-
}
|
|
88
|
-
async function hydrateWithReact18(App, rootElement) {
|
|
89
|
-
const ReactDOM = await import("react-dom/client");
|
|
90
|
-
const root = ReactDOM.hydrateRoot(rootElement, App, {
|
|
80
|
+
async function hydrateWithReact(App, rootElement) {
|
|
81
|
+
const root = hydrateRoot(rootElement, App, {
|
|
91
82
|
identifierPrefix: SSR_HYDRATION_ID_PREFIX
|
|
92
83
|
});
|
|
93
84
|
return root;
|
|
94
85
|
}
|
|
95
|
-
|
|
96
|
-
const ReactDOM = await import("react-dom");
|
|
97
|
-
const root = ReactDOM.hydrate(App, rootElement, callback);
|
|
98
|
-
return root;
|
|
99
|
-
}
|
|
100
|
-
export { hydrateWithReact17, hydrateWithReact18, render, renderWithReact17, renderWithReact18 };
|
|
86
|
+
export { hydrateWithReact, render, renderWithReact };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import __rslib_shim_module__ from "node:module";
|
|
2
2
|
const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(/*#__PURE__*/ (()=>import.meta.url)());
|
|
3
3
|
import path_0 from "path";
|
|
4
|
-
import { cleanRequireCache
|
|
4
|
+
import { cleanRequireCache } from "@modern-js/utils";
|
|
5
5
|
import { documentPlugin } from "../document/cli/index.mjs";
|
|
6
6
|
import { routerPlugin } from "../router/cli/index.mjs";
|
|
7
7
|
import { builderPluginAlias } from "./alias.mjs";
|
|
@@ -56,12 +56,10 @@ const runtimePlugin = (params)=>({
|
|
|
56
56
|
});
|
|
57
57
|
api.config(()=>{
|
|
58
58
|
const { appDirectory, metaName } = api.getAppContext();
|
|
59
|
-
const isReact18 = utils_isReact18(appDirectory);
|
|
60
|
-
process.env.IS_REACT18 = isReact18.toString();
|
|
61
59
|
return {
|
|
62
60
|
source: {
|
|
63
61
|
globalVars: {
|
|
64
|
-
'process.env.IS_REACT18':
|
|
62
|
+
'process.env.IS_REACT18': 'true'
|
|
65
63
|
},
|
|
66
64
|
include: [
|
|
67
65
|
new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
|
|
@@ -70,14 +68,6 @@ const runtimePlugin = (params)=>({
|
|
|
70
68
|
tools: {
|
|
71
69
|
bundlerChain: (chain)=>{
|
|
72
70
|
chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(path_0.resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
|
|
73
|
-
},
|
|
74
|
-
rspack: (_config, { appendPlugins, rspack })=>{
|
|
75
|
-
if (!isReact18) appendPlugins([
|
|
76
|
-
new rspack.IgnorePlugin({
|
|
77
|
-
resourceRegExp: /^react-dom\/client$/,
|
|
78
|
-
contextRegExp: /@modern-js\/runtime/
|
|
79
|
-
})
|
|
80
|
-
]);
|
|
81
71
|
}
|
|
82
72
|
}
|
|
83
73
|
};
|
|
@@ -4,7 +4,6 @@ import { loadableReady } from "@loadable/component";
|
|
|
4
4
|
import { RenderLevel } from "../constants.mjs";
|
|
5
5
|
import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
|
|
6
6
|
import { WithCallback } from "./withCallback.mjs";
|
|
7
|
-
const isReact18 = ()=>'true' === process.env.IS_REACT18;
|
|
8
7
|
function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
9
8
|
const hydrateContext = {
|
|
10
9
|
...context,
|
|
@@ -18,7 +17,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
18
17
|
};
|
|
19
18
|
const renderLevel = window?._SSR_DATA?.renderLevel || RenderLevel.CLIENT_RENDER;
|
|
20
19
|
const renderMode = window?._SSR_DATA?.mode || 'string';
|
|
21
|
-
if (
|
|
20
|
+
if ('stream' === renderMode) return streamSSRHydrate();
|
|
22
21
|
function streamSSRHydrate() {
|
|
23
22
|
if (renderLevel !== RenderLevel.SERVER_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
24
23
|
{
|
|
@@ -33,7 +32,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
33
32
|
function stringSSRHydrate() {
|
|
34
33
|
if (renderLevel === RenderLevel.CLIENT_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
35
34
|
if (renderLevel === RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
|
|
36
|
-
|
|
35
|
+
loadableReady(()=>{
|
|
37
36
|
const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
|
|
38
37
|
callback: callback,
|
|
39
38
|
children: App
|
|
@@ -41,14 +40,10 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
|
|
|
41
40
|
ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext)).then((root)=>{
|
|
42
41
|
resolve(root);
|
|
43
42
|
});
|
|
44
|
-
}) : loadableReady(()=>{
|
|
45
|
-
ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root)=>{
|
|
46
|
-
resolve(root);
|
|
47
|
-
});
|
|
48
43
|
});
|
|
49
44
|
});
|
|
50
45
|
console.warn(`unknow render level: ${renderLevel}, execute render()`);
|
|
51
46
|
return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
52
47
|
}
|
|
53
48
|
}
|
|
54
|
-
export { hydrateRoot
|
|
49
|
+
export { hydrateRoot };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import "node:module";
|
|
2
2
|
import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
|
|
3
3
|
import cookie from "cookie";
|
|
4
|
+
import { createRoot, hydrateRoot } from "react-dom/client";
|
|
4
5
|
import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
|
|
5
6
|
import { getInitialContext } from "../context/runtime.mjs";
|
|
6
7
|
import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
|
|
7
|
-
import { hydrateRoot } from "./hydrate.mjs";
|
|
8
|
-
const IS_REACT18 = 'true' === process.env.IS_REACT18;
|
|
8
|
+
import { hydrateRoot as external_hydrate_mjs_hydrateRoot } from "./hydrate.mjs";
|
|
9
9
|
const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
|
|
10
10
|
const [key, value] = item.split('=');
|
|
11
11
|
if (key) res[key] = value;
|
|
@@ -63,39 +63,25 @@ async function render(App, id) {
|
|
|
63
63
|
await runBeforeRender(context);
|
|
64
64
|
const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
|
|
65
65
|
async function ModernRender(App) {
|
|
66
|
-
|
|
67
|
-
return renderFunc(App, rootElement);
|
|
66
|
+
return renderWithReact(App, rootElement);
|
|
68
67
|
}
|
|
69
|
-
async function ModernHydrate(App
|
|
70
|
-
|
|
71
|
-
return hydrateFunc(App, rootElement, callback);
|
|
68
|
+
async function ModernHydrate(App) {
|
|
69
|
+
return hydrateWithReact(App, rootElement);
|
|
72
70
|
}
|
|
73
|
-
if (window._SSR_DATA) return
|
|
71
|
+
if (window._SSR_DATA) return external_hydrate_mjs_hydrateRoot(App, context, ModernRender, ModernHydrate);
|
|
74
72
|
return ModernRender(wrapRuntimeContextProvider(App, context));
|
|
75
73
|
}
|
|
76
74
|
throw Error('`render` function needs id in browser environment, it needs to be string or element');
|
|
77
75
|
}
|
|
78
|
-
async function
|
|
79
|
-
const
|
|
80
|
-
const root = ReactDOM.createRoot(rootElement);
|
|
76
|
+
async function renderWithReact(App, rootElement) {
|
|
77
|
+
const root = createRoot(rootElement);
|
|
81
78
|
root.render(App);
|
|
82
79
|
return root;
|
|
83
80
|
}
|
|
84
|
-
async function
|
|
85
|
-
const
|
|
86
|
-
ReactDOM.render(App, rootElement);
|
|
87
|
-
return rootElement;
|
|
88
|
-
}
|
|
89
|
-
async function hydrateWithReact18(App, rootElement) {
|
|
90
|
-
const ReactDOM = await import("react-dom/client");
|
|
91
|
-
const root = ReactDOM.hydrateRoot(rootElement, App, {
|
|
81
|
+
async function hydrateWithReact(App, rootElement) {
|
|
82
|
+
const root = hydrateRoot(rootElement, App, {
|
|
92
83
|
identifierPrefix: SSR_HYDRATION_ID_PREFIX
|
|
93
84
|
});
|
|
94
85
|
return root;
|
|
95
86
|
}
|
|
96
|
-
|
|
97
|
-
const ReactDOM = await import("react-dom");
|
|
98
|
-
const root = ReactDOM.hydrate(App, rootElement, callback);
|
|
99
|
-
return root;
|
|
100
|
-
}
|
|
101
|
-
export { hydrateWithReact17, hydrateWithReact18, render, renderWithReact17, renderWithReact18 };
|
|
87
|
+
export { hydrateWithReact, render, renderWithReact };
|
|
@@ -7,11 +7,11 @@ import { buildHtml } from "../shared.mjs";
|
|
|
7
7
|
import { checkIsNode, hasStylesheetLink, safeReplace } from "../utils.mjs";
|
|
8
8
|
import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
|
|
9
9
|
import { dirname as __rspack_dirname } from "node:path";
|
|
10
|
-
var
|
|
10
|
+
var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
|
|
11
11
|
const readAsset = async (chunk)=>{
|
|
12
12
|
const fs = await import("fs/promises");
|
|
13
13
|
const path = await import("path");
|
|
14
|
-
const filepath = path.join(
|
|
14
|
+
const filepath = path.join(__rspack_import_meta_dirname__, chunk);
|
|
15
15
|
return fs.readFile(filepath, 'utf-8');
|
|
16
16
|
};
|
|
17
17
|
const checkIsInline = (chunk, enableInline)=>{
|
|
@@ -3,7 +3,7 @@ import { ChunkExtractor } from "@loadable/server";
|
|
|
3
3
|
import { attributesToString, checkIsNode, hasStylesheetLink } from "../utils.mjs";
|
|
4
4
|
import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
|
|
5
5
|
import { dirname as __rspack_dirname } from "node:path";
|
|
6
|
-
var
|
|
6
|
+
var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
|
|
7
7
|
const extname = (uri)=>{
|
|
8
8
|
if ('string' != typeof uri || !uri.includes('.')) return '';
|
|
9
9
|
return `.${uri?.split('.').pop()}` || '';
|
|
@@ -17,7 +17,7 @@ const checkIsInline = (chunk, enableInline)=>{
|
|
|
17
17
|
const readAsset = async (chunk)=>{
|
|
18
18
|
const fs = await import("fs/promises");
|
|
19
19
|
const path = await import("path");
|
|
20
|
-
const filepath = path.resolve(
|
|
20
|
+
const filepath = path.resolve(__rspack_import_meta_dirname__, chunk.filename);
|
|
21
21
|
return fs.readFile(filepath, 'utf-8');
|
|
22
22
|
};
|
|
23
23
|
class LoadableCollector {
|
|
@@ -5,7 +5,7 @@ import { isRouteEntry } from "./entry.mjs";
|
|
|
5
5
|
import { handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints } from "./handler.mjs";
|
|
6
6
|
import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
|
|
7
7
|
import { dirname as __rspack_dirname } from "node:path";
|
|
8
|
-
var
|
|
8
|
+
var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
|
|
9
9
|
const routerPlugin = ()=>({
|
|
10
10
|
name: '@modern-js/plugin-router',
|
|
11
11
|
required: [
|
|
@@ -46,7 +46,7 @@ const routerPlugin = ()=>({
|
|
|
46
46
|
include: [
|
|
47
47
|
/[\\/]node_modules[\\/]react-router[\\/]/,
|
|
48
48
|
/[\\/]node_modules[\\/]react-router-dom[\\/]/,
|
|
49
|
-
node_path.resolve(
|
|
49
|
+
node_path.resolve(__rspack_import_meta_dirname__, '../runtime').replace('cjs', 'esm')
|
|
50
50
|
]
|
|
51
51
|
}
|
|
52
52
|
}));
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { Root } from 'react-dom/client';
|
|
3
3
|
import type { TRuntimeContext } from '../context/runtime';
|
|
4
|
-
export declare
|
|
5
|
-
export declare function hydrateRoot(App: React.ReactElement, context: TRuntimeContext, ModernRender: (App: React.ReactElement) => Promise<HTMLElement | Root>, ModernHydrate: (App: React.ReactElement, callback?: () => void) => Promise<HTMLElement | Root>): Promise<HTMLElement | Root>;
|
|
4
|
+
export declare function hydrateRoot(App: React.ReactElement, context: TRuntimeContext, ModernRender: (App: React.ReactElement) => Promise<HTMLElement | Root>, ModernHydrate: (App: React.ReactElement) => Promise<HTMLElement | Root>): Promise<HTMLElement | Root>;
|
|
@@ -3,7 +3,5 @@ export type RenderFunc = typeof render;
|
|
|
3
3
|
export declare function render(App: React.ReactElement<{
|
|
4
4
|
basename: string;
|
|
5
5
|
}>, id?: HTMLElement | string): Promise<HTMLElement | import("react-dom/client").Root>;
|
|
6
|
-
export declare function
|
|
7
|
-
export declare function
|
|
8
|
-
export declare function hydrateWithReact18(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;
|
|
9
|
-
export declare function hydrateWithReact17(App: React.ReactElement, rootElement: HTMLElement, callback?: () => void): Promise<any>;
|
|
6
|
+
export declare function renderWithReact(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;
|
|
7
|
+
export declare function hydrateWithReact(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "3.
|
|
18
|
+
"version": "3.6.0",
|
|
19
19
|
"engines": {
|
|
20
20
|
"node": ">=20"
|
|
21
21
|
},
|
|
@@ -215,21 +215,21 @@
|
|
|
215
215
|
"isbot": "3.8.0",
|
|
216
216
|
"react-helmet": "^6.1.0",
|
|
217
217
|
"react-is": "^18.3.1",
|
|
218
|
-
"@modern-js/plugin": "3.
|
|
219
|
-
"@modern-js/plugin-data-loader": "3.
|
|
220
|
-
"@modern-js/render": "3.
|
|
221
|
-
"@modern-js/runtime-utils": "3.
|
|
222
|
-
"@modern-js/types": "3.
|
|
223
|
-
"@modern-js/utils": "3.
|
|
218
|
+
"@modern-js/plugin": "3.6.0",
|
|
219
|
+
"@modern-js/plugin-data-loader": "3.6.0",
|
|
220
|
+
"@modern-js/render": "3.6.0",
|
|
221
|
+
"@modern-js/runtime-utils": "3.6.0",
|
|
222
|
+
"@modern-js/types": "3.6.0",
|
|
223
|
+
"@modern-js/utils": "3.6.0"
|
|
224
224
|
},
|
|
225
225
|
"peerDependencies": {
|
|
226
|
-
"react": ">=
|
|
227
|
-
"react-dom": ">=
|
|
226
|
+
"react": ">=18.0.0",
|
|
227
|
+
"react-dom": ">=18.0.0"
|
|
228
228
|
},
|
|
229
229
|
"devDependencies": {
|
|
230
230
|
"@remix-run/web-fetch": "^4.1.3",
|
|
231
231
|
"@rsbuild/core": "2.1.0",
|
|
232
|
-
"@rslib/core": "0.23.
|
|
232
|
+
"@rslib/core": "0.23.2",
|
|
233
233
|
"@testing-library/dom": "^10.4.1",
|
|
234
234
|
"@testing-library/react": "^16.3.2",
|
|
235
235
|
"@types/cookie": "0.6.0",
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
"react-dom": "^19.2.7",
|
|
241
241
|
"ts-node": "^10.9.2",
|
|
242
242
|
"typescript": "^5",
|
|
243
|
-
"@modern-js/app-tools": "3.
|
|
243
|
+
"@modern-js/app-tools": "3.6.0",
|
|
244
244
|
"@modern-js/rslib": "2.68.10",
|
|
245
245
|
"@scripts/rstest-config": "2.66.0"
|
|
246
246
|
},
|