arche 0.3.1 → 0.3.2
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.js +71 -25
- package/index.js +71 -25
- package/index.mjs +71 -25
- package/package.json +1 -1
- package/test.js +8 -2
package/es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Arche v0.3.
|
|
2
|
+
* Arche v0.3.2
|
|
3
3
|
* https://github.com/richytong/arche
|
|
4
|
-
* (c) 2020-
|
|
4
|
+
* (c) 2020-2023 Richard Tong
|
|
5
5
|
* Arche may be freely distributed under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -32,6 +32,40 @@ const elementSetAttribute = function (element, key, value) {
|
|
|
32
32
|
return element
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
/**
|
|
36
|
+
* @name memoizeCappedWithResolver
|
|
37
|
+
*
|
|
38
|
+
* @synopsis
|
|
39
|
+
* ```coffeescript [specscript]
|
|
40
|
+
* memoizeCappedWithResolver(
|
|
41
|
+
* func function,
|
|
42
|
+
* cap number,
|
|
43
|
+
* resolver function,
|
|
44
|
+
* ) -> memoized function
|
|
45
|
+
* ```
|
|
46
|
+
*
|
|
47
|
+
* @description
|
|
48
|
+
* Memoize a function with a resolver. Clear cache when size reaches cap.
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
const memoizeCappedWithResolver = function (func, cap, resolver) {
|
|
52
|
+
const cache = new Map()
|
|
53
|
+
const memoized = function (...args) {
|
|
54
|
+
if (cache.size > cap) {
|
|
55
|
+
cache.clear()
|
|
56
|
+
}
|
|
57
|
+
const key = resolver(...args)
|
|
58
|
+
if (cache.has(key)) {
|
|
59
|
+
return cache.get(key)
|
|
60
|
+
}
|
|
61
|
+
const result = func(...args)
|
|
62
|
+
cache.set(key, result)
|
|
63
|
+
return result
|
|
64
|
+
}
|
|
65
|
+
memoized.cache = cache
|
|
66
|
+
return memoized
|
|
67
|
+
}
|
|
68
|
+
|
|
35
69
|
/**
|
|
36
70
|
* @name creatorCreateElement
|
|
37
71
|
*
|
|
@@ -116,6 +150,7 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
116
150
|
*
|
|
117
151
|
* Arche(creator, options {
|
|
118
152
|
* styled?: Styled,
|
|
153
|
+
* styledMemoizationCap?: number,
|
|
119
154
|
* }) -> rootElement
|
|
120
155
|
* ```
|
|
121
156
|
*
|
|
@@ -187,7 +222,10 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
187
222
|
*/
|
|
188
223
|
|
|
189
224
|
const Arche = function (creator, options = {}) {
|
|
190
|
-
const {
|
|
225
|
+
const {
|
|
226
|
+
styled,
|
|
227
|
+
styledMemoizationCap = 1000,
|
|
228
|
+
} = options
|
|
191
229
|
|
|
192
230
|
const originalRootElement = type => function creatingElement(arg0, arg1) {
|
|
193
231
|
if (isArray(arg0)) {
|
|
@@ -209,36 +247,44 @@ const Arche = function (creator, options = {}) {
|
|
|
209
247
|
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
210
248
|
}
|
|
211
249
|
|
|
212
|
-
const styledRootElement = type =>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
250
|
+
const styledRootElement = type => {
|
|
251
|
+
const styledComponent = memoizeCappedWithResolver(
|
|
252
|
+
styled[type],
|
|
253
|
+
styledMemoizationCap,
|
|
254
|
+
array => array[0],
|
|
255
|
+
)
|
|
216
256
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
257
|
+
return function creatingStyledElement(arg0, arg1) {
|
|
258
|
+
if (isArray(arg0)) {
|
|
259
|
+
return creatorCreateElement(creator, type, {}, arg0)
|
|
260
|
+
}
|
|
220
261
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
262
|
+
if (typeof arg0 == 'string') {
|
|
263
|
+
return creatorCreateElement(creator, type, {}, [arg0])
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
if (isArray(arg1)) {
|
|
267
|
+
if (arg0.css == null) {
|
|
268
|
+
return creatorCreateElement(creator, type, arg0, arg1)
|
|
269
|
+
}
|
|
270
|
+
const { css, ...props } = arg0
|
|
271
|
+
return creatorCreateElement(creator, styledComponent([css]), props, arg1)
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
if (arg1 == null) {
|
|
275
|
+
if (arg0.css == null) {
|
|
276
|
+
return creatorCreateElement(creator, type, arg0, [])
|
|
277
|
+
}
|
|
278
|
+
const { css, ...props } = arg0
|
|
279
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [])
|
|
224
280
|
}
|
|
225
|
-
const { css, ...props } = arg0
|
|
226
|
-
return creatorCreateElement(creator, styled[type]([css]), props, arg1)
|
|
227
|
-
}
|
|
228
281
|
|
|
229
|
-
if (arg1 == null) {
|
|
230
282
|
if (arg0.css == null) {
|
|
231
|
-
return creatorCreateElement(creator, type, arg0, [])
|
|
283
|
+
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
232
284
|
}
|
|
233
285
|
const { css, ...props } = arg0
|
|
234
|
-
return creatorCreateElement(creator,
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
if (arg0.css == null) {
|
|
238
|
-
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
286
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [arg1])
|
|
239
287
|
}
|
|
240
|
-
const { css, ...props } = arg0
|
|
241
|
-
return creatorCreateElement(creator, styled[type]([css]), props, [arg1])
|
|
242
288
|
}
|
|
243
289
|
|
|
244
290
|
const rootElement = (
|
package/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Arche v0.3.
|
|
2
|
+
* Arche v0.3.2
|
|
3
3
|
* https://github.com/richytong/arche
|
|
4
|
-
* (c) 2020-
|
|
4
|
+
* (c) 2020-2023 Richard Tong
|
|
5
5
|
* Arche may be freely distributed under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -38,6 +38,40 @@ const elementSetAttribute = function (element, key, value) {
|
|
|
38
38
|
return element
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
/**
|
|
42
|
+
* @name memoizeCappedWithResolver
|
|
43
|
+
*
|
|
44
|
+
* @synopsis
|
|
45
|
+
* ```coffeescript [specscript]
|
|
46
|
+
* memoizeCappedWithResolver(
|
|
47
|
+
* func function,
|
|
48
|
+
* cap number,
|
|
49
|
+
* resolver function,
|
|
50
|
+
* ) -> memoized function
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @description
|
|
54
|
+
* Memoize a function with a resolver. Clear cache when size reaches cap.
|
|
55
|
+
*/
|
|
56
|
+
|
|
57
|
+
const memoizeCappedWithResolver = function (func, cap, resolver) {
|
|
58
|
+
const cache = new Map()
|
|
59
|
+
const memoized = function (...args) {
|
|
60
|
+
if (cache.size > cap) {
|
|
61
|
+
cache.clear()
|
|
62
|
+
}
|
|
63
|
+
const key = resolver(...args)
|
|
64
|
+
if (cache.has(key)) {
|
|
65
|
+
return cache.get(key)
|
|
66
|
+
}
|
|
67
|
+
const result = func(...args)
|
|
68
|
+
cache.set(key, result)
|
|
69
|
+
return result
|
|
70
|
+
}
|
|
71
|
+
memoized.cache = cache
|
|
72
|
+
return memoized
|
|
73
|
+
}
|
|
74
|
+
|
|
41
75
|
/**
|
|
42
76
|
* @name creatorCreateElement
|
|
43
77
|
*
|
|
@@ -122,6 +156,7 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
122
156
|
*
|
|
123
157
|
* Arche(creator, options {
|
|
124
158
|
* styled?: Styled,
|
|
159
|
+
* styledMemoizationCap?: number,
|
|
125
160
|
* }) -> rootElement
|
|
126
161
|
* ```
|
|
127
162
|
*
|
|
@@ -193,7 +228,10 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
193
228
|
*/
|
|
194
229
|
|
|
195
230
|
const Arche = function (creator, options = {}) {
|
|
196
|
-
const {
|
|
231
|
+
const {
|
|
232
|
+
styled,
|
|
233
|
+
styledMemoizationCap = 1000,
|
|
234
|
+
} = options
|
|
197
235
|
|
|
198
236
|
const originalRootElement = type => function creatingElement(arg0, arg1) {
|
|
199
237
|
if (isArray(arg0)) {
|
|
@@ -215,36 +253,44 @@ const Arche = function (creator, options = {}) {
|
|
|
215
253
|
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
216
254
|
}
|
|
217
255
|
|
|
218
|
-
const styledRootElement = type =>
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
256
|
+
const styledRootElement = type => {
|
|
257
|
+
const styledComponent = memoizeCappedWithResolver(
|
|
258
|
+
styled[type],
|
|
259
|
+
styledMemoizationCap,
|
|
260
|
+
array => array[0],
|
|
261
|
+
)
|
|
222
262
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
263
|
+
return function creatingStyledElement(arg0, arg1) {
|
|
264
|
+
if (isArray(arg0)) {
|
|
265
|
+
return creatorCreateElement(creator, type, {}, arg0)
|
|
266
|
+
}
|
|
226
267
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
268
|
+
if (typeof arg0 == 'string') {
|
|
269
|
+
return creatorCreateElement(creator, type, {}, [arg0])
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
if (isArray(arg1)) {
|
|
273
|
+
if (arg0.css == null) {
|
|
274
|
+
return creatorCreateElement(creator, type, arg0, arg1)
|
|
275
|
+
}
|
|
276
|
+
const { css, ...props } = arg0
|
|
277
|
+
return creatorCreateElement(creator, styledComponent([css]), props, arg1)
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
if (arg1 == null) {
|
|
281
|
+
if (arg0.css == null) {
|
|
282
|
+
return creatorCreateElement(creator, type, arg0, [])
|
|
283
|
+
}
|
|
284
|
+
const { css, ...props } = arg0
|
|
285
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [])
|
|
230
286
|
}
|
|
231
|
-
const { css, ...props } = arg0
|
|
232
|
-
return creatorCreateElement(creator, styled[type]([css]), props, arg1)
|
|
233
|
-
}
|
|
234
287
|
|
|
235
|
-
if (arg1 == null) {
|
|
236
288
|
if (arg0.css == null) {
|
|
237
|
-
return creatorCreateElement(creator, type, arg0, [])
|
|
289
|
+
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
238
290
|
}
|
|
239
291
|
const { css, ...props } = arg0
|
|
240
|
-
return creatorCreateElement(creator,
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
if (arg0.css == null) {
|
|
244
|
-
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
292
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [arg1])
|
|
245
293
|
}
|
|
246
|
-
const { css, ...props } = arg0
|
|
247
|
-
return creatorCreateElement(creator, styled[type]([css]), props, [arg1])
|
|
248
294
|
}
|
|
249
295
|
|
|
250
296
|
const rootElement = (
|
package/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Arche v0.3.
|
|
2
|
+
* Arche v0.3.2
|
|
3
3
|
* https://github.com/richytong/arche
|
|
4
|
-
* (c) 2020-
|
|
4
|
+
* (c) 2020-2023 Richard Tong
|
|
5
5
|
* Arche may be freely distributed under the MIT license.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -32,6 +32,40 @@ const elementSetAttribute = function (element, key, value) {
|
|
|
32
32
|
return element
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
/**
|
|
36
|
+
* @name memoizeCappedWithResolver
|
|
37
|
+
*
|
|
38
|
+
* @synopsis
|
|
39
|
+
* ```coffeescript [specscript]
|
|
40
|
+
* memoizeCappedWithResolver(
|
|
41
|
+
* func function,
|
|
42
|
+
* cap number,
|
|
43
|
+
* resolver function,
|
|
44
|
+
* ) -> memoized function
|
|
45
|
+
* ```
|
|
46
|
+
*
|
|
47
|
+
* @description
|
|
48
|
+
* Memoize a function with a resolver. Clear cache when size reaches cap.
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
const memoizeCappedWithResolver = function (func, cap, resolver) {
|
|
52
|
+
const cache = new Map()
|
|
53
|
+
const memoized = function (...args) {
|
|
54
|
+
if (cache.size > cap) {
|
|
55
|
+
cache.clear()
|
|
56
|
+
}
|
|
57
|
+
const key = resolver(...args)
|
|
58
|
+
if (cache.has(key)) {
|
|
59
|
+
return cache.get(key)
|
|
60
|
+
}
|
|
61
|
+
const result = func(...args)
|
|
62
|
+
cache.set(key, result)
|
|
63
|
+
return result
|
|
64
|
+
}
|
|
65
|
+
memoized.cache = cache
|
|
66
|
+
return memoized
|
|
67
|
+
}
|
|
68
|
+
|
|
35
69
|
/**
|
|
36
70
|
* @name creatorCreateElement
|
|
37
71
|
*
|
|
@@ -116,6 +150,7 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
116
150
|
*
|
|
117
151
|
* Arche(creator, options {
|
|
118
152
|
* styled?: Styled,
|
|
153
|
+
* styledMemoizationCap?: number,
|
|
119
154
|
* }) -> rootElement
|
|
120
155
|
* ```
|
|
121
156
|
*
|
|
@@ -187,7 +222,10 @@ const creatorCreateElement = function (creator, type, props, children) {
|
|
|
187
222
|
*/
|
|
188
223
|
|
|
189
224
|
const Arche = function (creator, options = {}) {
|
|
190
|
-
const {
|
|
225
|
+
const {
|
|
226
|
+
styled,
|
|
227
|
+
styledMemoizationCap = 1000,
|
|
228
|
+
} = options
|
|
191
229
|
|
|
192
230
|
const originalRootElement = type => function creatingElement(arg0, arg1) {
|
|
193
231
|
if (isArray(arg0)) {
|
|
@@ -209,36 +247,44 @@ const Arche = function (creator, options = {}) {
|
|
|
209
247
|
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
210
248
|
}
|
|
211
249
|
|
|
212
|
-
const styledRootElement = type =>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
250
|
+
const styledRootElement = type => {
|
|
251
|
+
const styledComponent = memoizeCappedWithResolver(
|
|
252
|
+
styled[type],
|
|
253
|
+
styledMemoizationCap,
|
|
254
|
+
array => array[0],
|
|
255
|
+
)
|
|
216
256
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
257
|
+
return function creatingStyledElement(arg0, arg1) {
|
|
258
|
+
if (isArray(arg0)) {
|
|
259
|
+
return creatorCreateElement(creator, type, {}, arg0)
|
|
260
|
+
}
|
|
220
261
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
262
|
+
if (typeof arg0 == 'string') {
|
|
263
|
+
return creatorCreateElement(creator, type, {}, [arg0])
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
if (isArray(arg1)) {
|
|
267
|
+
if (arg0.css == null) {
|
|
268
|
+
return creatorCreateElement(creator, type, arg0, arg1)
|
|
269
|
+
}
|
|
270
|
+
const { css, ...props } = arg0
|
|
271
|
+
return creatorCreateElement(creator, styledComponent([css]), props, arg1)
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
if (arg1 == null) {
|
|
275
|
+
if (arg0.css == null) {
|
|
276
|
+
return creatorCreateElement(creator, type, arg0, [])
|
|
277
|
+
}
|
|
278
|
+
const { css, ...props } = arg0
|
|
279
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [])
|
|
224
280
|
}
|
|
225
|
-
const { css, ...props } = arg0
|
|
226
|
-
return creatorCreateElement(creator, styled[type]([css]), props, arg1)
|
|
227
|
-
}
|
|
228
281
|
|
|
229
|
-
if (arg1 == null) {
|
|
230
282
|
if (arg0.css == null) {
|
|
231
|
-
return creatorCreateElement(creator, type, arg0, [])
|
|
283
|
+
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
232
284
|
}
|
|
233
285
|
const { css, ...props } = arg0
|
|
234
|
-
return creatorCreateElement(creator,
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
if (arg0.css == null) {
|
|
238
|
-
return creatorCreateElement(creator, type, arg0, [arg1])
|
|
286
|
+
return creatorCreateElement(creator, styledComponent([css]), props, [arg1])
|
|
239
287
|
}
|
|
240
|
-
const { css, ...props } = arg0
|
|
241
|
-
return creatorCreateElement(creator, styled[type]([css]), props, [arg1])
|
|
242
288
|
}
|
|
243
289
|
|
|
244
290
|
const rootElement = (
|
package/package.json
CHANGED
package/test.js
CHANGED
|
@@ -85,12 +85,18 @@ describe('Arche', () => {
|
|
|
85
85
|
article: get0,
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
const rootElement = Arche(mockReact, {
|
|
88
|
+
const rootElement = Arche(mockReact, {
|
|
89
|
+
styled,
|
|
90
|
+
styledMemoizationCap: 1,
|
|
91
|
+
})
|
|
89
92
|
const { Div, H1, P, Span, Article } = rootElement
|
|
90
93
|
|
|
91
94
|
it('tree structure 1', () => {
|
|
92
95
|
const el = Div([
|
|
93
96
|
H1({ css: 'h2' }, 'header'), // should swap with h2
|
|
97
|
+
H1({ css: 'h2' }, 'header'), // should trigger memoized
|
|
98
|
+
H1({ css: 'h3' }, 'header'), // should add cache
|
|
99
|
+
H1({ css: 'h5' }, 'header'), // should clear cache
|
|
94
100
|
P({ style: { color: 'grey' } }, 'description'),
|
|
95
101
|
Span({ id: 'hey', excluded: null }),
|
|
96
102
|
Div({ id: 'nested' }, [
|
|
@@ -100,7 +106,7 @@ describe('Arche', () => {
|
|
|
100
106
|
|
|
101
107
|
assert.strictEqual(
|
|
102
108
|
JSON.stringify(el),
|
|
103
|
-
'["div",{},[["h2",{},["header"]],["p",{"style":{"color":"grey"}},["description"]],["span",{"id":"hey","excluded":null},[]],["div",{"id":"nested"},[["article",{},["yo"]]]]]]')
|
|
109
|
+
'["div",{},[["h2",{},["header"]],["h2",{},["header"]],["h3",{},["header"]],["h5",{},["header"]],["p",{"style":{"color":"grey"}},["description"]],["span",{"id":"hey","excluded":null},[]],["div",{"id":"nested"},[["article",{},["yo"]]]]]]')
|
|
104
110
|
})
|
|
105
111
|
|
|
106
112
|
it('tree structure 2', () => {
|