@fluixi/core 1.0.0-alpha.53

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

@@ -0,0 +1,520 @@
+/**
+ * Component creation for Fluixi. Component-creation logic only — context lives in
+ * the reactive system, rendering in render/index.ts, and SSR in server/.
+ */
+import { registerCreateComponent, asComponent, } from '@fluixi/dom';
+import { untrack, onCleanup, getOwner, createEffect, createMemo, createSignal, isSignal, batch, runWithOwner, } 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;
+    lc.scheduled = true;
+    // Capture the owner now; by microtask time it will have been restored.
+    const owner = getOwner();
+    queueMicrotask(() => {
+        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 = [];
+        });
+    });
+}
+// Give the dom runtime our createComponent. It gets everything else (effects,
+// memos, …) from @fluixi/reactive directly.
+export function ensureIntegration(from) {
+    registerCreateComponent(createComponent);
+}
+/**
+ * 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 function $component<T, U = any>(value: T, props?: U) {
+//   const component = () => (typeof value === 'function' && props) ?(value as any)(props) : value;
+//   Object.defineProperty(component, '__fluixi', {
+//     enumerable: true,
+//     configurable: true,
+//     value: true,
+//   });
+//    // (component as any).$COMPONENT = true;
+//   return asComponent(component) as C<T, U>;
+// }
+//
+export function createComponent(Comp, props) {
+    return $component(Comp, props);
+    // const c = $component(Comp, props)
+    // // return c() as any
+    // return  c as any
+}
+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.
+    if (component != null && (typeof component === 'function' || typeof component === 'object') && !isSignal(component)) {
+        try {
+            component['$name'] = value.name;
+        }
+        catch { }
+        // 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.
+ *
+ * @param {LifecycleCallback} fn - Mount callback
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = () => {
+ *   onMount(() => {
+ *     console.log('Component mounted');
+ *     return () => console.log('Cleanup');
+ *   });
+ *
+ *   return html`<div>Content</div>`;
+ * };
+ * ```
+ */
+export function onMount(fn, reactive = true) {
+    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.
+ *
+ * @param {() => void} fn - Unmount callback
+ *
+ * @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
+ *
+ * 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 };
+// ============================================================================
+// HOOKS
+// ============================================================================
+/**
+ * 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 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
+ *
+ * @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 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
+ *
+ * @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 function useRef(initialValue) {
+    const ref = { current: initialValue };
+    // Register cleanup to clear ref
+    onCleanup(() => {
+        ref.current = null;
+    });
+    return ref;
+}
+/**
+ * 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 function useReducer(reducer, initialState) {
+    const [state, setState] = createSignal(initialState);
+    const dispatch = (action) => {
+        setState(reducer(state(), action));
+    };
+    return [state, dispatch];
+}
+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
+ *
+ * @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 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
+ *
+ * @returns {boolean} True 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
+ *
+ * @param {() => void} fn - Function to run in dev mode
+ *
+ * @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 @@
+import{registerCreateComponent as y,asComponent as x}from"@fluixi/dom";import{untrack as a,onCleanup as r,getOwner as f,createEffect as s,createMemo as m,createSignal as C,isSignal as T,batch as R,runWithOwner as E}from"@fluixi/reactive/signal";var c={context:null,owner:null};function W(){return c}function K(e){c.owner=e,c.context=e}function V(){return c.context||c.owner}var p=typeof process<"u"&&!1,u=Symbol.for("fluixi-lifecycle");function l(){let e=f();if(!e)return null;if(!e[u]){let t={mounts:[],effects:[],scheduled:!1};e[u]=t}return e[u]}function d(e){if(e.scheduled)return;e.scheduled=!0;let t=f();queueMicrotask(()=>{E(t,()=>{for(let n of e.mounts)try{let o=n();typeof o=="function"&&r(o)}catch(o){console.error("Error in onMount callback:",o)}for(let n of e.effects){let o;s(()=>{o&&o(),o=n()}),r(()=>{o&&o()})}e.mounts=[],e.effects=[]})})}function F(e){y(O)}function O(e,t){return w(e,t)}function w(e,t){let n=typeof e=="function"?a(()=>e(t)):e;if(n!=null&&(typeof n=="function"||typeof n=="object")&&!T(n)){try{n.$name=e.name}catch{}return x(n)}return n}function I(e,t=!0){let n=l();if(n){if(!t){n.scheduled||e();return}n.mounts.push(e),d(n)}else{if(!t){e();return}s(()=>{let o=a(e);typeof o=="function"&&r(o)})}}function N(e){r(e)}function h(e){let t=l();if(t)t.effects.push(e),d(t);else{let n;s(()=>{n&&n(),n=e()}),r(()=>{n&&n()})}}function $(e){return m(e)}function q(e){let t={current:e};return r(()=>{t.current=null}),t}function P(e,t){let[n,o]=C(t);return[n,v=>{o(e(n(),v))}]}function Y(e,t,n,o){h(()=>{let i=e&&"current"in e?e.current:e;if(i)return i.addEventListener(t,n,o),()=>{i.removeEventListener(t,n,o)}})}function z(e){return e}function B(){return f()!==null}function G(){return p}function H(e){p&&e()}export{w as $component,p as DEV,R as batch,O as createComponent,s as createEffect,m as createMemo,H as devOnly,F as ensureIntegration,V as getContextOwner,f as getOwner,W as getSharedConfig,B as hasLifecycleContext,G as isDev,r as onCleanup,I as onMount,N as onUnmount,E as runWithOwner,K as setOwner,z as useCallback,h as useEffect,Y as useEventListener,$ as useMemo,P as useReducer,q as useRef};

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

@@ -0,0 +1 @@
+"use strict";var X=Object.create;var b=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,n)=>{for(var t in n)b(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of G(n))!Z.call(e,s)&&s!==t&&b(e,s,{get:()=>n[s],enumerable:!(o=Y(n,s))||o.enumerable});return e};var ne=(e,n,t)=>(t=e!=null?X(Q(e)):{},O(n||!e||!e.__esModule?b(t,"default",{value:e,enumerable:!0}):t,e)),te=e=>O(b({},"__esModule",{value:!0}),e);var pe={};ee(pe,{$component:()=>L,DEV:()=>x,Suspense:()=>C,SuspenseList:()=>H,batch:()=>r.batch,cleanupDelegation:()=>fe,createComponent:()=>v,createEffect:()=>r.createEffect,createMemo:()=>r.createMemo,devOnly:()=>N,getOwner:()=>r.getOwner,getSharedConfig:()=>k,initDelegation:()=>ue,isDev:()=>U,isJSXElement:()=>V,isLitResult:()=>I,isNode:()=>W,isPromise:()=>E,isRenderable:()=>ae,lazy:()=>K,onCleanup:()=>r.onCleanup,onMount:()=>j,onUnmount:()=>F,portal:()=>ce,render:()=>J,runWithOwner:()=>r.runWithOwner,useCallback:()=>z,useEffect:()=>g,useEventListener:()=>_,useMemo:()=>M,useReducer:()=>$,useRef:()=>D});module.exports=te(pe);var q=require("@fluixi/reactive/signal"),d=require("@fluixi/dom");var h=require("@fluixi/dom"),r=require("@fluixi/reactive/signal"),oe={context:null,owner:null};function k(){return oe}var x=typeof process<"u"&&!1,w=Symbol.for("fluixi-lifecycle");function R(){let e=(0,r.getOwner)();if(!e)return null;if(!e[w]){let n={mounts:[],effects:[],scheduled:!1};e[w]=n}return e[w]}function P(e){if(e.scheduled)return;e.scheduled=!0;let n=(0,r.getOwner)();queueMicrotask(()=>{(0,r.runWithOwner)(n,()=>{for(let t of e.mounts)try{let o=t();typeof o=="function"&&(0,r.onCleanup)(o)}catch(o){console.error("Error in onMount callback:",o)}for(let t of e.effects){let o;(0,r.createEffect)(()=>{o&&o(),o=t()}),(0,r.onCleanup)(()=>{o&&o()})}e.mounts=[],e.effects=[]})})}function A(e){(0,h.registerCreateComponent)(v)}function v(e,n){return L(e,n)}function L(e,n){let t=typeof e=="function"?(0,r.untrack)(()=>e(n)):e;if(t!=null&&(typeof t=="function"||typeof t=="object")&&!(0,r.isSignal)(t)){try{t.$name=e.name}catch{}return(0,h.asComponent)(t)}return t}function j(e,n=!0){let t=R();if(t){if(!n){t.scheduled||e();return}t.mounts.push(e),P(t)}else{if(!n){e();return}(0,r.createEffect)(()=>{let o=(0,r.untrack)(e);typeof o=="function"&&(0,r.onCleanup)(o)})}}function F(e){(0,r.onCleanup)(e)}function g(e){let n=R();if(n)n.effects.push(e),P(n);else{let t;(0,r.createEffect)(()=>{t&&t(),t=e()}),(0,r.onCleanup)(()=>{t&&t()})}}function M(e){return(0,r.createMemo)(e)}function D(e){let n={current:e};return(0,r.onCleanup)(()=>{n.current=null}),n}function $(e,n){let[t,o]=(0,r.createSignal)(n);return[t,p=>{o(e(t(),p))}]}function _(e,n,t,o){g(()=>{let s=e&&"current"in e?e.current:e;if(s)return s.addEventListener(n,t,o),()=>{s.removeEventListener(n,t,o)}})}function z(e){return e}function U(){return x}function N(e){x&&e()}var i=require("@fluixi/reactive/signal"),l=require("@fluixi/dom");function W(e){return typeof window>"u"?!1:typeof Node=="function"&&e instanceof Node?!0:!!(e&&typeof e=="object"&&typeof e.nodeType=="number")}function I(e){return!e||typeof e!="object"?!1:!!(typeof e._$litType$<"u"||typeof e._$litDirective$<"u"||Array.isArray(e.strings)&&Array.isArray(e.values))}function E(e){return!!(e&&typeof e=="object"&&typeof e.then=="function"||e instanceof Promise)}function V(e){return!!(e&&typeof e=="object"&&"type"in e&&"props"in e)}var B=(0,i.createContext)();function C(e){return(0,l.createComponent)(re,e)}function re(e){let n=(0,i.createSuspenseBoundary)(),t=(0,i.useContext)(B),o=t?t.register(n.inFallback):void 0;function s(a){return a==null||typeof a=="boolean"?null:typeof a=="function"&&(0,l.isComponent)(a)&&!(0,i.isSignal)(a)?a():a}let p=(0,l.runWithoutHydration)(()=>s(e.fallback??null)),u=(0,i.provideSuspense)(n,()=>e.children);(0,i.provideSuspense)(n,()=>{(0,i.createRenderEffect)(()=>{let a=u;if(Array.isArray(a))for(let S of a)typeof S=="function"&&(0,i.isSignal)(S)&&S();else typeof a=="function"&&(0,i.isSignal)(a)&&a()})});let[f,c]=(0,i.createSignal)(void 0),m=E(u);return m&&(n.increment(),u.then(a=>{c(()=>a),n.decrement()},()=>n.decrement())),(0,i.createMemo)(()=>(o?o.showFallback():n.inFallback())?p:m?f():u)}function H(e){return(0,l.createComponent)(ie,e)}function ie(e){let{revealOrder:n="together",tail:t}=e,o=[];function s(){if(n==="together"){let u=o.every(f=>!f.inFallback());o.forEach(f=>{f.setShowContent(u),f.setShowFallback(!u)})}else{let u=n==="backwards"?[...o].reverse():o,f=!1;for(let c of u)f||c.inFallback()?(f=!0,c.setShowContent(!1),c.setShowFallback(t!=="hidden")):(c.setShowContent(!0),c.setShowFallback(!1))}}let p={register:u=>{let[f,c]=(0,i.createSignal)(!0),[m,a]=(0,i.createSignal)(!1);return o.push({inFallback:u,setShowContent:c,setShowFallback:a}),(0,i.createEffect)(()=>{u(),s()}),{showContent:f,showFallback:m}}};return B.Provider({value:p,children:e.children})}(0,l.asSuspense)(C);Object.defineProperty(C,"__suspense",{value:!0,enumerable:!0});var y=require("@fluixi/reactive/signal");function K(e,n){let t,o,s;function p(){return o||(o=e().then(f=>t=f.default)),o}n?.preload&&p();let u=(f=>{if(t){let c=t;return(0,y.untrack)(()=>c(f))}if(!s){let[c]=(0,y.createResource)(()=>p());if(s=c,c.error)throw c.error}return(0,y.createMemo)(()=>{let c=s();return c?(0,y.untrack)(()=>c(f)):void 0},void 0,{name:"lazy"})});return u.preload=()=>p().then(()=>{}),u.$lazy=!0,u.loader=e,u}typeof window<"u"&&import("lit").then(e=>(0,d.registerLitRender)(e.render));var T=typeof window>"u";function J(e,n,t={}){if(A("render"),(0,d.delegateEvents)(["click","input","change","submit"]),T)throw new Error("render() is for client-side only. Use renderToString() on server.");if(!n)throw new Error("Container element is required");let o;return(0,q.createRoot)(s=>{o=s;let p=typeof e=="function"?e():e;n.textContent="",n.setAttribute("fluixi-js","v1"),(0,d.insert)(n,()=>p)}),()=>{o&&(o(),o=void 0)}}function se(e){return e&&typeof e=="object"&&(e._$litType$!==void 0||e._$litDirective$!==void 0)}function ce(e,n,t={}){let o=document.createElement("div");o.setAttribute("data-portal","true"),n.appendChild(o);let s=J(e,o,t);return()=>{s(),n.contains(o)&&n.removeChild(o)}}function ae(e){return!!(e==null||typeof e=="function"||(0,d.isDOMNode)(e)||se(e)||Array.isArray(e)||typeof e=="string"||typeof e=="number"||typeof e=="boolean")}function ue(){T||(0,d.delegateEvents)(["click","input","change","submit"])}function fe(){}

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

@@ -0,0 +1,113 @@
+/**
+ * @fileoverview Client-Side Rendering for Fluixi
+ * @module @fluixi/core/render
+ *
+ * Client-side rendering:
+ * - Real DOM
+ * - Fine-grained mutation
+ *
+ * Following SolidJS structure: render logic separated from component creation
+ */
+/**
+ * Render options
+ */
+export interface RenderOptions {
+    /**
+     * Whether to hydrate existing content
+     */
+    hydrate?: boolean;
+    /**
+     * Marker for hydration boundaries
+     */
+    marker?: Node;
+    /**
+     * Callback when disposed
+     */
+    onDispose?: () => void;
+}
+/**
+ * Render a component into a DOM element
+ *
+ * Section 7 — CLIENT:
+ * - Real DOM (no Virtual DOM)
+ * - Fine-grained mutation (no reconciliation)
+ *
+ * Section 1: Component executes once during render
+ * Section 5: Creates reactive owner (root)
+ *
+ * @param {() => any} code - Component or function to render
+ * @param {HTMLElement} container - Target DOM element
+ * @param {RenderOptions} options - Render options
+ * @returns {() => void} Dispose function
+ *
+ * @example
+ * ```typescript
+ * import { render } from '@fluixi/core';
+ * import { createSignal } from '@fluixi/reactive';
+ * import { html } from 'lit';
+ *
+ * const App = () => {
+ *   const [count, setCount] = createSignal(0);
+ *   return html`
+ *     <button @click=${() => setCount(count() + 1)}>
+ *       Count: ${count()}
+ *     </button>
+ *   `;
+ * };
+ *
+ * const dispose = render(App, document.getElementById('app'));
+ * ```
+ */
+export declare function render(code: () => any, container: HTMLElement, options?: RenderOptions): () => void;
+/**
+ * Render into a different part of the DOM tree
+ *
+ * @param {() => any} code - Component to render
+ * @param {HTMLElement} target - Target element (outside current tree)
+ * @param {RenderOptions} options - Render options
+ * @returns {() => void} Dispose function
+ *
+ * @example
+ * ```typescript
+ * import { portal } from '@fluixi/core';
+ *
+ * const Modal = () => {
+ *   return portal(
+ *     () => html`<div class="modal">Content</div>`,
+ *     document.body
+ *   );
+ * };
+ * ```
+ */
+export declare function portal(code: () => any, target: HTMLElement, options?: RenderOptions): () => void;
+/**
+ * Check if a value can be rendered
+ *
+ * @param {any} value - Value to check
+ * @returns {boolean} True if renderable
+ */
+export declare function isRenderable(value: any): boolean;
+/**
+ * Initialize event delegation
+ * Should be called once when app starts
+ *
+ * @example
+ * ```typescript
+ * import { initDelegation } from '@fluixi/core';
+ *
+ * initDelegation();
+ * render(App, document.getElementById('app'));
+ * ```
+ */
+export declare function initDelegation(): void;
+/**
+ * Cleanup event delegation
+ * Should be called when app unmounts
+ */
+export declare function cleanupDelegation(): void;
+export { createComponent, onMount, onUnmount, useEffect, useRef, useReducer, useMemo, useEventListener, useCallback, onCleanup, batch, createMemo, createEffect, getOwner, runWithOwner, isDev, devOnly, DEV, getSharedConfig, $component, } from './component.js';
+export { Suspense, SuspenseList, type SuspenseProps, type SuspenseListProps, isNode, isLitResult, isPromise, isJSXElement, } from './suspense.js';
+export { lazy } from "./lazy.js";
+export type { LazyOptions, LazyComponent } from "./lazy.js";
+export type { Component, ComponentProps, LifecycleCallback, RefObject, } from './component.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/render/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA0BH;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CACpB,IAAI,EAAE,MAAM,GAAG,EACf,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE,aAAkB,GAC1B,MAAM,IAAI,CA4CZ;AAmBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CACpB,IAAI,EAAE,MAAM,GAAG,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,aAAkB,GAC1B,MAAM,IAAI,CAaZ;AAMD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAchD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAGrC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAGxC;AAOD,OAAO,EACL,eAAe,EACf,OAAO,EACP,SAAS,EACT,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,KAAK,EACL,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,EACP,GAAG,EACH,eAAe,EACf,UAAU,GACX,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,QAAQ,EACR,YAAY,EAEZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAEtB,MAAM,EACN,WAAW,EACX,SAAS,EACT,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,YAAY,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,WAAW,CAAA;AAEzD,YAAY,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,SAAS,GACV,MAAM,gBAAgB,CAAC"}