@bleedingdev/modern-js-runtime 3.2.0-ultramodern.58 → 3.2.0-ultramodern.61
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.
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
default: ()=>boundary_debugger,
|
|
28
|
+
ultramodernBoundaryDebuggerPlugin: ()=>ultramodernBoundaryDebuggerPlugin
|
|
29
|
+
});
|
|
30
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
|
|
33
|
+
const defaultLabels = {
|
|
34
|
+
cs: {
|
|
35
|
+
toggle: 'zobrazit hranice verticalů'
|
|
36
|
+
},
|
|
37
|
+
en: {
|
|
38
|
+
toggle: 'show vertical boundaries'
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const palette = [
|
|
42
|
+
'#ff5a5f',
|
|
43
|
+
'#30e27a',
|
|
44
|
+
'#f6cf45',
|
|
45
|
+
'#7c8cff',
|
|
46
|
+
'#29b6f6'
|
|
47
|
+
];
|
|
48
|
+
const readEnabled = (storageKey, fallback)=>{
|
|
49
|
+
if ("u" < typeof window) return fallback;
|
|
50
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
51
|
+
return null === stored ? fallback : 'true' === stored;
|
|
52
|
+
};
|
|
53
|
+
const detectLanguage = ()=>{
|
|
54
|
+
if ("u" < typeof document) return 'en';
|
|
55
|
+
const htmlLanguage = document.documentElement.lang;
|
|
56
|
+
if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
|
|
57
|
+
return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
|
|
58
|
+
};
|
|
59
|
+
function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, metadata, storageKey = defaultStorageKey }) {
|
|
60
|
+
const [mounted, setMounted] = (0, external_react_namespaceObject.useState)(false);
|
|
61
|
+
const [enabled, setEnabled] = (0, external_react_namespaceObject.useState)(false);
|
|
62
|
+
const [boxes, setBoxes] = (0, external_react_namespaceObject.useState)([]);
|
|
63
|
+
const boundaries = (0, external_react_namespaceObject.useMemo)(()=>new Map(metadata.boundaries.map((entry, index)=>[
|
|
64
|
+
entry.mfName,
|
|
65
|
+
{
|
|
66
|
+
...entry,
|
|
67
|
+
color: entry.color ?? palette[index % palette.length],
|
|
68
|
+
label: entry.label ?? entry.appId
|
|
69
|
+
}
|
|
70
|
+
])), [
|
|
71
|
+
metadata
|
|
72
|
+
]);
|
|
73
|
+
const language = mounted ? detectLanguage() : 'en';
|
|
74
|
+
const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show vertical boundaries';
|
|
75
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
76
|
+
setMounted(true);
|
|
77
|
+
setEnabled(readEnabled(storageKey, enabledByDefault));
|
|
78
|
+
}, [
|
|
79
|
+
enabledByDefault,
|
|
80
|
+
storageKey
|
|
81
|
+
]);
|
|
82
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
83
|
+
if (!mounted) return;
|
|
84
|
+
window.localStorage.setItem(storageKey, String(enabled));
|
|
85
|
+
}, [
|
|
86
|
+
enabled,
|
|
87
|
+
mounted,
|
|
88
|
+
storageKey
|
|
89
|
+
]);
|
|
90
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
91
|
+
if (!enabled) return void setBoxes([]);
|
|
92
|
+
const readBoxes = ()=>{
|
|
93
|
+
const nextBoxes = Array.from(document.querySelectorAll('[data-modern-boundary-id]')).map((element, index)=>{
|
|
94
|
+
const boundaryId = element.dataset.modernBoundaryId;
|
|
95
|
+
if (!boundaryId) return;
|
|
96
|
+
const rect = element.getBoundingClientRect();
|
|
97
|
+
if (rect.width <= 0 || rect.height <= 0) return;
|
|
98
|
+
const boundary = boundaries.get(boundaryId);
|
|
99
|
+
const color = boundary?.color ?? palette[index % palette.length];
|
|
100
|
+
return {
|
|
101
|
+
color,
|
|
102
|
+
height: rect.height,
|
|
103
|
+
id: `${boundaryId}-${index}`,
|
|
104
|
+
label: boundary?.label ?? boundaryId,
|
|
105
|
+
left: rect.left,
|
|
106
|
+
top: rect.top,
|
|
107
|
+
width: rect.width
|
|
108
|
+
};
|
|
109
|
+
}).filter((box)=>void 0 !== box);
|
|
110
|
+
setBoxes(nextBoxes);
|
|
111
|
+
};
|
|
112
|
+
readBoxes();
|
|
113
|
+
const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
|
|
114
|
+
for (const element of document.querySelectorAll('[data-modern-boundary-id]'))resizeObserver?.observe(element);
|
|
115
|
+
const mutationObserver = new MutationObserver(readBoxes);
|
|
116
|
+
mutationObserver.observe(document.body, {
|
|
117
|
+
childList: true,
|
|
118
|
+
subtree: true
|
|
119
|
+
});
|
|
120
|
+
window.addEventListener('resize', readBoxes);
|
|
121
|
+
window.addEventListener('scroll', readBoxes, true);
|
|
122
|
+
return ()=>{
|
|
123
|
+
mutationObserver.disconnect();
|
|
124
|
+
resizeObserver?.disconnect();
|
|
125
|
+
window.removeEventListener('resize', readBoxes);
|
|
126
|
+
window.removeEventListener('scroll', readBoxes, true);
|
|
127
|
+
};
|
|
128
|
+
}, [
|
|
129
|
+
boundaries,
|
|
130
|
+
enabled
|
|
131
|
+
]);
|
|
132
|
+
if (!mounted) return null;
|
|
133
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
134
|
+
children: [
|
|
135
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("label", {
|
|
136
|
+
style: {
|
|
137
|
+
alignItems: 'center',
|
|
138
|
+
background: 'rgba(255, 255, 255, 0.96)',
|
|
139
|
+
border: '1px solid rgba(0, 0, 0, 0.1)',
|
|
140
|
+
borderRadius: 12,
|
|
141
|
+
bottom: 20,
|
|
142
|
+
boxShadow: '0 16px 40px rgba(0, 0, 0, 0.16)',
|
|
143
|
+
color: '#111827',
|
|
144
|
+
display: 'flex',
|
|
145
|
+
font: '600 14px/1.2 system-ui, sans-serif',
|
|
146
|
+
gap: 8,
|
|
147
|
+
left: 20,
|
|
148
|
+
padding: '12px 14px',
|
|
149
|
+
position: 'fixed',
|
|
150
|
+
zIndex: 2147483000
|
|
151
|
+
},
|
|
152
|
+
children: [
|
|
153
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
|
|
154
|
+
checked: enabled,
|
|
155
|
+
onChange: (event)=>setEnabled(event.currentTarget.checked),
|
|
156
|
+
type: "checkbox"
|
|
157
|
+
}),
|
|
158
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
159
|
+
children: toggleLabel
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
}),
|
|
163
|
+
enabled ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
164
|
+
"aria-hidden": "true",
|
|
165
|
+
children: boxes.map((box)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
166
|
+
style: {
|
|
167
|
+
border: `2px solid ${box.color}`,
|
|
168
|
+
borderRadius: 8,
|
|
169
|
+
boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
|
|
170
|
+
height: box.height,
|
|
171
|
+
left: box.left,
|
|
172
|
+
pointerEvents: 'none',
|
|
173
|
+
position: 'fixed',
|
|
174
|
+
top: box.top,
|
|
175
|
+
width: box.width,
|
|
176
|
+
zIndex: 2147482999
|
|
177
|
+
},
|
|
178
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
179
|
+
style: {
|
|
180
|
+
background: box.color,
|
|
181
|
+
borderRadius: 999,
|
|
182
|
+
color: '#111827',
|
|
183
|
+
font: '800 11px/1 system-ui, sans-serif',
|
|
184
|
+
padding: '5px 8px',
|
|
185
|
+
position: 'absolute',
|
|
186
|
+
right: 4,
|
|
187
|
+
top: 4,
|
|
188
|
+
whiteSpace: 'nowrap'
|
|
189
|
+
},
|
|
190
|
+
children: box.label
|
|
191
|
+
})
|
|
192
|
+
}, box.id))
|
|
193
|
+
}) : null
|
|
194
|
+
]
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
const ultramodernBoundaryDebuggerPlugin = (options)=>({
|
|
198
|
+
name: '@modern-js/runtime/boundary-debugger',
|
|
199
|
+
setup: (api)=>{
|
|
200
|
+
api.wrapRoot((App)=>(props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
201
|
+
children: [
|
|
202
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
|
|
203
|
+
...props
|
|
204
|
+
}),
|
|
205
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BoundaryDebugger, {
|
|
206
|
+
...options
|
|
207
|
+
})
|
|
208
|
+
]
|
|
209
|
+
}));
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
|
|
213
|
+
exports["default"] = __webpack_exports__["default"];
|
|
214
|
+
exports.ultramodernBoundaryDebuggerPlugin = __webpack_exports__.ultramodernBoundaryDebuggerPlugin;
|
|
215
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
216
|
+
"default",
|
|
217
|
+
"ultramodernBoundaryDebuggerPlugin"
|
|
218
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
219
|
+
Object.defineProperty(exports, '__esModule', {
|
|
220
|
+
value: true
|
|
221
|
+
});
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useMemo, useState } from "react";
|
|
3
|
+
const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
|
|
4
|
+
const defaultLabels = {
|
|
5
|
+
cs: {
|
|
6
|
+
toggle: 'zobrazit hranice verticalů'
|
|
7
|
+
},
|
|
8
|
+
en: {
|
|
9
|
+
toggle: 'show vertical boundaries'
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const palette = [
|
|
13
|
+
'#ff5a5f',
|
|
14
|
+
'#30e27a',
|
|
15
|
+
'#f6cf45',
|
|
16
|
+
'#7c8cff',
|
|
17
|
+
'#29b6f6'
|
|
18
|
+
];
|
|
19
|
+
const readEnabled = (storageKey, fallback)=>{
|
|
20
|
+
if ("u" < typeof window) return fallback;
|
|
21
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
22
|
+
return null === stored ? fallback : 'true' === stored;
|
|
23
|
+
};
|
|
24
|
+
const detectLanguage = ()=>{
|
|
25
|
+
if ("u" < typeof document) return 'en';
|
|
26
|
+
const htmlLanguage = document.documentElement.lang;
|
|
27
|
+
if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
|
|
28
|
+
return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
|
|
29
|
+
};
|
|
30
|
+
function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, metadata, storageKey = defaultStorageKey }) {
|
|
31
|
+
const [mounted, setMounted] = useState(false);
|
|
32
|
+
const [enabled, setEnabled] = useState(false);
|
|
33
|
+
const [boxes, setBoxes] = useState([]);
|
|
34
|
+
const boundaries = useMemo(()=>new Map(metadata.boundaries.map((entry, index)=>[
|
|
35
|
+
entry.mfName,
|
|
36
|
+
{
|
|
37
|
+
...entry,
|
|
38
|
+
color: entry.color ?? palette[index % palette.length],
|
|
39
|
+
label: entry.label ?? entry.appId
|
|
40
|
+
}
|
|
41
|
+
])), [
|
|
42
|
+
metadata
|
|
43
|
+
]);
|
|
44
|
+
const language = mounted ? detectLanguage() : 'en';
|
|
45
|
+
const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show vertical boundaries';
|
|
46
|
+
useEffect(()=>{
|
|
47
|
+
setMounted(true);
|
|
48
|
+
setEnabled(readEnabled(storageKey, enabledByDefault));
|
|
49
|
+
}, [
|
|
50
|
+
enabledByDefault,
|
|
51
|
+
storageKey
|
|
52
|
+
]);
|
|
53
|
+
useEffect(()=>{
|
|
54
|
+
if (!mounted) return;
|
|
55
|
+
window.localStorage.setItem(storageKey, String(enabled));
|
|
56
|
+
}, [
|
|
57
|
+
enabled,
|
|
58
|
+
mounted,
|
|
59
|
+
storageKey
|
|
60
|
+
]);
|
|
61
|
+
useEffect(()=>{
|
|
62
|
+
if (!enabled) return void setBoxes([]);
|
|
63
|
+
const readBoxes = ()=>{
|
|
64
|
+
const nextBoxes = Array.from(document.querySelectorAll('[data-modern-boundary-id]')).map((element, index)=>{
|
|
65
|
+
const boundaryId = element.dataset.modernBoundaryId;
|
|
66
|
+
if (!boundaryId) return;
|
|
67
|
+
const rect = element.getBoundingClientRect();
|
|
68
|
+
if (rect.width <= 0 || rect.height <= 0) return;
|
|
69
|
+
const boundary = boundaries.get(boundaryId);
|
|
70
|
+
const color = boundary?.color ?? palette[index % palette.length];
|
|
71
|
+
return {
|
|
72
|
+
color,
|
|
73
|
+
height: rect.height,
|
|
74
|
+
id: `${boundaryId}-${index}`,
|
|
75
|
+
label: boundary?.label ?? boundaryId,
|
|
76
|
+
left: rect.left,
|
|
77
|
+
top: rect.top,
|
|
78
|
+
width: rect.width
|
|
79
|
+
};
|
|
80
|
+
}).filter((box)=>void 0 !== box);
|
|
81
|
+
setBoxes(nextBoxes);
|
|
82
|
+
};
|
|
83
|
+
readBoxes();
|
|
84
|
+
const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
|
|
85
|
+
for (const element of document.querySelectorAll('[data-modern-boundary-id]'))resizeObserver?.observe(element);
|
|
86
|
+
const mutationObserver = new MutationObserver(readBoxes);
|
|
87
|
+
mutationObserver.observe(document.body, {
|
|
88
|
+
childList: true,
|
|
89
|
+
subtree: true
|
|
90
|
+
});
|
|
91
|
+
window.addEventListener('resize', readBoxes);
|
|
92
|
+
window.addEventListener('scroll', readBoxes, true);
|
|
93
|
+
return ()=>{
|
|
94
|
+
mutationObserver.disconnect();
|
|
95
|
+
resizeObserver?.disconnect();
|
|
96
|
+
window.removeEventListener('resize', readBoxes);
|
|
97
|
+
window.removeEventListener('scroll', readBoxes, true);
|
|
98
|
+
};
|
|
99
|
+
}, [
|
|
100
|
+
boundaries,
|
|
101
|
+
enabled
|
|
102
|
+
]);
|
|
103
|
+
if (!mounted) return null;
|
|
104
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
105
|
+
children: [
|
|
106
|
+
/*#__PURE__*/ jsxs("label", {
|
|
107
|
+
style: {
|
|
108
|
+
alignItems: 'center',
|
|
109
|
+
background: 'rgba(255, 255, 255, 0.96)',
|
|
110
|
+
border: '1px solid rgba(0, 0, 0, 0.1)',
|
|
111
|
+
borderRadius: 12,
|
|
112
|
+
bottom: 20,
|
|
113
|
+
boxShadow: '0 16px 40px rgba(0, 0, 0, 0.16)',
|
|
114
|
+
color: '#111827',
|
|
115
|
+
display: 'flex',
|
|
116
|
+
font: '600 14px/1.2 system-ui, sans-serif',
|
|
117
|
+
gap: 8,
|
|
118
|
+
left: 20,
|
|
119
|
+
padding: '12px 14px',
|
|
120
|
+
position: 'fixed',
|
|
121
|
+
zIndex: 2147483000
|
|
122
|
+
},
|
|
123
|
+
children: [
|
|
124
|
+
/*#__PURE__*/ jsx("input", {
|
|
125
|
+
checked: enabled,
|
|
126
|
+
onChange: (event)=>setEnabled(event.currentTarget.checked),
|
|
127
|
+
type: "checkbox"
|
|
128
|
+
}),
|
|
129
|
+
/*#__PURE__*/ jsx("span", {
|
|
130
|
+
children: toggleLabel
|
|
131
|
+
})
|
|
132
|
+
]
|
|
133
|
+
}),
|
|
134
|
+
enabled ? /*#__PURE__*/ jsx("div", {
|
|
135
|
+
"aria-hidden": "true",
|
|
136
|
+
children: boxes.map((box)=>/*#__PURE__*/ jsx("div", {
|
|
137
|
+
style: {
|
|
138
|
+
border: `2px solid ${box.color}`,
|
|
139
|
+
borderRadius: 8,
|
|
140
|
+
boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
|
|
141
|
+
height: box.height,
|
|
142
|
+
left: box.left,
|
|
143
|
+
pointerEvents: 'none',
|
|
144
|
+
position: 'fixed',
|
|
145
|
+
top: box.top,
|
|
146
|
+
width: box.width,
|
|
147
|
+
zIndex: 2147482999
|
|
148
|
+
},
|
|
149
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
150
|
+
style: {
|
|
151
|
+
background: box.color,
|
|
152
|
+
borderRadius: 999,
|
|
153
|
+
color: '#111827',
|
|
154
|
+
font: '800 11px/1 system-ui, sans-serif',
|
|
155
|
+
padding: '5px 8px',
|
|
156
|
+
position: 'absolute',
|
|
157
|
+
right: 4,
|
|
158
|
+
top: 4,
|
|
159
|
+
whiteSpace: 'nowrap'
|
|
160
|
+
},
|
|
161
|
+
children: box.label
|
|
162
|
+
})
|
|
163
|
+
}, box.id))
|
|
164
|
+
}) : null
|
|
165
|
+
]
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
const ultramodernBoundaryDebuggerPlugin = (options)=>({
|
|
169
|
+
name: '@modern-js/runtime/boundary-debugger',
|
|
170
|
+
setup: (api)=>{
|
|
171
|
+
api.wrapRoot((App)=>(props)=>/*#__PURE__*/ jsxs(Fragment, {
|
|
172
|
+
children: [
|
|
173
|
+
/*#__PURE__*/ jsx(App, {
|
|
174
|
+
...props
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ jsx(BoundaryDebugger, {
|
|
177
|
+
...options
|
|
178
|
+
})
|
|
179
|
+
]
|
|
180
|
+
}));
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
|
|
184
|
+
export default boundary_debugger;
|
|
185
|
+
export { ultramodernBoundaryDebuggerPlugin };
|
|
@@ -0,0 +1,186 @@
|
|
|
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 defaultLabels = {
|
|
6
|
+
cs: {
|
|
7
|
+
toggle: 'zobrazit hranice verticalů'
|
|
8
|
+
},
|
|
9
|
+
en: {
|
|
10
|
+
toggle: 'show vertical boundaries'
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const palette = [
|
|
14
|
+
'#ff5a5f',
|
|
15
|
+
'#30e27a',
|
|
16
|
+
'#f6cf45',
|
|
17
|
+
'#7c8cff',
|
|
18
|
+
'#29b6f6'
|
|
19
|
+
];
|
|
20
|
+
const readEnabled = (storageKey, fallback)=>{
|
|
21
|
+
if ("u" < typeof window) return fallback;
|
|
22
|
+
const stored = window.localStorage.getItem(storageKey);
|
|
23
|
+
return null === stored ? fallback : 'true' === stored;
|
|
24
|
+
};
|
|
25
|
+
const detectLanguage = ()=>{
|
|
26
|
+
if ("u" < typeof document) return 'en';
|
|
27
|
+
const htmlLanguage = document.documentElement.lang;
|
|
28
|
+
if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
|
|
29
|
+
return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
|
|
30
|
+
};
|
|
31
|
+
function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, metadata, storageKey = defaultStorageKey }) {
|
|
32
|
+
const [mounted, setMounted] = useState(false);
|
|
33
|
+
const [enabled, setEnabled] = useState(false);
|
|
34
|
+
const [boxes, setBoxes] = useState([]);
|
|
35
|
+
const boundaries = useMemo(()=>new Map(metadata.boundaries.map((entry, index)=>[
|
|
36
|
+
entry.mfName,
|
|
37
|
+
{
|
|
38
|
+
...entry,
|
|
39
|
+
color: entry.color ?? palette[index % palette.length],
|
|
40
|
+
label: entry.label ?? entry.appId
|
|
41
|
+
}
|
|
42
|
+
])), [
|
|
43
|
+
metadata
|
|
44
|
+
]);
|
|
45
|
+
const language = mounted ? detectLanguage() : 'en';
|
|
46
|
+
const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show vertical boundaries';
|
|
47
|
+
useEffect(()=>{
|
|
48
|
+
setMounted(true);
|
|
49
|
+
setEnabled(readEnabled(storageKey, enabledByDefault));
|
|
50
|
+
}, [
|
|
51
|
+
enabledByDefault,
|
|
52
|
+
storageKey
|
|
53
|
+
]);
|
|
54
|
+
useEffect(()=>{
|
|
55
|
+
if (!mounted) return;
|
|
56
|
+
window.localStorage.setItem(storageKey, String(enabled));
|
|
57
|
+
}, [
|
|
58
|
+
enabled,
|
|
59
|
+
mounted,
|
|
60
|
+
storageKey
|
|
61
|
+
]);
|
|
62
|
+
useEffect(()=>{
|
|
63
|
+
if (!enabled) return void setBoxes([]);
|
|
64
|
+
const readBoxes = ()=>{
|
|
65
|
+
const nextBoxes = Array.from(document.querySelectorAll('[data-modern-boundary-id]')).map((element, index)=>{
|
|
66
|
+
const boundaryId = element.dataset.modernBoundaryId;
|
|
67
|
+
if (!boundaryId) return;
|
|
68
|
+
const rect = element.getBoundingClientRect();
|
|
69
|
+
if (rect.width <= 0 || rect.height <= 0) return;
|
|
70
|
+
const boundary = boundaries.get(boundaryId);
|
|
71
|
+
const color = boundary?.color ?? palette[index % palette.length];
|
|
72
|
+
return {
|
|
73
|
+
color,
|
|
74
|
+
height: rect.height,
|
|
75
|
+
id: `${boundaryId}-${index}`,
|
|
76
|
+
label: boundary?.label ?? boundaryId,
|
|
77
|
+
left: rect.left,
|
|
78
|
+
top: rect.top,
|
|
79
|
+
width: rect.width
|
|
80
|
+
};
|
|
81
|
+
}).filter((box)=>void 0 !== box);
|
|
82
|
+
setBoxes(nextBoxes);
|
|
83
|
+
};
|
|
84
|
+
readBoxes();
|
|
85
|
+
const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
|
|
86
|
+
for (const element of document.querySelectorAll('[data-modern-boundary-id]'))resizeObserver?.observe(element);
|
|
87
|
+
const mutationObserver = new MutationObserver(readBoxes);
|
|
88
|
+
mutationObserver.observe(document.body, {
|
|
89
|
+
childList: true,
|
|
90
|
+
subtree: true
|
|
91
|
+
});
|
|
92
|
+
window.addEventListener('resize', readBoxes);
|
|
93
|
+
window.addEventListener('scroll', readBoxes, true);
|
|
94
|
+
return ()=>{
|
|
95
|
+
mutationObserver.disconnect();
|
|
96
|
+
resizeObserver?.disconnect();
|
|
97
|
+
window.removeEventListener('resize', readBoxes);
|
|
98
|
+
window.removeEventListener('scroll', readBoxes, true);
|
|
99
|
+
};
|
|
100
|
+
}, [
|
|
101
|
+
boundaries,
|
|
102
|
+
enabled
|
|
103
|
+
]);
|
|
104
|
+
if (!mounted) return null;
|
|
105
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
106
|
+
children: [
|
|
107
|
+
/*#__PURE__*/ jsxs("label", {
|
|
108
|
+
style: {
|
|
109
|
+
alignItems: 'center',
|
|
110
|
+
background: 'rgba(255, 255, 255, 0.96)',
|
|
111
|
+
border: '1px solid rgba(0, 0, 0, 0.1)',
|
|
112
|
+
borderRadius: 12,
|
|
113
|
+
bottom: 20,
|
|
114
|
+
boxShadow: '0 16px 40px rgba(0, 0, 0, 0.16)',
|
|
115
|
+
color: '#111827',
|
|
116
|
+
display: 'flex',
|
|
117
|
+
font: '600 14px/1.2 system-ui, sans-serif',
|
|
118
|
+
gap: 8,
|
|
119
|
+
left: 20,
|
|
120
|
+
padding: '12px 14px',
|
|
121
|
+
position: 'fixed',
|
|
122
|
+
zIndex: 2147483000
|
|
123
|
+
},
|
|
124
|
+
children: [
|
|
125
|
+
/*#__PURE__*/ jsx("input", {
|
|
126
|
+
checked: enabled,
|
|
127
|
+
onChange: (event)=>setEnabled(event.currentTarget.checked),
|
|
128
|
+
type: "checkbox"
|
|
129
|
+
}),
|
|
130
|
+
/*#__PURE__*/ jsx("span", {
|
|
131
|
+
children: toggleLabel
|
|
132
|
+
})
|
|
133
|
+
]
|
|
134
|
+
}),
|
|
135
|
+
enabled ? /*#__PURE__*/ jsx("div", {
|
|
136
|
+
"aria-hidden": "true",
|
|
137
|
+
children: boxes.map((box)=>/*#__PURE__*/ jsx("div", {
|
|
138
|
+
style: {
|
|
139
|
+
border: `2px solid ${box.color}`,
|
|
140
|
+
borderRadius: 8,
|
|
141
|
+
boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
|
|
142
|
+
height: box.height,
|
|
143
|
+
left: box.left,
|
|
144
|
+
pointerEvents: 'none',
|
|
145
|
+
position: 'fixed',
|
|
146
|
+
top: box.top,
|
|
147
|
+
width: box.width,
|
|
148
|
+
zIndex: 2147482999
|
|
149
|
+
},
|
|
150
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
151
|
+
style: {
|
|
152
|
+
background: box.color,
|
|
153
|
+
borderRadius: 999,
|
|
154
|
+
color: '#111827',
|
|
155
|
+
font: '800 11px/1 system-ui, sans-serif',
|
|
156
|
+
padding: '5px 8px',
|
|
157
|
+
position: 'absolute',
|
|
158
|
+
right: 4,
|
|
159
|
+
top: 4,
|
|
160
|
+
whiteSpace: 'nowrap'
|
|
161
|
+
},
|
|
162
|
+
children: box.label
|
|
163
|
+
})
|
|
164
|
+
}, box.id))
|
|
165
|
+
}) : null
|
|
166
|
+
]
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
const ultramodernBoundaryDebuggerPlugin = (options)=>({
|
|
170
|
+
name: '@modern-js/runtime/boundary-debugger',
|
|
171
|
+
setup: (api)=>{
|
|
172
|
+
api.wrapRoot((App)=>(props)=>/*#__PURE__*/ jsxs(Fragment, {
|
|
173
|
+
children: [
|
|
174
|
+
/*#__PURE__*/ jsx(App, {
|
|
175
|
+
...props
|
|
176
|
+
}),
|
|
177
|
+
/*#__PURE__*/ jsx(BoundaryDebugger, {
|
|
178
|
+
...options
|
|
179
|
+
})
|
|
180
|
+
]
|
|
181
|
+
}));
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
|
|
185
|
+
export default boundary_debugger;
|
|
186
|
+
export { ultramodernBoundaryDebuggerPlugin };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { RuntimePlugin } from '../core';
|
|
2
|
+
export type BoundaryDebugEntry = {
|
|
3
|
+
appId: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
mfName: string;
|
|
7
|
+
ownerTeam?: string;
|
|
8
|
+
packageName?: string;
|
|
9
|
+
role?: 'host' | 'vertical';
|
|
10
|
+
};
|
|
11
|
+
export type BoundaryDebugMetadata = {
|
|
12
|
+
appId: string;
|
|
13
|
+
boundaries: BoundaryDebugEntry[];
|
|
14
|
+
schemaVersion: 1;
|
|
15
|
+
};
|
|
16
|
+
export type BoundaryDebuggerPluginOptions = {
|
|
17
|
+
enabledByDefault?: boolean;
|
|
18
|
+
labels?: Record<string, {
|
|
19
|
+
toggle: string;
|
|
20
|
+
}>;
|
|
21
|
+
metadata: BoundaryDebugMetadata;
|
|
22
|
+
storageKey?: string;
|
|
23
|
+
};
|
|
24
|
+
export declare const ultramodernBoundaryDebuggerPlugin: (options: BoundaryDebuggerPluginOptions) => RuntimePlugin;
|
|
25
|
+
export default ultramodernBoundaryDebuggerPlugin;
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"modern",
|
|
18
18
|
"modern.js"
|
|
19
19
|
],
|
|
20
|
-
"version": "3.2.0-ultramodern.
|
|
20
|
+
"version": "3.2.0-ultramodern.61",
|
|
21
21
|
"engines": {
|
|
22
22
|
"node": ">=20"
|
|
23
23
|
},
|
|
@@ -63,6 +63,10 @@
|
|
|
63
63
|
"types": "./dist/types/exports/head.d.ts",
|
|
64
64
|
"default": "./dist/esm/exports/head.mjs"
|
|
65
65
|
},
|
|
66
|
+
"./boundary-debugger": {
|
|
67
|
+
"types": "./dist/types/boundary-debugger/index.d.ts",
|
|
68
|
+
"default": "./dist/esm/boundary-debugger/index.mjs"
|
|
69
|
+
},
|
|
66
70
|
"./ssr": {
|
|
67
71
|
"types": "./dist/types/core/server/index.d.ts",
|
|
68
72
|
"default": "./dist/esm/core/server/index.mjs"
|
|
@@ -168,6 +172,9 @@
|
|
|
168
172
|
"head": [
|
|
169
173
|
"./dist/types/exports/head.d.ts"
|
|
170
174
|
],
|
|
175
|
+
"boundary-debugger": [
|
|
176
|
+
"./dist/types/boundary-debugger/index.d.ts"
|
|
177
|
+
],
|
|
171
178
|
"document": [
|
|
172
179
|
"./dist/types/document/index.d.ts"
|
|
173
180
|
],
|
|
@@ -227,12 +234,12 @@
|
|
|
227
234
|
"isbot": "5.1.40",
|
|
228
235
|
"react-helmet": "^6.1.0",
|
|
229
236
|
"react-is": "^19.2.6",
|
|
230
|
-
"@modern-js/plugin
|
|
231
|
-
"@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.
|
|
232
|
-
"@modern-js/render": "npm:@bleedingdev/modern-js-render@3.2.0-ultramodern.
|
|
233
|
-
"@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.
|
|
234
|
-
"@modern-js/
|
|
235
|
-
"@modern-js/
|
|
237
|
+
"@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.61",
|
|
238
|
+
"@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.61",
|
|
239
|
+
"@modern-js/render": "npm:@bleedingdev/modern-js-render@3.2.0-ultramodern.61",
|
|
240
|
+
"@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.61",
|
|
241
|
+
"@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.2.0-ultramodern.61",
|
|
242
|
+
"@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.61"
|
|
236
243
|
},
|
|
237
244
|
"peerDependencies": {
|
|
238
245
|
"react": "^19.2.6",
|
|
@@ -251,8 +258,8 @@
|
|
|
251
258
|
"@typescript/native-preview": "7.0.0-dev.20260527.2",
|
|
252
259
|
"react": "^19.2.6",
|
|
253
260
|
"react-dom": "^19.2.6",
|
|
254
|
-
"@
|
|
255
|
-
"@
|
|
261
|
+
"@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.61",
|
|
262
|
+
"@scripts/rstest-config": "2.66.0"
|
|
256
263
|
},
|
|
257
264
|
"sideEffects": false,
|
|
258
265
|
"publishConfig": {
|