@mauroandre/velojs 0.0.13 → 0.0.15

package/README.md

@@ -52,6 +52,7 @@ export default defineConfig({
     "scripts": {
         "dev": "velojs dev",
         "build": "velojs build",
+        "build:static": "velojs build --static",
         "start": "velojs start"
     }
 }
@@ -619,10 +620,12 @@ export const Component = ({ children }) => (
 **Production:**
 ```html
 <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-<link rel="stylesheet" href="/client.css" />
-<script type="module" src="/client.js"></script>
+<link rel="stylesheet" href="/client.a1b2c3.css" />
+<script type="module" src="/client.x9y8z7.js"></script>
 ```
 
+Asset filenames include a content hash for cache busting. The hash changes only when the file content changes.
+
 ---
 
 ## Middlewares
@@ -984,6 +987,87 @@ interface VeloConfig {
 
 ---
 
+## Static Site Generation (SSG)
+
+Build a fully static site with pre-rendered HTML and JSON files:
+
+```bash
+velojs build --static
+```
+
+### Output
+
+```
+dist/
+  index.html              # Pre-rendered HTML
+  index.json              # Loader data
+  about/
+    index.html
+    index.json
+  client/
+    client.a1b2c3.js
+    client.x9y8z7.css
+  logos/                   # Files from public/ are copied to dist/
+    logo.svg
+```
+
+### Public assets
+
+Files in the `public/` folder are automatically copied to `dist/` root during static generation. Reference them with absolute paths:
+
+```tsx
+<img src="/logos/logo.svg" />
+```
+
+This works in both dev mode (Vite serves `public/` at root) and static builds (`public/` is copied to `dist/`).
+
+### Dynamic routes
+
+For routes with `:params`, export a `staticPaths` function that returns all possible parameter combinations:
+
+```typescript
+// app/pages/UserDetail.tsx
+export const staticPaths = async () => {
+    const { getUsers } = await import("./user.service.js");
+    const users = await getUsers();
+    return users.map((u) => ({ id: u.id }));
+};
+```
+
+Routes without `staticPaths` are skipped with a warning.
+
+### Deploying
+
+The `dist/` folder is self-contained. Deploy to any static hosting (Nginx, Cloudflare Pages, S3, etc.). No server required.
+
+---
+
+## Cache Busting & Auto-Update Detection
+
+VeloJS has built-in cache management for zero-downtime deployments:
+
+### Content-hashed assets
+
+JS and CSS files are generated with content hashes (`client.a1b2c3.js`). When the content changes, the hash changes, and browsers automatically fetch the new version. Unchanged assets stay cached indefinitely.
+
+### HTML no-cache
+
+HTML responses include `Cache-Control: no-cache`, so browsers always check for the latest version. Since HTML is small (a few KB), this has negligible performance impact.
+
+### SPA deploy detection
+
+When a user is navigating a SPA and a new deploy happens, VeloJS detects it automatically:
+
+1. Each build generates a unique `__VELO_BUILD_HASH__`, embedded in the client JS
+2. JSON data responses (both SSR and SSG) include a `__buildHash` field
+3. On SPA navigation, `useLoader` compares the response hash with the client hash
+4. If they differ, an internal `__veloUpdatePending` flag is set
+5. On the next `<Link>` click, VeloJS does a full page navigation instead of SPA — loading the new HTML with updated asset references
+
+This means users get the new version without needing `Ctrl+Shift+R`. The transition is seamless — from the user's perspective, it looks like a normal page navigation.
+
+---
+
 ## Docker / Production Deploy
 
 ### Dockerfile
@@ -1014,12 +1098,15 @@ CMD ["npx", "velojs", "start"]
 velojs build
 # dist/
 #   client/         # Static assets (JS, CSS, images)
-#     client.js
-#     client.css
+#     client.a1b2c3.js
+#     client.x9y8z7.css
+#     .vite/manifest.json
 #   server.js       # SSR server entry (single file)
 ```
 
-In production, `velojs start` sets `NODE_ENV=production` automatically and serves static files from `dist/client/`.
+Asset filenames include content hashes for long-term browser caching. The server build reads the Vite manifest to inject the correct filenames into `<Scripts>`.
+
+In production, `velojs start` sets `NODE_ENV=production` automatically and serves static files from `dist/client/`. HTML responses are served with `Cache-Control: no-cache` so browsers always fetch the latest HTML (which references the current hashed assets).
 
 ### Static assets on CDN
 

package/dist/cli.js

@@ -1,15 +1,19 @@
 import { spawnSync as c } from "node:child_process";
 import { resolve as a } from "node:path";
-const t = process.argv.slice(2), r = t[0], l = (e, s = []) => {
-  const o = c(e, s, {
+const o = process.argv.slice(2), r = o[0], l = (e, t = []) => {
+  const s = c(e, t, {
     stdio: "inherit",
     cwd: process.cwd()
   });
-  process.exit(o.status ?? 0);
+  process.exit(s.status ?? 0);
 }, p = () => {
-  l("npx", ["vite", ...t.slice(1)]);
-}, v = (e) => {
-  const s = e ? { ...process.env, VELO_STATIC: "1" } : process.env;
+  l("npx", ["vite", ...o.slice(1)]);
+}, u = (e) => {
+  const t = Date.now().toString(36), s = {
+    ...process.env,
+    VELO_BUILD_HASH: t,
+    ...e ? { VELO_STATIC: "1" } : {}
+  };
   console.log("Building client..."), c("npx", ["vite", "build"], {
     stdio: "inherit",
     cwd: process.cwd(),
@@ -18,13 +22,13 @@ const t = process.argv.slice(2), r = t[0], l = (e, s = []) => {
     stdio: "inherit",
     cwd: process.cwd(),
     env: s
-  }), console.log("Build complete!"), e && u();
-}, u = async () => {
+  }), console.log("Build complete!"), e && v();
+}, v = async () => {
   process.env.NODE_ENV = "production", process.env.VELO_STATIC = "1";
-  const s = await import(a(process.cwd(), "dist/server.js")), o = s.default, i = s.routes;
-  (!o || !i) && (console.error("Failed to load app or routes from dist/server.js"), process.exit(1));
+  const t = await import(a(process.cwd(), "dist/server.js")), s = t.default, i = t.routes;
+  (!s || !i) && (console.error("Failed to load app or routes from dist/server.js"), process.exit(1));
   const { generateStatic: d } = await import("./static.js");
-  await d(o, i);
+  await d(s, i);
 }, m = () => {
   process.env.NODE_ENV = "production";
   const e = a(process.cwd(), "dist/server.js");
@@ -54,15 +58,15 @@ Examples:
 switch (r) {
   case "init": {
     const { runInit: e } = await import("./init.js");
-    await e(t[1]);
+    await e(o[1]);
     break;
   }
   case "dev":
     p();
     break;
   case "build": {
-    const e = t.includes("--static");
-    v(e);
+    const e = o.includes("--static");
+    u(e);
     break;
   }
   case "start":

package/dist/components.js

@@ -1,31 +1,48 @@
-import { jsx as i, jsxs as u, Fragment as p } from "preact/jsx-runtime";
-import { Link as m } from "wouter-preact";
-function y({ basePath: e, favicon: n = "/favicon.ico" } = {}) {
-  const t = process.env.NODE_ENV !== "production";
+import { jsx as o, jsxs as p, Fragment as L } from "preact/jsx-runtime";
+import { Link as v } from "wouter-preact";
+import { __veloUpdatePending as E } from "./hooks.js";
+function k({ basePath: e, favicon: t = "/favicon.ico" } = {}) {
+  const n = process.env.NODE_ENV !== "production";
   e = e || process.env.STATIC_BASE_URL || (process.env.VELO_STATIC ? "/client" : "");
-  const r = n !== !1 && /* @__PURE__ */ i("link", { rel: "icon", href: `${e}${n}`, type: "image/x-icon" });
-  return t ? /* @__PURE__ */ u(p, { children: [
-    r,
-    /* @__PURE__ */ i("script", { type: "module", src: "/@vite/client" }),
-    /* @__PURE__ */ i("script", { type: "module", src: "/__velo_client.js" })
-  ] }) : /* @__PURE__ */ u(p, { children: [
-    r,
-    /* @__PURE__ */ i("link", { rel: "stylesheet", href: `${e}/client.css` }),
-    /* @__PURE__ */ i("script", { type: "module", src: `${e}/client.js` })
+  const i = t !== !1 && /* @__PURE__ */ o("link", { rel: "icon", href: `${e}${t}`, type: "image/x-icon" });
+  if (n)
+    return /* @__PURE__ */ p(L, { children: [
+      i,
+      /* @__PURE__ */ o("script", { type: "module", src: "/@vite/client" }),
+      /* @__PURE__ */ o("script", { type: "module", src: "/__velo_client.js" })
+    ] });
+  const r = typeof __VELO_CLIENT_JS__ < "u" ? __VELO_CLIENT_JS__ : "client.js";
+  return /* @__PURE__ */ p(L, { children: [
+    i,
+    /* @__PURE__ */ o("link", { rel: "stylesheet", href: `${e}/${typeof __VELO_CLIENT_CSS__ < "u" ? __VELO_CLIENT_CSS__ : "client.css"}` }),
+    /* @__PURE__ */ o("script", { type: "module", src: `${e}/${r}` })
   ] });
 }
-function $(e, n) {
-  let t = e;
-  for (const [r, c] of Object.entries(n))
-    t = t.replace(`:${r}`, c);
-  return t;
+function $(e, t) {
+  let n = e;
+  for (const [i, r] of Object.entries(t))
+    n = n.replace(`:${i}`, r);
+  return n;
 }
-function S({ to: e, params: n, search: t, absolute: r, ...c }) {
-  const s = typeof e != "string", o = s ? (r ? e.metadata?.fullPath : e.metadata?.path) ?? "/" : e, l = n ? $(o, n) : o, f = s && r ? `~${l}` : l, a = t ? `?${new URLSearchParams(t).toString()}` : "";
-  return /* @__PURE__ */ i(m, { to: `${f}${a}`, ...c });
+function g({ to: e, params: t, search: n, absolute: i, ...r }) {
+  const c = typeof e != "string", s = c ? (i ? e.metadata?.fullPath : e.metadata?.path) ?? "/" : e, f = t ? $(s, t) : s, m = c && i ? `~${f}` : f, _ = n ? `?${new URLSearchParams(n).toString()}` : "", S = `${m}${_}`;
+  if (typeof window < "u" && E.value) {
+    const u = c ? e.metadata?.fullPath ?? s : s, a = `${t ? $(u, t) : u}${_}`, { onClick: d, ...h } = r;
+    return /* @__PURE__ */ o(
+      "a",
+      {
+        href: a,
+        onClick: (l) => {
+          d && d(l), l.defaultPrevented || (l.preventDefault(), window.location.href = a);
+        },
+        ...h
+      }
+    );
+  }
+  return /* @__PURE__ */ o(v, { to: S, ...r });
 }
 export {
-  S as Link,
-  y as Scripts,
+  g as Link,
+  k as Scripts,
   $ as substituteParams
 };

package/dist/hooks.d.ts

@@ -1,4 +1,5 @@
 import { type Signal } from "@preact/signals";
+export declare const __veloUpdatePending: Signal<boolean>;
 /**
  * Força o signal a notificar mudanças após mutação de propriedades aninhadas
  *

package/dist/hooks.js

@@ -1,11 +1,12 @@
-import { signal as d, useSignal as v } from "@preact/signals";
+import { signal as c, useSignal as v } from "@preact/signals";
 import { useRef as D, useEffect as p } from "preact/hooks";
 import { useLocation as w, useParams as S } from "wouter-preact";
+const y = c(!1);
 function P(e) {
   e.value !== null && typeof e.value == "object" && (e.value = { ...e.value });
 }
 function T(e) {
-  const a = d(!1);
+  const a = c(!1);
   if (typeof window > "u")
     return { data: {
       get value() {
@@ -13,50 +14,50 @@ function T(e) {
       }
     }, loading: a };
   const t = window.__PAGE_DATA__, n = e && t?.[e] ? t[e] : null;
-  return { data: d(n), loading: a };
+  return { data: c(n), loading: a };
 }
-function L(e, a) {
+function E(e, a) {
   let t, n;
   Array.isArray(e) ? n = e : (t = e, n = a);
   let r = null;
   if (typeof window > "u" && t) {
-    const c = globalThis.__veloServerData?.getStore?.();
-    c?.[t] && (r = c[t]);
+    const u = globalThis.__veloServerData?.getStore?.();
+    u?.[t] && (r = u[t]);
   }
   if (typeof window < "u" && t) {
     const o = window.__PAGE_DATA__;
     o?.[t] && (r = o[t], delete o[t]);
   }
-  const u = v(r), i = v(!1), _ = () => {
+  const _ = v(r), i = v(!1), f = () => {
     if (typeof window > "u" || !t) return;
     const o = window.location.pathname;
     i.value = !0;
-    const l = typeof __VELO_STATIC__ < "u" && __VELO_STATIC__ ? `${o === "/" ? "" : o}/index.json` : (() => {
+    const d = typeof __VELO_STATIC__ < "u" && __VELO_STATIC__ ? `${o === "/" ? "" : o}/index.json` : (() => {
       const s = new URLSearchParams(window.location.search);
       return s.set("_data", "1"), `${o}?${s.toString()}`;
-    })(), g = l.includes("?") ? "&" : "?", h = typeof __VELO_BUILD_HASH__ < "u" ? `${g}v=${__VELO_BUILD_HASH__}` : "";
-    fetch(`${l}${h}`).then((s) => s.json()).then((s) => {
-      u.value = s[t], i.value = !1;
+    })(), g = d.includes("?") ? "&" : "?", h = typeof __VELO_BUILD_HASH__ < "u" ? `${g}v=${__VELO_BUILD_HASH__}` : "";
+    fetch(`${d}${h}`).then((s) => s.json()).then((s) => {
+      typeof __VELO_BUILD_HASH__ < "u" && s.__buildHash && s.__buildHash !== __VELO_BUILD_HASH__ && (y.value = !0), _.value = s[t], i.value = !1;
     }).catch(() => {
       i.value = !1;
     });
-  }, f = D(r !== null);
+  }, l = D(r !== null);
   return p(() => {
-    if (f.current) {
-      f.current = !1;
+    if (l.current) {
+      l.current = !1;
       return;
     }
-    _();
-  }, n ?? []), { data: u, loading: i, refetch: _ };
+    f();
+  }, n ?? []), { data: _, loading: i, refetch: f };
 }
-function E() {
+function H() {
   const [, e] = w();
   return e;
 }
-function $() {
+function b() {
   return typeof window > "u" ? globalThis.__veloServerData?.getStore?.()?.__params ?? {} : S();
 }
-function b() {
+function U() {
   if (typeof window > "u")
     return globalThis.__veloServerData?.getStore?.()?.__query ?? {};
   const e = window.__PAGE_DATA__;
@@ -67,15 +68,16 @@ function b() {
     t[r] = n;
   }), t;
 }
-function H() {
+function $() {
   return typeof window > "u" ? globalThis.__veloServerData?.getStore?.()?.__pathname ?? "/" : (w(), window.location.pathname);
 }
 export {
   T as Loader,
+  y as __veloUpdatePending,
   P as touch,
-  L as useLoader,
-  E as useNavigate,
-  $ as useParams,
-  H as usePathname,
-  b as useQuery
+  E as useLoader,
+  H as useNavigate,
+  b as useParams,
+  $ as usePathname,
+  U as useQuery
 };

package/dist/server.js

@@ -1,48 +1,50 @@
 import { jsx as h } from "preact/jsx-runtime";
-import { Hono as T } from "hono";
-import { logger as A } from "hono/logger";
+import { Hono as P } from "hono";
+import { logger as T } from "hono/logger";
 import { trimTrailingSlash as D } from "hono/trailing-slash";
-import { render as R } from "preact-render-to-string";
-import { Router as N } from "wouter-preact";
-import { AsyncLocalStorage as O } from "node:async_hooks";
-const v = new O();
+import { render as O } from "preact-render-to-string";
+import { Router as b } from "wouter-preact";
+import { AsyncLocalStorage as I } from "node:async_hooks";
+const v = new I();
 globalThis.__veloServerData = v;
-const g = [];
+const _ = [];
 let p = null;
-function x(t) {
+function M(t) {
   if (p) {
     t(p);
     return;
   }
-  g.push(t);
+  _.push(t);
 }
 function y(t) {
   p = t;
-  for (const e of g) e(t);
-  g.length = 0;
+  for (const e of _) e(t);
+  _.length = 0;
 }
-const w = [];
-function B(t) {
-  w.push(t);
+const S = [];
+function G(t) {
+  S.push(t);
 }
-const I = (t, e, o) => {
-  if (t.req.query("_data") === "1")
-    return t.json(o ?? null);
-  const s = t.req.path, r = v.run(
+const R = (t, e, o) => {
+  if (t.req.query("_data") === "1") {
+    const c = typeof __VELO_BUILD_HASH__ < "u" ? __VELO_BUILD_HASH__ : void 0, r = o ? { ...o, __buildHash: c } : { __buildHash: c };
+    return t.json(r);
+  }
+  const s = t.req.path, n = v.run(
     o ?? {},
-    () => R(/* @__PURE__ */ h(N, { ssrPath: s, children: e }))
+    () => O(/* @__PURE__ */ h(b, { ssrPath: s, children: e }))
   );
-  if (!o)
-    return t.html(r);
+  if (t.header("Cache-Control", "no-cache"), !o)
+    return t.html(n);
   const a = `<script>window.__PAGE_DATA__=${JSON.stringify(
     o
   )}<\/script>`;
-  return t.html(r.replace("</head>", `${a}</head>`));
-}, b = async (t, e) => {
-  const o = e.req.param(), s = e.req.query(), r = { params: o, query: s, c: e }, a = await Promise.all(
-    t.map(async (n) => {
-      if (!n.loader) return null;
-      const u = await n.loader(r), i = n.metadata?.moduleId;
+  return t.html(n.replace("</head>", `${a}</head>`));
+}, C = async (t, e) => {
+  const o = e.req.param(), s = e.req.query(), n = { params: o, query: s, c: e }, a = await Promise.all(
+    t.map(async (r) => {
+      if (!r.loader) return null;
+      const u = await r.loader(n), i = r.metadata?.moduleId;
       return i ? { moduleId: i, loaderData: u } : null;
     })
   ), c = {
@@ -50,81 +52,81 @@ const I = (t, e, o) => {
     __query: s,
     __pathname: e.req.path
   };
-  for (const n of a)
-    n && (c[n.moduleId] = n.loaderData);
+  for (const r of a)
+    r && (c[r.moduleId] = r.loaderData);
   return {
-    components: t.map((n) => n.Component),
+    components: t.map((r) => r.Component),
     data: c
   };
-}, j = (t) => {
+}, N = (t) => {
   if (t.length === 0) return null;
   const e = t.filter(Boolean);
   if (e.length === 0) return null;
   if (e.length === 1) {
-    const r = e[0];
-    return /* @__PURE__ */ h(r, {});
+    const n = e[0];
+    return /* @__PURE__ */ h(n, {});
   }
   const o = e[e.length - 1];
-  return e.slice(0, -1).reduceRight((r, a) => /* @__PURE__ */ h(a, { children: r }), /* @__PURE__ */ h(o, {}));
-}, S = (t, e, o = [], s = []) => {
-  for (const r of e) {
-    const a = [...o, r.module], c = [
+  return e.slice(0, -1).reduceRight((n, a) => /* @__PURE__ */ h(a, { children: n }), /* @__PURE__ */ h(o, {}));
+}, w = (t, e, o = [], s = []) => {
+  for (const n of e) {
+    const a = [...o, n.module], c = [
       ...s,
-      ...r.middlewares || []
+      ...n.middlewares || []
     ];
-    if (r.children)
-      S(
+    if (n.children)
+      w(
         t,
-        r.children,
+        n.children,
         a,
         c
       );
     else {
-      const n = r.module.metadata?.fullPath;
-      if (!n) {
+      const r = n.module.metadata?.fullPath;
+      if (!r) {
         console.warn(
-          `Module ${r.module.metadata?.moduleId} has no fullPath`
+          `Module ${n.module.metadata?.moduleId} has no fullPath`
         );
         continue;
       }
       const u = async (i) => {
-        const { components: d, data: f } = await b(a, i), l = j(d);
-        return I(i, l, f);
+        const { components: d, data: f } = await C(a, i), l = N(d);
+        return R(i, l, f);
       };
-      c.length > 0 ? t.on(["GET"], [n], ...c, u) : t.on(["GET"], [n], u);
+      c.length > 0 ? t.on(["GET"], [r], ...c, u) : t.on(["GET"], [r], u);
     }
   }
-}, q = (t, e, o = []) => {
+}, E = (t, e, o = []) => {
   for (const s of e) {
-    const r = s.module.metadata?.moduleId, a = [
+    const n = s.module.metadata?.moduleId, a = [
       ...o,
       ...s.middlewares || []
     ];
-    if (r) {
+    if (n) {
       const c = Object.keys(s.module).filter(
-        (n) => n.startsWith("action_")
+        (r) => r.startsWith("action_")
       );
-      for (const n of c) {
-        const u = n.replace("action_", ""), i = s.module[n];
+      for (const r of c) {
+        const u = r.replace("action_", ""), i = s.module[r];
         if (typeof i == "function") {
-          const d = `/_action/${r}/${u}`, f = async (l) => {
-            let _ = {};
+          const d = `/_action/${n}/${u}`, f = async (l) => {
+            let g = {};
             try {
-              _ = await l.req.json();
+              g = await l.req.json();
             } catch {
             }
-            const E = {
-              body: _,
+            const q = {
+              body: g,
               params: l.req.param(),
               query: l.req.query(),
               c: l
             };
             try {
-              const m = await i(E);
+              const m = await i(q);
               return l.json(m ?? { ok: !0 });
             } catch (m) {
-              const P = m instanceof Error ? m.message : "Action failed";
-              return l.json({ error: P }, 500);
+              const A = m instanceof Error ? m.message : "Action failed";
+              return l.json({ error: A }, 500);
             }
           };
           a.length > 0 ? t.on(
@@ -136,33 +138,33 @@ const I = (t, e, o) => {
         }
       }
     }
-    s.children && q(t, s.children, a);
+    s.children && E(t, s.children, a);
   }
-}, C = async (t) => {
-  const e = new T();
-  e.use(D()), process.env.NODE_ENV !== "production" && e.use("*", A());
-  for (const o of w)
+}, j = async (t) => {
+  const e = new P();
+  e.use(D()), process.env.NODE_ENV !== "production" && e.use("*", T());
+  for (const o of S)
     await o(e);
-  if (S(e, t), q(e, t), process.env.NODE_ENV !== "production" && !p) {
+  if (w(e, t), E(e, t), process.env.NODE_ENV !== "production" && !p) {
     const o = globalThis.__veloDevServer;
     o && y(o);
   }
   return e;
-}, K = async (t) => {
-  const { routes: e, port: o = Number(process.env.SERVER_PORT) || 3e3 } = t, s = await C(e);
+}, x = async (t) => {
+  const { routes: e, port: o = Number(process.env.SERVER_PORT) || 3e3 } = t, s = await j(e);
   if (process.env.NODE_ENV === "production" && !process.env.VELO_STATIC) {
-    const { serve: r } = await import("@hono/node-server"), { serveStatic: a } = await import("@hono/node-server/serve-static"), { join: c } = await import("node:path"), n = c(process.cwd(), "dist/client");
-    (process.env.STATIC_BASE_URL || "").startsWith("http") || s.use("/*", a({ root: n })), console.log(`Server running on http://localhost:${o}`);
-    const i = r({ fetch: s.fetch, port: o });
+    const { serve: n } = await import("@hono/node-server"), { serveStatic: a } = await import("@hono/node-server/serve-static"), { join: c } = await import("node:path"), r = c(process.cwd(), "dist/client");
+    (process.env.STATIC_BASE_URL || "").startsWith("http") || s.use("/*", a({ root: r })), console.log(`Server running on http://localhost:${o}`);
+    const i = n({ fetch: s.fetch, port: o });
     y(i);
   }
   return s;
 };
 export {
-  B as addRoutes,
-  C as createApp,
-  C as default,
-  x as onServer,
+  G as addRoutes,
+  j as createApp,
+  j as default,
+  M as onServer,
   v as serverDataStorage,
-  K as startServer
+  x as startServer
 };

package/dist/vite.js

@@ -1,13 +1,13 @@
 import d from "node:path";
-import S from "node:fs";
-import F from "@preact/preset-vite";
-import w from "@hono/vite-dev-server";
+import L from "node:fs";
+import C from "@preact/preset-vite";
+import F from "@hono/vite-dev-server";
 import { parse as v } from "@babel/parser";
-import L from "@babel/traverse";
+import b from "@babel/traverse";
 import j from "@babel/generator";
 import * as e from "@babel/types";
-const m = typeof L == "function" ? L : L.default, h = typeof j == "function" ? j : j.default;
-function C(u, o, r, l) {
+const m = typeof b == "function" ? b : b.default, S = typeof j == "function" ? j : j.default;
+function w(u, c, r, l) {
   const i = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
@@ -16,28 +16,28 @@ function C(u, o, r, l) {
   if (m(i, {
     // Procura: export const metadata = { ... }
     ExportNamedDeclaration(s) {
-      const c = s.node.declaration;
-      if (e.isVariableDeclaration(c) && c.declarations.length === 1) {
-        const a = c.declarations[0];
+      const o = s.node.declaration;
+      if (e.isVariableDeclaration(o) && o.declarations.length === 1) {
+        const a = o.declarations[0];
         if (a && e.isIdentifier(a.id, { name: "metadata" }) && e.isObjectExpression(a.init)) {
           t = !0;
-          const f = a.init.properties.filter((y) => e.isObjectProperty(y) && e.isIdentifier(y.key) ? y.key.name !== "moduleId" && y.key.name !== "fullPath" && y.key.name !== "path" : !0), x = [
+          const f = a.init.properties.filter((y) => e.isObjectProperty(y) && e.isIdentifier(y.key) ? y.key.name !== "moduleId" && y.key.name !== "fullPath" && y.key.name !== "path" : !0), h = [
             e.objectProperty(
               e.identifier("moduleId"),
-              e.stringLiteral(o)
+              e.stringLiteral(c)
             )
           ];
-          r !== void 0 && x.push(
+          r !== void 0 && h.push(
             e.objectProperty(
               e.identifier("fullPath"),
               e.stringLiteral(r)
             )
-          ), l !== void 0 && x.push(
+          ), l !== void 0 && h.push(
             e.objectProperty(
               e.identifier("path"),
               e.stringLiteral(l)
             )
-          ), a.init.properties = [...x, ...f];
+          ), a.init.properties = [...h, ...f];
         }
       }
     }
@@ -45,7 +45,7 @@ function C(u, o, r, l) {
     const s = [
       e.objectProperty(
         e.identifier("moduleId"),
-        e.stringLiteral(o)
+        e.stringLiteral(c)
       )
     ];
     r !== void 0 && s.push(
@@ -59,7 +59,7 @@ function C(u, o, r, l) {
         e.stringLiteral(l)
       )
     );
-    const c = e.exportNamedDeclaration(
+    const o = e.exportNamedDeclaration(
       e.variableDeclaration("const", [
         e.variableDeclarator(
           e.identifier("metadata"),
@@ -67,11 +67,11 @@ function C(u, o, r, l) {
         )
       ])
     );
-    i.program.body.unshift(c);
+    i.program.body.unshift(o);
   }
-  return h(i, { retainLines: !0 }).code;
+  return S(i, { retainLines: !0 }).code;
 }
-function R(u, o) {
+function R(u, c) {
   const r = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
@@ -80,12 +80,12 @@ function R(u, o) {
     CallExpression(i) {
       const t = i.node.callee, n = e.isIdentifier(t, { name: "Loader" }) || e.isTSInstantiationExpression(t) && e.isIdentifier(t.expression, { name: "Loader" }), s = e.isIdentifier(t, { name: "useLoader" }) || e.isTSInstantiationExpression(t) && e.isIdentifier(t.expression, { name: "useLoader" });
       if (!n && !s) return;
-      const c = i.node.arguments, a = e.stringLiteral(o), p = c[0];
-      e.isStringLiteral(p) && p.value.includes("/") || (i.node.arguments = [a, ...c]);
+      const o = i.node.arguments, a = e.stringLiteral(c), p = o[0];
+      e.isStringLiteral(p) && p.value.includes("/") || (i.node.arguments = [a, ...o]);
     }
-  }), h(r, { retainLines: !0 }).code;
+  }), S(r, { retainLines: !0 }).code;
 }
-function V(u, o) {
+function V(u, c) {
   const r = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
@@ -98,15 +98,15 @@ function V(u, o) {
       if (!n || !e.isIdentifier(n.id)) return;
       const s = n.id.name;
       if (!s.startsWith("action_")) return;
-      const c = s.replace("action_", ""), a = n.init;
+      const o = s.replace("action_", ""), a = n.init;
       if (!e.isArrowFunctionExpression(a) || !a.async) return;
-      const p = a.params, f = W(o, c, p);
-      a.body = e.blockStatement([e.returnStatement(f)]), $(a, p);
+      const p = a.params, f = U(c, o, p);
+      a.body = e.blockStatement([e.returnStatement(f)]), W(a, p);
     }
-  }), h(r, { retainLines: !0 }).code;
+  }), S(r, { retainLines: !0 }).code;
 }
-function W(u, o, r) {
-  const l = `/_action/${u}/${o}`;
+function U(u, c, r) {
+  const l = `/_action/${u}/${c}`;
   return r.length === 0 ? e.callExpression(
     e.memberExpression(
       e.callExpression(e.identifier("fetch"), [
@@ -175,9 +175,9 @@ function W(u, o, r) {
     ]
   );
 }
-function $(u, o) {
-  if (o.length === 0) return;
-  const r = o[0];
+function W(u, c) {
+  if (c.length === 0) return;
+  const r = c[0];
   if (e.isObjectPattern(r)) {
     let l = null;
     if (e.isTSTypeAnnotation(r.typeAnnotation) && e.isTSTypeReference(r.typeAnnotation.typeAnnotation)) {
@@ -201,26 +201,26 @@ function $(u, o) {
     )), u.params = [t];
   }
 }
-function U(u) {
-  const o = v(u, {
+function $(u) {
+  const c = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
   });
-  return m(o, {
+  return m(c, {
     ExportNamedDeclaration(l) {
       const i = l.node.declaration;
       if (!e.isVariableDeclaration(i)) return;
       const t = i.declarations[0];
       !t || !e.isIdentifier(t.id) || t.id.name === "loader" && l.remove();
     }
-  }), h(o, { retainLines: !0 }).code;
+  }), S(c, { retainLines: !0 }).code;
 }
 function k(u) {
-  const o = v(u, {
+  const c = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
   }), r = /* @__PURE__ */ new Set();
-  return m(o, {
+  return m(c, {
     ObjectProperty(i) {
       if (e.isIdentifier(i.node.key, { name: "middlewares" }) && e.isArrayExpression(i.node.value)) {
         for (const t of i.node.value.elements)
@@ -228,25 +228,25 @@ function k(u) {
         i.remove();
       }
     }
-  }), r.size === 0 ? u : (m(o, {
+  }), r.size === 0 ? u : (m(c, {
     ImportDeclaration(i) {
       const t = i.node.specifiers, n = t.filter((s) => {
         if (e.isImportSpecifier(s)) {
-          const c = s.local.name;
-          return !r.has(c);
+          const o = s.local.name;
+          return !r.has(o);
         }
         return !0;
       });
       n.length === 0 ? i.remove() : n.length !== t.length && (i.node.specifiers = n);
     }
-  }), h(o, { retainLines: !0 }).code);
+  }), S(c, { retainLines: !0 }).code);
 }
-function T(u) {
-  const o = v(u, {
+function _(u) {
+  const c = v(u, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
   }), r = /* @__PURE__ */ new Map();
-  m(o, {
+  m(c, {
     ImportDeclaration(t) {
       const n = t.node.source.value;
       for (const s of t.node.specifiers)
@@ -254,7 +254,7 @@ function T(u) {
     }
   });
   const l = /* @__PURE__ */ new Map();
-  m(o, {
+  m(c, {
     ExportDefaultDeclaration(t) {
       const n = t.node.declaration;
       let s = null;
@@ -265,23 +265,23 @@ function T(u) {
   for (const [t, n] of l) {
     const s = r.get(t);
     if (s) {
-      const c = s.replace(/^\.\//, "").replace(/\.(tsx?|jsx?|js)$/, "");
-      i.set(c, n);
+      const o = s.replace(/^\.\//, "").replace(/\.(tsx?|jsx?|js)$/, "");
+      i.set(o, n);
     }
   }
   return i;
 }
-function A(u, o, r) {
+function A(u, c, r) {
   for (const l of u) {
     if (!e.isObjectExpression(l)) continue;
-    let i = "", t = o, n = null, s = null;
-    for (const c of l.properties) {
-      if (!e.isObjectProperty(c)) continue;
-      const a = c.key, p = e.isIdentifier(a) ? a.name : null;
-      p === "path" && e.isStringLiteral(c.value) && (i = c.value.value, i && !i.startsWith("/") ? t = o + "/" + i : t = o + i), p === "module" && e.isIdentifier(c.value) && (n = c.value.name), p === "children" && e.isArrayExpression(c.value) && (s = c.value);
+    let i = "", t = c, n = null, s = null;
+    for (const o of l.properties) {
+      if (!e.isObjectProperty(o)) continue;
+      const a = o.key, p = e.isIdentifier(a) ? a.name : null;
+      p === "path" && e.isStringLiteral(o.value) && (i = o.value.value, i && !i.startsWith("/") ? t = c + "/" + i : t = c + i), p === "module" && e.isIdentifier(o.value) && (n = o.value.name), p === "children" && e.isArrayExpression(o.value) && (s = o.value);
     }
     if (n) {
-      const a = !s && i === "/" ? o || "/" : t;
+      const a = !s && i === "/" ? c || "/" : t;
       r.set(n, {
         fullPath: a,
         path: i
@@ -290,29 +290,29 @@ function A(u, o, r) {
     s && A(s.elements, t, r);
   }
 }
-const g = "virtual:velo/server-entry", E = "virtual:velo/client-entry", _ = "\0" + g, P = "\0" + E;
-function M(u, o) {
-  let r = d.resolve(process.cwd(), o);
+const g = "virtual:velo/server-entry", x = "virtual:velo/client-entry", T = "\0" + g, P = "\0" + x;
+function J(u, c) {
+  let r = d.resolve(process.cwd(), c);
   const l = u.routesFile ?? "routes.tsx", i = /* @__PURE__ */ new Map();
   return {
     name: "velo:transform",
     enforce: "pre",
     configResolved(t) {
-      r = d.resolve(t.root, o);
+      r = d.resolve(t.root, c);
     },
     buildStart() {
       const t = d.join(r, l);
-      if (S.existsSync(t)) {
-        const n = S.readFileSync(t, "utf-8"), s = T(n);
+      if (L.existsSync(t)) {
+        const n = L.readFileSync(t, "utf-8"), s = _(n);
         i.clear();
-        for (const [c, a] of s)
-          i.set(c, a);
+        for (const [o, a] of s)
+          i.set(o, a);
       }
     },
     handleHotUpdate({ file: t, server: n }) {
       const s = d.join(r, l);
       if (t === s) {
-        const c = S.readFileSync(s, "utf-8"), a = T(c);
+        const o = L.readFileSync(s, "utf-8"), a = _(o);
         i.clear();
         for (const [p, f] of a)
           i.set(p, f);
@@ -320,11 +320,11 @@ function M(u, o) {
       }
     },
     resolveId(t) {
-      return t === g || t.endsWith(g) ? _ : t === E || t.endsWith(E) || t === "/__velo_client.js" ? P : null;
+      return t === g || t.endsWith(g) ? T : t === x || t.endsWith(x) || t === "/__velo_client.js" ? P : null;
     },
     load(t) {
-      const n = u.routesFile ?? "routes.tsx", s = u.serverInit ?? "server.tsx", c = u.clientInit ?? "client.tsx", a = d.join(r, n).replace(/\.tsx?$/, ".js"), p = d.join(r, s).replace(/\.tsx?$/, ".js"), f = d.join(r, c).replace(/\.tsx?$/, ".js");
-      return t === _ ? `
+      const n = u.routesFile ?? "routes.tsx", s = u.serverInit ?? "server.tsx", o = u.clientInit ?? "client.tsx", a = d.join(r, n).replace(/\.tsx?$/, ".js"), p = d.join(r, s).replace(/\.tsx?$/, ".js"), f = d.join(r, o).replace(/\.tsx?$/, ".js");
+      return t === T ? `
 import "${p}";
 import routes from "${a}";
 import { startServer } from "@mauroandre/velojs/server";
@@ -340,18 +340,18 @@ startClient({ routes });
 ` : null;
     },
     transform(t, n, s) {
-      const c = s?.ssr === !0;
+      const o = s?.ssr === !0;
       if (n.startsWith("\0") || n.includes("/.velojs/") || !n.endsWith(".tsx") && !n.endsWith(".ts") || !n.startsWith(r)) return null;
       let a = t, p = !1;
-      const f = /middlewares:\s*\[/.test(t), x = /export\s+(const|function)\s+Component/.test(
+      const f = /middlewares:\s*\[/.test(t), h = /export\s+(const|function)\s+Component/.test(
         t
-      ), y = /export\s+(const|function)\s+loader/.test(t), N = /export\s+const\s+action_\w+/.test(t), D = /\bLoader\s*</.test(t) || /\bLoader\s*\(/.test(t), O = /\buseLoader\s*</.test(t) || /\buseLoader\s*\(/.test(t);
-      if (!c && f && (a = k(a), p = !0), x || y || N || D || O) {
-        const b = d.relative(r, n).replace(/\.(tsx?|jsx?)$/, "").replace(/\\/g, "/"), I = i.get(b);
-        a = C(a, b, I?.fullPath, I?.path), a = R(a, b), c || (a = V(
+      ), y = /export\s+(const|function)\s+loader/.test(t), N = /export\s+const\s+action_\w+/.test(t), O = /\bLoader\s*</.test(t) || /\bLoader\s*\(/.test(t), D = /\buseLoader\s*</.test(t) || /\buseLoader\s*\(/.test(t);
+      if (!o && f && (a = k(a), p = !0), h || y || N || O || D) {
+        const E = d.relative(r, n).replace(/\.(tsx?|jsx?)$/, "").replace(/\\/g, "/"), I = i.get(E);
+        a = w(a, E, I?.fullPath, I?.path), a = R(a, E), o || (a = V(
           a,
-          b
-        )), c || (a = U(a)), p = !0;
+          E
+        )), o || (a = $(a)), p = !0;
       }
       return p ? {
         code: a,
@@ -360,16 +360,26 @@ startClient({ routes });
     }
   };
 }
-function B() {
+function M() {
   return {
     name: "velo:config",
-    config(u, { mode: o }) {
-      const r = o === "server", l = o === "development", i = !!process.env.VELO_STATIC, t = {
+    config(u, { mode: c }) {
+      const r = c === "server", l = c === "development", i = !!process.env.VELO_STATIC;
+      let t = "client.js", n = "client.css";
+      if (r)
+        try {
+          const o = d.resolve(process.cwd(), "dist/client/.vite/manifest.json"), p = JSON.parse(L.readFileSync(o, "utf-8"))[x];
+          p && (t = p.file || t, p.css?.[0] && (n = p.css[0]));
+        } catch {
+        }
+      const s = {
         define: {
           "process.env.NODE_ENV": JSON.stringify(l ? "development" : "production"),
           "process.env.STATIC_BASE_URL": JSON.stringify(process.env.STATIC_BASE_URL || (i ? "/client" : "")),
           __VELO_STATIC__: JSON.stringify(i),
-          __VELO_BUILD_HASH__: JSON.stringify(Date.now().toString(36))
+          __VELO_BUILD_HASH__: JSON.stringify(process.env.VELO_BUILD_HASH || Date.now().toString(36)),
+          __VELO_CLIENT_JS__: JSON.stringify(t),
+          __VELO_CLIENT_CSS__: JSON.stringify(n)
         },
         resolve: {
           alias: {
@@ -378,7 +388,7 @@ function B() {
           }
         }
       };
-      return r ? t.build = {
+      return r ? s.build = {
         ssr: g,
         outDir: "dist",
         emptyOutDir: !1,
@@ -388,29 +398,29 @@ function B() {
             entryFileNames: "server.js"
           }
         }
-      } : l || (t.build = {
+      } : l || (s.build = {
         manifest: !0,
         outDir: "dist/client",
         rollupOptions: {
-          input: E,
+          input: x,
           output: {
-            entryFileNames: "client.js",
-            assetFileNames: (n) => n.names?.[0]?.endsWith(".css") ? "client.css" : "[name][extname]"
+            entryFileNames: "client.[hash].js",
+            assetFileNames: (o) => o.names?.[0]?.endsWith(".css") ? "client.[hash].css" : "[name].[hash][extname]"
           }
         }
-      }), t;
+      }), s;
     }
   };
 }
-function J() {
+function B() {
   return {
     name: "velo:static-url",
     apply: "build",
     enforce: "post",
-    generateBundle(u, o) {
+    generateBundle(u, c) {
       const r = process.env.STATIC_BASE_URL || "";
       if (r)
-        for (const l of Object.values(o))
+        for (const l of Object.values(c))
           l.type === "asset" && typeof l.source == "string" && l.fileName.endsWith(".css") && (l.source = l.source.replace(
             /url\(\s*(['"]?)\/(?!\/)/g,
             `url($1${r}/`
@@ -419,13 +429,13 @@ function J() {
   };
 }
 function Z(u) {
-  const o = u ?? {}, r = o.appDirectory ?? "./app";
+  const c = u ?? {}, r = c.appDirectory ?? "./app";
   return [
+    M(),
+    J(c, r),
     B(),
-    M(o, r),
-    J(),
-    F(),
-    w({
+    C(),
+    F({
       entry: g
     }),
     H()
@@ -440,10 +450,10 @@ function H() {
   };
 }
 export {
-  T as buildFullPathMap,
+  _ as buildFullPathMap,
   A as collectFullPaths,
-  C as injectMetadata,
-  U as removeLoaders,
+  w as injectMetadata,
+  $ as removeLoaders,
   k as removeMiddlewares,
   V as transformActionsForClient,
   R as transformLoaderFunctions,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mauroandre/velojs",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "type": "module",
     "description": "Fullstack web framework built on Hono + Preact with Vite-powered AST transforms",
     "keywords": [