@fluixi/core 1.0.0-alpha.82 → 1.0.0-alpha.84

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

@@ -1,5 +1,4 @@
 /**
- * @fileoverview Client-Side Rendering Entry Point for Fluixi
  * @module @fluixi/core/client
  *
  * Implements client-side mounting and hydration logic using @fluixi/dom runtime.
@@ -9,9 +8,6 @@ import '../render/versions.js';
 /**
  * Mount application to DOM (Client-side Rendering)
  *
- * @param App Root component function
- * @param container DOM element to mount into
- *
  * @example
  * ```typescript
  * import { mount } from '@fluixi/core/client';
@@ -28,27 +24,27 @@ export interface StartClientOptions {
     /** Force hydration mode. Default: auto-detect from __FLUIXI_HYDRATION__ marker */
     hydrate?: boolean;
     /**
-     * The app's route tree (the same array passed to <Router routes={…}/>). When provided,
+     * The app's route tree (the same array passed to <Router routes={...}/>). When provided,
      * the lazy chunk(s) for the route matching the current URL are downloaded and awaited
-     * BEFORE hydration, so each lazy file-route resolves synchronously and adopts the server
+     * before hydration, so each lazy file-route resolves synchronously and adopts the server
      * DOM in place (no fallback, no duplicate). Passing this also enables auto-hydration of a
      * server-rendered (non-empty) root, giving flash-free hydration with zero extra config.
      */
     routes?: any[];
 }
 /**
- * Standard entry point for client-side rendering or hydration.
+ * Mount or hydrate an app in the browser.
+ *
+ * Hydration is detected from the marker the server render leaves behind, so the same
+ * call works for a server-rendered page and a plain SPA. Pass `hydrate` to force it.
  *
- * Auto-detects whether to hydrate (if server-rendered HTML is present)
- * or do a full client render.
+ * Pass `routes` for a file-routed app. The chunks for the route matching the current URL
+ * are downloaded and awaited before hydrating, which is what lets each lazy route resolve
+ * synchronously and adopt the server's DOM rather than building a second copy beside it.
  *
  * @example
  * ```ts
- * // entry-client.ts
- * import { startClient } from '@fluixi/core/client';
- * import App from './app';
- *
- * startClient(App);
+ * await startClient(App, { root: '#app', routes });
  * ```
  */
 export declare function startClient(App: (props?: any) => any, options?: StartClientOptions): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/client/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAaH,OAAO,uBAAuB,CAAC;AAe/B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,QAOlE;AAED,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,WAAW,CAC/B,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,GAAG,EACzB,OAAO,GAAE,kBAAuB,iBA4DjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/client/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,uBAAuB,CAAC;AAgB/B;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,QAOlE;AAED,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;CAChB;AAoBD;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,WAAW,CAC/B,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,GAAG,EACzB,OAAO,GAAE,kBAAuB,iBAgEjC"}

package/dist/src/lib/client/index.js

@@ -1,32 +1,26 @@
 /**
- * @fileoverview Client-Side Rendering Entry Point for Fluixi
  * @module @fluixi/core/client
  *
  * Implements client-side mounting and hydration logic using @fluixi/dom runtime.
  * Supports both JSX and Lit HTML.
  */
-// import {
-//   cleanupHydration,
-//   deserializeHydrationData,
-// } from '../server/hydration.js';
 import { render as domRender, hydrate as domHydrate, } from '@fluixi/dom';
 // Registers core's version with the DOM runtime, which does the stamping. This entry is a
-// separate subpath, so it does not otherwise load core's render — and without this the
+// separate subpath, so it does not otherwise load core's render, and without this the
 // hydrate path stamped `fx-dom`/`fx-reactive` but never `fluixi`.
 import '../render/versions.js';
 import { deserializeHydrationData, setHydrating, cleanupHydration, } from '../server/hydration.js';
 import { render } from '../render/index.js';
+import { createComponent } from '../render/component.js';
+import { createMemo } from '@fluixi/reactive/signal';
 import { createHead, setActiveHead, mountHead, stripHeadMarker } from '@fluixi/head';
 // Connect the reactive system (signals, effects, batch) to the DOM runtime.
 // Without this, createRenderEffect in @fluixi/dom is a one-shot call that never
