@lukas_holdings/castdom 1.0.2 → 1.0.3
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 +6 -0
- package/bin/castdom.js +0 -0
- package/dist/astro.cjs +31 -13
- package/dist/astro.cjs.map +1 -1
- package/dist/astro.d.cts +8 -4
- package/dist/astro.d.ts +8 -4
- package/dist/astro.js +25 -7
- package/dist/astro.js.map +1 -1
- package/dist/{chunk-ZBJB7WVV.js → chunk-275VEEA7.js} +4 -4
- package/dist/{chunk-ZBJB7WVV.js.map → chunk-275VEEA7.js.map} +1 -1
- package/dist/chunk-4LFW65DU.js +38 -0
- package/dist/chunk-4LFW65DU.js.map +1 -0
- package/dist/{chunk-ONS533CQ.js → chunk-6RFGWOGG.js} +3 -3
- package/dist/{chunk-ONS533CQ.js.map → chunk-6RFGWOGG.js.map} +1 -1
- package/dist/{chunk-XS5HAU5E.cjs → chunk-ASS2BFPN.cjs} +8 -8
- package/dist/{chunk-XS5HAU5E.cjs.map → chunk-ASS2BFPN.cjs.map} +1 -1
- package/dist/{chunk-ORY4OMZ5.cjs → chunk-BDIAGFG5.cjs} +4 -4
- package/dist/{chunk-ORY4OMZ5.cjs.map → chunk-BDIAGFG5.cjs.map} +1 -1
- package/dist/{chunk-QLEBTZIB.cjs → chunk-C2D4NZQB.cjs} +7 -7
- package/dist/{chunk-QLEBTZIB.cjs.map → chunk-C2D4NZQB.cjs.map} +1 -1
- package/dist/{chunk-JRQ6EVQP.cjs → chunk-C3VW72Z3.cjs} +10 -2
- package/dist/chunk-C3VW72Z3.cjs.map +1 -0
- package/dist/{chunk-O4OOMGGM.cjs → chunk-CC4LCPVY.cjs} +8 -8
- package/dist/{chunk-O4OOMGGM.cjs.map → chunk-CC4LCPVY.cjs.map} +1 -1
- package/dist/{chunk-ZWZ5ZLJE.js → chunk-GVFBT6MD.js} +3 -3
- package/dist/{chunk-ZWZ5ZLJE.js.map → chunk-GVFBT6MD.js.map} +1 -1
- package/dist/{chunk-COLESJ66.js → chunk-M4OXJTRQ.js} +3 -3
- package/dist/{chunk-COLESJ66.js.map → chunk-M4OXJTRQ.js.map} +1 -1
- package/dist/{chunk-KGLTVTHU.js → chunk-V4FV5XFF.js} +4 -4
- package/dist/{chunk-KGLTVTHU.js.map → chunk-V4FV5XFF.js.map} +1 -1
- package/dist/{chunk-YDT4TPB7.cjs → chunk-W236FF4E.cjs} +11 -11
- package/dist/{chunk-YDT4TPB7.cjs.map → chunk-W236FF4E.cjs.map} +1 -1
- package/dist/cli.js +12 -12
- package/dist/index.cjs +48 -48
- package/dist/index.js +8 -8
- package/dist/next.cjs +15 -15
- package/dist/next.cjs.map +1 -1
- package/dist/next.d.cts +3 -3
- package/dist/next.d.ts +3 -3
- package/dist/next.js +6 -6
- package/dist/next.js.map +1 -1
- package/dist/react.cjs +9 -9
- package/dist/react.js +5 -5
- package/dist/ssr.cjs +12 -12
- package/dist/ssr.js +3 -3
- package/dist/vite.cjs +3 -3
- package/dist/vite.cjs.map +1 -1
- package/dist/vite.d.cts +1 -1
- package/dist/vite.d.ts +1 -1
- package/dist/vite.js +2 -2
- package/dist/vite.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-EJRNKHL5.js +0 -31
- package/dist/chunk-EJRNKHL5.js.map +0 -1
- package/dist/chunk-JRQ6EVQP.cjs.map +0 -1
package/dist/cli.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var V=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{resolve as S,join as ae}from"path";import{readFileSync as
|
|
2
|
+
var V=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{resolve as S,join as ae}from"path";import{readFileSync as J,writeFileSync as H,mkdirSync as ce,existsSync as C}from"fs";var p={outDir:".castdom",breakpoints:[375,768,1280],color:"#e0e0e0",shimmerColor:"#f0f0f0",animationDuration:1500,contentAware:!0,minBoneSize:4,classPrefix:"castdom",inlineStyles:!1,ssr:!0},v={text:1,heading:2,image:3,avatar:4,button:5,input:6,icon:7,divider:8,block:0},W=Object.fromEntries(Object.entries(v).map(([e,t])=>[t,e]));var B=new Set(["A","ABBR","B","BDO","BR","CITE","CODE","DFN","EM","I","KBD","MARK","Q","S","SAMP","SMALL","SPAN","STRONG","SUB","SUP","TIME","U","VAR","WBR"]),E=new Set(["SCRIPT","STYLE","NOSCRIPT","TEMPLATE","SVG","CANVAS","VIDEO","AUDIO","IFRAME","OBJECT","EMBED"]);function T(e){let t=e.tagName;if(t==="IMG"||t==="PICTURE"){let c=e.getBoundingClientRect().width,r=e.getBoundingClientRect().height;return Math.min(c,r)/Math.max(c,r)>.85&&c<120?"avatar":"image"}if(t==="INPUT"||t==="TEXTAREA"||t==="SELECT")return"input";if(t==="BUTTON"||e.getAttribute("role")==="button")return"button";if(t==="HR")return"divider";if(/^H[1-6]$/.test(t))return"heading";if(t==="SVG"||t==="svg")return"icon";let n=getComputedStyle(e),o=parseInt(n.borderRadius,10),a=e.getBoundingClientRect();if(o>=a.width/2&&a.width<120&&a.width>16)return"avatar";if(e.childNodes.length>0){let c=Array.from(e.childNodes).some(r=>r.nodeType===Node.TEXT_NODE&&r.textContent?.trim());if(c&&B.has(t)||c&&t==="P")return"text"}return"block"}function A(e,t){if(t==="avatar")return 9999;if(t==="button"){let a=getComputedStyle(e);return Math.min(parseInt(a.borderRadius,10)||6,9999)}let n=getComputedStyle(e),o=parseInt(n.borderRadius,10);return isNaN(o)?0:Math.min(o,9999)}function N(e){let t=getComputedStyle(e);if(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)===0)return!1;let n=e.getBoundingClientRect();return n.width>0&&n.height>0}function R(e,t){let n=e.tagName;return!!(n==="IMG"||n==="PICTURE"||n==="INPUT"||n==="TEXTAREA"||n==="SELECT"||n==="BUTTON"||n==="HR"||n==="SVG"||n==="svg"||t&&Array.from(e.childNodes).every(a=>a.nodeType===Node.TEXT_NODE||B.has(a.tagName))&&e.textContent?.trim()||e.children.length===0)}function X(e,t={}){let n=t.contentAware??p.contentAware,o=t.minBoneSize??p.minBoneSize,a=e.getBoundingClientRect(),c=[];function r(i){if(!E.has(i.tagName)&&N(i)){if(R(i,n)){let l=i.getBoundingClientRect();if(l.width<o||l.height<o)return;let s=n?T(i):"block",u=A(i,s);c.push({x:Math.round((l.left-a.left)*2)/2,y:Math.round((l.top-a.top)*2)/2,w:Math.round(l.width*2)/2,h:Math.round(l.height*2)/2,r:u,kind:s});return}for(let l of i.children)r(l)}}return r(e),{viewport:window.innerWidth,containerWidth:Math.round(a.width*2)/2,containerHeight:Math.round(a.height*2)/2,bones:c}}function I(e,t={}){return`
|
|
3
3
|
(function() {
|
|
4
4
|
${N.toString()}
|
|
5
5
|
${R.toString()}
|
|
@@ -27,15 +27,15 @@ export type CastDOMSkeletonName =
|
|
|
27
27
|
${e.map(n=>` | "${n.name}"`).join(`
|
|
28
28
|
`)};
|
|
29
29
|
|
|
30
|
-
declare module "castdom" {
|
|
30
|
+
declare module "@lukas_holdings/castdom" {
|
|
31
31
|
interface CastDOMRegistry {
|
|
32
32
|
${e.map(n=>` "${n.name}": true;`).join(`
|
|
33
33
|
`)}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
`}function
|
|
37
|
-
`});return r.push({path:`${n}/loader.js`,content:ie(e)}),r.push({path:`${n}/nextjs-loading.tsx`,content:se(e)}),r}function ne(e){let t=e.map(o=>`import ${
|
|
38
|
-
`),n=e.map(o=>` "${o.name}": ${
|
|
36
|
+
`}function K(e,t={}){let n=t.outDir??".castdom",o=t.splitFiles??!0,a=t.esm??!0,c=t.cjs??!1,r=[],i={version:1,generatedAt:Date.now(),skeletons:e};r.push({path:`${n}/manifest.json`,content:JSON.stringify(i,null,2)});let l=k(e,t.config);if(r.push({path:`${n}/castdom.css`,content:l}),a&&r.push({path:`${n}/index.js`,content:ne(e)}),c&&r.push({path:`${n}/index.cjs`,content:oe(e)}),r.push({path:`${n}/index.d.ts`,content:re(e)}),o)for(let s of e)r.push({path:`${n}/skeletons/${s.name}.json`,content:JSON.stringify(s,null,2)}),a&&r.push({path:`${n}/skeletons/${s.name}.js`,content:`export default ${JSON.stringify(s)};
|
|
37
|
+
`});return r.push({path:`${n}/loader.js`,content:ie(e)}),r.push({path:`${n}/nextjs-loading.tsx`,content:se(e)}),r}function ne(e){let t=e.map(o=>`import ${_(o.name)} from "./skeletons/${o.name}.json" with { type: "json" };`).join(`
|
|
38
|
+
`),n=e.map(o=>` "${o.name}": ${_(o.name)},`).join(`
|
|
39
39
|
`);return`// Auto-generated by CastDOM \u2014 do not edit
|
|
40
40
|
${t}
|
|
41
41
|
|
|
@@ -61,7 +61,7 @@ module.exports.skeletons = manifest.skeletons.reduce((acc, s) => {
|
|
|
61
61
|
return acc;
|
|
62
62
|
}, {});
|
|
63
63
|
`}function re(e){return`// Auto-generated by CastDOM \u2014 do not edit
|
|
64
|
-
import type { SkeletonData } from "castdom";
|
|
64
|
+
import type { SkeletonData } from "@lukas_holdings/castdom";
|
|
65
65
|
|
|
66
66
|
export type SkeletonName =
|
|
67
67
|
${e.map(n=>` | "${n.name}"`).join(`
|
|
@@ -80,7 +80,7 @@ export default manifest;
|
|
|
80
80
|
//
|
|
81
81
|
// import ".castdom/loader.js";
|
|
82
82
|
|
|
83
|
-
import { loadManifest } from "castdom";
|
|
83
|
+
import { loadManifest } from "@lukas_holdings/castdom";
|
|
84
84
|
import manifest from "./manifest.json" with { type: "json" };
|
|
85
85
|
|
|
86
86
|
loadManifest(manifest);
|
|
@@ -90,7 +90,7 @@ loadManifest(manifest);
|
|
|
90
90
|
//
|
|
91
91
|
// For multiple skeletons, use <CastDOM name="..."> directly.
|
|
92
92
|
|
|
93
|
-
import { CastDOM, CastDOMStyle } from "castdom/react";
|
|
93
|
+
import { CastDOM, CastDOMStyle } from "@lukas_holdings/castdom/react";
|
|
94
94
|
|
|
95
95
|
export default function Loading() {
|
|
96
96
|
return (
|
|
@@ -102,7 +102,7 @@ export default function Loading() {
|
|
|
102
102
|
</>
|
|
103
103
|
);
|
|
104
104
|
}
|
|
105
|
-
`}function
|
|
105
|
+
`}function _(e){return e.replace(/[^a-zA-Z0-9_$]/g,"_")}var O=`
|
|
106
106
|
CastDOM \u2014 Pixel-perfect skeleton screens from your real DOM
|
|
107
107
|
|
|
108
108
|
Usage:
|
|
@@ -121,15 +121,15 @@ Build options:
|
|
|
121
121
|
--headless Run browser in headless mode (default: true)
|
|
122
122
|
--no-headless Run browser with visible UI (for debugging)
|
|
123
123
|
--verbose Show detailed progress output
|
|
124
|
-
`.trim(),G="1.0.0";function le(e){let t={command:e[0]??"build",url:"http://localhost:3000",configPath:"castdom.config.json",outDir:p.outDir,breakpoints:[...p.breakpoints],headless:!0,verbose:!1};for(let n=1;n<e.length;n++)switch(e[n]){case"--url":t.url=e[++n]??t.url;break;case"--config":t.configPath=e[++n]??t.configPath;break;case"--out":t.outDir=e[++n]??t.outDir;break;case"--breakpoints":t.breakpoints=(e[++n]??"").split(",").map(Number).filter(a=>a>0);break;case"--headless":t.headless=!0;break;case"--no-headless":t.headless=!1;break;case"--verbose":t.verbose=!0;break;case"--help":case"-h":console.log(O),process.exit(0);case"--version":case"-v":console.log(G),process.exit(0)}return t}function P(e){let t=S(e);if(!C(t))return{};try{let n=
|
|
124
|
+
`.trim(),G="1.0.0";function le(e){let t={command:e[0]??"build",url:"http://localhost:3000",configPath:"castdom.config.json",outDir:p.outDir,breakpoints:[...p.breakpoints],headless:!0,verbose:!1};for(let n=1;n<e.length;n++)switch(e[n]){case"--url":t.url=e[++n]??t.url;break;case"--config":t.configPath=e[++n]??t.configPath;break;case"--out":t.outDir=e[++n]??t.outDir;break;case"--breakpoints":t.breakpoints=(e[++n]??"").split(",").map(Number).filter(a=>a>0);break;case"--headless":t.headless=!0;break;case"--no-headless":t.headless=!1;break;case"--verbose":t.verbose=!0;break;case"--help":case"-h":console.log(O),process.exit(0);case"--version":case"-v":console.log(G),process.exit(0)}return t}function P(e){let t=S(e);if(!C(t))return{};try{let n=J(t,"utf-8");return JSON.parse(n)}catch{return console.error(`Failed to parse config: ${t}`),{}}}function D(e,...t){e&&console.log(...t)}async function ue(e){let t=P(e.configPath),n=S(t.outDir??e.outDir),o=t.breakpoints??e.breakpoints,a=t.devServer??e.url,c=t.targets??[];c.length===0&&(console.log("No targets configured. Scanning for [data-castdom] elements..."),c.push({name:"auto",selector:"[data-castdom]"})),console.log(`
|
|
125
125
|
CastDOM Build`),console.log(` Server: ${a}`),console.log(` Breakpoints: ${o.join(", ")}px`),console.log(` Targets: ${c.length}`),console.log(` Output: ${n}
|
|
126
126
|
`);let r=Date.now(),i=await j({baseURL:a,targets:c,breakpoints:o,headless:e.headless,contentAware:t.contentAware??!0,minBoneSize:t.minBoneSize??p.minBoneSize,onProgress(m,g,x){D(e.verbose,` [${g}/${x}] ${m}`)}}),l=Date.now()-r;D(e.verbose,`
|
|
127
|
-
Extraction: ${l}ms`);let s=Date.now(),u=U(i),d=Date.now()-s;D(e.verbose,` Compilation: ${d}ms`);let b=
|
|
127
|
+
Extraction: ${l}ms`);let s=Date.now(),u=U(i),d=Date.now()-s;D(e.verbose,` Compilation: ${d}ms`);let b=K(u.manifest.skeletons,{outDir:n,config:t});for(let m of b){let g=m.path.substring(0,m.path.lastIndexOf("/"));ce(g,{recursive:!0}),H(m.path,m.content,"utf-8"),D(e.verbose,` Written: ${m.path}`)}let h=Date.now()-r;console.log(` Skeletons: ${u.stats.skeletonCount}`),console.log(` Bones: ${u.stats.totalBones}`),console.log(` Raw size: ${(u.stats.rawSize/1024).toFixed(1)} KB`),console.log(` Compressed: ${(u.stats.compressedSize/1024).toFixed(1)} KB (${(u.stats.compressionRatio*100).toFixed(0)}% smaller)`),console.log(` Files: ${b.length}`),console.log(` Total time: ${h}ms`),console.log(`
|
|
128
128
|
Done. Import the loader to register:
|
|
129
129
|
`),console.log(` import "${n}/loader.js";
|
|
130
130
|
`)}function me(e){let t=S(e.configPath);if(C(t)){console.log(`Config already exists: ${t}`);return}H(t,JSON.stringify({devServer:"http://localhost:3000",outDir:".castdom",breakpoints:[375,768,1280],color:"#e0e0e0",shimmerColor:"#f0f0f0",animationDuration:1500,contentAware:!0,minBoneSize:4,targets:[{name:"example-card",selector:'[data-castdom="example-card"]',route:"/"}]},null,2)+`
|
|
131
131
|
`,"utf-8"),console.log(`Created: ${t}`),console.log(`
|
|
132
132
|
Edit the "targets" array to define your skeleton targets.`),console.log(`Then run: npx castdom build
|
|
133
|
-
`)}function de(e){let t=P(e.configPath),n=S(t.outDir??e.outDir),o=ae(n,"manifest.json");if(!C(o)){console.log('No manifest found. Run "npx castdom build" first.');return}let c=JSON.parse(
|
|
133
|
+
`)}function de(e){let t=P(e.configPath),n=S(t.outDir??e.outDir),o=ae(n,"manifest.json");if(!C(o)){console.log('No manifest found. Run "npx castdom build" first.');return}let c=JSON.parse(J(o,"utf-8")).skeletons??[];console.log(`
|
|
134
134
|
CastDOM Skeletons (${c.length}):
|
|
135
135
|
`);for(let r of c){let i=r.breakpoints.reduce((s,u)=>s+u.bones.length,0),l=r.breakpoints.map(s=>`${s.viewport}px`).join(", ");console.log(` ${r.name}`),console.log(` Bones: ${i} | Breakpoints: ${l} | Hash: ${r.hash}`)}console.log()}function pe(e){let t=P(e.configPath),n=S(t.outDir??e.outDir);if(!C(n)){console.log("Nothing to clean.");return}let{rmSync:o}=V("fs");o(n,{recursive:!0,force:!0}),console.log(`Removed: ${n}`)}async function fe(){let e=process.argv.slice(2);if(e.length===0||e[0]==="--help"||e[0]==="-h"){console.log(O);return}if(e[0]==="--version"||e[0]==="-v"){console.log(G);return}let t=le(e);switch(t.command){case"build":await ue(t);break;case"init":me(t);break;case"list":de(t);break;case"clean":pe(t);break;default:console.error(`Unknown command: ${t.command}`),console.log(O),process.exit(1)}}fe().catch(e=>{console.error("CastDOM error:",e.message??e),process.exit(1)});
|
package/dist/index.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
3
|
+
var chunkBDIAGFG5_cjs = require('./chunk-BDIAGFG5.cjs');
|
|
4
|
+
var chunkW236FF4E_cjs = require('./chunk-W236FF4E.cjs');
|
|
5
|
+
var chunkASS2BFPN_cjs = require('./chunk-ASS2BFPN.cjs');
|
|
6
|
+
var chunkC3VW72Z3_cjs = require('./chunk-C3VW72Z3.cjs');
|
|
7
7
|
|
|
8
8
|
// src/core/compress.ts
|
|
9
9
|
function compressBones(bp) {
|
|
@@ -17,7 +17,7 @@ function compressBones(bp) {
|
|
|
17
17
|
const w = Math.round(bone.w * 2);
|
|
18
18
|
const h = Math.round(bone.h * 2);
|
|
19
19
|
const r = Math.round(bone.r * 2);
|
|
20
|
-
const kind =
|
|
20
|
+
const kind = chunkC3VW72Z3_cjs.BONE_KIND_INDEX[bone.kind ?? "block"];
|
|
21
21
|
data.push(x - prevX, y - prevY, w, h, r, kind);
|
|
22
22
|
prevX = x;
|
|
23
23
|
prevY = y;
|
|
@@ -52,7 +52,7 @@ function decompressBones(compressed) {
|
|
|
52
52
|
w: w / 2,
|
|
53
53
|
h: h / 2,
|
|
54
54
|
r: r / 2,
|
|
55
|
-
kind:
|
|
55
|
+
kind: chunkC3VW72Z3_cjs.BONE_KIND_FROM_INDEX[kindIdx] ?? "block"
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
58
|
return {
|
|
@@ -113,8 +113,8 @@ function decodeBonesToBase64(b64) {
|
|
|
113
113
|
// src/core/animation.ts
|
|
114
114
|
function generateKeyframes(config) {
|
|
115
115
|
const type = config?.type ?? "shimmer";
|
|
116
|
-
const prefix = config?.classPrefix ??
|
|
117
|
-
config?.duration ??
|
|
116
|
+
const prefix = config?.classPrefix ?? chunkC3VW72Z3_cjs.DEFAULTS.classPrefix;
|
|
117
|
+
config?.duration ?? chunkC3VW72Z3_cjs.DEFAULTS.animationDuration;
|
|
118
118
|
switch (type) {
|
|
119
119
|
case "shimmer":
|
|
120
120
|
return `@keyframes ${prefix}-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
|
|
@@ -128,10 +128,10 @@ function generateKeyframes(config) {
|
|
|
128
128
|
}
|
|
129
129
|
function generateBoneAnimation(config) {
|
|
130
130
|
const type = config?.type ?? "shimmer";
|
|
131
|
-
const prefix = config?.classPrefix ??
|
|
132
|
-
const duration = config?.duration ??
|
|
133
|
-
const color = config?.color ??
|
|
134
|
-
const shimmerColor = config?.shimmerColor ??
|
|
131
|
+
const prefix = config?.classPrefix ?? chunkC3VW72Z3_cjs.DEFAULTS.classPrefix;
|
|
132
|
+
const duration = config?.duration ?? chunkC3VW72Z3_cjs.DEFAULTS.animationDuration;
|
|
133
|
+
const color = config?.color ?? chunkC3VW72Z3_cjs.DEFAULTS.color;
|
|
134
|
+
const shimmerColor = config?.shimmerColor ?? chunkC3VW72Z3_cjs.DEFAULTS.shimmerColor;
|
|
135
135
|
switch (type) {
|
|
136
136
|
case "shimmer":
|
|
137
137
|
return `background:linear-gradient(90deg,${color} 25%,${shimmerColor} 50%,${color} 75%);background-size:200% 100%;animation:${prefix}-shimmer ${duration}ms ease-in-out infinite`;
|
|
@@ -144,7 +144,7 @@ function generateBoneAnimation(config) {
|
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
function generateStaggerCSS(skeletonName, boneCount, config) {
|
|
147
|
-
const prefix = config?.classPrefix ??
|
|
147
|
+
const prefix = config?.classPrefix ?? chunkC3VW72Z3_cjs.DEFAULTS.classPrefix;
|
|
148
148
|
const stagger = config?.stagger ?? 50;
|
|
149
149
|
const rules = [];
|
|
150
150
|
for (let i = 0; i < boneCount; i++) {
|
|
@@ -155,7 +155,7 @@ function generateStaggerCSS(skeletonName, boneCount, config) {
|
|
|
155
155
|
return rules.join("");
|
|
156
156
|
}
|
|
157
157
|
function generateAnimationCSS(skeletonName, boneCount, config) {
|
|
158
|
-
const prefix = config?.classPrefix ??
|
|
158
|
+
const prefix = config?.classPrefix ?? chunkC3VW72Z3_cjs.DEFAULTS.classPrefix;
|
|
159
159
|
const type = config?.type ?? "shimmer";
|
|
160
160
|
const parts = [];
|
|
161
161
|
const kf = generateKeyframes(config);
|
|
@@ -273,8 +273,8 @@ function isLeaf(el, contentAware) {
|
|
|
273
273
|
return false;
|
|
274
274
|
}
|
|
275
275
|
function extractBones(container, options = {}) {
|
|
276
|
-
const contentAware = options.contentAware ??
|
|
277
|
-
const minSize = options.minBoneSize ??
|
|
276
|
+
const contentAware = options.contentAware ?? chunkC3VW72Z3_cjs.DEFAULTS.contentAware;
|
|
277
|
+
const minSize = options.minBoneSize ?? chunkC3VW72Z3_cjs.DEFAULTS.minBoneSize;
|
|
278
278
|
const containerRect = container.getBoundingClientRect();
|
|
279
279
|
const bones = [];
|
|
280
280
|
function walk(el) {
|
|
@@ -350,13 +350,13 @@ function createCastDOM(config) {
|
|
|
350
350
|
}
|
|
351
351
|
return {
|
|
352
352
|
loadManifest(manifest) {
|
|
353
|
-
|
|
353
|
+
chunkW236FF4E_cjs.loadManifest(manifest);
|
|
354
354
|
},
|
|
355
355
|
register(data) {
|
|
356
|
-
|
|
356
|
+
chunkW236FF4E_cjs.register(data);
|
|
357
357
|
},
|
|
358
358
|
show(name, container) {
|
|
359
|
-
const entry =
|
|
359
|
+
const entry = chunkW236FF4E_cjs.get(name);
|
|
360
360
|
if (!entry) {
|
|
361
361
|
console.warn(`CastDOM: Skeleton "${name}" not found in registry`);
|
|
362
362
|
return;
|
|
@@ -371,11 +371,11 @@ function createCastDOM(config) {
|
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
373
|
const vw = typeof window !== "undefined" ? window.innerWidth : 1280;
|
|
374
|
-
const bp =
|
|
374
|
+
const bp = chunkBDIAGFG5_cjs.selectBreakpoint(entry.data, vw);
|
|
375
375
|
if (!bp) return;
|
|
376
376
|
const skeletonDiv = document.createElement("div");
|
|
377
377
|
skeletonDiv.setAttribute(SKELETON_ATTR, name);
|
|
378
|
-
skeletonDiv.innerHTML =
|
|
378
|
+
skeletonDiv.innerHTML = chunkASS2BFPN_cjs.renderStandalone(entry.data, config);
|
|
379
379
|
container.appendChild(skeletonDiv);
|
|
380
380
|
activeContainers.add(container);
|
|
381
381
|
},
|
|
@@ -398,15 +398,15 @@ function createCastDOM(config) {
|
|
|
398
398
|
}
|
|
399
399
|
},
|
|
400
400
|
html(name, viewportWidth) {
|
|
401
|
-
const entry =
|
|
401
|
+
const entry = chunkW236FF4E_cjs.get(name);
|
|
402
402
|
if (!entry) return "";
|
|
403
|
-
return
|
|
403
|
+
return chunkASS2BFPN_cjs.renderStandalone(entry.data, config);
|
|
404
404
|
},
|
|
405
405
|
css() {
|
|
406
|
-
return
|
|
406
|
+
return chunkASS2BFPN_cjs.generateCriticalCSS(
|
|
407
407
|
Array.from(activeContainers).map((c) => {
|
|
408
408
|
const name = c.querySelector(`[${SKELETON_ATTR}]`)?.getAttribute(SKELETON_ATTR);
|
|
409
|
-
return name ?
|
|
409
|
+
return name ? chunkW236FF4E_cjs.get(name)?.data : void 0;
|
|
410
410
|
}).filter(Boolean),
|
|
411
411
|
config
|
|
412
412
|
);
|
|
@@ -435,95 +435,95 @@ function createCastDOM(config) {
|
|
|
435
435
|
|
|
436
436
|
Object.defineProperty(exports, "diffBreakpoints", {
|
|
437
437
|
enumerable: true,
|
|
438
|
-
get: function () { return
|
|
438
|
+
get: function () { return chunkBDIAGFG5_cjs.diffBreakpoints; }
|
|
439
439
|
});
|
|
440
440
|
Object.defineProperty(exports, "getStaleBreakpoints", {
|
|
441
441
|
enumerable: true,
|
|
442
|
-
get: function () { return
|
|
442
|
+
get: function () { return chunkBDIAGFG5_cjs.getStaleBreakpoints; }
|
|
443
443
|
});
|
|
444
444
|
Object.defineProperty(exports, "interpolateBones", {
|
|
445
445
|
enumerable: true,
|
|
446
|
-
get: function () { return
|
|
446
|
+
get: function () { return chunkBDIAGFG5_cjs.interpolateBones; }
|
|
447
447
|
});
|
|
448
448
|
Object.defineProperty(exports, "selectBreakpoint", {
|
|
449
449
|
enumerable: true,
|
|
450
|
-
get: function () { return
|
|
450
|
+
get: function () { return chunkBDIAGFG5_cjs.selectBreakpoint; }
|
|
451
451
|
});
|
|
452
452
|
Object.defineProperty(exports, "validateBreakpoints", {
|
|
453
453
|
enumerable: true,
|
|
454
|
-
get: function () { return
|
|
454
|
+
get: function () { return chunkBDIAGFG5_cjs.validateBreakpoints; }
|
|
455
455
|
});
|
|
456
456
|
Object.defineProperty(exports, "clear", {
|
|
457
457
|
enumerable: true,
|
|
458
|
-
get: function () { return
|
|
458
|
+
get: function () { return chunkW236FF4E_cjs.clear; }
|
|
459
459
|
});
|
|
460
460
|
Object.defineProperty(exports, "configure", {
|
|
461
461
|
enumerable: true,
|
|
462
|
-
get: function () { return
|
|
462
|
+
get: function () { return chunkW236FF4E_cjs.configure; }
|
|
463
463
|
});
|
|
464
464
|
Object.defineProperty(exports, "get", {
|
|
465
465
|
enumerable: true,
|
|
466
|
-
get: function () { return
|
|
466
|
+
get: function () { return chunkW236FF4E_cjs.get; }
|
|
467
467
|
});
|
|
468
468
|
Object.defineProperty(exports, "getAllCSS", {
|
|
469
469
|
enumerable: true,
|
|
470
|
-
get: function () { return
|
|
470
|
+
get: function () { return chunkW236FF4E_cjs.getAllCSS; }
|
|
471
471
|
});
|
|
472
472
|
Object.defineProperty(exports, "has", {
|
|
473
473
|
enumerable: true,
|
|
474
|
-
get: function () { return
|
|
474
|
+
get: function () { return chunkW236FF4E_cjs.has; }
|
|
475
475
|
});
|
|
476
476
|
Object.defineProperty(exports, "loadManifest", {
|
|
477
477
|
enumerable: true,
|
|
478
|
-
get: function () { return
|
|
478
|
+
get: function () { return chunkW236FF4E_cjs.loadManifest; }
|
|
479
479
|
});
|
|
480
480
|
Object.defineProperty(exports, "names", {
|
|
481
481
|
enumerable: true,
|
|
482
|
-
get: function () { return
|
|
482
|
+
get: function () { return chunkW236FF4E_cjs.names; }
|
|
483
483
|
});
|
|
484
484
|
Object.defineProperty(exports, "register", {
|
|
485
485
|
enumerable: true,
|
|
486
|
-
get: function () { return
|
|
486
|
+
get: function () { return chunkW236FF4E_cjs.register; }
|
|
487
487
|
});
|
|
488
488
|
Object.defineProperty(exports, "registerAll", {
|
|
489
489
|
enumerable: true,
|
|
490
|
-
get: function () { return
|
|
490
|
+
get: function () { return chunkW236FF4E_cjs.registerAll; }
|
|
491
491
|
});
|
|
492
492
|
Object.defineProperty(exports, "remove", {
|
|
493
493
|
enumerable: true,
|
|
494
|
-
get: function () { return
|
|
494
|
+
get: function () { return chunkW236FF4E_cjs.remove; }
|
|
495
495
|
});
|
|
496
496
|
Object.defineProperty(exports, "generateCSS", {
|
|
497
497
|
enumerable: true,
|
|
498
|
-
get: function () { return
|
|
498
|
+
get: function () { return chunkASS2BFPN_cjs.generateCSS; }
|
|
499
499
|
});
|
|
500
500
|
Object.defineProperty(exports, "generateCriticalCSS", {
|
|
501
501
|
enumerable: true,
|
|
502
|
-
get: function () { return
|
|
502
|
+
get: function () { return chunkASS2BFPN_cjs.generateCriticalCSS; }
|
|
503
503
|
});
|
|
504
504
|
Object.defineProperty(exports, "renderBonesHTML", {
|
|
505
505
|
enumerable: true,
|
|
506
|
-
get: function () { return
|
|
506
|
+
get: function () { return chunkASS2BFPN_cjs.renderBonesHTML; }
|
|
507
507
|
});
|
|
508
508
|
Object.defineProperty(exports, "renderResponsiveHTML", {
|
|
509
509
|
enumerable: true,
|
|
510
|
-
get: function () { return
|
|
510
|
+
get: function () { return chunkASS2BFPN_cjs.renderResponsiveHTML; }
|
|
511
511
|
});
|
|
512
512
|
Object.defineProperty(exports, "renderStandalone", {
|
|
513
513
|
enumerable: true,
|
|
514
|
-
get: function () { return
|
|
514
|
+
get: function () { return chunkASS2BFPN_cjs.renderStandalone; }
|
|
515
515
|
});
|
|
516
516
|
Object.defineProperty(exports, "BONE_KIND_FROM_INDEX", {
|
|
517
517
|
enumerable: true,
|
|
518
|
-
get: function () { return
|
|
518
|
+
get: function () { return chunkC3VW72Z3_cjs.BONE_KIND_FROM_INDEX; }
|
|
519
519
|
});
|
|
520
520
|
Object.defineProperty(exports, "BONE_KIND_INDEX", {
|
|
521
521
|
enumerable: true,
|
|
522
|
-
get: function () { return
|
|
522
|
+
get: function () { return chunkC3VW72Z3_cjs.BONE_KIND_INDEX; }
|
|
523
523
|
});
|
|
524
524
|
Object.defineProperty(exports, "DEFAULTS", {
|
|
525
525
|
enumerable: true,
|
|
526
|
-
get: function () { return
|
|
526
|
+
get: function () { return chunkC3VW72Z3_cjs.DEFAULTS; }
|
|
527
527
|
});
|
|
528
528
|
exports.compressBones = compressBones;
|
|
529
529
|
exports.createCastDOM = createCastDOM;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { selectBreakpoint } from './chunk-
|
|
2
|
-
export { diffBreakpoints, getStaleBreakpoints, interpolateBones, selectBreakpoint, validateBreakpoints } from './chunk-
|
|
3
|
-
import { get, register, loadManifest } from './chunk-
|
|
4
|
-
export { clear, configure, get, getAllCSS, has, loadManifest, names, register, registerAll, remove } from './chunk-
|
|
5
|
-
import { generateCriticalCSS, renderStandalone } from './chunk-
|
|
6
|
-
export { generateCSS, generateCriticalCSS, renderBonesHTML, renderResponsiveHTML, renderStandalone } from './chunk-
|
|
7
|
-
import { BONE_KIND_INDEX, BONE_KIND_FROM_INDEX, DEFAULTS } from './chunk-
|
|
8
|
-
export { BONE_KIND_FROM_INDEX, BONE_KIND_INDEX, DEFAULTS } from './chunk-
|
|
1
|
+
import { selectBreakpoint } from './chunk-6RFGWOGG.js';
|
|
2
|
+
export { diffBreakpoints, getStaleBreakpoints, interpolateBones, selectBreakpoint, validateBreakpoints } from './chunk-6RFGWOGG.js';
|
|
3
|
+
import { get, register, loadManifest } from './chunk-V4FV5XFF.js';
|
|
4
|
+
export { clear, configure, get, getAllCSS, has, loadManifest, names, register, registerAll, remove } from './chunk-V4FV5XFF.js';
|
|
5
|
+
import { generateCriticalCSS, renderStandalone } from './chunk-GVFBT6MD.js';
|
|
6
|
+
export { generateCSS, generateCriticalCSS, renderBonesHTML, renderResponsiveHTML, renderStandalone } from './chunk-GVFBT6MD.js';
|
|
7
|
+
import { BONE_KIND_INDEX, BONE_KIND_FROM_INDEX, DEFAULTS } from './chunk-4LFW65DU.js';
|
|
8
|
+
export { BONE_KIND_FROM_INDEX, BONE_KIND_INDEX, DEFAULTS } from './chunk-4LFW65DU.js';
|
|
9
9
|
|
|
10
10
|
// src/core/compress.ts
|
|
11
11
|
function compressBones(bp) {
|
package/dist/next.cjs
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('./chunk-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
require('./chunk-
|
|
3
|
+
var chunkCC4LCPVY_cjs = require('./chunk-CC4LCPVY.cjs');
|
|
4
|
+
require('./chunk-BDIAGFG5.cjs');
|
|
5
|
+
var chunkW236FF4E_cjs = require('./chunk-W236FF4E.cjs');
|
|
6
|
+
var chunkC2D4NZQB_cjs = require('./chunk-C2D4NZQB.cjs');
|
|
7
|
+
var chunkASS2BFPN_cjs = require('./chunk-ASS2BFPN.cjs');
|
|
8
|
+
require('./chunk-C3VW72Z3.cjs');
|
|
9
9
|
|
|
10
10
|
// src/adapters/nextjs.ts
|
|
11
11
|
function initCastDOM(manifest) {
|
|
12
|
-
|
|
12
|
+
chunkW236FF4E_cjs.loadManifest(manifest);
|
|
13
13
|
}
|
|
14
14
|
function getSkeletonProps(names, config) {
|
|
15
15
|
const skeletonHTML = {};
|
|
16
16
|
const skeletons = [];
|
|
17
17
|
for (const name of names) {
|
|
18
|
-
const entry =
|
|
18
|
+
const entry = chunkW236FF4E_cjs.get(name);
|
|
19
19
|
if (entry) {
|
|
20
|
-
skeletonHTML[name] =
|
|
20
|
+
skeletonHTML[name] = chunkC2D4NZQB_cjs.renderSkeleton(entry.data, { config });
|
|
21
21
|
skeletons.push(entry.data);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
return {
|
|
25
25
|
skeletonHTML,
|
|
26
|
-
skeletonCSS:
|
|
26
|
+
skeletonCSS: chunkASS2BFPN_cjs.generateCriticalCSS(skeletons, config)
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
function generateCastDOMHead(skeletonNames, config) {
|
|
30
30
|
const skeletons = [];
|
|
31
31
|
for (const name of skeletonNames) {
|
|
32
|
-
const entry =
|
|
32
|
+
const entry = chunkW236FF4E_cjs.get(name);
|
|
33
33
|
if (entry) skeletons.push(entry.data);
|
|
34
34
|
}
|
|
35
35
|
if (skeletons.length === 0) return "";
|
|
36
|
-
return [
|
|
36
|
+
return [chunkC2D4NZQB_cjs.renderCriticalStyleTag(skeletons, config), chunkC2D4NZQB_cjs.renderHydrationScript()].join("\n");
|
|
37
37
|
}
|
|
38
38
|
function withCastDOMConfig(nextConfig = {}) {
|
|
39
39
|
return {
|
|
@@ -47,15 +47,15 @@ function withCastDOMConfig(nextConfig = {}) {
|
|
|
47
47
|
|
|
48
48
|
Object.defineProperty(exports, "CastDOM", {
|
|
49
49
|
enumerable: true,
|
|
50
|
-
get: function () { return
|
|
50
|
+
get: function () { return chunkCC4LCPVY_cjs.CastDOM; }
|
|
51
51
|
});
|
|
52
52
|
Object.defineProperty(exports, "CastDOMStyle", {
|
|
53
53
|
enumerable: true,
|
|
54
|
-
get: function () { return
|
|
54
|
+
get: function () { return chunkCC4LCPVY_cjs.CastDOMStyle; }
|
|
55
55
|
});
|
|
56
56
|
Object.defineProperty(exports, "useCastDOM", {
|
|
57
57
|
enumerable: true,
|
|
58
|
-
get: function () { return
|
|
58
|
+
get: function () { return chunkCC4LCPVY_cjs.useCastDOM; }
|
|
59
59
|
});
|
|
60
60
|
exports.generateCastDOMHead = generateCastDOMHead;
|
|
61
61
|
exports.getSkeletonProps = getSkeletonProps;
|
package/dist/next.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/adapters/nextjs.ts"],"names":["loadManifest","get","renderSkeleton","generateCriticalCSS","renderCriticalStyleTag","renderHydrationScript"],"mappings":";;;;;;;;;;AA8CO,SAAS,YAAY,QAAA,EAA+C;AACzE,EAAAA,8BAAA,CAAa,QAAQ,CAAA;AACvB;AAaO,SAAS,gBAAA,CACd,OACA,MAAA,EAC+D;AAC/D,EAAA,MAAM,eAAuC,EAAC;AAC9C,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQC,sBAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,YAAA,CAAa,IAAI,CAAA,GAAIC,gCAAA,CAAe,MAAM,IAAA,EAAM,EAAE,QAAQ,CAAA;AAC1D,MAAA,SAAA,CAAU,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,WAAA,EAAaC,qCAAA,CAAoB,SAAA,EAAW,MAAM;AAAA,GACpD;AACF;AAaO,SAAS,mBAAA,CACd,eACA,MAAA,EACQ;AACR,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,aAAA,EAAe;AAChC,IAAA,MAAM,KAAA,GAAQF,sBAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAEnC,EAAA,OAAO,CAACG,yCAAuB,SAAA,EAAW,MAAM,GAAGC,uCAAA,EAAuB,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACvF;AAkCO,SAAS,iBAAA,CAAkB,UAAA,GAAsC,EAAC,EAA4B;AACnG,EAAA,OAAO;AAAA,IACL,GAAG,UAAA;AAAA,IACH,OAAA,CAAQ,QAAiC,OAAA,EAAkC;AAEzE,MAAA,MAAM,eAAA,GACJ,OAAO,UAAA,CAAW,OAAA,KAAY,aACzB,UAAA,CAAW,OAAA,CAAqB,MAAA,EAAQ,OAAO,CAAA,GAChD,MAAA;AAEN,MAAA,OAAO,eAAA;AAAA,IACT;AAAA,GACF;AACF","file":"next.cjs","sourcesContent":["import type { SkeletonData, CastDOMConfig } from \"../core/types.js\";\nimport { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from \"../seo/ssr.js\";\nimport { register, loadManifest, get as getFromRegistry } from \"../core/registry.js\";\nimport { generateCriticalCSS } from \"../core/renderer.js\";\n\n/**\n * Next.js adapter for CastDOM.\n *\n * Supports:\n * - App Router (React Server Components)\n * - Pages Router (getServerSideProps / getStaticProps)\n * - Automatic loading.tsx generation\n * - Middleware-based skeleton injection\n *\n * Usage (App Router):\n * ```tsx\n * // app/layout.tsx\n * import { CastDOMProvider } from \"castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <CastDOMProvider manifest={manifest}>\n * {children}\n * </CastDOMProvider>\n * );\n * }\n * ```\n *\n * Usage (Pages Router):\n * ```tsx\n * // pages/_app.tsx\n * import { initCastDOM } from \"castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * initCastDOM(manifest);\n * ```\n */\n\n// Re-export React components for convenience\nexport { CastDOM, CastDOMStyle, useCastDOM } from \"../components/react.js\";\n\n/**\n * Initialize CastDOM in a Next.js app.\n * Call once in _app.tsx or layout.tsx.\n */\nexport function initCastDOM(manifest: { skeletons: SkeletonData[] }): void {\n loadManifest(manifest);\n}\n\n/**\n * Server-side helper for getServerSideProps / getStaticProps.\n * Returns skeleton HTML that can be passed as props.\n *\n * ```ts\n * export async function getServerSideProps() {\n * const { skeletonHTML, skeletonCSS } = getSkeletonProps([\"user-card\", \"feed-item\"]);\n * return { props: { skeletonHTML, skeletonCSS } };\n * }\n * ```\n */\nexport function getSkeletonProps(\n names: string[],\n config?: Partial<CastDOMConfig>\n): { skeletonHTML: Record<string, string>; skeletonCSS: string } {\n const skeletonHTML: Record<string, string> = {};\n const skeletons: SkeletonData[] = [];\n\n for (const name of names) {\n const entry = getFromRegistry(name);\n if (entry) {\n skeletonHTML[name] = renderSkeleton(entry.data, { config });\n skeletons.push(entry.data);\n }\n }\n\n return {\n skeletonHTML,\n skeletonCSS: generateCriticalCSS(skeletons, config),\n };\n}\n\n/**\n * Next.js App Router metadata helper.\n * Generates <head> tags for skeleton critical CSS.\n *\n * ```tsx\n * // app/layout.tsx\n * import { generateCastDOMMetadata } from \"castdom/next\";\n *\n * export const metadata = generateCastDOMMetadata([\"user-card\"]);\n * ```\n */\nexport function generateCastDOMHead(\n skeletonNames: string[],\n config?: Partial<CastDOMConfig>\n): string {\n const skeletons: SkeletonData[] = [];\n\n for (const name of skeletonNames) {\n const entry = getFromRegistry(name);\n if (entry) skeletons.push(entry.data);\n }\n\n if (skeletons.length === 0) return \"\";\n\n return [renderCriticalStyleTag(skeletons, config), renderHydrationScript()].join(\"\\n\");\n}\n\n/**\n * Next.js middleware helper — injects skeleton HTML into streaming responses.\n * Use this for automatic skeleton injection without modifying page components.\n *\n * ```ts\n * // middleware.ts\n * import { withCastDOM } from \"castdom/next\";\n *\n * export default withCastDOM({\n * skeletons: { \"/dashboard\": \"dashboard-skeleton\" },\n * });\n * ```\n */\nexport interface CastDOMMiddlewareConfig {\n /** Map of route patterns to skeleton names */\n skeletons: Record<string, string | string[]>;\n /** Config overrides */\n config?: Partial<CastDOMConfig>;\n}\n\n/**\n * Create a Next.js config plugin that adds CastDOM webpack config.\n *\n * ```js\n * // next.config.js\n * const { withCastDOMConfig } = require(\"castdom/next\");\n *\n * module.exports = withCastDOMConfig({\n * // your next.js config\n * });\n * ```\n */\nexport function withCastDOMConfig(nextConfig: Record<string, unknown> = {}): Record<string, unknown> {\n return {\n ...nextConfig,\n webpack(config: Record<string, unknown>, options: Record<string, unknown>) {\n // Add .castdom to module resolution\n const existingWebpack =\n typeof nextConfig.webpack === \"function\"\n ? (nextConfig.webpack as Function)(config, options)\n : config;\n\n return existingWebpack;\n },\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/adapters/nextjs.ts"],"names":["loadManifest","get","renderSkeleton","generateCriticalCSS","renderCriticalStyleTag","renderHydrationScript"],"mappings":";;;;;;;;;;AA8CO,SAAS,YAAY,QAAA,EAA+C;AACzE,EAAAA,8BAAA,CAAa,QAAQ,CAAA;AACvB;AAaO,SAAS,gBAAA,CACd,OACA,MAAA,EAC+D;AAC/D,EAAA,MAAM,eAAuC,EAAC;AAC9C,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQC,sBAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,YAAA,CAAa,IAAI,CAAA,GAAIC,gCAAA,CAAe,MAAM,IAAA,EAAM,EAAE,QAAQ,CAAA;AAC1D,MAAA,SAAA,CAAU,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,WAAA,EAAaC,qCAAA,CAAoB,SAAA,EAAW,MAAM;AAAA,GACpD;AACF;AAaO,SAAS,mBAAA,CACd,eACA,MAAA,EACQ;AACR,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,aAAA,EAAe;AAChC,IAAA,MAAM,KAAA,GAAQF,sBAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAEnC,EAAA,OAAO,CAACG,yCAAuB,SAAA,EAAW,MAAM,GAAGC,uCAAA,EAAuB,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACvF;AAkCO,SAAS,iBAAA,CAAkB,UAAA,GAAsC,EAAC,EAA4B;AACnG,EAAA,OAAO;AAAA,IACL,GAAG,UAAA;AAAA,IACH,OAAA,CAAQ,QAAiC,OAAA,EAAkC;AAEzE,MAAA,MAAM,eAAA,GACJ,OAAO,UAAA,CAAW,OAAA,KAAY,aACzB,UAAA,CAAW,OAAA,CAAqB,MAAA,EAAQ,OAAO,CAAA,GAChD,MAAA;AAEN,MAAA,OAAO,eAAA;AAAA,IACT;AAAA,GACF;AACF","file":"next.cjs","sourcesContent":["import type { SkeletonData, CastDOMConfig } from \"../core/types.js\";\nimport { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from \"../seo/ssr.js\";\nimport { register, loadManifest, get as getFromRegistry } from \"../core/registry.js\";\nimport { generateCriticalCSS } from \"../core/renderer.js\";\n\n/**\n * Next.js adapter for CastDOM.\n *\n * Supports:\n * - App Router (React Server Components)\n * - Pages Router (getServerSideProps / getStaticProps)\n * - Automatic loading.tsx generation\n * - Middleware-based skeleton injection\n *\n * Usage (App Router):\n * ```tsx\n * // app/layout.tsx\n * import { CastDOMProvider } from \"@lukas_holdings/castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <CastDOMProvider manifest={manifest}>\n * {children}\n * </CastDOMProvider>\n * );\n * }\n * ```\n *\n * Usage (Pages Router):\n * ```tsx\n * // pages/_app.tsx\n * import { initCastDOM } from \"@lukas_holdings/castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * initCastDOM(manifest);\n * ```\n */\n\n// Re-export React components for convenience\nexport { CastDOM, CastDOMStyle, useCastDOM } from \"../components/react.js\";\n\n/**\n * Initialize CastDOM in a Next.js app.\n * Call once in _app.tsx or layout.tsx.\n */\nexport function initCastDOM(manifest: { skeletons: SkeletonData[] }): void {\n loadManifest(manifest);\n}\n\n/**\n * Server-side helper for getServerSideProps / getStaticProps.\n * Returns skeleton HTML that can be passed as props.\n *\n * ```ts\n * export async function getServerSideProps() {\n * const { skeletonHTML, skeletonCSS } = getSkeletonProps([\"user-card\", \"feed-item\"]);\n * return { props: { skeletonHTML, skeletonCSS } };\n * }\n * ```\n */\nexport function getSkeletonProps(\n names: string[],\n config?: Partial<CastDOMConfig>\n): { skeletonHTML: Record<string, string>; skeletonCSS: string } {\n const skeletonHTML: Record<string, string> = {};\n const skeletons: SkeletonData[] = [];\n\n for (const name of names) {\n const entry = getFromRegistry(name);\n if (entry) {\n skeletonHTML[name] = renderSkeleton(entry.data, { config });\n skeletons.push(entry.data);\n }\n }\n\n return {\n skeletonHTML,\n skeletonCSS: generateCriticalCSS(skeletons, config),\n };\n}\n\n/**\n * Next.js App Router metadata helper.\n * Generates <head> tags for skeleton critical CSS.\n *\n * ```tsx\n * // app/layout.tsx\n * import { generateCastDOMMetadata } from \"@lukas_holdings/castdom/next\";\n *\n * export const metadata = generateCastDOMMetadata([\"user-card\"]);\n * ```\n */\nexport function generateCastDOMHead(\n skeletonNames: string[],\n config?: Partial<CastDOMConfig>\n): string {\n const skeletons: SkeletonData[] = [];\n\n for (const name of skeletonNames) {\n const entry = getFromRegistry(name);\n if (entry) skeletons.push(entry.data);\n }\n\n if (skeletons.length === 0) return \"\";\n\n return [renderCriticalStyleTag(skeletons, config), renderHydrationScript()].join(\"\\n\");\n}\n\n/**\n * Next.js middleware helper — injects skeleton HTML into streaming responses.\n * Use this for automatic skeleton injection without modifying page components.\n *\n * ```ts\n * // middleware.ts\n * import { withCastDOM } from \"@lukas_holdings/castdom/next\";\n *\n * export default withCastDOM({\n * skeletons: { \"/dashboard\": \"dashboard-skeleton\" },\n * });\n * ```\n */\nexport interface CastDOMMiddlewareConfig {\n /** Map of route patterns to skeleton names */\n skeletons: Record<string, string | string[]>;\n /** Config overrides */\n config?: Partial<CastDOMConfig>;\n}\n\n/**\n * Create a Next.js config plugin that adds CastDOM webpack config.\n *\n * ```js\n * // next.config.js\n * const { withCastDOMConfig } = require(\"@lukas_holdings/castdom/next\");\n *\n * module.exports = withCastDOMConfig({\n * // your next.js config\n * });\n * ```\n */\nexport function withCastDOMConfig(nextConfig: Record<string, unknown> = {}): Record<string, unknown> {\n return {\n ...nextConfig,\n webpack(config: Record<string, unknown>, options: Record<string, unknown>) {\n // Add .castdom to module resolution\n const existingWebpack =\n typeof nextConfig.webpack === \"function\"\n ? (nextConfig.webpack as Function)(config, options)\n : config;\n\n return existingWebpack;\n },\n };\n}\n"]}
|
package/dist/next.d.cts
CHANGED
|
@@ -30,7 +30,7 @@ declare function getSkeletonProps(names: string[], config?: Partial<CastDOMConfi
|
|
|
30
30
|
*
|
|
31
31
|
* ```tsx
|
|
32
32
|
* // app/layout.tsx
|
|
33
|
-
* import { generateCastDOMMetadata } from "castdom/next";
|
|
33
|
+
* import { generateCastDOMMetadata } from "@lukas_holdings/castdom/next";
|
|
34
34
|
*
|
|
35
35
|
* export const metadata = generateCastDOMMetadata(["user-card"]);
|
|
36
36
|
* ```
|
|
@@ -42,7 +42,7 @@ declare function generateCastDOMHead(skeletonNames: string[], config?: Partial<C
|
|
|
42
42
|
*
|
|
43
43
|
* ```ts
|
|
44
44
|
* // middleware.ts
|
|
45
|
-
* import { withCastDOM } from "castdom/next";
|
|
45
|
+
* import { withCastDOM } from "@lukas_holdings/castdom/next";
|
|
46
46
|
*
|
|
47
47
|
* export default withCastDOM({
|
|
48
48
|
* skeletons: { "/dashboard": "dashboard-skeleton" },
|
|
@@ -60,7 +60,7 @@ interface CastDOMMiddlewareConfig {
|
|
|
60
60
|
*
|
|
61
61
|
* ```js
|
|
62
62
|
* // next.config.js
|
|
63
|
-
* const { withCastDOMConfig } = require("castdom/next");
|
|
63
|
+
* const { withCastDOMConfig } = require("@lukas_holdings/castdom/next");
|
|
64
64
|
*
|
|
65
65
|
* module.exports = withCastDOMConfig({
|
|
66
66
|
* // your next.js config
|
package/dist/next.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ declare function getSkeletonProps(names: string[], config?: Partial<CastDOMConfi
|
|
|
30
30
|
*
|
|
31
31
|
* ```tsx
|
|
32
32
|
* // app/layout.tsx
|
|
33
|
-
* import { generateCastDOMMetadata } from "castdom/next";
|
|
33
|
+
* import { generateCastDOMMetadata } from "@lukas_holdings/castdom/next";
|
|
34
34
|
*
|
|
35
35
|
* export const metadata = generateCastDOMMetadata(["user-card"]);
|
|
36
36
|
* ```
|
|
@@ -42,7 +42,7 @@ declare function generateCastDOMHead(skeletonNames: string[], config?: Partial<C
|
|
|
42
42
|
*
|
|
43
43
|
* ```ts
|
|
44
44
|
* // middleware.ts
|
|
45
|
-
* import { withCastDOM } from "castdom/next";
|
|
45
|
+
* import { withCastDOM } from "@lukas_holdings/castdom/next";
|
|
46
46
|
*
|
|
47
47
|
* export default withCastDOM({
|
|
48
48
|
* skeletons: { "/dashboard": "dashboard-skeleton" },
|
|
@@ -60,7 +60,7 @@ interface CastDOMMiddlewareConfig {
|
|
|
60
60
|
*
|
|
61
61
|
* ```js
|
|
62
62
|
* // next.config.js
|
|
63
|
-
* const { withCastDOMConfig } = require("castdom/next");
|
|
63
|
+
* const { withCastDOMConfig } = require("@lukas_holdings/castdom/next");
|
|
64
64
|
*
|
|
65
65
|
* module.exports = withCastDOMConfig({
|
|
66
66
|
* // your next.js config
|
package/dist/next.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { CastDOM, CastDOMStyle, useCastDOM } from './chunk-
|
|
2
|
-
import './chunk-
|
|
3
|
-
import { loadManifest, get } from './chunk-
|
|
4
|
-
import { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from './chunk-
|
|
5
|
-
import { generateCriticalCSS } from './chunk-
|
|
6
|
-
import './chunk-
|
|
1
|
+
export { CastDOM, CastDOMStyle, useCastDOM } from './chunk-275VEEA7.js';
|
|
2
|
+
import './chunk-6RFGWOGG.js';
|
|
3
|
+
import { loadManifest, get } from './chunk-V4FV5XFF.js';
|
|
4
|
+
import { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from './chunk-M4OXJTRQ.js';
|
|
5
|
+
import { generateCriticalCSS } from './chunk-GVFBT6MD.js';
|
|
6
|
+
import './chunk-4LFW65DU.js';
|
|
7
7
|
|
|
8
8
|
// src/adapters/nextjs.ts
|
|
9
9
|
function initCastDOM(manifest) {
|
package/dist/next.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/adapters/nextjs.ts"],"names":[],"mappings":";;;;;;;;AA8CO,SAAS,YAAY,QAAA,EAA+C;AACzE,EAAA,YAAA,CAAa,QAAQ,CAAA;AACvB;AAaO,SAAS,gBAAA,CACd,OACA,MAAA,EAC+D;AAC/D,EAAA,MAAM,eAAuC,EAAC;AAC9C,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,IAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,YAAA,CAAa,IAAI,CAAA,GAAI,cAAA,CAAe,MAAM,IAAA,EAAM,EAAE,QAAQ,CAAA;AAC1D,MAAA,SAAA,CAAU,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,WAAA,EAAa,mBAAA,CAAoB,SAAA,EAAW,MAAM;AAAA,GACpD;AACF;AAaO,SAAS,mBAAA,CACd,eACA,MAAA,EACQ;AACR,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,aAAA,EAAe;AAChC,IAAA,MAAM,KAAA,GAAQ,IAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAEnC,EAAA,OAAO,CAAC,uBAAuB,SAAA,EAAW,MAAM,GAAG,qBAAA,EAAuB,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACvF;AAkCO,SAAS,iBAAA,CAAkB,UAAA,GAAsC,EAAC,EAA4B;AACnG,EAAA,OAAO;AAAA,IACL,GAAG,UAAA;AAAA,IACH,OAAA,CAAQ,QAAiC,OAAA,EAAkC;AAEzE,MAAA,MAAM,eAAA,GACJ,OAAO,UAAA,CAAW,OAAA,KAAY,aACzB,UAAA,CAAW,OAAA,CAAqB,MAAA,EAAQ,OAAO,CAAA,GAChD,MAAA;AAEN,MAAA,OAAO,eAAA;AAAA,IACT;AAAA,GACF;AACF","file":"next.js","sourcesContent":["import type { SkeletonData, CastDOMConfig } from \"../core/types.js\";\nimport { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from \"../seo/ssr.js\";\nimport { register, loadManifest, get as getFromRegistry } from \"../core/registry.js\";\nimport { generateCriticalCSS } from \"../core/renderer.js\";\n\n/**\n * Next.js adapter for CastDOM.\n *\n * Supports:\n * - App Router (React Server Components)\n * - Pages Router (getServerSideProps / getStaticProps)\n * - Automatic loading.tsx generation\n * - Middleware-based skeleton injection\n *\n * Usage (App Router):\n * ```tsx\n * // app/layout.tsx\n * import { CastDOMProvider } from \"castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <CastDOMProvider manifest={manifest}>\n * {children}\n * </CastDOMProvider>\n * );\n * }\n * ```\n *\n * Usage (Pages Router):\n * ```tsx\n * // pages/_app.tsx\n * import { initCastDOM } from \"castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * initCastDOM(manifest);\n * ```\n */\n\n// Re-export React components for convenience\nexport { CastDOM, CastDOMStyle, useCastDOM } from \"../components/react.js\";\n\n/**\n * Initialize CastDOM in a Next.js app.\n * Call once in _app.tsx or layout.tsx.\n */\nexport function initCastDOM(manifest: { skeletons: SkeletonData[] }): void {\n loadManifest(manifest);\n}\n\n/**\n * Server-side helper for getServerSideProps / getStaticProps.\n * Returns skeleton HTML that can be passed as props.\n *\n * ```ts\n * export async function getServerSideProps() {\n * const { skeletonHTML, skeletonCSS } = getSkeletonProps([\"user-card\", \"feed-item\"]);\n * return { props: { skeletonHTML, skeletonCSS } };\n * }\n * ```\n */\nexport function getSkeletonProps(\n names: string[],\n config?: Partial<CastDOMConfig>\n): { skeletonHTML: Record<string, string>; skeletonCSS: string } {\n const skeletonHTML: Record<string, string> = {};\n const skeletons: SkeletonData[] = [];\n\n for (const name of names) {\n const entry = getFromRegistry(name);\n if (entry) {\n skeletonHTML[name] = renderSkeleton(entry.data, { config });\n skeletons.push(entry.data);\n }\n }\n\n return {\n skeletonHTML,\n skeletonCSS: generateCriticalCSS(skeletons, config),\n };\n}\n\n/**\n * Next.js App Router metadata helper.\n * Generates <head> tags for skeleton critical CSS.\n *\n * ```tsx\n * // app/layout.tsx\n * import { generateCastDOMMetadata } from \"castdom/next\";\n *\n * export const metadata = generateCastDOMMetadata([\"user-card\"]);\n * ```\n */\nexport function generateCastDOMHead(\n skeletonNames: string[],\n config?: Partial<CastDOMConfig>\n): string {\n const skeletons: SkeletonData[] = [];\n\n for (const name of skeletonNames) {\n const entry = getFromRegistry(name);\n if (entry) skeletons.push(entry.data);\n }\n\n if (skeletons.length === 0) return \"\";\n\n return [renderCriticalStyleTag(skeletons, config), renderHydrationScript()].join(\"\\n\");\n}\n\n/**\n * Next.js middleware helper — injects skeleton HTML into streaming responses.\n * Use this for automatic skeleton injection without modifying page components.\n *\n * ```ts\n * // middleware.ts\n * import { withCastDOM } from \"castdom/next\";\n *\n * export default withCastDOM({\n * skeletons: { \"/dashboard\": \"dashboard-skeleton\" },\n * });\n * ```\n */\nexport interface CastDOMMiddlewareConfig {\n /** Map of route patterns to skeleton names */\n skeletons: Record<string, string | string[]>;\n /** Config overrides */\n config?: Partial<CastDOMConfig>;\n}\n\n/**\n * Create a Next.js config plugin that adds CastDOM webpack config.\n *\n * ```js\n * // next.config.js\n * const { withCastDOMConfig } = require(\"castdom/next\");\n *\n * module.exports = withCastDOMConfig({\n * // your next.js config\n * });\n * ```\n */\nexport function withCastDOMConfig(nextConfig: Record<string, unknown> = {}): Record<string, unknown> {\n return {\n ...nextConfig,\n webpack(config: Record<string, unknown>, options: Record<string, unknown>) {\n // Add .castdom to module resolution\n const existingWebpack =\n typeof nextConfig.webpack === \"function\"\n ? (nextConfig.webpack as Function)(config, options)\n : config;\n\n return existingWebpack;\n },\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/adapters/nextjs.ts"],"names":[],"mappings":";;;;;;;;AA8CO,SAAS,YAAY,QAAA,EAA+C;AACzE,EAAA,YAAA,CAAa,QAAQ,CAAA;AACvB;AAaO,SAAS,gBAAA,CACd,OACA,MAAA,EAC+D;AAC/D,EAAA,MAAM,eAAuC,EAAC;AAC9C,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,IAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,YAAA,CAAa,IAAI,CAAA,GAAI,cAAA,CAAe,MAAM,IAAA,EAAM,EAAE,QAAQ,CAAA;AAC1D,MAAA,SAAA,CAAU,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,WAAA,EAAa,mBAAA,CAAoB,SAAA,EAAW,MAAM;AAAA,GACpD;AACF;AAaO,SAAS,mBAAA,CACd,eACA,MAAA,EACQ;AACR,EAAA,MAAM,YAA4B,EAAC;AAEnC,EAAA,KAAA,MAAW,QAAQ,aAAA,EAAe;AAChC,IAAA,MAAM,KAAA,GAAQ,IAAgB,IAAI,CAAA;AAClC,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA;AAAA,EACtC;AAEA,EAAA,IAAI,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAEnC,EAAA,OAAO,CAAC,uBAAuB,SAAA,EAAW,MAAM,GAAG,qBAAA,EAAuB,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACvF;AAkCO,SAAS,iBAAA,CAAkB,UAAA,GAAsC,EAAC,EAA4B;AACnG,EAAA,OAAO;AAAA,IACL,GAAG,UAAA;AAAA,IACH,OAAA,CAAQ,QAAiC,OAAA,EAAkC;AAEzE,MAAA,MAAM,eAAA,GACJ,OAAO,UAAA,CAAW,OAAA,KAAY,aACzB,UAAA,CAAW,OAAA,CAAqB,MAAA,EAAQ,OAAO,CAAA,GAChD,MAAA;AAEN,MAAA,OAAO,eAAA;AAAA,IACT;AAAA,GACF;AACF","file":"next.js","sourcesContent":["import type { SkeletonData, CastDOMConfig } from \"../core/types.js\";\nimport { renderSkeleton, renderCriticalStyleTag, renderHydrationScript } from \"../seo/ssr.js\";\nimport { register, loadManifest, get as getFromRegistry } from \"../core/registry.js\";\nimport { generateCriticalCSS } from \"../core/renderer.js\";\n\n/**\n * Next.js adapter for CastDOM.\n *\n * Supports:\n * - App Router (React Server Components)\n * - Pages Router (getServerSideProps / getStaticProps)\n * - Automatic loading.tsx generation\n * - Middleware-based skeleton injection\n *\n * Usage (App Router):\n * ```tsx\n * // app/layout.tsx\n * import { CastDOMProvider } from \"@lukas_holdings/castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <CastDOMProvider manifest={manifest}>\n * {children}\n * </CastDOMProvider>\n * );\n * }\n * ```\n *\n * Usage (Pages Router):\n * ```tsx\n * // pages/_app.tsx\n * import { initCastDOM } from \"@lukas_holdings/castdom/next\";\n * import manifest from \".castdom/manifest.json\";\n *\n * initCastDOM(manifest);\n * ```\n */\n\n// Re-export React components for convenience\nexport { CastDOM, CastDOMStyle, useCastDOM } from \"../components/react.js\";\n\n/**\n * Initialize CastDOM in a Next.js app.\n * Call once in _app.tsx or layout.tsx.\n */\nexport function initCastDOM(manifest: { skeletons: SkeletonData[] }): void {\n loadManifest(manifest);\n}\n\n/**\n * Server-side helper for getServerSideProps / getStaticProps.\n * Returns skeleton HTML that can be passed as props.\n *\n * ```ts\n * export async function getServerSideProps() {\n * const { skeletonHTML, skeletonCSS } = getSkeletonProps([\"user-card\", \"feed-item\"]);\n * return { props: { skeletonHTML, skeletonCSS } };\n * }\n * ```\n */\nexport function getSkeletonProps(\n names: string[],\n config?: Partial<CastDOMConfig>\n): { skeletonHTML: Record<string, string>; skeletonCSS: string } {\n const skeletonHTML: Record<string, string> = {};\n const skeletons: SkeletonData[] = [];\n\n for (const name of names) {\n const entry = getFromRegistry(name);\n if (entry) {\n skeletonHTML[name] = renderSkeleton(entry.data, { config });\n skeletons.push(entry.data);\n }\n }\n\n return {\n skeletonHTML,\n skeletonCSS: generateCriticalCSS(skeletons, config),\n };\n}\n\n/**\n * Next.js App Router metadata helper.\n * Generates <head> tags for skeleton critical CSS.\n *\n * ```tsx\n * // app/layout.tsx\n * import { generateCastDOMMetadata } from \"@lukas_holdings/castdom/next\";\n *\n * export const metadata = generateCastDOMMetadata([\"user-card\"]);\n * ```\n */\nexport function generateCastDOMHead(\n skeletonNames: string[],\n config?: Partial<CastDOMConfig>\n): string {\n const skeletons: SkeletonData[] = [];\n\n for (const name of skeletonNames) {\n const entry = getFromRegistry(name);\n if (entry) skeletons.push(entry.data);\n }\n\n if (skeletons.length === 0) return \"\";\n\n return [renderCriticalStyleTag(skeletons, config), renderHydrationScript()].join(\"\\n\");\n}\n\n/**\n * Next.js middleware helper — injects skeleton HTML into streaming responses.\n * Use this for automatic skeleton injection without modifying page components.\n *\n * ```ts\n * // middleware.ts\n * import { withCastDOM } from \"@lukas_holdings/castdom/next\";\n *\n * export default withCastDOM({\n * skeletons: { \"/dashboard\": \"dashboard-skeleton\" },\n * });\n * ```\n */\nexport interface CastDOMMiddlewareConfig {\n /** Map of route patterns to skeleton names */\n skeletons: Record<string, string | string[]>;\n /** Config overrides */\n config?: Partial<CastDOMConfig>;\n}\n\n/**\n * Create a Next.js config plugin that adds CastDOM webpack config.\n *\n * ```js\n * // next.config.js\n * const { withCastDOMConfig } = require(\"@lukas_holdings/castdom/next\");\n *\n * module.exports = withCastDOMConfig({\n * // your next.js config\n * });\n * ```\n */\nexport function withCastDOMConfig(nextConfig: Record<string, unknown> = {}): Record<string, unknown> {\n return {\n ...nextConfig,\n webpack(config: Record<string, unknown>, options: Record<string, unknown>) {\n // Add .castdom to module resolution\n const existingWebpack =\n typeof nextConfig.webpack === \"function\"\n ? (nextConfig.webpack as Function)(config, options)\n : config;\n\n return existingWebpack;\n },\n };\n}\n"]}
|
package/dist/react.cjs
CHANGED
|
@@ -2,29 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
require('./chunk-
|
|
7
|
-
require('./chunk-
|
|
8
|
-
require('./chunk-
|
|
9
|
-
require('./chunk-
|
|
5
|
+
var chunkCC4LCPVY_cjs = require('./chunk-CC4LCPVY.cjs');
|
|
6
|
+
require('./chunk-BDIAGFG5.cjs');
|
|
7
|
+
require('./chunk-W236FF4E.cjs');
|
|
8
|
+
require('./chunk-ASS2BFPN.cjs');
|
|
9
|
+
require('./chunk-C3VW72Z3.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
Object.defineProperty(exports, "CastDOM", {
|
|
14
14
|
enumerable: true,
|
|
15
|
-
get: function () { return
|
|
15
|
+
get: function () { return chunkCC4LCPVY_cjs.CastDOM; }
|
|
16
16
|
});
|
|
17
17
|
Object.defineProperty(exports, "CastDOMStyle", {
|
|
18
18
|
enumerable: true,
|
|
19
|
-
get: function () { return
|
|
19
|
+
get: function () { return chunkCC4LCPVY_cjs.CastDOMStyle; }
|
|
20
20
|
});
|
|
21
21
|
Object.defineProperty(exports, "default", {
|
|
22
22
|
enumerable: true,
|
|
23
|
-
get: function () { return
|
|
23
|
+
get: function () { return chunkCC4LCPVY_cjs.react_default; }
|
|
24
24
|
});
|
|
25
25
|
Object.defineProperty(exports, "useCastDOM", {
|
|
26
26
|
enumerable: true,
|
|
27
|
-
get: function () { return
|
|
27
|
+
get: function () { return chunkCC4LCPVY_cjs.useCastDOM; }
|
|
28
28
|
});
|
|
29
29
|
//# sourceMappingURL=react.cjs.map
|
|
30
30
|
//# sourceMappingURL=react.cjs.map
|