@bleedingdev/modern-js-runtime 3.2.0-ultramodern.9 → 3.2.0-ultramodern.90
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/boundary-debugger/index.js +299 -0
- package/dist/cjs/cli/ssr/index.js +5 -15
- package/dist/cjs/cli/template.server.js +1 -0
- package/dist/cjs/core/react/wrapper.js +9 -3
- package/dist/cjs/core/server/federatedCss.js +47 -0
- package/dist/cjs/core/server/helmet.js +8 -2
- package/dist/cjs/core/server/stream/afterTemplate.js +9 -6
- package/dist/cjs/core/server/stream/beforeTemplate.js +13 -20
- package/dist/cjs/core/server/stream/beforeTemplate.worker.js +98 -0
- package/dist/cjs/core/server/stream/createReadableStream.js +7 -2
- package/dist/cjs/core/server/stream/createReadableStream.worker.js +4 -2
- package/dist/cjs/core/server/stream/shared.js +3 -1
- package/dist/cjs/core/server/string/index.js +6 -6
- package/dist/cjs/core/server/string/loadable.js +33 -7
- package/dist/cjs/exports/head.js +196 -5
- package/dist/cjs/router/cli/code/tanstackTypes.js +116 -51
- package/dist/cjs/router/cli/code/templates.js +1 -8
- package/dist/cjs/router/runtime/tanstack/plugin.js +4 -5
- package/dist/cjs/router/runtime/tanstack/plugin.node.js +2 -13
- package/dist/cjs/router/runtime/tanstack/routeTree.js +47 -4
- package/dist/cjs/rsc/server.worker.js +58 -0
- package/dist/cjs/ssr/serverRender/renderToString/entry.js +9 -8
- package/dist/esm/boundary-debugger/index.mjs +263 -0
- package/dist/esm/cli/ssr/index.mjs +5 -15
- package/dist/esm/cli/template.server.mjs +1 -0
- package/dist/esm/core/react/wrapper.mjs +9 -3
- package/dist/esm/core/server/federatedCss.mjs +13 -0
- package/dist/esm/core/server/helmet.mjs +5 -2
- package/dist/esm/core/server/stream/afterTemplate.mjs +10 -7
- package/dist/esm/core/server/stream/beforeTemplate.mjs +14 -11
- package/dist/esm/core/server/stream/beforeTemplate.worker.mjs +64 -0
- package/dist/esm/core/server/stream/createReadableStream.mjs +7 -2
- package/dist/esm/core/server/stream/createReadableStream.worker.mjs +4 -2
- package/dist/esm/core/server/stream/shared.mjs +3 -1
- package/dist/esm/core/server/string/index.mjs +7 -6
- package/dist/esm/core/server/string/loadable.mjs +33 -7
- package/dist/esm/exports/head.mjs +189 -4
- package/dist/esm/router/cli/code/tanstackTypes.mjs +116 -51
- package/dist/esm/router/cli/code/templates.mjs +1 -8
- package/dist/esm/router/runtime/tanstack/plugin.mjs +8 -9
- package/dist/esm/router/runtime/tanstack/plugin.node.mjs +3 -14
- package/dist/esm/router/runtime/tanstack/routeTree.mjs +47 -4
- package/dist/esm/rsc/server.worker.mjs +1 -0
- package/dist/esm/ssr/serverRender/renderToString/entry.mjs +9 -6
- package/dist/esm-node/boundary-debugger/index.mjs +264 -0
- package/dist/esm-node/cli/ssr/index.mjs +5 -15
- package/dist/esm-node/cli/template.server.mjs +1 -0
- package/dist/esm-node/core/react/wrapper.mjs +9 -3
- package/dist/esm-node/core/server/federatedCss.mjs +14 -0
- package/dist/esm-node/core/server/helmet.mjs +5 -2
- package/dist/esm-node/core/server/stream/afterTemplate.mjs +10 -7
- package/dist/esm-node/core/server/stream/beforeTemplate.mjs +14 -11
- package/dist/esm-node/core/server/stream/beforeTemplate.worker.mjs +65 -0
- package/dist/esm-node/core/server/stream/createReadableStream.mjs +7 -2
- package/dist/esm-node/core/server/stream/createReadableStream.worker.mjs +4 -2
- package/dist/esm-node/core/server/stream/shared.mjs +3 -1
- package/dist/esm-node/core/server/string/index.mjs +7 -6
- package/dist/esm-node/core/server/string/loadable.mjs +33 -7
- package/dist/esm-node/exports/head.mjs +189 -4
- package/dist/esm-node/router/cli/code/tanstackTypes.mjs +116 -51
- package/dist/esm-node/router/cli/code/templates.mjs +1 -8
- package/dist/esm-node/router/runtime/tanstack/plugin.mjs +8 -9
- package/dist/esm-node/router/runtime/tanstack/plugin.node.mjs +3 -14
- package/dist/esm-node/router/runtime/tanstack/routeTree.mjs +47 -4
- package/dist/esm-node/rsc/server.worker.mjs +2 -0
- package/dist/esm-node/ssr/serverRender/renderToString/entry.mjs +9 -6
- package/dist/types/boundary-debugger/index.d.ts +28 -0
- package/dist/types/core/context/runtime.d.ts +4 -0
- package/dist/types/core/server/federatedCss.d.ts +5 -0
- package/dist/types/core/server/helmet.d.ts +5 -3
- package/dist/types/core/server/stream/beforeTemplate.d.ts +1 -0
- package/dist/types/core/server/stream/beforeTemplate.worker.d.ts +10 -0
- package/dist/types/core/server/stream/shared.d.ts +8 -0
- package/dist/types/core/server/string/loadable.d.ts +4 -0
- package/dist/types/exports/head.d.ts +10 -3
- package/dist/types/rsc/server.worker.d.ts +1 -0
- package/package.json +25 -19
|
@@ -5,7 +5,7 @@ import { time } from "@modern-js/runtime-utils/time";
|
|
|
5
5
|
import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
|
|
6
6
|
import { RouterProvider, createMemoryHistory, createRouter } from "@tanstack/react-router";
|
|
7
7
|
import { attachRouterServerSsrUtils } from "@tanstack/react-router/ssr/server";
|
|
8
|
-
import {
|
|
8
|
+
import { useContext } from "react";
|
|
9
9
|
import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlobalRoutes } from "../../../core/context/index.mjs";
|
|
10
10
|
import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "../lifecycle.mjs";
|
|
11
11
|
import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
|
|
@@ -37,13 +37,6 @@ async function preloadMatchedRouteComponents(tanstackRouter) {
|
|
|
37
37
|
]);
|
|
38
38
|
}));
|
|
39
39
|
}
|
|
40
|
-
async function waitForRouterSerialization(tanstackRouter) {
|
|
41
|
-
const serverSsr = tanstackRouter.serverSsr;
|
|
42
|
-
if (!serverSsr || 'function' != typeof serverSsr.onSerializationFinished || serverSsr.isSerializationFinished?.()) return;
|
|
43
|
-
await new Promise((resolve)=>{
|
|
44
|
-
serverSsr.onSerializationFinished?.(resolve);
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
40
|
function htmlEscapeAttr(value) {
|
|
48
41
|
return value.replace(/&/g, '&').replace(/"/g, '"');
|
|
49
42
|
}
|
|
@@ -189,7 +182,6 @@ const tanstackRouterPlugin = (userConfig = {})=>({
|
|
|
189
182
|
await preloadMatchedRouteComponents(serverRouter);
|
|
190
183
|
context.ssrContext?.response.status(tanstackRouter.state.statusCode);
|
|
191
184
|
await serverRouter.serverSsr?.dehydrate?.();
|
|
192
|
-
await waitForRouterSerialization(serverRouter);
|
|
193
185
|
const ssrScriptTags = serverRouter.serverSsr?.takeBufferedScripts?.();
|
|
194
186
|
const hydrationScripts = routerManagedTagsToHtml(ssrScriptTags);
|
|
195
187
|
const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
|
|
@@ -227,11 +219,8 @@ const tanstackRouterPlugin = (userConfig = {})=>({
|
|
|
227
219
|
if (!router) return App ? /*#__PURE__*/ jsx(App, {
|
|
228
220
|
...props
|
|
229
221
|
}) : null;
|
|
230
|
-
const routerWrapper = /*#__PURE__*/ jsx(
|
|
231
|
-
|
|
232
|
-
children: /*#__PURE__*/ jsx(RouterProvider, {
|
|
233
|
-
router: router
|
|
234
|
-
})
|
|
222
|
+
const routerWrapper = /*#__PURE__*/ jsx(RouterProvider, {
|
|
223
|
+
router: router
|
|
235
224
|
});
|
|
236
225
|
return App ? /*#__PURE__*/ jsx(App, {
|
|
237
226
|
children: routerWrapper
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createRootRoute, createRoute, notFound, redirect } from "@tanstack/react-router";
|
|
2
|
+
import { createElement } from "react";
|
|
2
3
|
import { DefaultNotFound } from "../DefaultNotFound.mjs";
|
|
3
4
|
function createTanstackRoute(options) {
|
|
4
5
|
return createRoute(options);
|
|
@@ -43,6 +44,40 @@ function isModernDeferredData(value) {
|
|
|
43
44
|
function normalizeModernLoaderResult(result) {
|
|
44
45
|
return isModernDeferredData(result) ? result.data : result;
|
|
45
46
|
}
|
|
47
|
+
function pickRouteModuleComponent(routeModule, seen = new Set()) {
|
|
48
|
+
if ('function' == typeof routeModule || routeModule && 'object' == typeof routeModule && '$$typeof' in routeModule) return routeModule;
|
|
49
|
+
if (!routeModule || 'object' != typeof routeModule) return;
|
|
50
|
+
if (seen.has(routeModule)) return;
|
|
51
|
+
seen.add(routeModule);
|
|
52
|
+
const module = routeModule;
|
|
53
|
+
for (const candidate of [
|
|
54
|
+
module.default,
|
|
55
|
+
module.Component
|
|
56
|
+
]){
|
|
57
|
+
const component = pickRouteModuleComponent(candidate, seen);
|
|
58
|
+
if (component) return component;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
function createServerLazyImportComponent(lazyImport, fallbackComponent) {
|
|
62
|
+
if ("u" > typeof document) return fallbackComponent;
|
|
63
|
+
let resolvedComponent;
|
|
64
|
+
let pendingLoad;
|
|
65
|
+
const load = async ()=>{
|
|
66
|
+
if (resolvedComponent) return resolvedComponent;
|
|
67
|
+
const routeModule = await lazyImport();
|
|
68
|
+
const component = pickRouteModuleComponent(routeModule);
|
|
69
|
+
if (component) resolvedComponent = component;
|
|
70
|
+
return resolvedComponent;
|
|
71
|
+
};
|
|
72
|
+
const Component = (props)=>{
|
|
73
|
+
if (resolvedComponent) return createElement(resolvedComponent, props);
|
|
74
|
+
pendingLoad ||= load();
|
|
75
|
+
throw pendingLoad;
|
|
76
|
+
};
|
|
77
|
+
Component.load = load;
|
|
78
|
+
Component.preload = load;
|
|
79
|
+
return Component;
|
|
80
|
+
}
|
|
46
81
|
function throwTanstackRedirect(location) {
|
|
47
82
|
const target = location || '/';
|
|
48
83
|
try {
|
|
@@ -111,7 +146,7 @@ function wrapModernLoader(modernRoute, modernLoader, revalidationState) {
|
|
|
111
146
|
const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
|
|
112
147
|
const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
|
|
113
148
|
const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
|
|
114
|
-
const request = baseRequest ? new Request(baseRequest, {
|
|
149
|
+
const request = void 0 !== baseRequest ? new Request(baseRequest, {
|
|
115
150
|
signal
|
|
116
151
|
}) : createModernRequest(href, signal);
|
|
117
152
|
const params = mapParamsForModernLoader({
|
|
@@ -174,7 +209,7 @@ function wrapRouteObjectLoader(route, revalidationState) {
|
|
|
174
209
|
const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
|
|
175
210
|
const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
|
|
176
211
|
const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
|
|
177
|
-
const request = baseRequest ? new Request(baseRequest, {
|
|
212
|
+
const request = void 0 !== baseRequest ? new Request(baseRequest, {
|
|
178
213
|
signal
|
|
179
214
|
}) : createModernRequest(href, signal);
|
|
180
215
|
const params = mapParamsForRouteObjectLoader({
|
|
@@ -209,10 +244,18 @@ function wrapRouteObjectLoader(route, revalidationState) {
|
|
|
209
244
|
}
|
|
210
245
|
function toRouteComponent(routeObject) {
|
|
211
246
|
const route = routeObject;
|
|
247
|
+
const lazyImport = 'function' == typeof route.lazyImport ? route.lazyImport : void 0;
|
|
248
|
+
const fallbackComponent = route.Component ? route.Component : route.element ? ()=>route.element : void 0;
|
|
249
|
+
if (lazyImport && fallbackComponent) return createServerLazyImportComponent(lazyImport, fallbackComponent);
|
|
212
250
|
if (route.Component) return route.Component;
|
|
213
251
|
const element = route.element;
|
|
214
252
|
if (element) return ()=>element;
|
|
215
253
|
}
|
|
254
|
+
function toModernRouteComponent(route) {
|
|
255
|
+
const component = route.component || void 0;
|
|
256
|
+
if ('function' == typeof route.lazyImport && component) return createServerLazyImportComponent(route.lazyImport, component);
|
|
257
|
+
return component;
|
|
258
|
+
}
|
|
216
259
|
function toErrorComponent(routeObject) {
|
|
217
260
|
const route = routeObject;
|
|
218
261
|
if (route.ErrorBoundary) return route.ErrorBoundary;
|
|
@@ -292,7 +335,7 @@ function createRouteFromModernRoute(opts) {
|
|
|
292
335
|
const stableFallbackId = modernId || route._component || route.filename || route.data || ('function' == typeof route.loader ? route.id : void 0);
|
|
293
336
|
const pendingComponent = route.loading || route.pendingComponent;
|
|
294
337
|
const errorComponent = route.error || route.errorComponent;
|
|
295
|
-
const component = route
|
|
338
|
+
const component = toModernRouteComponent(route);
|
|
296
339
|
const modernLoader = route.loader;
|
|
297
340
|
const modernAction = route.action;
|
|
298
341
|
const modernShouldRevalidate = route.shouldRevalidate;
|
|
@@ -338,7 +381,7 @@ function createRouteFromModernRoute(opts) {
|
|
|
338
381
|
}
|
|
339
382
|
function createRouteTreeFromModernRoutes(routes) {
|
|
340
383
|
const rootModern = routes.find((r)=>r && 'nested' === r.type && r.isRoot);
|
|
341
|
-
const rootComponent = rootModern
|
|
384
|
+
const rootComponent = rootModern ? toModernRouteComponent(rootModern) : void 0;
|
|
342
385
|
const pendingComponent = rootModern?.loading;
|
|
343
386
|
const errorComponent = rootModern?.error;
|
|
344
387
|
const rootLoader = rootModern?.loader;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@modern-js/render/rsc-worker";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { sanitizeSSRPayload, serializeJson } from "@modern-js/runtime-utils/node";
|
|
2
2
|
import { time } from "@modern-js/runtime-utils/time";
|
|
3
3
|
import react from "react";
|
|
4
|
-
import
|
|
4
|
+
import { HelmetProvider } from "react-helmet-async";
|
|
5
|
+
import { getHelmetData, helmetReplace } from "../../../core/server/helmet.mjs";
|
|
5
6
|
import { serializeErrors } from "../../../router/runtime/utils.mjs";
|
|
6
7
|
import prefetch from "../../prefetch";
|
|
7
|
-
import helmet from "../helmet";
|
|
8
8
|
import { SSRErrors, SSRTimings } from "../tracker";
|
|
9
9
|
import { RenderLevel } from "../types.mjs";
|
|
10
10
|
import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
|
|
@@ -60,8 +60,8 @@ class Entry {
|
|
|
60
60
|
createReplaceSSRDataScript(ssrDataScripts),
|
|
61
61
|
...this.htmlModifiers
|
|
62
62
|
]);
|
|
63
|
-
const helmetData =
|
|
64
|
-
return helmetData ?
|
|
63
|
+
const helmetData = getHelmetData(context);
|
|
64
|
+
return helmetData ? helmetReplace(html, helmetData) : html;
|
|
65
65
|
}
|
|
66
66
|
async prefetch(context) {
|
|
67
67
|
let prefetchData;
|
|
@@ -82,11 +82,14 @@ class Entry {
|
|
|
82
82
|
const end = time();
|
|
83
83
|
const { ssrContext } = context;
|
|
84
84
|
try {
|
|
85
|
-
const
|
|
85
|
+
const helmetContext = context._helmetContext ??= {};
|
|
86
|
+
const App = react.createElement(HelmetProvider, {
|
|
87
|
+
context: helmetContext
|
|
88
|
+
}, react.createElement(this.App, {
|
|
86
89
|
context: Object.assign(context, {
|
|
87
90
|
ssr: true
|
|
88
91
|
})
|
|
89
|
-
});
|
|
92
|
+
}));
|
|
90
93
|
html = await createRender(App).addCollector(createStyledCollector(this.result)).addCollector(createLoadableCollector({
|
|
91
94
|
stats: ssrContext.loadableStats,
|
|
92
95
|
result: this.result,
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
import "node:module";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useMemo, useState } from "react";
|
|
4
|
+
const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
|
|
5
|
+
const queryParamName = 'modern-boundaries';
|
|
6
|
+
const boundarySelector = '[data-modern-boundary-id]';
|
|
7
|
+
const defaultLabels = {
|
|
8
|
+
cs: {
|
|
9
|
+
toggle: 'zobrazit hranice týmů'
|
|
10
|
+
},
|
|
11
|
+
en: {
|
|
12
|
+
toggle: 'show team boundaries'
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const palette = [
|
|
16
|
+
'#ff5a5f',
|
|
17
|
+
'#30e27a',
|
|
18
|
+
'#f6cf45',
|
|
19
|
+
'#7c8cff',
|
|
20
|
+
'#29b6f6'
|
|
21
|
+
];
|
|
22
|
+
const readStoredEnabled = (storageKey, fallback)=>{
|
|
23
|
+
if ("u" < typeof window) return fallback;
|
|
24
|
+
try {
|
|
25
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
26
|
+
return null === stored ? fallback : 'true' === stored;
|
|
27
|
+
} catch {
|
|
28
|
+
return fallback;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const writeStoredEnabled = (storageKey, enabled)=>{
|
|
32
|
+
if ("u" < typeof window) return;
|
|
33
|
+
try {
|
|
34
|
+
window.localStorage.setItem(storageKey, String(enabled));
|
|
35
|
+
} catch {}
|
|
36
|
+
};
|
|
37
|
+
const parseEnabledOverride = (value)=>{
|
|
38
|
+
if (null === value) return;
|
|
39
|
+
const normalized = value.toLowerCase();
|
|
40
|
+
if ('1' === normalized || 'true' === normalized) return true;
|
|
41
|
+
if ('0' === normalized || 'false' === normalized) return false;
|
|
42
|
+
};
|
|
43
|
+
const readQueryEnabledOverride = ()=>{
|
|
44
|
+
if ("u" < typeof window) return;
|
|
45
|
+
try {
|
|
46
|
+
return parseEnabledOverride(new URLSearchParams(window.location.search).get(queryParamName));
|
|
47
|
+
} catch {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
const detectLanguage = ()=>{
|
|
52
|
+
if ("u" < typeof document) return 'en';
|
|
53
|
+
const htmlLanguage = document.documentElement.lang;
|
|
54
|
+
if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
|
|
55
|
+
if ("u" < typeof window) return 'en';
|
|
56
|
+
return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
|
|
57
|
+
};
|
|
58
|
+
const hashBoundaryId = (id)=>{
|
|
59
|
+
let hash = 0;
|
|
60
|
+
for(let index = 0; index < id.length; index++)hash = 31 * hash + id.charCodeAt(index) >>> 0;
|
|
61
|
+
return hash;
|
|
62
|
+
};
|
|
63
|
+
const formatRectKey = (rect)=>[
|
|
64
|
+
Math.round(100 * rect.left) / 100,
|
|
65
|
+
Math.round(100 * rect.top) / 100,
|
|
66
|
+
Math.round(100 * rect.width) / 100,
|
|
67
|
+
Math.round(100 * rect.height) / 100
|
|
68
|
+
].join(':');
|
|
69
|
+
const getBoundaryId = (element)=>element.dataset.modernBoundaryId ?? element.dataset.mfRemote ?? element.getAttribute('data-mf-remote') ?? void 0;
|
|
70
|
+
const collectBoundaryElements = (legacySelector)=>{
|
|
71
|
+
const elements = new Set();
|
|
72
|
+
for (const element of document.querySelectorAll(boundarySelector))elements.add(element);
|
|
73
|
+
if (!legacySelector) return Array.from(elements);
|
|
74
|
+
try {
|
|
75
|
+
for (const element of document.querySelectorAll(legacySelector))elements.add(element);
|
|
76
|
+
} catch {}
|
|
77
|
+
return Array.from(elements);
|
|
78
|
+
};
|
|
79
|
+
function BoundaryDebugger({ controlMode = 'visible', enabledByDefault = false, labels = defaultLabels, legacySelector, metadata, storageKey = defaultStorageKey }) {
|
|
80
|
+
const [mounted, setMounted] = useState(false);
|
|
81
|
+
const [enabled, setEnabled] = useState(false);
|
|
82
|
+
const [boxes, setBoxes] = useState([]);
|
|
83
|
+
const boundaries = useMemo(()=>new Map(metadata.boundaries.map((entry, index)=>[
|
|
84
|
+
entry.mfName,
|
|
85
|
+
{
|
|
86
|
+
...entry,
|
|
87
|
+
color: entry.color ?? palette[index % palette.length],
|
|
88
|
+
label: entry.label ?? entry.appId
|
|
89
|
+
}
|
|
90
|
+
])), [
|
|
91
|
+
metadata
|
|
92
|
+
]);
|
|
93
|
+
const language = mounted ? detectLanguage() : 'en';
|
|
94
|
+
const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show team boundaries';
|
|
95
|
+
useEffect(()=>{
|
|
96
|
+
setMounted(true);
|
|
97
|
+
const queryOverride = readQueryEnabledOverride();
|
|
98
|
+
setEnabled(queryOverride ?? readStoredEnabled(storageKey, enabledByDefault));
|
|
99
|
+
}, [
|
|
100
|
+
enabledByDefault,
|
|
101
|
+
storageKey
|
|
102
|
+
]);
|
|
103
|
+
useEffect(()=>{
|
|
104
|
+
if (!mounted) return;
|
|
105
|
+
writeStoredEnabled(storageKey, enabled);
|
|
106
|
+
}, [
|
|
107
|
+
enabled,
|
|
108
|
+
mounted,
|
|
109
|
+
storageKey
|
|
110
|
+
]);
|
|
111
|
+
useEffect(()=>{
|
|
112
|
+
if (!enabled) return void setBoxes([]);
|
|
113
|
+
const readBoxes = ()=>{
|
|
114
|
+
const seenBoxes = new Set();
|
|
115
|
+
const nextBoxes = collectBoundaryElements(legacySelector).map((element)=>{
|
|
116
|
+
const boundaryId = getBoundaryId(element);
|
|
117
|
+
if (!boundaryId) return;
|
|
118
|
+
const rect = element.getBoundingClientRect();
|
|
119
|
+
if (rect.width <= 0 || rect.height <= 0) return;
|
|
120
|
+
const rectKey = formatRectKey(rect);
|
|
121
|
+
const boxKey = `${boundaryId}:${rectKey}`;
|
|
122
|
+
if (seenBoxes.has(boxKey)) return;
|
|
123
|
+
seenBoxes.add(boxKey);
|
|
124
|
+
const boundary = boundaries.get(boundaryId);
|
|
125
|
+
const color = boundary?.color ?? palette[hashBoundaryId(boundaryId) % palette.length];
|
|
126
|
+
const label = boundary?.label ?? boundary?.appId ?? boundaryId;
|
|
127
|
+
const expose = element.dataset.modernMfExpose;
|
|
128
|
+
const detail = expose && expose !== label && expose !== boundaryId ? expose : void 0;
|
|
129
|
+
const box = {
|
|
130
|
+
color,
|
|
131
|
+
height: rect.height,
|
|
132
|
+
id: boxKey,
|
|
133
|
+
label,
|
|
134
|
+
left: rect.left,
|
|
135
|
+
top: rect.top,
|
|
136
|
+
width: rect.width
|
|
137
|
+
};
|
|
138
|
+
if (detail) box.detail = detail;
|
|
139
|
+
return box;
|
|
140
|
+
}).filter((box)=>void 0 !== box);
|
|
141
|
+
setBoxes(nextBoxes);
|
|
142
|
+
};
|
|
143
|
+
readBoxes();
|
|
144
|
+
const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
|
|
145
|
+
for (const element of collectBoundaryElements(legacySelector))resizeObserver?.observe(element);
|
|
146
|
+
const mutationObserver = new MutationObserver(readBoxes);
|
|
147
|
+
mutationObserver.observe(document.body, {
|
|
148
|
+
childList: true,
|
|
149
|
+
subtree: true
|
|
150
|
+
});
|
|
151
|
+
window.addEventListener('resize', readBoxes);
|
|
152
|
+
window.addEventListener('scroll', readBoxes, true);
|
|
153
|
+
return ()=>{
|
|
154
|
+
mutationObserver.disconnect();
|
|
155
|
+
resizeObserver?.disconnect();
|
|
156
|
+
window.removeEventListener('resize', readBoxes);
|
|
157
|
+
window.removeEventListener('scroll', readBoxes, true);
|
|
158
|
+
};
|
|
159
|
+
}, [
|
|
160
|
+
boundaries,
|
|
161
|
+
enabled,
|
|
162
|
+
legacySelector
|
|
163
|
+
]);
|
|
164
|
+
if (!mounted) return null;
|
|
165
|
+
const shouldRenderToggle = 'visible' === controlMode || 'hidden-when-off' === controlMode && enabled;
|
|
166
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
167
|
+
children: [
|
|
168
|
+
shouldRenderToggle ? /*#__PURE__*/ jsxs("label", {
|
|
169
|
+
style: {
|
|
170
|
+
alignItems: 'center',
|
|
171
|
+
background: 'rgba(255, 255, 255, 0.96)',
|
|
172
|
+
border: '1px solid rgba(0, 0, 0, 0.1)',
|
|
173
|
+
borderRadius: 10,
|
|
174
|
+
boxShadow: '0 10px 28px rgba(0, 0, 0, 0.14)',
|
|
175
|
+
color: '#111827',
|
|
176
|
+
display: 'flex',
|
|
177
|
+
font: '600 13px/1.2 system-ui, sans-serif',
|
|
178
|
+
gap: 8,
|
|
179
|
+
left: 'max(12px, env(safe-area-inset-left))',
|
|
180
|
+
maxWidth: 'calc(100vw - 24px)',
|
|
181
|
+
padding: '9px 11px',
|
|
182
|
+
position: 'fixed',
|
|
183
|
+
top: 'max(12px, env(safe-area-inset-top))',
|
|
184
|
+
zIndex: 2147483000
|
|
185
|
+
},
|
|
186
|
+
children: [
|
|
187
|
+
/*#__PURE__*/ jsx("input", {
|
|
188
|
+
checked: enabled,
|
|
189
|
+
onChange: (event)=>setEnabled(event.currentTarget.checked),
|
|
190
|
+
type: "checkbox"
|
|
191
|
+
}),
|
|
192
|
+
/*#__PURE__*/ jsx("span", {
|
|
193
|
+
children: toggleLabel
|
|
194
|
+
})
|
|
195
|
+
]
|
|
196
|
+
}) : null,
|
|
197
|
+
enabled ? /*#__PURE__*/ jsx("div", {
|
|
198
|
+
"aria-hidden": "true",
|
|
199
|
+
children: boxes.map((box)=>/*#__PURE__*/ jsx("div", {
|
|
200
|
+
style: {
|
|
201
|
+
border: `2px solid ${box.color}`,
|
|
202
|
+
borderRadius: 8,
|
|
203
|
+
boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
|
|
204
|
+
height: box.height,
|
|
205
|
+
left: box.left,
|
|
206
|
+
pointerEvents: 'none',
|
|
207
|
+
position: 'fixed',
|
|
208
|
+
top: box.top,
|
|
209
|
+
width: box.width,
|
|
210
|
+
zIndex: 2147482999
|
|
211
|
+
},
|
|
212
|
+
children: /*#__PURE__*/ jsxs("span", {
|
|
213
|
+
style: {
|
|
214
|
+
background: box.color,
|
|
215
|
+
borderRadius: 999,
|
|
216
|
+
color: '#111827',
|
|
217
|
+
display: 'grid',
|
|
218
|
+
font: '800 11px/1.1 system-ui, sans-serif',
|
|
219
|
+
gap: 3,
|
|
220
|
+
maxWidth: 'min(280px, calc(100vw - 24px))',
|
|
221
|
+
padding: '5px 8px',
|
|
222
|
+
position: 'absolute',
|
|
223
|
+
right: 4,
|
|
224
|
+
top: 4,
|
|
225
|
+
whiteSpace: 'nowrap'
|
|
226
|
+
},
|
|
227
|
+
children: [
|
|
228
|
+
/*#__PURE__*/ jsx("span", {
|
|
229
|
+
children: box.label
|
|
230
|
+
}),
|
|
231
|
+
box.detail ? /*#__PURE__*/ jsx("span", {
|
|
232
|
+
style: {
|
|
233
|
+
font: '700 10px/1.1 system-ui, sans-serif',
|
|
234
|
+
opacity: 0.82,
|
|
235
|
+
overflow: 'hidden',
|
|
236
|
+
textOverflow: 'ellipsis'
|
|
237
|
+
},
|
|
238
|
+
children: box.detail
|
|
239
|
+
}) : null
|
|
240
|
+
]
|
|
241
|
+
})
|
|
242
|
+
}, box.id))
|
|
243
|
+
}) : null
|
|
244
|
+
]
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
const ultramodernBoundaryDebuggerPlugin = (options)=>({
|
|
248
|
+
name: '@modern-js/runtime/boundary-debugger',
|
|
249
|
+
setup: (api)=>{
|
|
250
|
+
api.wrapRoot((App)=>(props)=>/*#__PURE__*/ jsxs(Fragment, {
|
|
251
|
+
children: [
|
|
252
|
+
/*#__PURE__*/ jsx(App, {
|
|
253
|
+
...props
|
|
254
|
+
}),
|
|
255
|
+
/*#__PURE__*/ jsx(BoundaryDebugger, {
|
|
256
|
+
...options
|
|
257
|
+
})
|
|
258
|
+
]
|
|
259
|
+
}));
|
|
260
|
+
}
|
|
261
|
+
});
|
|
262
|
+
const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
|
|
263
|
+
export default boundary_debugger;
|
|
264
|
+
export { ultramodernBoundaryDebuggerPlugin };
|
|
@@ -86,30 +86,20 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
|
|
|
86
86
|
const hasServerRendering = hasServerRenderingConfig(userConfig);
|
|
87
87
|
const hasModuleFederationRuntimeMarker = hasServerRendering && shouldUseModuleFederationNodeOutput(config);
|
|
88
88
|
const hasExplicitMfSsrFlag = isModuleFederationAppSSREnabled(userConfig);
|
|
89
|
+
const isCloudflareWorkerSSR = 'workerSSR' === name && userConfig.deploy?.target === 'cloudflare';
|
|
89
90
|
const requireExplicitMfSsrFlag = 'true' === process.env.MODERN_MF_APP_SSR_REQUIRE_EXPLICIT;
|
|
90
91
|
if (hasServerRendering && hasModuleFederationRuntimeMarker && !hasExplicitMfSsrFlag) {
|
|
91
92
|
const warningMessage = '[modernjs][mf-ssr] Module Federation SSR was auto-detected from runtime markers. Set server.ssr.moduleFederationAppSSR=true explicitly in host and remotes to avoid heuristic drift.';
|
|
92
93
|
if (requireExplicitMfSsrFlag) throw new Error(`${warningMessage} (enforced by MODERN_MF_APP_SSR_REQUIRE_EXPLICIT=true)`);
|
|
93
94
|
console.warn(warningMessage);
|
|
94
95
|
}
|
|
95
|
-
const isModuleFederationAppSSR = hasServerRendering && hasExplicitMfSsrFlag;
|
|
96
|
-
const useModuleFederationNodeOutput = hasServerRendering && isModuleFederationAppSSR && isNodeEnvironmentTarget(config.output.target);
|
|
96
|
+
const isModuleFederationAppSSR = hasServerRendering && hasExplicitMfSsrFlag && !isCloudflareWorkerSSR;
|
|
97
97
|
const ssrEnv = userConfig.deploy?.worker?.ssr || userConfig.server?.rsc ? 'edge' : 'node';
|
|
98
98
|
const appContext = modernAPI.getAppContext();
|
|
99
99
|
const { appDirectory, entrypoints } = appContext;
|
|
100
|
-
const serverBundlerChain = useModuleFederationNodeOutput ? (chain)=>{
|
|
101
|
-
chain.target('async-node');
|
|
102
|
-
chain.output.module(false);
|
|
103
|
-
chain.output.chunkFormat('commonjs');
|
|
104
|
-
chain.output.chunkLoading('async-node');
|
|
105
|
-
chain.output.library({
|
|
106
|
-
...chain.output.get('library') || {},
|
|
107
|
-
type: 'commonjs-module'
|
|
108
|
-
});
|
|
109
|
-
} : void 0;
|
|
110
100
|
const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig, appDirectory, entrypoints);
|
|
111
101
|
const outputConfig = {
|
|
112
|
-
module: isServerEnvironment &&
|
|
102
|
+
module: isServerEnvironment && (outputModule || 'workerSSR' === name && userConfig.deploy?.target === 'cloudflare')
|
|
113
103
|
};
|
|
114
104
|
const useLoadableComponents = isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig, appDirectory, entrypoints);
|
|
115
105
|
return mergeEnvironmentConfig(config, {
|
|
@@ -122,13 +112,13 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
|
|
|
122
112
|
},
|
|
123
113
|
output: outputConfig,
|
|
124
114
|
tools: {
|
|
125
|
-
bundlerChain:
|
|
115
|
+
bundlerChain: useLoadablePlugin ? (chain)=>{
|
|
126
116
|
chain.plugin('loadable').use(loadable_bundler_plugin, [
|
|
127
117
|
{
|
|
128
118
|
filename: LOADABLE_STATS_FILE
|
|
129
119
|
}
|
|
130
120
|
]);
|
|
131
|
-
} : void 0
|
|
121
|
+
} : void 0,
|
|
132
122
|
swc: useLoadableComponents ? {
|
|
133
123
|
jsc: {
|
|
134
124
|
experimental: {
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import "node:module";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { HelmetProvider } from "react-helmet-async";
|
|
3
4
|
import { InternalRuntimeContext, RuntimeContext } from "../context/index.mjs";
|
|
4
5
|
function wrapRuntimeContextProvider(App, contextValue) {
|
|
5
|
-
const { isBrowser, initialData, routes, routerFramework, context, routeManifest, routerRuntime, routerInstance, routerHydrationScript, routerMatchedRouteIds, routerServerSnapshot, routerContext, unstable_getBlockNavState, ssrContext, _internalContext, _internalRouterBaseName, ...rest } = contextValue;
|
|
6
|
+
const { isBrowser, initialData, routes, routerFramework, context, routeManifest, routerRuntime, routerInstance, routerHydrationScript, routerMatchedRouteIds, routerServerSnapshot, routerContext, unstable_getBlockNavState, ssrContext, _internalContext, _internalRouterBaseName, _helmetContext, ...rest } = contextValue;
|
|
7
|
+
const internalContextValue = contextValue;
|
|
8
|
+
internalContextValue._helmetContext ??= {};
|
|
6
9
|
const runtimeContextValue = {
|
|
7
10
|
isBrowser,
|
|
8
11
|
initialData,
|
|
@@ -12,10 +15,13 @@ function wrapRuntimeContextProvider(App, contextValue) {
|
|
|
12
15
|
...rest
|
|
13
16
|
};
|
|
14
17
|
return /*#__PURE__*/ jsx(InternalRuntimeContext.Provider, {
|
|
15
|
-
value:
|
|
18
|
+
value: internalContextValue,
|
|
16
19
|
children: /*#__PURE__*/ jsx(RuntimeContext.Provider, {
|
|
17
20
|
value: runtimeContextValue,
|
|
18
|
-
children:
|
|
21
|
+
children: /*#__PURE__*/ jsx(HelmetProvider, {
|
|
22
|
+
context: internalContextValue._helmetContext,
|
|
23
|
+
children: App
|
|
24
|
+
})
|
|
19
25
|
})
|
|
20
26
|
});
|
|
21
27
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import "node:module";
|
|
2
|
+
import { attributesToString } from "./utils.mjs";
|
|
3
|
+
const createFederatedCssLinks = (assets, options)=>{
|
|
4
|
+
if (!assets?.length) return '';
|
|
5
|
+
const seen = new Set(options.existingAssets || []);
|
|
6
|
+
const attributes = attributesToString(options.attributes || {});
|
|
7
|
+
const links = [];
|
|
8
|
+
for (const asset of assets)if (!(!asset || seen.has(asset) || options.template.includes(asset))) {
|
|
9
|
+
seen.add(asset);
|
|
10
|
+
links.push(`<link${attributes} href="${asset}" rel="stylesheet" />`);
|
|
11
|
+
}
|
|
12
|
+
return links.join('');
|
|
13
|
+
};
|
|
14
|
+
export { createFederatedCssLinks };
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import "node:module";
|
|
2
|
-
import { EOL } from "os";
|
|
3
2
|
import { safeReplace } from "./utils.mjs";
|
|
3
|
+
const EOL = '\n';
|
|
4
4
|
const RE_HTML_ATTR = /<html[^>]*>/;
|
|
5
5
|
const RE_BODY_ATTR = /<body[^>]*>/;
|
|
6
6
|
const RE_LAST_IN_HEAD = /<\/head>/;
|
|
7
7
|
const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
|
|
8
8
|
const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/;
|
|
9
|
+
function getHelmetData(runtimeContext) {
|
|
10
|
+
return runtimeContext._helmetContext?.helmet ?? void 0;
|
|
11
|
+
}
|
|
9
12
|
function createReplaceHelemt(helmetData) {
|
|
10
13
|
return helmetData ? (template)=>helmetReplace(template, helmetData) : (tempalte)=>tempalte;
|
|
11
14
|
}
|
|
@@ -36,4 +39,4 @@ function helmetReplace(content, helmetData) {
|
|
|
36
39
|
].reduce((pre, cur)=>pre + (cur.length > 0 ? ` ${cur}${EOL}` : ''), '');
|
|
37
40
|
return safeReplace(result, RE_LAST_IN_HEAD, `${helmetStr}</head>`);
|
|
38
41
|
}
|
|
39
|
-
export { createReplaceHelemt, helmetReplace };
|
|
42
|
+
export { createReplaceHelemt, getHelmetData, helmetReplace };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "node:module";
|
|
2
2
|
import { serializeJson } from "@modern-js/runtime-utils/node";
|
|
3
|
-
import { getRouterHydrationScripts } from "../../../router/runtime/lifecycle.mjs";
|
|
3
|
+
import { getRouterHydrationScripts, getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
|
|
4
4
|
import { SSR_DATA_JSON_ID } from "../../constants.mjs";
|
|
5
5
|
import { SSR_DATA_PLACEHOLDER } from "../constants.mjs";
|
|
6
6
|
import { buildHtml } from "../shared.mjs";
|
|
@@ -23,12 +23,15 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
|
|
|
23
23
|
if (!routeManifest) return template;
|
|
24
24
|
const { routeAssets } = routeManifest;
|
|
25
25
|
if (!routeAssets) return template;
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext) ?? [];
|
|
27
|
+
const assetEntries = [
|
|
28
|
+
...matchedRouteIds.map((routeId)=>routeAssets[routeId]),
|
|
29
|
+
routeAssets[`async-${entryName}`]
|
|
30
|
+
].filter(Boolean);
|
|
31
|
+
const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
|
|
32
|
+
const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
|
|
33
|
+
const jsChunkStr = jsAssets.filter((asset)=>!template.includes(asset)).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
|
|
34
|
+
if (jsChunkStr) return safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
|
|
32
35
|
return template;
|
|
33
36
|
}
|
|
34
37
|
return buildHtml(afterAppTemplate, callbacks);
|