@fluixi/core 1.0.0-alpha.100

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

@@ -0,0 +1,51 @@
+/**
+ * @module @fluixi/core/client
+ *
+ * Implements client-side mounting and hydration logic using @fluixi/dom runtime.
+ * Supports both JSX and Lit HTML.
+ */
+import '../render/versions.js';
+/**
+ * Mount application to DOM (Client-side Rendering)
+ *
+ * @example
+ * ```typescript
+ * import { mount } from '@fluixi/core/client';
+ * import App from './App';
+ *
+ * mount(() => App(), document.getElementById('root'));
+ * ```
+ */
+export declare function mount(App: () => any, container: HTMLElement | null): void;
+export { hydrate } from '@fluixi/dom';
+export interface StartClientOptions {
+    /** CSS selector or HTMLElement for the app root. Default: '#app' */
+    root?: string | HTMLElement;
+    /** 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 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
+     * 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[];
+}
+/**
+ * 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 declare function startClient(App: (props?: any) => any, options?: StartClientOptions): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/client/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAaH,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,iBAiFjC"}

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

@@ -0,0 +1,174 @@
+/**
+ * @module @fluixi/core/client
+ *
+ * Implements client-side mounting and hydration logic using @fluixi/dom runtime.
+ * Supports both JSX and Lit HTML.
+ */
+import { render as domRender, hydrate as domHydrate, beginAppHydration, endAppHydration, removeUnclaimedKeyed, clearHydrationKeys, } 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
+// 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.
+// ensureIntegration();
+/**
+ * Mount application to DOM (Client-side Rendering)
+ *
+ * @example
+ * ```typescript
+ * import { mount } from '@fluixi/core/client';
+ * import App from './App';
+ *
+ * mount(() => App(), document.getElementById('root'));
+ * ```
+ */
+export function mount(App, container) {
+    if (!container) {
+        throw new Error('Container element not found for mount()');
+    }
+    // Use @fluixi/dom render which handles reactivity and supports Lit via registration
+    domRender(() => App(), container);
+}
+export { hydrate } from '@fluixi/dom';
+/**
+ * Standard entry point for client-side rendering or hydration.
+ *
+ * Auto-detects whether to hydrate (if server-rendered HTML is present)
+ * or do a full client render.
+ *
+ * @example
+ * ```ts
+ * // entry-client.ts
+ * import { startClient } from '@fluixi/core/client';
+ * import App from './app';
+ *
+ * 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)
+        : options.root ?? document.querySelector('#app');
+    if (!container) {
+        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
+    // 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.
+    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;
+    // 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
+    // (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
+    // the server already extracted it (the supported adapter/prerender/dev paths do).
+    stripHeadMarker(container);
+    if (shouldHydrate) {
+        // Before the first await: custom elements the server rendered upgrade while the route
+        // chunks load, and wait for this hydration to hand them their owner.
+        beginAppHydration();
+        try {
+            // 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
+            // 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) {
+                const { preloadRoutes } = await import('../router/index.js');
+                await preloadRoutes(options.routes, window.location.pathname);
+            }
+            deserializeHydrationData();
+            setHydrating(true);
+            // 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.
+            // Built inside hydrate, not as its argument: a memo runs when it is made, and made out
+            // here the root would render before hydration is on, without the key scope the server
+            // opened for it. Every key below would then be one level off and nothing adopted by key.
+            domHydrate(() => rootOf(App), container);
+            // Handlers are now wired (delegated $$listeners attach during the hydration
+            // render): replay any events the user fired before hydration.
+            replayEvents();
+        }
+        finally {
+            endAppHydration();
+        }
+        setTimeout(() => {
+            setHydrating(false);
+            // Late route chunks have had their chance to claim their markup: what nothing claimed
+            // is server output the client did not render, or rendered differently.
+            const removed = removeUnclaimedKeyed(container);
+            if (removed && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+                console.warn(`[fluixi] hydration: removed ${removed} server element(s) the client did not render. Check for markup that depends on client-only state.`);
+            }
+            clearHydrationKeys();
+            cleanupHydration();
+        }, 100);
+    }
+    else {
+        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
+ * handlers fire. Discrete events only (click/input/change/submit/keydown). No-op
+ * when the capture script wasn't emitted (no queue).
+ */
+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__ = undefined;
+    w.__FX_REPLAY_STOP__ = undefined;
+    if (!Array.isArray(queue) || queue.length === 0)
+        return;
+    for (const rec of queue) {
+        const target = rec && rec.target;
+        // Skip targets dropped by a hydration mismatch (recreated, not reconnected).
+        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);
+    }
+}

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

@@ -0,0 +1,293 @@
+/*! @fluixi/core v1.0.0-alpha.100 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+import "./chunk-FDOPDB6Z.mjs";
+
+// src/lib/client/index.ts
+import {
+  render as domRender,
+  hydrate as domHydrate,
+  beginAppHydration,
+  endAppHydration,
+  removeUnclaimedKeyed,
+  clearHydrationKeys
+} from "@fluixi/dom";
+
+// src/lib/render/versions.ts
+import { registerCoreVersion } from "@fluixi/dom";
+
+// src/version.generated.ts
+var VERSION = "1.0.0-alpha.100";
+
+// src/lib/render/versions.ts
+import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";
+registerCoreVersion(VERSION);
+
+// src/lib/server/hydration.ts
+import { isServer as domIsServer } from "@fluixi/dom";
+var hydrating = false;
+var hydrationDataMap = /* @__PURE__ */ new Map();
+function setHydrating(state) {
+  hydrating = state;
+}
+function clearHydrationData() {
+  hydrationDataMap.clear();
+}
+function deserializeHydrationData() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (!script || script.getAttribute("type") !== "application/json") {
+    return false;
+  }
+  try {
+    const json = script.textContent || "{}";
+    const data = JSON.parse(json);
+    for (const [key, value] of Object.entries(data)) {
+      hydrationDataMap.set(key, value);
+    }
+    return true;
+  } catch (error) {
+    console.error("Failed to deserialize hydration data:", error);
+    return false;
+  }
+}
+function cleanupHydration() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (script) {
+    script.remove();
+  }
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    null
+  );
+  const comments = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const comment = node;
+    const text = comment.nodeValue || "";
+    if (text.startsWith("#") || text.startsWith("/")) {
+      comments.push(comment);
+    }
+  }
+  comments.forEach((comment) => comment.remove());
+  clearHydrationData();
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("load", () => {
+    setTimeout(cleanupHydration, 100);
+  });
+}
+
+// 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) {
+    beginAppHydration();
+    try {
+      if (options.routes && options.routes.length) {
+        const { preloadRoutes } = await import("./router-4PTBPZLQ.mjs");
+        await preloadRoutes(options.routes, window.location.pathname);
+      }
+      deserializeHydrationData();
+      setHydrating(true);
+      domHydrate(() => rootOf(App), container);
+      replayEvents();
+    } finally {
+      endAppHydration();
+    }
+    setTimeout(() => {
+      setHydrating(false);
+      const removed = removeUnclaimedKeyed(container);
+      if (removed && typeof process !== "undefined" && false) {
+        console.warn(`[fluixi] hydration: removed ${removed} server element(s) the client did not render. Check for markup that depends on client-only state.`);
+      }
+      clearHydrationKeys();
+      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
+};