hono-svelte 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.7.0
+
+- **feat(vite): per-page `Data` can use imported types.** The generated dts
+  rewrites references to types imported in the page's `<script module>` as
+  `import("…")` type queries (named, aliased, default and namespace
+  imports; alias/package specifiers kept, relative ones re-resolved from the
+  dts). Pages whose data comes from the app's own types — every real app —
+  can now use per-page typing instead of being skipped with a warning.
+- **fix(vite): typed `c.render` overloads are actually enforced.** The
+  catch-all overload accepted every entry, so a wrong `data` for a typed
+  page failed its overload and silently matched the catch-all
+  (`Record<string, unknown>`). The catch-all now excludes typed entries.
+  Behavior change: rendering through a value typed as the whole `Entry`
+  union no longer compiles once a page declares `Data`. New `UntypedEntry`
+  (pages without `Data`) and `TypedEntry` types: generic helpers take
+  `UntypedEntry`.
+- Imported types inside template literal types (`\`row-${RowId}\``) are
+  qualified too; a `//` inside an import specifier (URL) no longer cuts it.
+- New `test/types.test.ts` case runs `tsc` on a page whose `Data` imports
+  an app type: correct data compiles, a wrong field type and a missing field
+  fail.
+
 ## 0.6.2
 
 - **fix(shell): unknown-entry errors never list the app's pages in

package/README.md

@@ -360,12 +360,16 @@ declare module "hono" {
 }
 ```
 
-Helpers that forward an entry to `c.render` use the `Entry` type exported by the package — the generated union once the `.d.ts` is in the program, `string` without it. No import of the generated file needed:
+The package exports the entry unions — the generated ones once the `.d.ts` is in the program, `string` without it. No import of the generated file needed:
+
+- `Entry`: every page.
+- `TypedEntry`: pages that declare a `Data` type (see per-page data typing below).
+- `UntypedEntry`: the others — use it in helpers that forward an entry to `c.render`; typed pages need their own `data` and are rendered directly.
 
 ```ts
-import type { Entry } from "hono-svelte";
+import type { UntypedEntry } from "hono-svelte";
 
-export const page = (entry: Entry, title: string) => (c: Context) => c.render(entry, { title });
+export const page = (entry: UntypedEntry, title: string) => (c: Context) => c.render(entry, { title });
 ```
 
 `dts: "path/to/entries.d.ts"` sets a custom path (relative to the Vite root). The file regenerates on `buildStart` and via the dev watcher when entries change. Without `dts` (default `false`), declare the renderer manually with a plain `string`:
@@ -416,14 +420,30 @@ declare module "hono" {
 }
 ```
 
-The `Data` declaration is inlined verbatim into the dts, so it must be
-**self-contained** — inline shapes or built-ins only. References to imported
-types can't be resolved from the dts location; such pages keep
-`Record<string, unknown>` data with a one-time warning. Both
+`Data` can use types imported in the same `<script module>` — the usual
+case when the data comes from your database layer:
+
+```svelte
+<script module lang="ts">
+  import type { Row } from "$lib/db";
+  import type { LayoutData } from "../dashboard/layout-data";
+  export type Data = LayoutData & { rows: Row[] };
+</script>
+```
+
+The generated dts rewrites each imported reference as an `import("…")` type
+query (`import("$lib/db").Row`). Alias and package specifiers are kept as
+written (your `tsconfig` resolves them anywhere); relative ones are
+re-resolved from the dts location. Types declared locally in the module
+script (not exported from another file) can't be referenced. Both
 `export type Data = ...` and `export interface Data { ... }` work (including
 legacy `<script context="module">`). `pages().dataTypes()` exposes the
 extracted declarations.
 
+Entries with a `Data` type only accept their own overload: `c.render(entry, …)`
+with an entry typed as the whole `Entry` union no longer compiles — type
+generic helpers with `UntypedEntry`, and render typed pages directly.
+
 ## Production tips
 
 - Pass the Vite manifest to `shell({ assets: manifest })` for hashed files — including the global stylesheet: with `styles: resolve("src/styles.css")` in the client input (or `stylesEntry` pointing at another file), its hashed name comes from the manifest, no hand-written `stylesHref`. The shell walks the entry's static import graph: the CSS of shared chunks (layouts, components used by several pages) is linked together with the entry's own CSS, and every reachable chunk gets a `modulepreload`.

