jskelet 0.1.1 → 0.1.2
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/AGENTS.md +5 -0
- package/CHANGELOG.md +63 -0
- package/README.md +21 -7
- package/bin/jskelet.mjs +6 -6
- package/docs/03-routing.md +48 -9
- package/docs/04-render-ve-sablonlar.md +2 -2
- package/docs/05-islands.md +59 -6
- package/docs/06-cache.md +39 -7
- package/docs/07-yapilandirma.md +51 -1
- package/docs/08-build.md +4 -4
- package/docs/09-dev-araclari.md +5 -0
- package/docs/12-panel-ve-oturum.md +384 -0
- package/docs/README.md +25 -2
- package/docs/en/01-getting-started.md +292 -0
- package/docs/en/02-architecture.md +305 -0
- package/docs/en/03-routing.md +493 -0
- package/docs/en/04-rendering.md +504 -0
- package/docs/en/05-islands.md +492 -0
- package/docs/en/06-caching.md +454 -0
- package/docs/en/07-configuration.md +736 -0
- package/docs/en/08-build.md +383 -0
- package/docs/en/09-dev-tools.md +314 -0
- package/docs/en/10-deployment.md +332 -0
- package/docs/en/11-migration.md +360 -0
- package/docs/en/12-dashboards-and-sessions.md +392 -0
- package/docs/en/README.md +112 -0
- package/package.json +4 -2
- package/src/build/build.mjs +1 -1
- package/src/build/tasks/client.mjs +2 -2
- package/src/build/tasks/fonts.mjs +3 -3
- package/src/build/tasks/icons.mjs +1 -1
- package/src/build/tasks/images.mjs +2 -2
- package/src/client/devtools/overlay.js +196 -164
- package/src/client/devtools/report.js +96 -96
- package/src/client/form.js +192 -0
- package/src/client/index.js +10 -1
- package/src/client/registry.js +78 -4
- package/src/client/swap.js +188 -0
- package/src/config/defaults.js +34 -0
- package/src/config/index.js +68 -13
- package/src/config/pattern.js +1 -1
- package/src/dev-server.mjs +1 -1
- package/src/http/control-flow.js +16 -1
- package/src/http/cookies.js +257 -0
- package/src/http/request-context.js +162 -0
- package/src/index.js +19 -2
- package/src/init.mjs +32 -31
- package/src/log.mjs +8 -2
- package/src/logo.png +0 -0
- package/src/runtime/alias-hooks.mjs +1 -1
- package/src/server/assets.js +1 -1
- package/src/server/create-app.js +12 -4
- package/src/server/dev/devtools.js +6 -2
- package/src/server/dev/version-check.mjs +139 -0
- package/src/server/head-hints.js +1 -1
- package/src/server/html-cache.js +10 -4
- package/src/server/middleware/csrf.js +134 -0
- package/src/server/prewarm.js +6 -6
- package/src/server/render.js +199 -16
- package/src/server/router.js +14 -7
- package/src/server/status-page.js +1 -1
- package/src/version.mjs +9 -4
- package/src/views/components/loader.js +1 -1
- package/src/views/helpers/tags.js +53 -1
|
@@ -0,0 +1,736 @@
|
|
|
1
|
+
# 07 — Configuration reference
|
|
2
|
+
|
|
3
|
+
This document is the complete reference for `jskelet.config.mjs`: every field,
|
|
4
|
+
its type, its default and an example. After that come the `source` pattern
|
|
5
|
+
syntax and a table of every environment variable the framework reads. Links to
|
|
6
|
+
the relevant documents are given for behavioural details of the fields; the goal
|
|
7
|
+
here is to present the full list at a glance.
|
|
8
|
+
|
|
9
|
+
## Where the file lives and how it is loaded
|
|
10
|
+
|
|
11
|
+
The config file is looked up in the project root under the name
|
|
12
|
+
`jskelet.config.mjs` and it is **not required**. If it is missing or cannot be
|
|
13
|
+
read, a warning is printed and the server comes up with defaults; a broken edit
|
|
14
|
+
should not make the site impossible to open.
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
// jskelet.config.mjs
|
|
18
|
+
export default {
|
|
19
|
+
// …
|
|
20
|
+
};
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
If there is no default export, the module itself is used as the config (named
|
|
24
|
+
exports).
|
|
25
|
+
|
|
26
|
+
The `headers()`, `redirects()`, `rewrites()` and `cache()` sections may be a
|
|
27
|
+
function **or a plain value**; when they are functions they may be `async`, and
|
|
28
|
+
`this` is bound to the config object. If a section throws, only that section is
|
|
29
|
+
ignored.
|
|
30
|
+
|
|
31
|
+
When the config loads successfully, a summary is printed:
|
|
32
|
+
`[config] jskelet.config.mjs loaded — 3 headers, 2 redirects, 1 cache rule`
|
|
33
|
+
|
|
34
|
+
## Full example
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
// jskelet.config.mjs
|
|
38
|
+
export default {
|
|
39
|
+
paths: {
|
|
40
|
+
views: "views",
|
|
41
|
+
public: "public",
|
|
42
|
+
client: "client",
|
|
43
|
+
routes: "routes",
|
|
44
|
+
styles: "styles/globals.css",
|
|
45
|
+
generated: ".jskelet",
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
brand: {
|
|
49
|
+
name: "Example",
|
|
50
|
+
poweredBy: "Example",
|
|
51
|
+
cacheHeader: "X-Example-Cache",
|
|
52
|
+
devBasePath: "/__example/dev",
|
|
53
|
+
prewarmUserAgent: "example-prewarm",
|
|
54
|
+
devTokenCookie: "dev_token",
|
|
55
|
+
lang: "tr",
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
layout: "views/layout.ejs",
|
|
59
|
+
routes: ["./routes/10-pages.mjs", "./routes/99-catch-all.mjs"],
|
|
60
|
+
|
|
61
|
+
static: {
|
|
62
|
+
extensions: [".svg", ".png", ".webp", ".avif", ".ico", ".woff2"],
|
|
63
|
+
prefixes: ["/assets/", "/fonts/"],
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
devGateBypass: ["/api/healthcheck", "/robots.txt"],
|
|
67
|
+
preconnect: ["https://cdn.example.com"],
|
|
68
|
+
|
|
69
|
+
security: {
|
|
70
|
+
trustProxy: true,
|
|
71
|
+
cookieSecret: process.env.JSKELET_SECRET,
|
|
72
|
+
csrf: {
|
|
73
|
+
enabled: true,
|
|
74
|
+
token: false,
|
|
75
|
+
allowedOrigins: [],
|
|
76
|
+
exclude: ["/webhook/:path*"],
|
|
77
|
+
cookieName: "csrf_token",
|
|
78
|
+
fieldName: "_csrf",
|
|
79
|
+
headerName: "x-csrf-token",
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
navigation: {
|
|
84
|
+
prefetch: "moderate",
|
|
85
|
+
prerender: "conservative",
|
|
86
|
+
viewTransition: true,
|
|
87
|
+
exclude: ["/logout"],
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
prewarmSkip: ["/api/", "/_fragment/", "/__example/"],
|
|
91
|
+
watch: ["data"],
|
|
92
|
+
|
|
93
|
+
fonts: [{ family: "Inter", weights: [400, 600, 700] }],
|
|
94
|
+
icons: { scan: ["views", "client", "routes", "lib"] },
|
|
95
|
+
images: { widths: [400, 800, 1200], quality: 78, skip: ["downloads"] },
|
|
96
|
+
clientEnv: ["PUBLIC_WS_URL"],
|
|
97
|
+
|
|
98
|
+
async headers() {
|
|
99
|
+
return [
|
|
100
|
+
{
|
|
101
|
+
source: "/:path*",
|
|
102
|
+
headers: [{ key: "X-Frame-Options", value: "SAMEORIGIN" }],
|
|
103
|
+
},
|
|
104
|
+
];
|
|
105
|
+
},
|
|
106
|
+
|
|
107
|
+
async redirects() {
|
|
108
|
+
return [{ source: "/eski/:slug", destination: "/yeni/:slug", permanent: true }];
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
async rewrites() {
|
|
112
|
+
return {
|
|
113
|
+
afterFiles: [
|
|
114
|
+
{ source: "/api/:path*", destination: "https://api.example.com/:path*" },
|
|
115
|
+
],
|
|
116
|
+
};
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
async cache() {
|
|
120
|
+
return {
|
|
121
|
+
html: { "/": 60, "/news/:slug": 300 },
|
|
122
|
+
prewarm: { enabled: true, max: 400, concurrency: 4, intervalSeconds: 0 },
|
|
123
|
+
};
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
hooks: {
|
|
127
|
+
metadata() { /* … */ },
|
|
128
|
+
layoutContext() { /* … */ },
|
|
129
|
+
notFound() { /* … */ },
|
|
130
|
+
error() { /* … */ },
|
|
131
|
+
prewarmPaths() { /* … */ },
|
|
132
|
+
},
|
|
133
|
+
};
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## `paths`
|
|
137
|
+
|
|
138
|
+
**Type:** `Record<string, string>` — **Default:** the table below
|
|
139
|
+
|
|
140
|
+
Names of the directories (and, for `styles`, the file) in the project root.
|
|
141
|
+
Values are resolved relative to the project root and turned into absolute paths
|
|
142
|
+
internally.
|
|
143
|
+
|
|
144
|
+
| Key | Default | Contents |
|
|
145
|
+
| --- | --- | --- |
|
|
146
|
+
| `views` | `"views"` | EJS layout, pages, components |
|
|
147
|
+
| `public` | `"public"` | Static files; the build output is written here too |
|
|
148
|
+
| `client` | `"client"` | Island runtime sources and entries |
|
|
149
|
+
| `routes` | `"routes"` | Route modules |
|
|
150
|
+
| `styles` | `"styles/globals.css"` | Tailwind/PostCSS entry **file** |
|
|
151
|
+
| `generated` | `".jskelet"` | `manifest.json`, `metafile.json`, `images.json` |
|
|
152
|
+
|
|
153
|
+
Even though `styles` is a file path it goes through the same resolution; keeping
|
|
154
|
+
a separate field for it is not worth it.
|
|
155
|
+
|
|
156
|
+
Two paths are always derived and cannot be overridden: `public/assets` (hashed
|
|
157
|
+
build output) and `public/fonts` (self-hosted fonts).
|
|
158
|
+
|
|
159
|
+
```js
|
|
160
|
+
paths: { views: "src/views", routes: "src/routes", styles: "src/styles/main.css" }
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## `brand`
|
|
164
|
+
|
|
165
|
+
**Type:** `object` — **Default:** the table below
|
|
166
|
+
|
|
167
|
+
Branding and names that can be changed from a single place. Projects that fork
|
|
168
|
+
the framework or white-label it can put their own name in. Provided fields are
|
|
169
|
+
shallow-merged with the defaults.
|
|
170
|
+
|
|
171
|
+
| Field | Type | Default | Meaning |
|
|
172
|
+
| --- | --- | --- | --- |
|
|
173
|
+
| `name` | `string` | `"JSkelet"` | Display name |
|
|
174
|
+
| `poweredBy` | `string` | `"JSkelet"` | Value of the `X-Powered-By` header |
|
|
175
|
+
| `cacheHeader` | `string` | `"X-JSkelet-Cache"` | HTML cache status header ([06-caching.md](./06-caching.md)) |
|
|
176
|
+
| `devBasePath` | `string` | `"/__jskelet/dev"` | Root of the dev overlay and report endpoints |
|
|
177
|
+
| `prewarmUserAgent` | `string` | `"jskelet-prewarm"` | UA of prewarm requests; the dev panel filters on it |
|
|
178
|
+
| `devTokenCookie` | `string` | `"dev_token"` | Name of the dev gate's cookie and query parameter |
|
|
179
|
+
| `lang` | `string` | — | Default for `<html lang>`. If not given, the layout uses `"en"`. |
|
|
180
|
+
|
|
181
|
+
Precedence for `lang`: `hooks.layoutContext()` → `lang` **>** `brand.lang`
|
|
182
|
+
**>** `"en"`.
|
|
183
|
+
|
|
184
|
+
```js
|
|
185
|
+
brand: { lang: "tr", poweredBy: "Example", cacheHeader: "X-Example-Cache" }
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## `layout`
|
|
189
|
+
|
|
190
|
+
**Type:** `string` — **Default:** none (automatic resolution)
|
|
191
|
+
|
|
192
|
+
Path of the layout `.ejs` file. The value given is resolved relative to the
|
|
193
|
+
**parent directory of the views directory**, so with the default `views`,
|
|
194
|
+
`"views/custom.ejs"` → `<root>/views/custom.ejs`.
|
|
195
|
+
|
|
196
|
+
If not given, in order: `views/layout.ejs` if it exists, otherwise the
|
|
197
|
+
framework's minimal layout. Details: [04-rendering.md](./04-rendering.md).
|
|
198
|
+
|
|
199
|
+
## `routes`
|
|
200
|
+
|
|
201
|
+
**Type:** `string[]` — **Default:** `null` (directory scan)
|
|
202
|
+
|
|
203
|
+
Explicit list of route modules, relative to the project root. They are loaded in
|
|
204
|
+
the given order. If not given, the `paths.routes` directory is scanned
|
|
205
|
+
alphabetically and recursively. Details: [03-routing.md](./03-routing.md).
|
|
206
|
+
|
|
207
|
+
```js
|
|
208
|
+
routes: ["./routes/api.js", "./routes/pages.js", "./routes/catch-all.js"]
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## `static`
|
|
212
|
+
|
|
213
|
+
**Type:** `{ extensions?: string[], prefixes?: string[] }` — **Default:**
|
|
214
|
+
below
|
|
215
|
+
|
|
216
|
+
Static file detection by extension and prefix. Paths matching this list get
|
|
217
|
+
`Cache-Control: public, max-age=31536000, immutable`.
|
|
218
|
+
|
|
219
|
+
| Field | Default |
|
|
220
|
+
| --- | --- |
|
|
221
|
+
| `extensions` | `[".svg", ".png", ".webp", ".avif", ".ico", ".woff2"]` |
|
|
222
|
+
| `prefixes` | `["/assets/", "/fonts/"]` |
|
|
223
|
+
|
|
224
|
+
If provided, it **replaces** the default (it is not merged), so if you want to
|
|
225
|
+
add to the default, write out the full list.
|
|
226
|
+
|
|
227
|
+
```js
|
|
228
|
+
static: {
|
|
229
|
+
extensions: [".svg", ".png", ".webp", ".avif", ".ico", ".woff2", ".mp4"],
|
|
230
|
+
prefixes: ["/assets/", "/fonts/", "/video/"],
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## `devGateBypass`
|
|
235
|
+
|
|
236
|
+
**Type:** `string[]` — **Default:**
|
|
237
|
+
`["/api/healthcheck", "/robots.txt", "/sitemap.xml", "/site.webmanifest", "/favicon.ico"]`
|
|
238
|
+
|
|
239
|
+
**Exact** paths the dev gate never closes off under any circumstances (not a
|
|
240
|
+
prefix, an exact match). This is so that the health check and the robots files
|
|
241
|
+
stay reachable in an environment where `DEV_TOKEN` is set. If provided, it
|
|
242
|
+
replaces the default.
|
|
243
|
+
|
|
244
|
+
Details: [09-dev-tools.md](./09-dev-tools.md).
|
|
245
|
+
|
|
246
|
+
## `preconnect`
|
|
247
|
+
|
|
248
|
+
**Type:** `string[]` — **Default:** `[]`
|
|
249
|
+
|
|
250
|
+
Third-party origins; printed as `<link rel="preconnect">` in the `<head>` of
|
|
251
|
+
every page. The image CDN, the API origin, the font host go here. Values are
|
|
252
|
+
normalised with `new URL(...).origin`; an invalid URL is skipped and a warning
|
|
253
|
+
is printed.
|
|
254
|
+
|
|
255
|
+
Since the list is the same on every page, it is computed once and stored. An
|
|
256
|
+
empty list is a valid configuration.
|
|
257
|
+
|
|
258
|
+
```js
|
|
259
|
+
preconnect: ["https://cdn.example.com", "https://api.example.com"]
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
## `security`
|
|
263
|
+
|
|
264
|
+
**Type:** `object` — **Default:**
|
|
265
|
+
`{ trustProxy: true, cookieSecret: null, csrf: { enabled: true, token: false, … } }`
|
|
266
|
+
|
|
267
|
+
The whole picture for per-visitor pages, with the reasoning, is in
|
|
268
|
+
[12-dashboards-and-sessions.md](./12-dashboards-and-sessions.md); this is the
|
|
269
|
+
field reference.
|
|
270
|
+
|
|
271
|
+
| Field | Type | Default | Meaning |
|
|
272
|
+
| --- | --- | --- | --- |
|
|
273
|
+
| `trustProxy` | `boolean` | `true` | Express's `trust proxy` setting. Needed behind a reverse proxy for the correct protocol and client IP. |
|
|
274
|
+
| `cookieSecret` | `string \| null` | `null` | The signed cookie secret. When absent, `JSKELET_SECRET` is read. |
|
|
275
|
+
| `csrf.enabled` | `boolean` | `true` | The origin / `Sec-Fetch-Site` check. |
|
|
276
|
+
| `csrf.token` | `boolean` | `false` | The double-submit token layer. |
|
|
277
|
+
| `csrf.allowedOrigins` | `string[]` | `[]` | Origins accepted alongside our own host. |
|
|
278
|
+
| `csrf.exclude` | `string[]` | `[]` | Paths exempt from the check; `source` pattern syntax. |
|
|
279
|
+
| `csrf.cookieName` | `string` | `"csrf_token"` | Name of the token cookie. |
|
|
280
|
+
| `csrf.fieldName` | `string` | `"_csrf"` | Field name printed by `csrfField()`. |
|
|
281
|
+
| `csrf.headerName` | `string` | `"x-csrf-token"` | Header the token is also accepted in. |
|
|
282
|
+
|
|
283
|
+
`trustProxy` should be **turned off** on a server exposed directly to the
|
|
284
|
+
internet: while it is on, a client can forge its own `X-Forwarded-For` and rate
|
|
285
|
+
limiting or audit logs see the wrong address.
|
|
286
|
+
|
|
287
|
+
The CSRF check only rejects requests that are **known** to be cross-site — when
|
|
288
|
+
`Origin` does not match or `Sec-Fetch-Site: cross-site` arrives. If neither is
|
|
289
|
+
present the request passes, because browsers always send `Origin` on a
|
|
290
|
+
cross-origin POST while webhooks never do. Even so, listing non-browser
|
|
291
|
+
endpoints in `csrf.exclude` makes the intent readable.
|
|
292
|
+
|
|
293
|
+
## `navigation`
|
|
294
|
+
|
|
295
|
+
**Type:** `object` — **Default:**
|
|
296
|
+
`{ prefetch: "moderate", prerender: false, viewTransition: false, exclude: [] }`
|
|
297
|
+
|
|
298
|
+
`<head>` hints that speed up in-site navigation. Since JSkelet is a classic MPA,
|
|
299
|
+
every click is a full page load; this section makes the browser do that load
|
|
300
|
+
**ahead of time**. No client runtime is added — Speculation Rules and view
|
|
301
|
+
transitions are browser capabilities, and in a browser that does not support
|
|
302
|
+
them they are silently ignored.
|
|
303
|
+
|
|
304
|
+
| Field | Type | Default | Meaning |
|
|
305
|
+
| --- | --- | --- | --- |
|
|
306
|
+
| `prefetch` | `false \| "conservative" \| "moderate" \| "eager"` | `"moderate"` | Downloads the link target's **document** ahead of time |
|
|
307
|
+
| `prerender` | same | `false` | **Fully renders** the target in the background; it opens the moment you click |
|
|
308
|
+
| `viewTransition` | `boolean` | `false` | Emits `@view-transition { navigation: auto }` |
|
|
309
|
+
| `exclude` | `string[]` | `[]` | href patterns to keep out of speculation |
|
|
310
|
+
|
|
311
|
+
If `true` is given, `prefetch`/`prerender` fall back to the default eagerness; an
|
|
312
|
+
unrecognised value prints a warning and reverts to the default.
|
|
313
|
+
|
|
314
|
+
**What eagerness means:** `conservative` triggers the moment the link is pressed,
|
|
315
|
+
`moderate` when the pointer lingers on the link for a while, `eager` as soon as
|
|
316
|
+
the link becomes visible. The further up you go, the higher the hit rate — and
|
|
317
|
+
the more wasted requests.
|
|
318
|
+
|
|
319
|
+
**Why `prerender` ships off.** The scripts of a prerendered page really do run.
|
|
320
|
+
In an application that does not hook its measurement code to the
|
|
321
|
+
`prerenderingchange` event, visit counts get inflated. Review your analytics
|
|
322
|
+
before turning it on; the cost on the server side is low, because a speculative
|
|
323
|
+
request is also served from the HTML cache
|
|
324
|
+
([06-caching.md](./06-caching.md)).
|
|
325
|
+
|
|
326
|
+
**Always exempt.** Paths under `/api/*`, `/_fragment/*` and `brand.devBasePath`
|
|
327
|
+
are excluded automatically; `exclude` is added on top of those. Additionally,
|
|
328
|
+
links carrying `rel="nofollow"`, `target="_blank"` or `data-no-prefetch` are not
|
|
329
|
+
covered by any rule. The easiest way to keep a single link with side effects out
|
|
330
|
+
is the last one:
|
|
331
|
+
|
|
332
|
+
```html
|
|
333
|
+
<a href="/logout" data-no-prefetch>Logout</a>
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
**When turning on `viewTransition`, put the background on `<html>`.** During the
|
|
337
|
+
transition the browser cross-fades snapshots of the old and the new page; a
|
|
338
|
+
background set on `<body>` stays inside that snapshot and the canvas underneath
|
|
339
|
+
becomes visible. The result is one frame of white flash on every transition, and
|
|
340
|
+
it does not go unnoticed in a dark theme. If the colour is on `<html>` (or
|
|
341
|
+
`:root`), no such gap appears:
|
|
342
|
+
|
|
343
|
+
```html
|
|
344
|
+
<html lang="tr" class="bg-white dark:bg-slate-950">
|
|
345
|
+
<body class="text-slate-900 dark:text-slate-100">
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
The reduced-motion preference is handled by the framework: under
|
|
349
|
+
`prefers-reduced-motion: reduce` the transition is disabled, and you do not need
|
|
350
|
+
to write anything extra.
|
|
351
|
+
|
|
352
|
+
**Scope the transition to the content.** The default behaviour cross-fades the
|
|
353
|
+
whole document as a single piece, which means the header and footer — which
|
|
354
|
+
never change across navigations — flicker too. Giving those regions a
|
|
355
|
+
`view-transition-name` puts them in their own group; because the browser sees the
|
|
356
|
+
same name in both documents, it treats them as "the same element". Once you turn
|
|
357
|
+
off the animation of the named element, the transition stays in the content
|
|
358
|
+
only:
|
|
359
|
+
|
|
360
|
+
```css
|
|
361
|
+
body > header { view-transition-name: site-header; }
|
|
362
|
+
body > footer { view-transition-name: site-footer; }
|
|
363
|
+
|
|
364
|
+
::view-transition-old(site-header),
|
|
365
|
+
::view-transition-old(site-footer) { animation: none; opacity: 0; }
|
|
366
|
+
::view-transition-new(site-header),
|
|
367
|
+
::view-transition-new(site-footer) { animation: none; opacity: 1; }
|
|
368
|
+
|
|
369
|
+
/* The remaining content; the default 250ms makes navigation feel slow. */
|
|
370
|
+
::view-transition-old(root),
|
|
371
|
+
::view-transition-new(root) { animation-duration: 180ms; }
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
A working version lives in `examples/marketing/styles/globals.css`.
|
|
375
|
+
|
|
376
|
+
**If you use CSP**, the rules are emitted as an inline
|
|
377
|
+
`<script type="speculationrules">`; your `script-src` policy needs to allow it.
|
|
378
|
+
|
|
379
|
+
```js
|
|
380
|
+
navigation: {
|
|
381
|
+
prefetch: "moderate",
|
|
382
|
+
prerender: "conservative",
|
|
383
|
+
viewTransition: true,
|
|
384
|
+
exclude: ["/logout", "/cart/*"],
|
|
385
|
+
}
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
## `prewarmSkip`
|
|
389
|
+
|
|
390
|
+
**Type:** `string[]` — **Default:** `["/api/", "/_fragment/", "/__jskelet/"]`
|
|
391
|
+
|
|
392
|
+
Path **prefixes** that prewarming skips. Session-dependent or fragment endpoints
|
|
393
|
+
should not be prewarmed. If provided, it replaces the default — if you changed
|
|
394
|
+
`brand.devBasePath`, do not forget to update this list too.
|
|
395
|
+
|
|
396
|
+
Details: [06-caching.md](./06-caching.md).
|
|
397
|
+
|
|
398
|
+
## `watch`
|
|
399
|
+
|
|
400
|
+
**Type:** `string[]` — **Default:** `[]`
|
|
401
|
+
|
|
402
|
+
**Additional** directories that `jskelet dev` watches for server restarts,
|
|
403
|
+
relative to the project root. `routes`, `views` and `lib` are already watched;
|
|
404
|
+
`client/` and `styles/` are handled by the esbuild and CSS watchers and should
|
|
405
|
+
not be put here.
|
|
406
|
+
|
|
407
|
+
Only files with the `.js`, `.mjs`, `.json` and `.ejs` extensions are triggers.
|
|
408
|
+
|
|
409
|
+
```js
|
|
410
|
+
watch: ["data", "content"]
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
Details: [09-dev-tools.md](./09-dev-tools.md).
|
|
414
|
+
|
|
415
|
+
## `fonts`
|
|
416
|
+
|
|
417
|
+
**Type:** `{ family: string, slug?: string, weights?: number[] }[]` —
|
|
418
|
+
**Default:** `[]`
|
|
419
|
+
|
|
420
|
+
Google Fonts families to self-host. If left empty, the font step never runs.
|
|
421
|
+
|
|
422
|
+
| Field | Type | Default | Meaning |
|
|
423
|
+
| --- | --- | --- | --- |
|
|
424
|
+
| `family` | `string` | — | Google Fonts family name: `"Inter"`, `"Noto Sans"` |
|
|
425
|
+
| `slug` | `string` | derived from `family` (lower case, space → `-`) | File name prefix |
|
|
426
|
+
| `weights` | `number[]` | `[400]` | Weights to download |
|
|
427
|
+
|
|
428
|
+
Output: `public/fonts/<slug>-<weight>.woff2`, with the same file name as the
|
|
429
|
+
manifest key. The files have **fixed names** (no hash) and are **expected to be
|
|
430
|
+
committed**. Details: [08-build.md](./08-build.md).
|
|
431
|
+
|
|
432
|
+
```js
|
|
433
|
+
fonts: [
|
|
434
|
+
{ family: "Inter", weights: [400, 600, 700] },
|
|
435
|
+
{ family: "Noto Serif", slug: "serif", weights: [400] },
|
|
436
|
+
]
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
## `icons`
|
|
440
|
+
|
|
441
|
+
**Type:** `{ scan?: string[] } | false` — **Default:** `{}`
|
|
442
|
+
|
|
443
|
+
Phosphor SVG sprite generation.
|
|
444
|
+
|
|
445
|
+
| Value | Result |
|
|
446
|
+
| --- | --- |
|
|
447
|
+
| `{}` (default) | The sprite is generated; scanned directories are `["views", "client", "routes", "lib"]` |
|
|
448
|
+
| `{ scan: [...] }` | Changes the scanned directories |
|
|
449
|
+
| `false` | The sprite step is skipped entirely |
|
|
450
|
+
|
|
451
|
+
If `@phosphor-icons/core` is not in the application's `node_modules`, the step is
|
|
452
|
+
silently skipped. Details: [08-build.md](./08-build.md).
|
|
453
|
+
|
|
454
|
+
```js
|
|
455
|
+
icons: { scan: ["views", "client", "routes", "lib", "content"] }
|
|
456
|
+
```
|
|
457
|
+
|
|
458
|
+
## `images`
|
|
459
|
+
|
|
460
|
+
**Type:** `{ widths?: number[], quality?: number, skip?: string[] } | false` —
|
|
461
|
+
**Default:** `{}`
|
|
462
|
+
|
|
463
|
+
Generates webp variants of the png/jpg images under `public/`.
|
|
464
|
+
|
|
465
|
+
| Field | Type | Default | Meaning |
|
|
466
|
+
| --- | --- | --- | --- |
|
|
467
|
+
| `widths` | `number[]` | `[400, 640, 960, 1280, 1920]` | Widths to generate. Ones larger than the source are dropped; the source's own width (at most 1920) is always added. |
|
|
468
|
+
| `quality` | `number` | `78` | webp quality. When it changes, the encoder signature changes and every image is re-encoded. |
|
|
469
|
+
| `skip` | `string[]` | `[]` | **Directory names** not to scan. `assets` and `fonts` are always skipped. |
|
|
470
|
+
|
|
471
|
+
If `false` is given, the image step never runs. The step requires `sharp` and
|
|
472
|
+
never runs on a watch pass. Details: [08-build.md](./08-build.md).
|
|
473
|
+
|
|
474
|
+
```js
|
|
475
|
+
images: { widths: [400, 800, 1200], quality: 82, skip: ["downloads"] }
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
## `clientEnv`
|
|
479
|
+
|
|
480
|
+
**Type:** `string[]` — **Default:** `[]`
|
|
481
|
+
|
|
482
|
+
Environment variable keys to inline into the client bundle at build time. The
|
|
483
|
+
same contract as `NEXT_PUBLIC_*` in Next, except which key is public is decided
|
|
484
|
+
by the config rather than by the name. `NODE_ENV` is always inlined.
|
|
485
|
+
|
|
486
|
+
Because the whole of `process.env` is defined as a single object, reading a key
|
|
487
|
+
that is not in the list returns `undefined` instead of crashing.
|
|
488
|
+
|
|
489
|
+
```js
|
|
490
|
+
clientEnv: ["PUBLIC_WS_URL", "PUBLIC_CDN_ORIGIN"]
|
|
491
|
+
```
|
|
492
|
+
|
|
493
|
+
**Do not put secrets here** — the values sit in the bundle in plain text.
|
|
494
|
+
|
|
495
|
+
## `headers()`
|
|
496
|
+
|
|
497
|
+
**Type:** `() => { source: string, headers: { key: string, value: string }[] }[]`
|
|
498
|
+
— **Default:** `[]`
|
|
499
|
+
|
|
500
|
+
Response headers by path pattern. The framework only writes long-lived cache
|
|
501
|
+
headers for static files; every other header (CSP, COOP, HSTS,
|
|
502
|
+
X-Frame-Options…) comes from here and takes precedence over the defaults.
|
|
503
|
+
|
|
504
|
+
**All** matching rules are applied (unlike redirects, it does not stop at the
|
|
505
|
+
first match), in order; if two rules write the same header, the later one wins.
|
|
506
|
+
|
|
507
|
+
Entries without a `key` or with an `undefined` `value` are skipped; a rule left
|
|
508
|
+
with no valid headers at all is not added.
|
|
509
|
+
|
|
510
|
+
```js
|
|
511
|
+
async headers() {
|
|
512
|
+
return [
|
|
513
|
+
{
|
|
514
|
+
source: "/:path*",
|
|
515
|
+
headers: [
|
|
516
|
+
{ key: "X-Frame-Options", value: "SAMEORIGIN" },
|
|
517
|
+
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
|
|
518
|
+
{
|
|
519
|
+
key: "Content-Security-Policy",
|
|
520
|
+
value: "default-src 'self'; img-src 'self' https://cdn.example.com data:",
|
|
521
|
+
},
|
|
522
|
+
],
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
source: "/download/:path*",
|
|
526
|
+
headers: [{ key: "Cache-Control", value: "no-store" }],
|
|
527
|
+
},
|
|
528
|
+
];
|
|
529
|
+
}
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
## `redirects()`
|
|
533
|
+
|
|
534
|
+
**Type:**
|
|
535
|
+
`() => { source: string, destination: string, permanent?: boolean, statusCode?: number }[]`
|
|
536
|
+
— **Default:** `[]`
|
|
537
|
+
|
|
538
|
+
| Field | Type | Meaning |
|
|
539
|
+
| --- | --- | --- |
|
|
540
|
+
| `source` | `string` | Pattern (syntax below) |
|
|
541
|
+
| `destination` | `string` | Target; `:param` placeholders are filled in |
|
|
542
|
+
| `permanent` | `boolean` | `true` → 308, otherwise 307 |
|
|
543
|
+
| `statusCode` | `number` | Explicit status code; overrides `permanent` |
|
|
544
|
+
|
|
545
|
+
The first matching rule wins and the query string is preserved. Details:
|
|
546
|
+
[03-routing.md](./03-routing.md).
|
|
547
|
+
|
|
548
|
+
## `rewrites()`
|
|
549
|
+
|
|
550
|
+
**Type:** `() => Rule[] | { beforeFiles?: Rule[], afterFiles?: Rule[] }`
|
|
551
|
+
where `Rule = { source: string, destination: string }` — **Default:** `[]`
|
|
552
|
+
|
|
553
|
+
If an array is returned, all of it counts as `afterFiles`.
|
|
554
|
+
|
|
555
|
+
- `beforeFiles` runs even before static files.
|
|
556
|
+
- `afterFiles` runs after static has been tried, before the routes.
|
|
557
|
+
- Absolute target (`http://`/`https://`) → built-in reverse proxy.
|
|
558
|
+
- Relative target → only `req.url` changes.
|
|
559
|
+
|
|
560
|
+
Details: [03-routing.md](./03-routing.md).
|
|
561
|
+
|
|
562
|
+
## `cache()`
|
|
563
|
+
|
|
564
|
+
**Type:** `() => { html?: Record<string, number>, prewarm?: object }` —
|
|
565
|
+
**Default:** `{ html: {}, prewarm: { enabled: true, max: 400, intervalSeconds: 0 } }`
|
|
566
|
+
|
|
567
|
+
### `cache().html`
|
|
568
|
+
|
|
569
|
+
A pattern → seconds mapping. A matching rule **overrides** the route's own
|
|
570
|
+
`revalidate` value. Negative or non-finite values are ignored; `0` means "no
|
|
571
|
+
caching".
|
|
572
|
+
|
|
573
|
+
The one exception is `route(fn, { private: true })`: on that route a matching
|
|
574
|
+
pattern is ignored. The lock is deliberately one-way — a mistake in the other
|
|
575
|
+
direction means one user's HTML is served to another.
|
|
576
|
+
|
|
577
|
+
```js
|
|
578
|
+
html: {
|
|
579
|
+
"/": 60,
|
|
580
|
+
"/news/:slug": 300,
|
|
581
|
+
"/search": 0,
|
|
582
|
+
}
|
|
583
|
+
```
|
|
584
|
+
|
|
585
|
+
### `cache().prewarm`
|
|
586
|
+
|
|
587
|
+
| Field | Type | Default | Meaning |
|
|
588
|
+
| --- | --- | --- | --- |
|
|
589
|
+
| `enabled` | `boolean` | `true` | If `false`, no prewarming happens (can be overridden with `PREWARM=1`) |
|
|
590
|
+
| `max` | `number` | `400` | At most how many paths are prewarmed |
|
|
591
|
+
| `concurrency` | `number` | prod 4, dev 2 | Number of parallel workers |
|
|
592
|
+
| `delayMs` | `number` | prod 500, dev 3000 | Delay of the first pass after startup |
|
|
593
|
+
| `intervalSeconds` | `number` | `0` | If greater than 0, the pass repeats periodically |
|
|
594
|
+
|
|
595
|
+
Each one can be overridden by an environment variable of the same name; env
|
|
596
|
+
takes precedence. Details: [06-caching.md](./06-caching.md).
|
|
597
|
+
|
|
598
|
+
## `hooks`
|
|
599
|
+
|
|
600
|
+
**Type:** `Record<string, Function>` — **Default:** `{}`
|
|
601
|
+
|
|
602
|
+
All optional, all may be `async`. If a hook throws, the framework falls back to
|
|
603
|
+
its own default and warns — the page does not go down.
|
|
604
|
+
|
|
605
|
+
| Hook | Signature | What it returns | Document |
|
|
606
|
+
| --- | --- | --- | --- |
|
|
607
|
+
| `metadata` | `(page) => object` | Metadata default for every page; the controller's `metadata` is layered on top | [04](./04-rendering.md) |
|
|
608
|
+
| `layoutContext` | `({ pathname, metadata }) => object` | Layout locals; `lang`, `structuredData`, `extraHead` and `bodyClass` get special treatment | [04](./04-rendering.md) |
|
|
609
|
+
| `notFound` | `() => object \| null` | 404 page definition; if `null`, the framework's error page | [03](./03-routing.md) |
|
|
610
|
+
| `error` | `({ status, error }) => object \| string \| null` | Error pages other than 404 (and 404 when there is no `notFound`); a page definition or HTML directly | [03](./03-routing.md) |
|
|
611
|
+
| `prewarmPaths` | `() => string[]` | Paths to prewarm; if it is not defined, prewarming is never set up | [06](./06-caching.md) |
|
|
612
|
+
|
|
613
|
+
```js
|
|
614
|
+
hooks: {
|
|
615
|
+
metadata() {
|
|
616
|
+
return { titleTemplate: "%s | Example", siteUrl: "https://example.com" };
|
|
617
|
+
},
|
|
618
|
+
|
|
619
|
+
async layoutContext({ pathname }) {
|
|
620
|
+
return { navigation: await getNavigation(), isHome: pathname === "/" };
|
|
621
|
+
},
|
|
622
|
+
|
|
623
|
+
notFound() {
|
|
624
|
+
return {
|
|
625
|
+
view: "pages/not-found",
|
|
626
|
+
metadata: { title: "Page not found", robots: { index: false } },
|
|
627
|
+
};
|
|
628
|
+
},
|
|
629
|
+
|
|
630
|
+
error({ status }) {
|
|
631
|
+
return {
|
|
632
|
+
view: "pages/error",
|
|
633
|
+
data: { status },
|
|
634
|
+
metadata: { title: "Something went wrong", robots: { index: false } },
|
|
635
|
+
};
|
|
636
|
+
},
|
|
637
|
+
|
|
638
|
+
async prewarmPaths() {
|
|
639
|
+
return ["/", ...(await getArticlePaths())];
|
|
640
|
+
},
|
|
641
|
+
}
|
|
642
|
+
```
|
|
643
|
+
|
|
644
|
+
## `source` pattern syntax
|
|
645
|
+
|
|
646
|
+
`headers()`, `redirects()`, `rewrites()` and `cache().html` all use the same
|
|
647
|
+
small compiler. This is not Next's full `path-to-regexp` surface; the subset
|
|
648
|
+
actually used in configuration was chosen deliberately, and an unrecognised
|
|
649
|
+
syntax is not silently accepted as a literal — it produces a warning.
|
|
650
|
+
|
|
651
|
+
| Pattern | Regex equivalent | Example match |
|
|
652
|
+
| --- | --- | --- |
|
|
653
|
+
| `/about` | exact match | `/about` |
|
|
654
|
+
| `/news/:slug` | `([^/]+)` — a single segment | `/news/abc` (✗ `/news/a/b`) |
|
|
655
|
+
| `/:path*` | `(.*)` — zero or more segments | `/`, `/a`, `/a/b/c` |
|
|
656
|
+
| `/blog/:path*` | wildcard sub-path; the leading `/` is optional | `/blog`, `/blog/`, `/blog/a/b` |
|
|
657
|
+
| `/:path*.svg` | wildcard + fixed suffix | `/ikon.svg`, `/a/b/c.svg` |
|
|
658
|
+
| `/tag-:slug` | a parameter in the middle of a segment | `/tag-finance` |
|
|
659
|
+
|
|
660
|
+
Rules:
|
|
661
|
+
|
|
662
|
+
- `source` **must start with `/`**; if it does not, the rule is ignored and a
|
|
663
|
+
warning is printed.
|
|
664
|
+
- The parameter name must match the pattern `[A-Za-z_][A-Za-z0-9_]*`.
|
|
665
|
+
- A pattern always matches **from start to end** (`^…$`); use `:path*` for
|
|
666
|
+
prefix matching.
|
|
667
|
+
- `:path*` also captures zero segments and the `/` immediately before it is
|
|
668
|
+
optional: `/account/:path*` covers the section's root path (`/account`) too.
|
|
669
|
+
Otherwise a rule that wanted to close off a whole section was skipping
|
|
670
|
+
precisely its landing page.
|
|
671
|
+
- Every character other than parameters is treated as a literal and escaped for
|
|
672
|
+
the regex — `.` really means a dot.
|
|
673
|
+
- Captured values are written into the same-named `:param`s in `destination`. A
|
|
674
|
+
placeholder with no counterpart is left as is.
|
|
675
|
+
|
|
676
|
+
## Environment variables
|
|
677
|
+
|
|
678
|
+
Every variable the framework reads. If a `.env` file exists it is loaded
|
|
679
|
+
automatically by the CLI (`--env-file=.env`); if not, the flag is never passed
|
|
680
|
+
and no warning is printed.
|
|
681
|
+
|
|
682
|
+
| Variable | Who reads it | Default | Meaning |
|
|
683
|
+
| --- | --- | --- | --- |
|
|
684
|
+
| `NODE_ENV` | everywhere | `production` (start/build), `development` (dev) | Determines the dev overlay, EJS cache, manifest re-reading, route error behaviour and prewarm defaults. `jskelet dev` sets it itself — `cross-env` is not needed. |
|
|
685
|
+
| `PORT` | `startServer` | `3000` | Port to listen on |
|
|
686
|
+
| `HOST` | `startServer` | `0.0.0.0` | Interface to bind to |
|
|
687
|
+
| `JSKELET_SECRET` | `jskelet/cookies` | — | The signed cookie secret. Read when `security.cookieSecret` is not set; if neither exists, the signed cookie API throws. [12](./12-dashboards-and-sessions.md) |
|
|
688
|
+
| `DEV_TOKEN` | `devGate`, `prewarm` | — | If set, every request without a token gets a 404. Prewarming carries the token as a cookie. [09](./09-dev-tools.md) |
|
|
689
|
+
| `PREWARM` | `startPrewarm` | — | `0` turns prewarming off; `1` overrides `enabled: false` in the config and turns it on |
|
|
690
|
+
| `PREWARM_MAX` | `prewarm` | `400` | At most how many paths are prewarmed |
|
|
691
|
+
| `PREWARM_CONCURRENCY` | `prewarm` | prod 4, dev 2 | Number of parallel workers |
|
|
692
|
+
| `PREWARM_DELAY_MS` | `startPrewarm` | prod 500, dev 3000 | Delay of the first pass |
|
|
693
|
+
| `PREWARM_INTERVAL_SECONDS` | `startPrewarm` | `0` | If greater than 0, a periodic pass |
|
|
694
|
+
| `JSKELET_VERBOSE` | `jskelet dev` | — | If `1`, all of the changed files are listed on restart |
|
|
695
|
+
| `JSKELET_COLOR` | `jskelet/log` | — | If `1`, colour is forced. Because child processes write to a pipe, colour detection turns off; `jskelet dev` sets this itself. |
|
|
696
|
+
| `JSKELET_CHILD` | `jskelet build` | — | Set by the dev script; suppresses the build banner and the "Ready" summary |
|
|
697
|
+
| `NO_COLOR` | `jskelet/log` | — | If set, colour is never used (it overrides `JSKELET_COLOR` too) |
|
|
698
|
+
|
|
699
|
+
Your application's own variables (API origin, tokens) are not read by the
|
|
700
|
+
framework; use them directly via `process.env`. Declare the ones that need to
|
|
701
|
+
reach the browser with `clientEnv`.
|
|
702
|
+
|
|
703
|
+
The numeric prewarm settings only accept **positive and finite** values; an
|
|
704
|
+
invalid value silently falls through to the next layer (config → code default).
|
|
705
|
+
|
|
706
|
+
## Programmatic access
|
|
707
|
+
|
|
708
|
+
```js
|
|
709
|
+
import { getConfig, loadConfig } from "jskelet";
|
|
710
|
+
|
|
711
|
+
await loadConfig(); // reads from the project root
|
|
712
|
+
await loadConfig({ root: "/baska/proje" }); // a different root
|
|
713
|
+
await loadConfig({ configFile: "jskelet.test.mjs" });
|
|
714
|
+
await loadConfig({ force: true }); // bypass the cache and re-read
|
|
715
|
+
|
|
716
|
+
const config = getConfig(); // the resolved config
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
`loadConfig()` hits the cache on a second call in the same process: `jskelet
|
|
720
|
+
start` calls it through both `ensure-build` and `createApp`, and there is no
|
|
721
|
+
benefit in reading and logging the config twice.
|
|
722
|
+
|
|
723
|
+
If `getConfig()` is used without `loadConfig()` having been called, it
|
|
724
|
+
**throws**: a silently wrong path turns into problems that are hard to diagnose,
|
|
725
|
+
like "why is there no stylesheet".
|
|
726
|
+
|
|
727
|
+
In the resolved config the directories are available as absolute paths under
|
|
728
|
+
`config.dirs` (`views`, `public`, `client`, `routes`, `styles`, `generated`,
|
|
729
|
+
`assets`, `fonts`), the patterns are in compiled form, and `config.loaded` tells
|
|
730
|
+
you whether the file was actually read.
|
|
731
|
+
|
|
732
|
+
## What's next
|
|
733
|
+
|
|
734
|
+
- The effect of the build-side fields: [08-build.md](./08-build.md)
|
|
735
|
+
- The dev flow and `DEV_TOKEN`: [09-dev-tools.md](./09-dev-tools.md)
|
|
736
|
+
- Using environment variables in deployment: [10-deployment.md](./10-deployment.md)
|