@netrojs/fnetro 0.1.2

package/dist/client.js

@@ -0,0 +1,673 @@
+// client.ts
+import { render } from "hono/jsx/dom";
+import { jsx } from "hono/jsx";
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef as useHonoRef,
+  useSyncExternalStore
+} from "hono/jsx";
+
+// 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 };
+}
+function defineGroup(def) {
+  return { __type: "group", ...def };
+}
+function defineLayout(Component) {
+  return { __type: "layout", Component };
+}
+function defineMiddleware(handler) {
+  return { __type: "middleware", handler };
+}
+function defineApiRoute(path, register) {
+  return { __type: "api", path, register };
+}
+function resolveRoutes(routes, options = {}) {
+  const pages = [];
+  const apis = [];
+  for (const route of routes) {
+    if (route.__type === "api") {
+      apis.push({ ...route, path: (options.prefix ?? "") + route.path });
+    } else if (route.__type === "group") {
+      const prefix = (options.prefix ?? "") + route.prefix;
+      const mw = [...options.middleware ?? [], ...route.middleware ?? []];
+      const layout = route.layout !== void 0 ? route.layout : options.layout;
+      const sub = resolveRoutes(route.routes, { prefix, middleware: mw, layout });
+      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 });
+    }
+  }
+  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) {
+  const keys = [];
+  const src = r.fullPath.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
+    keys.push(k);
+    return "(.*)";
+  }).replace(/\[([^\]]+)\]/g, (_, k) => {
+    keys.push(k);
+    return "([^/]+)";
+  }).replace(/\*/g, "(.*)");
+  return { route: r, re: new RegExp(`^${src}$`), keys };
+}
+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 };
+    }
+  }
+  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 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()));
+  }
+  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);
+}
+async function navigate(to, opts = {}) {
+  const u = new URL(to, location.origin);
+  if (u.origin !== location.origin) {
+    location.href = to;
+    return;
+  }
+  for (const fn of beforeNavListeners) await fn(u.pathname);
+  const match = matchRoute(compiled, u.pathname);
+  if (!match) {
+    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;
+  }
+}
+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());
+}
+function interceptClicks(e) {
+  if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+  const a = e.composedPath().find(
+    (el) => el instanceof HTMLAnchorElement
+  );
+  if (!a?.href) return;
+  if (a.target && a.target !== "_self") return;
+  if (a.hasAttribute("data-no-spa") || a.rel?.includes("external")) return;
+  const u = new URL(a.href);
+  if (u.origin !== location.origin) return;
+  e.preventDefault();
+  navigate(a.href);
+}
+function interceptHover(e) {
+  const a = e.composedPath().find(
+    (el) => el instanceof HTMLAnchorElement
+  );
+  if (a?.href) prefetch(a.href);
+}
+function onPopState() {
+  navigate(location.href, { replace: true, scroll: false });
+}
+async function boot(options) {
+  const { pages } = resolveRoutes(options.routes, {
+    layout: options.layout,
+    middleware: []
+  });
+  compiled = pages.map(compileRoute);
+  currentConfig = options;
+  currentLayout = options.layout;
+  const pathname = location.pathname;
+  const match = matchRoute(compiled, pathname);
+  if (!match) {
+    console.warn(`[fnetro] No route matched "${pathname}" \u2014 not hydrating`);
+    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);
+  if (options.prefetchOnHover !== false) {
+    document.addEventListener("mouseover", interceptHover);
+  }
+  window.addEventListener("popstate", onPopState);
+  for (const fn of afterNavListeners) await fn(pathname);
+}
+export {
+  boot,
+  computed,
+  defineApiRoute,
+  defineGroup,
+  defineLayout,
+  defineMiddleware,
+  definePage,
+  effect,
+  effectScope,
+  isReactive,
+  isReadonly,
+  isRef,
+  markRaw,
+  navigate,
+  onAfterNavigate,
+  onBeforeNavigate,
+  prefetch,
+  reactive,
+  readonly,
+  ref,
+  shallowReactive,
+  shallowRef,
+  toRaw,
+  toRef,
+  toRefs,
+  triggerRef,
+  unref,
+  use,
+  useLocalReactive,
+  useLocalRef,
+  watch,
+  watchEffect
+};