@zzdadelu/schema-builder 1.0.0-alpha.47 → 1.0.0-alpha.49
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/es/createIframe.js +1 -1
- package/es/main.js +25 -131
- package/lib/createIframe.js +1 -1
- package/lib/main.js +24 -130
- package/package.json +1 -1
package/es/createIframe.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var createIframeContent = function createIframeContent() {
|
|
2
2
|
var timestamp = Date.now();
|
|
3
|
-
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n <!-- \u5C06fr-generator\u811A\u672C\u653E\u5728head\u4E2D\uFF0C\u5E76\u4F7F\u7528defer\u5C5E\u6027\uFF0C\u786E\u4FDD\u5728body\u4E2D\u7684\u811A\u672C\u4E4B\u524D\u6267\u884C -->\n <script defer type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n </body>\n </html>\n ");
|
|
3
|
+
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n // \u5173\u952E\u8865\u4E01\uFF1A\u63D0\u524D\u5728 iframe \u5185\u58F0\u660E getFormRenderMaterial\n window.getFormRenderMaterial = function (libraryName, pkg) {\n if (window.parent && window.parent.getFormRenderMaterial) {\n return window.parent.getFormRenderMaterial(libraryName, pkg);\n }\n // \u82E5\u7236\u7A97\u53E3\u6CA1\u6709\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u7A7A\u5BF9\u8C61\uFF08\u6700\u5B89\u5168 fallback\uFF09\n return {};\n };\n </script>\n\n \n\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n <!-- \u5C06fr-generator\u811A\u672C\u653E\u5728head\u4E2D\uFF0C\u5E76\u4F7F\u7528defer\u5C5E\u6027\uFF0C\u786E\u4FDD\u5728body\u4E2D\u7684\u811A\u672C\u4E4B\u524D\u6267\u884C -->\n <script defer type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n </body>\n </html>\n ");
|
|
4
4
|
return html;
|
|
5
5
|
};
|
|
6
6
|
export default (function () {
|
package/es/main.js
CHANGED
|
@@ -5,170 +5,64 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
5
5
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
6
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
7
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
9
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
12
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
14
8
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
15
9
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
16
|
-
import React, { useEffect, useRef, useImperativeHandle, forwardRef
|
|
10
|
+
import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
|
17
11
|
import createIframe from './createIframe';
|
|
18
12
|
import * as defaultSetting from './settings';
|
|
19
13
|
var iframe;
|
|
20
|
-
var retryCount = 0;
|
|
21
|
-
var MAX_RETRIES = 3;
|
|
22
14
|
var Design = function Design(props, ref) {
|
|
23
15
|
var widgets = props.widgets,
|
|
24
16
|
settings = props.settings,
|
|
25
17
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
18
|
var containerRef = useRef();
|
|
27
|
-
var _useState = useState(true),
|
|
28
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
-
loading = _useState2[0],
|
|
30
|
-
setLoading = _useState2[1];
|
|
31
19
|
useImperativeHandle(ref, function () {
|
|
32
20
|
return {
|
|
33
21
|
getValue: function getValue() {
|
|
34
|
-
var _iframe,
|
|
35
|
-
|
|
22
|
+
var _iframe, _iframe2, _iframe2$contentWindo, _iframe3, _iframe3$contentWindo, _iframe3$contentWindo2, _iframe3$contentWindo3;
|
|
23
|
+
console.log("contentWindow", (_iframe = iframe) === null || _iframe === void 0 ? void 0 : _iframe.contentWindow);
|
|
24
|
+
console.log("__FR_ENGINE__", (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : _iframe2$contentWindo.__FR_ENGINE__);
|
|
25
|
+
return (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : (_iframe3$contentWindo2 = _iframe3$contentWindo.__FR_ENGINE__) === null || _iframe3$contentWindo2 === void 0 ? void 0 : (_iframe3$contentWindo3 = _iframe3$contentWindo2.exportSchema) === null || _iframe3$contentWindo3 === void 0 ? void 0 : _iframe3$contentWindo3.call(_iframe3$contentWindo2);
|
|
36
26
|
},
|
|
37
27
|
setValue: function setValue(schema) {
|
|
38
|
-
var
|
|
39
|
-
return (
|
|
40
|
-
},
|
|
41
|
-
reload: function reload() {
|
|
42
|
-
if (containerRef.current && iframe) {
|
|
43
|
-
containerRef.current.removeChild(iframe);
|
|
44
|
-
iframe = null;
|
|
45
|
-
retryCount = 0;
|
|
46
|
-
initIframe();
|
|
47
|
-
}
|
|
28
|
+
var _iframe4, _iframe4$contentWindo, _iframe4$contentWindo2, _iframe4$contentWindo3;
|
|
29
|
+
return (_iframe4 = iframe) === null || _iframe4 === void 0 ? void 0 : (_iframe4$contentWindo = _iframe4.contentWindow) === null || _iframe4$contentWindo === void 0 ? void 0 : (_iframe4$contentWindo2 = _iframe4$contentWindo.__FR_ENGINE__) === null || _iframe4$contentWindo2 === void 0 ? void 0 : (_iframe4$contentWindo3 = _iframe4$contentWindo2.importSchema) === null || _iframe4$contentWindo3 === void 0 ? void 0 : _iframe4$contentWindo3.call(_iframe4$contentWindo2, schema);
|
|
48
30
|
}
|
|
49
31
|
};
|
|
50
32
|
});
|
|
51
33
|
useEffect(function () {
|
|
52
34
|
initIframe();
|
|
53
|
-
|
|
54
|
-
window.addEventListener('message', messageHandler);
|
|
35
|
+
window.addEventListener('message', engineOnLoad);
|
|
55
36
|
return function () {
|
|
56
|
-
window.removeEventListener('message',
|
|
57
|
-
if (iframe && containerRef.current) {
|
|
58
|
-
try {
|
|
59
|
-
containerRef.current.removeChild(iframe);
|
|
60
|
-
} catch (e) {}
|
|
61
|
-
iframe = null;
|
|
62
|
-
}
|
|
37
|
+
window.removeEventListener('message', engineOnLoad);
|
|
63
38
|
};
|
|
64
39
|
}, []);
|
|
65
40
|
var initIframe = function initIframe() {
|
|
66
|
-
console.log(
|
|
67
|
-
|
|
68
|
-
// 清理旧的 iframe
|
|
69
|
-
if (containerRef.current && iframe) {
|
|
70
|
-
try {
|
|
71
|
-
containerRef.current.removeChild(iframe);
|
|
72
|
-
} catch (e) {}
|
|
73
|
-
iframe = null;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// 创建新的 iframe
|
|
41
|
+
console.log("开始创建 iframe");
|
|
77
42
|
iframe = createIframe();
|
|
78
|
-
|
|
79
|
-
// 添加错误处理
|
|
80
|
-
iframe.onerror = function (e) {
|
|
81
|
-
console.error('[SchemaBuilder] Iframe error:', e);
|
|
82
|
-
};
|
|
83
|
-
iframe.onload = function () {
|
|
84
|
-
console.log('[SchemaBuilder] Iframe loaded');
|
|
85
|
-
setLoading(false);
|
|
86
|
-
};
|
|
87
43
|
containerRef.current.appendChild(iframe);
|
|
88
|
-
|
|
89
|
-
// 设置超时重试
|
|
90
|
-
setTimeout(function () {
|
|
91
|
-
if (iframe && (!iframe.contentWindow || !iframe.contentDocument)) {
|
|
92
|
-
console.warn('[SchemaBuilder] Iframe load timeout, retrying...');
|
|
93
|
-
retryIframe();
|
|
94
|
-
}
|
|
95
|
-
}, 10000);
|
|
96
|
-
};
|
|
97
|
-
var retryIframe = function retryIframe() {
|
|
98
|
-
if (retryCount < MAX_RETRIES) {
|
|
99
|
-
retryCount++;
|
|
100
|
-
console.warn("[SchemaBuilder] Retrying iframe creation (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
|
|
101
|
-
initIframe();
|
|
102
|
-
} else {
|
|
103
|
-
console.error('[SchemaBuilder] Max retries reached');
|
|
104
|
-
}
|
|
105
44
|
};
|
|
106
|
-
var
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
111
|
-
break;
|
|
112
|
-
case 'engine-load':
|
|
113
|
-
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
114
|
-
if (event.data.checks && !event.data.checks.getFormRenderMaterial) {
|
|
115
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
116
|
-
setTimeout(retryIframe, 500);
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// 延迟初始化以确保所有资源就绪
|
|
121
|
-
setTimeout(function () {
|
|
122
|
-
try {
|
|
123
|
-
var _iframe3, _iframe3$contentWindo;
|
|
124
|
-
if ((_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : _iframe3$contentWindo.__FR_ENGINE__) {
|
|
125
|
-
iframe.contentWindow.__FR_ENGINE__.init(_objectSpread({
|
|
126
|
-
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
127
|
-
widgets: widgets,
|
|
128
|
-
logo: {
|
|
129
|
-
title: 'XRender'
|
|
130
|
-
}
|
|
131
|
-
}, restProps));
|
|
132
|
-
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
133
|
-
} else {
|
|
134
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
135
|
-
retryIframe();
|
|
136
|
-
}
|
|
137
|
-
} catch (error) {
|
|
138
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
139
|
-
retryIframe();
|
|
140
|
-
}
|
|
141
|
-
}, 500);
|
|
142
|
-
break;
|
|
143
|
-
default:
|
|
144
|
-
// 其他消息可以忽略
|
|
145
|
-
break;
|
|
45
|
+
var engineOnLoad = function engineOnLoad(event) {
|
|
46
|
+
var _iframe5, _iframe5$contentWindo, _iframe5$contentWindo2;
|
|
47
|
+
if (event.data.type !== 'engine-load') {
|
|
48
|
+
return;
|
|
146
49
|
}
|
|
50
|
+
console.log("拿到 iframe props:", event);
|
|
51
|
+
(_iframe5 = iframe) === null || _iframe5 === void 0 ? void 0 : (_iframe5$contentWindo = _iframe5.contentWindow) === null || _iframe5$contentWindo === void 0 ? void 0 : (_iframe5$contentWindo2 = _iframe5$contentWindo.__FR_ENGINE__) === null || _iframe5$contentWindo2 === void 0 ? void 0 : _iframe5$contentWindo2.init(_objectSpread({
|
|
52
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
53
|
+
widgets: widgets,
|
|
54
|
+
// recordEnable: true,
|
|
55
|
+
logo: {
|
|
56
|
+
title: 'XRender'
|
|
57
|
+
}
|
|
58
|
+
}, restProps));
|
|
147
59
|
};
|
|
148
|
-
return /*#__PURE__*/React.createElement(
|
|
149
|
-
style: {
|
|
150
|
-
position: 'absolute',
|
|
151
|
-
top: 0,
|
|
152
|
-
left: 0,
|
|
153
|
-
right: 0,
|
|
154
|
-
bottom: 0,
|
|
155
|
-
display: 'flex',
|
|
156
|
-
alignItems: 'center',
|
|
157
|
-
justifyContent: 'center',
|
|
158
|
-
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
|
159
|
-
zIndex: 10
|
|
160
|
-
}
|
|
161
|
-
}, /*#__PURE__*/React.createElement("div", null, "\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668...", retryCount > 0 && /*#__PURE__*/React.createElement("div", {
|
|
162
|
-
style: {
|
|
163
|
-
fontSize: '12px',
|
|
164
|
-
color: '#666'
|
|
165
|
-
}
|
|
166
|
-
}, "\u91CD\u8BD5 ", retryCount, "/", MAX_RETRIES))), /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
167
61
|
ref: containerRef,
|
|
168
62
|
style: {
|
|
169
63
|
width: '100%',
|
|
170
64
|
height: '100%'
|
|
171
65
|
}
|
|
172
|
-
})
|
|
66
|
+
});
|
|
173
67
|
};
|
|
174
68
|
export default /*#__PURE__*/forwardRef(Design);
|
package/lib/createIframe.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var createIframeContent = function createIframeContent() {
|
|
8
8
|
var timestamp = Date.now();
|
|
9
|
-
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n <!-- \u5C06fr-generator\u811A\u672C\u653E\u5728head\u4E2D\uFF0C\u5E76\u4F7F\u7528defer\u5C5E\u6027\uFF0C\u786E\u4FDD\u5728body\u4E2D\u7684\u811A\u672C\u4E4B\u524D\u6267\u884C -->\n <script defer type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n </body>\n </html>\n ");
|
|
9
|
+
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n // \u5173\u952E\u8865\u4E01\uFF1A\u63D0\u524D\u5728 iframe \u5185\u58F0\u660E getFormRenderMaterial\n window.getFormRenderMaterial = function (libraryName, pkg) {\n if (window.parent && window.parent.getFormRenderMaterial) {\n return window.parent.getFormRenderMaterial(libraryName, pkg);\n }\n // \u82E5\u7236\u7A97\u53E3\u6CA1\u6709\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u7A7A\u5BF9\u8C61\uFF08\u6700\u5B89\u5168 fallback\uFF09\n return {};\n };\n </script>\n\n \n\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n <!-- \u5C06fr-generator\u811A\u672C\u653E\u5728head\u4E2D\uFF0C\u5E76\u4F7F\u7528defer\u5C5E\u6027\uFF0C\u786E\u4FDD\u5728body\u4E2D\u7684\u811A\u672C\u4E4B\u524D\u6267\u884C -->\n <script defer type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js?t=".concat(timestamp, "\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n </body>\n </html>\n ");
|
|
10
10
|
return html;
|
|
11
11
|
};
|
|
12
12
|
var _default = exports.default = function _default() {
|
package/lib/main.js
CHANGED
|
@@ -16,167 +16,61 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
16
16
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
17
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
18
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
19
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
20
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
22
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
23
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
25
19
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
26
20
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
27
21
|
var iframe;
|
|
28
|
-
var retryCount = 0;
|
|
29
|
-
var MAX_RETRIES = 3;
|
|
30
22
|
var Design = function Design(props, ref) {
|
|
31
23
|
var widgets = props.widgets,
|
|
32
24
|
settings = props.settings,
|
|
33
25
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
34
26
|
var containerRef = (0, _react.useRef)();
|
|
35
|
-
var _useState = (0, _react.useState)(true),
|
|
36
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
37
|
-
loading = _useState2[0],
|
|
38
|
-
setLoading = _useState2[1];
|
|
39
27
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
40
28
|
return {
|
|
41
29
|
getValue: function getValue() {
|
|
42
|
-
var _iframe,
|
|
43
|
-
|
|
30
|
+
var _iframe, _iframe2, _iframe2$contentWindo, _iframe3, _iframe3$contentWindo, _iframe3$contentWindo2, _iframe3$contentWindo3;
|
|
31
|
+
console.log("contentWindow", (_iframe = iframe) === null || _iframe === void 0 ? void 0 : _iframe.contentWindow);
|
|
32
|
+
console.log("__FR_ENGINE__", (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : _iframe2$contentWindo.__FR_ENGINE__);
|
|
33
|
+
return (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : (_iframe3$contentWindo2 = _iframe3$contentWindo.__FR_ENGINE__) === null || _iframe3$contentWindo2 === void 0 ? void 0 : (_iframe3$contentWindo3 = _iframe3$contentWindo2.exportSchema) === null || _iframe3$contentWindo3 === void 0 ? void 0 : _iframe3$contentWindo3.call(_iframe3$contentWindo2);
|
|
44
34
|
},
|
|
45
35
|
setValue: function setValue(schema) {
|
|
46
|
-
var
|
|
47
|
-
return (
|
|
48
|
-
},
|
|
49
|
-
reload: function reload() {
|
|
50
|
-
if (containerRef.current && iframe) {
|
|
51
|
-
containerRef.current.removeChild(iframe);
|
|
52
|
-
iframe = null;
|
|
53
|
-
retryCount = 0;
|
|
54
|
-
initIframe();
|
|
55
|
-
}
|
|
36
|
+
var _iframe4, _iframe4$contentWindo, _iframe4$contentWindo2, _iframe4$contentWindo3;
|
|
37
|
+
return (_iframe4 = iframe) === null || _iframe4 === void 0 ? void 0 : (_iframe4$contentWindo = _iframe4.contentWindow) === null || _iframe4$contentWindo === void 0 ? void 0 : (_iframe4$contentWindo2 = _iframe4$contentWindo.__FR_ENGINE__) === null || _iframe4$contentWindo2 === void 0 ? void 0 : (_iframe4$contentWindo3 = _iframe4$contentWindo2.importSchema) === null || _iframe4$contentWindo3 === void 0 ? void 0 : _iframe4$contentWindo3.call(_iframe4$contentWindo2, schema);
|
|
56
38
|
}
|
|
57
39
|
};
|
|
58
40
|
});
|
|
59
41
|
(0, _react.useEffect)(function () {
|
|
60
42
|
initIframe();
|
|
61
|
-
|
|
62
|
-
window.addEventListener('message', messageHandler);
|
|
43
|
+
window.addEventListener('message', engineOnLoad);
|
|
63
44
|
return function () {
|
|
64
|
-
window.removeEventListener('message',
|
|
65
|
-
if (iframe && containerRef.current) {
|
|
66
|
-
try {
|
|
67
|
-
containerRef.current.removeChild(iframe);
|
|
68
|
-
} catch (e) {}
|
|
69
|
-
iframe = null;
|
|
70
|
-
}
|
|
45
|
+
window.removeEventListener('message', engineOnLoad);
|
|
71
46
|
};
|
|
72
47
|
}, []);
|
|
73
48
|
var initIframe = function initIframe() {
|
|
74
|
-
console.log(
|
|
75
|
-
|
|
76
|
-
// 清理旧的 iframe
|
|
77
|
-
if (containerRef.current && iframe) {
|
|
78
|
-
try {
|
|
79
|
-
containerRef.current.removeChild(iframe);
|
|
80
|
-
} catch (e) {}
|
|
81
|
-
iframe = null;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// 创建新的 iframe
|
|
49
|
+
console.log("开始创建 iframe");
|
|
85
50
|
iframe = (0, _createIframe.default)();
|
|
86
|
-
|
|
87
|
-
// 添加错误处理
|
|
88
|
-
iframe.onerror = function (e) {
|
|
89
|
-
console.error('[SchemaBuilder] Iframe error:', e);
|
|
90
|
-
};
|
|
91
|
-
iframe.onload = function () {
|
|
92
|
-
console.log('[SchemaBuilder] Iframe loaded');
|
|
93
|
-
setLoading(false);
|
|
94
|
-
};
|
|
95
51
|
containerRef.current.appendChild(iframe);
|
|
96
|
-
|
|
97
|
-
// 设置超时重试
|
|
98
|
-
setTimeout(function () {
|
|
99
|
-
if (iframe && (!iframe.contentWindow || !iframe.contentDocument)) {
|
|
100
|
-
console.warn('[SchemaBuilder] Iframe load timeout, retrying...');
|
|
101
|
-
retryIframe();
|
|
102
|
-
}
|
|
103
|
-
}, 10000);
|
|
104
52
|
};
|
|
105
|
-
var
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
initIframe();
|
|
110
|
-
} else {
|
|
111
|
-
console.error('[SchemaBuilder] Max retries reached');
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
var handleMessage = function handleMessage(event) {
|
|
115
|
-
// 处理来自 iframe 的各种消息
|
|
116
|
-
switch (event.data.type) {
|
|
117
|
-
case 'getFormRenderMaterial-ready':
|
|
118
|
-
console.log('[SchemaBuilder] getFormRenderMaterial is ready in iframe');
|
|
119
|
-
break;
|
|
120
|
-
case 'engine-load':
|
|
121
|
-
console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
|
|
122
|
-
if (event.data.checks && !event.data.checks.getFormRenderMaterial) {
|
|
123
|
-
console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
|
|
124
|
-
setTimeout(retryIframe, 500);
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// 延迟初始化以确保所有资源就绪
|
|
129
|
-
setTimeout(function () {
|
|
130
|
-
try {
|
|
131
|
-
var _iframe3, _iframe3$contentWindo;
|
|
132
|
-
if ((_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : _iframe3$contentWindo.__FR_ENGINE__) {
|
|
133
|
-
iframe.contentWindow.__FR_ENGINE__.init(_objectSpread({
|
|
134
|
-
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
135
|
-
widgets: widgets,
|
|
136
|
-
logo: {
|
|
137
|
-
title: 'XRender'
|
|
138
|
-
}
|
|
139
|
-
}, restProps));
|
|
140
|
-
console.log('[SchemaBuilder] Engine initialized successfully');
|
|
141
|
-
} else {
|
|
142
|
-
console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
|
|
143
|
-
retryIframe();
|
|
144
|
-
}
|
|
145
|
-
} catch (error) {
|
|
146
|
-
console.error('[SchemaBuilder] Error initializing engine:', error);
|
|
147
|
-
retryIframe();
|
|
148
|
-
}
|
|
149
|
-
}, 500);
|
|
150
|
-
break;
|
|
151
|
-
default:
|
|
152
|
-
// 其他消息可以忽略
|
|
153
|
-
break;
|
|
53
|
+
var engineOnLoad = function engineOnLoad(event) {
|
|
54
|
+
var _iframe5, _iframe5$contentWindo, _iframe5$contentWindo2;
|
|
55
|
+
if (event.data.type !== 'engine-load') {
|
|
56
|
+
return;
|
|
154
57
|
}
|
|
58
|
+
console.log("拿到 iframe props:", event);
|
|
59
|
+
(_iframe5 = iframe) === null || _iframe5 === void 0 ? void 0 : (_iframe5$contentWindo = _iframe5.contentWindow) === null || _iframe5$contentWindo === void 0 ? void 0 : (_iframe5$contentWindo2 = _iframe5$contentWindo.__FR_ENGINE__) === null || _iframe5$contentWindo2 === void 0 ? void 0 : _iframe5$contentWindo2.init(_objectSpread({
|
|
60
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
61
|
+
widgets: widgets,
|
|
62
|
+
// recordEnable: true,
|
|
63
|
+
logo: {
|
|
64
|
+
title: 'XRender'
|
|
65
|
+
}
|
|
66
|
+
}, restProps));
|
|
155
67
|
};
|
|
156
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
157
|
-
style: {
|
|
158
|
-
position: 'absolute',
|
|
159
|
-
top: 0,
|
|
160
|
-
left: 0,
|
|
161
|
-
right: 0,
|
|
162
|
-
bottom: 0,
|
|
163
|
-
display: 'flex',
|
|
164
|
-
alignItems: 'center',
|
|
165
|
-
justifyContent: 'center',
|
|
166
|
-
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
|
167
|
-
zIndex: 10
|
|
168
|
-
}
|
|
169
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, "\u52A0\u8F7D\u8868\u5355\u8BBE\u8BA1\u5668...", retryCount > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
170
|
-
style: {
|
|
171
|
-
fontSize: '12px',
|
|
172
|
-
color: '#666'
|
|
173
|
-
}
|
|
174
|
-
}, "\u91CD\u8BD5 ", retryCount, "/", MAX_RETRIES))), /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
175
69
|
ref: containerRef,
|
|
176
70
|
style: {
|
|
177
71
|
width: '100%',
|
|
178
72
|
height: '100%'
|
|
179
73
|
}
|
|
180
|
-
})
|
|
74
|
+
});
|
|
181
75
|
};
|
|
182
76
|
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Design);
|