@modern-js/runtime 3.1.0 → 3.1.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/dist/cjs/cli/code.js +9 -8
- package/dist/cjs/cli/template.js +46 -8
- package/dist/cjs/router/runtime/PrefetchLink.js +1 -4
- package/dist/esm/cli/code.mjs +9 -8
- package/dist/esm/cli/index.mjs +2 -1
- package/dist/esm/cli/ssr/index.mjs +2 -1
- package/dist/esm/cli/ssr/loadable-bundler-plugin.mjs +1 -1
- package/dist/esm/cli/template.mjs +48 -10
- package/dist/esm/core/constants.mjs +1 -1
- package/dist/esm/core/context/index.mjs +3 -3
- package/dist/esm/core/index.mjs +2 -3
- package/dist/esm/core/server/index.mjs +3 -2
- package/dist/esm/core/server/react/index.mjs +2 -3
- package/dist/esm/core/server/server.mjs +3 -4
- package/dist/esm/core/server/stream/shared.mjs +1 -1
- package/dist/esm/document/cli/index.mjs +2 -1
- package/dist/esm/exports/head.mjs +2 -1
- package/dist/esm/exports/loadable.mjs +2 -2
- package/dist/esm/index.mjs +5 -6
- package/dist/esm/internal.mjs +1 -2
- package/dist/esm/react-server.mjs +3 -4
- package/dist/esm/router/cli/code/getClientRoutes/index.mjs +1 -2
- package/dist/esm/router/cli/index.mjs +2 -1
- package/dist/esm/router/internal.mjs +1 -2
- package/dist/esm/router/runtime/DeferredDataScripts.mjs +1 -1
- package/dist/esm/router/runtime/DeferredDataScripts.node.mjs +1 -1
- package/dist/esm/router/runtime/PrefetchLink.mjs +1 -5
- package/dist/esm/router/runtime/index.mjs +3 -3
- package/dist/esm/router/runtime/internal.mjs +3 -2
- package/dist/esm/router/runtime/plugin.mjs +1 -1
- package/dist/esm-node/cli/code.mjs +9 -8
- package/dist/esm-node/cli/index.mjs +2 -1
- package/dist/esm-node/cli/ssr/index.mjs +2 -1
- package/dist/esm-node/cli/ssr/loadable-bundler-plugin.mjs +1 -1
- package/dist/esm-node/cli/template.mjs +48 -10
- package/dist/esm-node/core/constants.mjs +1 -1
- package/dist/esm-node/core/context/index.mjs +3 -3
- package/dist/esm-node/core/index.mjs +2 -3
- package/dist/esm-node/core/server/index.mjs +3 -2
- package/dist/esm-node/core/server/react/index.mjs +2 -3
- package/dist/esm-node/core/server/server.mjs +3 -4
- package/dist/esm-node/core/server/stream/shared.mjs +1 -1
- package/dist/esm-node/document/cli/index.mjs +2 -1
- package/dist/esm-node/exports/head.mjs +2 -1
- package/dist/esm-node/exports/loadable.mjs +2 -2
- package/dist/esm-node/index.mjs +5 -6
- package/dist/esm-node/internal.mjs +1 -2
- package/dist/esm-node/react-server.mjs +3 -4
- package/dist/esm-node/router/cli/code/getClientRoutes/index.mjs +1 -2
- package/dist/esm-node/router/cli/index.mjs +2 -1
- package/dist/esm-node/router/internal.mjs +1 -2
- package/dist/esm-node/router/runtime/DeferredDataScripts.mjs +1 -1
- package/dist/esm-node/router/runtime/DeferredDataScripts.node.mjs +1 -1
- package/dist/esm-node/router/runtime/PrefetchLink.mjs +1 -5
- package/dist/esm-node/router/runtime/index.mjs +3 -3
- package/dist/esm-node/router/runtime/internal.mjs +3 -2
- package/dist/esm-node/router/runtime/plugin.mjs +1 -1
- package/dist/types/cli/template.d.ts +2 -1
- package/package.json +10 -10
- package/{rstest.config.ts → rstest.config.mts} +0 -6
package/dist/cjs/cli/code.js
CHANGED
|
@@ -59,13 +59,7 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
59
59
|
nestedRoutesEntry
|
|
60
60
|
});
|
|
61
61
|
let indexCode = '';
|
|
62
|
-
indexCode =
|
|
63
|
-
metaName,
|
|
64
|
-
entryName,
|
|
65
|
-
mountId,
|
|
66
|
-
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
67
|
-
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
68
|
-
}) : external_template_js_namespaceObject.index({
|
|
62
|
+
indexCode = ssrMode || !config.server.rsc || customEntry ? external_template_js_namespaceObject.index({
|
|
69
63
|
srcDirectory,
|
|
70
64
|
internalSrcAlias,
|
|
71
65
|
metaName,
|
|
@@ -75,6 +69,12 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
75
69
|
mountId,
|
|
76
70
|
enableRsc: config.server.rsc,
|
|
77
71
|
isNestedRouter: !!entrypoint.nestedRoutesEntry
|
|
72
|
+
}) : external_template_js_namespaceObject.entryForCSRWithRSC({
|
|
73
|
+
metaName,
|
|
74
|
+
entryName,
|
|
75
|
+
mountId,
|
|
76
|
+
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
77
|
+
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
78
78
|
});
|
|
79
79
|
const indexFile = external_path_default().resolve(internalDirectory, `./${entryName}/${external_constants_js_namespaceObject.ENTRY_POINT_FILE_NAME}`);
|
|
80
80
|
await utils_namespaceObject.fs.outputFile(indexFile, indexCode, 'utf8');
|
|
@@ -141,7 +141,8 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
141
141
|
});
|
|
142
142
|
await utils_namespaceObject.fs.outputFile(AppProxyPath, appProxyCode);
|
|
143
143
|
contextCode = external_template_js_namespaceObject.runtimeGlobalContextForRSCClient({
|
|
144
|
-
metaName
|
|
144
|
+
metaName,
|
|
145
|
+
customEntry
|
|
145
146
|
});
|
|
146
147
|
const contextServerCode = external_template_js_namespaceObject.runtimeGlobalContextForRSCServer({
|
|
147
148
|
metaName
|
package/dist/cjs/cli/template.js
CHANGED
|
@@ -197,16 +197,54 @@ const runtimeGlobalContextForRSCServer = ({ metaName })=>`
|
|
|
197
197
|
App: DefaultRoot,
|
|
198
198
|
RSCRoot: AppProxy,
|
|
199
199
|
});`;
|
|
200
|
-
const runtimeGlobalContextForRSCClient = ({ metaName })=>`
|
|
201
|
-
|
|
202
|
-
|
|
200
|
+
const runtimeGlobalContextForRSCClient = ({ metaName, customEntry })=>`
|
|
201
|
+
${customEntry ? `import {
|
|
202
|
+
RscClientRoot,
|
|
203
|
+
createFromFetch,
|
|
204
|
+
createFromReadableStream,
|
|
205
|
+
isRedirectResponse,
|
|
206
|
+
rscStream,
|
|
207
|
+
callServer,
|
|
208
|
+
setServerCallback,
|
|
209
|
+
} from '@${metaName}/runtime/rsc/client';` : ''}
|
|
210
|
+
import { createElement, Fragment } from 'react';
|
|
211
|
+
import { setGlobalContext } from '@${metaName}/runtime/context';
|
|
203
212
|
|
|
204
|
-
|
|
205
|
-
createElement(Fragment, null, children);
|
|
213
|
+
${customEntry ? 'setServerCallback(callServer);' : ''}
|
|
206
214
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
215
|
+
${customEntry ? `const handleRedirectResponse = (res: Response) => {
|
|
216
|
+
const { headers } = res;
|
|
217
|
+
const location = headers.get('X-Modernjs-Redirect');
|
|
218
|
+
const baseUrl = headers.get('X-Modernjs-BaseUrl');
|
|
219
|
+
if (location) {
|
|
220
|
+
if (baseUrl && baseUrl !== '/') {
|
|
221
|
+
window.location.replace(baseUrl + location);
|
|
222
|
+
} else {
|
|
223
|
+
window.location.replace(location);
|
|
224
|
+
}
|
|
225
|
+
return res;
|
|
226
|
+
}
|
|
227
|
+
return res;
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
const data = ${process.env.MODERN_DISABLE_INJECT_RSC_DATA ? `createFromFetch(
|
|
231
|
+
fetch(location.pathname, {
|
|
232
|
+
headers: {
|
|
233
|
+
'x-rsc-tree': 'true',
|
|
234
|
+
},
|
|
235
|
+
}).then(handleRedirectResponse),
|
|
236
|
+
)` : `createFromReadableStream(rscStream, {
|
|
237
|
+
callServer: callServer,
|
|
238
|
+
})`};` : ''}
|
|
239
|
+
|
|
240
|
+
const DefaultRoot = ({ children }: { children?: ReactNode }) =>
|
|
241
|
+
createElement(Fragment, null, children);
|
|
242
|
+
|
|
243
|
+
${customEntry ? 'const RSCRoot = () => createElement(RscClientRoot, { rscPayload: data });' : ''}
|
|
244
|
+
|
|
245
|
+
setGlobalContext({
|
|
246
|
+
App: ${customEntry ? 'RSCRoot' : 'DefaultRoot'}
|
|
247
|
+
});`;
|
|
210
248
|
const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry })=>`
|
|
211
249
|
import App from '${(0, utils_namespaceObject.formatImportPath)(customEntry ? entry.replace(/entry\.[tj]sx/, 'App').replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace('.tsx', ''))}';
|
|
212
250
|
import React from 'react';
|
|
@@ -18,9 +18,6 @@ var __webpack_require__ = {};
|
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
})();
|
|
21
|
-
(()=>{
|
|
22
|
-
__webpack_require__.e = ()=>Promise.resolve();
|
|
23
|
-
})();
|
|
24
21
|
(()=>{
|
|
25
22
|
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
26
23
|
})();
|
|
@@ -183,7 +180,7 @@ const createPrefetchLink = (Link)=>/*#__PURE__*/ external_react_default().forwar
|
|
|
183
180
|
...props,
|
|
184
181
|
...prefetchHandlers
|
|
185
182
|
}),
|
|
186
|
-
shouldPrefetch &&
|
|
183
|
+
shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PrefetchPageLinks, {
|
|
187
184
|
path: resolvedPath
|
|
188
185
|
}) : null
|
|
189
186
|
]
|
package/dist/esm/cli/code.mjs
CHANGED
|
@@ -21,13 +21,7 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
21
21
|
nestedRoutesEntry
|
|
22
22
|
});
|
|
23
23
|
let indexCode = '';
|
|
24
|
-
indexCode =
|
|
25
|
-
metaName,
|
|
26
|
-
entryName,
|
|
27
|
-
mountId,
|
|
28
|
-
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
29
|
-
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
30
|
-
}) : index({
|
|
24
|
+
indexCode = ssrMode || !config.server.rsc || customEntry ? index({
|
|
31
25
|
srcDirectory,
|
|
32
26
|
internalSrcAlias,
|
|
33
27
|
metaName,
|
|
@@ -37,6 +31,12 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
37
31
|
mountId,
|
|
38
32
|
enableRsc: config.server.rsc,
|
|
39
33
|
isNestedRouter: !!entrypoint.nestedRoutesEntry
|
|
34
|
+
}) : entryForCSRWithRSC({
|
|
35
|
+
metaName,
|
|
36
|
+
entryName,
|
|
37
|
+
mountId,
|
|
38
|
+
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
39
|
+
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
40
40
|
});
|
|
41
41
|
const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
|
|
42
42
|
await fs.outputFile(indexFile, indexCode, 'utf8');
|
|
@@ -103,7 +103,8 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
103
103
|
});
|
|
104
104
|
await fs.outputFile(AppProxyPath, appProxyCode);
|
|
105
105
|
contextCode = runtimeGlobalContextForRSCClient({
|
|
106
|
-
metaName
|
|
106
|
+
metaName,
|
|
107
|
+
customEntry
|
|
107
108
|
});
|
|
108
109
|
const contextServerCode = runtimeGlobalContextForRSCServer({
|
|
109
110
|
metaName
|
package/dist/esm/cli/index.mjs
CHANGED
|
@@ -89,4 +89,5 @@ const runtimePlugin = (params)=>({
|
|
|
89
89
|
}
|
|
90
90
|
});
|
|
91
91
|
const cli = runtimePlugin;
|
|
92
|
-
export
|
|
92
|
+
export default cli;
|
|
93
|
+
export { documentPlugin, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin };
|
|
@@ -152,16 +152,54 @@ const runtimeGlobalContextForRSCServer = ({ metaName })=>`
|
|
|
152
152
|
App: DefaultRoot,
|
|
153
153
|
RSCRoot: AppProxy,
|
|
154
154
|
});`;
|
|
155
|
-
const runtimeGlobalContextForRSCClient = ({ metaName })=>`
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
155
|
+
const runtimeGlobalContextForRSCClient = ({ metaName, customEntry })=>`
|
|
156
|
+
${customEntry ? `import {
|
|
157
|
+
RscClientRoot,
|
|
158
|
+
createFromFetch,
|
|
159
|
+
createFromReadableStream,
|
|
160
|
+
isRedirectResponse,
|
|
161
|
+
rscStream,
|
|
162
|
+
callServer,
|
|
163
|
+
setServerCallback,
|
|
164
|
+
} from '@${metaName}/runtime/rsc/client';` : ''}
|
|
165
|
+
import { createElement, Fragment } from 'react';
|
|
166
|
+
import { setGlobalContext } from '@${metaName}/runtime/context';
|
|
167
|
+
|
|
168
|
+
${customEntry ? 'setServerCallback(callServer);' : ''}
|
|
169
|
+
|
|
170
|
+
${customEntry ? `const handleRedirectResponse = (res: Response) => {
|
|
171
|
+
const { headers } = res;
|
|
172
|
+
const location = headers.get('X-Modernjs-Redirect');
|
|
173
|
+
const baseUrl = headers.get('X-Modernjs-BaseUrl');
|
|
174
|
+
if (location) {
|
|
175
|
+
if (baseUrl && baseUrl !== '/') {
|
|
176
|
+
window.location.replace(baseUrl + location);
|
|
177
|
+
} else {
|
|
178
|
+
window.location.replace(location);
|
|
179
|
+
}
|
|
180
|
+
return res;
|
|
181
|
+
}
|
|
182
|
+
return res;
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
const data = ${process.env.MODERN_DISABLE_INJECT_RSC_DATA ? `createFromFetch(
|
|
186
|
+
fetch(location.pathname, {
|
|
187
|
+
headers: {
|
|
188
|
+
'x-rsc-tree': 'true',
|
|
189
|
+
},
|
|
190
|
+
}).then(handleRedirectResponse),
|
|
191
|
+
)` : `createFromReadableStream(rscStream, {
|
|
192
|
+
callServer: callServer,
|
|
193
|
+
})`};` : ''}
|
|
194
|
+
|
|
195
|
+
const DefaultRoot = ({ children }: { children?: ReactNode }) =>
|
|
196
|
+
createElement(Fragment, null, children);
|
|
197
|
+
|
|
198
|
+
${customEntry ? 'const RSCRoot = () => createElement(RscClientRoot, { rscPayload: data });' : ''}
|
|
199
|
+
|
|
200
|
+
setGlobalContext({
|
|
201
|
+
App: ${customEntry ? 'RSCRoot' : 'DefaultRoot'}
|
|
202
|
+
});`;
|
|
165
203
|
const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry })=>`
|
|
166
204
|
import App from '${formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, 'App').replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace('.tsx', ''))}';
|
|
167
205
|
import React from 'react';
|
|
@@ -5,4 +5,4 @@ var constants_RenderLevel = /*#__PURE__*/ function(RenderLevel) {
|
|
|
5
5
|
}({});
|
|
6
6
|
const SSR_DATA_JSON_ID = '__MODERN_SSR_DATA__';
|
|
7
7
|
const ROUTER_DATA_JSON_ID = '__MODERN_ROUTER_DATA__';
|
|
8
|
-
export { ROUTER_DATA_JSON_ID, constants_RenderLevel as RenderLevel
|
|
8
|
+
export { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, constants_RenderLevel as RenderLevel };
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { InternalRuntimeContext, RuntimeContext, getInitialContext } from "./runtime.mjs";
|
|
2
|
-
import { getServerPayload, setServerPayload } from "./serverPayload/index.mjs";
|
|
3
1
|
const globalContext = {};
|
|
4
2
|
function getGlobalIsRscClient() {
|
|
5
3
|
return globalContext.isRscClient;
|
|
@@ -42,4 +40,6 @@ function getGlobalLayoutApp() {
|
|
|
42
40
|
function getGlobalBasename() {
|
|
43
41
|
return globalContext.basename;
|
|
44
42
|
}
|
|
45
|
-
export { InternalRuntimeContext, RuntimeContext,
|
|
43
|
+
export { InternalRuntimeContext, RuntimeContext, getInitialContext } from "./runtime.mjs";
|
|
44
|
+
export { getServerPayload, setServerPayload } from "./serverPayload/index.mjs";
|
|
45
|
+
export { getCurrentEntryName, getGlobalApp, getGlobalBasename, getGlobalEnableRsc, getGlobalInternalRuntimeContext, getGlobalIsRscClient, getGlobalLayoutApp, getGlobalRSCRoot, getGlobalRoutes, setGlobalContext, setGlobalInternalRuntimeContext };
|
package/dist/esm/core/index.mjs
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export { RuntimeContext, defineRuntimeConfig, useRuntimeContext };
|
|
1
|
+
export { defineRuntimeConfig } from "./config.mjs";
|
|
2
|
+
export { RuntimeContext, useRuntimeContext } from "./context/runtime.mjs";
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { NoSSR, NoSSRCache } from "./react/index.mjs";
|
|
2
1
|
const ssr = (_config)=>({
|
|
3
2
|
name: '@modern-js/plugin-ssr',
|
|
4
3
|
setup: (_api)=>{}
|
|
5
4
|
});
|
|
6
5
|
const server = ssr;
|
|
7
|
-
export { NoSSR, NoSSRCache
|
|
6
|
+
export { NoSSR, NoSSRCache } from "./react/index.mjs";
|
|
7
|
+
export default server;
|
|
8
|
+
export { ssr };
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export { NoSSR, NoSSRCache };
|
|
1
|
+
export { NoSSR } from "./nossr/index.mjs";
|
|
2
|
+
export { NoSSRCache } from "./no-ssr-cache/index.mjs";
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export { createRequestHandler, renderStreaming, renderString };
|
|
1
|
+
export { renderString } from "./string/index.mjs";
|
|
2
|
+
export { renderStreaming } from "./stream/index.mjs";
|
|
3
|
+
export { createRequestHandler } from "./requestHandler.mjs";
|
|
@@ -105,4 +105,4 @@ function createRenderStreaming(createReadableStreamPromise) {
|
|
|
105
105
|
return stream;
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
|
-
export {
|
|
108
|
+
export { createRenderStreaming, encodeForWebStream, getReadableStreamFromString, resolveStreamingMode, shared_ShellChunkStatus as ShellChunkStatus };
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export { RuntimeContext, defineRuntimeConfig, getMonitors, getRequest, isBrowser, redirect, setHeaders, setStatus, useRuntimeContext };
|
|
1
|
+
export { isBrowser } from "./common.mjs";
|
|
2
|
+
export { getMonitors } from "./core/context/monitors/index.mjs";
|
|
3
|
+
export { getRequest } from "./core/context/request/index.mjs";
|
|
4
|
+
export { redirect, setHeaders, setStatus } from "./core/context/response/index.mjs";
|
|
5
|
+
export { RuntimeContext, defineRuntimeConfig, useRuntimeContext } from "./core/index.mjs";
|
package/dist/esm/internal.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { InternalRuntimeContext };
|
|
1
|
+
export { InternalRuntimeContext } from "./core/context/runtime.mjs";
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export { getMonitors, getRequest, redirect, setHeaders, setStatus };
|
|
1
|
+
export { getRequest } from "./core/context/request/index.mjs";
|
|
2
|
+
export { getMonitors } from "./core/context/monitors/index.mjs";
|
|
3
|
+
export { redirect, setHeaders, setStatus } from "./core/context/response/index.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { getClientRoutes };
|
|
1
|
+
export { getClientRoutes } from "./getRoutes.mjs";
|
|
@@ -77,4 +77,5 @@ const routerPlugin = ()=>({
|
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
79
|
const cli = routerPlugin;
|
|
80
|
-
export
|
|
80
|
+
export default cli;
|
|
81
|
+
export { handleFileChange, handleModifyEntrypoints, isRouteEntry, routerPlugin };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const DeferredDataScripts = ()=>null;
|
|
2
|
-
export
|
|
2
|
+
export default DeferredDataScripts;
|
|
@@ -3,10 +3,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Link as router_Link, NavLink, matchRoutes, useHref, useMatches, useResolvedPath } from "@modern-js/runtime-utils/router";
|
|
4
4
|
import react, { useContext, useMemo } from "react";
|
|
5
5
|
import { InternalRuntimeContext } from "../../core/context/index.mjs";
|
|
6
|
-
var __webpack_require__ = {};
|
|
7
|
-
(()=>{
|
|
8
|
-
__webpack_require__.e = ()=>Promise.resolve();
|
|
9
|
-
})();
|
|
10
6
|
function composeEventHandlers(theirHandler, ourHandler) {
|
|
11
7
|
return (event)=>{
|
|
12
8
|
theirHandler?.(event);
|
|
@@ -145,7 +141,7 @@ const createPrefetchLink = (Link)=>/*#__PURE__*/ react.forwardRef(({ to, prefetc
|
|
|
145
141
|
...props,
|
|
146
142
|
...prefetchHandlers
|
|
147
143
|
}),
|
|
148
|
-
shouldPrefetch &&
|
|
144
|
+
shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /*#__PURE__*/ jsx(PrefetchPageLinks, {
|
|
149
145
|
path: resolvedPath
|
|
150
146
|
}) : null
|
|
151
147
|
]
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useRouteLoaderData } from "@modern-js/runtime-utils/router";
|
|
2
|
-
import { Link, NavLink } from "./PrefetchLink.mjs";
|
|
3
1
|
export * from "@modern-js/runtime-utils/router";
|
|
4
2
|
export * from "./withRouter.mjs";
|
|
3
|
+
import { useRouteLoaderData } from "@modern-js/runtime-utils/router";
|
|
5
4
|
const runtime_useRouteLoaderData = (routeId)=>{
|
|
6
5
|
const realRouteId = routeId.replace(/\[(.*?)\]/g, '($1)');
|
|
7
6
|
return useRouteLoaderData(realRouteId);
|
|
8
7
|
};
|
|
9
|
-
export { Link, NavLink
|
|
8
|
+
export { Link, NavLink } from "./PrefetchLink.mjs";
|
|
9
|
+
export { runtime_useRouteLoaderData as useRouteLoaderData };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { modifyRoutes, routerPlugin } from "./plugin.mjs";
|
|
2
|
-
import { renderRoutes } from "./utils.mjs";
|
|
3
2
|
const internal = routerPlugin;
|
|
4
|
-
export {
|
|
3
|
+
export { renderRoutes } from "./utils.mjs";
|
|
4
|
+
export default internal;
|
|
5
|
+
export { modifyRoutes, routerPlugin };
|
|
@@ -2,11 +2,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { merge } from "@modern-js/runtime-utils/merge";
|
|
3
3
|
import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
|
|
4
4
|
import { normalizePathname } from "@modern-js/runtime-utils/url";
|
|
5
|
+
import * as __rspack_external_react from "react";
|
|
5
6
|
import { InternalRuntimeContext, getGlobalIsRscClient, getGlobalLayoutApp, getGlobalRoutes } from "../../core/context/index.mjs";
|
|
6
7
|
import { modifyRoutes, onBeforeCreateRoutes } from "./hooks.mjs";
|
|
7
8
|
import { createClientRouterFromPayload } from "./rsc-router.mjs";
|
|
8
9
|
import { createRouteObjectsFromConfig, deserializeErrors, renderRoutes, urlJoin } from "./utils.mjs";
|
|
9
|
-
import * as __rspack_external_react from "react";
|
|
10
10
|
let finalRouteConfig = {
|
|
11
11
|
routes: []
|
|
12
12
|
};
|
|
@@ -22,13 +22,7 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
22
22
|
nestedRoutesEntry
|
|
23
23
|
});
|
|
24
24
|
let indexCode = '';
|
|
25
|
-
indexCode =
|
|
26
|
-
metaName,
|
|
27
|
-
entryName,
|
|
28
|
-
mountId,
|
|
29
|
-
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
30
|
-
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
31
|
-
}) : index({
|
|
25
|
+
indexCode = ssrMode || !config.server.rsc || customEntry ? index({
|
|
32
26
|
srcDirectory,
|
|
33
27
|
internalSrcAlias,
|
|
34
28
|
metaName,
|
|
@@ -38,6 +32,12 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
38
32
|
mountId,
|
|
39
33
|
enableRsc: config.server.rsc,
|
|
40
34
|
isNestedRouter: !!entrypoint.nestedRoutesEntry
|
|
35
|
+
}) : entryForCSRWithRSC({
|
|
36
|
+
metaName,
|
|
37
|
+
entryName,
|
|
38
|
+
mountId,
|
|
39
|
+
urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
|
|
40
|
+
isNestedRouter: entrypoint.nestedRoutesEntry
|
|
41
41
|
});
|
|
42
42
|
const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
|
|
43
43
|
await fs.outputFile(indexFile, indexCode, 'utf8');
|
|
@@ -104,7 +104,8 @@ const generateCode = async (entrypoints, appContext, config, hooks)=>{
|
|
|
104
104
|
});
|
|
105
105
|
await fs.outputFile(AppProxyPath, appProxyCode);
|
|
106
106
|
contextCode = runtimeGlobalContextForRSCClient({
|
|
107
|
-
metaName
|
|
107
|
+
metaName,
|
|
108
|
+
customEntry
|
|
108
109
|
});
|
|
109
110
|
const contextServerCode = runtimeGlobalContextForRSCServer({
|
|
110
111
|
metaName
|
|
@@ -91,4 +91,5 @@ const runtimePlugin = (params)=>({
|
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
const cli = runtimePlugin;
|
|
94
|
-
export
|
|
94
|
+
export default cli;
|
|
95
|
+
export { documentPlugin, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin };
|
|
@@ -153,16 +153,54 @@ const runtimeGlobalContextForRSCServer = ({ metaName })=>`
|
|
|
153
153
|
App: DefaultRoot,
|
|
154
154
|
RSCRoot: AppProxy,
|
|
155
155
|
});`;
|
|
156
|
-
const runtimeGlobalContextForRSCClient = ({ metaName })=>`
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
156
|
+
const runtimeGlobalContextForRSCClient = ({ metaName, customEntry })=>`
|
|
157
|
+
${customEntry ? `import {
|
|
158
|
+
RscClientRoot,
|
|
159
|
+
createFromFetch,
|
|
160
|
+
createFromReadableStream,
|
|
161
|
+
isRedirectResponse,
|
|
162
|
+
rscStream,
|
|
163
|
+
callServer,
|
|
164
|
+
setServerCallback,
|
|
165
|
+
} from '@${metaName}/runtime/rsc/client';` : ''}
|
|
166
|
+
import { createElement, Fragment } from 'react';
|
|
167
|
+
import { setGlobalContext } from '@${metaName}/runtime/context';
|
|
168
|
+
|
|
169
|
+
${customEntry ? 'setServerCallback(callServer);' : ''}
|
|
170
|
+
|
|
171
|
+
${customEntry ? `const handleRedirectResponse = (res: Response) => {
|
|
172
|
+
const { headers } = res;
|
|
173
|
+
const location = headers.get('X-Modernjs-Redirect');
|
|
174
|
+
const baseUrl = headers.get('X-Modernjs-BaseUrl');
|
|
175
|
+
if (location) {
|
|
176
|
+
if (baseUrl && baseUrl !== '/') {
|
|
177
|
+
window.location.replace(baseUrl + location);
|
|
178
|
+
} else {
|
|
179
|
+
window.location.replace(location);
|
|
180
|
+
}
|
|
181
|
+
return res;
|
|
182
|
+
}
|
|
183
|
+
return res;
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
const data = ${process.env.MODERN_DISABLE_INJECT_RSC_DATA ? `createFromFetch(
|
|
187
|
+
fetch(location.pathname, {
|
|
188
|
+
headers: {
|
|
189
|
+
'x-rsc-tree': 'true',
|
|
190
|
+
},
|
|
191
|
+
}).then(handleRedirectResponse),
|
|
192
|
+
)` : `createFromReadableStream(rscStream, {
|
|
193
|
+
callServer: callServer,
|
|
194
|
+
})`};` : ''}
|
|
195
|
+
|
|
196
|
+
const DefaultRoot = ({ children }: { children?: ReactNode }) =>
|
|
197
|
+
createElement(Fragment, null, children);
|
|
198
|
+
|
|
199
|
+
${customEntry ? 'const RSCRoot = () => createElement(RscClientRoot, { rscPayload: data });' : ''}
|
|
200
|
+
|
|
201
|
+
setGlobalContext({
|
|
202
|
+
App: ${customEntry ? 'RSCRoot' : 'DefaultRoot'}
|
|
203
|
+
});`;
|
|
166
204
|
const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry })=>`
|
|
167
205
|
import App from '${formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, 'App').replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace('.tsx', ''))}';
|
|
168
206
|
import React from 'react';
|
|
@@ -6,4 +6,4 @@ var constants_RenderLevel = /*#__PURE__*/ function(RenderLevel) {
|
|
|
6
6
|
}({});
|
|
7
7
|
const SSR_DATA_JSON_ID = '__MODERN_SSR_DATA__';
|
|
8
8
|
const ROUTER_DATA_JSON_ID = '__MODERN_ROUTER_DATA__';
|
|
9
|
-
export { ROUTER_DATA_JSON_ID, constants_RenderLevel as RenderLevel
|
|
9
|
+
export { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, constants_RenderLevel as RenderLevel };
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
import { InternalRuntimeContext, RuntimeContext, getInitialContext } from "./runtime.mjs";
|
|
3
|
-
import { getServerPayload, setServerPayload } from "./serverPayload/index.mjs";
|
|
4
2
|
const globalContext = {};
|
|
5
3
|
function getGlobalIsRscClient() {
|
|
6
4
|
return globalContext.isRscClient;
|
|
@@ -43,4 +41,6 @@ function getGlobalLayoutApp() {
|
|
|
43
41
|
function getGlobalBasename() {
|
|
44
42
|
return globalContext.basename;
|
|
45
43
|
}
|
|
46
|
-
export { InternalRuntimeContext, RuntimeContext,
|
|
44
|
+
export { InternalRuntimeContext, RuntimeContext, getInitialContext } from "./runtime.mjs";
|
|
45
|
+
export { getServerPayload, setServerPayload } from "./serverPayload/index.mjs";
|
|
46
|
+
export { getCurrentEntryName, getGlobalApp, getGlobalBasename, getGlobalEnableRsc, getGlobalInternalRuntimeContext, getGlobalIsRscClient, getGlobalLayoutApp, getGlobalRSCRoot, getGlobalRoutes, setGlobalContext, setGlobalInternalRuntimeContext };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export { RuntimeContext, defineRuntimeConfig, useRuntimeContext };
|
|
2
|
+
export { defineRuntimeConfig } from "./config.mjs";
|
|
3
|
+
export { RuntimeContext, useRuntimeContext } from "./context/runtime.mjs";
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
import { NoSSR, NoSSRCache } from "./react/index.mjs";
|
|
3
2
|
const ssr = (_config)=>({
|
|
4
3
|
name: '@modern-js/plugin-ssr',
|
|
5
4
|
setup: (_api)=>{}
|
|
6
5
|
});
|
|
7
6
|
const server = ssr;
|
|
8
|
-
export { NoSSR, NoSSRCache
|
|
7
|
+
export { NoSSR, NoSSRCache } from "./react/index.mjs";
|
|
8
|
+
export default server;
|
|
9
|
+
export { ssr };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export { createRequestHandler, renderStreaming, renderString };
|
|
2
|
+
export { renderString } from "./string/index.mjs";
|
|
3
|
+
export { renderStreaming } from "./stream/index.mjs";
|
|
4
|
+
export { createRequestHandler } from "./requestHandler.mjs";
|
|
@@ -106,4 +106,4 @@ function createRenderStreaming(createReadableStreamPromise) {
|
|
|
106
106
|
return stream;
|
|
107
107
|
};
|
|
108
108
|
}
|
|
109
|
-
export {
|
|
109
|
+
export { createRenderStreaming, encodeForWebStream, getReadableStreamFromString, resolveStreamingMode, shared_ShellChunkStatus as ShellChunkStatus };
|
package/dist/esm-node/index.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export { RuntimeContext, defineRuntimeConfig, getMonitors, getRequest, isBrowser, redirect, setHeaders, setStatus, useRuntimeContext };
|
|
2
|
+
export { isBrowser } from "./common.mjs";
|
|
3
|
+
export { getMonitors } from "./core/context/monitors/index.mjs";
|
|
4
|
+
export { getRequest } from "./core/context/request/index.mjs";
|
|
5
|
+
export { redirect, setHeaders, setStatus } from "./core/context/response/index.mjs";
|
|
6
|
+
export { RuntimeContext, defineRuntimeConfig, useRuntimeContext } from "./core/index.mjs";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export { getMonitors, getRequest, redirect, setHeaders, setStatus };
|
|
2
|
+
export { getRequest } from "./core/context/request/index.mjs";
|
|
3
|
+
export { getMonitors } from "./core/context/monitors/index.mjs";
|
|
4
|
+
export { redirect, setHeaders, setStatus } from "./core/context/response/index.mjs";
|
|
@@ -81,4 +81,5 @@ const routerPlugin = ()=>({
|
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
const cli = routerPlugin;
|
|
84
|
-
export
|
|
84
|
+
export default cli;
|
|
85
|
+
export { handleFileChange, handleModifyEntrypoints, isRouteEntry, routerPlugin };
|
|
@@ -4,10 +4,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { Link as router_Link, NavLink, matchRoutes, useHref, useMatches, useResolvedPath } from "@modern-js/runtime-utils/router";
|
|
5
5
|
import react, { useContext, useMemo } from "react";
|
|
6
6
|
import { InternalRuntimeContext } from "../../core/context/index.mjs";
|
|
7
|
-
var __webpack_require__ = {};
|
|
8
|
-
(()=>{
|
|
9
|
-
__webpack_require__.e = ()=>Promise.resolve();
|
|
10
|
-
})();
|
|
11
7
|
function composeEventHandlers(theirHandler, ourHandler) {
|
|
12
8
|
return (event)=>{
|
|
13
9
|
theirHandler?.(event);
|
|
@@ -146,7 +142,7 @@ const createPrefetchLink = (Link)=>/*#__PURE__*/ react.forwardRef(({ to, prefetc
|
|
|
146
142
|
...props,
|
|
147
143
|
...prefetchHandlers
|
|
148
144
|
}),
|
|
149
|
-
shouldPrefetch &&
|
|
145
|
+
shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /*#__PURE__*/ jsx(PrefetchPageLinks, {
|
|
150
146
|
path: resolvedPath
|
|
151
147
|
}) : null
|
|
152
148
|
]
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
import { useRouteLoaderData } from "@modern-js/runtime-utils/router";
|
|
3
|
-
import { Link, NavLink } from "./PrefetchLink.mjs";
|
|
4
2
|
export * from "@modern-js/runtime-utils/router";
|
|
5
3
|
export * from "./withRouter.mjs";
|
|
4
|
+
import { useRouteLoaderData } from "@modern-js/runtime-utils/router";
|
|
6
5
|
const runtime_useRouteLoaderData = (routeId)=>{
|
|
7
6
|
const realRouteId = routeId.replace(/\[(.*?)\]/g, '($1)');
|
|
8
7
|
return useRouteLoaderData(realRouteId);
|
|
9
8
|
};
|
|
10
|
-
export { Link, NavLink
|
|
9
|
+
export { Link, NavLink } from "./PrefetchLink.mjs";
|
|
10
|
+
export { runtime_useRouteLoaderData as useRouteLoaderData };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "node:module";
|
|
2
2
|
import { modifyRoutes, routerPlugin } from "./plugin.mjs";
|
|
3
|
-
import { renderRoutes } from "./utils.mjs";
|
|
4
3
|
const internal = routerPlugin;
|
|
5
|
-
export {
|
|
4
|
+
export { renderRoutes } from "./utils.mjs";
|
|
5
|
+
export default internal;
|
|
6
|
+
export { modifyRoutes, routerPlugin };
|
|
@@ -3,11 +3,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { merge } from "@modern-js/runtime-utils/merge";
|
|
4
4
|
import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
|
|
5
5
|
import { normalizePathname } from "@modern-js/runtime-utils/url";
|
|
6
|
+
import * as __rspack_external_react from "react";
|
|
6
7
|
import { InternalRuntimeContext, getGlobalIsRscClient, getGlobalLayoutApp, getGlobalRoutes } from "../../core/context/index.mjs";
|
|
7
8
|
import { modifyRoutes, onBeforeCreateRoutes } from "./hooks.mjs";
|
|
8
9
|
import { createClientRouterFromPayload } from "./rsc-router.mjs";
|
|
9
10
|
import { createRouteObjectsFromConfig, deserializeErrors, renderRoutes, urlJoin } from "./utils.mjs";
|
|
10
|
-
import * as __rspack_external_react from "react";
|
|
11
11
|
let finalRouteConfig = {
|
|
12
12
|
routes: []
|
|
13
13
|
};
|
|
@@ -38,8 +38,9 @@ export declare const runtimeGlobalContext: ({ entryName, srcDirectory, internalS
|
|
|
38
38
|
export declare const runtimeGlobalContextForRSCServer: ({ metaName, }: {
|
|
39
39
|
metaName: string;
|
|
40
40
|
}) => string;
|
|
41
|
-
export declare const runtimeGlobalContextForRSCClient: ({ metaName, }: {
|
|
41
|
+
export declare const runtimeGlobalContextForRSCClient: ({ metaName, customEntry, }: {
|
|
42
42
|
metaName: string;
|
|
43
|
+
customEntry?: boolean;
|
|
43
44
|
}) => string;
|
|
44
45
|
export declare const AppProxyForRSC: ({ srcDirectory, internalSrcAlias, entry, customEntry, }: {
|
|
45
46
|
srcDirectory: string;
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "3.1.
|
|
18
|
+
"version": "3.1.1",
|
|
19
19
|
"engines": {
|
|
20
20
|
"node": ">=20"
|
|
21
21
|
},
|
|
@@ -215,12 +215,12 @@
|
|
|
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.1.
|
|
219
|
-
"@modern-js/
|
|
220
|
-
"@modern-js/
|
|
221
|
-
"@modern-js/runtime-utils": "3.1.
|
|
222
|
-
"@modern-js/types": "3.1.
|
|
223
|
-
"@modern-js/utils": "3.1.
|
|
218
|
+
"@modern-js/plugin-data-loader": "3.1.1",
|
|
219
|
+
"@modern-js/render": "3.1.1",
|
|
220
|
+
"@modern-js/plugin": "3.1.1",
|
|
221
|
+
"@modern-js/runtime-utils": "3.1.1",
|
|
222
|
+
"@modern-js/types": "3.1.1",
|
|
223
|
+
"@modern-js/utils": "3.1.1"
|
|
224
224
|
},
|
|
225
225
|
"peerDependencies": {
|
|
226
226
|
"react": ">=17.0.2",
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
"devDependencies": {
|
|
230
230
|
"@remix-run/web-fetch": "^4.1.3",
|
|
231
231
|
"@rsbuild/core": "2.0.0-beta.4",
|
|
232
|
-
"@rslib/core": "0.
|
|
232
|
+
"@rslib/core": "0.20.0",
|
|
233
233
|
"@testing-library/dom": "^10.4.1",
|
|
234
234
|
"@testing-library/react": "^16.3.2",
|
|
235
235
|
"@types/cookie": "0.6.0",
|
|
@@ -240,9 +240,9 @@
|
|
|
240
240
|
"react-dom": "^19.2.4",
|
|
241
241
|
"ts-node": "^10.9.2",
|
|
242
242
|
"typescript": "^5",
|
|
243
|
-
"@modern-js/
|
|
243
|
+
"@modern-js/app-tools": "3.1.1",
|
|
244
244
|
"@scripts/rstest-config": "2.66.0",
|
|
245
|
-
"@modern-js/
|
|
245
|
+
"@modern-js/rslib": "2.68.10"
|
|
246
246
|
},
|
|
247
247
|
"sideEffects": false,
|
|
248
248
|
"publishConfig": {
|
|
@@ -5,12 +5,6 @@ const commonConfig: ProjectConfig = {
|
|
|
5
5
|
setupFiles: ['@scripts/rstest-config/setup.ts'],
|
|
6
6
|
globals: true,
|
|
7
7
|
tools: {
|
|
8
|
-
rspack: {
|
|
9
|
-
optimization: {
|
|
10
|
-
// Disable tree shaking to avoid issues with rstest mocking '@modern-js/utils'.
|
|
11
|
-
providedExports: false,
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
8
|
swc: {
|
|
15
9
|
jsc: {
|
|
16
10
|
transform: {
|