@refrakt-md/sveltekit 0.15.0 → 0.16.0
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/dist/theme-hook.d.ts +15 -0
- package/dist/theme-hook.d.ts.map +1 -0
- package/dist/theme-hook.js +63 -0
- package/dist/theme-hook.js.map +1 -0
- package/package.json +8 -2
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Handle } from '@sveltejs/kit';
|
|
2
|
+
import { type ResolvedTintCascade } from '@refrakt-md/content';
|
|
3
|
+
/** Minimal shape this hook needs from the loaded Site (the real `getSite` from
|
|
4
|
+
* `virtual:refrakt/content` is structurally compatible). */
|
|
5
|
+
interface SiteLike {
|
|
6
|
+
pages: Array<{
|
|
7
|
+
route: {
|
|
8
|
+
url: string;
|
|
9
|
+
};
|
|
10
|
+
tintCascade?: ResolvedTintCascade;
|
|
11
|
+
}>;
|
|
12
|
+
}
|
|
13
|
+
export declare function createThemeHandle(getSite: () => Promise<SiteLike>): Handle;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=theme-hook.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-hook.d.ts","sourceRoot":"","sources":["../src/theme-hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAIN,KAAK,mBAAmB,EACxB,MAAM,qBAAqB,CAAC;AA6B7B;6DAC6D;AAC7D,UAAU,QAAQ;IACjB,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,WAAW,CAAC,EAAE,mBAAmB,CAAA;KAAE,CAAC,CAAC;CAC5E;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,GAAG,MAAM,CAuC1E"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { htmlTintAttributes, colorSchemeMetaContent, prePaintScript, } from '@refrakt-md/content';
|
|
2
|
+
/**
|
|
3
|
+
* Server-safe theme SSR plumbing for SvelteKit apps (SPEC-073).
|
|
4
|
+
*
|
|
5
|
+
* Imported from `@refrakt-md/sveltekit/hooks` (this entry deliberately avoids
|
|
6
|
+
* the Vite plugin so it can run in the server runtime). Returns a SvelteKit
|
|
7
|
+
* `Handle` that, per request, looks up the route's tint cascade and splices the
|
|
8
|
+
* no-flash chrome into the response: tint `data-*` attributes on `<html>`, the
|
|
9
|
+
* `color-scheme` meta, and the anti-FOIT pre-paint script — before any
|
|
10
|
+
* stylesheet so the saved theme applies before first paint.
|
|
11
|
+
*
|
|
12
|
+
* Apps wire it in one line instead of hand-rolling the boilerplate:
|
|
13
|
+
*
|
|
14
|
+
* ```ts
|
|
15
|
+
* // src/hooks.server.ts
|
|
16
|
+
* import { createThemeHandle } from '@refrakt-md/sveltekit/hooks';
|
|
17
|
+
* import { getSite } from '$lib/content';
|
|
18
|
+
* export const handle = createThemeHandle(getSite);
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* Compose with other handles via SvelteKit's `sequence()` when needed.
|
|
22
|
+
*/
|
|
23
|
+
const DEFAULT_CASCADE = {
|
|
24
|
+
tint: null,
|
|
25
|
+
tintMode: 'auto',
|
|
26
|
+
locked: false,
|
|
27
|
+
};
|
|
28
|
+
export function createThemeHandle(getSite) {
|
|
29
|
+
const PRE_PAINT_SCRIPT = prePaintScript();
|
|
30
|
+
/** Resolve a URL's cascade from the loaded Site's pages; a sensible default
|
|
31
|
+
* for URLs that don't match (SvelteKit-internal routes, sitemap, etc.). */
|
|
32
|
+
const cascadeForUrl = async (pathname) => {
|
|
33
|
+
try {
|
|
34
|
+
const site = await getSite();
|
|
35
|
+
const page = site.pages.find((p) => p.route.url === pathname);
|
|
36
|
+
return page?.tintCascade ?? DEFAULT_CASCADE;
|
|
37
|
+
}
|
|
38
|
+
catch (_) {
|
|
39
|
+
// Site load may fail during early bootstrap or in tests — fall back
|
|
40
|
+
// to the safe default rather than crashing the response.
|
|
41
|
+
return DEFAULT_CASCADE;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
return async ({ event, resolve }) => {
|
|
45
|
+
const cascade = await cascadeForUrl(event.url.pathname);
|
|
46
|
+
const htmlAttrs = htmlTintAttributes(cascade);
|
|
47
|
+
const metaScheme = colorSchemeMetaContent(cascade);
|
|
48
|
+
return resolve(event, {
|
|
49
|
+
transformPageChunk: ({ html }) => {
|
|
50
|
+
let result = html;
|
|
51
|
+
// Splice the cascade attrs inside the opening <html lang="en"> tag.
|
|
52
|
+
if (htmlAttrs) {
|
|
53
|
+
result = result.replace(/<html lang="en">/, `<html lang="en" ${htmlAttrs}>`);
|
|
54
|
+
}
|
|
55
|
+
// Pre-paint script + color-scheme meta just inside <head>, before
|
|
56
|
+
// any stylesheet, so the saved theme applies before first paint.
|
|
57
|
+
result = result.replace(/<head>/, `<head>\n\t\t<meta name="color-scheme" content="${metaScheme}" />\n\t\t<script>${PRE_PAINT_SCRIPT}</script>`);
|
|
58
|
+
return result;
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=theme-hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-hook.js","sourceRoot":"","sources":["../src/theme-hook.ts"],"names":[],"mappings":"AACA,OAAO,EACN,kBAAkB,EAClB,sBAAsB,EACtB,cAAc,GAEd,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,eAAe,GAAwB;IAC5C,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,KAAK;CACb,CAAC;AAQF,MAAM,UAAU,iBAAiB,CAAC,OAAgC;IACjE,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC;IAE1C;gFAC4E;IAC5E,MAAM,aAAa,GAAG,KAAK,EAAE,QAAgB,EAAgC,EAAE;QAC9E,IAAI,CAAC;YACJ,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE,CAAC;YAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC;YAC9D,OAAO,IAAI,EAAE,WAAW,IAAI,eAAe,CAAC;QAC7C,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACZ,oEAAoE;YACpE,yDAAyD;YACzD,OAAO,eAAe,CAAC;QACxB,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;QACnC,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC9C,MAAM,UAAU,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;QAEnD,OAAO,OAAO,CAAC,KAAK,EAAE;YACrB,kBAAkB,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;gBAChC,IAAI,MAAM,GAAG,IAAI,CAAC;gBAClB,oEAAoE;gBACpE,IAAI,SAAS,EAAE,CAAC;oBACf,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,mBAAmB,SAAS,GAAG,CAAC,CAAC;gBAC9E,CAAC;gBACD,kEAAkE;gBAClE,iEAAiE;gBACjE,MAAM,GAAG,MAAM,CAAC,OAAO,CACtB,QAAQ,EACR,kDAAkD,UAAU,qBAAqB,gBAAgB,WAAW,CAC5G,CAAC;gBACF,OAAO,MAAM,CAAC;YACf,CAAC;SACD,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@refrakt-md/sveltekit",
|
|
3
3
|
"description": "SvelteKit integration plugin for refrakt.md",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.16.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"default": "./dist/index.js"
|
|
23
23
|
},
|
|
24
|
+
"./hooks": {
|
|
25
|
+
"types": "./dist/theme-hook.d.ts",
|
|
26
|
+
"default": "./dist/theme-hook.js"
|
|
27
|
+
},
|
|
24
28
|
"./virtual": {
|
|
25
29
|
"types": "./virtual.d.ts"
|
|
26
30
|
}
|
|
@@ -33,9 +37,11 @@
|
|
|
33
37
|
"build": "tsc"
|
|
34
38
|
},
|
|
35
39
|
"dependencies": {
|
|
36
|
-
"@refrakt-md/
|
|
40
|
+
"@refrakt-md/content": "0.16.0",
|
|
41
|
+
"@refrakt-md/types": "0.16.0"
|
|
37
42
|
},
|
|
38
43
|
"peerDependencies": {
|
|
44
|
+
"@sveltejs/kit": ">=2.0.0",
|
|
39
45
|
"vite": ">=5.0.0"
|
|
40
46
|
}
|
|
41
47
|
}
|