@playfast/reform-proof 1.0.1 → 1.2.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 +12 -12
- package/package.json +18 -18
- package/src/engine.ts +1405 -337
- package/src/errors.ts +0 -14
- package/src/fingerprint.test.ts +24 -0
- package/src/fingerprint.ts +73 -0
- package/src/index.ts +240 -216
- package/src/nested-feature.test.ts +174 -0
- package/src/runner.ts +5 -17
- package/src/structure-events.test.ts +9 -14
- package/src/structure-locators.test.ts +19 -32
- package/src/typed-seams.test.ts +6 -14
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import { expect, it } from '@effect/vitest'
|
|
2
|
+
import { Effect, Layer, Schema as S } from 'effect'
|
|
3
|
+
import {
|
|
4
|
+
Composition,
|
|
5
|
+
Engine,
|
|
6
|
+
Feature,
|
|
7
|
+
type FeatureSlotTarget,
|
|
8
|
+
featureModule,
|
|
9
|
+
mount,
|
|
10
|
+
one,
|
|
11
|
+
provide,
|
|
12
|
+
scene,
|
|
13
|
+
slot,
|
|
14
|
+
State,
|
|
15
|
+
ui,
|
|
16
|
+
} from '@playfast/reform'
|
|
17
|
+
import { FeatureInput, featureModuleFromInput } from '@playfast/reform/internal'
|
|
18
|
+
import { Product, Proof, ProductRequirement } from './index'
|
|
19
|
+
|
|
20
|
+
const NestedFeatureInput = S.Struct({ value: S.Number })
|
|
21
|
+
|
|
22
|
+
class NestedFeatureValue extends State.make('proof.nestedFeature.value', S.Number) {}
|
|
23
|
+
|
|
24
|
+
class NestedUi extends ui('ProofNestedFeature')<{
|
|
25
|
+
props: { mountValue: number; featureValue: number }
|
|
26
|
+
}>() {}
|
|
27
|
+
|
|
28
|
+
class Nested extends Composition.make('ProofNestedFeature', {
|
|
29
|
+
title: 'Nested feature',
|
|
30
|
+
props: NestedFeatureInput,
|
|
31
|
+
states: [NestedFeatureValue],
|
|
32
|
+
ui: NestedUi,
|
|
33
|
+
})<Nested>() {}
|
|
34
|
+
|
|
35
|
+
const NestedLive = Composition.live(Nested, function* () {
|
|
36
|
+
const props = yield* Nested.props
|
|
37
|
+
const featureValue = yield* NestedFeatureValue
|
|
38
|
+
return mount({
|
|
39
|
+
props: { mountValue: props.value, featureValue },
|
|
40
|
+
slots: {},
|
|
41
|
+
})
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
const NestedModule = featureModuleFromInput(
|
|
45
|
+
NestedFeatureInput,
|
|
46
|
+
[],
|
|
47
|
+
NestedLive.pipe(
|
|
48
|
+
Layer.provideMerge(
|
|
49
|
+
Layer.unwrapEffect(
|
|
50
|
+
Effect.map(FeatureInput, (input) =>
|
|
51
|
+
State.live(NestedFeatureValue, S.decodeUnknownSync(NestedFeatureInput)(input).value),
|
|
52
|
+
),
|
|
53
|
+
),
|
|
54
|
+
),
|
|
55
|
+
),
|
|
56
|
+
)
|
|
57
|
+
|
|
58
|
+
class PlaceholderUi extends ui('ProofNestedFeaturePlaceholder')<{
|
|
59
|
+
props: { phase: string }
|
|
60
|
+
}>() {}
|
|
61
|
+
|
|
62
|
+
class Placeholder extends Composition.make('ProofNestedFeaturePlaceholder', {
|
|
63
|
+
title: 'Nested feature placeholder',
|
|
64
|
+
ui: PlaceholderUi,
|
|
65
|
+
})<Placeholder>() {}
|
|
66
|
+
|
|
67
|
+
const PlaceholderLive = Composition.live(Placeholder, function* () {
|
|
68
|
+
return mount({ props: { phase: 'loading' }, slots: {} })
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
class NestedFeature extends Feature.make('proof.nestedFeature', {
|
|
72
|
+
loadingStrategy: 'lazy',
|
|
73
|
+
input: NestedFeatureInput,
|
|
74
|
+
composition: Nested,
|
|
75
|
+
load: Effect.succeed(NestedModule),
|
|
76
|
+
placeholder: { loading: Placeholder, failed: Placeholder },
|
|
77
|
+
}) {}
|
|
78
|
+
|
|
79
|
+
class NestedSlot extends slot('ProofNestedFeatureSlot')<
|
|
80
|
+
NestedSlot,
|
|
81
|
+
FeatureSlotTarget<typeof NestedFeature>
|
|
82
|
+
>() {}
|
|
83
|
+
|
|
84
|
+
class RootUi extends ui('ProofNestedFeatureRoot')<{
|
|
85
|
+
props: { ready: boolean }
|
|
86
|
+
slots: { Nested: NestedSlot }
|
|
87
|
+
}>() {}
|
|
88
|
+
|
|
89
|
+
class Root extends Composition.make('ProofNestedFeatureRoot', {
|
|
90
|
+
title: 'Nested feature root',
|
|
91
|
+
slots: { Nested: NestedSlot },
|
|
92
|
+
ui: RootUi,
|
|
93
|
+
})<Root>() {}
|
|
94
|
+
|
|
95
|
+
const RootLive = Composition.live(Root, function* () {
|
|
96
|
+
return mount({
|
|
97
|
+
props: { ready: true },
|
|
98
|
+
slots: { Nested: one({ value: 42 }) },
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
|
|
102
|
+
const RootModule = featureModule(
|
|
103
|
+
[],
|
|
104
|
+
Layer.mergeAll(RootLive, PlaceholderLive, provide(NestedSlot, NestedFeature)),
|
|
105
|
+
)
|
|
106
|
+
|
|
107
|
+
class RootFeature extends Feature.make('proof.rootFeature', {
|
|
108
|
+
composition: Root,
|
|
109
|
+
module: RootModule,
|
|
110
|
+
}) {}
|
|
111
|
+
|
|
112
|
+
class HarnessRootSlot extends slot('ProofHarnessRootSlot')<
|
|
113
|
+
HarnessRootSlot,
|
|
114
|
+
FeatureSlotTarget<typeof RootFeature>
|
|
115
|
+
>() {}
|
|
116
|
+
|
|
117
|
+
class HarnessUi extends ui('ProofNestedFeatureHarness')<{
|
|
118
|
+
props: { ready: boolean }
|
|
119
|
+
slots: { Root: HarnessRootSlot }
|
|
120
|
+
}>() {}
|
|
121
|
+
|
|
122
|
+
class Harness extends Composition.make('ProofNestedFeatureHarness', {
|
|
123
|
+
title: 'Nested feature harness',
|
|
124
|
+
slots: { Root: HarnessRootSlot },
|
|
125
|
+
ui: HarnessUi,
|
|
126
|
+
})<Harness>() {}
|
|
127
|
+
|
|
128
|
+
const HarnessLive = Composition.live(Harness, function* () {
|
|
129
|
+
return mount({
|
|
130
|
+
props: { ready: true },
|
|
131
|
+
slots: { Root: one({}) },
|
|
132
|
+
})
|
|
133
|
+
})
|
|
134
|
+
|
|
135
|
+
const RootScene = scene(Harness, {
|
|
136
|
+
provide: [
|
|
137
|
+
Layer.mergeAll(HarnessLive, provide(HarnessRootSlot, RootFeature)).pipe(
|
|
138
|
+
Layer.provideMerge(Engine),
|
|
139
|
+
),
|
|
140
|
+
],
|
|
141
|
+
})
|
|
142
|
+
|
|
143
|
+
class MountsNestedFeature extends ProductRequirement.make(
|
|
144
|
+
Root,
|
|
145
|
+
'mounts a nested native Feature with its slot input',
|
|
146
|
+
) {}
|
|
147
|
+
|
|
148
|
+
class RootProduct extends Product.make(Root, {
|
|
149
|
+
requirements: [MountsNestedFeature],
|
|
150
|
+
}) {}
|
|
151
|
+
|
|
152
|
+
const mountsNestedFeature = Proof.implementVia(MountsNestedFeature, RootScene, function* (app) {
|
|
153
|
+
const root = yield* app.slots.Root.first
|
|
154
|
+
const nested = yield* root.slots.Nested.first
|
|
155
|
+
yield* nested.expectProps({ mountValue: 42, featureValue: 42 })
|
|
156
|
+
})
|
|
157
|
+
|
|
158
|
+
const NestedFeatureProofs = Proof.suite(RootProduct, {
|
|
159
|
+
proofs: [mountsNestedFeature],
|
|
160
|
+
})
|
|
161
|
+
|
|
162
|
+
it.live('proves a Feature that mounts a nested native Feature', () =>
|
|
163
|
+
Effect.gen(function* () {
|
|
164
|
+
const result = yield* Proof.runEffect(NestedFeatureProofs)
|
|
165
|
+
expect(result.results).toEqual([
|
|
166
|
+
{
|
|
167
|
+
requirement: 'mounts a nested native Feature with its slot input',
|
|
168
|
+
ok: true,
|
|
169
|
+
error: undefined,
|
|
170
|
+
},
|
|
171
|
+
])
|
|
172
|
+
expect(result.ok).toBe(true)
|
|
173
|
+
}),
|
|
174
|
+
)
|
package/src/runner.ts
CHANGED
|
@@ -1,38 +1,26 @@
|
|
|
1
1
|
import { Context, Effect, Layer } from 'effect'
|
|
2
|
-
import { driveProof, executeProof } from './engine'
|
|
2
|
+
import { driveProof, driveProofEffect, executeProof, executeProofEffect } from './engine'
|
|
3
3
|
import type { DriveResult, Proof, ProofResult } from './index'
|
|
4
4
|
|
|
5
|
-
// reform-proof runner — the injectable seam HOW a proof is executed. The proof
|
|
6
|
-
// system depends on this layer rather than calling the engine directly, so the
|
|
7
|
-
// execution strategy can be swapped (the vitest adapter resolves the same layer to
|
|
8
|
-
// run each proof as a native test). The default layer is the headless engine in
|
|
9
|
-
// ./engine; mirrors the Tag + Layer house style of reform's `CaptureSink` and
|
|
10
|
-
// `Notifications` services.
|
|
11
|
-
|
|
12
5
|
export interface ProofRunnerApi {
|
|
13
|
-
|
|
6
|
+
readonly executeProofEffect: (proof: Proof) => Effect.Effect<ProofResult, never, never>
|
|
7
|
+
readonly driveProofEffect: (proof: Proof) => Effect.Effect<DriveResult, never, never>
|
|
14
8
|
readonly executeProof: (proof: Proof) => Promise<ProofResult>
|
|
15
|
-
/** Step a proof a frame at a time (the editor's Test-play timeline). */
|
|
16
9
|
readonly driveProof: (proof: Proof) => Promise<DriveResult>
|
|
17
10
|
}
|
|
18
11
|
|
|
19
12
|
const ProofRunnerBase: Context.TagClass<ProofRunner, 'reform-proof/ProofRunner', ProofRunnerApi> =
|
|
20
13
|
Context.Tag('reform-proof/ProofRunner')<ProofRunner, ProofRunnerApi>()
|
|
21
14
|
|
|
22
|
-
/** The service identity for the proof execution strategy. */
|
|
23
15
|
export class ProofRunner extends ProofRunnerBase {}
|
|
24
16
|
|
|
25
|
-
/** The default runner: the headless engine that drives the real reduce loop. */
|
|
26
17
|
export const proofRunnerLayer: Layer.Layer<ProofRunner> = Layer.succeed(ProofRunner, {
|
|
18
|
+
executeProofEffect,
|
|
19
|
+
driveProofEffect,
|
|
27
20
|
executeProof,
|
|
28
21
|
driveProof,
|
|
29
22
|
})
|
|
30
23
|
|
|
31
|
-
/**
|
|
32
|
-
* Resolve the `ProofRunner` from `proofRunnerLayer` and use it — the single seam
|
|
33
|
-
* the proof system (`Proof.run`/`Proof.driver`) and the vitest adapter both run
|
|
34
|
-
* through, so every proof executes via the same injectable engine.
|
|
35
|
-
*/
|
|
36
24
|
export const withProofRunner = <A>(use: (runner: ProofRunnerApi) => Promise<A>): Promise<A> =>
|
|
37
25
|
Effect.runPromise(
|
|
38
26
|
ProofRunner.pipe(
|
|
@@ -16,19 +16,13 @@ import {
|
|
|
16
16
|
import { describe, expect, test } from 'vitest'
|
|
17
17
|
import { Product, Proof, ProductRequirement, expect as proofExpect } from './index'
|
|
18
18
|
|
|
19
|
-
// Plan 03b — events ride ON the structure. A composition whose `live` body returns
|
|
20
|
-
// `mount({ props, events })` never calls its view, so the event triggers it acquires
|
|
21
|
-
// (`yield* Event.trigger(Bumped)`) are NOT captured by a view's CaptureSink — they
|
|
22
|
-
// travel with the frame on `structure.events`. The proof engine's `driveStructure`
|
|
23
|
-
// records them into the same capture the view path uses, so `app.actions.bump()`
|
|
24
|
-
// resolves and settles identically for a Structure frame. This file is the only
|
|
25
|
-
// runtime exercise of the structure EVENT path; the view path stays covered by
|
|
26
|
-
// typed-seams.test.ts.
|
|
27
|
-
|
|
28
19
|
class CountState extends State.make('scount', S.Number) {}
|
|
29
20
|
class MiniStates extends StateGroup.make(CountState) {}
|
|
30
21
|
class Bumped extends Event.make('SBumped', S.Struct({})) {}
|
|
31
|
-
class BumpReducer extends Reducer.make('SBumpReducer', {
|
|
22
|
+
class BumpReducer extends Reducer.make('SBumpReducer', {
|
|
23
|
+
states: [CountState],
|
|
24
|
+
events: [Bumped],
|
|
25
|
+
}) {}
|
|
32
26
|
const BumpReducerLive = Reducer.live(BumpReducer, (n) => n + 1)
|
|
33
27
|
|
|
34
28
|
class CounterUi extends ui('SCounter')<{
|
|
@@ -40,16 +34,17 @@ class Counter extends Composition.make('SCounter', {
|
|
|
40
34
|
states: [MiniStates],
|
|
41
35
|
events: [Bumped],
|
|
42
36
|
ui: CounterUi,
|
|
43
|
-
}) {}
|
|
44
|
-
// Body returns a STRUCTURE carrying the bump trigger on `events` — the view is never
|
|
45
|
-
// called, so the trigger must ride on the frame for the proof to resolve it.
|
|
37
|
+
})<Counter>() {}
|
|
46
38
|
const CounterLive = Composition.live(Counter, function* () {
|
|
47
39
|
const count = yield* StateGroup.select(MiniStates, 'scount')
|
|
48
40
|
const bump = yield* Event.trigger(Bumped)
|
|
49
41
|
return mount({ props: { count }, slots: {}, events: { bump } })
|
|
50
42
|
})
|
|
51
43
|
|
|
52
|
-
const presentations = provide(
|
|
44
|
+
const presentations = provide(
|
|
45
|
+
CounterUi,
|
|
46
|
+
Ui.make(CounterUi, () => null),
|
|
47
|
+
)
|
|
53
48
|
const Views = CounterLive.pipe(Layer.provideMerge(presentations))
|
|
54
49
|
const Logic = BumpReducerLive.pipe(
|
|
55
50
|
Layer.provideMerge(Layer.mergeAll(Engine, StateGroup.live(MiniStates, { scount: 5 }))),
|
|
@@ -4,7 +4,6 @@ import {
|
|
|
4
4
|
Engine,
|
|
5
5
|
each,
|
|
6
6
|
mount,
|
|
7
|
-
Props,
|
|
8
7
|
provide,
|
|
9
8
|
scene,
|
|
10
9
|
slot,
|
|
@@ -16,28 +15,21 @@ import {
|
|
|
16
15
|
import { describe, expect, test } from 'vitest'
|
|
17
16
|
import { type Facade, Product, Proof, ProductRequirement, expect as proofExpect } from './index'
|
|
18
17
|
|
|
19
|
-
// Plan 06 — typed recursive proof navigation. A list parent returns a STRUCTURE
|
|
20
|
-
// whose `Item` slot is filled with `each`, so each child rides a stable `key` (the
|
|
21
|
-
// SINGLE source of the wire key + family key). The proof facade selects a child by
|
|
22
|
-
// that key (`byKey`), filters by computed props (`where`), and reads the fill length
|
|
23
|
-
// (`count`) — all against the structure tree, no view evaluated. `byKey` returns a
|
|
24
|
-
// facade still typed by the child contract, so `.expectProps` checks the CHILD's
|
|
25
|
-
// props and `.slots` would keep descending type-safely.
|
|
26
|
-
|
|
27
|
-
// A list of todos lives in state; the parent computes its props + the `each` fill.
|
|
28
18
|
class TodosState extends State.make(
|
|
29
19
|
'locTodos',
|
|
30
20
|
S.Array(S.Struct({ id: S.String, done: S.Boolean })),
|
|
31
21
|
) {}
|
|
32
22
|
class TodoStates extends StateGroup.make(TodosState) {}
|
|
33
23
|
|
|
34
|
-
class ItemUi extends ui('LocItem')<{
|
|
24
|
+
class ItemUi extends ui('LocItem')<{
|
|
25
|
+
props: { id: string; done: boolean }
|
|
26
|
+
}>() {}
|
|
35
27
|
class Item extends Composition.make('LocItem', {
|
|
36
28
|
title: 'LocItem',
|
|
37
29
|
props: S.Struct({ id: S.String, done: S.Boolean }),
|
|
38
30
|
ui: ItemUi,
|
|
39
|
-
}) {}
|
|
40
|
-
class ItemSlot extends slot('LocItem')<typeof Item>() {}
|
|
31
|
+
})<Item>() {}
|
|
32
|
+
class ItemSlot extends slot('LocItem')<ItemSlot, typeof Item>() {}
|
|
41
33
|
|
|
42
34
|
class ListUi extends ui('LocList')<{
|
|
43
35
|
props: { total: number }
|
|
@@ -48,30 +40,34 @@ class List extends Composition.make('LocList', {
|
|
|
48
40
|
states: [TodoStates],
|
|
49
41
|
slots: { Item: ItemSlot },
|
|
50
42
|
ui: ListUi,
|
|
51
|
-
}) {}
|
|
43
|
+
})<List>() {}
|
|
52
44
|
|
|
53
|
-
// The parent body returns pure data: its own props, and the `Item` slot filled with
|
|
54
|
-
// one keyed child per todo. No `.map`, no JSX — `each` owns multiplicity + key.
|
|
55
45
|
const ListLive = Composition.live(List, function* () {
|
|
56
46
|
const todos = yield* StateGroup.select(TodoStates, 'locTodos')
|
|
57
47
|
return mount({
|
|
58
48
|
props: { total: todos.length },
|
|
59
49
|
slots: {
|
|
60
|
-
Item: each(todos, {
|
|
50
|
+
Item: each(todos, {
|
|
51
|
+
key: (t) => t.id,
|
|
52
|
+
props: (t) => ({ id: t.id, done: t.done }),
|
|
53
|
+
}),
|
|
61
54
|
},
|
|
62
55
|
})
|
|
63
56
|
})
|
|
64
|
-
// A leaf child in structure-as-data echoes the props its parent's `each` fed it
|
|
65
|
-
// (read via the `Props` service), so the recorded capture carries the per-item
|
|
66
|
-
// props `byKey`/`where`/`expectProps` assert against. No view, hook-free.
|
|
67
57
|
const ItemLive = Composition.live(Item, function* () {
|
|
68
|
-
const props
|
|
58
|
+
const props = yield* Item.props
|
|
69
59
|
return mount({ props, slots: {} })
|
|
70
60
|
})
|
|
71
61
|
|
|
72
62
|
const presentations = Layer.mergeAll(
|
|
73
|
-
provide(
|
|
74
|
-
|
|
63
|
+
provide(
|
|
64
|
+
ListUi,
|
|
65
|
+
Ui.make(ListUi, () => null),
|
|
66
|
+
),
|
|
67
|
+
provide(
|
|
68
|
+
ItemUi,
|
|
69
|
+
Ui.make(ItemUi, () => null),
|
|
70
|
+
),
|
|
75
71
|
)
|
|
76
72
|
const wiring = provide(ItemSlot, Item)
|
|
77
73
|
const Views = Layer.mergeAll(ListLive, ItemLive, wiring).pipe(Layer.provideMerge(presentations))
|
|
@@ -94,18 +90,12 @@ class ListProduct extends Product.make(List, { requirements: [Locates] }) {}
|
|
|
94
90
|
describe('typed recursive proof navigation (plan 06)', () => {
|
|
95
91
|
test('byKey / where / count resolve children from the structure tree', async () => {
|
|
96
92
|
const proof = Proof.implement(Locates, ListScene, function* (app) {
|
|
97
|
-
// The parent's computed props.
|
|
98
93
|
yield* proofExpect((yield* app.props).total).toBe(3)
|
|
99
|
-
// count = the fill length.
|
|
100
94
|
yield* proofExpect(yield* app.slots.Item.count).toBe(3)
|
|
101
|
-
// byKey selects the one child mounted under that `each` key; the facade is
|
|
102
|
-
// typed by the CHILD contract, so `expectProps` checks the child's props.
|
|
103
95
|
const second = yield* app.slots.Item.byKey('todo-2')
|
|
104
96
|
yield* second.expectProps({ id: 'todo-2', done: true })
|
|
105
97
|
const first = yield* app.slots.Item.byKey('todo-1')
|
|
106
98
|
yield* first.expectProps({ id: 'todo-1', done: false })
|
|
107
|
-
// where filters children by their computed props (predicate typed by the
|
|
108
|
-
// CHILD contract — `p.done` is known).
|
|
109
99
|
const doneItems = yield* app.slots.Item.where((p) => p.done)
|
|
110
100
|
yield* proofExpect(doneItems.length).toBe(1)
|
|
111
101
|
yield* doneItems[0]!.expectProps({ id: 'todo-2' })
|
|
@@ -123,9 +113,6 @@ describe('typed recursive proof navigation (plan 06)', () => {
|
|
|
123
113
|
})
|
|
124
114
|
})
|
|
125
115
|
|
|
126
|
-
// Type-only: the `byKey`-selected facade is typed by the Item CHILD contract
|
|
127
|
-
// (`{ id, done }`) — recursive typed selection. A wrong prop key in `expectProps`
|
|
128
|
-
// is a compile error. Non-exported, never called; exists only to be typechecked.
|
|
129
116
|
const _negativeTypeCheck = (app: Facade<Ui.Contract<typeof ListUi>>): void => {
|
|
130
117
|
Proof.implement(Locates, ListScene, function* () {
|
|
131
118
|
const child = yield* app.slots.Item.byKey('todo-1')
|
package/src/typed-seams.test.ts
CHANGED
|
@@ -18,42 +18,34 @@ import {
|
|
|
18
18
|
import { describe, expect, test } from 'vitest'
|
|
19
19
|
import { Product, Proof, ProductRequirement, expect as proofExpect } from './index'
|
|
20
20
|
|
|
21
|
-
// Exercises the four type-safety seams closed in this change, each against a
|
|
22
|
-
// self-contained mini Counter (the same fixture shape as the stepper test):
|
|
23
|
-
// #1 typed seeds — seedScene is keyed/valued by the state tuple
|
|
24
|
-
// #2 action results — an action resolves to the settled next props
|
|
25
|
-
// #4 typed assertions — app.expectProps is a contract-typed subset match
|
|
26
|
-
// #5 event coverage — a requirement's declared events must be dispatched
|
|
27
|
-
// Negative cases are compile-time (`@ts-expect-error`) — the whole point is that
|
|
28
|
-
// the bad input never reaches runtime.
|
|
29
|
-
|
|
30
21
|
class CountState extends State.make('count', S.Number) {}
|
|
31
22
|
class MiniStates extends StateGroup.make(CountState) {}
|
|
32
23
|
class Bumped extends Event.make('Bumped', S.Struct({})) {}
|
|
33
24
|
class BumpReducer extends Reducer.make('BumpReducer', { states: [CountState], events: [Bumped] }) {}
|
|
34
25
|
const BumpReducerLive = Reducer.live(BumpReducer, (n) => n + 1)
|
|
35
26
|
|
|
36
|
-
// A trivial slot child: a proof runtime resolves slot-bound compositions, so the
|
|
37
|
-
// app needs at least one slot for the suite's provide layer to type-close.
|
|
38
27
|
class LabelUi extends ui('Label')<{ props: { text: string } }>() {}
|
|
39
|
-
|
|
28
|
+
|
|
29
|
+
class Label extends Composition.make('Label', { title: 'Label', ui: LabelUi })<Label>() {}
|
|
40
30
|
const LabelLive = Composition.live(Label, function* () {
|
|
41
31
|
return mount({ props: { text: 'count' }, slots: {} })
|
|
42
32
|
})
|
|
43
|
-
|
|
33
|
+
|
|
34
|
+
class LabelSlot extends slot('Label')<LabelSlot, typeof Label>() {}
|
|
44
35
|
|
|
45
36
|
class CounterUi extends ui('Counter')<{
|
|
46
37
|
props: { count: number }
|
|
47
38
|
slots: { Label: LabelSlot }
|
|
48
39
|
events: { bump: Trigger<Record<string, never>> }
|
|
49
40
|
}>() {}
|
|
41
|
+
|
|
50
42
|
class Counter extends Composition.make('Counter', {
|
|
51
43
|
title: 'Counter',
|
|
52
44
|
states: [MiniStates],
|
|
53
45
|
events: [Bumped],
|
|
54
46
|
slots: { Label: LabelSlot },
|
|
55
47
|
ui: CounterUi,
|
|
56
|
-
}) {}
|
|
48
|
+
})<Counter>() {}
|
|
57
49
|
const CounterLive = Composition.live(Counter, function* () {
|
|
58
50
|
const count = yield* StateGroup.select(MiniStates, 'count')
|
|
59
51
|
const bump = yield* Event.trigger(Bumped)
|