@lark-apaas/miaoda-inspector-jsx-runtime 0.1.0-alpha.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/LICENSE +13 -0
- package/README.md +1 -0
- package/dist/index.d.ts +185 -0
- package/dist/index.js +191 -0
- package/dist/index.js.map +1 -0
- package/package.json +33 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Lark Technologies Pte. Ltd. and/or its affiliates
|
|
4
|
+
|
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,provided that the above copyright notice and this permission notice appear in all copies.
|
|
6
|
+
|
|
7
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
|
|
8
|
+
IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
|
|
9
|
+
INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
|
|
10
|
+
EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
|
|
11
|
+
CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
|
|
12
|
+
DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
|
|
13
|
+
ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# @apaas-ai/miaoda-inspector-jsx-runtime
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
export { Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import React, { forwardRef, useRef, useState, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
let uid = 1;
|
|
6
|
+
|
|
7
|
+
// 初始化全局控制对象(只创建一次)
|
|
8
|
+
if (typeof window !== 'undefined') {
|
|
9
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ || {
|
|
10
|
+
__registry: new Map(),
|
|
11
|
+
setProps(id, newProps) {
|
|
12
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
13
|
+
if (inst) inst.setProps(newProps);
|
|
14
|
+
else console.warn('[miaoda] no instance', id);
|
|
15
|
+
},
|
|
16
|
+
setIconProps(id, propName, newIconName) {
|
|
17
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
18
|
+
if (inst) inst.setIconProps(propName, newIconName);
|
|
19
|
+
else console.warn('[miaoda] no instance', id);
|
|
20
|
+
},
|
|
21
|
+
getProps(id) {
|
|
22
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
23
|
+
return inst ? inst.getProps() : null;
|
|
24
|
+
},
|
|
25
|
+
unmount(id) {
|
|
26
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
27
|
+
if (inst) inst.unmount();
|
|
28
|
+
else console.warn('[miaoda] no instance', id);
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// 辅助:获得或生成实例 id
|
|
34
|
+
function useInstanceId(providedId) {
|
|
35
|
+
const idRef = useRef(providedId || `miaoda-${uid++}`);
|
|
36
|
+
return idRef.current;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 内联 Icon 组件(使用 React.createElement,而非 JSX)
|
|
40
|
+
const Icon = forwardRef(function Icon(props, ref) {
|
|
41
|
+
const { size = '1em', wrapperProps, name = 'a-arrow-down', ...svgProps } = props || {};
|
|
42
|
+
|
|
43
|
+
const spanProps = {
|
|
44
|
+
ref,
|
|
45
|
+
...(wrapperProps || {}),
|
|
46
|
+
className: `anticon${wrapperProps?.className ? ` ${wrapperProps.className}` : ''}`,
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const svg = React.createElement(
|
|
50
|
+
'svg',
|
|
51
|
+
{
|
|
52
|
+
width: size,
|
|
53
|
+
height: size,
|
|
54
|
+
viewBox: '0 0 24 24',
|
|
55
|
+
fill: 'none',
|
|
56
|
+
stroke: 'currentColor',
|
|
57
|
+
strokeWidth: '2',
|
|
58
|
+
strokeLinecap: 'round',
|
|
59
|
+
strokeLinejoin: 'round',
|
|
60
|
+
...svgProps,
|
|
61
|
+
},
|
|
62
|
+
React.createElement('use', { xlinkHref: `#${name}` })
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
return React.createElement('span', spanProps, svg);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
const MiaodaWrapper = forwardRef(function MiaodaWrapper(props, forwardedRef) {
|
|
69
|
+
const { Comp: currentComp, children, 'data-miaoda-id': providedId, ...rest } = props;
|
|
70
|
+
const instanceId = useInstanceId(providedId);
|
|
71
|
+
const mountedRef = useRef(true);
|
|
72
|
+
|
|
73
|
+
// injectedProps 存放通过 window.miaoda.setProps 注入的运行时 props
|
|
74
|
+
const [injectedProps, setInjectedProps] = useState({});
|
|
75
|
+
const [iconPropsMap, setIconPropsMap] = useState({});
|
|
76
|
+
|
|
77
|
+
// helper: 得到原始 element 的 props(若 currentComp 是 React element)
|
|
78
|
+
const originalProps = (currentComp && currentComp.props) || {};
|
|
79
|
+
|
|
80
|
+
// 注册到 window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
mountedRef.current = true;
|
|
83
|
+
|
|
84
|
+
const api = {
|
|
85
|
+
setProps: (p) => {
|
|
86
|
+
if (!mountedRef.current) return;
|
|
87
|
+
// 合并并触发渲染
|
|
88
|
+
setInjectedProps((prev) => ({ ...prev, ...p }));
|
|
89
|
+
},
|
|
90
|
+
setIconProps: (propName, newIconName) => {
|
|
91
|
+
if (!mountedRef.current) return;
|
|
92
|
+
setIconPropsMap((prev) => ({ ...prev, [propName]: newIconName }));
|
|
93
|
+
},
|
|
94
|
+
getProps: () => ({ ...originalProps, ...rest, ...injectedProps }),
|
|
95
|
+
unmount: () => {
|
|
96
|
+
mountedRef.current = false;
|
|
97
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.set(instanceId, api);
|
|
102
|
+
return () => {
|
|
103
|
+
mountedRef.current = false;
|
|
104
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);
|
|
105
|
+
};
|
|
106
|
+
// 注意:不要把 injectedProps, originalProps 放到依赖里以免频繁重新注册
|
|
107
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps, @grncdr/react-hooks/exhaustive-deps
|
|
108
|
+
}, [instanceId, rest]);
|
|
109
|
+
|
|
110
|
+
// 合并 props:原始 props -> wrapper rest props -> injectedProps(优先级后者高)
|
|
111
|
+
const mergedProps = Object.assign({}, originalProps, rest, injectedProps);
|
|
112
|
+
|
|
113
|
+
// 针对每个 icon prop 直接注入 Icon(即使原本没有 icon 也可生效)
|
|
114
|
+
Object.keys(iconPropsMap).forEach((iconKey) => {
|
|
115
|
+
const newIconName = iconPropsMap[iconKey];
|
|
116
|
+
if (!newIconName) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
mergedProps[iconKey] = React.createElement(Icon, { name: newIconName });
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
// 处理 children 优先级:
|
|
123
|
+
// 1. 如果 injectedProps.children 是字符串 -> 覆盖渲染
|
|
124
|
+
// 2. 否则 fallback 到 children
|
|
125
|
+
let finalChildren = children;
|
|
126
|
+
if (typeof injectedProps.children === 'string') {
|
|
127
|
+
finalChildren = injectedProps.children;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// 如果 currentComp 是有效 element,clone 并注入 mergedProps + ref
|
|
131
|
+
let rendered;
|
|
132
|
+
if (React.isValidElement(currentComp)) {
|
|
133
|
+
rendered = React.cloneElement(
|
|
134
|
+
currentComp,
|
|
135
|
+
Object.assign({}, mergedProps, { ref: forwardedRef }),
|
|
136
|
+
finalChildren
|
|
137
|
+
);
|
|
138
|
+
} else if (typeof currentComp === 'function' || typeof currentComp === 'object') {
|
|
139
|
+
rendered = React.createElement(
|
|
140
|
+
currentComp,
|
|
141
|
+
Object.assign({}, mergedProps, { ref: forwardedRef }),
|
|
142
|
+
finalChildren
|
|
143
|
+
);
|
|
144
|
+
} else {
|
|
145
|
+
rendered = finalChildren || null;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// 返回带标识属性的 element
|
|
149
|
+
if (React.isValidElement(rendered)) {
|
|
150
|
+
return React.cloneElement(rendered, {
|
|
151
|
+
'data-miaoda-id': instanceId,
|
|
152
|
+
'data-miaoda-wrapped': 'true',
|
|
153
|
+
ref: forwardedRef,
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
return rendered;
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
// 自定义JSX运行时开发环境实现
|
|
161
|
+
function jsxDEV(type, props, key, isStaticChildren, source, self) {
|
|
162
|
+
// 处理自定义属性或修改元素行为
|
|
163
|
+
// 检查是否需要用MiaodaWrapper包裹
|
|
164
|
+
if (props['data-miaoda-component-name'] === 'Button' && props['data-miaoda-import-source'] === 'antd') {
|
|
165
|
+
// 使用MiaodaWrapper包裹原始元素
|
|
166
|
+
return jsx(
|
|
167
|
+
MiaodaWrapper,
|
|
168
|
+
{
|
|
169
|
+
...props,
|
|
170
|
+
Comp: type,
|
|
171
|
+
},
|
|
172
|
+
key,
|
|
173
|
+
false,
|
|
174
|
+
source,
|
|
175
|
+
self
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
return jsx(type, props, key, isStaticChildren, source, self);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
function jsxDEVs(type, props, key, _isStaticChildren, _source, _self) {
|
|
182
|
+
return jsxs(type, props, key, _isStaticChildren, _source, _self);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
export { jsxDEV, jsxDEVs };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/index.js
|
|
30
|
+
var index_exports = {};
|
|
31
|
+
__export(index_exports, {
|
|
32
|
+
Fragment: () => import_jsx_runtime.Fragment,
|
|
33
|
+
jsxDEV: () => jsxDEV,
|
|
34
|
+
jsxDEVs: () => jsxDEVs
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
|
+
|
|
38
|
+
// src/jsx-dev-runtime.js
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
|
|
41
|
+
// src/MiaodaWrapper.jsx
|
|
42
|
+
var import_react = __toESM(require("react"));
|
|
43
|
+
var uid = 1;
|
|
44
|
+
if (typeof window !== "undefined") {
|
|
45
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ || {
|
|
46
|
+
__registry: /* @__PURE__ */ new Map(),
|
|
47
|
+
setProps(id, newProps) {
|
|
48
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
49
|
+
if (inst) inst.setProps(newProps);
|
|
50
|
+
else console.warn("[miaoda] no instance", id);
|
|
51
|
+
},
|
|
52
|
+
setIconProps(id, propName, newIconName) {
|
|
53
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
54
|
+
if (inst) inst.setIconProps(propName, newIconName);
|
|
55
|
+
else console.warn("[miaoda] no instance", id);
|
|
56
|
+
},
|
|
57
|
+
getProps(id) {
|
|
58
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
59
|
+
return inst ? inst.getProps() : null;
|
|
60
|
+
},
|
|
61
|
+
unmount(id) {
|
|
62
|
+
const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);
|
|
63
|
+
if (inst) inst.unmount();
|
|
64
|
+
else console.warn("[miaoda] no instance", id);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
function useInstanceId(providedId) {
|
|
69
|
+
const idRef = (0, import_react.useRef)(providedId || `miaoda-${uid++}`);
|
|
70
|
+
return idRef.current;
|
|
71
|
+
}
|
|
72
|
+
var Icon = (0, import_react.forwardRef)(function Icon2(props, ref) {
|
|
73
|
+
const { size = "1em", wrapperProps, name = "a-arrow-down", ...svgProps } = props || {};
|
|
74
|
+
const spanProps = {
|
|
75
|
+
ref,
|
|
76
|
+
...wrapperProps || {},
|
|
77
|
+
className: `anticon${(wrapperProps == null ? void 0 : wrapperProps.className) ? ` ${wrapperProps.className}` : ""}`
|
|
78
|
+
};
|
|
79
|
+
const svg = import_react.default.createElement(
|
|
80
|
+
"svg",
|
|
81
|
+
{
|
|
82
|
+
width: size,
|
|
83
|
+
height: size,
|
|
84
|
+
viewBox: "0 0 24 24",
|
|
85
|
+
fill: "none",
|
|
86
|
+
stroke: "currentColor",
|
|
87
|
+
strokeWidth: "2",
|
|
88
|
+
strokeLinecap: "round",
|
|
89
|
+
strokeLinejoin: "round",
|
|
90
|
+
...svgProps
|
|
91
|
+
},
|
|
92
|
+
import_react.default.createElement("use", { xlinkHref: `#${name}` })
|
|
93
|
+
);
|
|
94
|
+
return import_react.default.createElement("span", spanProps, svg);
|
|
95
|
+
});
|
|
96
|
+
var MiaodaWrapper = (0, import_react.forwardRef)(function MiaodaWrapper2(props, forwardedRef) {
|
|
97
|
+
const { Comp: currentComp, children, "data-miaoda-id": providedId, ...rest } = props;
|
|
98
|
+
const instanceId = useInstanceId(providedId);
|
|
99
|
+
const mountedRef = (0, import_react.useRef)(true);
|
|
100
|
+
const [injectedProps, setInjectedProps] = (0, import_react.useState)({});
|
|
101
|
+
const [iconPropsMap, setIconPropsMap] = (0, import_react.useState)({});
|
|
102
|
+
const originalProps = currentComp && currentComp.props || {};
|
|
103
|
+
(0, import_react.useEffect)(() => {
|
|
104
|
+
mountedRef.current = true;
|
|
105
|
+
const api = {
|
|
106
|
+
setProps: (p) => {
|
|
107
|
+
if (!mountedRef.current) return;
|
|
108
|
+
setInjectedProps((prev) => ({ ...prev, ...p }));
|
|
109
|
+
},
|
|
110
|
+
setIconProps: (propName, newIconName) => {
|
|
111
|
+
if (!mountedRef.current) return;
|
|
112
|
+
setIconPropsMap((prev) => ({ ...prev, [propName]: newIconName }));
|
|
113
|
+
},
|
|
114
|
+
getProps: () => ({ ...originalProps, ...rest, ...injectedProps }),
|
|
115
|
+
unmount: () => {
|
|
116
|
+
mountedRef.current = false;
|
|
117
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.set(instanceId, api);
|
|
121
|
+
return () => {
|
|
122
|
+
mountedRef.current = false;
|
|
123
|
+
window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);
|
|
124
|
+
};
|
|
125
|
+
}, [instanceId, rest]);
|
|
126
|
+
const mergedProps = Object.assign({}, originalProps, rest, injectedProps);
|
|
127
|
+
Object.keys(iconPropsMap).forEach((iconKey) => {
|
|
128
|
+
const newIconName = iconPropsMap[iconKey];
|
|
129
|
+
if (!newIconName) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
mergedProps[iconKey] = import_react.default.createElement(Icon, { name: newIconName });
|
|
133
|
+
});
|
|
134
|
+
let finalChildren = children;
|
|
135
|
+
if (typeof injectedProps.children === "string") {
|
|
136
|
+
finalChildren = injectedProps.children;
|
|
137
|
+
}
|
|
138
|
+
let rendered;
|
|
139
|
+
if (import_react.default.isValidElement(currentComp)) {
|
|
140
|
+
rendered = import_react.default.cloneElement(
|
|
141
|
+
currentComp,
|
|
142
|
+
Object.assign({}, mergedProps, { ref: forwardedRef }),
|
|
143
|
+
finalChildren
|
|
144
|
+
);
|
|
145
|
+
} else if (typeof currentComp === "function" || typeof currentComp === "object") {
|
|
146
|
+
rendered = import_react.default.createElement(
|
|
147
|
+
currentComp,
|
|
148
|
+
Object.assign({}, mergedProps, { ref: forwardedRef }),
|
|
149
|
+
finalChildren
|
|
150
|
+
);
|
|
151
|
+
} else {
|
|
152
|
+
rendered = finalChildren || null;
|
|
153
|
+
}
|
|
154
|
+
if (import_react.default.isValidElement(rendered)) {
|
|
155
|
+
return import_react.default.cloneElement(rendered, {
|
|
156
|
+
"data-miaoda-id": instanceId,
|
|
157
|
+
"data-miaoda-wrapped": "true",
|
|
158
|
+
ref: forwardedRef
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
return rendered;
|
|
162
|
+
});
|
|
163
|
+
var MiaodaWrapper_default = MiaodaWrapper;
|
|
164
|
+
|
|
165
|
+
// src/jsx-dev-runtime.js
|
|
166
|
+
function jsxDEV(type, props, key, isStaticChildren, source, self) {
|
|
167
|
+
if (props["data-miaoda-component-name"] === "Button" && props["data-miaoda-import-source"] === "antd") {
|
|
168
|
+
return (0, import_jsx_runtime.jsx)(
|
|
169
|
+
MiaodaWrapper_default,
|
|
170
|
+
{
|
|
171
|
+
...props,
|
|
172
|
+
Comp: type
|
|
173
|
+
},
|
|
174
|
+
key,
|
|
175
|
+
false,
|
|
176
|
+
source,
|
|
177
|
+
self
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
return (0, import_jsx_runtime.jsx)(type, props, key, isStaticChildren, source, self);
|
|
181
|
+
}
|
|
182
|
+
function jsxDEVs(type, props, key, _isStaticChildren, _source, _self) {
|
|
183
|
+
return (0, import_jsx_runtime.jsxs)(type, props, key, _isStaticChildren, _source, _self);
|
|
184
|
+
}
|
|
185
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
186
|
+
0 && (module.exports = {
|
|
187
|
+
Fragment,
|
|
188
|
+
jsxDEV,
|
|
189
|
+
jsxDEVs
|
|
190
|
+
});
|
|
191
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.js","../src/jsx-dev-runtime.js","../src/MiaodaWrapper.jsx"],"sourcesContent":["export { jsxDEV, jsxDEVs, Fragment } from './jsx-dev-runtime';\n","import { jsx as jsxDEVRuntime, jsxs as jsxsDEVRuntime, Fragment } from 'react/jsx-runtime';\nimport MiaodaWrapper from './MiaodaWrapper.jsx';\n\n// 自定义JSX运行时开发环境实现\nexport function jsxDEV(type, props, key, isStaticChildren, source, self) {\n // 处理自定义属性或修改元素行为\n // 检查是否需要用MiaodaWrapper包裹\n if (props['data-miaoda-component-name'] === 'Button' && props['data-miaoda-import-source'] === 'antd') {\n // 使用MiaodaWrapper包裹原始元素\n return jsxDEVRuntime(\n MiaodaWrapper,\n {\n ...props,\n Comp: type,\n },\n key,\n false,\n source,\n self\n );\n }\n return jsxDEVRuntime(type, props, key, isStaticChildren, source, self);\n}\n\nexport function jsxDEVs(type, props, key, _isStaticChildren, _source, _self) {\n return jsxsDEVRuntime(type, props, key, _isStaticChildren, _source, _self);\n}\n\nexport { Fragment };\n","import React, { useEffect, useRef, useState, forwardRef } from 'react';\n\nlet uid = 1;\n\n// 初始化全局控制对象(只创建一次)\nif (typeof window !== 'undefined') {\n window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ || {\n __registry: new Map(),\n setProps(id, newProps) {\n const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);\n if (inst) inst.setProps(newProps);\n else console.warn('[miaoda] no instance', id);\n },\n setIconProps(id, propName, newIconName) {\n const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);\n if (inst) inst.setIconProps(propName, newIconName);\n else console.warn('[miaoda] no instance', id);\n },\n getProps(id) {\n const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);\n return inst ? inst.getProps() : null;\n },\n unmount(id) {\n const inst = window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.get(id);\n if (inst) inst.unmount();\n else console.warn('[miaoda] no instance', id);\n },\n };\n}\n\n// 辅助:获得或生成实例 id\nfunction useInstanceId(providedId) {\n const idRef = useRef(providedId || `miaoda-${uid++}`);\n return idRef.current;\n}\n\n// 内联 Icon 组件(使用 React.createElement,而非 JSX)\nconst Icon = forwardRef(function Icon(props, ref) {\n const { size = '1em', wrapperProps, name = 'a-arrow-down', ...svgProps } = props || {};\n\n const spanProps = {\n ref,\n ...(wrapperProps || {}),\n className: `anticon${wrapperProps?.className ? ` ${wrapperProps.className}` : ''}`,\n };\n\n const svg = React.createElement(\n 'svg',\n {\n width: size,\n height: size,\n viewBox: '0 0 24 24',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: '2',\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n ...svgProps,\n },\n React.createElement('use', { xlinkHref: `#${name}` })\n );\n\n return React.createElement('span', spanProps, svg);\n});\n\nconst MiaodaWrapper = forwardRef(function MiaodaWrapper(props, forwardedRef) {\n const { Comp: currentComp, children, 'data-miaoda-id': providedId, ...rest } = props;\n const instanceId = useInstanceId(providedId);\n const mountedRef = useRef(true);\n\n // injectedProps 存放通过 window.miaoda.setProps 注入的运行时 props\n const [injectedProps, setInjectedProps] = useState({});\n const [iconPropsMap, setIconPropsMap] = useState({});\n\n // helper: 得到原始 element 的 props(若 currentComp 是 React element)\n const originalProps = (currentComp && currentComp.props) || {};\n\n // 注册到 window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry\n useEffect(() => {\n mountedRef.current = true;\n\n const api = {\n setProps: (p) => {\n if (!mountedRef.current) return;\n // 合并并触发渲染\n setInjectedProps((prev) => ({ ...prev, ...p }));\n },\n setIconProps: (propName, newIconName) => {\n if (!mountedRef.current) return;\n setIconPropsMap((prev) => ({ ...prev, [propName]: newIconName }));\n },\n getProps: () => ({ ...originalProps, ...rest, ...injectedProps }),\n unmount: () => {\n mountedRef.current = false;\n window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);\n },\n };\n\n window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.set(instanceId, api);\n return () => {\n mountedRef.current = false;\n window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.__registry.delete(instanceId);\n };\n // 注意:不要把 injectedProps, originalProps 放到依赖里以免频繁重新注册\n // eslint-disable-next-line react-hooks/exhaustive-deps, @grncdr/react-hooks/exhaustive-deps\n }, [instanceId, rest]);\n\n // 合并 props:原始 props -> wrapper rest props -> injectedProps(优先级后者高)\n const mergedProps = Object.assign({}, originalProps, rest, injectedProps);\n\n // 针对每个 icon prop 直接注入 Icon(即使原本没有 icon 也可生效)\n Object.keys(iconPropsMap).forEach((iconKey) => {\n const newIconName = iconPropsMap[iconKey];\n if (!newIconName) {\n return;\n }\n mergedProps[iconKey] = React.createElement(Icon, { name: newIconName });\n });\n\n // 处理 children 优先级:\n // 1. 如果 injectedProps.children 是字符串 -> 覆盖渲染\n // 2. 否则 fallback 到 children\n let finalChildren = children;\n if (typeof injectedProps.children === 'string') {\n finalChildren = injectedProps.children;\n }\n\n // 如果 currentComp 是有效 element,clone 并注入 mergedProps + ref\n let rendered;\n if (React.isValidElement(currentComp)) {\n rendered = React.cloneElement(\n currentComp,\n Object.assign({}, mergedProps, { ref: forwardedRef }),\n finalChildren\n );\n } else if (typeof currentComp === 'function' || typeof currentComp === 'object') {\n rendered = React.createElement(\n currentComp,\n Object.assign({}, mergedProps, { ref: forwardedRef }),\n finalChildren\n );\n } else {\n rendered = finalChildren || null;\n }\n\n // 返回带标识属性的 element\n if (React.isValidElement(rendered)) {\n return React.cloneElement(rendered, {\n 'data-miaoda-id': instanceId,\n 'data-miaoda-wrapped': 'true',\n ref: forwardedRef,\n });\n }\n\n return rendered;\n});\n\nexport default MiaodaWrapper;\n"],"mappings":"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","names":["Icon","React","MiaodaWrapper","jsxDEVRuntime","jsxsDEVRuntime"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lark-apaas/miaoda-inspector-jsx-runtime",
|
|
3
|
+
"version": "0.1.0-alpha.1",
|
|
4
|
+
"description": "Custom JSX Runtime for Inspector",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"publishConfig": {
|
|
11
|
+
"access": "public"
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "tsup",
|
|
15
|
+
"lint": "eslint . --quiet",
|
|
16
|
+
"test": "vitest",
|
|
17
|
+
"test:cov": "vitest run --coverage",
|
|
18
|
+
"test:update": "vitest run -u"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@testing-library/react": "^12",
|
|
23
|
+
"@testing-library/react-hooks": "^8",
|
|
24
|
+
"@types/node": "^18.17.18",
|
|
25
|
+
"@types/react": "^17",
|
|
26
|
+
"eslint": "^8",
|
|
27
|
+
"react": "^18",
|
|
28
|
+
"typescript": "^4"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": "^18"
|
|
32
|
+
}
|
|
33
|
+
}
|