@netrojs/fnetro 0.1.5 → 0.2.0

package/dist/server.js

@@ -1,413 +1,9 @@
 // server.ts
 import { Hono } from "hono";
-import { jsx } from "hono/jsx";
-import { renderToString } from "hono/jsx/dom/server";
+import { createComponent } from "solid-js";
+import { renderToStringAsync, generateHydrationScript } 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 };
 }
@@ -417,9 +13,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 };
 }
@@ -437,25 +30,16 @@ 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);
-}
-
-// server.ts
 function compilePath(path) {
   const keys = [];
   const src = path.replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => {
@@ -465,76 +49,183 @@ function compilePath(path) {
     keys.push(k);
     return "([^/]+)";
   }).replace(/\*/g, "(.*)");
-  return { re: new RegExp(`^${src}$`), keys, original: path };
+  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]);
+    params[k] = decodeURIComponent(m[i + 1] ?? "");
   });
   return params;
 }
-function buildShell(opts) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>${escHtml(opts.title)}</title>
-<link rel="stylesheet" href="/assets/style.css">
-</head>
-<body>
-<div id="fnetro-app">${opts.pageHtml}</div>
-<script>window.${STATE_KEY}=${opts.stateJson};window.${PARAMS_KEY}=${opts.paramsJson};</script>
-<script type="module" src="/assets/client.js"></script>
-</body>
-</html>`;
-}
-function escHtml(s) {
+var SPA_HEADER = "x-fnetro-spa";
+var STATE_KEY = "__FNETRO_STATE__";
+var PARAMS_KEY = "__FNETRO_PARAMS__";
+var SEO_KEY = "__FNETRO_SEO__";
+
+// server.ts
+function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-async function renderInner(route, data, url, params, appLayout) {
-  const pageNode = jsx(route.page.Page, { ...data, url, params });
+function buildHeadMeta(seo, extraHead = "") {
+  const m = (n, v) => v ? `<meta name="${n}" content="${esc(v)}">` : "";
+  const p = (pr, v) => v ? `<meta property="${pr}" content="${esc(v)}">` : "";
+  const lk = (rel, href) => `<link rel="${rel}" href="${esc(href)}">`;
+  const parts = [];
+  if (seo.description) parts.push(m("description", seo.description));
+  if (seo.keywords) parts.push(m("keywords", seo.keywords));
+  if (seo.author) parts.push(m("author", seo.author));
+  if (seo.robots) parts.push(m("robots", seo.robots));
+  if (seo.themeColor) parts.push(m("theme-color", seo.themeColor));
+  if (seo.canonical) parts.push(lk("canonical", seo.canonical));
+  if (seo.ogTitle) parts.push(p("og:title", seo.ogTitle));
+  if (seo.ogDescription) parts.push(p("og:description", seo.ogDescription));
+  if (seo.ogImage) parts.push(p("og:image", seo.ogImage));
+  if (seo.ogImageAlt) parts.push(p("og:image:alt", seo.ogImageAlt));
+  if (seo.ogImageWidth) parts.push(p("og:image:width", seo.ogImageWidth));
+  if (seo.ogImageHeight) parts.push(p("og:image:height", seo.ogImageHeight));
+  if (seo.ogUrl) parts.push(p("og:url", seo.ogUrl));
+  if (seo.ogType) parts.push(p("og:type", seo.ogType));
+  if (seo.ogSiteName) parts.push(p("og:site_name", seo.ogSiteName));
+  if (seo.ogLocale) parts.push(p("og:locale", seo.ogLocale));
+  if (seo.twitterCard) parts.push(m("twitter:card", seo.twitterCard));
+  if (seo.twitterSite) parts.push(m("twitter:site", seo.twitterSite));
+  if (seo.twitterCreator) parts.push(m("twitter:creator", seo.twitterCreator));
+  if (seo.twitterTitle) parts.push(m("twitter:title", seo.twitterTitle));
+  if (seo.twitterDescription) parts.push(m("twitter:description", seo.twitterDescription));
+  if (seo.twitterImage) parts.push(m("twitter:image", seo.twitterImage));
+  if (seo.twitterImageAlt) parts.push(m("twitter:image:alt", seo.twitterImageAlt));
+  for (const tag of seo.extra ?? []) {
+    const attrs = [
+      tag.name ? `name="${esc(tag.name)}"` : "",
+      tag.property ? `property="${esc(tag.property)}"` : "",
+      tag.httpEquiv ? `http-equiv="${esc(tag.httpEquiv)}"` : "",
+      `content="${esc(tag.content)}"`
+    ].filter(Boolean).join(" ");
+    parts.push(`<meta ${attrs}>`);
+  }
+  const ld = seo.jsonLd;
+  if (ld) {
+    const schemas = Array.isArray(ld) ? ld : [ld];
+    for (const schema of schemas) {
+      parts.push(`<script type="application/ld+json">${JSON.stringify(schema)}</script>`);
+    }
+  }
+  if (extraHead) parts.push(extraHead);
+  return parts.join("\n");
+}
+function mergeSEO(base, override) {
+  return { ...base ?? {}, ...override ?? {} };
+}
+var _assets = null;
+async function resolveAssets(cfg, defaultEntry) {
+  if (_assets) return _assets;
+  if (cfg.manifestDir) {
+    try {
+      const [{ readFileSync }, { join }] = await Promise.all([
+        import("fs"),
+        import("path")
+      ]);
+      const raw = readFileSync(join(cfg.manifestDir, "manifest.json"), "utf-8");
+      const manifest = JSON.parse(raw);
+      const entryKey = cfg.manifestEntry ?? Object.keys(manifest).find((k) => k.endsWith(defaultEntry)) ?? defaultEntry;
+      const entry = manifest[entryKey];
+      if (entry) {
+        _assets = {
+          scripts: [`/assets/${entry.file}`],
+          styles: (entry.css ?? []).map((f) => `/assets/${f}`)
+        };
+        return _assets;
+      }
+    } catch {
+    }
+  }
+  _assets = {
+    scripts: cfg.scripts ?? ["/assets/client.js"],
+    styles: cfg.styles ?? []
+  };
+  return _assets;
+}
+function buildShell(o) {
+  const htmlAttrStr = Object.entries(o.htmlAttrs ?? { lang: "en" }).map(([k, v]) => `${k}="${esc(v)}"`).join(" ");
+  const styleLinks = o.styles.map((href) => `<link rel="stylesheet" href="${esc(href)}">`).join("\n");
+  const scriptTags = o.scripts.map((src) => `<script type="module" src="${esc(src)}"></script>`).join("\n");
+  return [
+    "<!DOCTYPE html>",
+    `<html ${htmlAttrStr}>`,
+    "<head>",
+    '<meta charset="UTF-8">',
+    '<meta name="viewport" content="width=device-width,initial-scale=1">',
+    `<title>${esc(o.title)}</title>`,
+    o.metaHtml,
+    generateHydrationScript(),
+    styleLinks,
+    "</head>",
+    "<body>",
+    `<div id="fnetro-app">${o.bodyHtml}</div>`,
+    "<script>",
+    `window.${STATE_KEY}=${o.stateJson};`,
+    `window.${PARAMS_KEY}=${o.paramsJson};`,
+    `window.${SEO_KEY}=${o.seoJson};`,
+    "</script>",
+    scriptTags,
+    "</body>",
+    "</html>"
+  ].filter(Boolean).join("\n");
+}
+async function renderPage(route, data, url, params, appLayout) {
   const layout = route.layout !== void 0 ? route.layout : appLayout;
-  const wrapped = layout ? jsx(layout.Component, { url, params, children: pageNode }) : pageNode;
-  return renderToString(wrapped);
+  return renderToStringAsync(() => {
+    const pageEl = createComponent(route.page.Page, { ...data, url, params });
+    if (!layout) return pageEl;
+    return createComponent(layout.Component, {
+      url,
+      params,
+      get children() {
+        return pageEl;
+      }
+    });
+  });
 }
-async function renderFullPage(route, data, url, params, appLayout, title = "FNetro") {
-  const pageHtml = await renderInner(route, data, url, params, appLayout);
+async function renderFullPage(route, data, url, params, config, assets) {
+  const pageSEO = typeof route.page.seo === "function" ? route.page.seo(data, params) : route.page.seo;
+  const seo = mergeSEO(config.seo, pageSEO);
+  const title = seo.title ?? "FNetro";
+  const bodyHtml = await renderPage(route, data, url, params, config.layout);
   return buildShell({
     title,
+    metaHtml: buildHeadMeta(seo, config.head),
+    bodyHtml,
     stateJson: JSON.stringify({ [url]: data }),
     paramsJson: JSON.stringify(params),
-    pageHtml
+    seoJson: JSON.stringify(seo),
+    scripts: assets.scripts,
+    styles: assets.styles,
+    htmlAttrs: config.htmlAttrs
   });
 }
 function createFNetro(config) {
   const app = new Hono();
-  app.use("/assets/*", async (c, next) => {
-    await next();
-  });
-  (config.middleware ?? []).forEach((mw) => app.use("*", mw));
+  for (const mw of config.middleware ?? []) app.use("*", mw);
   const { pages, apis } = resolveRoutes(config.routes, {
     layout: config.layout,
     middleware: []
   });
-  const compiled = pages.map((r) => ({
-    route: r,
-    compiled: compilePath(r.fullPath)
-  }));
-  apis.forEach((api) => {
+  const compiled = pages.map((r) => ({ route: r, cp: compilePath(r.fullPath) }));
+  for (const api of apis) {
     const sub = new Hono();
     api.register(sub, config.middleware ?? []);
     app.route(api.path, sub);
-  });
+  }
   app.all("*", async (c) => {
     const url = new URL(c.req.url);
     const pathname = url.pathname;
     const isSPA = c.req.header(SPA_HEADER) === "1";
+    const isDev = process.env["NODE_ENV"] !== "production";
     let matched = null;
-    for (const { route: route2, compiled: cp } of compiled) {
+    for (const { route: route2, cp } of compiled) {
       const params2 = matchPath(cp, pathname);
       if (params2 !== null) {
         matched = { route: route2, params: params2 };
@@ -543,55 +234,64 @@ function createFNetro(config) {
     }
     if (!matched) {
       if (config.notFound) {
-        const html = await renderToString(jsx(config.notFound, {}));
-        return c.html(`<!DOCTYPE html><html><body>${html}</body></html>`, 404);
+        const html2 = await renderToStringAsync(
+          () => createComponent(config.notFound, {})
+        );
+        return c.html(
+          `<!DOCTYPE html><html lang="en"><body>${html2}</body></html>`,
+          404
+        );
       }
       return c.text("Not Found", 404);
     }
     const { route, params } = matched;
     const origParam = c.req.param.bind(c.req);
-    c.req.param = (key) => key ? params[key] ?? origParam(key) : { ...params, ...origParam() };
-    let earlyResponse;
+    c.req["param"] = (key) => key != null ? params[key] ?? origParam(key) : { ...origParam(), ...params };
+    let early;
     const handlers = [...route.middleware];
     let idx = 0;
-    const runMiddleware = async () => {
+    const runNext = async () => {
       const mw = handlers[idx++];
       if (!mw) return;
-      const res = await mw(c, runMiddleware);
-      if (res instanceof Response && !earlyResponse) earlyResponse = res;
+      const res = await mw(c, runNext);
+      if (res instanceof Response && !early) early = res;
     };
-    await runMiddleware();
-    if (earlyResponse) return earlyResponse;
-    const data = route.page.loader ? await route.page.loader(c) : {};
-    const safeData = data ?? {};
+    await runNext();
+    if (early) return early;
+    const rawData = route.page.loader ? await route.page.loader(c) : {};
+    const data = rawData ?? {};
     if (isSPA) {
-      const html = await renderInner(route, safeData, pathname, params, config.layout);
+      const pageSEO = typeof route.page.seo === "function" ? route.page.seo(data, params) : route.page.seo;
       return c.json({
-        html,
-        state: safeData,
+        state: data,
         params,
-        url: pathname
+        url: pathname,
+        seo: mergeSEO(config.seo, pageSEO)
       });
     }
-    const fullHtml = await renderFullPage(route, safeData, pathname, params, config.layout);
-    return c.html(fullHtml);
+    const assets = isDev ? { scripts: [], styles: [] } : await resolveAssets(
+      config.assets ?? {},
+      config.assets?.manifestEntry ?? "client.ts"
+    );
+    const html = await renderFullPage(route, data, pathname, params, config, assets);
+    return c.html(html);
   });
-  return { app, handler: app.fetch };
+  return { app, handler: app.fetch.bind(app) };
 }
 function detectRuntime() {
-  if (typeof globalThis.Bun !== "undefined") return "bun";
-  if (typeof globalThis.Deno !== "undefined") return "deno";
+  if (typeof globalThis["Bun"] !== "undefined") return "bun";
+  if (typeof globalThis["Deno"] !== "undefined") return "deno";
   if (typeof process !== "undefined" && process.versions?.node) return "node";
   return "edge";
 }
 async function serve(opts) {
   const runtime = opts.runtime ?? detectRuntime();
-  const port = opts.port ?? Number(globalThis.process?.env?.PORT ?? 3e3);
+  const port = opts.port ?? Number(process?.env?.["PORT"] ?? 3e3);
   const hostname = opts.hostname ?? "0.0.0.0";
   const staticDir = opts.staticDir ?? "./dist";
-  const addr = `http://${hostname === "0.0.0.0" ? "localhost" : hostname}:${port}`;
+  const displayHost = hostname === "0.0.0.0" ? "localhost" : hostname;
   const logReady = () => console.log(`
-\u{1F525}  FNetro [${runtime}] ready  \u2192  ${addr}
+\u{1F525}  FNetro [${runtime}] ready \u2192 http://${displayHost}:${port}
 `);
   switch (runtime) {
     case "node": {
@@ -600,134 +300,159 @@ async function serve(opts) {
         import("@hono/node-server/serve-static")
       ]);
       opts.app.app.use("/assets/*", serveStatic({ root: staticDir }));
+      opts.app.app.use("/*", serveStatic({ root: "./public" }));
       nodeServe({ fetch: opts.app.handler, port, hostname });
       logReady();
       break;
     }
     case "bun": {
       ;
-      globalThis.Bun.serve({ fetch: opts.app.handler, port, hostname });
+      globalThis["Bun"].serve({ fetch: opts.app.handler, port, hostname });
       logReady();
       break;
     }
     case "deno": {
       ;
-      globalThis.Deno.serve({ port, hostname }, opts.app.handler);
+      globalThis["Deno"].serve({ port, hostname }, opts.app.handler);
       logReady();
       break;
     }
     default:
