@knotx/utils 0.4.12 → 0.4.13

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 (3) hide show
  1. package/README.en.md +346 -0
  2. package/README.md +346 -0
  3. package/package.json +5 -5
package/README.en.md ADDED
@@ -0,0 +1,346 @@
1
+ # @knotx/utils
2
+
3
+ A utility library for Knotx, providing a collection of useful utility functions including BEM naming conventions, ID generation, data operation handling, and symbol utilities.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @knotx/utils
9
+ ```
10
+
11
+ ```bash
12
+ yarn add @knotx/utils
13
+ ```
14
+
15
+ ```bash
16
+ pnpm add @knotx/utils
17
+ ```
18
+
19
+ ## Overview
20
+
21
+ `@knotx/utils` is a core utility library in the Knotx ecosystem, providing the following main features:
22
+
23
+ - **BEM Naming Convention Tools**: Helps generate CSS class names that follow BEM specifications
24
+ - **ID Generation Tools**: Generate unique identifiers
25
+ - **Data Operation Tools**: Provide utility functions for data operation handling
26
+ - **Symbol Tools**: Create and manage symbol identifiers
27
+
28
+ ## API Documentation
29
+
30
+ ### BEM Utility Functions
31
+
32
+ #### `bem(block, element?, modifier?, prefix?)`
33
+
34
+ Generates CSS class names according to BEM naming conventions.
35
+
36
+ **Parameters:**
37
+ - `block` (string): Block name
38
+ - `element` (string, optional): Element name
39
+ - `modifier` (string, optional): Modifier name
40
+ - `prefix` (string, optional): Prefix, defaults to `'knotx-'`
41
+
42
+ **Returns:**
43
+ - `string`: Generated CSS class name
44
+
45
+ **Examples:**
46
+
47
+ ```javascript
48
+ import { bem } from '@knotx/utils'
49
+
50
+ // Basic block
51
+ bem('button')
52
+ // Output: 'knotx-button'
53
+
54
+ // Block + Element
55
+ bem('button', 'text')
56
+ // Output: 'knotx-button__text'
57
+
58
+ // Block + Modifier
59
+ bem('button', undefined, 'primary')
60
+ // Output: 'knotx-button--primary'
61
+
62
+ // Block + Element + Modifier
63
+ bem('button', 'text', 'large')
64
+ // Output: 'knotx-button__text--large'
65
+
66
+ // Custom prefix
67
+ bem('button', undefined, 'primary', 'my-')
68
+ // Output: 'my-button--primary'
69
+ ```
70
+
71
+ #### `addBemModifier(className, modifier)`
72
+
73
+ Adds a modifier to an existing CSS class name.
74
+
75
+ **Parameters:**
76
+ - `className` (string): Existing class name
77
+ - `modifier` (string): Modifier to add
78
+
79
+ **Returns:**
80
+ - `string`: Class name with modifier added
81
+
82
+ **Examples:**
83
+
84
+ ```javascript
85
+ import { addBemModifier } from '@knotx/utils'
86
+
87
+ // Add modifier to class name
88
+ addBemModifier('knotx-button', 'primary')
89
+ // Output: 'knotx-button--primary'
90
+
91
+ addBemModifier('knotx-button__text', 'large')
92
+ // Output: 'knotx-button__text--large'
93
+ ```
94
+
95
+ ### ID Generation Tools
96
+
97
+ #### `generateId()`
98
+
99
+ Generates a unique random ID string.
100
+
101
+ **Returns:**
102
+ - `string`: Generated unique ID
103
+
104
+ **Examples:**
105
+
106
+ ```javascript
107
+ import { generateId } from '@knotx/utils'
108
+
109
+ // Generate unique ID
110
+ const id1 = generateId()
111
+ // Output: 'k7j2m5n8p1r3t6'
112
+
113
+ const id2 = generateId()
114
+ // Output: 'x9z4v2b7m1k5q8'
115
+
116
+ // Each call generates a different ID
117
+ console.log(id1 === id2) // false
118
+ ```
119
+
120
+ ### Data Operation Tools
121
+
122
+ #### `isInitOperation(operation)`
123
+
124
+ Checks if an operation is an initialization batch operation.
125
+
126
+ **Parameters:**
127
+ - `operation` (DataOperation<T>): Data operation to check
128
+
129
+ **Returns:**
130
+ - `boolean`: Returns true if it's an initialization operation
131
+
132
+ **Examples:**
133
+
134
+ ```javascript
135
+ import { isInitOperation } from '@knotx/utils'
136
+
137
+ const initOp = { type: 'batch', operations: [], isInit: true }
138
+ const normalOp = { type: 'add', data: { id: '1' } }
139
+
140
+ isInitOperation(initOp) // true
141
+ isInitOperation(normalOp) // false
142
+ ```
143
+
144
+ #### `isDraftOperation(operation)`
145
+
146
+ Checks if an operation is a draft operation.
147
+
148
+ **Parameters:**
149
+ - `operation` (DataOperation<T>): Data operation to check
150
+
151
+ **Returns:**
152
+ - `boolean`: Returns true if it's a draft operation
153
+
154
+ **Examples:**
155
+
156
+ ```javascript
157
+ import { isDraftOperation } from '@knotx/utils'
158
+
159
+ const draftOp = { type: 'draftOperation', draftId: 'draft1', operation: { type: 'add', data: { id: '1' } } }
160
+ const normalOp = { type: 'add', data: { id: '1' } }
161
+
162
+ isDraftOperation(draftOp) // true
163
+ isDraftOperation(normalOp) // false
164
+ ```
165
+
166
+ #### `isEmptyBatchOperation(operation)`
167
+
168
+ Checks if a batch operation is empty.
169
+
170
+ **Parameters:**
171
+ - `operation` (DataOperation<T>): Data operation to check
172
+
173
+ **Returns:**
174
+ - `boolean`: Returns true if it's an empty batch operation
175
+
176
+ **Examples:**
177
+
178
+ ```javascript
179
+ import { isEmptyBatchOperation } from '@knotx/utils'
180
+
181
+ const emptyBatch = { type: 'batch', operations: [] }
182
+ const nonEmptyBatch = { type: 'batch', operations: [{ type: 'add', data: { id: '1' } }] }
183
+
184
+ isEmptyBatchOperation(emptyBatch) // true
185
+ isEmptyBatchOperation(nonEmptyBatch) // false
186
+ ```
187
+
188
+ #### `flattenOperations(operations)`
189
+
190
+ Flattens nested batch operations into a single-level array of operations.
191
+
192
+ **Parameters:**
193
+ - `operations` (DataOperation<T>[]): Array of operations to flatten
194
+
195
+ **Returns:**
196
+ - `DataOperation<T>[]`: Flattened array of operations
197
+
198
+ **Examples:**
199
+
200
+ ```javascript
201
+ import { flattenOperations } from '@knotx/utils'
202
+
203
+ const nestedOps = [
204
+ { type: 'add', data: { id: '1' } },
205
+ {
206
+ type: 'batch',
207
+ operations: [
208
+ { type: 'add', data: { id: '2' } },
209
+ { type: 'remove', id: '3' }
210
+ ]
211
+ }
212
+ ]
213
+
214
+ const flatOps = flattenOperations(nestedOps)
215
+ // Output: [
216
+ // { type: 'add', data: { id: '1' } },
217
+ // { type: 'add', data: { id: '2' } },
218
+ // { type: 'remove', id: '3' }
219
+ // ]
220
+ ```
221
+
222
+ #### `emptyOperation()`
223
+
224
+ Creates an empty batch operation.
225
+
226
+ **Returns:**
227
+ - `DataEmptyBatchOperation<T>`: Empty batch operation
228
+
229
+ **Examples:**
230
+
231
+ ```javascript
232
+ import { emptyOperation } from '@knotx/utils'
233
+
234
+ const empty = emptyOperation()
235
+ // Output: { type: 'batch', operations: [] }
236
+ ```
237
+
238
+ #### `buildDiffOperation(previousDataMap, dataMap, compare?)`
239
+
240
+ Builds a diff operation between two data maps.
241
+
242
+ **Parameters:**
243
+ - `previousDataMap` (Map<string, T>): Previous data map
244
+ - `dataMap` (Map<string, T>): Current data map
245
+ - `compare` (function, optional): Comparison function, defaults to `Object.is`
246
+
247
+ **Returns:**
248
+ - `DataBatchOperation<T>`: Batch operation containing diff operations
249
+
250
+ **Examples:**
251
+
252
+ ```javascript
253
+ import { buildDiffOperation } from '@knotx/utils'
254
+
255
+ const prevData = new Map([
256
+ ['1', { id: '1', name: 'Alice' }],
257
+ ['2', { id: '2', name: 'Bob' }]
258
+ ])
259
+
260
+ const currentData = new Map([
261
+ ['1', { id: '1', name: 'Alice Updated' }],
262
+ ['3', { id: '3', name: 'Charlie' }]
263
+ ])
264
+
265
+ const diffOp = buildDiffOperation(prevData, currentData)
266
+ // Output: {
267
+ // type: 'batch',
268
+ // operations: [
269
+ // { type: 'remove', id: '2' },
270
+ // { type: 'add', data: { id: '3', name: 'Charlie' } },
271
+ // { type: 'update', id: '1', data: { id: '1', name: 'Alice Updated' } }
272
+ // ],
273
+ // isInit: false
274
+ // }
275
+ ```
276
+
277
+ ### Symbol Tools
278
+
279
+ #### `getSymbol(name)`
280
+
281
+ Gets or creates a symbol with a name identifier.
282
+
283
+ **Parameters:**
284
+ - `name` (string): Symbol name
285
+
286
+ **Returns:**
287
+ - `symbol`: Symbol with name identifier
288
+
289
+ **Examples:**
290
+
291
+ ```javascript
292
+ import { getSymbol } from '@knotx/utils'
293
+
294
+ // Get symbol
295
+ const sym1 = getSymbol('mySymbol')
296
+ const sym2 = getSymbol('mySymbol')
297
+
298
+ console.log(sym1 === sym2) // true - same name returns same symbol
299
+ console.log(sym1.toString()) // 'Symbol(knotx:mySymbol)'
300
+
301
+ // Different names return different symbols
302
+ const sym3 = getSymbol('anotherSymbol')
303
+ console.log(sym1 === sym3) // false
304
+ ```
305
+
306
+ ## Project Structure
307
+
308
+ ```
309
+ packages/utils/
310
+ ├── src/
311
+ │ ├── index.ts # Main entry file, exports all utility functions
312
+ │ ├── bem.ts # BEM naming convention tools
313
+ │ ├── id.ts # ID generation tools
314
+ │ ├── operation.ts # Data operation tools
315
+ │ └── symbol.ts # Symbol tools
316
+ ├── dist/ # Build output directory
317
+ ├── package.json # Package configuration
318
+ ├── tsconfig.json # TypeScript configuration
319
+ ├── build.config.ts # Build configuration
320
+ └── README.en.md # English documentation
321
+ ```
322
+
323
+ ## Type Definitions
324
+
325
+ This package provides complete TypeScript type definitions, including:
326
+
327
+ - `DataInitBatchOperation<T>`: Initialization batch operation type
328
+ - `DataEmptyBatchOperation<T>`: Empty batch operation type
329
+ - All function parameter and return value types
330
+
331
+ ## Dependencies
332
+
333
+ - `@knotx/data`: Data operation related type definitions
334
+
335
+ ## License
336
+
337
+ MIT
338
+
339
+ ## Contributing
340
+
341
+ Issues and Pull Requests are welcome to improve this package.
342
+
343
+ ## More Information
344
+
345
+ - [GitHub Repository](https://github.com/boenfu/knotx)
346
+ - [Official Website](https://github.com/boenfu/knotx#readme)
package/README.md ADDED
@@ -0,0 +1,346 @@
1
+ # @knotx/utils
2
+
3
+ Knotx 工具函数库,提供一系列实用工具函数,包括 BEM 命名约定、ID 生成、数据操作处理以及符号工具等。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install @knotx/utils
9
+ ```
10
+
11
+ ```bash
12
+ yarn add @knotx/utils
13
+ ```
14
+
15
+ ```bash
16
+ pnpm add @knotx/utils
17
+ ```
18
+
19
+ ## 概述
20
+
21
+ `@knotx/utils` 是 Knotx 生态系统中的核心工具函数库,提供了以下主要功能:
22
+
23
+ - **BEM 命名约定工具**:帮助生成符合 BEM 规范的 CSS 类名
24
+ - **ID 生成工具**:生成唯一标识符
25
+ - **数据操作工具**:提供数据操作相关的工具函数
26
+ - **符号工具**:创建和管理符号标识符
27
+
28
+ ## API 文档
29
+
30
+ ### BEM 工具函数
31
+
32
+ #### `bem(block, element?, modifier?, prefix?)`
33
+
34
+ 根据 BEM 命名约定生成 CSS 类名。
35
+
36
+ **参数:**
37
+ - `block` (string): 块名
38
+ - `element` (string, 可选): 元素名
39
+ - `modifier` (string, 可选): 修饰符名
40
+ - `prefix` (string, 可选): 前缀,默认为 `'knotx-'`
41
+
42
+ **返回值:**
43
+ - `string`: 生成的 CSS 类名
44
+
45
+ **示例:**
46
+
47
+ ```javascript
48
+ import { bem } from '@knotx/utils'
49
+
50
+ // 基础块
51
+ bem('button')
52
+ // 输出: 'knotx-button'
53
+
54
+ // 块 + 元素
55
+ bem('button', 'text')
56
+ // 输出: 'knotx-button__text'
57
+
58
+ // 块 + 修饰符
59
+ bem('button', undefined, 'primary')
60
+ // 输出: 'knotx-button--primary'
61
+
62
+ // 块 + 元素 + 修饰符
63
+ bem('button', 'text', 'large')
64
+ // 输出: 'knotx-button__text--large'
65
+
66
+ // 自定义前缀
67
+ bem('button', undefined, 'primary', 'my-')
68
+ // 输出: 'my-button--primary'
69
+ ```
70
+
71
+ #### `addBemModifier(className, modifier)`
72
+
73
+ 为已有的 CSS 类名添加修饰符。
74
+
75
+ **参数:**
76
+ - `className` (string): 现有的类名
77
+ - `modifier` (string): 要添加的修饰符
78
+
79
+ **返回值:**
80
+ - `string`: 添加修饰符后的类名
81
+
82
+ **示例:**
83
+
84
+ ```javascript
85
+ import { addBemModifier } from '@knotx/utils'
86
+
87
+ // 为类名添加修饰符
88
+ addBemModifier('knotx-button', 'primary')
89
+ // 输出: 'knotx-button--primary'
90
+
91
+ addBemModifier('knotx-button__text', 'large')
92
+ // 输出: 'knotx-button__text--large'
93
+ ```
94
+
95
+ ### ID 生成工具
96
+
97
+ #### `generateId()`
98
+
99
+ 生成唯一的随机 ID 字符串。
100
+
101
+ **返回值:**
102
+ - `string`: 生成的唯一 ID
103
+
104
+ **示例:**
105
+
106
+ ```javascript
107
+ import { generateId } from '@knotx/utils'
108
+
109
+ // 生成唯一 ID
110
+ const id1 = generateId()
111
+ // 输出: 'k7j2m5n8p1r3t6'
112
+
113
+ const id2 = generateId()
114
+ // 输出: 'x9z4v2b7m1k5q8'
115
+
116
+ // 每次调用都会生成不同的 ID
117
+ console.log(id1 === id2) // false
118
+ ```
119
+
120
+ ### 数据操作工具
121
+
122
+ #### `isInitOperation(operation)`
123
+
124
+ 检查操作是否为初始化批处理操作。
125
+
126
+ **参数:**
127
+ - `operation` (DataOperation<T>): 要检查的数据操作
128
+
129
+ **返回值:**
130
+ - `boolean`: 如果是初始化操作则返回 true
131
+
132
+ **示例:**
133
+
134
+ ```javascript
135
+ import { isInitOperation } from '@knotx/utils'
136
+
137
+ const initOp = { type: 'batch', operations: [], isInit: true }
138
+ const normalOp = { type: 'add', data: { id: '1' } }
139
+
140
+ isInitOperation(initOp) // true
141
+ isInitOperation(normalOp) // false
142
+ ```
143
+
144
+ #### `isDraftOperation(operation)`
145
+
146
+ 检查操作是否为草稿操作。
147
+
148
+ **参数:**
149
+ - `operation` (DataOperation<T>): 要检查的数据操作
150
+
151
+ **返回值:**
152
+ - `boolean`: 如果是草稿操作则返回 true
153
+
154
+ **示例:**
155
+
156
+ ```javascript
157
+ import { isDraftOperation } from '@knotx/utils'
158
+
159
+ const draftOp = { type: 'draftOperation', draftId: 'draft1', operation: { type: 'add', data: { id: '1' } } }
160
+ const normalOp = { type: 'add', data: { id: '1' } }
161
+
162
+ isDraftOperation(draftOp) // true
163
+ isDraftOperation(normalOp) // false
164
+ ```
165
+
166
+ #### `isEmptyBatchOperation(operation)`
167
+
168
+ 检查批处理操作是否为空。
169
+
170
+ **参数:**
171
+ - `operation` (DataOperation<T>): 要检查的数据操作
172
+
173
+ **返回值:**
174
+ - `boolean`: 如果是空批处理操作则返回 true
175
+
176
+ **示例:**
177
+
178
+ ```javascript
179
+ import { isEmptyBatchOperation } from '@knotx/utils'
180
+
181
+ const emptyBatch = { type: 'batch', operations: [] }
182
+ const nonEmptyBatch = { type: 'batch', operations: [{ type: 'add', data: { id: '1' } }] }
183
+
184
+ isEmptyBatchOperation(emptyBatch) // true
185
+ isEmptyBatchOperation(nonEmptyBatch) // false
186
+ ```
187
+
188
+ #### `flattenOperations(operations)`
189
+
190
+ 将嵌套的批处理操作展平为单级操作数组。
191
+
192
+ **参数:**
193
+ - `operations` (DataOperation<T>[]): 要展平的操作数组
194
+
195
+ **返回值:**
196
+ - `DataOperation<T>[]`: 展平后的操作数组
197
+
198
+ **示例:**
199
+
200
+ ```javascript
201
+ import { flattenOperations } from '@knotx/utils'
202
+
203
+ const nestedOps = [
204
+ { type: 'add', data: { id: '1' } },
205
+ {
206
+ type: 'batch',
207
+ operations: [
208
+ { type: 'add', data: { id: '2' } },
209
+ { type: 'remove', id: '3' }
210
+ ]
211
+ }
212
+ ]
213
+
214
+ const flatOps = flattenOperations(nestedOps)
215
+ // 输出: [
216
+ // { type: 'add', data: { id: '1' } },
217
+ // { type: 'add', data: { id: '2' } },
218
+ // { type: 'remove', id: '3' }
219
+ // ]
220
+ ```
221
+
222
+ #### `emptyOperation()`
223
+
224
+ 创建一个空的批处理操作。
225
+
226
+ **返回值:**
227
+ - `DataEmptyBatchOperation<T>`: 空的批处理操作
228
+
229
+ **示例:**
230
+
231
+ ```javascript
232
+ import { emptyOperation } from '@knotx/utils'
233
+
234
+ const empty = emptyOperation()
235
+ // 输出: { type: 'batch', operations: [] }
236
+ ```
237
+
238
+ #### `buildDiffOperation(previousDataMap, dataMap, compare?)`
239
+
240
+ 构建两个数据映射之间的差异操作。
241
+
242
+ **参数:**
243
+ - `previousDataMap` (Map<string, T>): 之前的数据映射
244
+ - `dataMap` (Map<string, T>): 当前的数据映射
245
+ - `compare` (function, 可选): 比较函数,默认为 `Object.is`
246
+
247
+ **返回值:**
248
+ - `DataBatchOperation<T>`: 包含差异操作的批处理操作
249
+
250
+ **示例:**
251
+
252
+ ```javascript
253
+ import { buildDiffOperation } from '@knotx/utils'
254
+
255
+ const prevData = new Map([
256
+ ['1', { id: '1', name: 'Alice' }],
257
+ ['2', { id: '2', name: 'Bob' }]
258
+ ])
259
+
260
+ const currentData = new Map([
261
+ ['1', { id: '1', name: 'Alice Updated' }],
262
+ ['3', { id: '3', name: 'Charlie' }]
263
+ ])
264
+
265
+ const diffOp = buildDiffOperation(prevData, currentData)
266
+ // 输出: {
267
+ // type: 'batch',
268
+ // operations: [
269
+ // { type: 'remove', id: '2' },
270
+ // { type: 'add', data: { id: '3', name: 'Charlie' } },
271
+ // { type: 'update', id: '1', data: { id: '1', name: 'Alice Updated' } }
272
+ // ],
273
+ // isInit: false
274
+ // }
275
+ ```
276
+
277
+ ### 符号工具
278
+
279
+ #### `getSymbol(name)`
280
+
281
+ 获取或创建一个带有名称标识的符号。
282
+
283
+ **参数:**
284
+ - `name` (string): 符号名称
285
+
286
+ **返回值:**
287
+ - `symbol`: 带有名称标识的符号
288
+
289
+ **示例:**
290
+
291
+ ```javascript
292
+ import { getSymbol } from '@knotx/utils'
293
+
294
+ // 获取符号
295
+ const sym1 = getSymbol('mySymbol')
296
+ const sym2 = getSymbol('mySymbol')
297
+
298
+ console.log(sym1 === sym2) // true - 相同名称返回相同符号
299
+ console.log(sym1.toString()) // 'Symbol(knotx:mySymbol)'
300
+
301
+ // 不同名称返回不同符号
302
+ const sym3 = getSymbol('anotherSymbol')
303
+ console.log(sym1 === sym3) // false
304
+ ```
305
+
306
+ ## 项目结构
307
+
308
+ ```
309
+ packages/utils/
310
+ ├── src/
311
+ │ ├── index.ts # 主入口文件,导出所有工具函数
312
+ │ ├── bem.ts # BEM 命名约定工具
313
+ │ ├── id.ts # ID 生成工具
314
+ │ ├── operation.ts # 数据操作工具
315
+ │ └── symbol.ts # 符号工具
316
+ ├── dist/ # 编译输出目录
317
+ ├── package.json # 包配置文件
318
+ ├── tsconfig.json # TypeScript 配置
319
+ ├── build.config.ts # 构建配置
320
+ └── README.md # 中文文档
321
+ ```
322
+
323
+ ## 类型定义
324
+
325
+ 本包提供了完整的 TypeScript 类型定义,包括:
326
+
327
+ - `DataInitBatchOperation<T>`: 初始化批处理操作类型
328
+ - `DataEmptyBatchOperation<T>`: 空批处理操作类型
329
+ - 以及所有函数的参数和返回值类型
330
+
331
+ ## 依赖
332
+
333
+ - `@knotx/data`: 数据操作相关类型定义
334
+
335
+ ## 许可证
336
+
337
+ MIT
338
+
339
+ ## 贡献
340
+
341
+ 欢迎提交 Issues 和 Pull Requests 来改进这个包。
342
+
343
+ ## 更多信息
344
+
345
+ - [GitHub 仓库](https://github.com/boenfu/knotx)
346
+ - [官方网站](https://github.com/boenfu/knotx#readme)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knotx/utils",
3
- "version": "0.4.12",
3
+ "version": "0.4.13",
4
4
  "description": "Utils for Knotx",
5
5
  "author": "boenfu",
6
6
  "license": "MIT",
@@ -28,12 +28,12 @@
28
28
  "dist"
29
29
  ],
30
30
  "dependencies": {
31
- "@knotx/data": "0.4.12"
31
+ "@knotx/data": "0.4.13"
32
32
  },
33
33
  "devDependencies": {
34
- "@knotx/build-config": "0.4.12",
35
- "@knotx/eslint-config": "0.4.12",
36
- "@knotx/typescript-config": "0.4.12"
34
+ "@knotx/build-config": "0.4.13",
35
+ "@knotx/eslint-config": "0.4.13",
36
+ "@knotx/typescript-config": "0.4.13"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "unbuild",