@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/bundle-analyzer.js

@@ -0,0 +1,499 @@
+// @bun
+import v from"fs";import H from"path";import{gzipSync as z}from"zlib";import{createHash as g}from"crypto";var D={".js":"js",".mjs":"js",".cjs":"js",".ts":"js",".jsx":"js",".tsx":"js",".css":"css",".scss":"css",".sass":"css",".less":"css",".html":"html",".htm":"html",".png":"image",".jpg":"image",".jpeg":"image",".gif":"image",".svg":"image",".webp":"image",".avif":"image",".ico":"image",".woff":"font",".woff2":"font",".ttf":"font",".eot":"font",".otf":"font"},b=[/node_modules/,/vendor/,/bower_components/,/\.min\./],B=[/index\.(js|ts|html)$/,/main\.(js|ts)$/,/app\.(js|ts)$/,/entry\.(js|ts)$/];async function L(X,Z={}){let{includeSourceMaps:Q=!1,parseImports:$=!0,detectDuplicates:U=!0,topModulesCount:K=20}=Z;if(!v.existsSync(X))throw Error(`Build directory not found: ${X}`);if(!v.statSync(X).isDirectory())throw Error(`Not a directory: ${X}`);let q=await k(X,Q),J=[],F=[];for(let A of q)try{let O=await f(A,X,$);J.push(O)}catch(O){F.push(`Failed to process ${A}: ${O}`)}let Y=c(J,X),V=J.reduce((A,O)=>A+O.size,0),_=J.reduce((A,O)=>A+O.gzipSize,0),w=m(J),G=U?p(J):[],C=[...J].sort((A,O)=>O.size-A.size).slice(0,K);return{timestamp:Date.now(),buildDir:H.resolve(X),chunks:Y,totalSize:V,totalGzipSize:_,moduleCount:J.length,duplicates:G,byType:w,largestModules:C,warnings:F}}async function k(X,Z){let Q=[];async function $(U){let K=await v.promises.readdir(U,{withFileTypes:!0});for(let j of K){let q=H.join(U,j.name);if(j.isDirectory()){if(!j.name.startsWith(".")&&j.name!=="node_modules")await $(q)}else if(j.isFile()){if(!Z&&j.name.endsWith(".map"))continue;Q.push(q)}}}return await $(X),Q}async function f(X,Z,Q){let $=await v.promises.readFile(X),U=H.relative(Z,X),K=H.extname(X).toLowerCase(),j=$.length,q=y($),J=h($,K),F=g("md5").update($).digest("hex").slice(0,8),Y=D[K]||"other",V=[];if(Q&&Y==="js")V.push(...d($.toString("utf-8")));return{id:U,path:U,size:j,gzipSize:q,parsedSize:J,extension:K,type:Y,imports:V,importedBy:[],hash:F}}function y(X){try{let Z=z(X,{level:9}).length;return Math.min(Z,X.length)}catch{return X.length}}function h(X,Z){if(Z.includes(".min.")||X.length<1000)return X.length;let $=D[Z];if($==="js")return Math.round(X.length*0.6);if($==="css")return Math.round(X.length*0.7);return X.length}function d(X){let Z=[],Q=/import\s+(?:[\w*{}\s,]+\s+from\s+)?['"]([^'"]+)['"]/g,$;while(($=Q.exec(X))!==null)Z.push($[1]);let U=/import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;while(($=U.exec(X))!==null)Z.push($[1]);let K=/require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;while(($=K.exec(X))!==null)Z.push($[1]);return[...new Set(Z)]}function c(X,Z){let Q=new Map;for(let U of X){let K=U.path.split(H.sep),j;if(K.length===1)j=H.basename(U.path,U.extension);else j=K[0];let q=Q.get(j)||[];q.push(U),Q.set(j,q)}let $=[];for(let[U,K]of Q){let j=K.reduce((Y,V)=>Y+V.size,0),q=K.reduce((Y,V)=>Y+V.gzipSize,0),J=K.some((Y)=>B.some((V)=>V.test(Y.path))),F=K.some((Y)=>b.some((V)=>V.test(Y.path)));$.push({name:U,files:K.map((Y)=>Y.path),modules:K,size:j,gzipSize:q,isEntry:J,isVendor:F})}return $.sort((U,K)=>K.size-U.size)}function m(X){let Z={js:{count:0,size:0,gzipSize:0},css:{count:0,size:0,gzipSize:0},html:{count:0,size:0,gzipSize:0},image:{count:0,size:0,gzipSize:0},font:{count:0,size:0,gzipSize:0},other:{count:0,size:0,gzipSize:0}};for(let Q of X)Z[Q.type].count++,Z[Q.type].size+=Q.size,Z[Q.type].gzipSize+=Q.gzipSize;return Z}function p(X){let Z=new Map;for(let $ of X){let U=Z.get($.hash)||[];U.push($),Z.set($.hash,U)}let Q=[];for(let[,$]of Z)if($.length>1){let U=$[0];Q.push({path:U.path,count:$.length,wastedBytes:U.size*($.length-1),locations:$.map((K)=>K.path)})}return Q.sort(($,U)=>U.wastedBytes-$.wastedBytes)}function W(X){if(X<1024)return`${X} B`;if(X<1048576)return`${(X/1024).toFixed(2)} KB`;return`${(X/1048576).toFixed(2)} MB`}function I(X){let Z=X.match(/^([\d.]+)\s*(B|KB|MB|GB)?$/i);if(!Z)return 0;let Q=Number.parseFloat(Z[1]);switch((Z[2]||"B").toUpperCase()){case"KB":return Q*1024;case"MB":return Q*1024*1024;case"GB":return Q*1024*1024*1024;default:return Q}}function E(X,Z){if(Z===0)return"0%";return`${(X/Z*100).toFixed(1)}%`}function R(X,Z){switch(Z.format){case"json":return u(X,Z);case"markdown":return l(X,Z);case"text":default:return r(X,Z)}}function u(X,Z){let Q=N(X,Z);return JSON.stringify({timestamp:X.timestamp,buildDir:X.buildDir,summary:{totalSize:X.totalSize,totalSizeFormatted:W(X.totalSize),totalGzipSize:X.totalGzipSize,totalGzipSizeFormatted:W(X.totalGzipSize),moduleCount:X.moduleCount,chunkCount:X.chunks.length,duplicateCount:X.duplicates.length},byType:Object.fromEntries(Object.entries(X.byType).map(([$,U])=>[$,{...U,sizeFormatted:W(U.size),gzipSizeFormatted:W(U.gzipSize)}])),chunks:X.chunks.map(($)=>({name:$.name,size:$.size,sizeFormatted:W($.size),gzipSize:$.gzipSize,gzipSizeFormatted:W($.gzipSize),moduleCount:$.modules.length,isEntry:$.isEntry,isVendor:$.isVendor})),largestModules:X.largestModules.slice(0,Z.topModules||10).map(($)=>({path:$.path,size:$.size,sizeFormatted:W($.size),gzipSize:$.gzipSize,gzipSizeFormatted:W($.gzipSize),type:$.type})),duplicates:X.duplicates,analysis:Q,warnings:X.warnings},null,2)}function r(X,Z){let Q=[],$=Z.showGzip!==!1;if(Q.push(""),Q.push("Bundle Analysis Report"),Q.push("\u2550".repeat(50)),Q.push(""),Q.push("Summary"),Q.push("\u2500".repeat(50)),$)Q.push(`Total Size:     ${W(X.totalSize)} (${W(X.totalGzipSize)} gzip)`);else Q.push(`Total Size:     ${W(X.totalSize)}`);if(Q.push(`Modules:        ${X.moduleCount}`),Q.push(`Chunks:         ${X.chunks.length}`),X.duplicates.length>0)Q.push(`Duplicates:     ${X.duplicates.length}`);if(Q.push(""),Z.threshold&&X.totalSize>Z.threshold)Q.push(`\u26A0\uFE0F  Bundle exceeds threshold of ${W(Z.threshold)}!`),Q.push("");Q.push("Size by Type"),Q.push("\u2500".repeat(50));let U=["js","css","html","image","font","other"];for(let j of U){let q=X.byType[j];if(q.count>0){let J=E(q.size,X.totalSize),F=$?` (${W(q.gzipSize)} gzip)`:"";Q.push(`  ${j.padEnd(8)} ${W(q.size).padStart(12)}${F}  ${J.padStart(6)}  (${q.count} files)`)}}Q.push(""),Q.push("Chunks"),Q.push("\u2500".repeat(50));for(let j of X.chunks.slice(0,10)){let q=[];if(j.isEntry)q.push("entry");if(j.isVendor)q.push("vendor");let J=q.length>0?` [${q.join(", ")}]`:"",F=$?` (${W(j.gzipSize)} gzip)`:"";Q.push(`  ${j.name.padEnd(20)} ${W(j.size).padStart(12)}${F}${J}`)}if(X.chunks.length>10)Q.push(`  ... and ${X.chunks.length-10} more chunks`);Q.push("");let K=Z.topModules||10;Q.push(`Largest Modules (Top ${K})`),Q.push("\u2500".repeat(50));for(let j=0;j<Math.min(K,X.largestModules.length);j++){let q=X.largestModules[j],J=$?` (${W(q.gzipSize)} gzip)`:"";Q.push(`  ${(j+1).toString().padStart(2)}. ${q.path}`),Q.push(`      ${W(q.size)}${J}`)}if(Q.push(""),X.duplicates.length>0){Q.push("Duplicate Modules"),Q.push("\u2500".repeat(50));for(let j of X.duplicates.slice(0,5))Q.push(`  ${j.path}`),Q.push(`    ${j.count} copies, wasting ${W(j.wastedBytes)}`);if(X.duplicates.length>5)Q.push(`  ... and ${X.duplicates.length-5} more duplicates`);Q.push("")}if(Z.recommendations!==!1){let j=N(X,Z);if(j.recommendations.length>0){Q.push("Recommendations"),Q.push("\u2500".repeat(50));for(let q of j.recommendations.slice(0,5)){let J=q.impact==="high"?"\u26A1":q.impact==="medium"?"\uD83D\uDCCA":"\uD83D\uDCA1";Q.push(`  ${J} ${q.title}`),Q.push(`    ${q.description}`)}Q.push("")}}if(X.warnings.length>0){Q.push("Warnings"),Q.push("\u2500".repeat(50));for(let j of X.warnings)Q.push(`  \u26A0\uFE0F  ${j}`);Q.push("")}return Q.join(`
+`)}function l(X,Z){let Q=[],$=Z.showGzip!==!1;if(Q.push("# Bundle Analysis Report"),Q.push(""),Q.push(`Generated: ${new Date(X.timestamp).toISOString()}`),Q.push(""),Q.push("## Summary"),Q.push(""),Q.push("| Metric | Value |"),Q.push("|--------|-------|"),Q.push(`| Total Size | ${W(X.totalSize)} |`),$)Q.push(`| Gzip Size | ${W(X.totalGzipSize)} |`);Q.push(`| Modules | ${X.moduleCount} |`),Q.push(`| Chunks | ${X.chunks.length} |`),Q.push(`| Duplicates | ${X.duplicates.length} |`),Q.push(""),Q.push("## Size by Type"),Q.push(""),Q.push("| Type | Size | Gzip | % | Files |"),Q.push("|------|------|------|---|-------|");let U=["js","css","html","image","font","other"];for(let j of U){let q=X.byType[j];if(q.count>0)Q.push(`| ${j} | ${W(q.size)} | ${W(q.gzipSize)} | ${E(q.size,X.totalSize)} | ${q.count} |`)}Q.push(""),Q.push("## Chunks"),Q.push(""),Q.push("| Name | Size | Gzip | Modules | Type |"),Q.push("|------|------|------|---------|------|");for(let j of X.chunks.slice(0,15)){let q=j.isEntry?"Entry":j.isVendor?"Vendor":"-";Q.push(`| ${j.name} | ${W(j.size)} | ${W(j.gzipSize)} | ${j.modules.length} | ${q} |`)}Q.push("");let K=Z.topModules||10;Q.push(`## Largest Modules (Top ${K})`),Q.push(""),Q.push("| # | Path | Size | Gzip |"),Q.push("|---|------|------|------|");for(let j=0;j<Math.min(K,X.largestModules.length);j++){let q=X.largestModules[j];Q.push(`| ${j+1} | \`${q.path}\` | ${W(q.size)} | ${W(q.gzipSize)} |`)}if(Q.push(""),X.duplicates.length>0){Q.push("## Duplicates"),Q.push(""),Q.push("| Path | Copies | Wasted |"),Q.push("|------|--------|--------|");for(let j of X.duplicates.slice(0,10))Q.push(`| \`${j.path}\` | ${j.count} | ${W(j.wastedBytes)} |`);Q.push("")}if(Z.recommendations!==!1){let j=N(X,Z);if(j.recommendations.length>0){Q.push("## Recommendations"),Q.push("");for(let q of j.recommendations)Q.push(`### ${q.title}`),Q.push(""),Q.push(q.description),Q.push(""),Q.push(`- **Impact:** ${q.impact}`),Q.push(`- **Effort:** ${q.effort}`),Q.push("")}}return Q.join(`
+`)}function N(X,Z){let Q=[],$=[];if(Z.threshold&&X.totalSize>Z.threshold)Q.push({severity:"error",message:`Bundle size (${W(X.totalSize)}) exceeds threshold (${W(Z.threshold)})`});if(X.totalSize>1048576)Q.push({severity:"warning",message:`Bundle is over 1MB (${W(X.totalSize)})`,details:"Large bundles can significantly impact load time"});if(X.duplicates.length>0){let q=X.duplicates.reduce((J,F)=>J+F.wastedBytes,0);Q.push({severity:"warning",message:`${X.duplicates.length} duplicate modules found, wasting ${W(q)}`}),$.push({title:"Remove Duplicate Modules",description:"Consider using import aliases or ensuring consistent package versions to eliminate duplicates.",impact:"medium",effort:"low"})}if(X.byType.js.size/X.totalSize>0.8&&X.totalSize>512000)$.push({title:"Code Splitting",description:"Over 80% of your bundle is JavaScript. Consider splitting code by route or feature.",impact:"high",effort:"medium"});let K=X.largestModules.filter((q)=>q.size>102400);if(K.length>0){Q.push({severity:"info",message:`${K.length} modules are over 100KB`});for(let q of K){if(q.path.includes("lodash")&&!q.path.includes("lodash-es"))$.push({title:"Use lodash-es instead of lodash",description:"lodash-es supports tree-shaking and can significantly reduce bundle size.",impact:"high",effort:"low"});if(q.path.includes("moment"))$.push({title:"Replace moment.js",description:"Consider using date-fns or dayjs for smaller date handling libraries.",impact:"high",effort:"medium"})}}if(X.byType.image.size>512000)$.push({title:"Optimize Images",description:`Images account for ${W(X.byType.image.size)}. Consider using WebP/AVIF formats and responsive images.`,impact:"high",effort:"low"});let j=100;if(X.totalSize>1048576)j-=20;else if(X.totalSize>512000)j-=10;if(j-=Math.min(20,X.duplicates.length*2),j-=Math.min(15,K.length*3),Z.threshold&&X.totalSize>Z.threshold)j-=25;return{score:Math.max(0,j),issues:Q,recommendations:$}}var i={lodash:{alternative:"lodash-es or individual imports",savings:"~70%"},moment:{alternative:"date-fns or dayjs",savings:"~90%"},"chart.js":{alternative:"chart.js with tree-shaking",savings:"~50%"},"highlight.js":{alternative:"Selective language imports",savings:"~80%"},fontawesome:{alternative:"Individual icon imports",savings:"~90%"},"material-ui":{alternative:"Named imports from @mui/*",savings:"~60%"}};function n(X){for(let[Z,Q]of Object.entries(i))if(X.includes(Z))return{title:`Optimize ${Z}`,description:`Consider using ${Q.alternative}. Potential savings: ${Q.savings}`,impact:"high",effort:"low"};return null}var o={default:{js:"#f7df1e",css:"#264de4",html:"#e34c26",image:"#4caf50",font:"#9c27b0",other:"#607d8b",vendor:"#ff5722"},pastel:{js:"#fff3b0",css:"#b0d4ff",html:"#ffb0b0",image:"#b0ffb0",font:"#e0b0ff",other:"#d0d0d0",vendor:"#ffcfb0"},monochrome:{js:"#333333",css:"#555555",html:"#777777",image:"#999999",font:"#bbbbbb",other:"#dddddd",vendor:"#444444"}};function x(X,Z={}){let{title:Q="Bundle Analysis",gzip:$=!0,colorScheme:U="default"}=Z,K=o[U],j=a(X),q=JSON.stringify(j);return`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${M(Q)}</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: #1a1a2e;
+      color: #eee;
+      min-height: 100vh;
+    }
+
+    .header {
+      background: #16213e;
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #0f3460;
+    }
+
+    .header h1 {
+      font-size: 1.5rem;
+      font-weight: 500;
+    }
+
+    .stats {
+      display: flex;
+      gap: 2rem;
+    }
+
+    .stat {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: 1.25rem;
+      font-weight: bold;
+      color: #e94560;
+    }
+
+    .stat-label {
+      font-size: 0.75rem;
+      color: #888;
+      text-transform: uppercase;
+    }
+
+    .controls {
+      background: #16213e;
+      padding: 0.75rem 2rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      border-bottom: 1px solid #0f3460;
+    }
+
+    .controls label {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+    }
+
+    .controls input[type="checkbox"] {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .search-box {
+      flex: 1;
+      max-width: 300px;
+    }
+
+    .search-box input {
+      width: 100%;
+      padding: 0.5rem 1rem;
+      border: 1px solid #0f3460;
+      border-radius: 4px;
+      background: #1a1a2e;
+      color: #eee;
+      font-size: 0.875rem;
+    }
+
+    .search-box input:focus {
+      outline: none;
+      border-color: #e94560;
+    }
+
+    .breadcrumb {
+      background: #16213e;
+      padding: 0.5rem 2rem;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      font-size: 0.875rem;
+      border-bottom: 1px solid #0f3460;
+    }
+
+    .breadcrumb-item {
+      color: #888;
+      cursor: pointer;
+    }
+
+    .breadcrumb-item:hover {
+      color: #e94560;
+    }
+
+    .breadcrumb-item.active {
+      color: #eee;
+      cursor: default;
+    }
+
+    .breadcrumb-sep {
+      color: #444;
+    }
+
+    #treemap {
+      width: 100%;
+      height: calc(100vh - 180px);
+      min-height: 400px;
+    }
+
+    .tooltip {
+      position: fixed;
+      background: #16213e;
+      border: 1px solid #0f3460;
+      border-radius: 4px;
+      padding: 0.75rem 1rem;
+      pointer-events: none;
+      z-index: 1000;
+      max-width: 400px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .tooltip-title {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+      word-break: break-all;
+    }
+
+    .tooltip-row {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+      font-size: 0.875rem;
+      color: #888;
+    }
+
+    .tooltip-row span:last-child {
+      color: #eee;
+      font-weight: 500;
+    }
+
+    .legend {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      background: #16213e;
+      border: 1px solid #0f3460;
+      border-radius: 4px;
+      padding: 0.75rem 1rem;
+    }
+
+    .legend-title {
+      font-size: 0.75rem;
+      color: #888;
+      margin-bottom: 0.5rem;
+      text-transform: uppercase;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.75rem;
+      margin-bottom: 0.25rem;
+    }
+
+    .legend-color {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+    }
+
+    .node {
+      cursor: pointer;
+      transition: opacity 0.2s;
+    }
+
+    .node:hover {
+      opacity: 0.8;
+    }
+
+    .node-label {
+      font-size: 11px;
+      fill: #000;
+      pointer-events: none;
+      text-anchor: middle;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>${M(Q)}</h1>
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-value" id="total-size">${W(X.totalSize)}</div>
+        <div class="stat-label">Total Size</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value" id="gzip-size">${W(X.totalGzipSize)}</div>
+        <div class="stat-label">Gzip Size</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${X.moduleCount}</div>
+        <div class="stat-label">Modules</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${X.chunks.length}</div>
+        <div class="stat-label">Chunks</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="controls">
+    <div class="search-box">
+      <input type="text" id="search" placeholder="Search modules...">
+    </div>
+    <label>
+      <input type="checkbox" id="show-gzip" ${$?"checked":""}>
+      Show Gzip Size
+    </label>
+  </div>
+
+  <div class="breadcrumb" id="breadcrumb">
+    <span class="breadcrumb-item active">root</span>
+  </div>
+
+  <div id="treemap"></div>
+
+  <div class="tooltip" id="tooltip" style="display: none;"></div>
+
+  <div class="legend">
+    <div class="legend-title">File Types</div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.js}"></div>
+      <span>JavaScript</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.css}"></div>
+      <span>CSS</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.html}"></div>
+      <span>HTML</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.image}"></div>
+      <span>Images</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.font}"></div>
+      <span>Fonts</span>
+    </div>
+    <div class="legend-item">
+      <div class="legend-color" style="background: ${K.other}"></div>
+      <span>Other</span>
+    </div>
+  </div>
+
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script>
+    const data = ${q};
+    const colors = ${JSON.stringify(K)};
+
+    let showGzip = ${$};
+    let currentRoot = data;
+    let searchTerm = '';
+
+    const container = document.getElementById('treemap');
+    const tooltip = document.getElementById('tooltip');
+    const breadcrumb = document.getElementById('breadcrumb');
+    const searchInput = document.getElementById('search');
+    const showGzipCheckbox = document.getElementById('show-gzip');
+
+    function formatSize(bytes) {
+      if (bytes < 1024) return bytes + ' B';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+      return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+    }
+
+    function getColor(d) {
+      if (d.data.type) {
+        return colors[d.data.type] || colors.other;
+      }
+      if (d.data.name.includes('node_modules') || d.data.name.includes('vendor')) {
+        return colors.vendor;
+      }
+      return colors.other;
+    }
+
+    function getSizeValue(d) {
+      return showGzip ? d.data.gzipSize : d.data.size;
+    }
+
+    function render() {
+      container.innerHTML = '';
+
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+      const hierarchy = d3.hierarchy(currentRoot)
+        .sum(d => {
+          if (searchTerm && d.name && !d.name.toLowerCase().includes(searchTerm.toLowerCase())) {
+            return 0;
+          }
+          return d.children ? 0 : getSizeValue({ data: d });
+        })
+        .sort((a, b) => getSizeValue(b) - getSizeValue(a));
+
+      const treemap = d3.treemap()
+        .size([width, height])
+        .paddingOuter(3)
+        .paddingTop(19)
+        .paddingInner(1)
+        .round(true);
+
+      const root = treemap(hierarchy);
+
+      const svg = d3.select(container)
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height);
+
+      const node = svg.selectAll('g')
+        .data(root.descendants().filter(d => d.depth > 0))
+        .join('g')
+        .attr('transform', d => \`translate(\${d.x0},\${d.y0})\`);
+
+      node.append('rect')
+        .attr('class', 'node')
+        .attr('width', d => Math.max(0, d.x1 - d.x0))
+        .attr('height', d => Math.max(0, d.y1 - d.y0))
+        .attr('fill', d => getColor(d))
+        .attr('stroke', '#1a1a2e')
+        .attr('stroke-width', 1)
+        .on('click', (event, d) => {
+          if (d.children) {
+            zoomIn(d.data);
+          }
+        })
+        .on('mouseover', (event, d) => showTooltip(event, d))
+        .on('mousemove', (event) => moveTooltip(event))
+        .on('mouseout', hideTooltip);
+
+      node.append('text')
+        .attr('class', 'node-label')
+        .attr('x', d => (d.x1 - d.x0) / 2)
+        .attr('y', d => (d.y1 - d.y0) / 2 + 4)
+        .text(d => {
+          const width = d.x1 - d.x0;
+          const height = d.y1 - d.y0;
+          if (width < 40 || height < 20) return '';
+          const name = d.data.name;
+          const maxLen = Math.floor(width / 7);
+          return name.length > maxLen ? name.slice(0, maxLen - 2) + '..' : name;
+        });
+
+      // Group headers
+      node.filter(d => d.children)
+        .append('text')
+        .attr('x', 4)
+        .attr('y', 14)
+        .attr('fill', '#000')
+        .attr('font-size', '12px')
+        .attr('font-weight', 'bold')
+        .text(d => {
+          const width = d.x1 - d.x0;
+          const name = d.data.name;
+          const maxLen = Math.floor(width / 7);
+          return name.length > maxLen ? name.slice(0, maxLen - 2) + '..' : name;
+        });
+    }
+
+    function showTooltip(event, d) {
+      const size = d.data.size || d.value;
+      const gzipSize = d.data.gzipSize || Math.round(size * 0.3);
+      const path = d.data.path || d.data.name;
+
+      tooltip.innerHTML = \`
+        <div class="tooltip-title">\${path}</div>
+        <div class="tooltip-row">
+          <span>Size</span>
+          <span>\${formatSize(size)}</span>
+        </div>
+        <div class="tooltip-row">
+          <span>Gzip</span>
+          <span>\${formatSize(gzipSize)}</span>
+        </div>
+        \${d.data.type ? \`<div class="tooltip-row"><span>Type</span><span>\${d.data.type}</span></div>\` : ''}
+        \${d.children ? \`<div class="tooltip-row"><span>Children</span><span>\${d.children.length}</span></div>\` : ''}
+      \`;
+      tooltip.style.display = 'block';
+      moveTooltip(event);
+    }
+
+    function moveTooltip(event) {
+      const x = event.clientX + 10;
+      const y = event.clientY + 10;
+      tooltip.style.left = x + 'px';
+      tooltip.style.top = y + 'px';
+    }
+
+    function hideTooltip() {
+      tooltip.style.display = 'none';
+    }
+
+    function zoomIn(node) {
+      currentRoot = node;
+      updateBreadcrumb();
+      render();
+    }
+
+    function zoomOut(index) {
+      let node = data;
+      const parts = getBreadcrumbParts();
+      for (let i = 1; i <= index; i++) {
+        const child = node.children?.find(c => c.name === parts[i]);
+        if (child) node = child;
+      }
+      currentRoot = node;
+      updateBreadcrumb();
+      render();
+    }
+
+    function getBreadcrumbParts() {
+      const parts = ['root'];
+      let node = currentRoot;
+      const path = [];
+
+      function findPath(current, target, currentPath) {
+        if (current === target) {
+          path.push(...currentPath);
+          return true;
+        }
+        if (current.children) {
+          for (const child of current.children) {
+            if (findPath(child, target, [...currentPath, child.name])) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (currentRoot !== data) {
+        findPath(data, currentRoot, []);
+        parts.push(...path);
+      }
+
+      return parts;
+    }
+
+    function updateBreadcrumb() {
+      const parts = getBreadcrumbParts();
+      breadcrumb.innerHTML = parts.map((part, i) => {
+        const isLast = i === parts.length - 1;
+        const sep = i > 0 ? '<span class="breadcrumb-sep">/</span>' : '';
+        return \`\${sep}<span class="breadcrumb-item \${isLast ? 'active' : ''}" onclick="zoomOut(\${i})">\${part}</span>\`;
+      }).join('');
+    }
+
+    searchInput.addEventListener('input', (e) => {
+      searchTerm = e.target.value;
+      render();
+    });
+
+    showGzipCheckbox.addEventListener('change', (e) => {
+      showGzip = e.target.checked;
+      render();
+    });
+
+    window.addEventListener('resize', render);
+
+    render();
+  </script>
+</body>
+</html>`}function a(X){let Z={name:"root",size:X.totalSize,gzipSize:X.totalGzipSize,children:[]};for(let Q of X.chunks){let $={name:Q.name,size:Q.size,gzipSize:Q.gzipSize,children:[]};for(let U of Q.modules)e($,U);Z.children.push($)}return Z}function e(X,Z){let Q=Z.path.split("/"),$=X;for(let K=0;K<Q.length-1;K++){let j=Q[K],q=$.children?.find((J)=>J.name===j);if(!q){if(q={name:j,size:0,gzipSize:0,children:[]},!$.children)$.children=[];$.children.push(q)}$=q}let U=Q[Q.length-1];if(!$.children)$.children=[];$.children.push({name:U,path:Z.path,size:Z.size,gzipSize:Z.gzipSize,type:Z.type}),s(X,Z.size,Z.gzipSize)}function s(X,Z,Q){}function M(X){return X.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function T(X){let Z=process.platform,Q=Z==="darwin"?"open":Z==="win32"?"start":"xdg-open";Bun.spawn([Q,X],{stdio:["ignore","ignore","ignore"]})}import P from"fs";import S from"path";async function CQ(X={}){let{directory:Z="dist",output:Q,format:$="html",open:U=!0,gzip:K=!0,threshold:j,recommendations:q=!0,topModules:J=20,parseImports:F=!0}=X,V=await L(Z,{parseImports:F,detectDuplicates:!0,topModulesCount:J}),_=j?typeof j==="string"?I(j):j:void 0,w=_?V.totalSize>_:!1,G,C;if($==="html"){let A={title:`Bundle Analysis - ${S.basename(S.resolve(Z))}`,gzip:K};if(G=x(V,A),C=Q||S.join(Z,"bundle-report.html"),await P.promises.writeFile(C,G),U)T(C)}else if(G=R(V,{format:$,threshold:_,recommendations:q,topModules:J,showGzip:K}),Q)C=Q,await P.promises.writeFile(C,G);return{stats:V,report:G,outputPath:C,exceedsThreshold:w}}async function GQ(X){let Z=await L(X,{parseImports:!1,detectDuplicates:!1,topModulesCount:0});return{totalSize:Z.totalSize,totalSizeFormatted:W(Z.totalSize),gzipSize:Z.totalGzipSize,gzipSizeFormatted:W(Z.totalGzipSize),moduleCount:Z.moduleCount,chunkCount:Z.chunks.length}}export{E as percentage,I as parseSize,T as openInBrowser,n as getModuleRecommendation,GQ as getBundleSummary,x as generateTreemap,R as generateReport,W as formatBytes,L as collectBundleStats,N as analyzeBundle,CQ as analyze};

package/dist/caching.d.ts

@@ -0,0 +1,69 @@
+import type { StxOptions } from './types';
+/**
+ * Cache entry structure
+ */
+interface CacheEntry {
+    output: string;
+    mtime: number;
+    dependencies: Set<string>;
+}
+export declare const templateCache: Map<string, CacheEntry>;
+/**
+ * Read a file with mtime-based caching.
+ * Returns cached content if file hasn't been modified since last read.
+ *
+ * Race-safe: stats → reads → re-stats. If the mtime moved between the
+ * initial stat and the read, the content we just got may not match the
+ * mtime we'd cache it under, so we retry up to 3 times. Without this,
+ * a writer flushing the file between our stat() and our read() would
+ * have us cache the *new* content under the *old* mtime — and the
+ * subsequent invalidation never fires because the cached mtime already
+ * "matches" the new file mtime on the next cache-hit check.
+ */
+export declare function readFileCached(filePath: string): Promise<string>;
+/**
+ * Invalidate a specific file from the content cache.
+ * Called by HMR when a file changes.
+ */
+export declare function invalidateFileCache(filePath: string): void;
+/**
+ * Invalidate all files matching a pattern from the content cache.
+ */
+export declare function invalidateFileCacheByDir(dirPath: string): void;
+/** The two runtime generators caching depends on (subset of `./signals`). */
+type SignalsGenerators = Pick<typeof import('./signals'), 'generateSignalsRuntime' | 'generateSignalsRuntimeDev'>;
+/** @internal test-only — inject (or, with `null`, restore) the signals generators. */
+export declare function __setSignalsGeneratorsForTest(generators: SignalsGenerators | null): void;
+/**
+ * Get the signals runtime with module-level caching.
+ * The runtime is identical for every page and never changes during a dev session.
+ */
+export declare function getCachedSignalsRuntime(debug?: boolean): Promise<string>;
+/**
+ * Get the router script with module-level caching.
+ */
+export declare function getCachedRouterScript(): Promise<string>;
+/**
+ * Clear all dev caches. Called during full rebuild or HMR reset.
+ */
+export declare function clearDevCaches(): void;
+/**
+ * Check if a cached version of the template is available and valid
+ */
+export declare function checkCache(filePath: string, options: StxOptions): Promise<string | null>;
+/**
+ * Cache the processed template
+ */
+export declare function cacheTemplate(filePath: string, output: string, dependencies: Set<string>, options: StxOptions): Promise<void>;
+/**
+ * Create a hash of the file path for cache filenames
+ *
+ * Uses SHA-1 (fast, collision-resistant enough for cache keys) truncated to
+ * CACHE_HASH_LENGTH characters. The truncated hash still provides strong
+ * uniqueness guarantees for cache file identification.
+ *
+ * @param filePath - Absolute path to the template file
+ * @returns A 16-character hex string suitable for use as a filename
+ */
+export declare function hashFilePath(filePath: string): string;
+export {};