@netrojs/fnetro 0.1.5 → 0.2.0

package/dist/client.js

@@ -1,419 +1,8 @@
 // client.ts
-import { render } from "hono/jsx/dom";
-import { jsx } from "hono/jsx";
-import {
-  useState,
-  useEffect,
-  useMemo,
-  useRef as useHonoRef,
-  useSyncExternalStore
-} from "hono/jsx";
+import { createSignal, createMemo, createComponent } from "solid-js";
+import { hydrate } from "solid-js/web";
 
 // core.ts
-var RAW = /* @__PURE__ */ Symbol("raw");
-var IS_REACTIVE = /* @__PURE__ */ Symbol("isReactive");
-var IS_READONLY = /* @__PURE__ */ Symbol("isReadonly");
-var IS_REF = /* @__PURE__ */ Symbol("isRef");
-var MARK_RAW = /* @__PURE__ */ Symbol("markRaw");
-var targetMap = /* @__PURE__ */ new WeakMap();
-var activeEffect = null;
-var shouldTrack = true;
-var trackStack = [];
-function pauseTracking() {
-  trackStack.push(shouldTrack);
-  shouldTrack = false;
-}
-function resetTracking() {
-  shouldTrack = trackStack.pop() ?? true;
-}
-function track(target, key) {
-  if (!shouldTrack || !activeEffect) return;
-  let depsMap = targetMap.get(target);
-  if (!depsMap) targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
-  let dep = depsMap.get(key);
-  if (!dep) depsMap.set(key, dep = /* @__PURE__ */ new Set());
-  trackEffect(activeEffect, dep);
-}
-function trackEffect(effect2, dep) {
-  if (!dep.has(effect2)) {
-    dep.add(effect2);
-    effect2.deps.push(dep);
-  }
-}
-function trigger(target, key, newVal, oldVal) {
-  const depsMap = targetMap.get(target);
-  if (!depsMap) return;
-  const effects = [];
-  const computedEffects = [];
-  depsMap.get(key)?.forEach((e) => {
-    if (e !== activeEffect) {
-      e.computed ? computedEffects.push(e) : effects.push(e);
-    }
-  });
-  [...computedEffects, ...effects].forEach((e) => {
-    if (e.active) e.scheduler ? e.scheduler() : e.run();
-  });
-}
-var ReactiveEffect = class {
-  constructor(fn, scheduler, scope) {
-    this.fn = fn;
-    this.scheduler = scheduler;
-    this.scope = scope;
-    scope?.effects.push(this);
-  }
-  deps = [];
-  active = true;
-  cleanup;
-  computed = false;
-  run() {
-    if (!this.active) return this.fn();
-    const prevEffect = activeEffect;
-    const prevShouldTrack = shouldTrack;
-    shouldTrack = true;
-    activeEffect = this;
-    this.cleanup?.();
-    this.cleanup = void 0;
-    this.deps.length = 0;
-    try {
-      const result = this.fn();
-      if (typeof result === "function") this.cleanup = result;
-      return result;
-    } finally {
-      activeEffect = prevEffect;
-      shouldTrack = prevShouldTrack;
-    }
-  }
-  stop() {
-    if (this.active) {
-      cleanupEffect(this);
-      this.active = false;
-    }
-  }
-};
-function cleanupEffect(e) {
-  e.deps.forEach((dep) => dep.delete(e));
-  e.deps.length = 0;
-}
-var activeScope;
-var EffectScope = class {
-  effects = [];
-  cleanups = [];
-  active = true;
-  run(fn) {
-    const prev = activeScope;
-    activeScope = this;
-    try {
-      return fn();
-    } finally {
-      activeScope = prev;
-    }
-  }
-  stop() {
-    if (this.active) {
-      this.effects.forEach((e) => e.stop());
-      this.cleanups.forEach((fn) => fn());
-      this.active = false;
-    }
-  }
-  onCleanup(fn) {
-    this.cleanups.push(fn);
-  }
-};
-function effectScope() {
-  return new EffectScope();
-}
-function effect(fn) {
-  const e = new ReactiveEffect(fn, void 0, activeScope);
-  e.run();
-  return () => e.stop();
-}
-function watchEffect(fn, opts) {
-  const e = new ReactiveEffect(fn, void 0, activeScope);
-  e.run();
-  return () => e.stop();
-}
-var refTarget = /* @__PURE__ */ Symbol("refTarget");
-var RefImpl = class {
-  constructor(value, shallow = false) {
-    this.shallow = shallow;
-    this._value = shallow ? value : toReactive(value);
-  }
-  [IS_REF] = true;
-  _value;
-  _subscribers = /* @__PURE__ */ new Set();
-  get value() {
-    track(this, refTarget);
-    this._subscribers.forEach((fn) => {
-    });
-    return this._value;
-  }
-  set value(next) {
-    const newVal = this.shallow ? next : toReactive(next);
-    if (!hasChanged(newVal, this._value)) return;
-    this._value = newVal;
-    trigger(this, refTarget, newVal, this._value);
-    this._subscribers.forEach((fn) => fn());
-  }
-  /** Subscribe for useSyncExternalStore */
-  subscribe(fn) {
-    this._subscribers.add(fn);
-    return () => this._subscribers.delete(fn);
-  }
-  peek() {
-    return this._value;
-  }
-};
-function ref(value) {
-  return isRef(value) ? value : new RefImpl(value);
-}
-function shallowRef(value) {
-  return new RefImpl(value, true);
-}
-function triggerRef(r) {
-  if (r instanceof RefImpl) {
-    trigger(r, refTarget);
-    r._subscribers.forEach((fn) => fn());
-  }
-}
-function isRef(r) {
-  return !!r && typeof r === "object" && r[IS_REF] === true;
-}
-function unref(r) {
-  return isRef(r) ? r.value : r;
-}
-function toRef(obj, key) {
-  const r = new RefImpl(void 0, false);
-  Object.defineProperty(r, "value", {
-    get() {
-      track(r, refTarget);
-      return obj[key];
-    },
-    set(v) {
-      obj[key] = v;
-      trigger(r, refTarget, v, obj[key]);
-    }
-  });
-  return r;
-}
-function toRefs(obj) {
-  const result = {};
-  for (const key in obj) result[key] = toRef(obj, key);
-  return result;
-}
-var ComputedRefImpl = class {
-  constructor(getter, setter) {
-    this.setter = setter;
-    this.effect = new ReactiveEffect(getter, () => {
-      if (!this._dirty) {
-        this._dirty = true;
-        trigger(this, refTarget);
-        this._subscribers.forEach((fn) => fn());
-      }
-    }, activeScope);
-    this.effect.computed = true;
-  }
-  [IS_REF] = true;
-  effect;
-  _value;
-  _dirty = true;
-  _subscribers = /* @__PURE__ */ new Set();
-  get value() {
-    track(this, refTarget);
-    if (this._dirty) {
-      this._dirty = false;
-      this._value = this.effect.run();
-    }
-    return this._value;
-  }
-  set value(v) {
-    this.setter?.(v);
-  }
-  subscribe(fn) {
-    this._subscribers.add(fn);
-    return () => this._subscribers.delete(fn);
-  }
-  peek() {
-    return this._value;
-  }
-};
-function computed(arg) {
-  if (typeof arg === "function") {
-    return new ComputedRefImpl(arg);
-  }
-  return new ComputedRefImpl(arg.get, arg.set);
-}
-var reactiveMap = /* @__PURE__ */ new WeakMap();
-var readonlyMap = /* @__PURE__ */ new WeakMap();
-var shallowReactiveMap = /* @__PURE__ */ new WeakMap();
-function toReactive(value) {
-  return value !== null && typeof value === "object" ? reactive(value) : value;
-}
-var arrayInstrumentations = {};
-["includes", "indexOf", "lastIndexOf"].forEach((method) => {
-  arrayInstrumentations[method] = function(...args) {
-    const arr = toRaw(this);
-    for (let i = 0; i < this.length; i++) track(arr, i);
-    let res = arr[method](...args);
-    if (res === -1 || res === false) res = arr[method](...args.map(toRaw));
-    return res;
-  };
-});
-["push", "pop", "shift", "unshift", "splice"].forEach((method) => {
-  arrayInstrumentations[method] = function(...args) {
-    pauseTracking();
-    const res = toRaw(this)[method].apply(this, args);
-    resetTracking();
-    return res;
-  };
-});
-function createHandler(shallow = false, readonly2 = false) {
-  return {
-    get(target, key, receiver) {
-      if (key === RAW) return target;
-      if (key === IS_REACTIVE) return !readonly2;
-      if (key === IS_READONLY) return readonly2;
-      if (key === MARK_RAW) return target[MARK_RAW];
-      const isArray = Array.isArray(target);
-      if (!readonly2 && isArray && hasOwn(arrayInstrumentations, key)) {
-        return Reflect.get(arrayInstrumentations, key, receiver);
-      }
-      const res = Reflect.get(target, key, receiver);
-      if (typeof key === "symbol" || key === "__proto__") return res;
-      if (!readonly2) track(target, key);
-      if (shallow) return res;
-      if (isRef(res)) return isArray ? res : res.value;
-      return res !== null && typeof res === "object" && !res[MARK_RAW] ? readonly2 ? readonlyProxy(res) : reactive(res) : res;
-    },
-    set(target, key, value, receiver) {
-      if (readonly2) {
-        console.warn(`[fnetro] Cannot set "${String(key)}" on readonly object`);
-        return true;
-      }
-      const oldVal = target[key];
-      const result = Reflect.set(target, key, value, receiver);
-      if (hasChanged(value, oldVal)) trigger(target, key, value, oldVal);
-      return result;
-    },
-    deleteProperty(target, key) {
-      if (readonly2) return true;
-      const hadKey = hasOwn(target, key);
-      const result = Reflect.deleteProperty(target, key);
-      if (hadKey && result) trigger(target, key);
-      return result;
-    },
-    has(target, key) {
-      const res = Reflect.has(target, key);
-      track(target, key);
-      return res;
-    },
-    ownKeys(target) {
-      track(target, Array.isArray(target) ? "length" : "__iterate__");
-      return Reflect.ownKeys(target);
-    }
-  };
-}
-function reactive(target) {
-  if (isReadonly(target)) return target;
-  if (target[MARK_RAW]) return target;
-  if (reactiveMap.has(target)) return reactiveMap.get(target);
-  const proxy = new Proxy(target, createHandler());
-  reactiveMap.set(target, proxy);
-  return proxy;
-}
-function shallowReactive(target) {
-  if (shallowReactiveMap.has(target)) return shallowReactiveMap.get(target);
-  const proxy = new Proxy(target, createHandler(true));
-  shallowReactiveMap.set(target, proxy);
-  return proxy;
-}
-function readonlyProxy(target) {
-  if (readonlyMap.has(target)) return readonlyMap.get(target);
-  const proxy = new Proxy(target, createHandler(false, true));
-  readonlyMap.set(target, proxy);
-  return proxy;
-}
-function readonly(target) {
-  return readonlyProxy(target);
-}
-function markRaw(value) {
-  ;
-  value[MARK_RAW] = true;
-  return value;
-}
-function toRaw(observed) {
-  const raw = observed?.[RAW];
-  return raw ? toRaw(raw) : observed;
-}
-function isReactive(value) {
-  if (isReadonly(value)) return isReactive(value[RAW]);
-  return !!(value && value[IS_REACTIVE]);
-}
-function isReadonly(value) {
-  return !!(value && value[IS_READONLY]);
-}
-function traverse(value, seen = /* @__PURE__ */ new Set()) {
-  if (!value || typeof value !== "object" || seen.has(value)) return value;
-  seen.add(value);
-  if (isRef(value)) {
-    traverse(value.value, seen);
-    return value;
-  }
-  if (Array.isArray(value)) {
-    value.forEach((v) => traverse(v, seen));
-    return value;
-  }
-  for (const key in value) traverse(value[key], seen);
-  return value;
-}
-function normalizeSource(src) {
-  if (Array.isArray(src)) return () => src.map((s) => isRef(s) ? s.value : s());
-  if (isRef(src)) return () => src.value;
-  return src;
-}
-function watch(source, cb, opts = {}) {
-  const getter = opts.deep ? () => traverse(normalizeSource(source)()) : normalizeSource(source);
-  let oldVal = void 0;
-  let cleanupFn;
-  const cleanup = (fn) => {
-    cleanupFn = fn;
-  };
-  const job = () => {
-    if (!effect2.active) return;
-    cleanupFn?.();
-    cleanupFn = void 0;
-    const newVal = effect2.run();
-    if (opts.deep || hasChanged(newVal, oldVal)) {
-      cb(newVal, oldVal, cleanup);
-      oldVal = newVal;
-    }
-    if (opts.once) effect2.stop();
-  };
-  const effect2 = new ReactiveEffect(getter, job, activeScope);
-  if (opts.immediate) {
-    cleanupFn?.();
-    cleanupFn = void 0;
-    const val = effect2.run();
-    cb(val, oldVal, cleanup);
-    oldVal = val;
-  } else {
-    oldVal = effect2.run();
-  }
-  return () => effect2.stop();
-}
-var __hooks = {
-  useValue: (r) => isRef(r) ? r.value : r(),
-  useLocalRef: (init) => ref(init),
-  useLocalReactive: (init) => reactive(init)
-};
-function use(source) {
-  return __hooks.useValue(source);
-}
-function useLocalRef(init) {
-  return __hooks.useLocalRef(init);
-}
-function useLocalReactive(init) {
-  return __hooks.useLocalReactive(init);
-}
 function definePage(def) {
   return { __type: "page", ...def };
 }
