jskelet 0.2.3 → 0.2.5

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.
Files changed (91) hide show
  1. package/AGENTS.md +132 -132
  2. package/CHANGELOG.md +15 -0
  3. package/LICENSE +21 -21
  4. package/bin/jskelet.mjs +103 -103
  5. package/docs/01-baslangic.md +285 -285
  6. package/docs/02-mimari.md +287 -287
  7. package/docs/03-routing.md +480 -480
  8. package/docs/04-render-ve-sablonlar.md +490 -490
  9. package/docs/05-islands.md +482 -482
  10. package/docs/06-cache.md +1209 -1202
  11. package/docs/08-build.md +366 -366
  12. package/docs/09-dev-araclari.md +335 -335
  13. package/docs/10-dagitim.md +329 -329
  14. package/docs/12-panel-ve-oturum.md +384 -384
  15. package/docs/README.md +105 -105
  16. package/docs/en/01-getting-started.md +292 -292
  17. package/docs/en/02-architecture.md +305 -305
  18. package/docs/en/03-routing.md +497 -497
  19. package/docs/en/04-rendering.md +504 -504
  20. package/docs/en/05-islands.md +492 -492
  21. package/docs/en/06-caching.md +1239 -1232
  22. package/docs/en/07-configuration.md +986 -986
  23. package/docs/en/08-build.md +383 -383
  24. package/docs/en/09-dev-tools.md +342 -342
  25. package/docs/en/10-deployment.md +332 -332
  26. package/docs/en/11-migration.md +359 -359
  27. package/docs/en/12-dashboards-and-sessions.md +392 -392
  28. package/docs/en/README.md +112 -112
  29. package/package.json +102 -102
  30. package/src/build/ensure-build.mjs +15 -15
  31. package/src/build/paths.mjs +143 -143
  32. package/src/build/resolve-peer.mjs +36 -36
  33. package/src/build/tasks/client.mjs +268 -268
  34. package/src/build/tasks/css.mjs +124 -124
  35. package/src/build/tasks/fonts.mjs +146 -146
  36. package/src/build/tasks/icons.mjs +224 -224
  37. package/src/build/tasks/images.mjs +244 -244
  38. package/src/build/tasks/precompress.mjs +78 -78
  39. package/src/client/cache-panel/i18n.js +670 -0
  40. package/src/client/cache-panel/login.html +74 -71
  41. package/src/client/cache-panel/panel.css +756 -740
  42. package/src/client/cache-panel/panel.html +308 -307
  43. package/src/client/cache-panel/panel.js +915 -808
  44. package/src/client/devtools/report.html +185 -185
  45. package/src/client/devtools/report.js +725 -725
  46. package/src/client/dom.js +95 -95
  47. package/src/client/form.js +192 -192
  48. package/src/client/index.js +35 -35
  49. package/src/client/registry.js +297 -297
  50. package/src/client/safe-image.js +91 -91
  51. package/src/client/store.js +36 -36
  52. package/src/client/swap.js +188 -188
  53. package/src/config/pattern.js +107 -107
  54. package/src/http/control-flow.js +71 -71
  55. package/src/http/cookies.js +257 -257
  56. package/src/http/request-cache.js +46 -46
  57. package/src/http/request-context.js +162 -162
  58. package/src/index.js +83 -83
  59. package/src/init.mjs +221 -221
  60. package/src/runtime/alias-hooks.mjs +119 -119
  61. package/src/runtime/register.mjs +4 -4
  62. package/src/server/assets.js +147 -147
  63. package/src/server/cache-deps.js +42 -42
  64. package/src/server/cache-panel.js +759 -738
  65. package/src/server/cloudflare.js +607 -595
  66. package/src/server/create-app.js +291 -291
  67. package/src/server/data-cache.js +462 -462
  68. package/src/server/dev/report.js +369 -369
  69. package/src/server/dev/socket.js +170 -170
  70. package/src/server/dev/version-check.mjs +139 -139
  71. package/src/server/html-cache.js +817 -817
  72. package/src/server/metadata.js +102 -102
  73. package/src/server/middleware/compression.js +205 -205
  74. package/src/server/middleware/csrf.js +134 -134
  75. package/src/server/middleware/dev-gate.js +62 -62
  76. package/src/server/middleware/headers.js +37 -37
  77. package/src/server/middleware/redirects.js +32 -32
  78. package/src/server/middleware/static-precompressed.js +100 -100
  79. package/src/server/middleware/upstream-proxy.js +141 -141
  80. package/src/server/prewarm.js +601 -601
  81. package/src/server/redis.js +569 -569
  82. package/src/server/router.js +128 -128
  83. package/src/server/status-page.js +164 -164
  84. package/src/server/upstream-limiter.js +376 -376
  85. package/src/server/upstream-tracking.js +166 -166
  86. package/src/start.mjs +7 -7
  87. package/src/templates/layout.ejs +44 -44
  88. package/src/version.mjs +31 -31
  89. package/src/views/components/loader.js +85 -85
  90. package/src/views/helpers/html.js +102 -102
  91. package/src/views/helpers/tags.js +245 -245
