@fluixi/core 1.0.0-alpha.100

package/dist/src/lib/render/component.js

@@ -0,0 +1,514 @@
+/**
+ * Component creation for Fluixi. Component-creation logic only: context lives in
+ * the reactive system, rendering in render/index.ts, and SSR in server/.
+ */
+import { isServer } from '@fluixi/dom';
+import { createComponent as domCreateComponent, asComponent, } from '@fluixi/dom';
+import { untrack, onCleanup, getOwner, createEffect, createMemo, createSignal, isSignal, batch, runWithOwner, isOwnerDisposed, } from '@fluixi/reactive/signal';
+const sharedConfig = {
+    context: null,
+    owner: null,
+};
+/**
+ * Get shared reactive config
+ * Used for maintaining reactive context across components
+ * @internal
+ */
+export function getSharedConfig() {
+    return sharedConfig;
+}
+/**
+ * Set current owner in shared config
+ * @internal
+ */
+export function setOwner(owner) {
+    sharedConfig.owner = owner;
+    sharedConfig.context = owner;
+}
+/**
+ * Get current owner from shared config
+ * @internal
+ */
+export function getContextOwner() {
+    return sharedConfig.context || sharedConfig.owner;
+}
+// ============================================================================
+// GLOBAL STATE
+// ============================================================================
+/**
+ * Development mode flag
+ */
+export const DEV = typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
+// ============================================================================
+// OWNER-BASED LIFECYCLE COORDINATION
+// ============================================================================
+// Every component has a reactive Owner (from createRoot).
+// onMount and useEffect attach callbacks to the Owner via a Symbol-keyed
+// property. A single queueMicrotask per Owner flushes them in order:
+//   1. All onMount callbacks run first
+//   2. Then all useEffect callbacks are created as reactive effects
+// This works regardless of whether the component goes through $component,
+// the JSX runtime, or is called directly, as long as there's an Owner.
+const _LIFECYCLE = Symbol.for('fluixi-lifecycle');
+/**
+ * Get or create a lifecycle bucket on the current Owner.
+ * Returns null if there is no reactive Owner.
+ */
+function getOwnerLifecycle() {
+    const owner = getOwner();
+    if (!owner)
+        return null;
+    if (!owner[_LIFECYCLE]) {
+        const lc = { mounts: [], effects: [], scheduled: false };
+        owner[_LIFECYCLE] = lc;
+    }
+    return owner[_LIFECYCLE];
+}
+/**
+ * Schedule a microtask to flush the lifecycle for the current Owner.
+ * Only schedules once per Owner: subsequent calls are no-ops.
+ */
+function scheduleLifecycleFlush(lc) {
+    if (lc.scheduled)
+        return;
+    // The flush is a microtask, so on the server it lands after renderToString has
+    // returned and reaches for a DOM that is not there.
+    if (isServer()) {
+        lc.mounts = [];
+        lc.effects = [];
+        return;
+    }
+    lc.scheduled = true;
+    // Capture the owner now; by microtask time it will have been restored.
+    const owner = getOwner();
+    queueMicrotask(() => {
+        // The scope may have been torn down before this microtask ran (e.g. a <Portal>
+        // inside a <Show> that closed synchronously). Running mount/effect callbacks on a
+        // dead owner would re-attach listeners/effects whose cleanup never fires, a leak.
+        // Match Solid: an unmounted component's onMount simply does not run.
+        if (isOwnerDisposed(owner)) {
+            lc.mounts = [];
+            lc.effects = [];
+            return;
+        }
+        runWithOwner(owner, () => {
+            // 1. Run ALL onMount callbacks first
+            for (const cb of lc.mounts) {
+                try {
+                    const cleanup = cb();
+                    if (typeof cleanup === 'function') {
+                        onCleanup(cleanup);
+                    }
+                }
+                catch (e) {
+                    console.error('Error in onMount callback:', e);
+                }
+            }
+            // 2. THEN create effects for useEffect callbacks
+            for (const cb of lc.effects) {
+                let cleanup;
+                createEffect(() => {
+                    if (cleanup)
+                        cleanup();
+                    cleanup = cb();
+                });
+                onCleanup(() => {
+                    if (cleanup)
+                        cleanup();
+                });
+            }
+            // Clear
+            lc.mounts = [];
+            lc.effects = [];
+        });
+    });
+}
+/**
+ * The runtime creates components itself now, so nothing has to be registered for
+ * it to work and this does nothing. It stays because callers exist, and because
+ * `registerCreateComponent` is still the way to install a different component
+ * model: pass your own implementation there and the runtime uses it instead.
+ *
+ * Do not register a function that calls the runtime's own `createComponent`: it
+ * consults the slot first, so that recurses.
+ */
+export function ensureIntegration(_from) { }
+/**
+ * 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.
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = (props: { name: string }) => {
+ *   return html`<div>Hello ${props.name}</div>`;
+ * };
+ *
+ * const result = createComponent(MyComponent, { name: 'World' });
+ * ```
+ */
+export function createComponent(Comp, props) {
+    return domCreateComponent(Comp, props);
+}
+const cached = new WeakMap();
+export function $component(value, props) {
+    // if(isComponent(value) || isRoutes(value) || isRouter(value)) {
+    // //   if(!cached.has(value)){
+    // //     cached.set(value, ()=>untrack(()=>value(props)))
+    // //   }else{
+    // //     console.log('skipp track', value)
+    // //   }
+    // //  return cached.get(value)()
+    //   return untrack(() => value(props))
+    // }
+    const component = (typeof value === 'function')
+        ? untrack(() => value(props))
+        : value;
+    // Only stamp $name and $COMPONENT on functions/objects: primitives (strings, numbers)
+    // cannot have properties added in strict mode and would throw TypeError.
+    // Also skip stamping reactive values (signals/memos) with $COMPONENT so the DOM
+    // runtime doesn't misidentify them as static component thunks and cache them.
+    const nameable = component != null && (typeof component === 'function' || typeof component === 'object');
+    // As in the dom integration: the name goes on a reactive return value too, since only
+    // `asComponent` has to avoid one.
+    if (nameable) {
+        try {
+            component['$name'] = value.name;
+        }
+        catch { }
+    }
+    if (nameable && !isSignal(component)) {
+        // Always mark with asComponent so isComponent() works reliably in both dev and
+        // production browser environments.
+        return asComponent(component);
+    }
+    return component;
+}
+// ============================================================================
+// LIFECYCLE HOOKS
+// ============================================================================
+/**
+ * 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.
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   onMount(() => {
+ *     console.log('Component mounted');
+ *     return () => console.log('Cleanup');
+ *   });
+ *
+ *   return html`<div>Content</div>`;
+ * };
+ * ```
+ */
+export function onMount(fn, reactive = true) {
+    if (isServer())
+        return;
+    const lc = getOwnerLifecycle();
+    if (lc) {
+        if (!reactive) {
+            if (!lc.scheduled) {
+                fn();
+            }
+            return;
+        }
+        // Attach to Owner: will run before useEffect callbacks in the flush.
+        lc.mounts.push(fn);
+        scheduleLifecycleFlush(lc);
+    }
+    else {
+        if (!reactive) {
+            fn();
+            return;
+        }
+        // No Owner (rare). Fall back to SolidJS pattern.
+        createEffect(() => {
+            const cleanup = untrack(fn);
+            if (typeof cleanup === 'function') {
+                onCleanup(cleanup);
+            }
+        });
+    }
+}
+/**
+ * Register a callback to run when component unmounts
+ *
+ * SolidJS-aligned: directly delegates to onCleanup which registers
+ * with the current reactive Owner for automatic disposal.
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   onUnmount(() => {
+ *     console.log('Component is unmounting');
+ *   });
+ *
+ *   return html`<div>Content</div>`;
+ * };
+ * ```
+ */
+export function onUnmount(fn) {
+    onCleanup(fn);
+}
+/**
+ * Register a cleanup function
+ *
+ * Component constructs reactive graph including cleanup
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const timer = setInterval(() => console.log('tick'), 1000);
+ *
+ *   onCleanup(() => clearInterval(timer));
+ *
+ *   return html`<div>Timer running</div>`;
+ * };
+ * ```
+ */
+export { onCleanup };
+// ============================================================================
+// HOOKS
+// ============================================================================
+/**
+ * Create a reactive effect
+ *
+ * Effects run when their dependencies change
+ * On server, effects run once
+ *
+ * @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 function useEffect(callback) {
+    const lc = getOwnerLifecycle();
+    if (lc) {
+        // Attach to the Owner: created as an effect after all onMount callbacks.
+        lc.effects.push(callback);
+        scheduleLifecycleFlush(lc);
+    }
+    else {
+        // No Owner (rare). Create the effect immediately.
+        let cleanup;
+        createEffect(() => {
+            if (cleanup)
+                cleanup();
+            cleanup = callback();
+        });
+        onCleanup(() => {
+            if (cleanup)
+                cleanup();
+        });
+    }
+}
+/**
+ * Create a memoized computed value
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const [count, setCount] = createSignal(0);
+ *   const doubled = useMemo(() => count() * 2);
+ *
+ *   return html`<div>Doubled: ${doubled()}</div>`;
+ * };
+ * ```
+ */
+export function useMemo(fn) {
+    // createMemo is natively reactive and disposed automatically
+    // when its Owner is cleaned up. No lifecycle stack needed.
+    return createMemo(fn);
+}
+/**
+ * Create a ref object
+ *
+ * Refs persist across component re-renders (though components only run once)
+ * Useful for storing DOM references and mutable values
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const inputRef = useRef<HTMLInputElement>(null);
+ *
+ *   onMount(() => {
+ *     inputRef.current?.focus();
+ *   });
+ *
+ *   return html`<input ref=${inputRef} />`;
+ * };
+ * ```
+ */
+export function useRef(initialValue) {
+    const ref = { current: initialValue };
+    // Register cleanup to clear ref
+    onCleanup(() => {
+        ref.current = null;
+    });
+    return ref;
+}
+/**
+ * Create a reducer for state management
+ *
+ * @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 function useReducer(reducer, initialState) {
+    const [state, setState] = createSignal(initialState);
+    const dispatch = (action) => {
+        setState(reducer(state(), action));
+    };
+    return [state, dispatch];
+}
+/**
+ * Attach a listener for as long as the current owner lives.
+ *
+ * Runs through `useEffect`, so the removal it returns is called on disposal and before
+ * any re-run. Nothing has to be undone by hand. `target` may be a ref, read when the
+ * listener is attached rather than when this is called, so it works for an element the
+ * template has not created yet.
+ *
+ * @example
+ * ```ts
+ * useEventListener(window, 'resize', () => setWidth(window.innerWidth));
+ * useEventListener(dialogRef, 'keydown', onKey, { capture: true });
+ * ```
+ */
+export function useEventListener(target, event, handler, options) {
+    useEffect(() => {
+        // Resolve target from ref or direct value
+        const element = target && 'current' in target
+            ? target.current
+            : target;
+        if (!element)
+            return;
+        // Attach event listener
+        element.addEventListener(event, handler, options);
+        // Return cleanup function
+        return () => {
+            element.removeEventListener(event, handler, options);
+        };
+    });
+}
+/**
+ * Create a callback function (memoization optimization)
+ *
+ * In Fluixi, components only run once, so this is mostly for
+ * API compatibility and explicit intent
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   const handleClick = useCallback(() => {
+ *     console.log('Clicked');
+ *   });
+ *
+ *   return html`<button @click=${handleClick}>Click</button>`;
+ * };
+ * ```
+ */
+export function useCallback(callback) {
+    // Components execute once, so callback is already stable
+    // This is mainly for API compatibility with React-like patterns
+    return callback;
+}
+/**
+ * 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 FUNCTIONS (INTERNAL)
+// ============================================================================
+/**
+ * Helper to check if we're in a component context
+ * @internal
+ */
+export function hasLifecycleContext() {
+    return getOwner() !== null;
+}
+// ============================================================================
+// DEV MODE UTILITIES
+// ============================================================================
+/**
+ * Check if in development mode
+ *
+ * @example
+ * ```typescript
+ * if (isDev()) {
+ *   console.log('Running in development mode');
+ * }
+ * ```
+ */
+export function isDev() {
+    // return false
+    return DEV;
+}
+/**
+ * Development-only code execution
+ *
+ * @example
+ * ```typescript
+ * devOnly(() => {
+ *   console.log('This only runs in development');
+ * });
+ * ```
+ */
+export function devOnly(fn) {
+    if (DEV) {
+        fn();
+    }
+}

