@pyreon/vue-compat 0.11.5 → 0.11.7
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 +15 -13
- package/lib/index.js.map +1 -1
- package/lib/jsx-runtime.js.map +1 -1
- package/package.json +13 -13
- package/src/index.ts +20 -20
- package/src/jsx-dev-runtime.ts +1 -1
- package/src/jsx-runtime.ts +6 -6
- package/src/tests/setup.ts +1 -1
- package/src/tests/vue-compat.test.ts +157 -157
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ComponentFn } from
|
|
2
|
-
import { mount } from
|
|
1
|
+
import type { ComponentFn } from '@pyreon/core'
|
|
2
|
+
import { mount } from '@pyreon/runtime-dom'
|
|
3
3
|
import {
|
|
4
4
|
batch,
|
|
5
5
|
computed,
|
|
@@ -28,7 +28,7 @@ import {
|
|
|
28
28
|
unref,
|
|
29
29
|
watch,
|
|
30
30
|
watchEffect,
|
|
31
|
-
} from
|
|
31
|
+
} from '../index'
|
|
32
32
|
import {
|
|
33
33
|
beginRender,
|
|
34
34
|
endRender,
|
|
@@ -37,12 +37,12 @@ import {
|
|
|
37
37
|
jsxDEV,
|
|
38
38
|
jsxs,
|
|
39
39
|
type RenderContext,
|
|
40
|
-
} from
|
|
40
|
+
} from '../jsx-runtime'
|
|
41
41
|
|
|
42
42
|
// ─── Test helpers ──────────────────────────────────────────────────────────────
|
|
43
43
|
|
|
44
44
|
function container(): HTMLElement {
|
|
45
|
-
const el = document.createElement(
|
|
45
|
+
const el = document.createElement('div')
|
|
46
46
|
document.body.appendChild(el)
|
|
47
47
|
return el
|
|
48
48
|
}
|
|
@@ -87,21 +87,21 @@ function createHookRunner<T>(fn: () => T): {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
describe(
|
|
90
|
+
describe('@pyreon/vue-compat', () => {
|
|
91
91
|
// ─── ref ────────────────────────────────────────────────────────────────
|
|
92
92
|
|
|
93
|
-
it(
|
|
93
|
+
it('ref() creates reactive ref with .value', () => {
|
|
94
94
|
const count = ref(0)
|
|
95
95
|
expect(count.value).toBe(0)
|
|
96
96
|
})
|
|
97
97
|
|
|
98
|
-
it(
|
|
98
|
+
it('ref().value setter updates value', () => {
|
|
99
99
|
const count = ref(0)
|
|
100
100
|
count.value = 5
|
|
101
101
|
expect(count.value).toBe(5)
|
|
102
102
|
})
|
|
103
103
|
|
|
104
|
-
it(
|
|
104
|
+
it('ref() is hook-indexed inside component', () => {
|
|
105
105
|
const runner = createHookRunner(() => {
|
|
106
106
|
const count = ref(42)
|
|
107
107
|
return count
|
|
@@ -113,7 +113,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
113
113
|
expect(r2.value).toBe(100)
|
|
114
114
|
})
|
|
115
115
|
|
|
116
|
-
it(
|
|
116
|
+
it('ref() setter calls scheduleRerender inside component', () => {
|
|
117
117
|
let rerenders = 0
|
|
118
118
|
const ctx: RenderContext = {
|
|
119
119
|
hooks: [],
|
|
@@ -135,7 +135,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
135
135
|
|
|
136
136
|
// ─── shallowRef ────────────────────────────────────────────────────────
|
|
137
137
|
|
|
138
|
-
it(
|
|
138
|
+
it('shallowRef() creates a ref (same as ref in Pyreon)', () => {
|
|
139
139
|
const r = shallowRef(42)
|
|
140
140
|
expect(r.value).toBe(42)
|
|
141
141
|
expect(isRef(r)).toBe(true)
|
|
@@ -145,7 +145,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
145
145
|
|
|
146
146
|
// ─── triggerRef ────────────────────────────────────────────────────────
|
|
147
147
|
|
|
148
|
-
it(
|
|
148
|
+
it('triggerRef forces subscribers to re-run', () => {
|
|
149
149
|
const r = ref(0)
|
|
150
150
|
let runs = 0
|
|
151
151
|
|
|
@@ -160,7 +160,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
160
160
|
stop()
|
|
161
161
|
})
|
|
162
162
|
|
|
163
|
-
it(
|
|
163
|
+
it('triggerRef calls scheduleRerender for hook-indexed refs', () => {
|
|
164
164
|
let rerenders = 0
|
|
165
165
|
const ctx: RenderContext = {
|
|
166
166
|
hooks: [],
|
|
@@ -180,14 +180,14 @@ describe("@pyreon/vue-compat", () => {
|
|
|
180
180
|
expect(rerenders).toBe(1)
|
|
181
181
|
})
|
|
182
182
|
|
|
183
|
-
it(
|
|
183
|
+
it('triggerRef is a no-op if ref has no _signal', () => {
|
|
184
184
|
const fakeRef = { value: 42 } as unknown as ReturnType<typeof ref>
|
|
185
185
|
expect(() => triggerRef(fakeRef)).not.toThrow()
|
|
186
186
|
})
|
|
187
187
|
|
|
188
188
|
// ─── isRef ─────────────────────────────────────────────────────────────
|
|
189
189
|
|
|
190
|
-
it(
|
|
190
|
+
it('isRef() detects refs', () => {
|
|
191
191
|
const r = ref(0)
|
|
192
192
|
expect(isRef(r)).toBe(true)
|
|
193
193
|
expect(isRef(0)).toBe(false)
|
|
@@ -198,17 +198,17 @@ describe("@pyreon/vue-compat", () => {
|
|
|
198
198
|
expect(isRef(c)).toBe(true)
|
|
199
199
|
})
|
|
200
200
|
|
|
201
|
-
it(
|
|
201
|
+
it('isRef returns false for undefined', () => {
|
|
202
202
|
expect(isRef(undefined)).toBe(false)
|
|
203
203
|
})
|
|
204
204
|
|
|
205
|
-
it(
|
|
206
|
-
expect(isRef(
|
|
205
|
+
it('isRef returns false for string', () => {
|
|
206
|
+
expect(isRef('hello')).toBe(false)
|
|
207
207
|
})
|
|
208
208
|
|
|
209
209
|
// ─── unref ─────────────────────────────────────────────────────────────
|
|
210
210
|
|
|
211
|
-
it(
|
|
211
|
+
it('unref() unwraps refs', () => {
|
|
212
212
|
const r = ref(42)
|
|
213
213
|
expect(unref(r)).toBe(42)
|
|
214
214
|
expect(unref(99)).toBe(99)
|
|
@@ -216,7 +216,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
216
216
|
|
|
217
217
|
// ─── computed ───────────────────────────────────────────────────────────
|
|
218
218
|
|
|
219
|
-
it(
|
|
219
|
+
it('computed() derives from ref', () => {
|
|
220
220
|
const count = ref(2)
|
|
221
221
|
const doubled = computed(() => count.value * 2)
|
|
222
222
|
expect(doubled.value).toBe(4)
|
|
@@ -225,14 +225,14 @@ describe("@pyreon/vue-compat", () => {
|
|
|
225
225
|
expect(doubled.value).toBe(20)
|
|
226
226
|
})
|
|
227
227
|
|
|
228
|
-
it(
|
|
228
|
+
it('computed().value is readonly', () => {
|
|
229
229
|
const c = computed(() => 42)
|
|
230
230
|
expect(() => {
|
|
231
231
|
;(c as { value: number }).value = 99
|
|
232
|
-
}).toThrow(
|
|
232
|
+
}).toThrow('readonly')
|
|
233
233
|
})
|
|
234
234
|
|
|
235
|
-
it(
|
|
235
|
+
it('computed() is hook-indexed inside component', () => {
|
|
236
236
|
const count = ref(5)
|
|
237
237
|
const runner = createHookRunner(() => {
|
|
238
238
|
return computed(() => count.value * 2)
|
|
@@ -247,8 +247,8 @@ describe("@pyreon/vue-compat", () => {
|
|
|
247
247
|
|
|
248
248
|
// ─── reactive ──────────────────────────────────────────────────────────
|
|
249
249
|
|
|
250
|
-
it(
|
|
251
|
-
const state = reactive({ count: 0, nested: { value:
|
|
250
|
+
it('reactive() creates deep reactive object', () => {
|
|
251
|
+
const state = reactive({ count: 0, nested: { value: 'hello' } })
|
|
252
252
|
const values: number[] = []
|
|
253
253
|
|
|
254
254
|
const stop = watchEffect(() => {
|
|
@@ -262,7 +262,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
262
262
|
stop()
|
|
263
263
|
})
|
|
264
264
|
|
|
265
|
-
it(
|
|
265
|
+
it('reactive() is hook-indexed inside component', () => {
|
|
266
266
|
const runner = createHookRunner(() => {
|
|
267
267
|
return reactive({ x: 0 })
|
|
268
268
|
})
|
|
@@ -273,7 +273,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
273
273
|
expect(s2.x).toBe(42)
|
|
274
274
|
})
|
|
275
275
|
|
|
276
|
-
it(
|
|
276
|
+
it('reactive() setter calls scheduleRerender inside component', () => {
|
|
277
277
|
let rerenders = 0
|
|
278
278
|
const ctx: RenderContext = {
|
|
279
279
|
hooks: [],
|
|
@@ -295,7 +295,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
295
295
|
|
|
296
296
|
// ─── shallowReactive ──────────────────────────────────────────────────
|
|
297
297
|
|
|
298
|
-
it(
|
|
298
|
+
it('shallowReactive() creates reactive object (same as reactive)', () => {
|
|
299
299
|
const state = shallowReactive({ count: 0 })
|
|
300
300
|
const values: number[] = []
|
|
301
301
|
|
|
@@ -310,30 +310,30 @@ describe("@pyreon/vue-compat", () => {
|
|
|
310
310
|
|
|
311
311
|
// ─── readonly ──────────────────────────────────────────────────────────
|
|
312
312
|
|
|
313
|
-
it(
|
|
313
|
+
it('readonly() prevents mutations', () => {
|
|
314
314
|
const obj = readonly({ count: 0 })
|
|
315
315
|
expect(obj.count).toBe(0)
|
|
316
316
|
expect(() => {
|
|
317
317
|
;(obj as { count: number }).count = 5
|
|
318
|
-
}).toThrow(
|
|
318
|
+
}).toThrow('readonly')
|
|
319
319
|
})
|
|
320
320
|
|
|
321
|
-
it(
|
|
321
|
+
it('readonly() prevents delete', () => {
|
|
322
322
|
const obj = readonly({ count: 0 }) as Record<string, unknown>
|
|
323
323
|
expect(() => {
|
|
324
324
|
delete obj.count
|
|
325
|
-
}).toThrow(
|
|
325
|
+
}).toThrow('Cannot delete')
|
|
326
326
|
})
|
|
327
327
|
|
|
328
|
-
it(
|
|
328
|
+
it('readonly() throws on symbol property set', () => {
|
|
329
329
|
const obj = readonly({ count: 0 })
|
|
330
|
-
const sym = Symbol(
|
|
330
|
+
const sym = Symbol('test')
|
|
331
331
|
expect(() => {
|
|
332
|
-
;(obj as Record<symbol, unknown>)[sym] =
|
|
333
|
-
}).toThrow(
|
|
332
|
+
;(obj as Record<symbol, unknown>)[sym] = 'value'
|
|
333
|
+
}).toThrow('readonly')
|
|
334
334
|
})
|
|
335
335
|
|
|
336
|
-
it(
|
|
336
|
+
it('readonly() is hook-indexed inside component', () => {
|
|
337
337
|
const runner = createHookRunner(() => {
|
|
338
338
|
return readonly({ count: 0 })
|
|
339
339
|
})
|
|
@@ -344,30 +344,30 @@ describe("@pyreon/vue-compat", () => {
|
|
|
344
344
|
|
|
345
345
|
// ─── toRaw ─────────────────────────────────────────────────────────────
|
|
346
346
|
|
|
347
|
-
it(
|
|
347
|
+
it('toRaw() returns raw object for reactive', () => {
|
|
348
348
|
const original = { count: 0 }
|
|
349
349
|
const state = reactive(original)
|
|
350
350
|
const raw = toRaw(state)
|
|
351
351
|
expect(raw).toBe(original)
|
|
352
352
|
})
|
|
353
353
|
|
|
354
|
-
it(
|
|
354
|
+
it('toRaw() returns raw object for readonly', () => {
|
|
355
355
|
const original = { count: 0 }
|
|
356
356
|
const ro = readonly(original)
|
|
357
357
|
const raw = toRaw(ro)
|
|
358
358
|
expect(raw).toBe(original)
|
|
359
359
|
})
|
|
360
360
|
|
|
361
|
-
it(
|
|
361
|
+
it('toRaw() returns same object for plain object', () => {
|
|
362
362
|
const obj = { a: 1 }
|
|
363
363
|
expect(toRaw(obj)).toBe(obj)
|
|
364
364
|
})
|
|
365
365
|
|
|
366
366
|
// ─── toRef ─────────────────────────────────────────────────────────────
|
|
367
367
|
|
|
368
|
-
it(
|
|
368
|
+
it('toRef() creates ref linked to reactive property', () => {
|
|
369
369
|
const state = reactive({ count: 0 })
|
|
370
|
-
const countRef = toRef(state,
|
|
370
|
+
const countRef = toRef(state, 'count')
|
|
371
371
|
|
|
372
372
|
expect(isRef(countRef)).toBe(true)
|
|
373
373
|
expect(countRef.value).toBe(0)
|
|
@@ -379,10 +379,10 @@ describe("@pyreon/vue-compat", () => {
|
|
|
379
379
|
expect(countRef.value).toBe(20)
|
|
380
380
|
})
|
|
381
381
|
|
|
382
|
-
it(
|
|
382
|
+
it('toRef() is hook-indexed inside component', () => {
|
|
383
383
|
const state = reactive({ count: 0 })
|
|
384
384
|
const runner = createHookRunner(() => {
|
|
385
|
-
return toRef(state,
|
|
385
|
+
return toRef(state, 'count')
|
|
386
386
|
})
|
|
387
387
|
const r1 = runner.run()
|
|
388
388
|
const r2 = runner.run()
|
|
@@ -391,19 +391,19 @@ describe("@pyreon/vue-compat", () => {
|
|
|
391
391
|
|
|
392
392
|
// ─── toRefs ────────────────────────────────────────────────────────────
|
|
393
393
|
|
|
394
|
-
it(
|
|
395
|
-
const state = reactive({ a: 1, b:
|
|
394
|
+
it('toRefs() converts reactive to refs', () => {
|
|
395
|
+
const state = reactive({ a: 1, b: 'hello' })
|
|
396
396
|
const refs = toRefs(state)
|
|
397
397
|
|
|
398
398
|
expect(isRef(refs.a)).toBe(true)
|
|
399
399
|
expect(refs.a.value).toBe(1)
|
|
400
|
-
expect(refs.b.value).toBe(
|
|
400
|
+
expect(refs.b.value).toBe('hello')
|
|
401
401
|
|
|
402
402
|
refs.a.value = 10
|
|
403
403
|
expect(state.a).toBe(10)
|
|
404
404
|
})
|
|
405
405
|
|
|
406
|
-
it(
|
|
406
|
+
it('toRefs() is hook-indexed inside component', () => {
|
|
407
407
|
const state = reactive({ x: 1, y: 2 })
|
|
408
408
|
const runner = createHookRunner(() => {
|
|
409
409
|
return toRefs(state)
|
|
@@ -415,7 +415,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
415
415
|
|
|
416
416
|
// ─── watch ──────────────────────────────────────────────────────────────
|
|
417
417
|
|
|
418
|
-
it(
|
|
418
|
+
it('watch() fires on ref change', () => {
|
|
419
419
|
const count = ref(0)
|
|
420
420
|
const calls: number[] = []
|
|
421
421
|
|
|
@@ -430,7 +430,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
430
430
|
stop()
|
|
431
431
|
})
|
|
432
432
|
|
|
433
|
-
it(
|
|
433
|
+
it('watch() provides old and new values', () => {
|
|
434
434
|
const count = ref(10)
|
|
435
435
|
const history: [number, number | undefined][] = []
|
|
436
436
|
|
|
@@ -448,7 +448,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
448
448
|
stop()
|
|
449
449
|
})
|
|
450
450
|
|
|
451
|
-
it(
|
|
451
|
+
it('watch() with immediate fires synchronously', () => {
|
|
452
452
|
const count = ref(5)
|
|
453
453
|
const calls: [number, number | undefined][] = []
|
|
454
454
|
|
|
@@ -465,7 +465,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
465
465
|
stop()
|
|
466
466
|
})
|
|
467
467
|
|
|
468
|
-
it(
|
|
468
|
+
it('watch() with getter function as source', () => {
|
|
469
469
|
const count = ref(0)
|
|
470
470
|
const calls: number[] = []
|
|
471
471
|
|
|
@@ -481,7 +481,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
481
481
|
stop()
|
|
482
482
|
})
|
|
483
483
|
|
|
484
|
-
it(
|
|
484
|
+
it('watch() stop function disposes watcher', () => {
|
|
485
485
|
const count = ref(0)
|
|
486
486
|
const calls: number[] = []
|
|
487
487
|
|
|
@@ -497,7 +497,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
497
497
|
expect(calls).toEqual([1])
|
|
498
498
|
})
|
|
499
499
|
|
|
500
|
-
it(
|
|
500
|
+
it('watch() is hook-indexed inside component', () => {
|
|
501
501
|
const count = ref(0)
|
|
502
502
|
const calls: number[] = []
|
|
503
503
|
const runner = createHookRunner(() => {
|
|
@@ -514,7 +514,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
514
514
|
stop1()
|
|
515
515
|
})
|
|
516
516
|
|
|
517
|
-
it(
|
|
517
|
+
it('watch with immediate tracks subsequent changes too', () => {
|
|
518
518
|
const count = ref(0)
|
|
519
519
|
const calls: [number, number | undefined][] = []
|
|
520
520
|
|
|
@@ -535,7 +535,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
535
535
|
stop()
|
|
536
536
|
})
|
|
537
537
|
|
|
538
|
-
it(
|
|
538
|
+
it('watch with getter function and immediate', () => {
|
|
539
539
|
const count = ref(5)
|
|
540
540
|
const calls: [number, number | undefined][] = []
|
|
541
541
|
|
|
@@ -553,7 +553,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
553
553
|
|
|
554
554
|
// ─── watchEffect ───────────────────────────────────────────────────────
|
|
555
555
|
|
|
556
|
-
it(
|
|
556
|
+
it('watchEffect() tracks dependencies', () => {
|
|
557
557
|
const count = ref(0)
|
|
558
558
|
const values: number[] = []
|
|
559
559
|
|
|
@@ -571,7 +571,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
571
571
|
expect(values).toEqual([0, 1, 2])
|
|
572
572
|
})
|
|
573
573
|
|
|
574
|
-
it(
|
|
574
|
+
it('watchEffect() is hook-indexed inside component', () => {
|
|
575
575
|
const count = ref(0)
|
|
576
576
|
const values: number[] = []
|
|
577
577
|
const runner = createHookRunner(() => {
|
|
@@ -590,7 +590,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
590
590
|
|
|
591
591
|
// ─── nextTick ──────────────────────────────────────────────────────────
|
|
592
592
|
|
|
593
|
-
it(
|
|
593
|
+
it('nextTick() resolves after flush', async () => {
|
|
594
594
|
const count = ref(0)
|
|
595
595
|
count.value = 42
|
|
596
596
|
await nextTick()
|
|
@@ -599,60 +599,60 @@ describe("@pyreon/vue-compat", () => {
|
|
|
599
599
|
|
|
600
600
|
// ─── lifecycle (with Pyreon fallback) ──────────────────────────────────
|
|
601
601
|
|
|
602
|
-
it(
|
|
602
|
+
it('onMounted/onUnmounted lifecycle hooks work with defineComponent', () => {
|
|
603
603
|
const mounted: string[] = []
|
|
604
604
|
const unmounted: string[] = []
|
|
605
605
|
|
|
606
606
|
const Comp = defineComponent({
|
|
607
|
-
name:
|
|
607
|
+
name: 'TestComp',
|
|
608
608
|
setup() {
|
|
609
609
|
onMounted(() => {
|
|
610
|
-
mounted.push(
|
|
610
|
+
mounted.push('mounted')
|
|
611
611
|
})
|
|
612
612
|
onUnmounted(() => {
|
|
613
|
-
unmounted.push(
|
|
613
|
+
unmounted.push('unmounted')
|
|
614
614
|
})
|
|
615
|
-
return () => h(
|
|
615
|
+
return () => h('div', null, 'test')
|
|
616
616
|
},
|
|
617
617
|
})
|
|
618
618
|
|
|
619
619
|
const el = container()
|
|
620
620
|
const unmount = mount(h(Comp, null), el)
|
|
621
621
|
|
|
622
|
-
expect(mounted).toEqual([
|
|
622
|
+
expect(mounted).toEqual(['mounted'])
|
|
623
623
|
expect(unmounted).toEqual([])
|
|
624
624
|
|
|
625
625
|
unmount()
|
|
626
|
-
expect(unmounted).toEqual([
|
|
626
|
+
expect(unmounted).toEqual(['unmounted'])
|
|
627
627
|
})
|
|
628
628
|
|
|
629
|
-
it(
|
|
629
|
+
it('onBeforeMount works (maps to onMount)', () => {
|
|
630
630
|
const calls: string[] = []
|
|
631
631
|
|
|
632
632
|
const Comp = defineComponent({
|
|
633
633
|
setup() {
|
|
634
634
|
onBeforeMount(() => {
|
|
635
|
-
calls.push(
|
|
635
|
+
calls.push('beforeMount')
|
|
636
636
|
})
|
|
637
|
-
return () => h(
|
|
637
|
+
return () => h('div', null, 'test')
|
|
638
638
|
},
|
|
639
639
|
})
|
|
640
640
|
|
|
641
641
|
const el = container()
|
|
642
642
|
const unmount = mount(h(Comp, null), el)
|
|
643
|
-
expect(calls).toEqual([
|
|
643
|
+
expect(calls).toEqual(['beforeMount'])
|
|
644
644
|
unmount()
|
|
645
645
|
})
|
|
646
646
|
|
|
647
|
-
it(
|
|
647
|
+
it('onBeforeUnmount works (maps to onUnmount)', () => {
|
|
648
648
|
const calls: string[] = []
|
|
649
649
|
|
|
650
650
|
const Comp = defineComponent({
|
|
651
651
|
setup() {
|
|
652
652
|
onBeforeUnmount(() => {
|
|
653
|
-
calls.push(
|
|
653
|
+
calls.push('beforeUnmount')
|
|
654
654
|
})
|
|
655
|
-
return () => h(
|
|
655
|
+
return () => h('div', null, 'test')
|
|
656
656
|
},
|
|
657
657
|
})
|
|
658
658
|
|
|
@@ -660,191 +660,191 @@ describe("@pyreon/vue-compat", () => {
|
|
|
660
660
|
const unmount = mount(h(Comp, null), el)
|
|
661
661
|
expect(calls).toEqual([])
|
|
662
662
|
unmount()
|
|
663
|
-
expect(calls).toEqual([
|
|
663
|
+
expect(calls).toEqual(['beforeUnmount'])
|
|
664
664
|
})
|
|
665
665
|
|
|
666
|
-
it(
|
|
667
|
-
expect(typeof onUpdated).toBe(
|
|
666
|
+
it('onUpdated is a function', () => {
|
|
667
|
+
expect(typeof onUpdated).toBe('function')
|
|
668
668
|
})
|
|
669
669
|
|
|
670
|
-
it(
|
|
670
|
+
it('onMounted queues pendingEffect inside hook context', () => {
|
|
671
671
|
const { ctx } = withHookCtx(() => {
|
|
672
672
|
onMounted(() => {})
|
|
673
673
|
})
|
|
674
674
|
expect(ctx.pendingEffects.length).toBe(1)
|
|
675
675
|
})
|
|
676
676
|
|
|
677
|
-
it(
|
|
677
|
+
it('onUnmounted pushes to unmountCallbacks inside hook context', () => {
|
|
678
678
|
const calls: string[] = []
|
|
679
679
|
const { ctx } = withHookCtx(() => {
|
|
680
680
|
onUnmounted(() => {
|
|
681
|
-
calls.push(
|
|
681
|
+
calls.push('unmounted')
|
|
682
682
|
})
|
|
683
683
|
})
|
|
684
684
|
expect(ctx.unmountCallbacks.length).toBe(1)
|
|
685
685
|
ctx.unmountCallbacks[0]!()
|
|
686
|
-
expect(calls).toEqual([
|
|
686
|
+
expect(calls).toEqual(['unmounted'])
|
|
687
687
|
})
|
|
688
688
|
|
|
689
689
|
// ─── provide / inject ─────────────────────────────────────────────────
|
|
690
690
|
|
|
691
|
-
it(
|
|
692
|
-
provide(
|
|
693
|
-
expect(inject(
|
|
691
|
+
it('provide/inject with string key', () => {
|
|
692
|
+
provide('theme', 'dark')
|
|
693
|
+
expect(inject('theme')).toBe('dark')
|
|
694
694
|
})
|
|
695
695
|
|
|
696
|
-
it(
|
|
697
|
-
const key = Symbol(
|
|
696
|
+
it('provide/inject with symbol key', () => {
|
|
697
|
+
const key = Symbol('test-key')
|
|
698
698
|
provide(key, { value: 42 })
|
|
699
699
|
expect((inject(key) as { value: number }).value).toBe(42)
|
|
700
700
|
})
|
|
701
701
|
|
|
702
|
-
it(
|
|
703
|
-
const key = Symbol(
|
|
704
|
-
expect(inject(key,
|
|
702
|
+
it('inject returns default value when not provided', () => {
|
|
703
|
+
const key = Symbol('missing-key')
|
|
704
|
+
expect(inject(key, 'fallback')).toBe('fallback')
|
|
705
705
|
})
|
|
706
706
|
|
|
707
|
-
it(
|
|
708
|
-
const key = Symbol(
|
|
707
|
+
it('inject returns undefined when not provided and no default', () => {
|
|
708
|
+
const key = Symbol('no-default')
|
|
709
709
|
expect(inject(key)).toBeUndefined()
|
|
710
710
|
})
|
|
711
711
|
|
|
712
|
-
it(
|
|
713
|
-
const key =
|
|
712
|
+
it('provide is hook-indexed inside component', () => {
|
|
713
|
+
const key = 'hook-provide-test'
|
|
714
714
|
const runner = createHookRunner(() => {
|
|
715
|
-
provide(key,
|
|
715
|
+
provide(key, 'value')
|
|
716
716
|
})
|
|
717
717
|
runner.run()
|
|
718
718
|
runner.run()
|
|
719
719
|
})
|
|
720
720
|
|
|
721
|
-
it(
|
|
722
|
-
const key =
|
|
723
|
-
provide(key,
|
|
724
|
-
expect(inject(key)).toBe(
|
|
725
|
-
provide(key,
|
|
726
|
-
expect(inject(key)).toBe(
|
|
721
|
+
it('provide overwrites previously provided value (outside component)', () => {
|
|
722
|
+
const key = 'overwrite-test'
|
|
723
|
+
provide(key, 'first')
|
|
724
|
+
expect(inject(key)).toBe('first')
|
|
725
|
+
provide(key, 'second')
|
|
726
|
+
expect(inject(key)).toBe('second')
|
|
727
727
|
})
|
|
728
728
|
|
|
729
729
|
// ─── defineComponent ──────────────────────────────────────────────────
|
|
730
730
|
|
|
731
|
-
it(
|
|
731
|
+
it('defineComponent with setup function returning render fn', () => {
|
|
732
732
|
const Comp = defineComponent({
|
|
733
|
-
name:
|
|
733
|
+
name: 'TestComp',
|
|
734
734
|
setup() {
|
|
735
735
|
const count = ref(0)
|
|
736
|
-
return () => h(
|
|
736
|
+
return () => h('div', null, String(count.value))
|
|
737
737
|
},
|
|
738
738
|
})
|
|
739
739
|
|
|
740
740
|
const el = container()
|
|
741
741
|
const unmount = mount(h(Comp, null), el)
|
|
742
|
-
expect(el.textContent).toBe(
|
|
742
|
+
expect(el.textContent).toBe('0')
|
|
743
743
|
unmount()
|
|
744
744
|
})
|
|
745
745
|
|
|
746
|
-
it(
|
|
746
|
+
it('defineComponent with setup returning VNode directly', () => {
|
|
747
747
|
const Comp = defineComponent({
|
|
748
748
|
setup() {
|
|
749
|
-
return h(
|
|
749
|
+
return h('span', null, 'direct')
|
|
750
750
|
},
|
|
751
751
|
})
|
|
752
752
|
|
|
753
753
|
const el = container()
|
|
754
754
|
const unmount = mount(h(Comp, null), el)
|
|
755
|
-
expect(el.textContent).toBe(
|
|
755
|
+
expect(el.textContent).toBe('direct')
|
|
756
756
|
unmount()
|
|
757
757
|
})
|
|
758
758
|
|
|
759
|
-
it(
|
|
760
|
-
const Comp = defineComponent(() => h(
|
|
759
|
+
it('defineComponent with function shorthand', () => {
|
|
760
|
+
const Comp = defineComponent(() => h('div', null, 'shorthand'))
|
|
761
761
|
const el = container()
|
|
762
762
|
const unmount = mount(h(Comp, null), el)
|
|
763
|
-
expect(el.textContent).toBe(
|
|
763
|
+
expect(el.textContent).toBe('shorthand')
|
|
764
764
|
unmount()
|
|
765
765
|
})
|
|
766
766
|
|
|
767
|
-
it(
|
|
767
|
+
it('defineComponent with name sets function name', () => {
|
|
768
768
|
const Comp = defineComponent({
|
|
769
|
-
name:
|
|
769
|
+
name: 'MyComponent',
|
|
770
770
|
setup() {
|
|
771
|
-
return h(
|
|
771
|
+
return h('div', null, 'named')
|
|
772
772
|
},
|
|
773
773
|
})
|
|
774
|
-
expect(Comp.name).toBe(
|
|
774
|
+
expect(Comp.name).toBe('MyComponent')
|
|
775
775
|
})
|
|
776
776
|
|
|
777
|
-
it(
|
|
777
|
+
it('defineComponent without name', () => {
|
|
778
778
|
const Comp = defineComponent({
|
|
779
779
|
setup() {
|
|
780
|
-
return h(
|
|
780
|
+
return h('div', null, 'unnamed')
|
|
781
781
|
},
|
|
782
782
|
})
|
|
783
|
-
expect(typeof Comp).toBe(
|
|
783
|
+
expect(typeof Comp).toBe('function')
|
|
784
784
|
})
|
|
785
785
|
|
|
786
786
|
// ─── h / Fragment ─────────────────────────────────────────────────────
|
|
787
787
|
|
|
788
|
-
it(
|
|
789
|
-
expect(typeof h).toBe(
|
|
790
|
-
const vnode = h(
|
|
791
|
-
expect(vnode.type).toBe(
|
|
788
|
+
it('h is re-exported', () => {
|
|
789
|
+
expect(typeof h).toBe('function')
|
|
790
|
+
const vnode = h('div', null, 'test')
|
|
791
|
+
expect(vnode.type).toBe('div')
|
|
792
792
|
})
|
|
793
793
|
|
|
794
|
-
it(
|
|
795
|
-
expect(typeof Fragment).toBe(
|
|
794
|
+
it('Fragment is re-exported', () => {
|
|
795
|
+
expect(typeof Fragment).toBe('symbol')
|
|
796
796
|
})
|
|
797
797
|
|
|
798
798
|
// ─── createApp ────────────────────────────────────────────────────────
|
|
799
799
|
|
|
800
|
-
it(
|
|
801
|
-
const Comp = () => h(
|
|
800
|
+
it('createApp().mount mounts to element', () => {
|
|
801
|
+
const Comp = () => h('div', null, 'app')
|
|
802
802
|
const el = container()
|
|
803
803
|
const app = createApp(Comp)
|
|
804
804
|
const unmount = app.mount(el)
|
|
805
|
-
expect(el.textContent).toBe(
|
|
805
|
+
expect(el.textContent).toBe('app')
|
|
806
806
|
unmount()
|
|
807
807
|
})
|
|
808
808
|
|
|
809
|
-
it(
|
|
809
|
+
it('createApp().mount with string selector', () => {
|
|
810
810
|
const el = container()
|
|
811
|
-
el.id =
|
|
811
|
+
el.id = 'test-app-mount-vue'
|
|
812
812
|
document.body.appendChild(el)
|
|
813
813
|
|
|
814
|
-
const Comp = () => h(
|
|
814
|
+
const Comp = () => h('div', null, 'selector-app')
|
|
815
815
|
const app = createApp(Comp)
|
|
816
|
-
const unmount = app.mount(
|
|
817
|
-
expect(el.textContent).toBe(
|
|
816
|
+
const unmount = app.mount('#test-app-mount-vue')
|
|
817
|
+
expect(el.textContent).toBe('selector-app')
|
|
818
818
|
unmount()
|
|
819
819
|
})
|
|
820
820
|
|
|
821
|
-
it(
|
|
822
|
-
const Comp = () => h(
|
|
821
|
+
it('createApp().mount throws for missing selector', () => {
|
|
822
|
+
const Comp = () => h('div', null, 'app')
|
|
823
823
|
const app = createApp(Comp)
|
|
824
|
-
expect(() => app.mount(
|
|
824
|
+
expect(() => app.mount('#nonexistent-element')).toThrow('Cannot find mount target')
|
|
825
825
|
})
|
|
826
826
|
|
|
827
|
-
it(
|
|
828
|
-
const Comp = ((props: { name: string }) => h(
|
|
827
|
+
it('createApp with props passes them to component', () => {
|
|
828
|
+
const Comp = ((props: { name: string }) => h('div', null, props.name)) as ComponentFn
|
|
829
829
|
const el = container()
|
|
830
|
-
const app = createApp(Comp, { name:
|
|
830
|
+
const app = createApp(Comp, { name: 'world' })
|
|
831
831
|
const unmount = app.mount(el)
|
|
832
|
-
expect(el.textContent).toBe(
|
|
832
|
+
expect(el.textContent).toBe('world')
|
|
833
833
|
unmount()
|
|
834
834
|
})
|
|
835
835
|
|
|
836
|
-
it(
|
|
837
|
-
const Comp = () => h(
|
|
836
|
+
it('createApp with no props', () => {
|
|
837
|
+
const Comp = () => h('div', null, 'no-props')
|
|
838
838
|
const el = container()
|
|
839
839
|
const app = createApp(Comp)
|
|
840
840
|
const unmount = app.mount(el)
|
|
841
|
-
expect(el.textContent).toBe(
|
|
841
|
+
expect(el.textContent).toBe('no-props')
|
|
842
842
|
unmount()
|
|
843
843
|
})
|
|
844
844
|
|
|
845
845
|
// ─── batch ────────────────────────────────────────────────────────────
|
|
846
846
|
|
|
847
|
-
it(
|
|
847
|
+
it('batch is re-exported and coalesces updates', () => {
|
|
848
848
|
const count = ref(0)
|
|
849
849
|
const values: number[] = []
|
|
850
850
|
|
|
@@ -865,38 +865,38 @@ describe("@pyreon/vue-compat", () => {
|
|
|
865
865
|
|
|
866
866
|
// ─── jsx-runtime ─────────────────────────────────────────────────────
|
|
867
867
|
|
|
868
|
-
it(
|
|
869
|
-
const vnode = jsx(
|
|
870
|
-
expect(vnode.type).toBe(
|
|
868
|
+
it('jsx creates DOM element VNodes', () => {
|
|
869
|
+
const vnode = jsx('div', { class: 'test', children: 'hello' })
|
|
870
|
+
expect(vnode.type).toBe('div')
|
|
871
871
|
})
|
|
872
872
|
|
|
873
|
-
it(
|
|
873
|
+
it('jsxs is same as jsx', () => {
|
|
874
874
|
expect(jsxs).toBe(jsx)
|
|
875
875
|
})
|
|
876
876
|
|
|
877
|
-
it(
|
|
877
|
+
it('jsxDEV is same as jsx', () => {
|
|
878
878
|
expect(jsxDEV).toBe(jsx)
|
|
879
879
|
})
|
|
880
880
|
|
|
881
|
-
it(
|
|
881
|
+
it('jsx wraps component functions', () => {
|
|
882
882
|
function MyComp() {
|
|
883
|
-
return h(
|
|
883
|
+
return h('div', null, 'test')
|
|
884
884
|
}
|
|
885
885
|
const vnode = jsx(MyComp, {})
|
|
886
886
|
expect(vnode.type).not.toBe(MyComp)
|
|
887
|
-
expect(typeof vnode.type).toBe(
|
|
887
|
+
expect(typeof vnode.type).toBe('function')
|
|
888
888
|
})
|
|
889
889
|
|
|
890
|
-
it(
|
|
891
|
-
const vnode = jsx(
|
|
892
|
-
expect(vnode.props?.key).toBe(
|
|
890
|
+
it('jsx passes key as prop', () => {
|
|
891
|
+
const vnode = jsx('div', { children: 'test' }, 'my-key')
|
|
892
|
+
expect(vnode.props?.key).toBe('my-key')
|
|
893
893
|
})
|
|
894
894
|
|
|
895
|
-
it(
|
|
895
|
+
it('getCurrentCtx returns null outside render', () => {
|
|
896
896
|
expect(getCurrentCtx()).toBeNull()
|
|
897
897
|
})
|
|
898
898
|
|
|
899
|
-
it(
|
|
899
|
+
it('getCurrentCtx returns context during render', () => {
|
|
900
900
|
withHookCtx((c) => {
|
|
901
901
|
expect(getCurrentCtx()).toBe(c)
|
|
902
902
|
})
|
|
@@ -905,13 +905,13 @@ describe("@pyreon/vue-compat", () => {
|
|
|
905
905
|
|
|
906
906
|
// ─── standalone (outside component) ──────────────────────────────────
|
|
907
907
|
|
|
908
|
-
it(
|
|
908
|
+
it('ref() outside component creates standalone ref', () => {
|
|
909
909
|
const count = ref(0)
|
|
910
910
|
count.value = 10
|
|
911
911
|
expect(count.value).toBe(10)
|
|
912
912
|
})
|
|
913
913
|
|
|
914
|
-
it(
|
|
914
|
+
it('computed() outside component creates standalone computed', () => {
|
|
915
915
|
const count = ref(5)
|
|
916
916
|
const doubled = computed(() => count.value * 2)
|
|
917
917
|
expect(doubled.value).toBe(10)
|
|
@@ -919,7 +919,7 @@ describe("@pyreon/vue-compat", () => {
|
|
|
919
919
|
expect(doubled.value).toBe(14)
|
|
920
920
|
})
|
|
921
921
|
|
|
922
|
-
it(
|
|
922
|
+
it('reactive() outside component creates standalone reactive', () => {
|
|
923
923
|
const state = reactive({ x: 1 })
|
|
924
924
|
state.x = 2
|
|
925
925
|
expect(state.x).toBe(2)
|