@valentinkolb/ssr 0.10.0 → 0.10.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/README.md +4 -1
- package/package.json +11 -15
- package/src/adapter/bun.ts +8 -17
- package/src/adapter/elysia.ts +6 -11
- package/src/adapter/hono.ts +5 -14
- package/src/adapter/utils.ts +72 -5
- package/src/build.ts +30 -6
- package/src/index.ts +13 -2
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ bun add @valentinkolb/ssr solid-js
|
|
|
65
65
|
# choose adapter deps you need
|
|
66
66
|
bun add hono
|
|
67
67
|
# or
|
|
68
|
-
bun add elysia
|
|
68
|
+
bun add elysia
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
## Required TypeScript settings
|
|
@@ -268,6 +268,7 @@ createConfig({
|
|
|
268
268
|
rootDir?: string; // default: process.cwd()
|
|
269
269
|
basePath?: string; // default: "", example: "/docs"
|
|
270
270
|
external?: string[]; // passed to Bun.build for island bundle
|
|
271
|
+
devSourcemap?: "none" | "linked" | "inline"; // default: "linked"
|
|
271
272
|
template?: ({ body, scripts, ...custom }) => string | Promise<string>;
|
|
272
273
|
})
|
|
273
274
|
```
|
|
@@ -276,7 +277,9 @@ createConfig({
|
|
|
276
277
|
|
|
277
278
|
- `rootDir` is important in monorepos where server entrypoint and island files live in different packages.
|
|
278
279
|
- `basePath` moves SSR assets and dev endpoints under that prefix, e.g. `/docs/_ssr`.
|
|
280
|
+
- Development builds emit linked source maps by default. Use `"inline"` only when a tool requires embedded maps, or `"none"` to disable them.
|
|
279
281
|
- In production, hydration imports include a build timestamp query (`?v=...`) for cache busting.
|
|
282
|
+
- All adapters stream island assets from `Bun.file`. Production assets and content-hashed development chunks are immutable; stable development entries and source maps use validators for inexpensive freshness checks.
|
|
280
283
|
|
|
281
284
|
## Microfrontend mount example
|
|
282
285
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@valentinkolb/ssr",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.1",
|
|
4
4
|
"description": "Minimal SSR framework for SolidJS and Bun",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -18,34 +18,30 @@
|
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"solid-js": "^1.9.0",
|
|
20
20
|
"elysia": "^1.0.0",
|
|
21
|
-
"@elysiajs/static": "^1.0.0",
|
|
22
21
|
"hono": "^4.0.0"
|
|
23
22
|
},
|
|
24
23
|
"peerDependenciesMeta": {
|
|
25
24
|
"elysia": {
|
|
26
25
|
"optional": true
|
|
27
26
|
},
|
|
28
|
-
"@elysiajs/static": {
|
|
29
|
-
"optional": true
|
|
30
|
-
},
|
|
31
27
|
"hono": {
|
|
32
28
|
"optional": true
|
|
33
29
|
}
|
|
34
30
|
},
|
|
35
31
|
"dependencies": {
|
|
36
|
-
"@babel/core": "^7.
|
|
37
|
-
"@babel/preset-typescript": "^7.
|
|
32
|
+
"@babel/core": "^7.29.7",
|
|
33
|
+
"@babel/preset-typescript": "^7.29.7",
|
|
38
34
|
"@types/babel__core": "^7.20.5",
|
|
39
|
-
"babel-preset-solid": "^1.
|
|
40
|
-
"seroval": "^1.
|
|
35
|
+
"babel-preset-solid": "^1.9.12",
|
|
36
|
+
"seroval": "^1.5.5"
|
|
41
37
|
},
|
|
42
38
|
"devDependencies": {
|
|
43
|
-
"@
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"hono": "^4.
|
|
47
|
-
"solid-js": "^1.9.
|
|
48
|
-
"typescript": "^5.
|
|
39
|
+
"@types/bun": "^1.3.14",
|
|
40
|
+
"elysia": "^1.4.29",
|
|
41
|
+
"file-type": "^21.3.1",
|
|
42
|
+
"hono": "^4.12.30",
|
|
43
|
+
"solid-js": "^1.9.14",
|
|
44
|
+
"typescript": "^5.9.3"
|
|
49
45
|
},
|
|
50
46
|
"license": "MIT",
|
|
51
47
|
"author": "Valentin Kolb",
|
package/src/adapter/bun.ts
CHANGED
|
@@ -4,11 +4,9 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import type { SsrConfig } from "../index";
|
|
6
6
|
import {
|
|
7
|
+
createAssetResponse,
|
|
7
8
|
getSsrDir,
|
|
8
|
-
getCacheHeaders,
|
|
9
9
|
createReloadResponse,
|
|
10
|
-
notFound,
|
|
11
|
-
safePath,
|
|
12
10
|
} from "./utils";
|
|
13
11
|
|
|
14
12
|
type RouteHandler = (req: Request) => Response | Promise<Response>;
|
|
@@ -39,21 +37,14 @@ export const routes = (config: SsrConfig): Routes => {
|
|
|
39
37
|
}
|
|
40
38
|
: {};
|
|
41
39
|
|
|
40
|
+
const serveAsset: RouteHandler = (req) => {
|
|
41
|
+
const filename = new URL(req.url).pathname.split("/").pop()!;
|
|
42
|
+
return createAssetResponse(req, ssrDir, filename, dev);
|
|
43
|
+
};
|
|
44
|
+
|
|
42
45
|
return {
|
|
43
46
|
...devRoutes,
|
|
44
|
-
|
|
45
|
-
[`${ssrPath}/*.js`]:
|
|
46
|
-
const filename = new URL(req.url).pathname.split("/").pop()!;
|
|
47
|
-
const path = safePath(ssrDir, filename);
|
|
48
|
-
if (!path) return notFound();
|
|
49
|
-
const file = Bun.file(path);
|
|
50
|
-
if (!(await file.exists())) return notFound();
|
|
51
|
-
return new Response(file, {
|
|
52
|
-
headers: {
|
|
53
|
-
"Content-Type": file.type,
|
|
54
|
-
"Cache-Control": getCacheHeaders(dev),
|
|
55
|
-
},
|
|
56
|
-
});
|
|
57
|
-
},
|
|
47
|
+
[`${ssrPath}/*.js`]: serveAsset,
|
|
48
|
+
[`${ssrPath}/*.js.map`]: serveAsset,
|
|
58
49
|
};
|
|
59
50
|
};
|
package/src/adapter/elysia.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Elysia adapter - provides Elysia plugin with SSR routes.
|
|
3
|
-
* Uses
|
|
3
|
+
* Uses the shared BunFile-backed asset response path.
|
|
4
4
|
*/
|
|
5
5
|
import { Elysia } from "elysia";
|
|
6
|
-
import { staticPlugin } from "@elysiajs/static";
|
|
7
6
|
import type { SsrConfig } from "../index";
|
|
8
7
|
import {
|
|
8
|
+
createAssetResponse,
|
|
9
9
|
getSsrDir,
|
|
10
|
-
getCacheHeaders,
|
|
11
10
|
createReloadResponse,
|
|
12
11
|
notFound,
|
|
13
12
|
} from "./utils";
|
|
@@ -29,13 +28,9 @@ export const routes = (config: SsrConfig) => {
|
|
|
29
28
|
const ssrDir = getSsrDir(config);
|
|
30
29
|
|
|
31
30
|
return new Elysia({ name: "ssr" })
|
|
32
|
-
.use(
|
|
33
|
-
staticPlugin({
|
|
34
|
-
assets: ssrDir,
|
|
35
|
-
prefix: ssrPath,
|
|
36
|
-
headers: { "Cache-Control": getCacheHeaders(dev) },
|
|
37
|
-
}),
|
|
38
|
-
)
|
|
39
31
|
.get(`${ssrPath}/_reload`, () => (dev ? createReloadResponse() : notFound()))
|
|
40
|
-
.get(`${ssrPath}/_ping`, () => (dev ? new Response("ok") : notFound()))
|
|
32
|
+
.get(`${ssrPath}/_ping`, () => (dev ? new Response("ok") : notFound()))
|
|
33
|
+
.get(`${ssrPath}/*`, ({ request, params }) =>
|
|
34
|
+
createAssetResponse(request, ssrDir, params["*"], dev),
|
|
35
|
+
);
|
|
41
36
|
};
|
package/src/adapter/hono.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { Hono } from "hono";
|
|
|
6
6
|
import { createFactory } from "hono/factory";
|
|
7
7
|
import type { Context, Env, Handler, MiddlewareHandler, TypedResponse } from "hono";
|
|
8
8
|
import type { SsrConfig, HtmlFn, RenderFn } from "../index";
|
|
9
|
-
import {
|
|
9
|
+
import { createAssetResponse, getSsrDir, createReloadResponse } from "./utils";
|
|
10
10
|
|
|
11
11
|
// ============================================================================
|
|
12
12
|
// Types
|
|
@@ -176,19 +176,10 @@ export const routes = (config: SsrConfig) => {
|
|
|
176
176
|
app.get("/_ping", (c) => c.text("ok"));
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
const file = Bun.file(path);
|
|
184
|
-
if (!(await file.exists())) return c.notFound();
|
|
185
|
-
return c.body(await file.arrayBuffer(), {
|
|
186
|
-
headers: {
|
|
187
|
-
"Content-Type": "application/javascript",
|
|
188
|
-
"Cache-Control": getCacheHeaders(dev),
|
|
189
|
-
},
|
|
190
|
-
});
|
|
191
|
-
});
|
|
179
|
+
const serveAsset = (c: Context) => createAssetResponse(c.req.raw, ssrDir, c.req.param("filename"), dev);
|
|
180
|
+
|
|
181
|
+
app.get("/:filename{.+\\.js$}", serveAsset);
|
|
182
|
+
app.get("/:filename{.+\\.js\\.map$}", serveAsset);
|
|
192
183
|
|
|
193
184
|
return app;
|
|
194
185
|
};
|
package/src/adapter/utils.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Shared utilities for SSR adapters - path helpers,
|
|
3
|
-
* SSE
|
|
2
|
+
* Shared utilities for SSR adapters - path helpers, asset responses,
|
|
3
|
+
* SSE live reload, and security utilities.
|
|
4
4
|
*/
|
|
5
5
|
import { dirname, join, resolve } from "path";
|
|
6
6
|
import type { SsrConfig } from "../index";
|
|
@@ -34,11 +34,78 @@ export const toSsrPath = (basePath: string): string =>
|
|
|
34
34
|
export const getSsrDir = (config: SsrConfig): string =>
|
|
35
35
|
join(config.dev ? config.rootDir ?? process.cwd() : dirname(Bun.main), "_ssr");
|
|
36
36
|
|
|
37
|
+
const HASHED_CHUNK = /^chunk-[a-z0-9]+\.js$/i;
|
|
38
|
+
const ASSET_FILE = /^[a-z0-9._-]+\.js(?:\.map)?$/i;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Stable entry names can change during development. Content-hashed chunks
|
|
42
|
+
* cannot, so the browser may retain them across page navigations.
|
|
43
|
+
*/
|
|
44
|
+
export const getCacheHeaders = (dev: boolean, filename = "") =>
|
|
45
|
+
!dev || HASHED_CHUNK.test(filename) ? "public, max-age=31536000, immutable" : "no-cache";
|
|
46
|
+
|
|
47
|
+
const matchesEtag = (header: string, etag: string): boolean => {
|
|
48
|
+
const normalized = etag.replace(/^W\//, "");
|
|
49
|
+
return header.split(",").some((candidate) => {
|
|
50
|
+
const value = candidate.trim();
|
|
51
|
+
return value === "*" || value.replace(/^W\//, "") === normalized;
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const isNotModified = (request: Request, etag: string, lastModified: number): boolean => {
|
|
56
|
+
const ifNoneMatch = request.headers.get("If-None-Match");
|
|
57
|
+
if (ifNoneMatch) return matchesEtag(ifNoneMatch, etag);
|
|
58
|
+
|
|
59
|
+
const ifModifiedSince = request.headers.get("If-Modified-Since");
|
|
60
|
+
if (!ifModifiedSince) return false;
|
|
61
|
+
const since = Date.parse(ifModifiedSince);
|
|
62
|
+
return Number.isFinite(since) && Math.floor(lastModified / 1000) <= Math.floor(since / 1000);
|
|
63
|
+
};
|
|
64
|
+
|
|
37
65
|
/**
|
|
38
|
-
*
|
|
66
|
+
* Serves generated island assets without eagerly buffering their contents.
|
|
67
|
+
* Dev validators make stable entries cheap to revalidate while preserving
|
|
68
|
+
* immediate rebuild visibility.
|
|
39
69
|
*/
|
|
40
|
-
export const
|
|
41
|
-
|
|
70
|
+
export const createAssetResponse = async (
|
|
71
|
+
request: Request,
|
|
72
|
+
directory: string,
|
|
73
|
+
filename: string,
|
|
74
|
+
dev: boolean,
|
|
75
|
+
): Promise<Response> => {
|
|
76
|
+
if (!ASSET_FILE.test(filename)) return notFound();
|
|
77
|
+
const path = safePath(directory, filename);
|
|
78
|
+
if (!path) return notFound();
|
|
79
|
+
|
|
80
|
+
const contentType = filename.endsWith(".map")
|
|
81
|
+
? "application/json; charset=utf-8"
|
|
82
|
+
: "application/javascript";
|
|
83
|
+
const file = Bun.file(path, { type: contentType });
|
|
84
|
+
if (!(await file.exists())) return notFound();
|
|
85
|
+
|
|
86
|
+
const cacheControl = getCacheHeaders(dev, filename);
|
|
87
|
+
if (!dev) {
|
|
88
|
+
return new Response(file, {
|
|
89
|
+
headers: { "Content-Type": contentType, "Cache-Control": cacheControl },
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const lastModified = file.lastModified;
|
|
94
|
+
const etag = `W/"${file.size.toString(16)}-${Math.trunc(lastModified).toString(16)}"`;
|
|
95
|
+
const validatorHeaders = {
|
|
96
|
+
"Cache-Control": cacheControl,
|
|
97
|
+
ETag: etag,
|
|
98
|
+
"Last-Modified": new Date(lastModified).toUTCString(),
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
if (isNotModified(request, etag, lastModified)) {
|
|
102
|
+
return new Response(null, { status: 304, headers: validatorHeaders });
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
return new Response(file, {
|
|
106
|
+
headers: { "Content-Type": contentType, ...validatorHeaders },
|
|
107
|
+
});
|
|
108
|
+
};
|
|
42
109
|
|
|
43
110
|
/**
|
|
44
111
|
* SSE headers for live reload
|
package/src/build.ts
CHANGED
|
@@ -4,17 +4,35 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import { relative, resolve } from "path";
|
|
6
6
|
import { Glob } from "bun";
|
|
7
|
+
import { unlink } from "fs/promises";
|
|
7
8
|
import { transform } from "./transform";
|
|
8
9
|
import { ISLAND_ID_LENGTH, islandIdFromFile, toStableKey } from "./island-id";
|
|
9
10
|
|
|
10
11
|
type ComponentType = "island" | "client";
|
|
11
12
|
|
|
13
|
+
export type DevSourcemap = "none" | "linked" | "inline";
|
|
14
|
+
|
|
12
15
|
const getComponentType = (path: string): ComponentType => (path.includes(".client.") ? "client" : "island");
|
|
13
16
|
|
|
14
17
|
const getSelector = (type: ComponentType, id: string) =>
|
|
15
18
|
type === "island" ? `solid-island[data-id="${id}"]` : `solid-client[data-id="${id}"]`;
|
|
16
19
|
|
|
17
20
|
const fmt = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${Math.round(ms)}ms`);
|
|
21
|
+
const GENERATED_ASSET = /^(?:[a-f0-9]{12}|chunk-[a-z0-9]+)\.js(?:\.map)?$/i;
|
|
22
|
+
|
|
23
|
+
const removeStaleBuildAssets = async (outdir: string, outputs: readonly Bun.BuildArtifact[]): Promise<number> => {
|
|
24
|
+
const current = new Set(outputs.map((output) => resolve(output.path)));
|
|
25
|
+
let removed = 0;
|
|
26
|
+
|
|
27
|
+
for await (const file of new Glob("*.js*").scan({ cwd: outdir, absolute: true })) {
|
|
28
|
+
const filename = file.slice(file.lastIndexOf("/") + 1);
|
|
29
|
+
if (!GENERATED_ASSET.test(filename) || current.has(resolve(file))) continue;
|
|
30
|
+
await unlink(file);
|
|
31
|
+
removed += 1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return removed;
|
|
35
|
+
};
|
|
18
36
|
|
|
19
37
|
/**
|
|
20
38
|
* Workaround for Bun bundler bug: duplicate export statements in shared chunks
|
|
@@ -73,9 +91,10 @@ export const buildIslands = async (options: {
|
|
|
73
91
|
cwd: string;
|
|
74
92
|
verbose: boolean;
|
|
75
93
|
dev?: boolean;
|
|
94
|
+
devSourcemap?: DevSourcemap;
|
|
76
95
|
external?: string[];
|
|
77
96
|
}): Promise<void> => {
|
|
78
|
-
const { pattern, outdir, cwd, verbose, dev = false, external } = options;
|
|
97
|
+
const { pattern, outdir, cwd, verbose, dev = false, devSourcemap = "linked", external } = options;
|
|
79
98
|
const resolvedCwd = resolve(cwd);
|
|
80
99
|
|
|
81
100
|
const totalStart = performance.now();
|
|
@@ -137,7 +156,7 @@ export const buildIslands = async (options: {
|
|
|
137
156
|
external,
|
|
138
157
|
minify: !dev,
|
|
139
158
|
splitting: true,
|
|
140
|
-
sourcemap: dev ?
|
|
159
|
+
sourcemap: dev ? devSourcemap : "none",
|
|
141
160
|
plugins: [
|
|
142
161
|
{
|
|
143
162
|
name: "solid-islands",
|
|
@@ -181,10 +200,15 @@ export const buildIslands = async (options: {
|
|
|
181
200
|
],
|
|
182
201
|
});
|
|
183
202
|
|
|
184
|
-
if (result.success
|
|
185
|
-
await
|
|
186
|
-
|
|
187
|
-
|
|
203
|
+
if (result.success) {
|
|
204
|
+
const removed = await removeStaleBuildAssets(outdir, result.outputs);
|
|
205
|
+
if (verbose && removed > 0) console.log(`Removed ${removed} stale build asset(s).`);
|
|
206
|
+
|
|
207
|
+
if (!dev) {
|
|
208
|
+
await dedupeSharedChunkExports(outdir, verbose);
|
|
209
|
+
} else if (verbose) {
|
|
210
|
+
console.log("Skipped shared-chunk export rewrite in dev mode.");
|
|
211
|
+
}
|
|
188
212
|
}
|
|
189
213
|
|
|
190
214
|
if (verbose) {
|
package/src/index.ts
CHANGED
|
@@ -9,7 +9,7 @@ import type { JSX } from "solid-js";
|
|
|
9
9
|
import type { BunPlugin } from "bun";
|
|
10
10
|
import { statSync } from "fs";
|
|
11
11
|
import { transform } from "./transform";
|
|
12
|
-
import { buildIslands } from "./build";
|
|
12
|
+
import { buildIslands, type DevSourcemap } from "./build";
|
|
13
13
|
import { join, dirname, resolve } from "path";
|
|
14
14
|
import { resolveIslandImport } from "./island-resolve";
|
|
15
15
|
import { normalizeBasePath, toSsrPath } from "./adapter/utils";
|
|
@@ -51,6 +51,8 @@ export type SsrOptions<T extends object = object> = {
|
|
|
51
51
|
basePath?: string;
|
|
52
52
|
/** Modules to exclude from the island bundle (passed to Bun.build) */
|
|
53
53
|
external?: string[];
|
|
54
|
+
/** Development island sourcemaps (default: "linked") */
|
|
55
|
+
devSourcemap?: DevSourcemap;
|
|
54
56
|
/** HTML template function (optional, has default) */
|
|
55
57
|
template?: (
|
|
56
58
|
ctx: {
|
|
@@ -112,7 +114,15 @@ export type SsrResult<T extends object> = {
|
|
|
112
114
|
* ```
|
|
113
115
|
*/
|
|
114
116
|
export const createConfig = <T extends object = object>(options: SsrOptions<T> = {}): SsrResult<T> => {
|
|
115
|
-
const {
|
|
117
|
+
const {
|
|
118
|
+
dev = false,
|
|
119
|
+
verbose,
|
|
120
|
+
external,
|
|
121
|
+
devSourcemap = "linked",
|
|
122
|
+
template,
|
|
123
|
+
rootDir: rootDirOption,
|
|
124
|
+
basePath: basePathOption,
|
|
125
|
+
} = options;
|
|
116
126
|
const rootDir = resolve(rootDirOption ?? process.cwd());
|
|
117
127
|
const basePath = normalizeBasePath(basePathOption);
|
|
118
128
|
const ssrPath = toSsrPath(basePath);
|
|
@@ -200,6 +210,7 @@ export const createConfig = <T extends object = object>(options: SsrOptions<T> =
|
|
|
200
210
|
cwd: rootDir,
|
|
201
211
|
verbose: verbose ?? !dev,
|
|
202
212
|
dev,
|
|
213
|
+
devSourcemap,
|
|
203
214
|
external,
|
|
204
215
|
});
|
|
205
216
|
};
|