@fluixi/core 1.0.0-alpha.53

package/dist/src/lib/render/component.d.ts

@@ -0,0 +1,328 @@
+/**
+ * Component creation for Fluixi. Component-creation logic only — context lives in
+ * the reactive system, rendering in render/index.ts, and SSR in server/.
+ */
+import { CreateComponentReturnType } from '@fluixi/dom';
+import { onCleanup, getOwner, createEffect, createMemo, batch, runWithOwner } from '@fluixi/reactive/signal';
+type Owner = any;
+interface SharedConfig {
+    context: Owner | null;
+    owner: Owner | null;
+}
+/**
+ * Get shared reactive config
+ * Used for maintaining reactive context across components
+ * @internal
+ */
+export declare function getSharedConfig(): SharedConfig;
+/**
+ * Set current owner in shared config
+ * @internal
+ */
+export declare function setOwner(owner: Owner | null): void;
+/**
+ * Get current owner from shared config
+ * @internal
+ */
+export declare function getContextOwner(): Owner | null;
+/**
+ * Development mode flag
+ */
+export declare const DEV: boolean;
+export type LifecycleCallback = {
+    mounted?: boolean;
+    (): void | (() => void);
+};
+/**
+ * Ref object type
+ */
+export interface RefObject<T> {
+    current: T;
+}
+export declare function ensureIntegration(from?: string): void;
+/**
+ * Create and execute a component once. Opens an Owner, runs the component untracked,
+ * captures its output, keeps children lazy, propagates context (via sharedConfig), and
+ * attaches cleanup. Components execute once and never re-execute.
+ *
+ * @template P - Props type
+ * @param {Component<P>} Comp - Component function
+ * @param {P} props - Component props
+ * @returns {any} Component output
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = (props: { name: string }) => {
+ *   return html`<div>Hello ${props.name}</div>`;
+ * };
+ *
+ * const result = createComponent(MyComponent, { name: 'World' });
+ * ```
+ */
+export declare function createComponent<T extends (props?: any) => any, U = any>(Comp: T, props?: U): CreateComponentReturnType<T, U>;
+export declare function $component<T extends (props?: any) => any, U = any>(value: T, props?: U): CreateComponentReturnType<T, U>;
+/**
+ * Register a callback to run when component mounts
+ *
+ * SolidJS-aligned: uses createEffect to schedule the callback.
+ * The effect runs once after the reactive graph is established,
+ * tied to the current Owner for automatic cleanup.
+ *
+ * @param {LifecycleCallback} fn - Mount callback
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   onMount(() => {
+ *     console.log('Component mounted');
+ *     return () => console.log('Cleanup');
+ *   });
+ *
+ *   return html`<div>Content</div>`;
+ * };
+ * ```
+ */
+export declare function onMount(fn: LifecycleCallback, reactive?: boolean): void;
+/**
+ * Register a callback to run when component unmounts
+ *
+ * SolidJS-aligned: directly delegates to onCleanup which registers
+ * with the current reactive Owner for automatic disposal.
+ *
+ * @param {() => void} fn - Unmount callback
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   onUnmount(() => {
+ *     console.log('Component is unmounting');
+ *   });
+ *
+ *   return html`<div>Content</div>`;
+ * };
+ * ```
+ */
+export declare function onUnmount(fn: () => void): void;
+/**
+ * Register a cleanup function
+ *
+ * Section 1: Component constructs reactive graph including cleanup
+ *
+ * @param {() => void} fn - Cleanup function
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const timer = setInterval(() => console.log('tick'), 1000);
+ *
+ *   onCleanup(() => clearInterval(timer));
+ *
+ *   return html`<div>Timer running</div>`;
+ * };
+ * ```
+ */
+export { onCleanup };
+/**
+ * Create a reactive effect
+ *
+ * Effects run when their dependencies change
+ * On server, effects run once
+ *
+ * @param {(v?: any) => any} fn - Effect function
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const [count, setCount] = createSignal(0);
+ *
+ *   useEffect(() => {
+ *     console.log('Count changed:', count());
+ *   });
+ *
+ *   return html`<button @click=${() => setCount(count() + 1)}>Click</button>`;
+ * };
+ * ```
+ */
+export declare function useEffect(callback: () => void | (() => void)): void;
+/**
+ * Create a memoized computed value
+ *
+ * @template T
+ * @param {() => T} fn - Computation function
+ * @returns {() => T} Memoized accessor
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const [count, setCount] = createSignal(0);
+ *   const doubled = useMemo(() => count() * 2);
+ *
+ *   return html`<div>Doubled: ${doubled()}</div>`;
+ * };
+ * ```
+ */
+export declare function useMemo<T>(fn: () => T): () => T;
+/**
+ * Create a ref object
+ *
+ * Refs persist across component re-renders (though components only run once)
+ * Useful for storing DOM references and mutable values
+ *
+ * @template T
+ * @param {T} initialValue - Initial value
+ * @returns {RefObject<T>} Ref object
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const inputRef = useRef<HTMLInputElement>(null);
+ *
+ *   onMount(() => {
+ *     inputRef.current?.focus();
+ *   });
+ *
+ *   return html`<input ref=${inputRef} />`;
+ * };
+ * ```
+ */
+export declare function useRef<T>(initialValue: T): RefObject<T>;
+/**
+ * Create a reducer for state management
+ *
+ * @template S - State type
+ * @template A - Action type
+ * @param {(state: S, action: A) => S} reducer - Reducer function
+ * @param {S} initialState - Initial state
+ * @returns {[() => S, (action: A) => void]} State accessor and dispatch function
+ *
+ * @example
+ * ```typescript
+ * type Action = { type: 'increment' } | { type: 'decrement' };
+ *
+ * const MyComponent = () => {
+ *   const [state, dispatch] = useReducer(
+ *     (state: number, action: Action) => {
+ *       switch (action.type) {
+ *         case 'increment': return state + 1;
+ *         case 'decrement': return state - 1;
+ *       }
+ *     },
+ *     0
+ *   );
+ *
+ *   return html`
+ *     <button @click=${() => dispatch({ type: 'increment' })}>
+ *       Count: ${state()}
+ *     </button>
+ *   `;
+ * };
+ * ```
+ */
+export declare function useReducer<S, A>(reducer: (state: S, action: A) => S, initialState: S): [() => S, (action: A) => void];
+/**
+ * Attach an event listener with automatic cleanup
+ *
+ * @template K - Event type key
+ * @param {EventTarget | RefObject<EventTarget | null>} target - Event target or ref
+ * @param {K} event - Event name
+ * @param {(event: Event) => void} handler - Event handler
+ * @param {AddEventListenerOptions} options - Event listener options
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const divRef = useRef<HTMLDivElement>(null);
+ *
+ *   useEventListener(divRef, 'click', (e) => {
+ *     console.log('Div clicked', e);
+ *   });
+ *
+ *   useEventListener(window, 'resize', () => {
+ *     console.log('Window resized');
+ *   });
+ *
+ *   return html`<div ref=${divRef}>Click me</div>`;
+ * };
+ * ```
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(target: EventTarget | RefObject<EventTarget | null> | Window | Document, event: K, handler: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions): void;
+/**
+ * Create a callback function (memoization optimization)
+ *
+ * In Fluixi, components only run once, so this is mostly for
+ * API compatibility and explicit intent
+ *
+ * @template T
+ * @param {T} callback - Callback function
+ * @returns {T} Callback function
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const handleClick = useCallback(() => {
+ *     console.log('Clicked');
+ *   });
+ *
+ *   return html`<button @click=${handleClick}>Click</button>`;
+ * };
+ * ```
+ */
+export declare function useCallback<T extends (...args: any[]) => any>(callback: T): T;
+/**
+ * Batch update helper
+ * Re-exported for convenience
+ */
+export { batch };
+/**
+ * Create a memo
+ * Re-exported for convenience
+ */
+export { createMemo };
+/**
+ * Create an effect
+ * Re-exported for convenience
+ */
+export { createEffect };
+/**
+ * Get current reactive owner
+ * Re-exported for convenience
+ */
+export { getOwner };
+/**
+ * Run with specific owner
+ * Re-exported for convenience
+ */
+export { runWithOwner };
+/**
+ * Helper to check if we're in a component context
+ * @internal
+ */
+export declare function hasLifecycleContext(): boolean;
+/**
+ * Check if in development mode
+ *
+ * @returns {boolean} True if in development mode
+ *
+ * @example
+ * ```typescript
+ * if (isDev()) {
+ *   console.log('Running in development mode');
+ * }
+ * ```
+ */
+export declare function isDev(): boolean;
+/**
+ * Development-only code execution
+ *
+ * @param {() => void} fn - Function to run in dev mode
+ *
+ * @example
+ * ```typescript
+ * devOnly(() => {
+ *   console.log('This only runs in development');
+ * });
+ * ```
+ */
+export declare function devOnly(fn: () => void): void;
+export type { Component, ComponentProps } from "@fluixi/dom";
+//# sourceMappingURL=component.d.ts.map

package/dist/src/lib/render/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/lib/render/component.ts"],"names":[],"mappings":"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"}