@@ -423,9 +12,6 @@ function defineGroup(def) {
 function defineLayout(Component) {
   return { __type: "layout", Component };
 }
-function defineMiddleware(handler) {
-  return { __type: "middleware", handler };
-}
 function defineApiRoute(path, register) {
   return { __type: "api", path, register };
 }
@@ -443,118 +29,122 @@ function resolveRoutes(routes, options = {}) {
       pages.push(...sub.pages);
       apis.push(...sub.apis);
     } else {
-      const fullPath = (options.prefix ?? "") + route.path;
-      const layout = route.layout !== void 0 ? route.layout : options.layout;
-      const middleware = [...options.middleware ?? [], ...route.middleware ?? []];
-      pages.push({ fullPath, page: route, layout, middleware });
+      pages.push({
+        fullPath: (options.prefix ?? "") + route.path,
+        page: route,
+        layout: route.layout !== void 0 ? route.layout : options.layout,
+        middleware: [...options.middleware ?? [], ...route.middleware ?? []]
+      });
     }
   }
   return { pages, apis };
 }
-var SPA_HEADER = "x-fnetro-spa";
-var STATE_KEY = "__FNETRO_STATE__";
-var PARAMS_KEY = "__FNETRO_PARAMS__";
-function hasChanged(a, b) {
-  return !Object.is(a, b);
-}
-function hasOwn(obj, key) {
-  return Object.prototype.hasOwnProperty.call(obj, key);
-}
-
-// client.ts
-function clientUseValue(source) {
-  if (isRef(source)) {
-    return useSyncExternalStore(
-      (notify) => source.subscribe(notify),
-      () => source.peek?.() ?? source.value
-    );
-  }
-  const c = useMemo(() => computed(source), [source]);
-  return useSyncExternalStore(
-    (notify) => c.subscribe(notify),
-    () => c.peek?.() ?? c.value
-  );
-}
-function clientUseLocalRef(init) {
-  const stableRef = useHonoRef(null);
-  if (stableRef.current === null) stableRef.current = ref(init);
-  const r = stableRef.current;
-  useSyncExternalStore(
-    (notify) => r.subscribe(notify),
-    () => r.peek?.() ?? r.value
-  );
-  return r;
-}
-function clientUseLocalReactive(init) {
-  const stableRef = useHonoRef(null);
-  if (stableRef.current === null) stableRef.current = reactive(init);
-  const proxy = stableRef.current;
-  const [tick, setTick] = useState(0);
-  useEffect(() => {
-    return watchEffect(() => {
-      JSON.stringify(proxy);
-      setTick((t) => t + 1);
-    });
-  }, []);
-  return proxy;
-}
-Object.assign(__hooks, {
-  useValue: clientUseValue,
-  useLocalRef: clientUseLocalRef,
-  useLocalReactive: clientUseLocalReactive
-});
-function compileRoute(r) {
+function compilePath(path) {
   const keys = [];
-  const src = r.fullPath.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
+  const src = path.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
     keys.push(k);
     return "(.*)";
   }).replace(/\[([^\]]+)\]/g, (_, k) => {
     keys.push(k);
     return "([^/]+)";
   }).replace(/\*/g, "(.*)");