-// re-runs when signals change — breaking all JSX reactive updates.
+// re-runs when signals change: breaking all JSX reactive updates.
 // ensureIntegration();
 /**
  * Mount application to DOM (Client-side Rendering)
  *
- * @param App Root component function
- * @param container DOM element to mount into
- *
  * @example
  * ```typescript
  * import { mount } from '@fluixi/core/client';
@@ -58,6 +52,23 @@ export { hydrate } from '@fluixi/dom';
  * startClient(App);
  * ```
  */
+/** The root, entered the way the compiler enters every other component. */
+const rootOf = (App) => createMemo(() => createComponent(App));
+/**
+ * Mount or hydrate an app in the browser.
+ *
+ * Hydration is detected from the marker the server render leaves behind, so the same
+ * call works for a server-rendered page and a plain SPA. Pass `hydrate` to force it.
+ *
+ * Pass `routes` for a file-routed app. The chunks for the route matching the current URL
+ * are downloaded and awaited before hydrating, which is what lets each lazy route resolve
+ * synchronously and adopt the server's DOM rather than building a second copy beside it.
+ *
+ * @example
+ * ```ts
+ * await startClient(App, { root: '#app', routes });
+ * ```
+ */
 export async function startClient(App, options = {}) {
     const container = typeof options.root === 'string'
         ? document.querySelector(options.root)
@@ -66,27 +77,27 @@ export async function startClient(App, options = {}) {
         throw new Error(`[Fluixi] Mount container not found: ${options.root ?? '#app'}`);
     }
     // Hydrate when explicitly requested (`{ hydrate: true }`), when the server emits the
-    // `__FLUIXI_HYDRATION__` marker, or — with a route tree in hand — when the mount root already
+    // `__FLUIXI_HYDRATION__` marker, or, with a route tree in hand, when the mount root already
     // holds server-rendered content. A non-empty root means SSR/SSG ran, so reuse that DOM instead
     // of clearing and re-rendering (which flashes). Auto-hydration is gated on `routes` because
     // hydrating an app with async lazy file-routes is only safe once those chunks are preloaded
-    // (below) — without the route tree we can't preload, so we fall back to the render() path. A
-    // client-only app mounts into an empty `<div id="root">` (firstElementChild null) → client render.
+    // (below): without the route tree we can't preload, so we fall back to the render() path. A
+    // client-only app mounts into an empty `<div id="root">` (firstElementChild null) -> client render.
     const hasServerDom = !!document.getElementById('__FLUIXI_HYDRATION__') ||
         (!!options.routes && container.firstElementChild != null);
     const shouldHydrate = options.hydrate ?? hasServerDom;
-    // Active head registry for this document — seo()/useHead() during the app render register here;
+    // Active head registry for this document: seo()/useHead() during the app render register here;
     // mountHead reconciles it into <head> after mount (reusing server tags by key) and keeps it live.
     const head = createHead();
     setActiveHead(head);
-    // Drop a stray `<!--fh:…-->` head-transport comment if the server left one in the mount root
+    // Drop a stray `<!--fh:...-->` head-transport comment if the server left one in the mount root
     // (streaming / custom servers that don't lift it into <head>). It would otherwise be the cursor's
-    // first node and strand hydration — rebuilding the whole tree as a duplicate. Harmless no-op when
+    // first node and strand hydration: rebuilding the whole tree as a duplicate. Harmless no-op when
     // the server already extracted it (the supported adapter/prerender/dev paths do).
     stripHeadMarker(container);
     if (shouldHydrate) {
         // Preload the lazy chunk(s) for the current route so they resolve synchronously during the
-        // hydration render — the lazy boundary then adopts the server DOM in place instead of
+        // hydration render, the lazy boundary then adopts the server DOM in place instead of
         // resolving a tick later and rebuilding a duplicate. Dynamic import keeps the router out of
         // client-only bundles that never pass `routes`.
         if (options.routes && options.routes.length) {
@@ -95,9 +106,13 @@ export async function startClient(App, options = {}) {
         }
         deserializeHydrationData();
         setHydrating(true);
-        domHydrate(() => App(), container);
+        // A memo around createComponent, which is what compiled JSX emits for every other
+        // component. Called directly, the root is the one component the runtime never hears
+        // about: nothing holds its return value, so no node is made and a graph of the
+        // application starts at whatever the root happened to render.
+        domHydrate(rootOf(App), container);
         // Handlers are now wired (delegated $$listeners attach during the hydration
-        // render) — replay any events the user fired before hydration.
+        // render): replay any events the user fired before hydration.
         replayEvents();
         setTimeout(() => {
             setHydrating(false);
@@ -105,14 +120,14 @@ export async function startClient(App, options = {}) {
         }, 100);
     }
     else {
-        render(() => App(), container);
+        render(rootOf(App), container);
     }
     mountHead(head);
 }
 /**
  * Replay events captured before hydration by the server's eventCaptureScript
  * (window.__FX_REPLAY__). Hydration REUSES the server DOM, so each recorded target
- * is still live — re-dispatch a synthetic event on it so the app's delegated
+ * is still live: re-dispatch a synthetic event on it so the app's delegated
  * handlers fire. Discrete events only (click/input/change/submit/keydown). No-op
  * when the capture script wasn't emitted (no queue).
  */

package/dist/src/lib/client/index.mjs

@@ -1 +1,222 @@
-import{b as f,e as p,f as y}from"./chunk-FT22BLCQ.mjs";import{render as J,hydrate as Q}from"@fluixi/dom";import{registerCoreVersion as k}from"@fluixi/dom";var m="1.0.0-alpha.82";import{stampVersions as h,warnOnVersionSkew as b,versions as ce}from"@fluixi/dom";k(m);import{createRoot as W}from"@fluixi/reactive/signal";import{isDOMNode as dt,delegateEvents as Y,insert as B}from"@fluixi/dom";import{createComponent as de,asComponent as le}from"@fluixi/dom";import{untrack as me,onCleanup as T,getOwner as L,createEffect as O,createMemo as R,createSignal as he,isSignal as be,batch as _,runWithOwner as A,isOwnerDisposed as ve}from"@fluixi/reactive/signal";import{createSignal as P,createMemo as M,createEffect as Re,createRenderEffect as F,isSignal as w,readChildren as D,useContext as H,createContext as j,createSuspenseBoundary as I,provideSuspense as v}from"@fluixi/reactive/signal";import{asSuspense as $,isComponent as N,createComponent as U,runWithoutHydration as V}from"@fluixi/dom";function x(t){return!!(t&&typeof t=="object"&&typeof t.then=="function"||t instanceof Promise)}var q=j();function d(t){return U(X,t)}function X(t){let e=I(),o=H(q),r=o?o.register(e.inFallback):void 0;function i(n){return n==null||typeof n=="boolean"?null:typeof n=="function"&&N(n)&&!w(n)?n():n}let s=V(()=>i(t.fallback??null)),a=v(e,()=>D(()=>t.children)),c=(n,u)=>{if(!(u>8))if(Array.isArray(n))for(let E of n)c(E,u+1);else typeof n=="function"&&w(n)&&c(n(),u+1)};v(e,()=>{F(()=>c(a,0))});let[C,g]=P(void 0),l=x(a);return l&&(e.increment(),a.then(n=>{g(()=>n),e.decrement()},()=>e.decrement())),M(()=>(r?r.showFallback():e.inFallback())?s:l?C():a)}$(d);Object.defineProperty(d,"__suspense",{value:!0,enumerable:!0});import{createMemo as Me,createSignal as Fe}from"@fluixi/reactive/signal";import{observeIntersection as He}from"@fluixi/dom/utils";import{createResource as Ne}from"@fluixi/reactive/signal";var K=typeof window>"u";function S(t,e,o={}){if(Y(["click","input","change","submit"]),K)throw new Error("render() is for client-side only. Use renderToString() on server.");if(!e)throw new Error("Container element is required");let r;return W(i=>{r=i;let s=typeof t=="function"?t():t;e.textContent="",h(e),b(),B(e,()=>s)}),()=>{r&&(r(),r=void 0)}}import{createHead as G,setActiveHead as Z,mountHead as ee,stripHeadMarker as te}from"@fluixi/head";import{hydrate as Lt}from"@fluixi/dom";function gt(t,e){if(!e)throw new Error("Container element not found for mount()");J(()=>t(),e)}async function Et(t,e={}){let o=typeof e.root=="string"?document.querySelector(e.root):e.root??document.querySelector("#app");if(!o)throw new Error(`[Fluixi] Mount container not found: ${e.root??"#app"}`);let r=!!document.getElementById("__FLUIXI_HYDRATION__")||!!e.routes&&o.firstElementChild!=null,i=e.hydrate??r,s=G();if(Z(s),te(o),i){if(e.routes&&e.routes.length){let{preloadRoutes:a}=await import("./router-IH7JYMRU.mjs");await a(e.routes,window.location.pathname)}p(),f(!0),Q(()=>t(),o),ne(),setTimeout(()=>{f(!1),y()},100)}else S(()=>t(),o);ee(s)}function ne(){if(typeof window>"u")return;let t=window;typeof t.__FX_REPLAY_STOP__=="function"&&t.__FX_REPLAY_STOP__();let e=t.__FX_REPLAY__;if(t.__FX_REPLAY__=void 0,t.__FX_REPLAY_STOP__=void 0,!(!Array.isArray(e)||e.length===0))for(let o of e){let r=o&&o.target;if(!r||r.isConnected===!1||typeof r.dispatchEvent!="function")continue;let i=o.type,s=i==="click"?new MouseEvent(i,{bubbles:!0,cancelable:!0}):new Event(i,{bubbles:!0,cancelable:!0});r.dispatchEvent(s)}}export{Lt as hydrate,gt as mount,Et as startClient};
+/*! @fluixi/core v1.0.0-alpha.84 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+import {
+  cleanupHydration,
+  deserializeHydrationData,
+  setHydrating
+} from "./chunk-2C2KDDQV.mjs";
+
+// src/lib/client/index.ts
+import {
+  render as domRender,
+  hydrate as domHydrate
+} from "@fluixi/dom";
+
+// src/lib/render/versions.ts
+import { registerCoreVersion } from "@fluixi/dom";
+
+// src/version.generated.ts
+var VERSION = "1.0.0-alpha.84";
+
+// src/lib/render/versions.ts
+import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";
+registerCoreVersion(VERSION);
+
+// src/lib/render/index.ts
+import { isServer as isServer3 } from "@fluixi/dom";
+import { createRoot as createRoot2 } from "@fluixi/reactive/signal";
+import {
+  isDOMNode,
+  delegateEvents,
+  insert
+} from "@fluixi/dom";
+
+// 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";
+function createComponent(Comp, props) {
+  return domCreateComponent(Comp, props);
+}
+
+// src/lib/render/suspense.ts
+import {
+  createSignal as createSignal2,
+  createMemo as createMemo2,
+  createEffect as createEffect2,
+  createRenderEffect as createRenderEffect2,
+  isSignal as isSignal2,
+  readChildren,
+  useContext as useContext2,
+  createContext as createContext2,
+  createSuspenseBoundary,
+  provideSuspense
+} from "@fluixi/reactive/signal";
+import {
+  asSuspense,
+  isComponent,
+  createComponent as createComponent2,
+  runWithoutHydration
+} from "@fluixi/dom";
+function isPromise(value) {
+  return !!(value && typeof value === "object" && typeof value.then === "function" || value instanceof Promise);
+}
+var SuspenseListContext = createContext2(void 0, "suspense-list");
+function Suspense(props) {
+  return createComponent2(SuspenseImpl, props);
+}
+function SuspenseImpl(props) {
+  const boundary = createSuspenseBoundary();
+  const listCtx = useContext2(SuspenseListContext);
+  const listState = listCtx ? listCtx.register(boundary.inFallback) : void 0;
+  function instantiateOnce(val) {
+    if (val == null || typeof val === "boolean") return null;
+    if (typeof val === "function" && isComponent(val) && !isSignal2(val)) return val();
+    return val;
+  }
+  const fallback = runWithoutHydration(() => instantiateOnce(props.fallback ?? null));
+  const children = provideSuspense(boundary, () => readChildren(() => props.children));
+  const track = (value, depth) => {
+    if (depth > 8) return;
+    if (Array.isArray(value)) {
+      for (const x of value) track(x, depth + 1);
+    } else if (typeof value === "function" && isSignal2(value)) {
+      track(value(), depth + 1);
+    }
+  };
+  provideSuspense(boundary, () => {
+    createRenderEffect2(() => track(children, 0));
+  });
+  const [resolved, setResolved] = createSignal2(void 0);
+  const childIsPromise = isPromise(children);
+  if (childIsPromise) {
+    boundary.increment();
+    children.then(
+      (v) => {
+        setResolved(() => v);
+        boundary.decrement();
+      },
+      () => boundary.decrement()
+    );
+  }
+  return createMemo2(() => {
+    const showFallback = listState ? listState.showFallback() : boundary.inFallback();
+    if (showFallback) return fallback;
+    if (childIsPromise) return resolved();
+    return children;
+  });
+}
+asSuspense(Suspense);
+Object.defineProperty(Suspense, "__suspense", { value: true, enumerable: true });
+
+// src/lib/render/deferred.ts
+import { isServer as isServer2 } from "@fluixi/dom";
+import { createMemo as createMemo3, createSignal as createSignal3 } from "@fluixi/reactive/signal";
+import { observeIntersection } from "@fluixi/dom/utils";
+
+// src/lib/render/await.ts
+import { createResource as createResource2 } from "@fluixi/reactive/signal";
+
+// src/lib/render/index.ts
+function render(code, container, options = {}) {
+  delegateEvents(["click", "input", "change", "submit"]);
+  if (isServer3()) {
+    throw new Error(
+      "render() is for client-side only. Use renderToString() on server."
+    );
+  }
+  if (!container) {
+    throw new Error("Container element is required");
+  }
+  let disposer;
+  createRoot2((dispose) => {
+    disposer = dispose;
+    const result = typeof code === "function" ? code() : code;
+    container.textContent = "";
+    stampVersions(container);
+    warnOnVersionSkew();
+    insert(container, () => result);
+  });
+  return () => {
+    if (disposer) {
+      disposer();
+      disposer = void 0;
+    }
+  };
+}
+
+// src/lib/client/index.ts
+import { createMemo as createMemo4 } from "@fluixi/reactive/signal";
+import { createHead, setActiveHead, mountHead, stripHeadMarker } from "@fluixi/head";
+import { hydrate } from "@fluixi/dom";
+function mount(App, container) {
+  if (!container) {
+    throw new Error("Container element not found for mount()");
+  }
+  domRender(() => App(), container);
+}
+var rootOf = (App) => createMemo4(() => createComponent(App));
+async function startClient(App, options = {}) {
+  const container = typeof options.root === "string" ? document.querySelector(options.root) : options.root ?? document.querySelector("#app");
+  if (!container) {
+    throw new Error(
+      `[Fluixi] Mount container not found: ${options.root ?? "#app"}`
+    );
+  }
+  const hasServerDom = !!document.getElementById("__FLUIXI_HYDRATION__") || !!options.routes && container.firstElementChild != null;
+  const shouldHydrate = options.hydrate ?? hasServerDom;
+  const head = createHead();
+  setActiveHead(head);
+  stripHeadMarker(container);
+  if (shouldHydrate) {
+    if (options.routes && options.routes.length) {
+      const { preloadRoutes } = await import("./router-X526HSWQ.mjs");
+      await preloadRoutes(options.routes, window.location.pathname);
+    }
+    deserializeHydrationData();
+    setHydrating(true);
+    domHydrate(rootOf(App), container);
+    replayEvents();
+    setTimeout(() => {
+      setHydrating(false);
+      cleanupHydration();
+    }, 100);
+  } else {
+    render(rootOf(App), container);
+  }
+  mountHead(head);
+}
+function replayEvents() {
+  if (typeof window === "undefined") return;
+  const w = window;
+  if (typeof w.__FX_REPLAY_STOP__ === "function") w.__FX_REPLAY_STOP__();
+  const queue = w.__FX_REPLAY__;
+  w.__FX_REPLAY__ = void 0;
+  w.__FX_REPLAY_STOP__ = void 0;
+  if (!Array.isArray(queue) || queue.length === 0) return;
+  for (const rec of queue) {
+    const target = rec && rec.target;
+    if (!target || target.isConnected === false || typeof target.dispatchEvent !== "function") continue;
+    const type = rec.type;
+    const ev = type === "click" ? new MouseEvent(type, { bubbles: true, cancelable: true }) : new Event(type, { bubbles: true, cancelable: true });
+    target.dispatchEvent(ev);
+  }
+}
+export {
+  hydrate,
+  mount,
+  startClient
+};