@snack-kit/core 0.1.0 → 0.3.0
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 +305 -395
- package/dist/cjs/index.js +58 -20
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.mjs +65 -21
- package/dist/es/index.mjs.map +1 -1
- package/dist/types/index.d.ts +15 -1
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -1,514 +1,424 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @snack-kit/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Snack 动态模块加载与渲染 SDK,基于 React + RequireJS 构建。支持从服务端加载 UMD 格式的 Snack 模块,并将设计器页面 JSON 配置渲染为 React 组件树,同时提供完整的表单数据管理、校验、国际化与事件系统。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## 安装
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @snack-kit/core
|
|
11
|
+
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
**Peer Dependencies**
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom @snack-kit/lib
|
|
17
|
+
```
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
---
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
## 快速开始
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
```tsx
|
|
24
|
+
import React from 'react';
|
|
25
|
+
import ReactDOM from 'react-dom';
|
|
26
|
+
import { createRoot } from 'react-dom/client';
|
|
27
|
+
import { SnackSDK } from '@snack-kit/core';
|
|
28
|
+
import * as SnackKitLib from '@snack-kit/lib';
|
|
29
|
+
|
|
30
|
+
const sdk = new SnackSDK({
|
|
31
|
+
service: 'https://your-snack-service.com',
|
|
32
|
+
importMaps: {
|
|
33
|
+
'react': React,
|
|
34
|
+
'react-dom': ReactDOM,
|
|
35
|
+
'@snack-kit/lib': SnackKitLib
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// 渲染设计器页面为 React 组件
|
|
40
|
+
const Page = await sdk.createPageComponent({ id: 'page-id', type: 'portal' });
|
|
41
|
+
|
|
42
|
+
createRoot(document.getElementById('app')!).render(<Page />);
|
|
43
|
+
```
|
|
22
44
|
|
|
23
|
-
|
|
45
|
+
---
|
|
24
46
|
|
|
25
|
-
|
|
47
|
+
## SnackSDK 构造参数
|
|
26
48
|
|
|
27
|
-
|
|
49
|
+
| 参数 | 类型 | 说明 |
|
|
50
|
+
|------|------|------|
|
|
51
|
+
| `service` | `string` | Snack 服务端地址 |
|
|
52
|
+
| `importMaps` | `object` | 模块依赖注入,key 为模块名,value 为模块对象 |
|
|
53
|
+
| `defaultFormAttr` | `SnackFormAttribute` | 表单组件 FormAttr 全局默认值 |
|
|
54
|
+
| `runtime` | `boolean` | 是否为运行时模式,默认 `true`;设计器模式设为 `false` |
|
|
55
|
+
| `runtimeMapping` | `object` | 运行时模块名映射 |
|
|
56
|
+
| `modUrl` | `string` | 模块加载根路径,默认 `service + modPath` |
|
|
57
|
+
| `modPath` | `string` | 模块请求路径,默认 `/package` |
|
|
58
|
+
| `cdnUrl` | `string` | CDN 根路径,默认 `service + cdnPath` |
|
|
59
|
+
| `cdnPath` | `string` | CDN 路径,默认 `/lib` |
|
|
60
|
+
| `pageUrl` | `string` | 页面数据请求根路径 |
|
|
61
|
+
| `pagePath` | `string` | 页面请求路径,默认 `/page` |
|
|
62
|
+
| `staticUrl` | `string` | 模块静态资源 CDN 路径 |
|
|
63
|
+
| `importModules` | `ImportModules` | 预置 Snack 模块 class,加载时优先从此查找 |
|
|
64
|
+
| `basicsType` | `string` | 基础模块分类名,默认 `basics` |
|
|
65
|
+
| `i18n` | `I18nData` | 国际化数据复写 |
|
|
66
|
+
| `localeMapping` | `object` | 国际化语言映射关系,例如 `{ zh: 'zh_CN' }` |
|
|
67
|
+
| `localeDefault` | `string` | 默认国际化语言,默认 `zh` |
|
|
68
|
+
| `message` | `object` | 消息提示对象,供 evalJS 脚本使用 |
|
|
69
|
+
| `argv` | `Record<string, ...>` | 全局环境变量,在表达式中通过 `$.argv` 访问 |
|
|
28
70
|
|
|
29
|
-
|
|
71
|
+
---
|
|
30
72
|
|
|
31
|
-
|
|
73
|
+
## 核心 API
|
|
32
74
|
|
|
33
|
-
|
|
75
|
+
### 页面渲染
|
|
34
76
|
|
|
35
|
-
|
|
36
|
-
SDK 参数新增 argv ,初始化可传入全局变量对象
|
|
37
|
-
移除 node-sass,新增 sass 库
|
|
77
|
+
#### `sdk.createPageComponent(params, config?)`
|
|
38
78
|
|
|
39
|
-
|
|
79
|
+
将设计器页面渲染为 React 函数组件。
|
|
40
80
|
|
|
41
|
-
|
|
81
|
+
```tsx
|
|
82
|
+
const Page = await sdk.createPageComponent(
|
|
83
|
+
{ id: 'my-page', type: 'portal' },
|
|
84
|
+
{
|
|
85
|
+
data: { username: 'admin' }, // 表单回填数据
|
|
86
|
+
onComplete: (event) => {
|
|
87
|
+
console.log('渲染完成', event.fields);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
);
|
|
42
91
|
|
|
43
|
-
|
|
92
|
+
<Page />
|
|
93
|
+
```
|
|
44
94
|
|
|
45
|
-
|
|
95
|
+
#### `sdk.createPageForElement(el, params, config?)`
|
|
46
96
|
|
|
47
|
-
|
|
97
|
+
将页面直接渲染到指定 DOM 元素。
|
|
48
98
|
|
|
49
|
-
|
|
99
|
+
```ts
|
|
100
|
+
await sdk.createPageForElement(document.getElementById('container')!, { id: 'my-page' });
|
|
101
|
+
```
|
|
50
102
|
|
|
51
|
-
|
|
103
|
+
#### `sdk.renderPage(params, config?)`
|
|
52
104
|
|
|
53
|
-
|
|
54
|
-
add package-lock.json
|
|
105
|
+
渲染页面并返回根容器 `DropOjb` 实例(低层 API)。支持传入数组一次渲染多个页面到同一表单容器。
|
|
55
106
|
|
|
56
|
-
|
|
107
|
+
---
|
|
57
108
|
|
|
58
|
-
|
|
109
|
+
### 表单操作
|
|
59
110
|
|
|
60
|
-
|
|
111
|
+
渲染完成后,`onComplete` 回调参数 `event: SnackPageCompleteEvent` 提供以下方法:
|
|
61
112
|
|
|
62
|
-
|
|
113
|
+
```ts
|
|
114
|
+
// 获取表单数据(全量)
|
|
115
|
+
const formData = event.getData();
|
|
63
116
|
|
|
64
|
-
|
|
117
|
+
// 获取单个字段值
|
|
118
|
+
const username = event.getData('username');
|
|
65
119
|
|
|
66
|
-
|
|
120
|
+
// 设置表单数据
|
|
121
|
+
event.setData('username', 'new-value');
|
|
122
|
+
event.setData({ username: 'a', password: 'b' });
|
|
67
123
|
|
|
68
|
-
|
|
124
|
+
// 表单校验(返回 Promise<boolean>)
|
|
125
|
+
const passed = await event.verify();
|
|
126
|
+
const fieldPassed = await event.verify('username');
|
|
69
127
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
表单校验国际化getLocale不再读取sdk默认语言
|
|
128
|
+
// 清空表单
|
|
129
|
+
event.empty();
|
|
73
130
|
|
|
74
|
-
|
|
131
|
+
// 销毁页面(解绑事件、释放模块)
|
|
132
|
+
event.destroy();
|
|
133
|
+
```
|
|
75
134
|
|
|
76
|
-
|
|
135
|
+
---
|
|
77
136
|
|
|
78
|
-
|
|
137
|
+
### 模块渲染
|
|
79
138
|
|
|
80
|
-
|
|
139
|
+
#### `sdk.createModuleComponent(args, data?)`
|
|
81
140
|
|
|
82
|
-
|
|
141
|
+
加载并渲染单个 Snack 模块为 React 函数组件。
|
|
83
142
|
|
|
84
|
-
|
|
143
|
+
```tsx
|
|
144
|
+
const Editor = await sdk.createModuleComponent(
|
|
145
|
+
{ name: 'codeeditor', type: 'code-editor' },
|
|
146
|
+
{ readOnly: false }
|
|
147
|
+
);
|
|
85
148
|
|
|
86
|
-
|
|
149
|
+
<Editor />
|
|
150
|
+
```
|
|
87
151
|
|
|
88
|
-
|
|
152
|
+
#### `sdk.createClassModule(SnackClass, data?, main?)`
|
|
89
153
|
|
|
90
|
-
|
|
154
|
+
通过 Snack Class 直接创建模块实例。
|
|
91
155
|
|
|
92
|
-
|
|
156
|
+
```ts
|
|
157
|
+
const mod = sdk.createClassModule(MySnackClass, { value: 'hello' });
|
|
158
|
+
```
|
|
93
159
|
|
|
94
|
-
|
|
160
|
+
#### `sdk.createClassModuleComponent(SnackClass, data?, main?)`
|
|
95
161
|
|
|
96
|
-
|
|
97
|
-
Core新增localeDefault属性,用于设置默认语言;
|
|
162
|
+
通过 Snack Class 创建模块并返回 React 函数组件。
|
|
98
163
|
|
|
99
|
-
|
|
164
|
+
---
|
|
100
165
|
|
|
101
|
-
|
|
166
|
+
### 模块加载
|
|
102
167
|
|
|
103
|
-
|
|
168
|
+
#### `sdk.module(config)`
|
|
104
169
|
|
|
105
|
-
|
|
106
|
-
修复在组件data对象替换{{var}}变量时造成的原型数据丢失的问题;
|
|
107
|
-
渲染组件的data数据对象,现在所有字段都支持{{data.var}}变量占位符,从data内获取数据,并且支持jsx;
|
|
108
|
-
例:
|
|
170
|
+
按模块名称加载 UMD 模块,返回 Snack class 键值对。
|
|
109
171
|
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<div>123123</div>
|
|
115
|
-
</>
|
|
116
|
-
data.test = '123';
|
|
117
|
-
// 组件页面渲染json
|
|
118
|
-
moduleData.data.M.label.zh = '{{data.jsx}}xxx{{data.test}}';
|
|
172
|
+
```ts
|
|
173
|
+
const { mymodule } = await sdk.module({
|
|
174
|
+
module: [{ name: 'mymodule', type: 'custom' }]
|
|
175
|
+
});
|
|
119
176
|
```
|
|
120
177
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
新增formAttr属性:
|
|
124
|
-
verifyOnEvents: 设置所要在组件事件触发时,执行以下校验规则;
|
|
125
|
-
verifyASTime:校验规则触发防抖时间,防止某些事件触发校验规则过于频繁所设置的间隔时间;
|
|
126
|
-
|
|
127
|
-
# 2.2.21
|
|
128
|
-
|
|
129
|
-
新增事件onCreateBefore,组件初始化之前执行;
|
|
130
|
-
新增事件列表方法,GetDefaultEvents();
|
|
131
|
-
调整导出方法CodeHintConfig -> GetParamsDetails;
|
|
132
|
-
修复自定义脚本$display对非表单组件的支持;
|
|
133
|
-
|
|
134
|
-
# 2.2.20
|
|
135
|
-
|
|
136
|
-
修复form组件触发校验的限流器作用范围错误,导致不同组件触发限流器时会被相互干扰终止;
|
|
178
|
+
#### `sdk.moduleURL(config)`
|
|
137
179
|
|
|
138
|
-
|
|
180
|
+
按模块 URL 加载模块。
|
|
139
181
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
182
|
+
```ts
|
|
183
|
+
const mods = await sdk.moduleURL({
|
|
184
|
+
urls: 'https://cdn.example.com/package/custom/mymodule/index.js',
|
|
185
|
+
cdnUrl: 'https://cdn.example.com/lib'
|
|
186
|
+
});
|
|
187
|
+
```
|
|
143
188
|
|
|
144
|
-
|
|
189
|
+
---
|
|
145
190
|
|
|
146
|
-
|
|
191
|
+
### 事件系统
|
|
147
192
|
|
|
148
|
-
|
|
149
|
-
|
|
193
|
+
```ts
|
|
194
|
+
// 注册事件
|
|
195
|
+
sdk.addEvent('onComplete', (root, params) => {
|
|
196
|
+
console.log('页面加载完成', root);
|
|
197
|
+
});
|
|
150
198
|
|
|
151
|
-
|
|
199
|
+
// 页面内组件事件(onChange、onBlur 等)由 SDK 自动分发
|
|
200
|
+
// 手动发送事件
|
|
201
|
+
sdk.sendEvent('custom-event', [arg1, arg2]);
|
|
152
202
|
|
|
153
|
-
|
|
203
|
+
// 卸载指定回调
|
|
204
|
+
sdk.removeEvent('onComplete', myCallback);
|
|
154
205
|
|
|
155
|
-
|
|
206
|
+
// 卸载所有同名事件
|
|
207
|
+
sdk.removeEvent('onComplete');
|
|
208
|
+
```
|
|
156
209
|
|
|
157
|
-
|
|
210
|
+
**内置事件**
|
|
158
211
|
|
|
159
|
-
|
|
212
|
+
| 事件名 | 触发时机 |
|
|
213
|
+
|--------|----------|
|
|
214
|
+
| `onComplete` | 整个页面加载渲染完成 |
|
|
215
|
+
| `onRemove` | 模块被移除 |
|
|
216
|
+
| `snack-event` | 组件内部事件(onChange、onBlur 等)分发 |
|
|
160
217
|
|
|
161
|
-
|
|
218
|
+
---
|
|
162
219
|
|
|
163
|
-
|
|
220
|
+
### 国际化
|
|
164
221
|
|
|
165
|
-
|
|
222
|
+
```ts
|
|
223
|
+
// SDK 级别
|
|
224
|
+
sdk.intl('required'); // 返回 string | ReactNode
|
|
225
|
+
sdk.setI18n({ zh: { required: '此字段必填' } });
|
|
226
|
+
sdk.language('en-US'); // 切换所有已加载模块的语言
|
|
227
|
+
|
|
228
|
+
// 模块内(Snack 基础类)
|
|
229
|
+
this.$intl({ id: 'required' });
|
|
230
|
+
this.$intl('required', { label: '用户名' });
|
|
231
|
+
this.$lang; // 获取当前语言
|
|
232
|
+
this.$lang = 'en-US'; // 设置语言
|
|
233
|
+
```
|
|
166
234
|
|
|
167
|
-
|
|
235
|
+
---
|
|
168
236
|
|
|
169
|
-
|
|
237
|
+
## 基础类
|
|
170
238
|
|
|
171
|
-
|
|
239
|
+
### `Snack<T>`
|
|
172
240
|
|
|
173
|
-
|
|
241
|
+
所有 Snack 模块的基础类,继承此类实现自定义模块。
|
|
174
242
|
|
|
175
|
-
|
|
243
|
+
```ts
|
|
244
|
+
import { Snack, SnackData } from '@snack-kit/core';
|
|
176
245
|
|
|
177
|
-
|
|
246
|
+
interface MyData extends SnackData {
|
|
247
|
+
value: string;
|
|
248
|
+
label: { zh: string; en: string };
|
|
249
|
+
}
|
|
178
250
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
* @param str
|
|
184
|
-
* @param params
|
|
185
|
-
*/
|
|
186
|
-
export function replaceStrTemplateVars(str: string, vars?: any) {
|
|
187
|
-
if (!vars) return str;
|
|
188
|
-
let jsx: boolean = false; // 当替换的vars变量内存在jsx对象,则返回也是jsx数据,否则返回字符串
|
|
189
|
-
str = str.replace(/\"/g, '\\"');
|
|
190
|
-
const strTemplate = str.replace(/\{(.*?)\}/ig, (s, v) => {
|
|
191
|
-
if (typeof vars[v] === 'object') jsx = true;
|
|
192
|
-
return `",vars.${v},"`;
|
|
193
|
-
});
|
|
194
|
-
if (jsx)
|
|
195
|
-
return new Function('vars', `return ["${strTemplate}"];`)(vars)
|
|
196
|
-
.map((item: any) => <React.Fragment key={Math.random()}>{item}</React.Fragment>);
|
|
197
|
-
else
|
|
198
|
-
return new Function('vars', `return ["${strTemplate}"].join('');`)(vars);
|
|
251
|
+
export class MyModule extends Snack<MyData> {
|
|
252
|
+
public $component(data?: MyData) {
|
|
253
|
+
return <div>{data?.value}</div>;
|
|
254
|
+
}
|
|
199
255
|
}
|
|
200
256
|
```
|
|
201
257
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
SDK Form组件事件onChange、onBlur触发的表单校验,增加了500ms的限流;
|
|
226
|
-
|
|
227
|
-
# 2.2.2
|
|
258
|
+
**常用属性与方法**
|
|
259
|
+
|
|
260
|
+
| 成员 | 说明 |
|
|
261
|
+
|------|------|
|
|
262
|
+
| `data` | 模块数据对象 |
|
|
263
|
+
| `sdk` | 所属 SDK 实例 |
|
|
264
|
+
| `$id` | 模块唯一实例 ID |
|
|
265
|
+
| `$name` | 模块名称 |
|
|
266
|
+
| `$parent` | 父级 Snack 实例(通常为 Drag 容器) |
|
|
267
|
+
| `$page` | 所属页面事件对象 |
|
|
268
|
+
| `$forceUpdate(reload?)` | 强制重绘 |
|
|
269
|
+
| `$style(key?, value?)` | 读写样式并触发重绘 |
|
|
270
|
+
| `$display(visible)` | 显示 / 隐藏当前组件 |
|
|
271
|
+
| `$intl(ops, params?)` | 获取国际化文本 |
|
|
272
|
+
| `$language(lang)` | 切换语言 |
|
|
273
|
+
| `$destroy()` | 销毁模块,从 SDK moduleMaps 中移除 |
|
|
274
|
+
| `FC(data)` | React 渲染入口,由 SDK 调用 |
|
|
275
|
+
| `$component(data?)` | 子类重写此方法实现 UI |
|
|
276
|
+
|
|
277
|
+
### `SnackSetting`
|
|
278
|
+
|
|
279
|
+
设置面板模块的基础类,通过 `$setData` 同步修改关联主模块(`main`)的数据。
|
|
228
280
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
passwordFlag: false
|
|
244
|
-
},
|
|
245
|
-
i18n: {
|
|
246
|
-
zh: {
|
|
247
|
-
require: '{label}xxxxxxseee{label}',
|
|
248
|
-
noErrorMsg: ''
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
方式2:
|
|
253
|
-
sdk.setI18n({
|
|
254
|
-
zh: {
|
|
255
|
-
require: '{label}xxxxxxseee{label}',
|
|
256
|
-
noErrorMsg: ''
|
|
257
|
-
}
|
|
258
|
-
});
|
|
259
|
-
Snack基础类提供的国际化现在也支持字符串模版,{id:'key'},{label:'text'} i18nStrTemplate:key: 'xxx${label}xxx';
|
|
260
|
-
|
|
261
|
-
# 2.2.0
|
|
262
|
-
|
|
263
|
-
externals: {
|
|
264
|
-
'@paraview/lib': '@paraview/lib',
|
|
265
|
-
'@paraview/lib/http': '@paraview/lib',
|
|
266
|
-
'@paraview/lib/esso': '@paraview/lib',
|
|
267
|
-
'@paraview/lib/ui': '@paraview/lib',
|
|
268
|
-
'@paraview/lib/utils': '@paraview/lib'
|
|
269
|
-
},
|
|
281
|
+
```ts
|
|
282
|
+
import { SnackSetting } from '@snack-kit/core';
|
|
283
|
+
|
|
284
|
+
export class MyModuleSetting extends SnackSetting {
|
|
285
|
+
public $component() {
|
|
286
|
+
return (
|
|
287
|
+
<input
|
|
288
|
+
value={String(this.main.data?.value ?? '')}
|
|
289
|
+
onChange={(e) => this.$setData('value', e.target.value)}
|
|
290
|
+
/>
|
|
291
|
+
);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
```
|
|
270
295
|
|
|
271
|
-
|
|
296
|
+
---
|
|
272
297
|
|
|
273
|
-
|
|
298
|
+
## 表达式系统
|
|
274
299
|
|
|
275
|
-
|
|
300
|
+
页面 JSON 配置中支持 `{{$.xxx}}` 占位符,在运行时由 SDK 自动替换:
|
|
276
301
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
302
|
+
```json
|
|
303
|
+
{
|
|
304
|
+
"data": {
|
|
305
|
+
"M": {
|
|
306
|
+
"label": "{{$.argv.username}}"
|
|
282
307
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
修复vue sanck模块在切换调试页面路由时会报错的问题;
|
|
288
|
-
|
|
289
|
-
# 2.0.0
|
|
290
|
-
|
|
291
|
-
移除para-lib,更换为@paraview/lib
|
|
292
|
-
|
|
293
|
-
# 1.7.2
|
|
294
|
-
|
|
295
|
-
新增SnackFormAttribute.hideNoSubmit,当组件被隐藏时不提交与校验该组件所绑定的字段;
|
|
296
|
-
|
|
297
|
-
# 1.7.1
|
|
298
|
-
|
|
299
|
-
修复sdk方法createPageComponent、createModuleComponent返回值类型定义;
|
|
300
|
-
SnackSetting基础类新增public $normal: boolean = false;定义
|
|
301
|
-
|
|
302
|
-
# 1.7.0
|
|
303
|
-
|
|
304
|
-
SDK新增createModuleForElement、createPageForElement方法,可以直接渲染snack模块与页面至dom元素内;
|
|
305
|
-
|
|
306
|
-
# 1.6.17
|
|
307
|
-
|
|
308
|
-
sdk新增参数defaultFormAttr,sanck组件FormAttr全局默认值配置,当组件内部缺少参数时,采用该定义数值;
|
|
309
|
-
Snack表单组件SnackFormAttribute新增passwordFlag描述字段(默认启用),密码字段标记,
|
|
310
|
-
为true时则将会在当前表单getData数据组装时候增加 @password: [f...] 字段对当前字段进行描述
|
|
311
|
-
|
|
312
|
-
# 1.6.16
|
|
313
|
-
|
|
314
|
-
新增内部事件onCreate初始化事件
|
|
315
|
-
|
|
316
|
-
# 1.6.15
|
|
317
|
-
|
|
318
|
-
新增页面销毁方法:
|
|
319
|
-
通过sdk方式: sdk.destroy(event: SnackPageCompleteEvent | null, root: DropOjb | null);
|
|
320
|
-
通过页面事件对象: (event as SnackPageCompleteEvent).destroy();
|
|
321
|
-
|
|
322
|
-
# 1.6.14
|
|
323
|
-
|
|
324
|
-
修复data入参数据会被基础类构造函数意外过滤的问题,解决国际化数据丢失的问题;
|
|
325
|
-
|
|
326
|
-
# 1.6.13
|
|
327
|
-
|
|
328
|
-
修复渲染表单组时,表单存在空内容时,将不会触发完成事件的问题;
|
|
329
|
-
|
|
330
|
-
# 1.6.12
|
|
331
|
-
|
|
332
|
-
修复自定义校验脚本,返参错误的问题;
|
|
333
|
-
|
|
334
|
-
# 1.6.11
|
|
335
|
-
|
|
336
|
-
修复sdk自定义入参脚本,可能造成对象丢失的错误;
|
|
337
|
-
|
|
338
|
-
# 1.6.10
|
|
339
|
-
|
|
340
|
-
调整Loading,Error组件样式;
|
|
341
|
-
|
|
342
|
-
# 1.6.9
|
|
343
|
-
|
|
344
|
-
自定义脚本新增可用变量:
|
|
345
|
-
$key 当前组件的唯一key值
|
|
346
|
-
$field 当前表单绑定的字段名
|
|
347
|
-
$verify 校验方法 (key?: string) => Promise<boolean>
|
|
348
|
-
调整$val方法,当设置值时现在会自动触发校验;
|
|
349
|
-
|
|
350
|
-
# 1.6.8
|
|
351
|
-
|
|
352
|
-
SnackForm getData方法新增密码字段清单逻辑,表单内密码输入框的字段最终getData返回时将会额外增加一个@password: ['密文组件字段',...]
|
|
353
|
-
|
|
354
|
-
# 1.6.7
|
|
355
|
-
|
|
356
|
-
SnackSDK接口SnackFormAttribute新增trimValue参数,当为false时不针对表单字段value为string的值进行trim,默认进行trim;
|
|
357
|
-
|
|
358
|
-
# 1.6.6
|
|
359
|
-
|
|
360
|
-
修复SnackForm校验规则在value为空也会进行校验的错误;
|
|
361
|
-
|
|
362
|
-
# 1.6.5
|
|
363
|
-
|
|
364
|
-
修复SnackForm不提交字段未正确过滤的错误;
|
|
365
|
-
|
|
366
|
-
# 1.6.4
|
|
367
|
-
|
|
368
|
-
新增SnackForm表单字段校验将会在onChange与onBlur时触发;
|
|
369
|
-
|
|
370
|
-
# 1.6.3
|
|
371
|
-
|
|
372
|
-
修复SnackFrom入参为空对象时会出错的问题;
|
|
373
|
-
调整Snack 构造函数入参data默认值;
|
|
374
|
-
|
|
375
|
-
# 1.6.1
|
|
376
|
-
|
|
377
|
-
修复SnackForm数据回填时带有 . 对象访问符的字段无法正确回填的错误;
|
|
378
|
-
|
|
379
|
-
# 1.6.0
|
|
380
|
-
|
|
381
|
-
Snack基础类构造函数,第二位参数现在为data默认值;
|
|
382
|
-
|
|
383
|
-
# 1.5.3
|
|
384
|
-
|
|
385
|
-
新增SnackEvent接口;
|
|
386
|
-
Snack基础类新增变量$parent定义;
|
|
387
|
-
Snack基础类移除,parent第二位参数与相关逻辑;
|
|
388
|
-
新增snack-event内置组件事件监听;
|
|
389
|
-
|
|
390
|
-
# 1.5.1
|
|
391
|
-
|
|
392
|
-
调整基础类目录结构;
|
|
393
|
-
Snack表单绑定字段支持 . 作为对象结构表达式,getData将解析为对象结构;
|
|
394
|
-
|
|
395
|
-
# 1.5.0
|
|
396
|
-
|
|
397
|
-
打包增加IE支持
|
|
398
|
-
|
|
399
|
-
# 1.4.11
|
|
400
|
-
|
|
401
|
-
表单自定义脚本$val、$display方法当前会优先从表单绑定字段获取,其次从data.key进行匹配;
|
|
402
|
-
表单自定义脚本新增变量$children当前页面所有子元素键值对;
|
|
403
|
-
修复表单setData方法失效的问题;
|
|
404
|
-
|
|
405
|
-
# 1.4.10
|
|
406
|
-
|
|
407
|
-
修复资源路径在运行时无法加载的问题;
|
|
408
|
-
修复页面基础样式无法正确渲染的错误;
|
|
409
|
-
新增自定义脚本变量定义导出;
|
|
410
|
-
|
|
411
|
-
# 1.4.8
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
```
|
|
412
311
|
|
|
413
|
-
|
|
312
|
+
**可用变量**
|
|
414
313
|
|
|
415
|
-
|
|
314
|
+
| 变量 | 说明 |
|
|
315
|
+
|------|------|
|
|
316
|
+
| `$.argv` | SDK 构造时传入的 `argv` 全局变量 |
|
|
317
|
+
| `$.data` | 当前组件的 data 对象 |
|
|
318
|
+
| `$.sdk` | SDK 实例 |
|
|
416
319
|
|
|
417
|
-
|
|
320
|
+
---
|
|
418
321
|
|
|
419
|
-
|
|
322
|
+
## 模块打包(UMD 格式)
|
|
420
323
|
|
|
421
|
-
|
|
324
|
+
Snack 模块需打包为 UMD 格式并通过 `snackdefine` 注册(由 `scripts/config/webpack.snack.config.js` 提供):
|
|
422
325
|
|
|
423
|
-
|
|
326
|
+
```js
|
|
327
|
+
// webpack.snack.config.js 关键配置
|
|
328
|
+
output: {
|
|
329
|
+
filename: 'index.js',
|
|
330
|
+
library: { type: 'umd' }
|
|
331
|
+
},
|
|
332
|
+
externals: {
|
|
333
|
+
'react': 'react',
|
|
334
|
+
'@snack-kit/lib': '@snack-kit/lib'
|
|
335
|
+
}
|
|
336
|
+
```
|
|
424
337
|
|
|
425
|
-
|
|
338
|
+
打包产物头部会自动注入:
|
|
426
339
|
|
|
427
|
-
```
|
|
428
|
-
|
|
429
|
-
|
|
340
|
+
```js
|
|
341
|
+
if (typeof window !== 'undefined' && window.snackdefine) {
|
|
342
|
+
var define = window.snackdefine;
|
|
343
|
+
}
|
|
430
344
|
```
|
|
431
345
|
|
|
432
|
-
|
|
346
|
+
---
|
|
433
347
|
|
|
434
|
-
|
|
348
|
+
## 开发
|
|
435
349
|
|
|
436
|
-
|
|
437
|
-
|
|
350
|
+
```bash
|
|
351
|
+
# 本地开发调试(webpack-dev-server)
|
|
352
|
+
npm run dev
|
|
438
353
|
|
|
439
|
-
#
|
|
354
|
+
# 构建库(ESM + CJS + Types)
|
|
355
|
+
npm run build
|
|
440
356
|
|
|
441
|
-
|
|
357
|
+
# 运行单元测试
|
|
358
|
+
npm test
|
|
442
359
|
|
|
443
|
-
#
|
|
360
|
+
# 类型检查
|
|
361
|
+
npm run lint
|
|
444
362
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
```js
|
|
448
|
-
// 注册onClick事件
|
|
449
|
-
sdk.addEvent('onClick', (arg1, arg2) => {});
|
|
450
|
-
// 卸载所有onClick事件
|
|
451
|
-
sdk.removeEvent('onClick');
|
|
452
|
-
// 指定卸载onClick事件
|
|
453
|
-
sdk.removeEvent('onClick', (arg1, arg2) => {});
|
|
454
|
-
// 发送事件 [事件的参数]
|
|
455
|
-
sdk.sendEvent('onClick', [arg1, arg2]);
|
|
363
|
+
# 生成 API 文档
|
|
364
|
+
npm run docs
|
|
456
365
|
```
|
|
457
366
|
|
|
458
|
-
|
|
459
|
-
优化基础类与SDK部分接口的定义;
|
|
460
|
-
|
|
461
|
-
# 1.3.8
|
|
462
|
-
|
|
463
|
-
修复snack基础类被意外回滚的代码
|
|
464
|
-
|
|
465
|
-
# 1.3.7
|
|
367
|
+
---
|
|
466
368
|
|
|
467
|
-
|
|
369
|
+
## Changelog
|
|
468
370
|
|
|
469
|
-
|
|
371
|
+
### 0.2.0
|
|
470
372
|
|
|
471
|
-
|
|
472
|
-
修复Snack构造函数第一个参数类型在ts类型在会报错的问题;
|
|
373
|
+
**新增**
|
|
473
374
|
|
|
474
|
-
|
|
375
|
+
- 新增 `src/utils/reactAdapter.ts`:`createReactRoot` / `SnackReactRoot` 运行时兼容层,支持 React 17 / 18 / 19 三版本并存
|
|
376
|
+
- React 18+:使用 `createRoot`(react-dom/client)
|
|
377
|
+
- React 17:回退至旧版 `ReactDOM.render` / `unmountComponentAtNode`
|
|
378
|
+
- 通过变量形式 require,绕过 webpack 静态分析,避免 React 17 宿主环境因 `react-dom/client` 不存在报 "Module not found"
|
|
379
|
+
- 导出 `createReactRoot` 与 `SnackReactRoot` 供外部使用
|
|
475
380
|
|
|
476
|
-
|
|
381
|
+
**依赖调整**
|
|
477
382
|
|
|
478
|
-
|
|
383
|
+
- `react` / `react-dom` 由 `dependencies` 移至 `peerDependencies`,支持版本范围 `>=17.0.0`,宿主项目可自行管理 React 版本
|
|
479
384
|
|
|
480
|
-
|
|
385
|
+
---
|
|
481
386
|
|
|
482
|
-
|
|
387
|
+
### 0.1.0
|
|
483
388
|
|
|
484
|
-
|
|
485
|
-
createModule 创建snack模块
|
|
486
|
-
createPageComponent 创建Snack页面的React组件
|
|
487
|
-
createModuleComponent 创建Snack模块的React组件
|
|
389
|
+
**破坏性变更**
|
|
488
390
|
|
|
489
|
-
|
|
391
|
+
- 移除 Vue 2.0 支持(删除 `SnackVue`、`SnackVueSetting` 及相关导出)
|
|
392
|
+
- 依赖由 `@paraview/lib` 迁移至 `@snack-kit/lib`(`@paraview/lib` 作为 importMaps 别名保持向后兼容)
|
|
393
|
+
- 构建工具由 webpack 迁移至 tsup,产物格式调整为 ESM + CJS + Types
|
|
490
394
|
|
|
491
|
-
|
|
395
|
+
**安全修复**
|
|
492
396
|
|
|
493
|
-
|
|
397
|
+
- 移除所有 `new Function` 动态字段访问,改用 `safeGet` / `safeSet` 路径工具(消除代码注入风险)
|
|
398
|
+
- `window.define` 全局污染修复:改用 `window.snackdefine`,不再覆盖标准 AMD `define`
|
|
494
399
|
|
|
495
|
-
|
|
400
|
+
**Bug 修复**
|
|
496
401
|
|
|
497
|
-
|
|
402
|
+
- 修复 `$defaultDisplay(false)` 逻辑反转问题,调用后组件现可正确隐藏
|
|
403
|
+
- 修复模块渲染失败时 `childCount` 未递减,导致 `onComplete` 永不触发的问题
|
|
404
|
+
- 修复渲染错误日志缺少模块 key 信息,现输出 `key` / `field` 辅助定位
|
|
498
405
|
|
|
499
|
-
|
|
500
|
-
Core新增runtime模式相关参数
|
|
406
|
+
**新增**
|
|
501
407
|
|
|
502
|
-
|
|
408
|
+
- 新增 `src/utils/pathAccess.ts`:`safeGet` / `safeSet` 支持 `.` 与 `[]` 混合路径语法
|
|
409
|
+
- 并发加载去重:同一 URL 的模块并发请求只发出一次网络请求
|
|
410
|
+
- `destroy()` 方法现会清理所有待处理的 `verifyTimeout` 防抖计时器,防止内存泄漏
|
|
411
|
+
- 新增 vitest 单元测试(`tests/utils/pathAccess.test.ts`)
|
|
412
|
+
- 新增 typedoc 支持,`npm run docs` 生成 API 文档
|
|
503
413
|
|
|
504
|
-
|
|
505
|
-
调整SnackVue继承于Snack类,移除重复代码
|
|
414
|
+
**类型系统**
|
|
506
415
|
|
|
507
|
-
|
|
416
|
+
- 全局类型安全审查,大幅减少 `any` 使用
|
|
417
|
+
- 新增导出类型:`SnackRequireFunction`、`SnackDefineFunction`、`SnackSettingModelItem`、`ExprArgv`
|
|
418
|
+
- 支持 React 19
|
|
508
419
|
|
|
509
|
-
|
|
510
|
-
新增接口SnackFormAttribute
|
|
420
|
+
---
|
|
511
421
|
|
|
512
|
-
|
|
422
|
+
## License
|
|
513
423
|
|
|
514
|
-
|
|
424
|
+
ISC
|