@fluixi/core 1.0.0-alpha.100

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

@@ -0,0 +1,221 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/render/component.ts
+var component_exports = {};
+__export(component_exports, {
+  $component: () => $component,
+  DEV: () => DEV,
+  batch: () => import_signal.batch,
+  createComponent: () => createComponent,
+  createEffect: () => import_signal.createEffect,
+  createMemo: () => import_signal.createMemo,
+  devOnly: () => devOnly,
+  ensureIntegration: () => ensureIntegration,
+  getContextOwner: () => getContextOwner,
+  getOwner: () => import_signal.getOwner,
+  getSharedConfig: () => getSharedConfig,
+  hasLifecycleContext: () => hasLifecycleContext,
+  isDev: () => isDev,
+  onCleanup: () => import_signal.onCleanup,
+  onMount: () => onMount,
+  onUnmount: () => onUnmount,
+  runWithOwner: () => import_signal.runWithOwner,
+  setOwner: () => setOwner,
+  useCallback: () => useCallback,
+  useEffect: () => useEffect,
+  useEventListener: () => useEventListener,
+  useMemo: () => useMemo,
+  useReducer: () => useReducer,
+  useRef: () => useRef
+});
+module.exports = __toCommonJS(component_exports);
+var import_dom = require("@fluixi/dom");
+var import_dom2 = require("@fluixi/dom");
+var import_signal = require("@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 = (0, import_signal.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 ((0, import_dom.isServer)()) {
+    lc.mounts = [];
+    lc.effects = [];
+    return;
+  }
+  lc.scheduled = true;
+  const owner = (0, import_signal.getOwner)();
+  queueMicrotask(() => {
+    if ((0, import_signal.isOwnerDisposed)(owner)) {
+      lc.mounts = [];
+      lc.effects = [];
+      return;
+    }
+    (0, import_signal.runWithOwner)(owner, () => {
+      for (const cb of lc.mounts) {
+        try {
+          const cleanup = cb();
+          if (typeof cleanup === "function") {
+            (0, import_signal.onCleanup)(cleanup);
+          }
+        } catch (e) {
+          console.error("Error in onMount callback:", e);
+        }
+      }
+      for (const cb of lc.effects) {
+        let cleanup;
+        (0, import_signal.createEffect)(() => {
+          if (cleanup) cleanup();
+          cleanup = cb();
+        });
+        (0, import_signal.onCleanup)(() => {
+          if (cleanup) cleanup();
+        });
+      }
+      lc.mounts = [];
+      lc.effects = [];
+    });
+  });
+}
+function ensureIntegration(_from) {
+}
+function createComponent(Comp, props) {
+  return (0, import_dom2.createComponent)(Comp, props);
+}
+function $component(value, props) {
+  const component = typeof value === "function" ? (0, import_signal.untrack)(() => value(props)) : value;
+  const nameable = component != null && (typeof component === "function" || typeof component === "object");
+  if (nameable) {
+    try {
+      component["$name"] = value.name;
+    } catch {
+    }
+  }
+  if (nameable && !(0, import_signal.isSignal)(component)) {
+    return (0, import_dom2.asComponent)(component);
+  }
+  return component;
+}
+function onMount(fn, reactive = true) {
+  if ((0, import_dom.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;
+    }
+    (0, import_signal.createEffect)(() => {
+      const cleanup = (0, import_signal.untrack)(fn);
+      if (typeof cleanup === "function") {
+        (0, import_signal.onCleanup)(cleanup);
+      }
+    });
+  }
+}
+function onUnmount(fn) {
+  (0, import_signal.onCleanup)(fn);
+}
+function useEffect(callback) {
+  const lc = getOwnerLifecycle();
+  if (lc) {
+    lc.effects.push(callback);
+    scheduleLifecycleFlush(lc);
+  } else {
+    let cleanup;
+    (0, import_signal.createEffect)(() => {
+      if (cleanup) cleanup();
+      cleanup = callback();
+    });
+    (0, import_signal.onCleanup)(() => {
+      if (cleanup) cleanup();
+    });
+  }
+}
+function useMemo(fn) {
+  return (0, import_signal.createMemo)(fn);
+}
+function useRef(initialValue) {
+  const ref = { current: initialValue };
+  (0, import_signal.onCleanup)(() => {
+    ref.current = null;
+  });
+  return ref;
+}
+function useReducer(reducer, initialState) {
+  const [state, setState] = (0, import_signal.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 (0, import_signal.getOwner)() !== null;
+}
+function isDev() {
+  return DEV;
+}
+function devOnly(fn) {
+  if (DEV) {
+    fn();
+  }
+}

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

@@ -0,0 +1,296 @@
+/**
+ * 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;
+}
+/**
+ * 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 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.
+ *
+ * @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.
+ *
+ * @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.
+ *
+ * @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
+ *
+ * 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 };
+/**
+ * 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 declare function useEffect(callback: () => void | (() => void)): void;
+/**
+ * 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 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
+ *
+ * @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
+ *
+ * @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
+ *
+ * @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
+ *
+ * @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
+ *
+ * @example
+ * ```typescript
+ * if (isDev()) {
+ *   console.log('Running in development mode');
+ * }
+ * ```
+ */
+export declare function isDev(): boolean;
+/**
+ * Development-only code execution
+ *
+ * @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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"}