react-code-locator 0.1.6 → 0.1.8
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/README.md +63 -26
- package/dist/babel.cjs +17 -2
- package/dist/babel.cjs.map +1 -1
- package/dist/babel.js +17 -2
- package/dist/babel.js.map +1 -1
- package/dist/babelInjectComponentSource.cjs +17 -2
- package/dist/babelInjectComponentSource.cjs.map +1 -1
- package/dist/babelInjectComponentSource.js +17 -2
- package/dist/babelInjectComponentSource.js.map +1 -1
- package/dist/client.cjs +96 -0
- package/dist/client.cjs.map +1 -1
- package/dist/client.js +96 -0
- package/dist/client.js.map +1 -1
- package/dist/index.cjs +96 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +96 -0
- package/dist/index.js.map +1 -1
- package/dist/vite.cjs +61 -58
- package/dist/vite.cjs.map +1 -1
- package/dist/vite.d.cts +2 -2
- package/dist/vite.d.ts +2 -2
- package/dist/vite.js +60 -58
- package/dist/vite.js.map +1 -1
- package/dist/webpackRuntimeEntry.cjs +96 -0
- package/dist/webpackRuntimeEntry.cjs.map +1 -1
- package/dist/webpackRuntimeEntry.js +96 -0
- package/dist/webpackRuntimeEntry.js.map +1 -1
- package/package.json +4 -9
|
@@ -83,6 +83,86 @@ function getDebugSource(fiber) {
|
|
|
83
83
|
}
|
|
84
84
|
return null;
|
|
85
85
|
}
|
|
86
|
+
function createStatusOverlay(triggerKey) {
|
|
87
|
+
if (typeof document === "undefined") {
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
const element = document.createElement("div");
|
|
91
|
+
let currentText = "";
|
|
92
|
+
let copyValue = null;
|
|
93
|
+
let hideTimer = null;
|
|
94
|
+
element.setAttribute("data-react-code-locator", "true");
|
|
95
|
+
Object.assign(element.style, {
|
|
96
|
+
position: "fixed",
|
|
97
|
+
right: "12px",
|
|
98
|
+
bottom: "12px",
|
|
99
|
+
zIndex: "2147483647",
|
|
100
|
+
padding: "8px 10px",
|
|
101
|
+
borderRadius: "8px",
|
|
102
|
+
background: "rgba(17, 24, 39, 0.92)",
|
|
103
|
+
color: "#fff",
|
|
104
|
+
fontSize: "12px",
|
|
105
|
+
lineHeight: "1.4",
|
|
106
|
+
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
|
107
|
+
boxShadow: "0 8px 30px rgba(0, 0, 0, 0.25)",
|
|
108
|
+
pointerEvents: "auto",
|
|
109
|
+
cursor: "pointer",
|
|
110
|
+
maxWidth: "min(70vw, 720px)",
|
|
111
|
+
wordBreak: "break-all",
|
|
112
|
+
opacity: "0",
|
|
113
|
+
transition: "opacity 120ms ease"
|
|
114
|
+
});
|
|
115
|
+
const show = (message, tone) => {
|
|
116
|
+
currentText = message;
|
|
117
|
+
element.textContent = message;
|
|
118
|
+
element.style.background = tone === "success" ? "rgba(6, 95, 70, 0.92)" : tone === "error" ? "rgba(153, 27, 27, 0.94)" : "rgba(17, 24, 39, 0.92)";
|
|
119
|
+
element.style.opacity = "1";
|
|
120
|
+
element.style.pointerEvents = "auto";
|
|
121
|
+
if (hideTimer) {
|
|
122
|
+
clearTimeout(hideTimer);
|
|
123
|
+
}
|
|
124
|
+
hideTimer = setTimeout(() => {
|
|
125
|
+
element.style.opacity = "0";
|
|
126
|
+
element.style.pointerEvents = "none";
|
|
127
|
+
}, 1500);
|
|
128
|
+
};
|
|
129
|
+
element.addEventListener("click", async () => {
|
|
130
|
+
if (!copyValue) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
try {
|
|
134
|
+
await navigator.clipboard.writeText(copyValue);
|
|
135
|
+
show(`[react-code-locator] copied`, "success");
|
|
136
|
+
} catch {
|
|
137
|
+
show(`[react-code-locator] copy failed`, "error");
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
show(`[react-code-locator] enabled (${triggerKey}+click)`, "idle");
|
|
141
|
+
const mount = () => {
|
|
142
|
+
if (!element.isConnected && document.body) {
|
|
143
|
+
document.body.appendChild(element);
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
if (document.body) {
|
|
147
|
+
mount();
|
|
148
|
+
} else {
|
|
149
|
+
document.addEventListener("DOMContentLoaded", mount, { once: true });
|
|
150
|
+
}
|
|
151
|
+
return {
|
|
152
|
+
setStatus(message, tone = "idle") {
|
|
153
|
+
show(message, tone);
|
|
154
|
+
},
|
|
155
|
+
setCopyValue(value) {
|
|
156
|
+
copyValue = value;
|
|
157
|
+
},
|
|
158
|
+
remove() {
|
|
159
|
+
if (hideTimer) {
|
|
160
|
+
clearTimeout(hideTimer);
|
|
161
|
+
}
|
|
162
|
+
element.remove();
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
86
166
|
function locateComponentSource(target) {
|
|
87
167
|
const elementTarget = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
|
|
88
168
|
const fiber = getClosestReactFiber(elementTarget);
|
|
@@ -106,16 +186,31 @@ function locateComponentSource(target) {
|
|
|
106
186
|
};
|
|
107
187
|
}
|
|
108
188
|
function enableReactComponentJump(options = {}) {
|
|
189
|
+
const overlay = createStatusOverlay(options.triggerKey ?? "shift");
|
|
109
190
|
const {
|
|
110
191
|
triggerKey = "shift",
|
|
111
192
|
onLocate = (result) => {
|
|
112
193
|
console.log(`[react-code-locator] ${result.source}`);
|
|
194
|
+
overlay?.setCopyValue(result.source);
|
|
195
|
+
overlay?.setStatus(`[react-code-locator] ${result.source}`, "success");
|
|
113
196
|
},
|
|
114
197
|
onError = (error) => {
|
|
115
198
|
console.error("[react-code-locator]", error);
|
|
199
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
200
|
+
overlay?.setCopyValue(null);
|
|
201
|
+
overlay?.setStatus(`[react-code-locator] ${message}`, "error");
|
|
116
202
|
}
|
|
117
203
|
} = options;
|
|
204
|
+
console.log("[react-code-locator] enabled", { triggerKey });
|
|
118
205
|
const handler = (event) => {
|
|
206
|
+
console.log("[react-code-locator] click", {
|
|
207
|
+
triggerKey,
|
|
208
|
+
shiftKey: event.shiftKey,
|
|
209
|
+
altKey: event.altKey,
|
|
210
|
+
ctrlKey: event.ctrlKey,
|
|
211
|
+
metaKey: event.metaKey,
|
|
212
|
+
target: event.target
|
|
213
|
+
});
|
|
119
214
|
if (!isTriggerPressed(event, triggerKey)) {
|
|
120
215
|
return;
|
|
121
216
|
}
|
|
@@ -131,6 +226,7 @@ function enableReactComponentJump(options = {}) {
|
|
|
131
226
|
document.addEventListener("click", handler, true);
|
|
132
227
|
return () => {
|
|
133
228
|
document.removeEventListener("click", handler, true);
|
|
229
|
+
overlay?.remove();
|
|
134
230
|
};
|
|
135
231
|
}
|
|
136
232
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/runtime.ts","../src/webpackRuntimeEntry.ts"],"sourcesContent":["export const SOURCE_PROP = \"__componentSourceLoc\";\n\n","import { SOURCE_PROP } from \"./constants\";\n\nexport type TriggerKey = \"alt\" | \"meta\" | \"ctrl\" | \"shift\" | \"none\";\n\ntype ReactFiber = {\n return?: ReactFiber | null;\n type?: unknown;\n elementType?: unknown;\n pendingProps?: Record<string, unknown> | null;\n memoizedProps?: Record<string, unknown> | null;\n _debugSource?: {\n fileName?: string;\n lineNumber?: number;\n columnNumber?: number;\n } | null;\n};\n\nexport type LocatorResult = {\n source: string;\n mode: \"jsx\" | \"component\";\n};\n\nexport type LocatorOptions = {\n triggerKey?: TriggerKey;\n onLocate?: (result: LocatorResult) => void;\n onError?: (error: unknown) => void;\n};\n\nfunction isTriggerPressed(event: MouseEvent, triggerKey: TriggerKey) {\n if (triggerKey === \"none\") {\n return true;\n }\n\n if (triggerKey === \"alt\") {\n return event.altKey;\n }\n\n if (triggerKey === \"meta\") {\n return event.metaKey;\n }\n\n if (triggerKey === \"ctrl\") {\n return event.ctrlKey;\n }\n\n return event.shiftKey;\n}\n\nfunction getReactFiberKey(element: Element) {\n return Object.keys(element).find((key) => key.startsWith(\"__reactFiber$\") || key.startsWith(\"__reactInternalInstance$\"));\n}\n\nfunction getClosestReactFiber(target: Element | null) {\n let current = target;\n\n while (current) {\n const fiberKey = getReactFiberKey(current);\n if (fiberKey) {\n return (current as unknown as Record<string, unknown>)[fiberKey] as ReactFiber;\n }\n\n current = current.parentElement;\n }\n\n return null;\n}\n\nfunction getSourceFromType(type: unknown) {\n if (!type) {\n return null;\n }\n\n if (typeof type === \"function\") {\n const source = (type as unknown as Record<string, unknown>)[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n }\n\n if (typeof type !== \"object\") {\n return null;\n }\n\n const record = type as {\n type?: Record<string, unknown>;\n render?: Record<string, unknown>;\n [SOURCE_PROP]?: unknown;\n };\n\n const source = record[SOURCE_PROP] ?? record.type?.[SOURCE_PROP] ?? record.render?.[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n}\n\nfunction getSourceFromProps(props: Record<string, unknown> | null | undefined) {\n const source = props?.[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n}\n\nfunction resolveJsxSourceFromFiber(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const source = getSourceFromProps(current.pendingProps) ?? getSourceFromProps(current.memoizedProps);\n if (source) {\n return source;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nfunction resolveComponentSourceFromFiber(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const source = getSourceFromType(current.type) ?? getSourceFromType(current.elementType);\n if (source) {\n return source;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nfunction getDebugSource(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const debugSource = current._debugSource;\n if (debugSource?.fileName && typeof debugSource.lineNumber === \"number\") {\n return `${debugSource.fileName.replace(/\\\\/g, \"/\")}:${debugSource.lineNumber}:${debugSource.columnNumber ?? 1}`;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nexport function locateComponentSource(target: EventTarget | null): LocatorResult | null {\n const elementTarget =\n target instanceof Element ? target : target instanceof Node ? target.parentElement : null;\n const fiber = getClosestReactFiber(elementTarget);\n if (!fiber) {\n return null;\n }\n\n const jsxSource = resolveJsxSourceFromFiber(fiber) ?? getDebugSource(fiber);\n if (jsxSource) {\n return {\n source: jsxSource,\n mode: \"jsx\",\n };\n }\n\n const componentSource = resolveComponentSourceFromFiber(fiber);\n if (!componentSource) {\n return null;\n }\n\n return {\n source: componentSource,\n mode: \"component\",\n };\n}\n\nexport function enableReactComponentJump(options: LocatorOptions = {}) {\n const {\n triggerKey = \"shift\",\n onLocate = (result) => {\n console.log(`[react-code-locator] ${result.source}`);\n },\n onError = (error) => {\n console.error(\"[react-code-locator]\", error);\n },\n } = options;\n\n const handler = (event: MouseEvent) => {\n if (!isTriggerPressed(event, triggerKey)) {\n return;\n }\n\n const result = locateComponentSource(event.target);\n if (!result) {\n onError(new Error(\"No React component source metadata found for clicked element.\"));\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n onLocate(result);\n };\n\n document.addEventListener(\"click\", handler, true);\n\n return () => {\n document.removeEventListener(\"click\", handler, true);\n };\n}\n","import { enableReactComponentJump } from \"./runtime\";\n\nif (typeof document !== \"undefined\") {\n enableReactComponentJump();\n}\n\n"],"mappings":"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","names":["source"]}
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/runtime.ts","../src/webpackRuntimeEntry.ts"],"sourcesContent":["export const SOURCE_PROP = \"__componentSourceLoc\";\n\n","import { SOURCE_PROP } from \"./constants\";\n\nexport type TriggerKey = \"alt\" | \"meta\" | \"ctrl\" | \"shift\" | \"none\";\n\ntype ReactFiber = {\n return?: ReactFiber | null;\n type?: unknown;\n elementType?: unknown;\n pendingProps?: Record<string, unknown> | null;\n memoizedProps?: Record<string, unknown> | null;\n _debugSource?: {\n fileName?: string;\n lineNumber?: number;\n columnNumber?: number;\n } | null;\n};\n\nexport type LocatorResult = {\n source: string;\n mode: \"jsx\" | \"component\";\n};\n\nexport type LocatorOptions = {\n triggerKey?: TriggerKey;\n onLocate?: (result: LocatorResult) => void;\n onError?: (error: unknown) => void;\n};\n\ntype StatusOverlay = {\n setStatus: (message: string, tone?: \"idle\" | \"success\" | \"error\") => void;\n setCopyValue: (value: string | null) => void;\n remove: () => void;\n};\n\nfunction isTriggerPressed(event: MouseEvent, triggerKey: TriggerKey) {\n if (triggerKey === \"none\") {\n return true;\n }\n\n if (triggerKey === \"alt\") {\n return event.altKey;\n }\n\n if (triggerKey === \"meta\") {\n return event.metaKey;\n }\n\n if (triggerKey === \"ctrl\") {\n return event.ctrlKey;\n }\n\n return event.shiftKey;\n}\n\nfunction getReactFiberKey(element: Element) {\n return Object.keys(element).find((key) => key.startsWith(\"__reactFiber$\") || key.startsWith(\"__reactInternalInstance$\"));\n}\n\nfunction getClosestReactFiber(target: Element | null) {\n let current = target;\n\n while (current) {\n const fiberKey = getReactFiberKey(current);\n if (fiberKey) {\n return (current as unknown as Record<string, unknown>)[fiberKey] as ReactFiber;\n }\n\n current = current.parentElement;\n }\n\n return null;\n}\n\nfunction getSourceFromType(type: unknown) {\n if (!type) {\n return null;\n }\n\n if (typeof type === \"function\") {\n const source = (type as unknown as Record<string, unknown>)[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n }\n\n if (typeof type !== \"object\") {\n return null;\n }\n\n const record = type as {\n type?: Record<string, unknown>;\n render?: Record<string, unknown>;\n [SOURCE_PROP]?: unknown;\n };\n\n const source = record[SOURCE_PROP] ?? record.type?.[SOURCE_PROP] ?? record.render?.[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n}\n\nfunction getSourceFromProps(props: Record<string, unknown> | null | undefined) {\n const source = props?.[SOURCE_PROP];\n return typeof source === \"string\" ? source : null;\n}\n\nfunction resolveJsxSourceFromFiber(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const source = getSourceFromProps(current.pendingProps) ?? getSourceFromProps(current.memoizedProps);\n if (source) {\n return source;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nfunction resolveComponentSourceFromFiber(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const source = getSourceFromType(current.type) ?? getSourceFromType(current.elementType);\n if (source) {\n return source;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nfunction getDebugSource(fiber: ReactFiber | null) {\n let current = fiber;\n\n while (current) {\n const debugSource = current._debugSource;\n if (debugSource?.fileName && typeof debugSource.lineNumber === \"number\") {\n return `${debugSource.fileName.replace(/\\\\/g, \"/\")}:${debugSource.lineNumber}:${debugSource.columnNumber ?? 1}`;\n }\n\n current = current.return ?? null;\n }\n\n return null;\n}\n\nfunction createStatusOverlay(triggerKey: TriggerKey): StatusOverlay | null {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const element = document.createElement(\"div\");\n let currentText = \"\";\n let copyValue: string | null = null;\n let hideTimer: ReturnType<typeof setTimeout> | null = null;\n element.setAttribute(\"data-react-code-locator\", \"true\");\n Object.assign(element.style, {\n position: \"fixed\",\n right: \"12px\",\n bottom: \"12px\",\n zIndex: \"2147483647\",\n padding: \"8px 10px\",\n borderRadius: \"8px\",\n background: \"rgba(17, 24, 39, 0.92)\",\n color: \"#fff\",\n fontSize: \"12px\",\n lineHeight: \"1.4\",\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n boxShadow: \"0 8px 30px rgba(0, 0, 0, 0.25)\",\n pointerEvents: \"auto\",\n cursor: \"pointer\",\n maxWidth: \"min(70vw, 720px)\",\n wordBreak: \"break-all\",\n opacity: \"0\",\n transition: \"opacity 120ms ease\",\n });\n\n const show = (message: string, tone: \"idle\" | \"success\" | \"error\") => {\n currentText = message;\n element.textContent = message;\n element.style.background =\n tone === \"success\"\n ? \"rgba(6, 95, 70, 0.92)\"\n : tone === \"error\"\n ? \"rgba(153, 27, 27, 0.94)\"\n : \"rgba(17, 24, 39, 0.92)\";\n element.style.opacity = \"1\";\n element.style.pointerEvents = \"auto\";\n\n if (hideTimer) {\n clearTimeout(hideTimer);\n }\n\n hideTimer = setTimeout(() => {\n element.style.opacity = \"0\";\n element.style.pointerEvents = \"none\";\n }, 1500);\n };\n\n element.addEventListener(\"click\", async () => {\n if (!copyValue) {\n return;\n }\n\n try {\n await navigator.clipboard.writeText(copyValue);\n show(`[react-code-locator] copied`, \"success\");\n } catch {\n show(`[react-code-locator] copy failed`, \"error\");\n }\n });\n\n show(`[react-code-locator] enabled (${triggerKey}+click)`, \"idle\");\n\n const mount = () => {\n if (!element.isConnected && document.body) {\n document.body.appendChild(element);\n }\n };\n\n if (document.body) {\n mount();\n } else {\n document.addEventListener(\"DOMContentLoaded\", mount, { once: true });\n }\n\n return {\n setStatus(message, tone = \"idle\") {\n show(message, tone);\n },\n setCopyValue(value) {\n copyValue = value;\n },\n remove() {\n if (hideTimer) {\n clearTimeout(hideTimer);\n }\n element.remove();\n },\n };\n}\n\nexport function locateComponentSource(target: EventTarget | null): LocatorResult | null {\n const elementTarget =\n target instanceof Element ? target : target instanceof Node ? target.parentElement : null;\n const fiber = getClosestReactFiber(elementTarget);\n if (!fiber) {\n return null;\n }\n\n const jsxSource = resolveJsxSourceFromFiber(fiber) ?? getDebugSource(fiber);\n if (jsxSource) {\n return {\n source: jsxSource,\n mode: \"jsx\",\n };\n }\n\n const componentSource = resolveComponentSourceFromFiber(fiber);\n if (!componentSource) {\n return null;\n }\n\n return {\n source: componentSource,\n mode: \"component\",\n };\n}\n\nexport function enableReactComponentJump(options: LocatorOptions = {}) {\n const overlay = createStatusOverlay(options.triggerKey ?? \"shift\");\n const {\n triggerKey = \"shift\",\n onLocate = (result) => {\n console.log(`[react-code-locator] ${result.source}`);\n overlay?.setCopyValue(result.source);\n overlay?.setStatus(`[react-code-locator] ${result.source}`, \"success\");\n },\n onError = (error) => {\n console.error(\"[react-code-locator]\", error);\n const message = error instanceof Error ? error.message : String(error);\n overlay?.setCopyValue(null);\n overlay?.setStatus(`[react-code-locator] ${message}`, \"error\");\n },\n } = options;\n\n console.log(\"[react-code-locator] enabled\", { triggerKey });\n\n const handler = (event: MouseEvent) => {\n console.log(\"[react-code-locator] click\", {\n triggerKey,\n shiftKey: event.shiftKey,\n altKey: event.altKey,\n ctrlKey: event.ctrlKey,\n metaKey: event.metaKey,\n target: event.target,\n });\n\n if (!isTriggerPressed(event, triggerKey)) {\n return;\n }\n\n const result = locateComponentSource(event.target);\n if (!result) {\n onError(new Error(\"No React component source metadata found for clicked element.\"));\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n onLocate(result);\n };\n\n document.addEventListener(\"click\", handler, true);\n\n return () => {\n document.removeEventListener(\"click\", handler, true);\n overlay?.remove();\n };\n}\n","import { enableReactComponentJump } from \"./runtime\";\n\nif (typeof document !== \"undefined\") {\n enableReactComponentJump();\n}\n\n"],"mappings":"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","names":["source"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-code-locator",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
},
|
|
14
14
|
"./client": {
|
|
15
15
|
"types": "./dist/client.d.ts",
|
|
16
|
-
"import": "./dist/client.
|
|
16
|
+
"import": "./dist/client.js",
|
|
17
17
|
"require": "./dist/client.cjs"
|
|
18
18
|
},
|
|
19
19
|
"./babel": {
|
|
20
20
|
"types": "./dist/babel.d.ts",
|
|
21
|
-
"import": "./dist/babel.
|
|
21
|
+
"import": "./dist/babel.js",
|
|
22
22
|
"require": "./dist/babel.cjs"
|
|
23
23
|
},
|
|
24
24
|
"./vite": {
|
|
@@ -42,21 +42,16 @@
|
|
|
42
42
|
"typecheck": "tsc --noEmit"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@babel/core": ">=7"
|
|
46
|
-
"@vitejs/plugin-react": ">=4"
|
|
45
|
+
"@babel/core": ">=7"
|
|
47
46
|
},
|
|
48
47
|
"peerDependenciesMeta": {
|
|
49
48
|
"@babel/core": {
|
|
50
49
|
"optional": true
|
|
51
|
-
},
|
|
52
|
-
"@vitejs/plugin-react": {
|
|
53
|
-
"optional": true
|
|
54
50
|
}
|
|
55
51
|
},
|
|
56
52
|
"devDependencies": {
|
|
57
53
|
"@babel/core": "^7.26.0",
|
|
58
54
|
"@types/node": "^22.13.10",
|
|
59
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
60
55
|
"tsup": "^8.5.1",
|
|
61
56
|
"typescript": "^5.8.2",
|
|
62
57
|
"vite": "^5.4.14"
|