@zzdadelu/schema-builder 1.0.0-alpha.51 → 1.0.0-alpha.53

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.
Files changed (5) hide show
  1. package/es/createIframe.js +1 -20
  2. package/es/main.js +60 -21
  3. package/lib/createIframe.js +1 -20
  4. package/lib/main.js +60 -21
  5. package/package.json +1 -1
package/es/createIframe.js CHANGED
@@ -7,25 +7,6 @@ export default (function () {
7
7
  iframe.width = '100%';
8
8
  iframe.height = '100%';
9
9
  iframe.frameBorder = '0';
10
-
11
- // 使用 Blob URL 避免缓存问题
12
- var htmlContent = createIframeContent();
13
- var blob = new Blob([htmlContent], {
14
- type: 'text/html'
15
- });
16
- var url = URL.createObjectURL(blob);
17
- iframe.src = url;
18
-
19
- // 清理 Blob URL
20
- iframe.onload = function () {
21
- setTimeout(function () {
22
- return URL.revokeObjectURL(url);
23
- }, 1000);
24
- console.log('[XRender] Iframe loaded with Blob URL');
25
- };
26
- iframe.onerror = function (error) {
27
- console.error('[XRender] Iframe load error:', error);
28
- URL.revokeObjectURL(url);
29
- };
10
+ iframe.srcdoc = createIframeContent();
30
11
  return iframe;
31
12
  });
