@fictjs/runtime 0.0.4 → 0.0.5
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/dist/index.cjs +728 -678
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +555 -530
- package/dist/index.d.ts +555 -530
- package/dist/index.dev.js +729 -679
- package/dist/index.dev.js.map +1 -1
- package/dist/index.js +726 -679
- package/dist/index.js.map +1 -1
- package/dist/slim.cjs +87 -8
- package/dist/slim.cjs.map +1 -1
- package/dist/slim.d.cts +31 -4
- package/dist/slim.d.ts +31 -4
- package/dist/slim.js +85 -9
- package/dist/slim.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +2 -0
- package/src/scope.ts +55 -0
- package/src/slim.ts +1 -0
package/dist/index.d.cts
CHANGED
|
@@ -9,12 +9,22 @@ interface SignalAccessor<T> {
|
|
|
9
9
|
* Computed accessor - function to get computed value
|
|
10
10
|
*/
|
|
11
11
|
type ComputedAccessor<T> = () => T;
|
|
12
|
+
/**
|
|
13
|
+
* Effect scope disposer - function to dispose an effect scope
|
|
14
|
+
*/
|
|
15
|
+
type EffectScopeDisposer = () => void;
|
|
12
16
|
/**
|
|
13
17
|
* Create a reactive signal
|
|
14
18
|
* @param initialValue - The initial value
|
|
15
19
|
* @returns A signal accessor function
|
|
16
20
|
*/
|
|
17
21
|
declare function signal<T>(initialValue: T): SignalAccessor<T>;
|
|
22
|
+
/**
|
|
23
|
+
* Create a reactive effect scope
|
|
24
|
+
* @param fn - The scope function
|
|
25
|
+
* @returns An effect scope disposer function
|
|
26
|
+
*/
|
|
27
|
+
declare function effectScope(fn: () => void): EffectScopeDisposer;
|
|
18
28
|
declare const $state: <T>(value: T) => T;
|
|
19
29
|
/**
|
|
20
30
|
* Create a selector signal that efficiently updates only when the selected key matches.
|
|
@@ -106,271 +116,590 @@ declare function createEffect(fn: Effect): () => void;
|
|
|
106
116
|
declare const $effect: typeof createEffect;
|
|
107
117
|
declare function createRenderEffect(fn: Effect): () => void;
|
|
108
118
|
|
|
109
|
-
interface HookContext {
|
|
110
|
-
slots: unknown[];
|
|
111
|
-
cursor: number;
|
|
112
|
-
}
|
|
113
|
-
declare function __fictUseContext(): HookContext;
|
|
114
|
-
declare function __fictPushContext(): HookContext;
|
|
115
|
-
declare function __fictPopContext(): void;
|
|
116
|
-
declare function __fictResetContext(): void;
|
|
117
|
-
declare function __fictUseSignal<T>(ctx: HookContext, initial: T, slot?: number): SignalAccessor<T>;
|
|
118
|
-
declare function __fictUseMemo<T>(ctx: HookContext, fn: () => T, slot?: number): ComputedAccessor<T>;
|
|
119
|
-
declare function __fictUseEffect(ctx: HookContext, fn: () => void, slot?: number): void;
|
|
120
|
-
declare function __fictRender<T>(ctx: HookContext, fn: () => T): T;
|
|
121
|
-
|
|
122
|
-
interface VersionedSignalOptions<T> {
|
|
123
|
-
equals?: (prev: T, next: T) => boolean;
|
|
124
|
-
}
|
|
125
|
-
interface VersionedSignal<T> {
|
|
126
|
-
/** Reactive read that tracks both the value and version counter */
|
|
127
|
-
read: () => T;
|
|
128
|
-
/** Write a new value, forcing a version bump when value is equal */
|
|
129
|
-
write: (next: T) => void;
|
|
130
|
-
/** Force a version bump without changing the value */
|
|
131
|
-
force: () => void;
|
|
132
|
-
/** Read the current version without creating a dependency */
|
|
133
|
-
peekVersion: () => number;
|
|
134
|
-
/** Read the current value without tracking */
|
|
135
|
-
peekValue: () => T;
|
|
136
|
-
}
|
|
137
119
|
/**
|
|
138
|
-
*
|
|
120
|
+
* Fict Reactive DOM Binding System
|
|
139
121
|
*
|
|
140
|
-
*
|
|
122
|
+
* This module provides the core mechanisms for reactive DOM updates.
|
|
123
|
+
* It bridges the gap between Fict's reactive system (signals, effects)
|
|
124
|
+
* and the DOM, enabling fine-grained updates without a virtual DOM.
|
|
125
|
+
*
|
|
126
|
+
* Design Philosophy:
|
|
127
|
+
* - Values wrapped in functions `() => T` are treated as reactive
|
|
128
|
+
* - Static values are applied once without tracking
|
|
129
|
+
* - The compiler transforms JSX expressions to use these primitives
|
|
141
130
|
*/
|
|
142
|
-
declare function createVersionedSignal<T>(initialValue: T, options?: VersionedSignalOptions<T>): VersionedSignal<T>;
|
|
143
131
|
|
|
132
|
+
/** A reactive value that can be either static or a getter function */
|
|
133
|
+
type MaybeReactive<T> = T | (() => T);
|
|
134
|
+
/** Internal type for createElement function reference */
|
|
135
|
+
type CreateElementFn = (node: FictNode) => Node;
|
|
136
|
+
/** Handle returned by conditional/list bindings for cleanup */
|
|
137
|
+
interface BindingHandle {
|
|
138
|
+
/** Marker node(s) used for positioning */
|
|
139
|
+
marker: Comment | DocumentFragment;
|
|
140
|
+
/** Flush pending content - call after markers are inserted into DOM */
|
|
141
|
+
flush?: () => void;
|
|
142
|
+
/** Dispose function to clean up the binding */
|
|
143
|
+
dispose: Cleanup;
|
|
144
|
+
}
|
|
144
145
|
/**
|
|
145
|
-
*
|
|
146
|
-
*
|
|
147
|
-
* Users normally never call this directly; the compiler injects it.
|
|
146
|
+
* Check if a value is reactive (a getter function)
|
|
147
|
+
* Note: Event handlers (functions that take arguments) are NOT reactive values
|
|
148
148
|
*/
|
|
149
|
-
declare function
|
|
150
|
-
declare function createPropsProxy<T extends Record<string, unknown>>(props: T): T;
|
|
149
|
+
declare function isReactive(value: unknown): value is () => unknown;
|
|
151
150
|
/**
|
|
152
|
-
*
|
|
153
|
-
* Excludes the specified keys from the returned object.
|
|
151
|
+
* Unwrap a potentially reactive value to get the actual value
|
|
154
152
|
*/
|
|
155
|
-
declare function
|
|
153
|
+
declare function unwrap<T>(value: MaybeReactive<T>): T;
|
|
156
154
|
/**
|
|
157
|
-
*
|
|
158
|
-
*
|
|
159
|
-
*
|
|
160
|
-
* Uses lazy lookup strategy - properties are only accessed when read,
|
|
161
|
-
* avoiding upfront iteration of all keys.
|
|
155
|
+
* Invoke an event handler or handler accessor in a safe way.
|
|
156
|
+
* Supports handlers that return another handler and handlers that expect an
|
|
157
|
+
* optional data payload followed by the event.
|
|
162
158
|
*/
|
|
163
|
-
|
|
164
|
-
declare function mergeProps<T extends Record<string, unknown>>(...sources: (MergeSource<T> | null | undefined)[]): Record<string, unknown>;
|
|
165
|
-
type PropGetter<T> = (() => T) & {
|
|
166
|
-
__fictProp: true;
|
|
167
|
-
};
|
|
159
|
+
declare function callEventHandler(handler: EventListenerOrEventListenerObject | null | undefined, event: Event, node?: EventTarget | null, data?: unknown): void;
|
|
168
160
|
/**
|
|
169
|
-
*
|
|
170
|
-
*
|
|
161
|
+
* Unwrap a primitive proxy value to get the raw primitive value.
|
|
162
|
+
* This is primarily useful for advanced scenarios where you need the actual
|
|
163
|
+
* primitive type (e.g., for typeof checks or strict equality comparisons).
|
|
171
164
|
*
|
|
172
|
-
* @
|
|
173
|
-
*
|
|
174
|
-
* // Without useProp - recomputes on every access
|
|
175
|
-
* <Child data={expensiveComputation(list, filter)} />
|
|
165
|
+
* @param value - A potentially proxied primitive value
|
|
166
|
+
* @returns The raw primitive value
|
|
176
167
|
*
|
|
177
|
-
*
|
|
178
|
-
*
|
|
179
|
-
*
|
|
168
|
+
* @example
|
|
169
|
+
* ```ts
|
|
170
|
+
* createList(
|
|
171
|
+
* () => [1, 2, 3],
|
|
172
|
+
* (item) => {
|
|
173
|
+
* const raw = unwrapPrimitive(item)
|
|
174
|
+
* typeof raw === 'number' // true
|
|
175
|
+
* raw === 1 // true (for first item)
|
|
176
|
+
* },
|
|
177
|
+
* item => item
|
|
178
|
+
* )
|
|
180
179
|
* ```
|
|
181
180
|
*/
|
|
182
|
-
declare function
|
|
183
|
-
|
|
184
|
-
type LifecycleFn = () => void | Cleanup;
|
|
185
|
-
interface RootContext {
|
|
186
|
-
parent?: RootContext | undefined;
|
|
187
|
-
onMountCallbacks?: LifecycleFn[];
|
|
188
|
-
cleanups: Cleanup[];
|
|
189
|
-
destroyCallbacks: Cleanup[];
|
|
190
|
-
errorHandlers?: ErrorHandler[];
|
|
191
|
-
suspenseHandlers?: SuspenseHandler[];
|
|
192
|
-
}
|
|
193
|
-
type ErrorHandler = (err: unknown, info?: ErrorInfo) => boolean | void;
|
|
194
|
-
type SuspenseHandler = (token: SuspenseToken | PromiseLike<unknown>) => boolean | void;
|
|
195
|
-
declare function onMount(fn: LifecycleFn): void;
|
|
196
|
-
declare function onDestroy(fn: LifecycleFn): void;
|
|
197
|
-
declare function onCleanup(fn: Cleanup): void;
|
|
198
|
-
declare function createRoot<T>(fn: () => T): {
|
|
199
|
-
dispose: () => void;
|
|
200
|
-
value: T;
|
|
201
|
-
};
|
|
202
|
-
|
|
181
|
+
declare function unwrapPrimitive<T>(value: T): T;
|
|
203
182
|
/**
|
|
204
|
-
* Create a
|
|
205
|
-
*
|
|
206
|
-
* @returns A ref object with a `current` property initialized to `null`
|
|
183
|
+
* Create a text node that reactively updates when the value changes.
|
|
207
184
|
*
|
|
208
185
|
* @example
|
|
209
|
-
* ```
|
|
210
|
-
*
|
|
211
|
-
*
|
|
212
|
-
* function Component() {
|
|
213
|
-
* const inputRef = createRef<HTMLInputElement>()
|
|
214
|
-
*
|
|
215
|
-
* $effect(() => {
|
|
216
|
-
* inputRef.current?.focus()
|
|
217
|
-
* })
|
|
186
|
+
* ```ts
|
|
187
|
+
* // Static text
|
|
188
|
+
* createTextBinding("Hello")
|
|
218
189
|
*
|
|
219
|
-
*
|
|
220
|
-
*
|
|
190
|
+
* // Reactive text (compiler output)
|
|
191
|
+
* createTextBinding(() => $count())
|
|
221
192
|
* ```
|
|
222
193
|
*/
|
|
223
|
-
declare function
|
|
224
|
-
|
|
194
|
+
declare function createTextBinding(value: MaybeReactive<unknown>): Text;
|
|
225
195
|
/**
|
|
226
|
-
*
|
|
227
|
-
*
|
|
228
|
-
* This keeps the UI responsive during expensive operations.
|
|
229
|
-
*
|
|
230
|
-
* @param fn - The function to execute in transition context
|
|
231
|
-
*
|
|
232
|
-
* @example
|
|
233
|
-
* ```tsx
|
|
234
|
-
* const handleInput = (e) => {
|
|
235
|
-
* query = e.target.value // High priority: immediate
|
|
236
|
-
* startTransition(() => {
|
|
237
|
-
* // Low priority: processed after high priority updates
|
|
238
|
-
* filteredItems = allItems.filter(x => x.includes(query))
|
|
239
|
-
* })
|
|
240
|
-
* }
|
|
241
|
-
* ```
|
|
196
|
+
* Bind a reactive value to an existing text node.
|
|
197
|
+
* This is a convenience function for binding to existing DOM nodes.
|
|
242
198
|
*/
|
|
243
|
-
declare function
|
|
199
|
+
declare function bindText(textNode: Text, getValue: () => unknown): Cleanup;
|
|
200
|
+
/** Attribute setter function type */
|
|
201
|
+
type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
|
|
244
202
|
/**
|
|
245
|
-
*
|
|
246
|
-
* Returns a pending signal and a startTransition function.
|
|
247
|
-
*
|
|
248
|
-
* @returns A tuple of [isPending accessor, startTransition function]
|
|
203
|
+
* Create a reactive attribute binding on an element.
|
|
249
204
|
*
|
|
250
205
|
* @example
|
|
251
|
-
* ```
|
|
252
|
-
*
|
|
253
|
-
*
|
|
254
|
-
* const [isPending, start] = useTransition()
|
|
255
|
-
*
|
|
256
|
-
* const handleChange = (e) => {
|
|
257
|
-
* query = e.target.value
|
|
258
|
-
* start(() => {
|
|
259
|
-
* // Expensive filtering happens in low priority
|
|
260
|
-
* filteredResults = expensiveFilter(allData, query)
|
|
261
|
-
* })
|
|
262
|
-
* }
|
|
206
|
+
* ```ts
|
|
207
|
+
* // Static attribute
|
|
208
|
+
* createAttributeBinding(button, 'disabled', false, setAttribute)
|
|
263
209
|
*
|
|
264
|
-
*
|
|
265
|
-
*
|
|
266
|
-
* <input value={query} onInput={handleChange} />
|
|
267
|
-
* {isPending() && <Spinner />}
|
|
268
|
-
* <Results items={filteredResults} />
|
|
269
|
-
* </>
|
|
270
|
-
* )
|
|
271
|
-
* }
|
|
210
|
+
* // Reactive attribute (compiler output)
|
|
211
|
+
* createAttributeBinding(button, 'disabled', () => !$isValid(), setAttribute)
|
|
272
212
|
* ```
|
|
273
213
|
*/
|
|
274
|
-
declare function
|
|
214
|
+
declare function createAttributeBinding(el: HTMLElement, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
|
|
275
215
|
/**
|
|
276
|
-
*
|
|
277
|
-
|
|
278
|
-
|
|
216
|
+
* Bind a reactive value to an element's attribute.
|
|
217
|
+
*/
|
|
218
|
+
declare function bindAttribute(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
|
|
219
|
+
/**
|
|
220
|
+
* Bind a reactive value to an element's property.
|
|
221
|
+
*/
|
|
222
|
+
declare function bindProperty(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
|
|
223
|
+
/**
|
|
224
|
+
* Apply styles to an element, supporting reactive style objects/strings.
|
|
225
|
+
*/
|
|
226
|
+
declare function createStyleBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
|
|
227
|
+
/**
|
|
228
|
+
* Bind a reactive style value to an existing element.
|
|
229
|
+
*/
|
|
230
|
+
declare function bindStyle(el: HTMLElement, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
|
|
231
|
+
/**
|
|
232
|
+
* Apply class to an element, supporting reactive class values.
|
|
233
|
+
*/
|
|
234
|
+
declare function createClassBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
|
|
235
|
+
/**
|
|
236
|
+
* Bind a reactive class value to an existing element.
|
|
237
|
+
*/
|
|
238
|
+
declare function bindClass(el: HTMLElement, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
|
|
239
|
+
/**
|
|
240
|
+
* Exported classList function for direct use (compatible with dom-expressions)
|
|
241
|
+
*/
|
|
242
|
+
declare function classList(node: HTMLElement, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
|
|
243
|
+
/**
|
|
244
|
+
* Insert reactive content into a parent element.
|
|
245
|
+
* This is a simpler API than createChildBinding for basic cases.
|
|
279
246
|
*
|
|
280
|
-
* @param
|
|
281
|
-
* @
|
|
247
|
+
* @param parent - The parent element to insert into
|
|
248
|
+
* @param getValue - Function that returns the value to render
|
|
249
|
+
* @param markerOrCreateElement - Optional marker node to insert before, or createElementFn
|
|
250
|
+
* @param createElementFn - Optional function to create DOM elements (when marker is provided)
|
|
251
|
+
*/
|
|
252
|
+
declare function insert(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
|
|
253
|
+
/**
|
|
254
|
+
* Create a reactive child binding that updates when the child value changes.
|
|
255
|
+
* This is used for dynamic expressions like `{show && <Modal />}` or `{items.map(...)}`.
|
|
282
256
|
*
|
|
283
257
|
* @example
|
|
284
|
-
* ```
|
|
285
|
-
*
|
|
286
|
-
*
|
|
287
|
-
*
|
|
288
|
-
* // deferredQuery lags behind query during rapid typing
|
|
289
|
-
* const results = expensiveSearch(deferredQuery())
|
|
258
|
+
* ```ts
|
|
259
|
+
* // Reactive child (compiler output for {count})
|
|
260
|
+
* createChildBinding(parent, () => $count(), createElement)
|
|
290
261
|
*
|
|
291
|
-
*
|
|
292
|
-
* }
|
|
262
|
+
* // Reactive conditional (compiler output for {show && <Modal />})
|
|
263
|
+
* createChildBinding(parent, () => $show() && jsx(Modal, {}), createElement)
|
|
293
264
|
* ```
|
|
294
265
|
*/
|
|
295
|
-
declare function
|
|
266
|
+
declare function createChildBinding(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
|
|
267
|
+
declare global {
|
|
268
|
+
interface HTMLElement {
|
|
269
|
+
_$host?: HTMLElement;
|
|
270
|
+
[key: `$$${string}`]: EventListener | [EventListener, unknown] | undefined;
|
|
271
|
+
[key: `$$${string}Data`]: unknown;
|
|
272
|
+
}
|
|
273
|
+
interface Document extends Record<string, unknown> {
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* Initialize event delegation for a set of event names.
|
|
278
|
+
* Events will be handled at the document level and dispatched to the appropriate handlers.
|
|
279
|
+
*
|
|
280
|
+
* @param eventNames - Array of event names to delegate
|
|
281
|
+
* @param doc - The document to attach handlers to (default: window.document)
|
|
282
|
+
*
|
|
283
|
+
* @example
|
|
284
|
+
* ```ts
|
|
285
|
+
* // Called automatically by the compiler for delegated events
|
|
286
|
+
* delegateEvents(['click', 'input', 'keydown'])
|
|
287
|
+
* ```
|
|
288
|
+
*/
|
|
289
|
+
declare function delegateEvents(eventNames: string[], doc?: Document): void;
|
|
290
|
+
/**
|
|
291
|
+
* Clear all delegated event handlers from a document.
|
|
292
|
+
*
|
|
293
|
+
* @param doc - The document to clear handlers from (default: window.document)
|
|
294
|
+
*/
|
|
295
|
+
declare function clearDelegatedEvents(doc?: Document): void;
|
|
296
|
+
/**
|
|
297
|
+
* Add an event listener to an element.
|
|
298
|
+
* If the event is in DelegatedEvents, it uses event delegation for better performance.
|
|
299
|
+
*
|
|
300
|
+
* @param node - The element to add the listener to
|
|
301
|
+
* @param name - The event name (lowercase)
|
|
302
|
+
* @param handler - The event handler or [handler, data] tuple
|
|
303
|
+
* @param delegate - Whether to use delegation (auto-detected based on event name)
|
|
304
|
+
*/
|
|
305
|
+
declare function addEventListener(node: HTMLElement, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
|
|
306
|
+
/**
|
|
307
|
+
* Bind an event listener to an element.
|
|
308
|
+
* Uses event delegation for better performance when applicable.
|
|
309
|
+
*
|
|
310
|
+
* @example
|
|
311
|
+
* ```ts
|
|
312
|
+
* // Static event
|
|
313
|
+
* bindEvent(button, 'click', handleClick)
|
|
314
|
+
*
|
|
315
|
+
* // Reactive event (compiler output)
|
|
316
|
+
* bindEvent(button, 'click', () => $handler())
|
|
317
|
+
*
|
|
318
|
+
* // With modifiers
|
|
319
|
+
* bindEvent(button, 'click', handler, { capture: true, passive: true, once: true })
|
|
320
|
+
* ```
|
|
321
|
+
*/
|
|
322
|
+
declare function bindEvent(el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
|
|
323
|
+
/**
|
|
324
|
+
* Bind a ref to an element.
|
|
325
|
+
* Supports both callback refs and ref objects.
|
|
326
|
+
*
|
|
327
|
+
* @param el - The element to bind the ref to
|
|
328
|
+
* @param ref - Either a callback function, a ref object, or a reactive getter
|
|
329
|
+
* @returns Cleanup function
|
|
330
|
+
*
|
|
331
|
+
* @example
|
|
332
|
+
* ```ts
|
|
333
|
+
* // Callback ref
|
|
334
|
+
* bindRef(el, (element) => { store.input = element })
|
|
335
|
+
*
|
|
336
|
+
* // Ref object
|
|
337
|
+
* const inputRef = createRef()
|
|
338
|
+
* bindRef(el, inputRef)
|
|
339
|
+
*
|
|
340
|
+
* // Reactive ref (compiler output)
|
|
341
|
+
* bindRef(el, () => props.ref)
|
|
342
|
+
* ```
|
|
343
|
+
*/
|
|
344
|
+
declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
|
|
345
|
+
/**
|
|
346
|
+
* Apply spread props to an element with reactive updates.
|
|
347
|
+
* This handles dynamic spread like `<div {...props}>`.
|
|
348
|
+
*
|
|
349
|
+
* @param node - The element to apply props to
|
|
350
|
+
* @param props - The props object (may have reactive getters)
|
|
351
|
+
* @param isSVG - Whether this is an SVG element
|
|
352
|
+
* @param skipChildren - Whether to skip children handling
|
|
353
|
+
* @returns The previous props for tracking changes
|
|
354
|
+
*
|
|
355
|
+
* @example
|
|
356
|
+
* ```ts
|
|
357
|
+
* // Compiler output for <div {...props} />
|
|
358
|
+
* spread(el, props, false, false)
|
|
359
|
+
* ```
|
|
360
|
+
*/
|
|
361
|
+
declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
|
|
362
|
+
/**
|
|
363
|
+
* Assign props to a node, tracking previous values for efficient updates.
|
|
364
|
+
* This is the core prop assignment logic used by spread.
|
|
365
|
+
*
|
|
366
|
+
* @param node - The element to assign props to
|
|
367
|
+
* @param props - New props object
|
|
368
|
+
* @param isSVG - Whether this is an SVG element
|
|
369
|
+
* @param skipChildren - Whether to skip children handling
|
|
370
|
+
* @param prevProps - Previous props for comparison
|
|
371
|
+
* @param skipRef - Whether to skip ref handling
|
|
372
|
+
*/
|
|
373
|
+
declare function assign(node: HTMLElement, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
|
|
374
|
+
/**
|
|
375
|
+
* Create a conditional rendering binding.
|
|
376
|
+
* Efficiently renders one of two branches based on a condition.
|
|
377
|
+
*
|
|
378
|
+
* This is an optimized version for `{condition ? <A /> : <B />}` patterns
|
|
379
|
+
* where both branches are known statically.
|
|
380
|
+
*
|
|
381
|
+
* @example
|
|
382
|
+
* ```ts
|
|
383
|
+
* // Compiler output for {show ? <A /> : <B />}
|
|
384
|
+
* createConditional(
|
|
385
|
+
* () => $show(),
|
|
386
|
+
* () => jsx(A, {}),
|
|
387
|
+
* () => jsx(B, {}),
|
|
388
|
+
* createElement
|
|
389
|
+
* )
|
|
390
|
+
* ```
|
|
391
|
+
*/
|
|
392
|
+
declare function createConditional(condition: () => boolean, renderTrue: () => FictNode, createElementFn: CreateElementFn, renderFalse?: () => FictNode): BindingHandle;
|
|
393
|
+
/** Key extractor function type */
|
|
394
|
+
type KeyFn<T> = (item: T, index: number) => string | number;
|
|
395
|
+
/**
|
|
396
|
+
* Create a reactive list rendering binding with optional keying.
|
|
397
|
+
*/
|
|
398
|
+
declare function createList<T>(items: () => T[], renderItem: (item: T, index: number) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
|
|
399
|
+
/**
|
|
400
|
+
* Create a show/hide binding that uses CSS display instead of DOM manipulation.
|
|
401
|
+
* More efficient than conditional when the content is expensive to create.
|
|
402
|
+
*
|
|
403
|
+
* @example
|
|
404
|
+
* ```ts
|
|
405
|
+
* createShow(container, () => $visible())
|
|
406
|
+
* ```
|
|
407
|
+
*/
|
|
408
|
+
declare function createShow(el: HTMLElement, condition: () => boolean, displayValue?: string): void;
|
|
409
|
+
/**
|
|
410
|
+
* Create a portal that renders content into a different DOM container.
|
|
411
|
+
*
|
|
412
|
+
* @example
|
|
413
|
+
* ```ts
|
|
414
|
+
* createPortal(
|
|
415
|
+
* document.body,
|
|
416
|
+
* () => jsx(Modal, { children: 'Hello' }),
|
|
417
|
+
* createElement
|
|
418
|
+
* )
|
|
419
|
+
* ```
|
|
420
|
+
*/
|
|
421
|
+
declare function createPortal(container: HTMLElement, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
|
|
296
422
|
|
|
297
|
-
|
|
298
|
-
|
|
423
|
+
interface ReactiveScope {
|
|
424
|
+
run<T>(fn: () => T): T;
|
|
425
|
+
stop(): void;
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Create an explicit reactive scope that can contain effects/memos and be stopped manually.
|
|
429
|
+
* The scope registers with the current root for cleanup.
|
|
430
|
+
*/
|
|
431
|
+
declare function createScope(): ReactiveScope;
|
|
432
|
+
/**
|
|
433
|
+
* Run a block of reactive code inside a managed scope that follows a boolean flag.
|
|
434
|
+
* When the flag turns false, the scope is disposed and all contained effects/memos are cleaned up.
|
|
435
|
+
*/
|
|
436
|
+
declare function runInScope(flag: MaybeReactive<boolean>, fn: () => void): void;
|
|
299
437
|
|
|
300
|
-
interface
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
windowSize?: number;
|
|
304
|
-
highUsageRatio?: number;
|
|
305
|
-
maxRootReentrantDepth?: number;
|
|
306
|
-
enableWindowWarning?: boolean;
|
|
307
|
-
devMode?: boolean;
|
|
438
|
+
interface HookContext {
|
|
439
|
+
slots: unknown[];
|
|
440
|
+
cursor: number;
|
|
308
441
|
}
|
|
309
|
-
declare function
|
|
442
|
+
declare function __fictUseContext(): HookContext;
|
|
443
|
+
declare function __fictPushContext(): HookContext;
|
|
444
|
+
declare function __fictPopContext(): void;
|
|
445
|
+
declare function __fictResetContext(): void;
|
|
446
|
+
declare function __fictUseSignal<T>(ctx: HookContext, initial: T, slot?: number): SignalAccessor<T>;
|
|
447
|
+
declare function __fictUseMemo<T>(ctx: HookContext, fn: () => T, slot?: number): ComputedAccessor<T>;
|
|
448
|
+
declare function __fictUseEffect(ctx: HookContext, fn: () => void, slot?: number): void;
|
|
449
|
+
declare function __fictRender<T>(ctx: HookContext, fn: () => T): T;
|
|
310
450
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
451
|
+
interface VersionedSignalOptions<T> {
|
|
452
|
+
equals?: (prev: T, next: T) => boolean;
|
|
453
|
+
}
|
|
454
|
+
interface VersionedSignal<T> {
|
|
455
|
+
/** Reactive read that tracks both the value and version counter */
|
|
456
|
+
read: () => T;
|
|
457
|
+
/** Write a new value, forcing a version bump when value is equal */
|
|
458
|
+
write: (next: T) => void;
|
|
459
|
+
/** Force a version bump without changing the value */
|
|
460
|
+
force: () => void;
|
|
461
|
+
/** Read the current version without creating a dependency */
|
|
462
|
+
peekVersion: () => number;
|
|
463
|
+
/** Read the current value without tracking */
|
|
464
|
+
peekValue: () => T;
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* Create a signal wrapper that forces subscribers to update when the same reference is written.
|
|
468
|
+
*
|
|
469
|
+
* Useful for compiler-generated keyed list items where updates may reuse the same object reference.
|
|
470
|
+
*/
|
|
471
|
+
declare function createVersionedSignal<T>(initialValue: T, options?: VersionedSignalOptions<T>): VersionedSignal<T>;
|
|
472
|
+
|
|
473
|
+
/**
|
|
474
|
+
* @internal
|
|
475
|
+
* Marks a zero-arg getter so props proxy can lazily evaluate it.
|
|
476
|
+
* Users normally never call this directly; the compiler injects it.
|
|
477
|
+
*/
|
|
478
|
+
declare function __fictProp<T>(getter: () => T): () => T;
|
|
479
|
+
declare function createPropsProxy<T extends Record<string, unknown>>(props: T): T;
|
|
480
|
+
/**
|
|
481
|
+
* Create a rest-like props object while preserving prop getters.
|
|
482
|
+
* Excludes the specified keys from the returned object.
|
|
483
|
+
*/
|
|
484
|
+
declare function __fictPropsRest<T extends Record<string, unknown>>(props: T, exclude: (string | number | symbol)[]): Record<string, unknown>;
|
|
485
|
+
/**
|
|
486
|
+
* Merge multiple props-like objects while preserving lazy getters.
|
|
487
|
+
* Later sources override earlier ones.
|
|
488
|
+
*
|
|
489
|
+
* Uses lazy lookup strategy - properties are only accessed when read,
|
|
490
|
+
* avoiding upfront iteration of all keys.
|
|
491
|
+
*/
|
|
492
|
+
type MergeSource<T extends Record<string, unknown>> = T | (() => T);
|
|
493
|
+
declare function mergeProps<T extends Record<string, unknown>>(...sources: (MergeSource<T> | null | undefined)[]): Record<string, unknown>;
|
|
494
|
+
type PropGetter<T> = (() => T) & {
|
|
495
|
+
__fictProp: true;
|
|
496
|
+
};
|
|
497
|
+
/**
|
|
498
|
+
* Memoize a prop getter to cache expensive computations.
|
|
499
|
+
* Use when prop expressions involve heavy calculations.
|
|
500
|
+
*
|
|
501
|
+
* @example
|
|
502
|
+
* ```tsx
|
|
503
|
+
* // Without useProp - recomputes on every access
|
|
504
|
+
* <Child data={expensiveComputation(list, filter)} />
|
|
505
|
+
*
|
|
506
|
+
* // With useProp - cached until dependencies change, auto-unwrapped by props proxy
|
|
507
|
+
* const memoizedData = useProp(() => expensiveComputation(list, filter))
|
|
508
|
+
* <Child data={memoizedData} />
|
|
509
|
+
* ```
|
|
510
|
+
*/
|
|
511
|
+
declare function useProp<T>(getter: () => T): PropGetter<T>;
|
|
512
|
+
|
|
513
|
+
type LifecycleFn = () => void | Cleanup;
|
|
514
|
+
interface RootContext {
|
|
515
|
+
parent?: RootContext | undefined;
|
|
516
|
+
onMountCallbacks?: LifecycleFn[];
|
|
517
|
+
cleanups: Cleanup[];
|
|
518
|
+
destroyCallbacks: Cleanup[];
|
|
519
|
+
errorHandlers?: ErrorHandler[];
|
|
520
|
+
suspenseHandlers?: SuspenseHandler[];
|
|
521
|
+
}
|
|
522
|
+
type ErrorHandler = (err: unknown, info?: ErrorInfo) => boolean | void;
|
|
523
|
+
type SuspenseHandler = (token: SuspenseToken | PromiseLike<unknown>) => boolean | void;
|
|
524
|
+
declare function onMount(fn: LifecycleFn): void;
|
|
525
|
+
declare function onDestroy(fn: LifecycleFn): void;
|
|
526
|
+
declare function onCleanup(fn: Cleanup): void;
|
|
527
|
+
declare function createRoot<T>(fn: () => T): {
|
|
528
|
+
dispose: () => void;
|
|
529
|
+
value: T;
|
|
530
|
+
};
|
|
531
|
+
|
|
532
|
+
/**
|
|
533
|
+
* Create a ref object for DOM element references.
|
|
534
|
+
*
|
|
535
|
+
* @returns A ref object with a `current` property initialized to `null`
|
|
536
|
+
*
|
|
537
|
+
* @example
|
|
538
|
+
* ```tsx
|
|
539
|
+
* import { createRef } from 'fict'
|
|
540
|
+
*
|
|
541
|
+
* function Component() {
|
|
542
|
+
* const inputRef = createRef<HTMLInputElement>()
|
|
543
|
+
*
|
|
544
|
+
* $effect(() => {
|
|
545
|
+
* inputRef.current?.focus()
|
|
546
|
+
* })
|
|
547
|
+
*
|
|
548
|
+
* return <input ref={inputRef} />
|
|
549
|
+
* }
|
|
550
|
+
* ```
|
|
551
|
+
*/
|
|
552
|
+
declare function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T>;
|
|
553
|
+
|
|
554
|
+
/**
|
|
555
|
+
* Execute a function with low-priority scheduling.
|
|
556
|
+
* Updates triggered inside the callback will be processed after any high-priority updates.
|
|
557
|
+
* This keeps the UI responsive during expensive operations.
|
|
558
|
+
*
|
|
559
|
+
* @param fn - The function to execute in transition context
|
|
560
|
+
*
|
|
561
|
+
* @example
|
|
562
|
+
* ```tsx
|
|
563
|
+
* const handleInput = (e) => {
|
|
564
|
+
* query = e.target.value // High priority: immediate
|
|
565
|
+
* startTransition(() => {
|
|
566
|
+
* // Low priority: processed after high priority updates
|
|
567
|
+
* filteredItems = allItems.filter(x => x.includes(query))
|
|
568
|
+
* })
|
|
569
|
+
* }
|
|
570
|
+
* ```
|
|
571
|
+
*/
|
|
572
|
+
declare function startTransition(fn: () => void): void;
|
|
573
|
+
/**
|
|
574
|
+
* React-style useTransition hook.
|
|
575
|
+
* Returns a pending signal and a startTransition function.
|
|
576
|
+
*
|
|
577
|
+
* @returns A tuple of [isPending accessor, startTransition function]
|
|
578
|
+
*
|
|
579
|
+
* @example
|
|
580
|
+
* ```tsx
|
|
581
|
+
* function SearchComponent() {
|
|
582
|
+
* let query = $state('')
|
|
583
|
+
* const [isPending, start] = useTransition()
|
|
584
|
+
*
|
|
585
|
+
* const handleChange = (e) => {
|
|
586
|
+
* query = e.target.value
|
|
587
|
+
* start(() => {
|
|
588
|
+
* // Expensive filtering happens in low priority
|
|
589
|
+
* filteredResults = expensiveFilter(allData, query)
|
|
590
|
+
* })
|
|
591
|
+
* }
|
|
592
|
+
*
|
|
593
|
+
* return (
|
|
594
|
+
* <>
|
|
595
|
+
* <input value={query} onInput={handleChange} />
|
|
596
|
+
* {isPending() && <Spinner />}
|
|
597
|
+
* <Results items={filteredResults} />
|
|
598
|
+
* </>
|
|
599
|
+
* )
|
|
600
|
+
* }
|
|
601
|
+
* ```
|
|
602
|
+
*/
|
|
603
|
+
declare function useTransition(): [() => boolean, (fn: () => void) => void];
|
|
604
|
+
/**
|
|
605
|
+
* Creates a deferred version of a value that updates with low priority.
|
|
606
|
+
* The returned accessor will lag behind the source value during rapid updates,
|
|
607
|
+
* allowing high-priority work to complete first.
|
|
608
|
+
*
|
|
609
|
+
* @param getValue - Accessor function that returns the source value
|
|
610
|
+
* @returns Accessor function that returns the deferred value
|
|
611
|
+
*
|
|
612
|
+
* @example
|
|
613
|
+
* ```tsx
|
|
614
|
+
* function SearchResults({ query }) {
|
|
615
|
+
* const deferredQuery = useDeferredValue(() => query)
|
|
616
|
+
*
|
|
617
|
+
* // deferredQuery lags behind query during rapid typing
|
|
618
|
+
* const results = expensiveSearch(deferredQuery())
|
|
619
|
+
*
|
|
620
|
+
* return <ResultList items={results} />
|
|
621
|
+
* }
|
|
622
|
+
* ```
|
|
623
|
+
*/
|
|
624
|
+
declare function useDeferredValue<T>(getValue: () => T): () => T;
|
|
625
|
+
|
|
626
|
+
declare function batch<T>(fn: () => T): T;
|
|
627
|
+
declare function untrack<T>(fn: () => T): T;
|
|
628
|
+
|
|
629
|
+
interface CycleProtectionOptions {
|
|
630
|
+
maxFlushCyclesPerMicrotask?: number;
|
|
631
|
+
maxEffectRunsPerFlush?: number;
|
|
632
|
+
windowSize?: number;
|
|
633
|
+
highUsageRatio?: number;
|
|
634
|
+
maxRootReentrantDepth?: number;
|
|
635
|
+
enableWindowWarning?: boolean;
|
|
636
|
+
devMode?: boolean;
|
|
637
|
+
}
|
|
638
|
+
declare function setCycleProtectionOptions(opts: CycleProtectionOptions): void;
|
|
639
|
+
|
|
640
|
+
declare const Fragment: unique symbol;
|
|
641
|
+
declare namespace JSX {
|
|
642
|
+
type Element = FictNode;
|
|
643
|
+
interface IntrinsicElements {
|
|
644
|
+
html: HTMLAttributes<HTMLHtmlElement>;
|
|
645
|
+
head: HTMLAttributes<HTMLHeadElement>;
|
|
646
|
+
body: HTMLAttributes<HTMLBodyElement>;
|
|
647
|
+
title: HTMLAttributes<HTMLTitleElement>;
|
|
648
|
+
meta: MetaHTMLAttributes<HTMLMetaElement>;
|
|
649
|
+
link: LinkHTMLAttributes<HTMLLinkElement>;
|
|
650
|
+
style: StyleHTMLAttributes<HTMLStyleElement>;
|
|
651
|
+
script: ScriptHTMLAttributes<HTMLScriptElement>;
|
|
652
|
+
noscript: HTMLAttributes<HTMLElement>;
|
|
653
|
+
div: HTMLAttributes<HTMLDivElement>;
|
|
654
|
+
span: HTMLAttributes<HTMLSpanElement>;
|
|
655
|
+
main: HTMLAttributes<HTMLElement>;
|
|
656
|
+
header: HTMLAttributes<HTMLElement>;
|
|
657
|
+
footer: HTMLAttributes<HTMLElement>;
|
|
658
|
+
section: HTMLAttributes<HTMLElement>;
|
|
659
|
+
article: HTMLAttributes<HTMLElement>;
|
|
660
|
+
aside: HTMLAttributes<HTMLElement>;
|
|
661
|
+
nav: HTMLAttributes<HTMLElement>;
|
|
662
|
+
address: HTMLAttributes<HTMLElement>;
|
|
663
|
+
h1: HTMLAttributes<HTMLHeadingElement>;
|
|
664
|
+
h2: HTMLAttributes<HTMLHeadingElement>;
|
|
665
|
+
h3: HTMLAttributes<HTMLHeadingElement>;
|
|
666
|
+
h4: HTMLAttributes<HTMLHeadingElement>;
|
|
667
|
+
h5: HTMLAttributes<HTMLHeadingElement>;
|
|
668
|
+
h6: HTMLAttributes<HTMLHeadingElement>;
|
|
669
|
+
hgroup: HTMLAttributes<HTMLElement>;
|
|
670
|
+
p: HTMLAttributes<HTMLParagraphElement>;
|
|
671
|
+
blockquote: BlockquoteHTMLAttributes<HTMLQuoteElement>;
|
|
672
|
+
pre: HTMLAttributes<HTMLPreElement>;
|
|
673
|
+
figure: HTMLAttributes<HTMLElement>;
|
|
674
|
+
figcaption: HTMLAttributes<HTMLElement>;
|
|
675
|
+
hr: HTMLAttributes<HTMLHRElement>;
|
|
676
|
+
br: HTMLAttributes<HTMLBRElement>;
|
|
677
|
+
wbr: HTMLAttributes<HTMLElement>;
|
|
678
|
+
a: AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
679
|
+
abbr: HTMLAttributes<HTMLElement>;
|
|
680
|
+
b: HTMLAttributes<HTMLElement>;
|
|
681
|
+
bdi: HTMLAttributes<HTMLElement>;
|
|
682
|
+
bdo: HTMLAttributes<HTMLElement>;
|
|
683
|
+
cite: HTMLAttributes<HTMLElement>;
|
|
684
|
+
code: HTMLAttributes<HTMLElement>;
|
|
685
|
+
data: DataHTMLAttributes<HTMLDataElement>;
|
|
686
|
+
dfn: HTMLAttributes<HTMLElement>;
|
|
687
|
+
em: HTMLAttributes<HTMLElement>;
|
|
688
|
+
i: HTMLAttributes<HTMLElement>;
|
|
689
|
+
kbd: HTMLAttributes<HTMLElement>;
|
|
690
|
+
mark: HTMLAttributes<HTMLElement>;
|
|
691
|
+
q: QuoteHTMLAttributes<HTMLQuoteElement>;
|
|
692
|
+
rp: HTMLAttributes<HTMLElement>;
|
|
693
|
+
rt: HTMLAttributes<HTMLElement>;
|
|
694
|
+
ruby: HTMLAttributes<HTMLElement>;
|
|
695
|
+
s: HTMLAttributes<HTMLElement>;
|
|
696
|
+
samp: HTMLAttributes<HTMLElement>;
|
|
697
|
+
small: HTMLAttributes<HTMLElement>;
|
|
698
|
+
strong: HTMLAttributes<HTMLElement>;
|
|
699
|
+
sub: HTMLAttributes<HTMLElement>;
|
|
700
|
+
sup: HTMLAttributes<HTMLElement>;
|
|
701
|
+
time: TimeHTMLAttributes<HTMLTimeElement>;
|
|
702
|
+
u: HTMLAttributes<HTMLElement>;
|
|
374
703
|
var: HTMLAttributes<HTMLElement>;
|
|
375
704
|
ul: HTMLAttributes<HTMLUListElement>;
|
|
376
705
|
ol: OlHTMLAttributes<HTMLOListElement>;
|
|
@@ -960,310 +1289,6 @@ interface SVGAttributes<T> extends HTMLAttributes<T> {
|
|
|
960
1289
|
vectorEffect?: string;
|
|
961
1290
|
}
|
|
962
1291
|
|
|
963
|
-
/**
|
|
964
|
-
* Fict Reactive DOM Binding System
|
|
965
|
-
*
|
|
966
|
-
* This module provides the core mechanisms for reactive DOM updates.
|
|
967
|
-
* It bridges the gap between Fict's reactive system (signals, effects)
|
|
968
|
-
* and the DOM, enabling fine-grained updates without a virtual DOM.
|
|
969
|
-
*
|
|
970
|
-
* Design Philosophy:
|
|
971
|
-
* - Values wrapped in functions `() => T` are treated as reactive
|
|
972
|
-
* - Static values are applied once without tracking
|
|
973
|
-
* - The compiler transforms JSX expressions to use these primitives
|
|
974
|
-
*/
|
|
975
|
-
|
|
976
|
-
/** A reactive value that can be either static or a getter function */
|
|
977
|
-
type MaybeReactive<T> = T | (() => T);
|
|
978
|
-
/** Internal type for createElement function reference */
|
|
979
|
-
type CreateElementFn = (node: FictNode) => Node;
|
|
980
|
-
/** Handle returned by conditional/list bindings for cleanup */
|
|
981
|
-
interface BindingHandle {
|
|
982
|
-
/** Marker node(s) used for positioning */
|
|
983
|
-
marker: Comment | DocumentFragment;
|
|
984
|
-
/** Flush pending content - call after markers are inserted into DOM */
|
|
985
|
-
flush?: () => void;
|
|
986
|
-
/** Dispose function to clean up the binding */
|
|
987
|
-
dispose: Cleanup;
|
|
988
|
-
}
|
|
989
|
-
/**
|
|
990
|
-
* Check if a value is reactive (a getter function)
|
|
991
|
-
* Note: Event handlers (functions that take arguments) are NOT reactive values
|
|
992
|
-
*/
|
|
993
|
-
declare function isReactive(value: unknown): value is () => unknown;
|
|
994
|
-
/**
|
|
995
|
-
* Unwrap a potentially reactive value to get the actual value
|
|
996
|
-
*/
|
|
997
|
-
declare function unwrap<T>(value: MaybeReactive<T>): T;
|
|
998
|
-
/**
|
|
999
|
-
* Invoke an event handler or handler accessor in a safe way.
|
|
1000
|
-
* Supports handlers that return another handler and handlers that expect an
|
|
1001
|
-
* optional data payload followed by the event.
|
|
1002
|
-
*/
|
|
1003
|
-
declare function callEventHandler(handler: EventListenerOrEventListenerObject | null | undefined, event: Event, node?: EventTarget | null, data?: unknown): void;
|
|
1004
|
-
/**
|
|
1005
|
-
* Unwrap a primitive proxy value to get the raw primitive value.
|
|
1006
|
-
* This is primarily useful for advanced scenarios where you need the actual
|
|
1007
|
-
* primitive type (e.g., for typeof checks or strict equality comparisons).
|
|
1008
|
-
*
|
|
1009
|
-
* @param value - A potentially proxied primitive value
|
|
1010
|
-
* @returns The raw primitive value
|
|
1011
|
-
*
|
|
1012
|
-
* @example
|
|
1013
|
-
* ```ts
|
|
1014
|
-
* createList(
|
|
1015
|
-
* () => [1, 2, 3],
|
|
1016
|
-
* (item) => {
|
|
1017
|
-
* const raw = unwrapPrimitive(item)
|
|
1018
|
-
* typeof raw === 'number' // true
|
|
1019
|
-
* raw === 1 // true (for first item)
|
|
1020
|
-
* },
|
|
1021
|
-
* item => item
|
|
1022
|
-
* )
|
|
1023
|
-
* ```
|
|
1024
|
-
*/
|
|
1025
|
-
declare function unwrapPrimitive<T>(value: T): T;
|
|
1026
|
-
/**
|
|
1027
|
-
* Create a text node that reactively updates when the value changes.
|
|
1028
|
-
*
|
|
1029
|
-
* @example
|
|
1030
|
-
* ```ts
|
|
1031
|
-
* // Static text
|
|
1032
|
-
* createTextBinding("Hello")
|
|
1033
|
-
*
|
|
1034
|
-
* // Reactive text (compiler output)
|
|
1035
|
-
* createTextBinding(() => $count())
|
|
1036
|
-
* ```
|
|
1037
|
-
*/
|
|
1038
|
-
declare function createTextBinding(value: MaybeReactive<unknown>): Text;
|
|
1039
|
-
/**
|
|
1040
|
-
* Bind a reactive value to an existing text node.
|
|
1041
|
-
* This is a convenience function for binding to existing DOM nodes.
|
|
1042
|
-
*/
|
|
1043
|
-
declare function bindText(textNode: Text, getValue: () => unknown): Cleanup;
|
|
1044
|
-
/** Attribute setter function type */
|
|
1045
|
-
type AttributeSetter = (el: HTMLElement, key: string, value: unknown) => void;
|
|
1046
|
-
/**
|
|
1047
|
-
* Create a reactive attribute binding on an element.
|
|
1048
|
-
*
|
|
1049
|
-
* @example
|
|
1050
|
-
* ```ts
|
|
1051
|
-
* // Static attribute
|
|
1052
|
-
* createAttributeBinding(button, 'disabled', false, setAttribute)
|
|
1053
|
-
*
|
|
1054
|
-
* // Reactive attribute (compiler output)
|
|
1055
|
-
* createAttributeBinding(button, 'disabled', () => !$isValid(), setAttribute)
|
|
1056
|
-
* ```
|
|
1057
|
-
*/
|
|
1058
|
-
declare function createAttributeBinding(el: HTMLElement, key: string, value: MaybeReactive<unknown>, setter: AttributeSetter): void;
|
|
1059
|
-
/**
|
|
1060
|
-
* Bind a reactive value to an element's attribute.
|
|
1061
|
-
*/
|
|
1062
|
-
declare function bindAttribute(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
|
|
1063
|
-
/**
|
|
1064
|
-
* Bind a reactive value to an element's property.
|
|
1065
|
-
*/
|
|
1066
|
-
declare function bindProperty(el: HTMLElement, key: string, getValue: () => unknown): Cleanup;
|
|
1067
|
-
/**
|
|
1068
|
-
* Apply styles to an element, supporting reactive style objects/strings.
|
|
1069
|
-
*/
|
|
1070
|
-
declare function createStyleBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, string | number> | null | undefined>): void;
|
|
1071
|
-
/**
|
|
1072
|
-
* Bind a reactive style value to an existing element.
|
|
1073
|
-
*/
|
|
1074
|
-
declare function bindStyle(el: HTMLElement, getValue: () => string | Record<string, string | number> | null | undefined): Cleanup;
|
|
1075
|
-
/**
|
|
1076
|
-
* Apply class to an element, supporting reactive class values.
|
|
1077
|
-
*/
|
|
1078
|
-
declare function createClassBinding(el: HTMLElement, value: MaybeReactive<string | Record<string, boolean> | null | undefined>): void;
|
|
1079
|
-
/**
|
|
1080
|
-
* Bind a reactive class value to an existing element.
|
|
1081
|
-
*/
|
|
1082
|
-
declare function bindClass(el: HTMLElement, getValue: () => string | Record<string, boolean> | null | undefined): Cleanup;
|
|
1083
|
-
/**
|
|
1084
|
-
* Exported classList function for direct use (compatible with dom-expressions)
|
|
1085
|
-
*/
|
|
1086
|
-
declare function classList(node: HTMLElement, value: Record<string, boolean> | null | undefined, prev?: Record<string, boolean>): Record<string, boolean>;
|
|
1087
|
-
/**
|
|
1088
|
-
* Insert reactive content into a parent element.
|
|
1089
|
-
* This is a simpler API than createChildBinding for basic cases.
|
|
1090
|
-
*
|
|
1091
|
-
* @param parent - The parent element to insert into
|
|
1092
|
-
* @param getValue - Function that returns the value to render
|
|
1093
|
-
* @param markerOrCreateElement - Optional marker node to insert before, or createElementFn
|
|
1094
|
-
* @param createElementFn - Optional function to create DOM elements (when marker is provided)
|
|
1095
|
-
*/
|
|
1096
|
-
declare function insert(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, markerOrCreateElement?: Node | CreateElementFn, createElementFn?: CreateElementFn): Cleanup;
|
|
1097
|
-
/**
|
|
1098
|
-
* Create a reactive child binding that updates when the child value changes.
|
|
1099
|
-
* This is used for dynamic expressions like `{show && <Modal />}` or `{items.map(...)}`.
|
|
1100
|
-
*
|
|
1101
|
-
* @example
|
|
1102
|
-
* ```ts
|
|
1103
|
-
* // Reactive child (compiler output for {count})
|
|
1104
|
-
* createChildBinding(parent, () => $count(), createElement)
|
|
1105
|
-
*
|
|
1106
|
-
* // Reactive conditional (compiler output for {show && <Modal />})
|
|
1107
|
-
* createChildBinding(parent, () => $show() && jsx(Modal, {}), createElement)
|
|
1108
|
-
* ```
|
|
1109
|
-
*/
|
|
1110
|
-
declare function createChildBinding(parent: HTMLElement | DocumentFragment, getValue: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
|
|
1111
|
-
declare global {
|
|
1112
|
-
interface HTMLElement {
|
|
1113
|
-
_$host?: HTMLElement;
|
|
1114
|
-
[key: `$$${string}`]: EventListener | [EventListener, unknown] | undefined;
|
|
1115
|
-
[key: `$$${string}Data`]: unknown;
|
|
1116
|
-
}
|
|
1117
|
-
interface Document extends Record<string, unknown> {
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
/**
|
|
1121
|
-
* Initialize event delegation for a set of event names.
|
|
1122
|
-
* Events will be handled at the document level and dispatched to the appropriate handlers.
|
|
1123
|
-
*
|
|
1124
|
-
* @param eventNames - Array of event names to delegate
|
|
1125
|
-
* @param doc - The document to attach handlers to (default: window.document)
|
|
1126
|
-
*
|
|
1127
|
-
* @example
|
|
1128
|
-
* ```ts
|
|
1129
|
-
* // Called automatically by the compiler for delegated events
|
|
1130
|
-
* delegateEvents(['click', 'input', 'keydown'])
|
|
1131
|
-
* ```
|
|
1132
|
-
*/
|
|
1133
|
-
declare function delegateEvents(eventNames: string[], doc?: Document): void;
|
|
1134
|
-
/**
|
|
1135
|
-
* Clear all delegated event handlers from a document.
|
|
1136
|
-
*
|
|
1137
|
-
* @param doc - The document to clear handlers from (default: window.document)
|
|
1138
|
-
*/
|
|
1139
|
-
declare function clearDelegatedEvents(doc?: Document): void;
|
|
1140
|
-
/**
|
|
1141
|
-
* Add an event listener to an element.
|
|
1142
|
-
* If the event is in DelegatedEvents, it uses event delegation for better performance.
|
|
1143
|
-
*
|
|
1144
|
-
* @param node - The element to add the listener to
|
|
1145
|
-
* @param name - The event name (lowercase)
|
|
1146
|
-
* @param handler - The event handler or [handler, data] tuple
|
|
1147
|
-
* @param delegate - Whether to use delegation (auto-detected based on event name)
|
|
1148
|
-
*/
|
|
1149
|
-
declare function addEventListener(node: HTMLElement, name: string, handler: EventListener | [EventListener, unknown] | null | undefined, delegate?: boolean): void;
|
|
1150
|
-
/**
|
|
1151
|
-
* Bind an event listener to an element.
|
|
1152
|
-
* Uses event delegation for better performance when applicable.
|
|
1153
|
-
*
|
|
1154
|
-
* @example
|
|
1155
|
-
* ```ts
|
|
1156
|
-
* // Static event
|
|
1157
|
-
* bindEvent(button, 'click', handleClick)
|
|
1158
|
-
*
|
|
1159
|
-
* // Reactive event (compiler output)
|
|
1160
|
-
* bindEvent(button, 'click', () => $handler())
|
|
1161
|
-
*
|
|
1162
|
-
* // With modifiers
|
|
1163
|
-
* bindEvent(button, 'click', handler, { capture: true, passive: true, once: true })
|
|
1164
|
-
* ```
|
|
1165
|
-
*/
|
|
1166
|
-
declare function bindEvent(el: HTMLElement, eventName: string, handler: EventListenerOrEventListenerObject | null | undefined, options?: boolean | AddEventListenerOptions): Cleanup;
|
|
1167
|
-
/**
|
|
1168
|
-
* Bind a ref to an element.
|
|
1169
|
-
* Supports both callback refs and ref objects.
|
|
1170
|
-
*
|
|
1171
|
-
* @param el - The element to bind the ref to
|
|
1172
|
-
* @param ref - Either a callback function, a ref object, or a reactive getter
|
|
1173
|
-
* @returns Cleanup function
|
|
1174
|
-
*
|
|
1175
|
-
* @example
|
|
1176
|
-
* ```ts
|
|
1177
|
-
* // Callback ref
|
|
1178
|
-
* bindRef(el, (element) => { store.input = element })
|
|
1179
|
-
*
|
|
1180
|
-
* // Ref object
|
|
1181
|
-
* const inputRef = createRef()
|
|
1182
|
-
* bindRef(el, inputRef)
|
|
1183
|
-
*
|
|
1184
|
-
* // Reactive ref (compiler output)
|
|
1185
|
-
* bindRef(el, () => props.ref)
|
|
1186
|
-
* ```
|
|
1187
|
-
*/
|
|
1188
|
-
declare function bindRef(el: HTMLElement, ref: unknown): Cleanup;
|
|
1189
|
-
/**
|
|
1190
|
-
* Apply spread props to an element with reactive updates.
|
|
1191
|
-
* This handles dynamic spread like `<div {...props}>`.
|
|
1192
|
-
*
|
|
1193
|
-
* @param node - The element to apply props to
|
|
1194
|
-
* @param props - The props object (may have reactive getters)
|
|
1195
|
-
* @param isSVG - Whether this is an SVG element
|
|
1196
|
-
* @param skipChildren - Whether to skip children handling
|
|
1197
|
-
* @returns The previous props for tracking changes
|
|
1198
|
-
*
|
|
1199
|
-
* @example
|
|
1200
|
-
* ```ts
|
|
1201
|
-
* // Compiler output for <div {...props} />
|
|
1202
|
-
* spread(el, props, false, false)
|
|
1203
|
-
* ```
|
|
1204
|
-
*/
|
|
1205
|
-
declare function spread(node: HTMLElement, props?: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean): Record<string, unknown>;
|
|
1206
|
-
/**
|
|
1207
|
-
* Assign props to a node, tracking previous values for efficient updates.
|
|
1208
|
-
* This is the core prop assignment logic used by spread.
|
|
1209
|
-
*
|
|
1210
|
-
* @param node - The element to assign props to
|
|
1211
|
-
* @param props - New props object
|
|
1212
|
-
* @param isSVG - Whether this is an SVG element
|
|
1213
|
-
* @param skipChildren - Whether to skip children handling
|
|
1214
|
-
* @param prevProps - Previous props for comparison
|
|
1215
|
-
* @param skipRef - Whether to skip ref handling
|
|
1216
|
-
*/
|
|
1217
|
-
declare function assign(node: HTMLElement, props: Record<string, unknown>, isSVG?: boolean, skipChildren?: boolean, prevProps?: Record<string, unknown>, skipRef?: boolean): void;
|
|
1218
|
-
/**
|
|
1219
|
-
* Create a conditional rendering binding.
|
|
1220
|
-
* Efficiently renders one of two branches based on a condition.
|
|
1221
|
-
*
|
|
1222
|
-
* This is an optimized version for `{condition ? <A /> : <B />}` patterns
|
|
1223
|
-
* where both branches are known statically.
|
|
1224
|
-
*
|
|
1225
|
-
* @example
|
|
1226
|
-
* ```ts
|
|
1227
|
-
* // Compiler output for {show ? <A /> : <B />}
|
|
1228
|
-
* createConditional(
|
|
1229
|
-
* () => $show(),
|
|
1230
|
-
* () => jsx(A, {}),
|
|
1231
|
-
* () => jsx(B, {}),
|
|
1232
|
-
* createElement
|
|
1233
|
-
* )
|
|
1234
|
-
* ```
|
|
1235
|
-
*/
|
|
1236
|
-
declare function createConditional(condition: () => boolean, renderTrue: () => FictNode, createElementFn: CreateElementFn, renderFalse?: () => FictNode): BindingHandle;
|
|
1237
|
-
/** Key extractor function type */
|
|
1238
|
-
type KeyFn<T> = (item: T, index: number) => string | number;
|
|
1239
|
-
/**
|
|
1240
|
-
* Create a reactive list rendering binding with optional keying.
|
|
1241
|
-
*/
|
|
1242
|
-
declare function createList<T>(items: () => T[], renderItem: (item: T, index: number) => FictNode, createElementFn: CreateElementFn, getKey?: KeyFn<T>): BindingHandle;
|
|
1243
|
-
/**
|
|
1244
|
-
* Create a show/hide binding that uses CSS display instead of DOM manipulation.
|
|
1245
|
-
* More efficient than conditional when the content is expensive to create.
|
|
1246
|
-
*
|
|
1247
|
-
* @example
|
|
1248
|
-
* ```ts
|
|
1249
|
-
* createShow(container, () => $visible())
|
|
1250
|
-
* ```
|
|
1251
|
-
*/
|
|
1252
|
-
declare function createShow(el: HTMLElement, condition: () => boolean, displayValue?: string): void;
|
|
1253
|
-
/**
|
|
1254
|
-
* Create a portal that renders content into a different DOM container.
|
|
1255
|
-
*
|
|
1256
|
-
* @example
|
|
1257
|
-
* ```ts
|
|
1258
|
-
* createPortal(
|
|
1259
|
-
* document.body,
|
|
1260
|
-
* () => jsx(Modal, { children: 'Hello' }),
|
|
1261
|
-
* createElement
|
|
1262
|
-
* )
|
|
1263
|
-
* ```
|
|
1264
|
-
*/
|
|
1265
|
-
declare function createPortal(container: HTMLElement, render: () => FictNode, createElementFn: CreateElementFn): BindingHandle;
|
|
1266
|
-
|
|
1267
1292
|
/**
|
|
1268
1293
|
* Fict DOM Rendering System
|
|
1269
1294
|
*
|
|
@@ -1575,4 +1600,4 @@ declare function isNodeBetweenMarkers(node: Node, startMarker: Comment, endMarke
|
|
|
1575
1600
|
*/
|
|
1576
1601
|
declare function createKeyedList<T>(getItems: () => T[], keyFn: (item: T, index: number) => string | number, renderItem: FineGrainedRenderItem<T>, needsIndex?: boolean): KeyedListBinding;
|
|
1577
1602
|
|
|
1578
|
-
export { $effect, $memo, $state, Aliases, type AttributeSetter, type BaseProps, type BindingHandle, BooleanAttributes, ChildProperties, type ClassProp, type Cleanup, type Component, type CreateElementFn, type DOMElement, DelegatedEvents, type Effect, ErrorBoundary, type ErrorInfo, type EventHandler, type FictDevtoolsHook, type FictNode, type FictVNode, Fragment, JSX, type KeyFn, type KeyedBlock, type KeyedListBinding, type KeyedListContainer, type MarkerBlock, type MaybeReactive, type Memo, Properties, type PropsWithChildren, type Ref, type RefCallback, type RefObject, SVGElements, SVGNamespace, type SignalAccessor as Signal, type Store, type StyleProp, Suspense, type SuspenseToken, UnitlessStyles, type VersionedSignal, type VersionedSignalOptions, __fictPopContext, __fictProp, __fictPropsRest, __fictPushContext, __fictRender, __fictResetContext, __fictUseContext, __fictUseEffect, __fictUseMemo, __fictUseSignal, addEventListener, assign, batch, bindAttribute, bindClass, bindEvent, bindProperty, bindRef, bindStyle, bindText, callEventHandler, classList, clearDelegatedEvents, createAttributeBinding, createChildBinding, createClassBinding, createConditional, createEffect, createElement, createKeyedBlock, createKeyedList, createKeyedListContainer, createList, createMemo, createPortal, createPropsProxy, createRef, createRenderEffect, createRoot, createSelector, createShow, signal as createSignal, createStore, createStyleBinding, createSuspenseToken, createTextBinding, createVersionedSignal, delegateEvents, destroyMarkerBlock, getDevtoolsHook, getFirstNodeAfter, getPropAlias, insert, insertNodesBefore, isNodeBetweenMarkers, isReactive, mergeProps, moveMarkerBlock, moveNodesBefore, onCleanup, onDestroy, onMount, __fictProp as prop, reconcileArrays, removeNodes, render, setCycleProtectionOptions, spread, startTransition, template, toNodeArray, untrack, unwrap, unwrapPrimitive, useDeferredValue, useProp, useTransition };
|
|
1603
|
+
export { $effect, $memo, $state, Aliases, type AttributeSetter, type BaseProps, type BindingHandle, BooleanAttributes, ChildProperties, type ClassProp, type Cleanup, type Component, type CreateElementFn, type DOMElement, DelegatedEvents, type Effect, ErrorBoundary, type ErrorInfo, type EventHandler, type FictDevtoolsHook, type FictNode, type FictVNode, Fragment, JSX, type KeyFn, type KeyedBlock, type KeyedListBinding, type KeyedListContainer, type MarkerBlock, type MaybeReactive, type Memo, Properties, type PropsWithChildren, type ReactiveScope, type Ref, type RefCallback, type RefObject, SVGElements, SVGNamespace, type SignalAccessor as Signal, type Store, type StyleProp, Suspense, type SuspenseToken, UnitlessStyles, type VersionedSignal, type VersionedSignalOptions, __fictPopContext, __fictProp, __fictPropsRest, __fictPushContext, __fictRender, __fictResetContext, __fictUseContext, __fictUseEffect, __fictUseMemo, __fictUseSignal, addEventListener, assign, batch, bindAttribute, bindClass, bindEvent, bindProperty, bindRef, bindStyle, bindText, callEventHandler, classList, clearDelegatedEvents, createAttributeBinding, createChildBinding, createClassBinding, createConditional, createEffect, createElement, createKeyedBlock, createKeyedList, createKeyedListContainer, createList, createMemo, createPortal, createPropsProxy, createRef, createRenderEffect, createRoot, createScope, createSelector, createShow, signal as createSignal, createStore, createStyleBinding, createSuspenseToken, createTextBinding, createVersionedSignal, delegateEvents, destroyMarkerBlock, effectScope, getDevtoolsHook, getFirstNodeAfter, getPropAlias, insert, insertNodesBefore, isNodeBetweenMarkers, isReactive, mergeProps, moveMarkerBlock, moveNodesBefore, onCleanup, onDestroy, onMount, __fictProp as prop, reconcileArrays, removeNodes, render, runInScope, setCycleProtectionOptions, spread, startTransition, template, toNodeArray, untrack, unwrap, unwrapPrimitive, useDeferredValue, useProp, useTransition };
|