-  return { route: r, re: new RegExp(`^${src}$`), keys };
+  return { re: new RegExp(`^${src}$`), keys };
+}
+function matchPath(compiled, pathname) {
+  const m = pathname.match(compiled.re);
+  if (!m) return null;
+  const params = {};
+  compiled.keys.forEach((k, i) => {
+    params[k] = decodeURIComponent(m[i + 1] ?? "");
+  });
+  return params;
 }
-function matchRoute(compiled2, pathname) {
-  for (const c of compiled2) {
-    const m = pathname.match(c.re);
-    if (m) {
-      const params = {};
-      c.keys.forEach((k, i) => {
-        params[k] = decodeURIComponent(m[i + 1]);
-      });
-      return { route: c.route, params };
-    }
+var SPA_HEADER = "x-fnetro-spa";
+var STATE_KEY = "__FNETRO_STATE__";
+var PARAMS_KEY = "__FNETRO_PARAMS__";
+var SEO_KEY = "__FNETRO_SEO__";
+
+// client.ts
+var _routes = [];
+var _appLayout;
+function findRoute(pathname) {
+  for (const { route, cp } of _routes) {
+    const params = matchPath(cp, pathname);
+    if (params !== null) return { route, params };
   }
   return null;
 }
-var beforeNavListeners = [];
-var afterNavListeners = [];
-function onBeforeNavigate(fn) {
-  beforeNavListeners.push(fn);
-  return () => beforeNavListeners.splice(beforeNavListeners.indexOf(fn), 1);
-}
-function onAfterNavigate(fn) {
-  afterNavListeners.push(fn);
-  return () => afterNavListeners.splice(afterNavListeners.indexOf(fn), 1);
+var _setNav = null;
+var _mw = [];
+function useClientMiddleware(mw) {
+  _mw.push(mw);
+}
+async function runMiddleware(url, done) {
+  const chain = [..._mw, async (_u, next) => {
+    await done();
+    await next();
+  }];
+  let i = 0;
+  const run = async () => {
+    const fn = chain[i++];
+    if (fn) await fn(url, run);
+  };
+  await run();
 }
-var compiled = [];
-var currentConfig;
-var currentLayout;
-var prefetchCache = /* @__PURE__ */ new Map();
-function fetchPage(url) {
-  if (!prefetchCache.has(url)) {
-    prefetchCache.set(url, fetch(url, {
-      headers: { [SPA_HEADER]: "1" }
-    }).then((r) => r.json()));
+function setMeta(selector, attr, val) {
+  if (!val) {
+    document.querySelector(selector)?.remove();
+    return;
+  }
+  let el = document.querySelector(selector);
+  if (!el) {
+    el = document.createElement("meta");
+    const m = /\[(\w+[:-]?\w*)="([^"]+)"\]/.exec(selector);
+    if (m) el.setAttribute(m[1], m[2]);
+    document.head.appendChild(el);
+  }
+  el.setAttribute(attr, val);
+}
+function syncSEO(seo) {
+  if (seo.title) document.title = seo.title;
+  setMeta('[name="description"]', "content", seo.description);
+  setMeta('[name="keywords"]', "content", seo.keywords);
+  setMeta('[name="robots"]', "content", seo.robots);
+  setMeta('[name="theme-color"]', "content", seo.themeColor);
+  setMeta('[property="og:title"]', "content", seo.ogTitle);
+  setMeta('[property="og:description"]', "content", seo.ogDescription);
+  setMeta('[property="og:image"]', "content", seo.ogImage);
+  setMeta('[property="og:url"]', "content", seo.ogUrl);
+  setMeta('[property="og:type"]', "content", seo.ogType);
+  setMeta('[name="twitter:card"]', "content", seo.twitterCard);
+  setMeta('[name="twitter:title"]', "content", seo.twitterTitle);
+  setMeta('[name="twitter:description"]', "content", seo.twitterDescription);
+  setMeta('[name="twitter:image"]', "content", seo.twitterImage);
+  const canon = seo.canonical;
+  let linkEl = document.querySelector('link[rel="canonical"]');
+  if (canon) {
+    if (!linkEl) {
+      linkEl = document.createElement("link");
+      linkEl.rel = "canonical";
+      document.head.appendChild(linkEl);
+    }
+    linkEl.href = canon;
+  } else {
+    linkEl?.remove();
   }
-  return prefetchCache.get(url);
 }
-async function renderPage(route, data, url, params) {
-  const container = document.getElementById("fnetro-app");
-  const pageNode = jsx(route.page.Page, { ...data, url, params });
-  const layout = route.layout !== void 0 ? route.layout : currentLayout;
-  const tree = layout ? jsx(layout.Component, { url, params, children: pageNode }) : pageNode;
-  render(tree, container);
+var _cache = /* @__PURE__ */ new Map();
+function fetchPayload(href) {
+  if (!_cache.has(href)) {
+    _cache.set(
+      href,
+      fetch(href, { headers: { [SPA_HEADER]: "1" } }).then((r) => {
+        if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
+        return r.json();
+      })
+    );
+  }
+  return _cache.get(href);
 }
 async function navigate(to, opts = {}) {
   const u = new URL(to, location.origin);
@@ -562,35 +152,36 @@ async function navigate(to, opts = {}) {
     location.href = to;
     return;
   }
-  for (const fn of beforeNavListeners) await fn(u.pathname);
-  const match = matchRoute(compiled, u.pathname);
-  if (!match) {
+  if (!findRoute(u.pathname)) {
     location.href = to;
     return;
   }
-  try {
-    const payload = await fetchPage(u.toString());
-    const method = opts.replace ? "replaceState" : "pushState";
-    history[method]({ url: u.pathname }, "", u.pathname);
-    if (opts.scroll !== false) window.scrollTo(0, 0);
-    await renderPage(match.route, payload.state ?? {}, u.pathname, payload.params ?? {});
-    window[STATE_KEY] = {
-      ...window[STATE_KEY],
-      [u.pathname]: payload.state ?? {}
-    };
-    for (const fn of afterNavListeners) await fn(u.pathname);
-  } catch (e) {
-    console.error("[fnetro] Navigation failed:", e);
-    location.href = to;
-  }
+  await runMiddleware(u.pathname, async () => {
+    try {
+      const payload = await fetchPayload(u.toString());
+      history[opts.replace ? "replaceState" : "pushState"](
+        { url: u.pathname },
+        "",
+        u.pathname
+      );
+      if (opts.scroll !== false) window.scrollTo(0, 0);
+      _setNav?.({ path: u.pathname, data: payload.state ?? {}, params: payload.params ?? {} });
+      syncSEO(payload.seo ?? {});
+    } catch (err) {
+      console.error("[fnetro] Navigation error:", err);
+      location.href = to;
+    }
+  });
 }
 function prefetch(url) {
-  const u = new URL(url, location.origin);
-  if (u.origin !== location.origin) return;
-  if (!matchRoute(compiled, u.pathname)) return;
-  fetchPage(u.toString());
+  try {
+    const u = new URL(url, location.origin);
+    if (u.origin !== location.origin || !findRoute(u.pathname)) return;
+    fetchPayload(u.toString());
+  } catch {
+  }
 }
-function interceptClicks(e) {
+function onLinkClick(e) {
   if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
   const a = e.composedPath().find(
     (el) => el instanceof HTMLAnchorElement
@@ -603,7 +194,7 @@ function interceptClicks(e) {
   e.preventDefault();
   navigate(a.href);
 }
-function interceptHover(e) {
+function onLinkHover(e) {
   const a = e.composedPath().find(
     (el) => el instanceof HTMLAnchorElement
   );
@@ -612,62 +203,78 @@ function interceptHover(e) {
 function onPopState() {
   navigate(location.href, { replace: true, scroll: false });
 }
+function AppRoot(props) {
+  const [nav, setNav] = createSignal(props.initial);
+  _setNav = setNav;
+  const view = createMemo(() => {
+    const { path, data, params } = nav();
+    const m = findRoute(path);
+    if (!m) {
+      return null;
+    }
+    const layout = m.route.layout !== void 0 ? m.route.layout : props.appLayout;
+    const pageEl = createComponent(m.route.page.Page, { ...data, url: path, params });
+    if (!layout) return pageEl;
+    return createComponent(layout.Component, {
+      url: path,
+      params,
+      get children() {
+        return pageEl;
+      }
+    });
+  });
+  return view;
+}
 async function boot(options) {
   const { pages } = resolveRoutes(options.routes, {
     layout: options.layout,
     middleware: []
   });
-  compiled = pages.map(compileRoute);
-  currentConfig = options;
-  currentLayout = options.layout;
+  _routes = pages.map((r) => ({ route: r, cp: compilePath(r.fullPath) }));
+  _appLayout = options.layout;
   const pathname = location.pathname;
-  const match = matchRoute(compiled, pathname);
-  if (!match) {
-    console.warn(`[fnetro] No route matched "${pathname}" \u2014 not hydrating`);
+  if (!findRoute(pathname)) {
+    console.warn(`[fnetro] No route matched "${pathname}" \u2014 skipping hydration`);
     return;
   }
   const stateMap = window[STATE_KEY] ?? {};
   const paramsMap = window[PARAMS_KEY] ?? {};
-  const data = stateMap[pathname] ?? {};
-  await renderPage(match.route, data, pathname, paramsMap);
-  document.addEventListener("click", interceptClicks);
+  const seoData = window[SEO_KEY] ?? {};
+  const initial = {
+    path: pathname,
+    data: stateMap[pathname] ?? {},
+    params: paramsMap
+  };
+  const container = document.getElementById("fnetro-app");
+  if (!container) {
+    console.error("[fnetro] #fnetro-app not found \u2014 aborting hydration");
+    return;
+  }
+  syncSEO(seoData);
+  hydrate(
+    () => createComponent(AppRoot, { initial, appLayout: _appLayout }),
+    container
+  );
+  document.addEventListener("click", onLinkClick);
   if (options.prefetchOnHover !== false) {
-    document.addEventListener("mouseover", interceptHover);
+    document.addEventListener("mouseover", onLinkHover);
   }
   window.addEventListener("popstate", onPopState);
-  for (const fn of afterNavListeners) await fn(pathname);
 }
 export {
+  PARAMS_KEY,
+  SEO_KEY,
+  SPA_HEADER,
+  STATE_KEY,
   boot,
-  computed,
+  compilePath,
   defineApiRoute,
   defineGroup,
   defineLayout,
-  defineMiddleware,
   definePage,
-  effect,
-  effectScope,
-  isReactive,
-  isReadonly,
-  isRef,
-  markRaw,
+  matchPath,
   navigate,
-  onAfterNavigate,
-  onBeforeNavigate,
   prefetch,
-  reactive,
-  readonly,
-  ref,
-  shallowReactive,
-  shallowRef,
-  toRaw,
-  toRef,
-  toRefs,
-  triggerRef,
-  unref,
-  use,
-  useLocalReactive,
-  useLocalRef,
-  watch,
-  watchEffect
+  resolveRoutes,
+  useClientMiddleware
 };