package/dist/src/lib/render/component.mjs

@@ -0,0 +1,214 @@
+// src/lib/render/component.ts
+import { isServer } from "@fluixi/dom";
+import {
+  createComponent as domCreateComponent,
+  asComponent
+} from "@fluixi/dom";
+import {
+  untrack,
+  onCleanup,
+  getOwner,
+  createEffect,
+  createMemo,
+  createSignal,
+  isSignal,
+  batch,
+  runWithOwner,
+  isOwnerDisposed
+} from "@fluixi/reactive/signal";
+var sharedConfig = {
+  context: null,
+  owner: null
+};
+function getSharedConfig() {
+  return sharedConfig;
+}
+function setOwner(owner) {
+  sharedConfig.owner = owner;
+  sharedConfig.context = owner;
+}
+function getContextOwner() {
+  return sharedConfig.context || sharedConfig.owner;
+}
+var DEV = typeof process !== "undefined" && false;
+var _LIFECYCLE = /* @__PURE__ */ Symbol.for("fluixi-lifecycle");
+function getOwnerLifecycle() {
+  const owner = getOwner();
+  if (!owner) return null;
+  if (!owner[_LIFECYCLE]) {
+    const lc = { mounts: [], effects: [], scheduled: false };
+    owner[_LIFECYCLE] = lc;
+  }
+  return owner[_LIFECYCLE];
+}
+function scheduleLifecycleFlush(lc) {
+  if (lc.scheduled) return;
+  if (isServer()) {
+    lc.mounts = [];
+    lc.effects = [];
+    return;
+  }
+  lc.scheduled = true;
+  const owner = getOwner();
+  queueMicrotask(() => {
+    if (isOwnerDisposed(owner)) {
+      lc.mounts = [];
+      lc.effects = [];
+      return;
+    }
+    runWithOwner(owner, () => {
+      for (const cb of lc.mounts) {
+        try {
+          const cleanup = cb();
+          if (typeof cleanup === "function") {
+            onCleanup(cleanup);
+          }
+        } catch (e) {
+          console.error("Error in onMount callback:", e);
+        }
+      }
+      for (const cb of lc.effects) {
+        let cleanup;
+        createEffect(() => {
+          if (cleanup) cleanup();
+          cleanup = cb();
+        });
+        onCleanup(() => {
+          if (cleanup) cleanup();
+        });
+      }
+      lc.mounts = [];
+      lc.effects = [];
+    });
+  });
+}
+function ensureIntegration(_from) {
+}
+function createComponent(Comp, props) {
+  return domCreateComponent(Comp, props);
+}
+function $component(value, props) {
+  const component = typeof value === "function" ? untrack(() => value(props)) : value;
+  const nameable = component != null && (typeof component === "function" || typeof component === "object");
+  if (nameable) {
+    try {
+      component["$name"] = value.name;
+    } catch {
+    }
+  }
+  if (nameable && !isSignal(component)) {
+    return asComponent(component);
+  }
+  return component;
+}
+function onMount(fn, reactive = true) {
+  if (isServer()) return;
+  const lc = getOwnerLifecycle();
+  if (lc) {
+    if (!reactive) {
+      if (!lc.scheduled) {
+        fn();
+      }
+      return;
+    }
+    lc.mounts.push(fn);
+    scheduleLifecycleFlush(lc);
+  } else {
+    if (!reactive) {
+      fn();
+      return;
+    }
+    createEffect(() => {
+      const cleanup = untrack(fn);
+      if (typeof cleanup === "function") {
+        onCleanup(cleanup);
+      }
+    });
+  }
+}
+function onUnmount(fn) {
+  onCleanup(fn);
+}
+function useEffect(callback) {
+  const lc = getOwnerLifecycle();
+  if (lc) {
+    lc.effects.push(callback);
+    scheduleLifecycleFlush(lc);
+  } else {
+    let cleanup;
+    createEffect(() => {
+      if (cleanup) cleanup();
+      cleanup = callback();
+    });
+    onCleanup(() => {
+      if (cleanup) cleanup();
+    });
+  }
+}
+function useMemo(fn) {
+  return createMemo(fn);
+}
+function useRef(initialValue) {
+  const ref = { current: initialValue };
+  onCleanup(() => {
+    ref.current = null;
+  });
+  return ref;
+}
+function useReducer(reducer, initialState) {
+  const [state, setState] = createSignal(initialState);
+  const dispatch = (action) => {
+    setState(reducer(state(), action));
+  };
+  return [state, dispatch];
+}
+function useEventListener(target, event, handler, options) {
+  useEffect(() => {
+    const element = target && "current" in target ? target.current : target;
+    if (!element) return;
+    element.addEventListener(event, handler, options);
+    return () => {
+      element.removeEventListener(event, handler, options);
+    };
+  });
+}
+function useCallback(callback) {
+  return callback;
+}
+function hasLifecycleContext() {
+  return getOwner() !== null;
+}
+function isDev() {
+  return DEV;
+}
+function devOnly(fn) {
+  if (DEV) {
+    fn();
+  }
+}
+export {
+  $component,
+  DEV,
+  batch,
+  createComponent,
+  createEffect,
+  createMemo,
+  devOnly,
+  ensureIntegration,
+  getContextOwner,
+  getOwner,
+  getSharedConfig,
+  hasLifecycleContext,
+  isDev,
+  onCleanup,
+  onMount,
+  onUnmount,
+  runWithOwner,
+  setOwner,
+  useCallback,
+  useEffect,
+  useEventListener,
+  useMemo,
+  useReducer,
+  useRef
+};