package/es/main.js CHANGED
@@ -23,11 +23,15 @@ var Design = function Design(props, ref) {
23
23
  var widgets = props.widgets,
24
24
  settings = props.settings,
25
25
  restProps = _objectWithoutProperties(props, _excluded);
26
- var containerRef = useRef();
26
+ var containerRef = useRef(null);
27
27
  var _useState = useState(true),
28
28
  _useState2 = _slicedToArray(_useState, 2),
29
29
  loading = _useState2[0],
30
30
  setLoading = _useState2[1];
31
+ var _useState3 = useState(false),
32
+ _useState4 = _slicedToArray(_useState3, 2),
33
+ isMounted = _useState4[0],
34
+ setIsMounted = _useState4[1];
31
35
  useImperativeHandle(ref, function () {
32
36
  return {
33
37
  getValue: function getValue() {
@@ -49,29 +53,42 @@ var Design = function Design(props, ref) {
49
53
  };
50
54
  });
51
55
  useEffect(function () {
56
+ setIsMounted(true);
57
+ return function () {
58
+ setIsMounted(false);
59
+ };
60
+ }, []);
61
+ useEffect(function () {
62
+ if (!isMounted || !containerRef.current) return;
52
63
  initIframe();
53
64
  var messageHandler = handleMessage;
54
65
  window.addEventListener('message', messageHandler);
55
66
  return function () {
56
67
  window.removeEventListener('message', messageHandler);
57
- if (iframe && containerRef.current) {
58
- try {
59
- containerRef.current.removeChild(iframe);
60
- } catch (e) {}
61
- iframe = null;
62
- }
68
+ cleanupIframe();
63
69
  };
64
- }, []);
65
- var initIframe = function initIframe() {
66
- console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
67
-
68
- // 清理旧的 iframe
69
- if (containerRef.current && iframe) {
70
+ }, [isMounted]);
71
+ var cleanupIframe = function cleanupIframe() {
72
+ if (iframe && containerRef.current) {
70
73
  try {
71
74
  containerRef.current.removeChild(iframe);
72
- } catch (e) {}
75
+ } catch (e) {
76
+ // 忽略移除错误
77
+ }
73
78
  iframe = null;
74
79
  }
80
+ };
81
+ var initIframe = function initIframe() {
82
+ console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
83
+
84
+ // 确保容器存在
85
+ if (!containerRef.current) {
86
+ console.error('[SchemaBuilder] Container ref is null');
87
+ return;
88
+ }
89
+
90
+ // 清理旧的 iframe
91
+ cleanupIframe();
75
92
 
76
93
  // 创建新的 iframe
77
94
  iframe = createIframe();
@@ -84,17 +101,33 @@ var Design = function Design(props, ref) {
84
101
  console.log('[SchemaBuilder] Iframe loaded');
85
102
  setLoading(false);
86
103
  };
87
- containerRef.current.appendChild(iframe);
104
+
105
+ // 确保容器存在再添加 iframe
106
+ if (containerRef.current) {
107
+ containerRef.current.appendChild(iframe);
108
+ } else {
109
+ console.error('[SchemaBuilder] Cannot append iframe, container is null');
110
+ return;
111
+ }
88
112
 
89
113
  // 设置超时重试
90
- setTimeout(function () {
114
+ var timeoutId = setTimeout(function () {
91
115
  if (iframe && (!iframe.contentWindow || !iframe.contentDocument)) {
92
116
  console.warn('[SchemaBuilder] Iframe load timeout, retrying...');
93
117
  retryIframe();
94
118
  }
95
119
  }, 10000);
120
+
121
+ // 保存 timeoutId 以便清理
122
+ return function () {
123
+ return clearTimeout(timeoutId);
124
+ };
96
125
  };
97
126
  var retryIframe = function retryIframe() {
127
+ if (!isMounted || !containerRef.current) {
128
+ console.log('[SchemaBuilder] Component unmounted, skipping retry');
129
+ return;
130
+ }
98
131
  if (retryCount < MAX_RETRIES) {
99
132
  retryCount++;
100
133
  console.warn("[SchemaBuilder] Retrying iframe creation (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
@@ -113,12 +146,14 @@ var Design = function Design(props, ref) {
113
146
  console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
114
147
  if (event.data.checks && !event.data.checks.getFormRenderMaterial) {
115
148
  console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
116
- setTimeout(retryIframe, 500);
149
+ setTimeout(function () {
150
+ if (isMounted) retryIframe();
151
+ }, 500);
117
152
  return;
118
153
  }
119
154
 
120
155
  // 延迟初始化以确保所有资源就绪
121
- setTimeout(function () {
156
+ var initTimeout = setTimeout(function () {
122
157
  try {
123
158
  var _iframe3, _iframe3$contentWindo;
124
159
  if ((_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : _iframe3$contentWindo.__FR_ENGINE__) {
@@ -132,14 +167,18 @@ var Design = function Design(props, ref) {
132
167
  console.log('[SchemaBuilder] Engine initialized successfully');
133
168
  } else {
134
169
  console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
135
- retryIframe();
170
+ if (isMounted) retryIframe();
136
171
  }
137
172
  } catch (error) {
138
173
  console.error('[SchemaBuilder] Error initializing engine:', error);
139
- retryIframe();
174
+ if (isMounted) retryIframe();
140
175
  }
141
176
  }, 500);
142
- break;
177
+
178
+ // 清理 timeout
179
+ return function () {
180
+ return clearTimeout(initTimeout);
181
+ };
143
182
  default:
144
183
  // 其他消息可以忽略
145
184
  break;
package/lib/createIframe.js CHANGED
@@ -13,25 +13,6 @@ var _default = exports.default = function _default() {
13
13
  iframe.width = '100%';
14
14
  iframe.height = '100%';
15
15
  iframe.frameBorder = '0';
16
-
17
- // 使用 Blob URL 避免缓存问题
18
- var htmlContent = createIframeContent();
19
- var blob = new Blob([htmlContent], {
20
- type: 'text/html'
21
- });
22
- var url = URL.createObjectURL(blob);
23
- iframe.src = url;
24
-
25
- // 清理 Blob URL
26
- iframe.onload = function () {
27
- setTimeout(function () {
28
- return URL.revokeObjectURL(url);
29
- }, 1000);
30
- console.log('[XRender] Iframe loaded with Blob URL');
31
- };
32
- iframe.onerror = function (error) {
33
- console.error('[XRender] Iframe load error:', error);
34
- URL.revokeObjectURL(url);
35
- };
16
+ iframe.srcdoc = createIframeContent();
36
17
  return iframe;
37
18
  };
package/lib/main.js CHANGED
@@ -31,11 +31,15 @@ var Design = function Design(props, ref) {
31
31
  var widgets = props.widgets,
32
32
  settings = props.settings,
33
33
  restProps = _objectWithoutProperties(props, _excluded);
34
- var containerRef = (0, _react.useRef)();
34
+ var containerRef = (0, _react.useRef)(null);
35
35
  var _useState = (0, _react.useState)(true),
36
36
  _useState2 = _slicedToArray(_useState, 2),
37
37
  loading = _useState2[0],
38
38
  setLoading = _useState2[1];
39
+ var _useState3 = (0, _react.useState)(false),
40
+ _useState4 = _slicedToArray(_useState3, 2),
41
+ isMounted = _useState4[0],
42
+ setIsMounted = _useState4[1];
39
43
  (0, _react.useImperativeHandle)(ref, function () {
40
44
  return {
41
45
  getValue: function getValue() {
@@ -57,29 +61,42 @@ var Design = function Design(props, ref) {
57
61
  };
58
62
  });
59
63
  (0, _react.useEffect)(function () {
64
+ setIsMounted(true);
65
+ return function () {
66
+ setIsMounted(false);
67
+ };
68
+ }, []);
69
+ (0, _react.useEffect)(function () {
70
+ if (!isMounted || !containerRef.current) return;
60
71
  initIframe();
61
72
  var messageHandler = handleMessage;
62
73
  window.addEventListener('message', messageHandler);
63
74
  return function () {
64
75
  window.removeEventListener('message', messageHandler);
65
- if (iframe && containerRef.current) {
66
- try {
67
- containerRef.current.removeChild(iframe);
68
- } catch (e) {}
69
- iframe = null;
70
- }
76
+ cleanupIframe();
71
77
  };
72
- }, []);
73
- var initIframe = function initIframe() {
74
- console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
75
-
76
- // 清理旧的 iframe
77
- if (containerRef.current && iframe) {
78
+ }, [isMounted]);
79
+ var cleanupIframe = function cleanupIframe() {
80
+ if (iframe && containerRef.current) {
78
81
  try {
79
82
  containerRef.current.removeChild(iframe);
80
- } catch (e) {}
83
+ } catch (e) {
84
+ // 忽略移除错误
85
+ }
81
86
  iframe = null;
82
87
  }
88
+ };
89
+ var initIframe = function initIframe() {
90
+ console.log('[SchemaBuilder] Initializing iframe, retry:', retryCount);
91
+
92
+ // 确保容器存在
93
+ if (!containerRef.current) {
94
+ console.error('[SchemaBuilder] Container ref is null');
95
+ return;
96
+ }
97
+
98
+ // 清理旧的 iframe
99
+ cleanupIframe();
83
100
 
84
101
  // 创建新的 iframe
85
102
  iframe = (0, _createIframe.default)();
@@ -92,17 +109,33 @@ var Design = function Design(props, ref) {
92
109
  console.log('[SchemaBuilder] Iframe loaded');
93
110
  setLoading(false);
94
111
  };
95
- containerRef.current.appendChild(iframe);
112
+
113
+ // 确保容器存在再添加 iframe
114
+ if (containerRef.current) {
115
+ containerRef.current.appendChild(iframe);
116
+ } else {
117
+ console.error('[SchemaBuilder] Cannot append iframe, container is null');
118
+ return;
119
+ }
96
120
 
97
121
  // 设置超时重试
98
- setTimeout(function () {
122
+ var timeoutId = setTimeout(function () {
99
123
  if (iframe && (!iframe.contentWindow || !iframe.contentDocument)) {
100
124
  console.warn('[SchemaBuilder] Iframe load timeout, retrying...');
101
125
  retryIframe();
102
126
  }
103
127
  }, 10000);
128
+
129
+ // 保存 timeoutId 以便清理
130
+ return function () {
131
+ return clearTimeout(timeoutId);
132
+ };
104
133
  };
105
134
  var retryIframe = function retryIframe() {
135
+ if (!isMounted || !containerRef.current) {
136
+ console.log('[SchemaBuilder] Component unmounted, skipping retry');
137
+ return;
138
+ }
106
139
  if (retryCount < MAX_RETRIES) {
107
140
  retryCount++;
108
141
  console.warn("[SchemaBuilder] Retrying iframe creation (".concat(retryCount, "/").concat(MAX_RETRIES, ")"));
@@ -121,12 +154,14 @@ var Design = function Design(props, ref) {
121
154
  console.log('[SchemaBuilder] Engine loaded, checks:', event.data.checks);
122
155
  if (event.data.checks && !event.data.checks.getFormRenderMaterial) {
123
156
  console.error('[SchemaBuilder] getFormRenderMaterial check failed, retrying...');
124
- setTimeout(retryIframe, 500);
157
+ setTimeout(function () {
158
+ if (isMounted) retryIframe();
159
+ }, 500);
125
160
  return;
126
161
  }
127
162
 
128
163
  // 延迟初始化以确保所有资源就绪
129
- setTimeout(function () {
164
+ var initTimeout = setTimeout(function () {
130
165
  try {
131
166
  var _iframe3, _iframe3$contentWindo;
132
167
  if ((_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : _iframe3$contentWindo.__FR_ENGINE__) {
@@ -140,14 +175,18 @@ var Design = function Design(props, ref) {
140
175
  console.log('[SchemaBuilder] Engine initialized successfully');
141
176
  } else {
142
177
  console.error('[SchemaBuilder] __FR_ENGINE__ not found in iframe');
143
- retryIframe();
178
+ if (isMounted) retryIframe();
144
179
  }
145
180
  } catch (error) {
146
181
  console.error('[SchemaBuilder] Error initializing engine:', error);
147
- retryIframe();
182
+ if (isMounted) retryIframe();
148
183
  }
149
184
  }, 500);
150
- break;
185
+
186
+ // 清理 timeout
187
+ return function () {
188
+ return clearTimeout(initTimeout);
189
+ };
151
190
  default:
152
191
  // 其他消息可以忽略
153
192
  break;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zzdadelu/schema-builder",
3
- "version": "1.0.0-alpha.51",
3
+ "version": "1.0.0-alpha.53",
4
4
  "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
5
5
  "keywords": [
6
6
  "Form",