@pyreon/attrs 0.24.5 → 0.24.6
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/package.json +5 -7
- package/src/__tests__/attrs.test.ts +0 -531
- package/src/__tests__/attrsHoc.test.ts +0 -179
- package/src/__tests__/utils.test.ts +0 -241
- package/src/attrs.ts +0 -131
- package/src/env.d.ts +0 -6
- package/src/hoc/attrsHoc.ts +0 -74
- package/src/hoc/index.ts +0 -3
- package/src/index.ts +0 -26
- package/src/init.ts +0 -65
- package/src/isAttrsComponent.ts +0 -16
- package/src/types/AttrsComponent.ts +0 -83
- package/src/types/InitAttrsComponent.ts +0 -19
- package/src/types/attrs.ts +0 -2
- package/src/types/config.ts +0 -13
- package/src/types/configuration.ts +0 -40
- package/src/types/hoc.ts +0 -10
- package/src/types/utils.ts +0 -137
- package/src/utils/attrs.ts +0 -46
- package/src/utils/chaining.ts +0 -21
- package/src/utils/collection.ts +0 -14
- package/src/utils/compose.ts +0 -14
- package/src/utils/statics.ts +0 -16
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pyreon/attrs",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.6",
|
|
4
4
|
"description": "Attrs HOC chaining for Pyreon components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -13,8 +13,7 @@
|
|
|
13
13
|
"!lib/**/*.map",
|
|
14
14
|
"!lib/analysis",
|
|
15
15
|
"README.md",
|
|
16
|
-
"LICENSE"
|
|
17
|
-
"src"
|
|
16
|
+
"LICENSE"
|
|
18
17
|
],
|
|
19
18
|
"type": "module",
|
|
20
19
|
"sideEffects": false,
|
|
@@ -22,7 +21,6 @@
|
|
|
22
21
|
"types": "./lib/index.d.ts",
|
|
23
22
|
"exports": {
|
|
24
23
|
".": {
|
|
25
|
-
"bun": "./src/index.ts",
|
|
26
24
|
"import": "./lib/index.js",
|
|
27
25
|
"types": "./lib/index.d.ts"
|
|
28
26
|
}
|
|
@@ -41,14 +39,14 @@
|
|
|
41
39
|
"typecheck": "tsc --noEmit"
|
|
42
40
|
},
|
|
43
41
|
"devDependencies": {
|
|
44
|
-
"@pyreon/typescript": "^0.24.
|
|
42
|
+
"@pyreon/typescript": "^0.24.6",
|
|
45
43
|
"@vitus-labs/tools-rolldown": "^2.4.0"
|
|
46
44
|
},
|
|
47
45
|
"engines": {
|
|
48
46
|
"node": ">= 22"
|
|
49
47
|
},
|
|
50
48
|
"dependencies": {
|
|
51
|
-
"@pyreon/core": "^0.24.
|
|
52
|
-
"@pyreon/ui-core": "^0.24.
|
|
49
|
+
"@pyreon/core": "^0.24.6",
|
|
50
|
+
"@pyreon/ui-core": "^0.24.6"
|
|
53
51
|
}
|
|
54
52
|
}
|
|
@@ -1,531 +0,0 @@
|
|
|
1
|
-
import { h } from '@pyreon/core'
|
|
2
|
-
import attrsComponent from '../attrs'
|
|
3
|
-
import attrs from '../init'
|
|
4
|
-
import isAttrsComponent from '../isAttrsComponent'
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Simple base component for testing.
|
|
8
|
-
* Returns a VNode-like object so we can inspect the final props.
|
|
9
|
-
*/
|
|
10
|
-
const BaseComponent = (props: any) =>
|
|
11
|
-
h('div', { ...props, 'data-testid': 'base' }, props.children ?? props.label ?? null)
|
|
12
|
-
|
|
13
|
-
/** Helper: call the component and return its output for inspection. */
|
|
14
|
-
const renderProps = (Component: any, props: Record<string, any> = {}) => {
|
|
15
|
-
const vnode = Component(props) as any
|
|
16
|
-
return vnode?.props ?? vnode
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// --------------------------------------------------------
|
|
20
|
-
// attrs() initialization
|
|
21
|
-
// --------------------------------------------------------
|
|
22
|
-
describe('attrs initialization', () => {
|
|
23
|
-
it('should create an attrs component from a base component', () => {
|
|
24
|
-
const Component = attrs({ name: 'TestComponent', component: BaseComponent })
|
|
25
|
-
expect(Component).toBeDefined()
|
|
26
|
-
expect(Component.IS_ATTRS).toBe(true)
|
|
27
|
-
expect(Component.displayName).toBe('TestComponent')
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
it('should throw when component is missing (dev mode)', () => {
|
|
31
|
-
expect(() => attrs({ name: 'Test', component: undefined as any })).toThrow()
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
it('should throw when name is missing (dev mode)', () => {
|
|
35
|
-
expect(() => attrs({ name: undefined as any, component: BaseComponent })).toThrow()
|
|
36
|
-
})
|
|
37
|
-
|
|
38
|
-
it('should render the wrapped component', () => {
|
|
39
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
40
|
-
const result = renderProps(Component, { label: 'Hello' })
|
|
41
|
-
expect(result.label).toBe('Hello')
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
it('should add data-attrs in development mode', () => {
|
|
45
|
-
const Component = attrs({ name: 'MyComponent', component: BaseComponent })
|
|
46
|
-
const result = renderProps(Component)
|
|
47
|
-
expect(result['data-attrs']).toBe('MyComponent')
|
|
48
|
-
})
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
// --------------------------------------------------------
|
|
52
|
-
// .attrs() chaining
|
|
53
|
-
// --------------------------------------------------------
|
|
54
|
-
describe('.attrs() chaining', () => {
|
|
55
|
-
it('should apply default attrs to the component', () => {
|
|
56
|
-
const Component = attrs({
|
|
57
|
-
name: 'Test',
|
|
58
|
-
component: BaseComponent,
|
|
59
|
-
}).attrs(() => ({ label: 'Default Label' }))
|
|
60
|
-
|
|
61
|
-
const result = renderProps(Component)
|
|
62
|
-
expect(result.label).toBe('Default Label')
|
|
63
|
-
})
|
|
64
|
-
|
|
65
|
-
it('should allow props to override default attrs', () => {
|
|
66
|
-
const Component = attrs({
|
|
67
|
-
name: 'Test',
|
|
68
|
-
component: BaseComponent,
|
|
69
|
-
}).attrs(() => ({ label: 'Default' }))
|
|
70
|
-
|
|
71
|
-
const result = renderProps(Component, { label: 'Override' })
|
|
72
|
-
expect(result.label).toBe('Override')
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
it('should support multiple .attrs() chains', () => {
|
|
76
|
-
const Component = attrs({
|
|
77
|
-
name: 'Test',
|
|
78
|
-
component: BaseComponent,
|
|
79
|
-
})
|
|
80
|
-
.attrs(() => ({ 'data-first': 'yes' }))
|
|
81
|
-
.attrs(() => ({ 'data-second': 'yes' }))
|
|
82
|
-
|
|
83
|
-
const result = renderProps(Component)
|
|
84
|
-
expect(result['data-first']).toBe('yes')
|
|
85
|
-
expect(result['data-second']).toBe('yes')
|
|
86
|
-
})
|
|
87
|
-
|
|
88
|
-
it('should pass current props to attrs callback', () => {
|
|
89
|
-
const Component = attrs({
|
|
90
|
-
name: 'Test',
|
|
91
|
-
component: BaseComponent,
|
|
92
|
-
}).attrs((props: any) => ({
|
|
93
|
-
'data-variant': props.variant === 'primary' ? 'is-primary' : 'is-default',
|
|
94
|
-
}))
|
|
95
|
-
|
|
96
|
-
const result = renderProps(Component, { variant: 'primary' })
|
|
97
|
-
expect(result['data-variant']).toBe('is-primary')
|
|
98
|
-
})
|
|
99
|
-
|
|
100
|
-
it('should support object-based attrs', () => {
|
|
101
|
-
const Component = attrs({
|
|
102
|
-
name: 'Test',
|
|
103
|
-
component: BaseComponent,
|
|
104
|
-
}).attrs({ label: 'Static Label' })
|
|
105
|
-
|
|
106
|
-
const result = renderProps(Component)
|
|
107
|
-
expect(result.label).toBe('Static Label')
|
|
108
|
-
})
|
|
109
|
-
|
|
110
|
-
it('should support priority attrs', () => {
|
|
111
|
-
const Component = attrs({
|
|
112
|
-
name: 'Test',
|
|
113
|
-
component: BaseComponent,
|
|
114
|
-
})
|
|
115
|
-
.attrs(() => ({ label: 'Normal' }))
|
|
116
|
-
.attrs(() => ({ label: 'Priority' }), { priority: true })
|
|
117
|
-
|
|
118
|
-
// Priority attrs have lower precedence than normal attrs
|
|
119
|
-
const result = renderProps(Component)
|
|
120
|
-
expect(result.label).toBe('Normal')
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
it('should support filter option to remove attrs from final props', () => {
|
|
124
|
-
const Component = attrs({
|
|
125
|
-
name: 'Test',
|
|
126
|
-
component: BaseComponent,
|
|
127
|
-
}).attrs(() => ({ label: 'Visible' }), {
|
|
128
|
-
filter: ['data-internal'],
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
const result = renderProps(Component, {
|
|
132
|
-
'data-internal': 'secret',
|
|
133
|
-
label: 'test',
|
|
134
|
-
})
|
|
135
|
-
expect(result['data-internal']).toBeUndefined()
|
|
136
|
-
})
|
|
137
|
-
})
|
|
138
|
-
|
|
139
|
-
// --------------------------------------------------------
|
|
140
|
-
// .config() chaining
|
|
141
|
-
// --------------------------------------------------------
|
|
142
|
-
describe('.config() chaining', () => {
|
|
143
|
-
it('should return a new component instance', () => {
|
|
144
|
-
const Original = attrs({ name: 'Test', component: BaseComponent })
|
|
145
|
-
const Configured = Original.config({})
|
|
146
|
-
expect(Configured).not.toBe(Original)
|
|
147
|
-
expect(Configured.IS_ATTRS).toBe(true)
|
|
148
|
-
})
|
|
149
|
-
|
|
150
|
-
it('should update displayName when name is changed', () => {
|
|
151
|
-
const Original = attrs({ name: 'Original', component: BaseComponent })
|
|
152
|
-
const Renamed = Original.config({ name: 'Renamed' })
|
|
153
|
-
expect(Renamed.displayName).toBe('Renamed')
|
|
154
|
-
expect(Original.displayName).toBe('Original')
|
|
155
|
-
})
|
|
156
|
-
|
|
157
|
-
it('should swap the rendered component', () => {
|
|
158
|
-
const AltComponent = (props: any) =>
|
|
159
|
-
h('span', { ...props, 'data-testid': 'alt' }, props.label)
|
|
160
|
-
|
|
161
|
-
const Original = attrs({ name: 'Test', component: BaseComponent })
|
|
162
|
-
const Swapped = Original.config({ component: AltComponent })
|
|
163
|
-
|
|
164
|
-
const result = Swapped({ label: 'swapped' }) as any
|
|
165
|
-
expect(result.props['data-testid']).toBe('alt')
|
|
166
|
-
// h() wraps single string children in an array. The contract here
|
|
167
|
-
// is "the rendered component received the right child text", so
|
|
168
|
-
// assert against the flattened content rather than the bare string.
|
|
169
|
-
expect(result.children).toEqual(['swapped'])
|
|
170
|
-
})
|
|
171
|
-
|
|
172
|
-
it('should preserve attrs chain after config swap', () => {
|
|
173
|
-
const AltComponent = (props: any) =>
|
|
174
|
-
h('span', { ...props, 'data-testid': 'alt' }, props.label)
|
|
175
|
-
|
|
176
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
177
|
-
.attrs(() => ({ label: 'from-attrs' }))
|
|
178
|
-
.config({ component: AltComponent })
|
|
179
|
-
|
|
180
|
-
const result = Component({}) as any
|
|
181
|
-
expect(result.children).toEqual(['from-attrs'])
|
|
182
|
-
})
|
|
183
|
-
})
|
|
184
|
-
|
|
185
|
-
// --------------------------------------------------------
|
|
186
|
-
// .statics() chaining
|
|
187
|
-
// --------------------------------------------------------
|
|
188
|
-
describe('.statics() chaining', () => {
|
|
189
|
-
it('should assign statics to component meta', () => {
|
|
190
|
-
const Component = attrs({
|
|
191
|
-
name: 'Test',
|
|
192
|
-
component: BaseComponent,
|
|
193
|
-
}).statics({ theme: 'dark', sizes: ['sm', 'md', 'lg'] })
|
|
194
|
-
|
|
195
|
-
expect(Component.meta).toEqual({
|
|
196
|
-
theme: 'dark',
|
|
197
|
-
sizes: ['sm', 'md', 'lg'],
|
|
198
|
-
})
|
|
199
|
-
})
|
|
200
|
-
|
|
201
|
-
it('should merge statics across chains', () => {
|
|
202
|
-
const Component = attrs({
|
|
203
|
-
name: 'Test',
|
|
204
|
-
component: BaseComponent,
|
|
205
|
-
})
|
|
206
|
-
.statics({ theme: 'dark' })
|
|
207
|
-
.statics({ variant: 'primary' })
|
|
208
|
-
|
|
209
|
-
expect(Component.meta).toEqual({
|
|
210
|
-
theme: 'dark',
|
|
211
|
-
variant: 'primary',
|
|
212
|
-
})
|
|
213
|
-
})
|
|
214
|
-
})
|
|
215
|
-
|
|
216
|
-
// --------------------------------------------------------
|
|
217
|
-
// .compose() chaining
|
|
218
|
-
// --------------------------------------------------------
|
|
219
|
-
describe('.compose() chaining', () => {
|
|
220
|
-
it('should wrap component with a HOC', () => {
|
|
221
|
-
const withWrapper = (WrappedComponent: any) => (props: any) =>
|
|
222
|
-
h('div', { 'data-testid': 'hoc-wrapper' }, WrappedComponent(props))
|
|
223
|
-
|
|
224
|
-
const Component = attrs({
|
|
225
|
-
name: 'Test',
|
|
226
|
-
component: BaseComponent,
|
|
227
|
-
}).compose({ withWrapper })
|
|
228
|
-
|
|
229
|
-
const result = Component({ label: 'composed' }) as any
|
|
230
|
-
expect(result.props['data-testid']).toBe('hoc-wrapper')
|
|
231
|
-
// Real h() wraps single children in an array; nested wrapper holds
|
|
232
|
-
// its inner WrappedComponent(props) result whose `children` is now
|
|
233
|
-
// also wrapped — so two array layers down sits the final string.
|
|
234
|
-
expect(result.children[0].children).toEqual(['composed'])
|
|
235
|
-
})
|
|
236
|
-
|
|
237
|
-
it('should apply multiple HOCs in correct order', () => {
|
|
238
|
-
const order: string[] = []
|
|
239
|
-
|
|
240
|
-
const withOuter = (Wrapped: any) => (props: any) => {
|
|
241
|
-
order.push('outer')
|
|
242
|
-
return Wrapped(props)
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
const withInner = (Wrapped: any) => (props: any) => {
|
|
246
|
-
order.push('inner')
|
|
247
|
-
return Wrapped(props)
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
const Component = attrs({
|
|
251
|
-
name: 'Test',
|
|
252
|
-
component: BaseComponent,
|
|
253
|
-
}).compose({ withOuter, withInner })
|
|
254
|
-
|
|
255
|
-
Component({})
|
|
256
|
-
// calculateHocsFuncs reverses the order: last-defined runs first
|
|
257
|
-
expect(order).toEqual(['inner', 'outer'])
|
|
258
|
-
})
|
|
259
|
-
|
|
260
|
-
it('should remove a HOC by setting it to false', () => {
|
|
261
|
-
const withWrapper = (WrappedComponent: any) => (props: any) =>
|
|
262
|
-
h('div', { 'data-testid': 'hoc-wrapper' }, WrappedComponent(props))
|
|
263
|
-
|
|
264
|
-
const WithHoc = attrs({
|
|
265
|
-
name: 'Test',
|
|
266
|
-
component: BaseComponent,
|
|
267
|
-
}).compose({ withWrapper })
|
|
268
|
-
|
|
269
|
-
const WithoutHoc = WithHoc.compose({ withWrapper: false })
|
|
270
|
-
|
|
271
|
-
const result = WithoutHoc({ label: 'no-hoc' }) as any
|
|
272
|
-
// Should render base component directly, no wrapper
|
|
273
|
-
expect(result.props['data-testid']).toBe('base')
|
|
274
|
-
expect(result.children).toEqual(['no-hoc'])
|
|
275
|
-
})
|
|
276
|
-
})
|
|
277
|
-
|
|
278
|
-
// --------------------------------------------------------
|
|
279
|
-
// .getDefaultAttrs()
|
|
280
|
-
// --------------------------------------------------------
|
|
281
|
-
describe('.getDefaultAttrs()', () => {
|
|
282
|
-
it('should return computed default attrs for given props', () => {
|
|
283
|
-
const Component = attrs({
|
|
284
|
-
name: 'Test',
|
|
285
|
-
component: BaseComponent,
|
|
286
|
-
}).attrs((props: any) => ({
|
|
287
|
-
computed: props.variant === 'primary' ? 'blue' : 'gray',
|
|
288
|
-
}))
|
|
289
|
-
|
|
290
|
-
const defaults = Component.getDefaultAttrs({ variant: 'primary' })
|
|
291
|
-
expect(defaults).toEqual({ computed: 'blue' })
|
|
292
|
-
})
|
|
293
|
-
|
|
294
|
-
it('should return empty object when no attrs defined', () => {
|
|
295
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
296
|
-
const defaults = Component.getDefaultAttrs({})
|
|
297
|
-
expect(defaults).toEqual({})
|
|
298
|
-
})
|
|
299
|
-
|
|
300
|
-
it('should merge multiple attrs chains', () => {
|
|
301
|
-
const Component = attrs({
|
|
302
|
-
name: 'Test',
|
|
303
|
-
component: BaseComponent,
|
|
304
|
-
})
|
|
305
|
-
.attrs(() => ({ color: 'blue' }))
|
|
306
|
-
.attrs(() => ({ size: 'lg' }))
|
|
307
|
-
|
|
308
|
-
const defaults = Component.getDefaultAttrs({})
|
|
309
|
-
expect(defaults).toEqual({ color: 'blue', size: 'lg' })
|
|
310
|
-
})
|
|
311
|
-
})
|
|
312
|
-
|
|
313
|
-
// --------------------------------------------------------
|
|
314
|
-
// isAttrsComponent
|
|
315
|
-
// --------------------------------------------------------
|
|
316
|
-
describe('isAttrsComponent', () => {
|
|
317
|
-
it('should return true for attrs components', () => {
|
|
318
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
319
|
-
expect(isAttrsComponent(Component)).toBe(true)
|
|
320
|
-
})
|
|
321
|
-
|
|
322
|
-
it('should return false for plain components', () => {
|
|
323
|
-
expect(isAttrsComponent(BaseComponent)).toBe(false)
|
|
324
|
-
})
|
|
325
|
-
|
|
326
|
-
it('should return false for null', () => {
|
|
327
|
-
expect(isAttrsComponent(null)).toBe(false)
|
|
328
|
-
})
|
|
329
|
-
|
|
330
|
-
it('should return false for undefined', () => {
|
|
331
|
-
expect(isAttrsComponent(undefined)).toBe(false)
|
|
332
|
-
})
|
|
333
|
-
|
|
334
|
-
it('should return false for non-objects', () => {
|
|
335
|
-
expect(isAttrsComponent('string')).toBe(false)
|
|
336
|
-
expect(isAttrsComponent(123)).toBe(false)
|
|
337
|
-
})
|
|
338
|
-
|
|
339
|
-
it('should return true for objects with IS_ATTRS property', () => {
|
|
340
|
-
expect(isAttrsComponent({ IS_ATTRS: true })).toBe(true)
|
|
341
|
-
})
|
|
342
|
-
})
|
|
343
|
-
|
|
344
|
-
// --------------------------------------------------------
|
|
345
|
-
// displayName fallback
|
|
346
|
-
// --------------------------------------------------------
|
|
347
|
-
describe('displayName resolution', () => {
|
|
348
|
-
it('should fall back to component.displayName when name is not provided', () => {
|
|
349
|
-
const NamedComponent = (props: any) => h('div', props, props.children)
|
|
350
|
-
NamedComponent.displayName = 'MyDisplayName'
|
|
351
|
-
|
|
352
|
-
const Component = attrsComponent({
|
|
353
|
-
name: undefined as any,
|
|
354
|
-
component: NamedComponent,
|
|
355
|
-
attrs: [],
|
|
356
|
-
priorityAttrs: [],
|
|
357
|
-
filterAttrs: [],
|
|
358
|
-
compose: {},
|
|
359
|
-
statics: {},
|
|
360
|
-
})
|
|
361
|
-
expect(Component.displayName).toBe('MyDisplayName')
|
|
362
|
-
})
|
|
363
|
-
|
|
364
|
-
it('should fall back to component.name when name and displayName are not provided', () => {
|
|
365
|
-
function ExplicitNameComponent(props: any) {
|
|
366
|
-
return h('div', props, props.children)
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
const Component = attrsComponent({
|
|
370
|
-
name: undefined as any,
|
|
371
|
-
component: ExplicitNameComponent,
|
|
372
|
-
attrs: [],
|
|
373
|
-
priorityAttrs: [],
|
|
374
|
-
filterAttrs: [],
|
|
375
|
-
compose: {},
|
|
376
|
-
statics: {},
|
|
377
|
-
})
|
|
378
|
-
expect(Component.displayName).toBe('ExplicitNameComponent')
|
|
379
|
-
})
|
|
380
|
-
})
|
|
381
|
-
|
|
382
|
-
// --------------------------------------------------------
|
|
383
|
-
// Ref as normal prop
|
|
384
|
-
// --------------------------------------------------------
|
|
385
|
-
describe('ref passthrough', () => {
|
|
386
|
-
it('should pass ref as a normal prop through the chain', () => {
|
|
387
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
388
|
-
const refObj = { current: null }
|
|
389
|
-
|
|
390
|
-
const result = renderProps(Component, { ref: refObj })
|
|
391
|
-
expect(result.ref).toBe(refObj)
|
|
392
|
-
})
|
|
393
|
-
})
|
|
394
|
-
|
|
395
|
-
// --------------------------------------------------------
|
|
396
|
-
// Immutability
|
|
397
|
-
// --------------------------------------------------------
|
|
398
|
-
describe('immutability', () => {
|
|
399
|
-
it('should return new instances on each chain call', () => {
|
|
400
|
-
const Base = attrs({ name: 'Test', component: BaseComponent })
|
|
401
|
-
const WithAttrs = Base.attrs(() => ({ label: 'a' }))
|
|
402
|
-
const WithStatics = Base.statics({ x: 1 })
|
|
403
|
-
|
|
404
|
-
expect(Base).not.toBe(WithAttrs)
|
|
405
|
-
expect(Base).not.toBe(WithStatics)
|
|
406
|
-
expect(WithAttrs).not.toBe(WithStatics)
|
|
407
|
-
})
|
|
408
|
-
|
|
409
|
-
it('should not affect parent when child is modified', () => {
|
|
410
|
-
const Parent = attrs({
|
|
411
|
-
name: 'Parent',
|
|
412
|
-
component: BaseComponent,
|
|
413
|
-
}).attrs(() => ({ label: 'Parent' }))
|
|
414
|
-
|
|
415
|
-
const Child = Parent.attrs(() => ({ label: 'Child' }))
|
|
416
|
-
|
|
417
|
-
const parentResult = renderProps(Parent)
|
|
418
|
-
expect(parentResult.label).toBe('Parent')
|
|
419
|
-
|
|
420
|
-
const childResult = renderProps(Child)
|
|
421
|
-
expect(childResult.label).toBe('Child')
|
|
422
|
-
})
|
|
423
|
-
})
|
|
424
|
-
|
|
425
|
-
// --------------------------------------------------------
|
|
426
|
-
// Deep chaining
|
|
427
|
-
// --------------------------------------------------------
|
|
428
|
-
describe('deep chaining', () => {
|
|
429
|
-
it('should accumulate attrs across 3+ levels', () => {
|
|
430
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
431
|
-
.attrs(() => ({ 'data-a': '1' }))
|
|
432
|
-
.attrs(() => ({ 'data-b': '2' }))
|
|
433
|
-
.attrs(() => ({ 'data-c': '3' }))
|
|
434
|
-
|
|
435
|
-
const result = renderProps(Component)
|
|
436
|
-
expect(result['data-a']).toBe('1')
|
|
437
|
-
expect(result['data-b']).toBe('2')
|
|
438
|
-
expect(result['data-c']).toBe('3')
|
|
439
|
-
})
|
|
440
|
-
|
|
441
|
-
it('should combine attrs, statics, and config in a single chain', () => {
|
|
442
|
-
const Component = attrs({ name: 'Base', component: BaseComponent })
|
|
443
|
-
.attrs(() => ({ label: 'hello' }))
|
|
444
|
-
.statics({ variant: 'primary' })
|
|
445
|
-
.config({ name: 'FinalName' })
|
|
446
|
-
.attrs(() => ({ 'data-extra': 'yes' }))
|
|
447
|
-
|
|
448
|
-
expect(Component.displayName).toBe('FinalName')
|
|
449
|
-
expect(Component.meta).toEqual({ variant: 'primary' })
|
|
450
|
-
|
|
451
|
-
const result = renderProps(Component)
|
|
452
|
-
expect(result.label).toBe('hello')
|
|
453
|
-
expect(result['data-extra']).toBe('yes')
|
|
454
|
-
})
|
|
455
|
-
|
|
456
|
-
it('should allow later attrs to override earlier ones', () => {
|
|
457
|
-
const Component = attrs({ name: 'Test', component: BaseComponent })
|
|
458
|
-
.attrs(() => ({ label: 'first' }))
|
|
459
|
-
.attrs(() => ({ label: 'second' }))
|
|
460
|
-
.attrs(() => ({ label: 'third' }))
|
|
461
|
-
|
|
462
|
-
const result = renderProps(Component)
|
|
463
|
-
expect(result.label).toBe('third')
|
|
464
|
-
})
|
|
465
|
-
})
|
|
466
|
-
|
|
467
|
-
// ─── attrs — real h() round-trip (parallel to the BaseComponent mocks) ──
|
|
468
|
-
//
|
|
469
|
-
// The tests above use a `BaseComponent` mock that returns
|
|
470
|
-
// `{ type, props, children, key }` literals, then assert against the
|
|
471
|
-
// `vnode.props` shape. That's the contract at the type level, but it
|
|
472
|
-
// skips the actual h() call shape — `h('div', props, ...children)`
|
|
473
|
-
// flattens children differently than the mock and may pass props
|
|
474
|
-
// through different normalization paths in the runtime. PR #197 was
|
|
475
|
-
// caused by exactly this kind of mock-vs-real divergence.
|
|
476
|
-
//
|
|
477
|
-
// This block re-runs the key attrs contracts through a base component
|
|
478
|
-
// that uses real `h()` from `@pyreon/core`. The mock tests stay as
|
|
479
|
-
// the fast unit-test path; these are the safety net.
|
|
480
|
-
|
|
481
|
-
describe('attrs — real h() round-trip', () => {
|
|
482
|
-
// BaseComponent that returns a real VNode via h(). Same shape as
|
|
483
|
-
// the mock, but built through the public h() API.
|
|
484
|
-
const BaseComponentH = (props: any) =>
|
|
485
|
-
h('div', { ...props, 'data-testid': 'base' }, props.children ?? props.label ?? null)
|
|
486
|
-
|
|
487
|
-
it('passes through props unchanged when no attrs defined', () => {
|
|
488
|
-
const Component = attrs({ name: 'BareH', component: BaseComponentH })
|
|
489
|
-
const result = (Component as any)({ label: 'hello', 'data-custom': 'yes' }) as any
|
|
490
|
-
expect(result.props.label).toBe('hello')
|
|
491
|
-
expect(result.props['data-custom']).toBe('yes')
|
|
492
|
-
expect(result.props['data-testid']).toBe('base')
|
|
493
|
-
})
|
|
494
|
-
|
|
495
|
-
it('applies attrs as default props through real h()', () => {
|
|
496
|
-
const Component = attrs({ name: 'WithAttrs', component: BaseComponentH }).attrs(
|
|
497
|
-
(_props: any) => ({ label: 'default' }),
|
|
498
|
-
)
|
|
499
|
-
const result = (Component as any)({}) as any
|
|
500
|
-
expect(result.props.label).toBe('default')
|
|
501
|
-
expect(result.type).toBe('div')
|
|
502
|
-
})
|
|
503
|
-
|
|
504
|
-
it('overrides default attrs with explicit props', () => {
|
|
505
|
-
const Component = attrs({ name: 'Overridable', component: BaseComponentH }).attrs(
|
|
506
|
-
(_props: any) => ({ label: 'default' }),
|
|
507
|
-
)
|
|
508
|
-
const result = (Component as any)({ label: 'explicit' }) as any
|
|
509
|
-
expect(result.props.label).toBe('explicit')
|
|
510
|
-
})
|
|
511
|
-
|
|
512
|
-
it('chains multiple attrs() calls through real h()', () => {
|
|
513
|
-
const Component = attrs({ name: 'Chained', component: BaseComponentH })
|
|
514
|
-
.attrs(() => ({ a: 1 }))
|
|
515
|
-
.attrs(() => ({ b: 2 }))
|
|
516
|
-
.attrs(() => ({ c: 3 }))
|
|
517
|
-
const result = (Component as any)({}) as any
|
|
518
|
-
expect(result.props.a).toBe(1)
|
|
519
|
-
expect(result.props.b).toBe(2)
|
|
520
|
-
expect(result.props.c).toBe(3)
|
|
521
|
-
})
|
|
522
|
-
|
|
523
|
-
it('later attrs override earlier ones (real h() parallel)', () => {
|
|
524
|
-
const Component = attrs({ name: 'OrderH', component: BaseComponentH })
|
|
525
|
-
.attrs(() => ({ label: 'first' }))
|
|
526
|
-
.attrs(() => ({ label: 'second' }))
|
|
527
|
-
.attrs(() => ({ label: 'third' }))
|
|
528
|
-
const result = (Component as any)({}) as any
|
|
529
|
-
expect(result.props.label).toBe('third')
|
|
530
|
-
})
|
|
531
|
-
})
|