-      console.warn("[fnetro] serve() is a no-op on edge runtimes. Export `app.handler` instead.");
+      console.warn(
+        "[fnetro] serve() is a no-op on edge runtimes \u2014 export `fnetro.handler` instead."
+      );
   }
 }
 var NODE_BUILTINS = /^node:|^(assert|buffer|child_process|cluster|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|perf_hooks|process|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|trace_events|tty|url|util|v8|vm|worker_threads|zlib)$/;
+async function loadSolid() {
+  try {
+    const mod = await import("vite-plugin-solid");
+    return mod.default ?? mod;
+  } catch {
+    throw new Error(
+      "[fnetro] vite-plugin-solid is required.\n  Install it: npm i -D vite-plugin-solid"
+    );
+  }
+}
+function toPlugins(v) {
+  return Array.isArray(v) ? v : [v];
+}
 function fnetroVitePlugin(opts = {}) {
   const {
-    serverEntry = "app/server.ts",
-    clientEntry = "app/client.ts",
+    serverEntry = "server.ts",
+    clientEntry = "client.ts",
     serverOutDir = "dist/server",
     clientOutDir = "dist/assets",
-    serverExternal = []
+    serverExternal = [],
+    solidOptions = {}
   } = opts;
-  let isServerBuild = true;
-  const jsxTransform = {
-    jsx: "automatic",
-    jsxImportSource: "hono/jsx"
-  };
+  let _solid = null;
+  let _solidPlugins = [];
   const jsxPlugin = {
     name: "fnetro:jsx",
-    config: () => ({
-      // Vite ≤7 (esbuild transform)
-      esbuild: jsxTransform,
-      // Vite 8+ (oxc / rolldown transform) — jsx property uses JsxOptions object shape
-      oxc: {
-        jsx: {
-          runtime: "automatic",
-          importSource: "hono/jsx"
+    enforce: "pre",
+    // Sync config hook — must return Omit<UserConfig, 'plugins'> | null
+    config(_cfg, _env) {
+      return {
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: "solid-js"
         }
+      };
+    },
+    async buildStart() {
+      if (!_solid) {
+        _solid = await loadSolid();
+        _solidPlugins = toPlugins(_solid({ ssr: true, ...solidOptions }));
       }
-      // `as any` because JsxOptions typing varies across Vite 8 patch releases
-    })
+    }
+  };
+  const solidProxy = {
+    name: "fnetro:solid-proxy",
+    enforce: "pre",
+    async transform(code, id, options) {
+      if (!_solidPlugins[0]?.transform) return null;
+      const hook = _solidPlugins[0].transform;
+      const fn = typeof hook === "function" ? hook : hook.handler;
+      if (!fn) return null;
+      return fn.call(this, code, id, options);
+    },
+    async resolveId(id) {
+      if (!_solidPlugins[0]?.resolveId) return null;
+      const hook = _solidPlugins[0].resolveId;
+      const fn = typeof hook === "function" ? hook : hook.handler;
+      if (!fn) return null;
+      return fn.call(this, id, void 0, {});
+    },
+    async load(id) {
+      if (!_solidPlugins[0]?.load) return null;
+      const hook = _solidPlugins[0].load;
+      const fn = typeof hook === "function" ? hook : hook.handler;
+      if (!fn) return null;
+      return fn.call(this, id, {});
+    }
   };
-  const serverPlugin = {
-    name: "fnetro:server",
+  const buildPlugin = {
+    name: "fnetro:build",
     apply: "build",
     enforce: "pre",
-    config() {
+    // Sync config hook — Omit<UserConfig, 'plugins'> satisfies the ObjectHook constraint
+    config(_cfg, _env) {
       return {
         build: {
+          ssr: serverEntry,
           outDir: serverOutDir,
-          ssr: true,
-          target: "node18",
-          lib: {
-            entry: serverEntry,
-            formats: ["es"],
-            fileName: "server"
-          },
           rollupOptions: {
-            external: (id) => NODE_BUILTINS.test(id) || id === "@hono/node-server" || serverExternal.includes(id)
+            input: serverEntry,
+            output: {
+              format: "es",
+              entryFileNames: "server.js"
+            },
+            external: (id) => NODE_BUILTINS.test(id) || id === "@hono/node-server" || id === "@hono/node-server/serve-static" || serverExternal.includes(id)
           }
-        },
-        // Vite ≤7 fallback (oxc is set by jsxPlugin for Vite 8+)
-        esbuild: jsxTransform
+        }
       };
     },
     async closeBundle() {
       console.log("\n\u26A1  FNetro: building client bundle\u2026\n");
+      const solid = _solid ?? await loadSolid();
       const { build } = await import("vite");
       await build({
         configFile: false,
-        // Vite ≤7 fallback (oxc is set by jsxPlugin for Vite 8+)
-        esbuild: jsxTransform,
+        plugins: toPlugins(solid({ ...solidOptions })),
         build: {
           outDir: clientOutDir,
-          lib: {
-            entry: clientEntry,
-            formats: ["es"],
-            fileName: "client"
-          },
+          manifest: true,
           rollupOptions: {
-            output: { entryFileNames: "[name].js" }
+            input: clientEntry,
+            output: {
+              format: "es",
+              entryFileNames: "[name]-[hash].js",
+              chunkFileNames: "[name]-[hash].js",
+              assetFileNames: "[name]-[hash][extname]"
+            }
           }
         }
       });
-      console.log("\n\u2705  FNetro: both bundles ready\n");
+      console.log("\u2705  FNetro: both bundles ready\n");
     }
   };
-  return [jsxPlugin, serverPlugin];
+  return [jsxPlugin, solidProxy, buildPlugin];
 }
 export {
+  PARAMS_KEY,
+  SEO_KEY,
   SPA_HEADER,
   STATE_KEY,
-  computed,
+  compilePath,
   createFNetro,
   defineApiRoute,
   defineGroup,
   defineLayout,
-  defineMiddleware,
   definePage,
   detectRuntime,
-  effect,
-  effectScope,
   fnetroVitePlugin,
-  isReactive,
-  isReadonly,
-  isRef,
-  markRaw,
-  reactive,
-  readonly,
-  ref,
-  serve,
-  shallowReactive,
-  shallowRef,
-  toRaw,
-  toRef,
-  toRefs,
-  triggerRef,
-  unref,
-  use,
-  useLocalReactive,
-  useLocalRef,
-  watch,
-  watchEffect
+  matchPath,
+  resolveRoutes,
+  serve
 };