create-theokit 1.9.0 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -90,7 +90,21 @@ The web `app/` is organized **type-based**, the layout most React apps grow into
|
|
|
90
90
|
| `hooks/` | custom hooks — where **state** lives | `use-transcript.ts` |
|
|
91
91
|
| `lib/` | app modules / config | `constants.ts` |
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
### Route files are not components
|
|
94
|
+
|
|
95
|
+
`page` · `layout` · `loading` · `error` · `not-found` are **route conventions**, not components. The
|
|
96
|
+
router binds them by **name + location**: matched by `^(page|layout|error|loading|not-found)\.(tsx|ts|jsx|js)$`
|
|
97
|
+
at a route segment (the `app/` root is the `/` route). `loading.tsx` becomes that route's Suspense
|
|
98
|
+
fallback, `error.tsx` its error boundary — *because they sit there, with that name*.
|
|
99
|
+
|
|
100
|
+
So `loading.tsx` looks like a component (it renders a spinner) but it is **not** one — move it into
|
|
101
|
+
`components/` and the router no longer finds it, and the route loses its loading UI. This is exactly the
|
|
102
|
+
Next.js App Router model TheoKit implements: the special files live at the route segment, and `components/`
|
|
103
|
+
/ `hooks/` / `lib/` sit alongside them. Having both at the `app/` root is the convention, not a mismatch.
|
|
104
|
+
(If a special file grows big, keep the thin route file and have it render a real component from
|
|
105
|
+
`components/` — e.g. `loading.tsx` → `<LoadingScreen/>`.)
|
|
106
|
+
|
|
107
|
+
Two rules make the rest work and keep it honest:
|
|
94
108
|
|
|
95
109
|
1. **State in a hook, view in components.** This is the pattern every serious chat frontend converges on
|
|
96
110
|
(Vercel `ai-chatbot`, the AI SDK docs). `page.tsx` is a thin composition root — it lays out `<ChatPanel>`
|