package/dist/index.d.ts

@@ -35,6 +35,16 @@ export interface Register {
 export type Entry = Register extends {
     entries: infer E extends string;
 } ? E : string;
+/** Entries whose page declares a `Data` type (they only accept their own `data`). */
+export type TypedEntry = Register extends {
+    typedEntries: infer E extends string;
+} ? E : never;
+/**
+ * Entries without a `Data` type — what a generic helper forwarding an entry
+ * to `c.render` should accept: typed entries need their own `data` and have
+ * no overload taking an arbitrary entry. `string` without the generated `.d.ts`.
+ */
+export type UntypedEntry = Exclude<Entry, TypedEntry>;
 export type RenderProps<TData = Record<string, unknown>> = {
     title?: string;
     data?: TData;

package/dist/page-data.d.ts

@@ -1,7 +1,26 @@
+/** An import of the module script that the `Data` declaration references. */
+export type DataImport = {
+    /** Local name used in the declaration. */
+    local: string;
+    /** Exported name: an identifier, `"default"` or `"*"` (namespace import). */
+    imported: string;
+    /** Module specifier as written in the page. */
+    specifier: string;
+};
 export type PageDataExtraction = {
     /** Declaration text (`type Data = ...` / `interface Data { ... }`, `export` stripped). Null when the page declares no `Data`. */
     declaration: string | null;
-    /** Imported identifiers referenced by the declaration (unusable for the dts). */
+    /** Imported identifiers referenced by the declaration. */
     importedRefs: string[];
+    /** The imports behind `importedRefs`, used to qualify the declaration for the dts. */
+    imports: DataImport[];
 };
 export declare function extractPageDataType(source: string): PageDataExtraction;
+/**
+ * Rewrites every reference to an imported identifier as an `import("…")`
+ * type query, so the declaration resolves from any file (the generated dts):
+ * `Row` → `import("$lib/db").Row`, a default import → `.default`, a
+ * namespace `ns.Row` → `import("…").Row`. `specifierFor` maps the page's
+ * specifier to one valid from the dts location (relative paths move).
+ */
+export declare function qualifyImports(declaration: string, imports: DataImport[], specifierFor: (specifier: string) => string): string;

package/dist/page-data.js

@@ -2,14 +2,14 @@
 // `export type Data = ...` / `export interface Data { ... }` inside a page's
 // `<script module lang="ts">` (legacy `<script context="module">` works too).
 //
-// The declaration is inlined verbatim into the dts, so it must be
-// self-contained: references to imported types can't be resolved from the
-// dts location and are reported through `importedRefs` (the caller skips the
-// typed overload for that page and warns once).
+// The declaration is copied into the dts. Types it imports in the module
+// script (`import type { Row } from "$lib/db"`) are carried along: each
+// reference becomes an `import("…")` type query (`qualifyImports`), with
+// relative specifiers re-resolved from the dts location by the caller.
 const MODULE_SCRIPT_RE = /<script\b[^>]*\bmodule\b[^>]*>([\s\S]*?)<\/script>/;
 const DATA_DECL_RE = /(?:export\s+)?(type|interface)\s+Data\b/;
 export function extractPageDataType(source) {
-    const none = { declaration: null, importedRefs: [] };
+    const none = { declaration: null, importedRefs: [], imports: [] };
     const script = MODULE_SCRIPT_RE.exec(source)?.[1];
     if (!script)
         return none;
@@ -26,8 +26,100 @@ export function extractPageDataType(source) {
         .replace(/\s+$/, "");
     if (!declaration)
         return none;
-    const importedRefs = importedIdentifiers(script).filter((id) => new RegExp(`\\b${id.replace(/\$/g, "\\$")}\\b`).test(declaration));
-    return { declaration, importedRefs };
+    const imports = scriptImports(script).filter((imp) => findReferences(declaration, imp.local).length > 0);
+    return { declaration, importedRefs: imports.map((imp) => imp.local), imports };
+}
+/**
+ * Rewrites every reference to an imported identifier as an `import("…")`
+ * type query, so the declaration resolves from any file (the generated dts):
+ * `Row` → `import("$lib/db").Row`, a default import → `.default`, a
+ * namespace `ns.Row` → `import("…").Row`. `specifierFor` maps the page's
+ * specifier to one valid from the dts location (relative paths move).
+ */
+export function qualifyImports(declaration, imports, specifierFor) {
+    const edits = [];
+    for (const imp of imports) {
+        const target = `import(${JSON.stringify(specifierFor(imp.specifier))})`;
+        const text = imp.imported === "*" ? target : imp.imported === "default" ? `${target}.default` : `${target}.${imp.imported}`;
+        for (const at of findReferences(declaration, imp.local))
+            edits.push({ at, length: imp.local.length, text });
+    }
+    let out = declaration;
+    for (const edit of edits.sort((a, b) => b.at - a.at)) {
+        out = out.slice(0, edit.at) + edit.text + out.slice(edit.at + edit.length);
+    }
+    return out;
+}
+/**
+ * Positions where `name` is used as a type reference: a whole identifier,
+ * not a property access (`.name`), not an object/interface key
+ * (`{ name: …`), outside strings and comments — but inside the `${…}`
+ * holes of template literal types (`\`row-${RowId}\``), which are types.
+ */
+function findReferences(text, name) {
+    const found = [];
+    const isId = (ch) => ch !== undefined && /[\w$]/.test(ch);
+    for (let i = 0; i < text.length; i++) {
+        const ch = text[i];
+        if (ch === "/" && text[i + 1] === "/") {
+            while (i < text.length && text[i] !== "\n")
+                i++;
+            continue;
+        }
+        if (ch === "/" && text[i + 1] === "*") {
+            i += 2;
+            while (i < text.length && !(text[i] === "*" && text[i + 1] === "/"))
+                i++;
+            i++;
+            continue;
+        }
+        if (ch === "`") {
+            i++;
+            while (i < text.length && text[i] !== "`") {
+                if (text[i] === "\\") {
+                    i += 2;
+                    continue;
+                }
+                if (text[i] === "$" && text[i + 1] === "{") {
+                    const start = i + 2;
+                    let depth = 1;
+                    let j = start;
+                    while (j < text.length && depth > 0) {
+                        if (text[j] === "{")
+                            depth++;
+                        else if (text[j] === "}")
+                            depth--;
+                        j++;
+                    }
+                    for (const at of findReferences(text.slice(start, j - 1), name))
+                        found.push(start + at);
+                    i = j;
+                    continue;
+                }
+                i++;
+            }
+            continue;
+        }
+        if (ch === '"' || ch === "'") {
+            i++;
+            while (i < text.length && text[i] !== ch) {
+                if (text[i] === "\\")
+                    i++;
+                i++;
+            }
+            continue;
+        }
+        if (!text.startsWith(name, i) || isId(text[i - 1]) || isId(text[i + name.length]))
+            continue;
+        const before = text.slice(0, i).replace(/\s+$/, "");
+        const after = text.slice(i + name.length).replace(/^\s+/, "");
+        const isPropertyAccess = before.endsWith(".");
+        const isKey = (before === "" || /[{;,(]$/.test(before)) && /^\??:/.test(after);
+        if (!isPropertyAccess && !isKey)
+            found.push(i);
+        i += name.length - 1;
+    }
+    return found;
 }
 /**
  * Scan to the end of the declaration starting right after `Data`.
@@ -95,25 +187,33 @@ function scanDeclarationEnd(text, from, isInterface) {
     // EOF: a `type` alias that never hit `;` but balanced its brackets.
     return !isInterface && seenBrackets ? text.length : -1;
 }
-/** Identifiers brought in by `import ... from "..."` clauses of the script. */
-function importedIdentifiers(script) {
-    const ids = new Set();
-    for (const m of script.matchAll(/import\s+(?:type\s+)?([\s\S]*?)\s*from\s*["'][^"']+["']/g)) {
+/** Bindings created by the `import … from "…"` clauses of the script, in order. */
+function scriptImports(script) {
+    const imports = [];
+    const add = (imp) => {
+        if (!imports.some((other) => other.local === imp.local))
+            imports.push(imp);
+    };
+    const code = script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/[^\n]*/gm, "$1");
+    for (const m of code.matchAll(/import\s+(?:type\s+)?([\s\S]*?)\s*from\s*(["'])([^"']+)\2/g)) {
         const clause = m[1];
+        const specifier = m[3];
         const def = /^\s*([\w$]+)/.exec(clause);
         if (def)
-            ids.add(def[1]);
+            add({ local: def[1], imported: "default", specifier });
         const ns = /\*\s+as\s+([\w$]+)/.exec(clause);
         if (ns)
-            ids.add(ns[1]);
+            add({ local: ns[1], imported: "*", specifier });
         for (const named of clause.matchAll(/\{([^}]*)\}/g)) {
-            for (const part of named[1].split(",")) {
-                const asM = /\bas\s+([\w$]+)/.exec(part);
-                const id = asM ? asM[1] : part.trim().split(/\s+/)[0];
-                if (/^[\w$]+$/.test(id))
-                    ids.add(id);
+            for (const raw of named[1].split(",")) {
+                const part = raw.trim().replace(/^type\s+/, "");
+                if (!part)
+                    continue;
+                const [imported, local = imported] = part.split(/\s+as\s+/).map((x) => x.trim());
+                if (/^[\w$]+$/.test(imported) && /^[\w$]+$/.test(local))
+                    add({ local, imported, specifier });
             }
         }
     }
-    return [...ids];
+    return imports;
 }

package/dist/vite.js

@@ -2,7 +2,7 @@ import { existsSync, globSync, mkdirSync, readFileSync, writeFileSync } from "no
 import { dirname, isAbsolute, relative, resolve } from "node:path";
 import { getIds } from "./ids.js";
 import { isLayoutEntry, layoutChain } from "./layouts.js";
-import { extractPageDataType } from "./page-data.js";
+import { extractPageDataType, qualifyImports } from "./page-data.js";
 import { ENTRY_PREFIX, ENTRY_RESOLVED_PREFIX, MANIFEST_ID, MANIFEST_RESOLVED, } from "./virtual.js";
 import { createFilter } from "vite";
 const DEFAULT_IGNORE = ["**/_*.svelte"];
@@ -47,7 +47,6 @@ export function pages(options = {}) {
     let vitePlugins = [];
     let viteMode = "";
     let lastWrittenDts = null;
-    const warnedDataImports = new Set();
     function computeLayouts(allFiles) {
         if (!layoutsEnabled)
             return [];
@@ -115,26 +114,11 @@ export function pages(options = {}) {
             // the page needs JS. Layout-wrapped static pages ship zero JS.
             const isStatic = !hasScript && !alwaysClient.has(entryName);
             // Per-page typed data: `export type Data` / `interface Data` in a
-            // <script module> feeds a typed overload in the generated dts. The
-            // declaration is inlined verbatim, so it must be self-contained — a
-            // type referencing imports can't be resolved from the dts location.
+            // <script module> feeds a typed overload in the generated dts. Types it
+            // imports are carried along as `import("…")` queries (see dataDeclaration).
             const extracted = extractPageDataType(source);
-            let dataType;
-            if (extracted.declaration) {
-                if (extracted.importedRefs.length > 0) {
-                    if (!warnedDataImports.has(entryName)) {
-                        warnedDataImports.add(entryName);
-                        console.warn(`[hono-svelte] page "${entryName}": the Data type references imported ` +
-                            `identifier(s) [${extracted.importedRefs.join(", ")}]. Per-page data typing ` +
-                            `needs a self-contained type (inline shapes or built-ins only) — this page ` +
-                            `keeps Record<string, unknown> data.`);
-                    }
-                }
-                else {
-                    dataType = extracted.declaration;
-                }
-            }
-            result.push({ entryName, file, absFile, isStatic, layouts, dataType });
+            const dataType = extracted.declaration ?? undefined;
+            result.push({ entryName, file, absFile, isStatic, layouts, dataType, dataImports: extracted.imports });
         }
         return result;
     }
@@ -160,7 +144,7 @@ export function pages(options = {}) {
     }
     function stateKey() {
         return listPages()
-            .map((p) => (p.isStatic ? "S:" : "C:") + p.entryName + (p.dataType ? "@" + p.dataType : ""))
+            .map((p) => (p.isStatic ? "S:" : "C:") + p.entryName + (p.dataType ? "@" + p.dataType + JSON.stringify(p.dataImports) : ""))
             .join("|");
     }
     function resolveDtsPath() {
@@ -170,6 +154,24 @@ export function pages(options = {}) {
         const rel = typeof options.dts === "string" ? options.dts : "src/hono-svelte-entries.d.ts";
         return isAbsolute(rel) ? rel : resolve(root, rel);
     }
+    /**
+     * The page's `Data` declaration, valid from the dts location: imported
+     * types become `import("…")` queries. Bare/alias specifiers (`$lib/db`,
+     * `some-package`) stay as written; relative ones are re-resolved from the
+     * page file to the dts file (or the Vite root when `dts` is off).
+     */
+    function dataDeclaration(page) {
+        const declaration = page.dataType;
+        if (page.dataImports.length === 0)
+            return declaration;
+        const fromDir = dirname(resolveDtsPath() ?? resolve(viteRoot ?? process.cwd(), "index.d.ts"));
+        return qualifyImports(declaration, page.dataImports, (specifier) => {
+            if (!specifier.startsWith("./") && !specifier.startsWith("../"))
+                return specifier;
+            const target = normalizeSlashes(relative(fromDir, resolve(dirname(page.absFile), specifier)));
+            return target.startsWith(".") ? target : "./" + target;
+        });
+    }
     function dataTypeNames() {
         const names = new Map();
         const used = new Set();
@@ -193,7 +195,7 @@ export function pages(options = {}) {
         const dataNames = dataTypeNames();
         const typed = listPages().filter((p) => p.dataType && dataNames.has(p.entryName));
         const declarationFor = (p) => {
-            const decl = p.dataType.replace("Data", dataNames.get(p.entryName));
+            const decl = dataDeclaration(p).replace("Data", dataNames.get(p.entryName));
             return decl.endsWith(";") ? decl : decl + ";";
         };
         return [
@@ -211,15 +213,18 @@ export function pages(options = {}) {
             `declare module "hono-svelte" {`,
             `  interface Register {`,
             `    entries: ${typeName};`,
+            `    typedEntries: ${typed.length > 0 ? typed.map((p) => JSON.stringify(p.entryName)).join(" | ") : "never"};`,
             `  }`,
             `}`,
             "",
             `declare module "hono" {`,
             `  interface ContextRenderer {`,
-            // Typed overloads come first, then the union catch-all: overload
-            // resolution tries them in order, entries without `Data` fall through.
+            // One typed overload per page with `Data`, then a catch-all for the
+            // other entries. The catch-all EXCLUDES the typed entries: otherwise a
+            // wrong `data` fails the typed overload and silently matches the
+            // catch-all (Record<string, unknown>), and nothing is checked.
             ...typed.map((p) => `    (entryName: ${JSON.stringify(p.entryName)}, props?: import("hono-svelte").RenderProps<${dataNames.get(p.entryName)}>): Response | Promise<Response>;`),
-            `    (entryName: ${typeName}, props?: import("hono-svelte").RenderProps): Response | Promise<Response>;`,
+            `    (entryName: ${typed.length > 0 ? `Exclude<${typeName}, ${typed.map((p) => JSON.stringify(p.entryName)).join(" | ")}>` : typeName}, props?: import("hono-svelte").RenderProps): Response | Promise<Response>;`,
             `  }`,
             `}`,
             "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-svelte",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Server-side shell + multi-entry Svelte pages for Hono apps",
   "keywords": [
     "hono",