@@ -1,305 +1,305 @@
1
- # 02 — Architecture and the reasoning behind the decisions
2
-
3
- This document does not explain how JSkelet works, but **why it works this way**.
4
- The path a request takes from the server to the browser, why the island model is
5
- tied to visibility, why the HTML is produced in full, why the cache lives in
6
- process memory and why the middleware order must not be shuffled — that is all
7
- here. Most of the reasoning comes from the measurement notes in the headers of
8
- the source files; for the APIs themselves see documents
9
- [03](./03-routing.md), [04](./04-rendering.md), [05](./05-islands.md) and
10
- [06](./06-caching.md).
11
-
12
- ## The basic premise
13
-
14
- On a news or content site, almost everything the visitor sees is already ready
15
- on the server. Interaction, on the other hand, is scattered point by point: a
16
- search box, a drawer, a chart, a comment form. With that profile, rebuilding the
17
- whole page on the client (hydration) is the biggest cost you pay, and in return
18
- the visitor gains nothing.
19
-
20
- JSkelet puts this observation at the centre of the architecture:
21
-
22
- 1. **The server HTML is complete.** Even if JS never runs, the page can be read,
23
- navigated and indexed.
24
- 2. **JS only adds behaviour.** Every interactive piece is attached as an
25
- independent "island", with its own module, at its own time.
26
- 3. **Page production is cached.** There is no point in producing the same HTML
27
- again on every request; a memory cache with a TTL takes the place of ISR.
28
-
29
- ## The path of a request
30
-
31
- ```
32
- Request
33
- ├─ rewrites(beforeFiles) config → proxy or a change to req.url
34
- ├─ compression brotli/gzip negotiation (quality 5)
35
- ├─ headers static cache + config headers()
36
- ├─ devGate if DEV_TOKEN is set, 404 without a token
37
- ├─ redirects config redirects(), first match wins
38
- ├─ staticPrecompressed .br/.gz copies produced at build (quality 11)
39
- ├─ express.static files under public/
40
- ├─ (dev) devtools only when NODE_ENV=development
41
- ├─ body parsers urlencoded 64kb + json 256kb
42
- ├─ rewrites(afterFiles) after static has been tried
43
- ├─ routes
44
- │ └─ route(controller)
45
- │ └─ withHtmlCache TTL + stale-while-revalidate
46
- │ └─ withUpstreamTracking
47
- │ └─ withRequestCache
48
- │ └─ controller → renderPage → EJS
49
- ├─ 404 → hooks.notFound()
50
- └─ error handling redirect/notFound + 500 fallback
51
- ```
52
-
53
- ## Why the middleware order is this order
54
-
55
- The real value of the `src/server/create-app.js` file is the order; every
56
- position has a reason, and moving things around leads to silent breakage.
57
-
58
- - **`rewrites(beforeFiles)` comes even before static files.** Otherwise a rule
59
- that moves the `/assets/x.js` path somewhere else would never take effect,
60
- because `express.static` answers the request first.
61
- - **`compression` before static.** If it came after, static files would never be
62
- compressed.
63
- - **`headers` → `devGate` → `redirects`.** The gate's 404 must come before the
64
- redirects: an environment that has not gone live should not leak even its
65
- redirect rules to the outside.
66
- - **`staticPrecompressed` before `express.static`.** If there are `.br`/`.gz`
67
- copies produced at build time, those are served (brotli quality 11);
68
- otherwise the request falls through to the `static` below it and the
69
- middleware compresses on the fly (quality 5). Recompressing a hashed,
70
- `immutable` file on every request is wasted CPU.
71
- - **Body parsers after static.** Image requests should not pay the cost of body
72
- parsing.
73
- - **`rewrites(afterFiles)` after static has been tried and before pages.** The
74
- equivalent of Next.js's two-phase rewrite semantics.
75
- - **404 and error handling last.** The error handler also catches the
76
- `notFound`/`redirect` control flow, because those can be thrown outside a
77
- controller as well (e.g. inside a middleware).
78
-
79
- The framework turns off `x-powered-by` and writes a brandable header in its
80
- place, sets `etag` to `strong` and enables `trust proxy`. `trust proxy` is
81
- required for the correct protocol and client IP behind a reverse proxy
82
- ([10-deployment.md](./10-deployment.md)).
83
-
84
- ## The island model: why visibility-based hydration
85
-
86
- `src/client/registry.js` hands every `[data-island]` element to an
87
- `IntersectionObserver` (`rootMargin: "200px 0px"`). Elements on screen are
88
- triggered on the very first observation; those off screen are **never
89
- downloaded** until they are scrolled to. Heavy modules like the chart library on
90
- the home page thus drop out of the initial load entirely.
91
-
92
- There are three behaviours, all controlled from the HTML:
93
-
94
- - **Default:** tied to visibility.
95
- - **`data-island-eager`:** independent of visibility, attaches immediately. For
96
- global behaviours like the header or the cookie banner.
97
- - **`data-island-idle`:** even if it is visible, it waits until `load` has
98
- completed and the main thread is free. So that heavy modules that are visible
99
- in the first viewport but not critical (e.g. a mini chart that pulls in a
100
- chart library) do not compete with LCP.
101
-
102
- Two further details came out of measurement:
103
-
104
- - **The attaching work is deferred to idle time** (`requestIdleCallback`,
105
- `timeout: 500`). If many islands that become visible at once turn into a
106
- single long task, TBT and INP suffer.
107
- - **Elements with no layout box are attached directly.** A `hidden`
108
- drawer/dialog has no layout box and `IntersectionObserver` will never report
109
- it; that is why `hydrate()` reads the measurements in one pass
110
- (`getClientRects().length`) and, instead of handing boxless elements to the
111
- observer, attaches them immediately.
112
-
113
- One consequence of this: **image error handling is not an island.** An
114
- image-heavy page can have 80+ `<img>` elements, and attaching a separate island
115
- to each one (observer + dynamic import + mount) is a serious hydration cost just
116
- for the possibility of an error. `startSafeImages()` instead installs a single
117
- capture-phase listener on the document ([05-islands.md](./05-islands.md)).
118
-
119
- ## Why the server HTML is complete
120
-
121
- The layout and the page template produce the entirety of the content the visitor
122
- will see. There is no "show a skeleton, then fill it in" pattern on the client
123
- side. This buys three things:
124
-
125
- 1. **SEO:** the crawler does not have to wait for JS.
126
- 2. **LCP:** the largest contentful element arrives in the first HTML response;
127
- downloading, parsing and executing JS is not on the LCP path.
128
- 3. **CLS:** because content is not injected later, the layout does not shift.
129
-
130
- The same principle is applied on the `<head>` side too. The layout prints
131
- resource hints (`preconnect`, LCP `preload`) at the **very beginning** of the
132
- `<head>`; delaying those writes straight to LCP.
133
-
134
- ### Why a single, render-blocking stylesheet
135
-
136
- No separate "critical CSS" is produced. In measurement, because the inline
137
- critical CSS did not fully cover the first viewport, the page reflowed once the
138
- sheet arrived (CLS 0.307 on a list page) and the same ~27 KB was repeated in
139
- every HTML response. Leaving a single compressed sheet render-blocking is both
140
- faster and free of CLS; on the second visit it already comes from the
141
- `immutable` cache.
142
-
143
- The same logic applies to icons: instead of a separate request per icon, an SVG
144
- sprite is produced at build time from only the symbols actually used in the
145
- source. Shipping the whole Phosphor set is 1500+ icons, that is several
146
- megabytes; the scan typically keeps the sprite at 10-30 symbols
147
- ([08-build.md](./08-build.md)).
148
-
149
- ## Cache strategy: in-memory TTL instead of ISR
150
-
151
- `src/server/html-cache.js` keeps an LRU HTML cache with a TTL, keyed by route +
152
- query (at most 500 entries). When the TTL expires the entry is not thrown away
153
- immediately: within the `stale` window the old HTML returns instantly and the
154
- refresh runs in the background (stale-while-revalidate, `STALE_FACTOR = 1`, i.e.
155
- the stale window is as long as the TTL).
156
-
157
- The gain: after the first warm-up no request ever waits for a render. The price:
158
- the data in the HTML can be at most `revalidate + one refresh round` behind.
159
- That price is acceptable, because live fields such as prices are updated on the
160
- client from a WebSocket and the lag is not visible on screen.
161
-
162
- The decision not to write to disk is deliberate. The equivalent of Next's
163
- build-time prerender is prewarm, but the output is not written to disk: because
164
- the cache lives in process memory, the warm-up is done when the process comes
165
- up. The gain is the same — the first visitor does not wait for a cold render —
166
- but the data is not frozen; every entry ages with the route's `revalidate`
167
- duration ([06-caching.md](./06-caching.md)).
168
-
169
- ### Keeping the compressed body in the cache
170
-
171
- Every cached entry stores the brotli/gzip output alongside the HTML (the
172
- `encoded` map shares its lifetime with the HTML). The same page is not
173
- re-brotli'd on every request. Because `Content-Encoding` is set inside `route()`
174
- on this path, the compression middleware does not kick in.
175
-
176
- ### Why transient and permanent upstream errors are handled differently
177
-
178
- If an upstream went down during the render, the output contains incomplete data,
179
- and such HTML is **not** written to the cache: the next request tries again.
180
-
181
- But this only applies to *transient* errors (network errors, 408, 425, 429 and
182
- all 5xx). Deterministic answers like 400/403/404 do not get better by retrying;
183
- turning off the cache because of them would mean rendering the page from scratch
184
- on every visit — the content comes back in the same incomplete state anyway, the
185
- visitor merely pays the render time. That is why permanent errors are only
186
- logged and do not block the cache.
187
-
188
- The direction in which this information reaches the framework is also
189
- deliberately inverted: the framework does not know the data layer, the data
190
- layer notifies the framework (`reportUpstreamFailure()`). If nobody ever calls
191
- it, the cost is an empty array.
192
-
193
- ### The nesting order of the three scopes
194
-
195
- `route()` sets up this order:
196
-
197
- ```
198
- withHtmlCache( withUpstreamTracking( withRequestCache( controller ) ) )
199
- ```
200
-
201
- The order matters: **the per-request cache must be innermost** so that two calls
202
- within the same render collapse into a single upstream request; **upstream
203
- tracking must be inside the HTML cache** so that output produced with incomplete
204
- data is not written to the cache.
205
-
206
- ## Fault tolerance: no single gap takes the site down
207
-
208
- There is a principle repeated throughout the framework: missing configuration or
209
- missing build output produces a degraded but working page instead of an error.
210
-
211
- - **If the config file is missing or unreadable**, a warning is printed and the
212
- server comes up with the defaults. A broken edit must not make the site
213
- impossible to open. In the same way, if one of the
214
- `headers()`/`redirects()`/`rewrites()`/`cache()` sections throws, only that
215
- section is ignored.
216
- - **If hooks throw**, the framework falls back to its own default and warns.
217
- - **If the build did not run**, `asset()` returns `/assets/<name>`, `hasAsset()`
218
- is false and the layout does not print the stylesheet/script tags at all. When
219
- `jskelet build` is forgotten you see an unstyled but working page instead of
220
- an error.
221
- - **A broken route module in dev** prints a warning and is skipped; **in
222
- production it throws.** Going live with a half-built route table means pages
223
- that silently return 404.
224
- - **If the 404 render blows up too**, a minimal, template-free HTML is returned;
225
- the visitor should not see an empty response.
226
- - **A single request error does not take the process down:**
227
- `unhandledRejection` and `uncaughtException` are logged and the process stays
228
- up. On a news site, an error on a single page must not take the whole site
229
- down.
230
-
231
- ## Why there is no file-system-based routing
232
-
233
- Order matters. If a single-segment catch-all such as `/:slug` is registered
234
- before the `/about` route, "about" is mistaken for a slug. Making the order
235
- visible instead of hiding it in file names makes diagnosis easier: either you
236
- give an explicit list via `jskelet.config.mjs` → `routes`, or you have the
237
- `routes/` directory scanned alphabetically and put a numeric prefix on the file
238
- names (`10-pages.js`, `50-blog.js`, `99-catch-all.js`). Details:
239
- [03-routing.md](./03-routing.md).
240
-
241
- ## Why a single source of truth for config
242
-
243
- `src/config/index.js` normalizes the project root, the directory paths, the
244
- branding, the hooks and the rules. Other modules do not compute paths, they call
245
- `getConfig()`. The reason is concrete: once the framework lives inside
246
- `node_modules/`, every file that tries to find the root by counting `../..`
247
- breaks. For the same reason there is a single mutation point on the build side
248
- too (`initBuildPaths()`).
249
-
250
- If `getConfig()` is used without `loadConfig()` having been called, it throws
251
- instead of assuming an empty project root: a silently wrong path turns into
252
- hard-to-diagnose problems like "why is there no stylesheet".
253
-
254
- ## Why this dependency list
255
-
256
- There are four runtime dependencies: `express`, `ejs`, `esbuild`,
257
- `tailwind-merge`. Everything else (Tailwind, PostCSS, lightningcss, sharp, the
258
- Phosphor icons) is an **optional peer dependency**, and if it is absent the
259
- corresponding build step is skipped.
260
-
261
- Two decisions deserve a separate explanation:
262
-
263
- - **`node:zlib` instead of the `compression` package.** The package does not
264
- support brotli and brings a seven-deep dependency tree; doing the brotli +
265
- gzip negotiation by hand is enough. Brotli is preferred: on the home page HTML
266
- it is ~35% smaller than gzip.
267
- - **`tailwind-merge` stays at runtime.** Class computation is done only on the
268
- server, it never enters the client bundle, so it has no effect on page weight.
269
- A hand-written group table, on the other hand, produced visual regressions
270
- because it mixed up width/colour pairs like `border-2` +
271
- `border-transparent` and dropped classes.
272
-
273
- Optional packages are resolved from the **application's** `node_modules`, not
274
- from the framework's own. If the framework is installed via a `file:` or
275
- workspace link, a plain `import "postcss"` looks in the framework's tree — not
276
- in the application's.
277
-
278
- ## Why alias and extension hooks
279
-
280
- `node --import jskelet/register` does two things:
281
-
282
- 1. It resolves the `compilerOptions.paths` aliases in `jsconfig.json` /
283
- `tsconfig.json` (`@/lib/x` → `<root>/lib/x`). Because the editor and the
284
- runtime are fed from the same file, the two do not drift apart.
285
- 2. It adds extensions to extensionless relative imports (`./cache` →
286
- `./cache.js`). Node ESM does not do this, and it is the most common breaking
287
- point in code migrated from a bundler.
288
-
289
- The `@/` resolution on the esbuild side mimics the same behaviour, so that
290
- modules under `lib/` can use the same import style both on the server and in the
291
- browser.
292
-
293
- `--import` expects a module **specifier**, not a file path. On Windows an
294
- absolute path like `H:\...` is mistaken for a URL with the `h:` scheme and
295
- rejected; that is why the framework uses `pathToFileURL(...).href` everywhere.
296
- For the same reason the config, the route modules and the components are
297
- imported with a `file://` URL too.
298
-
299
- ## What's next
300
-
301
- - The route and controller contract: [03-routing.md](./03-routing.md)
302
- - The template layer and metadata: [04-rendering.md](./04-rendering.md)
303
- - The island runtime API: [05-islands.md](./05-islands.md)
304
- - Cache settings and prewarm: [06-caching.md](./06-caching.md)
305
- - The inner workings of the dev flow: [09-dev-tools.md](./09-dev-tools.md)
1
+ # 02 — Architecture and the reasoning behind the decisions
2
+
3
+ This document does not explain how JSkelet works, but **why it works this way**.
4
+ The path a request takes from the server to the browser, why the island model is
5
+ tied to visibility, why the HTML is produced in full, why the cache lives in
6
+ process memory and why the middleware order must not be shuffled — that is all
7
+ here. Most of the reasoning comes from the measurement notes in the headers of
8
+ the source files; for the APIs themselves see documents
9
+ [03](./03-routing.md), [04](./04-rendering.md), [05](./05-islands.md) and
10
+ [06](./06-caching.md).
11
+
12
+ ## The basic premise
13
+
14
+ On a news or content site, almost everything the visitor sees is already ready
15
+ on the server. Interaction, on the other hand, is scattered point by point: a
16
+ search box, a drawer, a chart, a comment form. With that profile, rebuilding the
17
+ whole page on the client (hydration) is the biggest cost you pay, and in return
18
+ the visitor gains nothing.
19
+
20
+ JSkelet puts this observation at the centre of the architecture:
21
+
22
+ 1. **The server HTML is complete.** Even if JS never runs, the page can be read,
23
+ navigated and indexed.
24
+ 2. **JS only adds behaviour.** Every interactive piece is attached as an
25
+ independent "island", with its own module, at its own time.
26
+ 3. **Page production is cached.** There is no point in producing the same HTML
27
+ again on every request; a memory cache with a TTL takes the place of ISR.
28
+
29
+ ## The path of a request
30
+
31
+ ```
32
+ Request
33
+ ├─ rewrites(beforeFiles) config → proxy or a change to req.url
34
+ ├─ compression brotli/gzip negotiation (quality 5)
35
+ ├─ headers static cache + config headers()
36
+ ├─ devGate if DEV_TOKEN is set, 404 without a token
37
+ ├─ redirects config redirects(), first match wins
38
+ ├─ staticPrecompressed .br/.gz copies produced at build (quality 11)
39
+ ├─ express.static files under public/
40
+ ├─ (dev) devtools only when NODE_ENV=development
41
+ ├─ body parsers urlencoded 64kb + json 256kb
42
+ ├─ rewrites(afterFiles) after static has been tried
43
+ ├─ routes
44
+ │ └─ route(controller)
45
+ │ └─ withHtmlCache TTL + stale-while-revalidate
46
+ │ └─ withUpstreamTracking
47
+ │ └─ withRequestCache
48
+ │ └─ controller → renderPage → EJS
49
+ ├─ 404 → hooks.notFound()
50
+ └─ error handling redirect/notFound + 500 fallback
51
+ ```
52
+
53
+ ## Why the middleware order is this order
54
+
55
+ The real value of the `src/server/create-app.js` file is the order; every
56
+ position has a reason, and moving things around leads to silent breakage.
57
+
58
+ - **`rewrites(beforeFiles)` comes even before static files.** Otherwise a rule
59
+ that moves the `/assets/x.js` path somewhere else would never take effect,
60
+ because `express.static` answers the request first.
61
+ - **`compression` before static.** If it came after, static files would never be
62
+ compressed.
63
+ - **`headers` → `devGate` → `redirects`.** The gate's 404 must come before the
64
+ redirects: an environment that has not gone live should not leak even its
65
+ redirect rules to the outside.
66
+ - **`staticPrecompressed` before `express.static`.** If there are `.br`/`.gz`
67
+ copies produced at build time, those are served (brotli quality 11);
68
+ otherwise the request falls through to the `static` below it and the
69
+ middleware compresses on the fly (quality 5). Recompressing a hashed,
70
+ `immutable` file on every request is wasted CPU.
71
+ - **Body parsers after static.** Image requests should not pay the cost of body
72
+ parsing.
73
+ - **`rewrites(afterFiles)` after static has been tried and before pages.** The
74
+ equivalent of Next.js's two-phase rewrite semantics.
75
+ - **404 and error handling last.** The error handler also catches the
76
+ `notFound`/`redirect` control flow, because those can be thrown outside a
77
+ controller as well (e.g. inside a middleware).
78
+
79
+ The framework turns off `x-powered-by` and writes a brandable header in its
80
+ place, sets `etag` to `strong` and enables `trust proxy`. `trust proxy` is
81
+ required for the correct protocol and client IP behind a reverse proxy
82
+ ([10-deployment.md](./10-deployment.md)).
83
+
84
+ ## The island model: why visibility-based hydration
85
+
86
+ `src/client/registry.js` hands every `[data-island]` element to an
87
+ `IntersectionObserver` (`rootMargin: "200px 0px"`). Elements on screen are
88
+ triggered on the very first observation; those off screen are **never
89
+ downloaded** until they are scrolled to. Heavy modules like the chart library on
90
+ the home page thus drop out of the initial load entirely.
91
+
92
+ There are three behaviours, all controlled from the HTML:
93
+
94
+ - **Default:** tied to visibility.
95
+ - **`data-island-eager`:** independent of visibility, attaches immediately. For
96
+ global behaviours like the header or the cookie banner.
97
+ - **`data-island-idle`:** even if it is visible, it waits until `load` has
98
+ completed and the main thread is free. So that heavy modules that are visible
99
+ in the first viewport but not critical (e.g. a mini chart that pulls in a
100
+ chart library) do not compete with LCP.
101
+
102
+ Two further details came out of measurement:
103
+
104
+ - **The attaching work is deferred to idle time** (`requestIdleCallback`,
105
+ `timeout: 500`). If many islands that become visible at once turn into a
106
+ single long task, TBT and INP suffer.
107
+ - **Elements with no layout box are attached directly.** A `hidden`
108
+ drawer/dialog has no layout box and `IntersectionObserver` will never report
109
+ it; that is why `hydrate()` reads the measurements in one pass
110
+ (`getClientRects().length`) and, instead of handing boxless elements to the
111
+ observer, attaches them immediately.
112
+
113
+ One consequence of this: **image error handling is not an island.** An
114
+ image-heavy page can have 80+ `<img>` elements, and attaching a separate island
115
+ to each one (observer + dynamic import + mount) is a serious hydration cost just
116
+ for the possibility of an error. `startSafeImages()` instead installs a single
117
+ capture-phase listener on the document ([05-islands.md](./05-islands.md)).
118
+
119
+ ## Why the server HTML is complete
120
+
121
+ The layout and the page template produce the entirety of the content the visitor
122
+ will see. There is no "show a skeleton, then fill it in" pattern on the client
123
+ side. This buys three things:
124
+
125
+ 1. **SEO:** the crawler does not have to wait for JS.
126
+ 2. **LCP:** the largest contentful element arrives in the first HTML response;
127
+ downloading, parsing and executing JS is not on the LCP path.
128
+ 3. **CLS:** because content is not injected later, the layout does not shift.
129
+
130
+ The same principle is applied on the `<head>` side too. The layout prints
131
+ resource hints (`preconnect`, LCP `preload`) at the **very beginning** of the
132
+ `<head>`; delaying those writes straight to LCP.
133
+
134
+ ### Why a single, render-blocking stylesheet
135
+
136
+ No separate "critical CSS" is produced. In measurement, because the inline
137
+ critical CSS did not fully cover the first viewport, the page reflowed once the
138
+ sheet arrived (CLS 0.307 on a list page) and the same ~27 KB was repeated in
139
+ every HTML response. Leaving a single compressed sheet render-blocking is both
140
+ faster and free of CLS; on the second visit it already comes from the
141
+ `immutable` cache.
142
+
143
+ The same logic applies to icons: instead of a separate request per icon, an SVG
144
+ sprite is produced at build time from only the symbols actually used in the
145
+ source. Shipping the whole Phosphor set is 1500+ icons, that is several
146
+ megabytes; the scan typically keeps the sprite at 10-30 symbols
147
+ ([08-build.md](./08-build.md)).
148
+
149
+ ## Cache strategy: in-memory TTL instead of ISR
150
+
151
+ `src/server/html-cache.js` keeps an LRU HTML cache with a TTL, keyed by route +
152
+ query (at most 500 entries). When the TTL expires the entry is not thrown away
153
+ immediately: within the `stale` window the old HTML returns instantly and the
154
+ refresh runs in the background (stale-while-revalidate, `STALE_FACTOR = 1`, i.e.
155
+ the stale window is as long as the TTL).
156
+
157
+ The gain: after the first warm-up no request ever waits for a render. The price:
158
+ the data in the HTML can be at most `revalidate + one refresh round` behind.
159
+ That price is acceptable, because live fields such as prices are updated on the
160
+ client from a WebSocket and the lag is not visible on screen.
161
+
162
+ The decision not to write to disk is deliberate. The equivalent of Next's
163
+ build-time prerender is prewarm, but the output is not written to disk: because
164
+ the cache lives in process memory, the warm-up is done when the process comes
165
+ up. The gain is the same — the first visitor does not wait for a cold render —
166
+ but the data is not frozen; every entry ages with the route's `revalidate`
167
+ duration ([06-caching.md](./06-caching.md)).
168
+
169
+ ### Keeping the compressed body in the cache
170
+
171
+ Every cached entry stores the brotli/gzip output alongside the HTML (the
172
+ `encoded` map shares its lifetime with the HTML). The same page is not
173
+ re-brotli'd on every request. Because `Content-Encoding` is set inside `route()`
174
+ on this path, the compression middleware does not kick in.
175
+
176
+ ### Why transient and permanent upstream errors are handled differently
177
+
178
+ If an upstream went down during the render, the output contains incomplete data,
179
+ and such HTML is **not** written to the cache: the next request tries again.
180
+
181
+ But this only applies to *transient* errors (network errors, 408, 425, 429 and
182
+ all 5xx). Deterministic answers like 400/403/404 do not get better by retrying;
183
+ turning off the cache because of them would mean rendering the page from scratch
184
+ on every visit — the content comes back in the same incomplete state anyway, the
185
+ visitor merely pays the render time. That is why permanent errors are only
186
+ logged and do not block the cache.
187
+
188
+ The direction in which this information reaches the framework is also
189
+ deliberately inverted: the framework does not know the data layer, the data
190
+ layer notifies the framework (`reportUpstreamFailure()`). If nobody ever calls
191
+ it, the cost is an empty array.
192
+
193
+ ### The nesting order of the three scopes
194
+
195
+ `route()` sets up this order:
196
+
197
+ ```
198
+ withHtmlCache( withUpstreamTracking( withRequestCache( controller ) ) )
199
+ ```
200
+
201
+ The order matters: **the per-request cache must be innermost** so that two calls
202
+ within the same render collapse into a single upstream request; **upstream
203
+ tracking must be inside the HTML cache** so that output produced with incomplete
204
+ data is not written to the cache.
205
+
206
+ ## Fault tolerance: no single gap takes the site down
207
+
208
+ There is a principle repeated throughout the framework: missing configuration or
209
+ missing build output produces a degraded but working page instead of an error.
210
+
211
+ - **If the config file is missing or unreadable**, a warning is printed and the
212
+ server comes up with the defaults. A broken edit must not make the site
213
+ impossible to open. In the same way, if one of the
214
+ `headers()`/`redirects()`/`rewrites()`/`cache()` sections throws, only that
215
+ section is ignored.
216
+ - **If hooks throw**, the framework falls back to its own default and warns.
217
+ - **If the build did not run**, `asset()` returns `/assets/<name>`, `hasAsset()`
218
+ is false and the layout does not print the stylesheet/script tags at all. When
219
+ `jskelet build` is forgotten you see an unstyled but working page instead of
220
+ an error.
221
+ - **A broken route module in dev** prints a warning and is skipped; **in
222
+ production it throws.** Going live with a half-built route table means pages
223
+ that silently return 404.
224
+ - **If the 404 render blows up too**, a minimal, template-free HTML is returned;
225
+ the visitor should not see an empty response.
226
+ - **A single request error does not take the process down:**
227
+ `unhandledRejection` and `uncaughtException` are logged and the process stays
228
+ up. On a news site, an error on a single page must not take the whole site
229
+ down.
230
+
231
+ ## Why there is no file-system-based routing
232
+
233
+ Order matters. If a single-segment catch-all such as `/:slug` is registered
234
+ before the `/about` route, "about" is mistaken for a slug. Making the order
235
+ visible instead of hiding it in file names makes diagnosis easier: either you
236
+ give an explicit list via `jskelet.config.mjs` → `routes`, or you have the
237
+ `routes/` directory scanned alphabetically and put a numeric prefix on the file
238
+ names (`10-pages.js`, `50-blog.js`, `99-catch-all.js`). Details:
239
+ [03-routing.md](./03-routing.md).
240
+
241
+ ## Why a single source of truth for config
242
+
243
+ `src/config/index.js` normalizes the project root, the directory paths, the
244
+ branding, the hooks and the rules. Other modules do not compute paths, they call
245
+ `getConfig()`. The reason is concrete: once the framework lives inside
246
+ `node_modules/`, every file that tries to find the root by counting `../..`
247
+ breaks. For the same reason there is a single mutation point on the build side
248
+ too (`initBuildPaths()`).
249
+
250
+ If `getConfig()` is used without `loadConfig()` having been called, it throws
251
+ instead of assuming an empty project root: a silently wrong path turns into
252
+ hard-to-diagnose problems like "why is there no stylesheet".
253
+
254
+ ## Why this dependency list
255
+
256
+ There are four runtime dependencies: `express`, `ejs`, `esbuild`,
257
+ `tailwind-merge`. Everything else (Tailwind, PostCSS, lightningcss, sharp, the
258
+ Phosphor icons) is an **optional peer dependency**, and if it is absent the
259
+ corresponding build step is skipped.
260
+
261
+ Two decisions deserve a separate explanation:
262
+
263
+ - **`node:zlib` instead of the `compression` package.** The package does not
264
+ support brotli and brings a seven-deep dependency tree; doing the brotli +
265
+ gzip negotiation by hand is enough. Brotli is preferred: on the home page HTML
266
+ it is ~35% smaller than gzip.
267
+ - **`tailwind-merge` stays at runtime.** Class computation is done only on the
268
+ server, it never enters the client bundle, so it has no effect on page weight.
269
+ A hand-written group table, on the other hand, produced visual regressions
270
+ because it mixed up width/colour pairs like `border-2` +
271
+ `border-transparent` and dropped classes.
272
+
273
+ Optional packages are resolved from the **application's** `node_modules`, not
274
+ from the framework's own. If the framework is installed via a `file:` or
275
+ workspace link, a plain `import "postcss"` looks in the framework's tree — not
276
+ in the application's.
277
+
278
+ ## Why alias and extension hooks
279
+
280
+ `node --import jskelet/register` does two things:
281
+
282
+ 1. It resolves the `compilerOptions.paths` aliases in `jsconfig.json` /
283
+ `tsconfig.json` (`@/lib/x` → `<root>/lib/x`). Because the editor and the
284
+ runtime are fed from the same file, the two do not drift apart.
285
+ 2. It adds extensions to extensionless relative imports (`./cache` →
286
+ `./cache.js`). Node ESM does not do this, and it is the most common breaking
287
+ point in code migrated from a bundler.
288
+
289
+ The `@/` resolution on the esbuild side mimics the same behaviour, so that
290
+ modules under `lib/` can use the same import style both on the server and in the
291
+ browser.
292
+
293
+ `--import` expects a module **specifier**, not a file path. On Windows an
294
+ absolute path like `H:\...` is mistaken for a URL with the `h:` scheme and
295
+ rejected; that is why the framework uses `pathToFileURL(...).href` everywhere.
296
+ For the same reason the config, the route modules and the components are
297
+ imported with a `file://` URL too.
298
+
299
+ ## What's next
300
+
301
+ - The route and controller contract: [03-routing.md](./03-routing.md)
302
+ - The template layer and metadata: [04-rendering.md](./04-rendering.md)
303
+ - The island runtime API: [05-islands.md](./05-islands.md)
304
+ - Cache settings and prewarm: [06-caching.md](./06-caching.md)
305
+ - The inner workings of the dev flow: [09-dev-tools.md](./09-dev-tools.md)