struxadotcloud/struxa

public

feat: global unslop6531421a month ago191 lines · 4.9 KB

1	---
2	title: Define Generic Context Interfaces for Dependency Injection
3	impact: HIGH
4	impactDescription: enables dependency-injectable state across use-cases
5	tags: composition, context, state, typescript, dependency-injection
6	---
7
8	## Define Generic Context Interfaces for Dependency Injection
9
10	Define a generic interface for your component context with three parts:
11	`state`, `actions`, and `meta
12	can implement-enabling the same UI components to work with completely different
13	state implementations.
14
15	Core principle: Lift state, compose internals, make state
16	dependency-injectable.
17
18	Incorrect (UI coupled to specific state implementation):
19
20	```tsx
21	function ComposerInput() {
22	// Tightly coupled to a specific hook
23	const { input,
24	return <TextInput
25	}
26	```
27
28	Correct (generic interface enables dependency injection):
29
30	```tsx
31	// Define a GENERIC interface that any provider can implement
32	interface ComposerState {
33	input: string;
34	attachments: Attachment
35	isSubmitting: boolean;
36	}
37
38	interface ComposerActions {
39	update: (updater
40	submit: ()
41	}
42
43	interface ComposerMeta {
44	inputRef: React
45	}
46
47	interface ComposerContextValue {
48	state: ComposerState
49	actions: ComposerActions
50	meta: ComposerMeta
51	}
52
53	const ComposerContext = createContext
54	```
55
56	UI components consume the interface, not the implementation:
57
58	```tsx
59	function ComposerInput() {
60	const {
61	state,
62	actions: { update
63	meta,
64	} = use(ComposerContext
65
66	// This component works with ANY provider that implements the interface
67	return (
68	<TextInput
69	ref={meta.inputRef
70	value={state.input
71	onChangeText={(text)
72	/>
73	);
74	}
75	```
76
77	Different providers implement the same interface:
78
79	```tsx
80	// Provider A: Local state for ephemeral forms
81	function ForwardMessageProvider({ children
82	const [state,
83	const inputRef =
84	const submit =
85
86	return (
87	<ComposerContext
88	value={{
89	state,
90	actions: { update: setState
91	meta: { inputRef
92	}}
93	>
94	{children}
95	</ComposerContext>
96	);
97	}
98
99	// Provider B: Global synced state for channels
100	function ChannelProvider({ channelId
101	const { state,
102	const inputRef =
103
104	return (
105	<ComposerContext
106	value={{
107	state,
108	actions: { update,
109	meta: { inputRef
110	}}
111	>
112	{children}
113	</ComposerContext>
114	);
115	}
116	```
117
118	The same composed UI works with both:
119
120	```tsx
121	// Works with ForwardMessageProvider (local state)
122	<ForwardMessageProvider>
123	<Composer.Frame>
124	<Composer.Input />
125	<Composer.Submit />
126	</Composer.Frame>
127	</ForwardMessageProvider>
128
129	// Works with ChannelProvider (global synced state)
130	<ChannelProvider channelId=
131	<Composer.Frame>
132	<Composer.Input />
133	<Composer.Submit />
134	</Composer.Frame>
135	</ChannelProvider>
136	```
137
138	Custom UI outside the component can access state and actions:
139
140	The provider boundary is what matters-not the visual nesting. Components that
141	need shared state don't have to be inside the `Composer.Frame`. They just need
142	to be within the provider.
143
144	```tsx
145	function ForwardMessageDialog() {
146	return (
147	<ForwardMessageProvider>
148	<Dialog>
149	{/* The composer UI */}
150	<Composer.Frame>
151	<Composer.Input placeholder
152	<Composer.Footer>
153	<Composer.Formatting />
154	<Composer.Emojis />
155	</Composer.Footer>
156	</Composer.Frame>
157
158	{/* Custom UI OUTSIDE the composer, but INSIDE the provider */
159	<MessagePreview />
160
161	{/* Actions at the bottom of the dialog */
162	<DialogActions>
163	<CancelButton />
164	<ForwardButton />
165	</DialogActions>
166	</Dialog>
167	</ForwardMessageProvider>
168	);
169	}
170
171	// This button lives OUTSIDE Composer.Frame but can still submit based on its context!
172	function ForwardButton() {
173	const {
174	actions: { submit
175	} = use(ComposerContext
176	return <Button
177	}
178
179	// This preview lives OUTSIDE Composer.Frame but can read composer's state!
180	function MessagePreview() {
181	const { state
182	return <Preview
183	}
184	```
185
186	The `ForwardButton` and `MessagePreview` are not visually inside the composer
187	box, but they can still access its state and actions. This is the power of
188	lifting state into providers.
189
190	The UI is reusable bits you compose together. The state is dependency-injected
191	by the provider. Swap the provider, keep the UI.