rn-bundle-analyzer 1.1.0

package/src/templates/analyse.pug

@@ -0,0 +1,321 @@
+//- 报告页唯一手写模板；由运行时直接渲染
+doctype html
+html(lang='zh-CN')
+  head
+    meta(charset='UTF-8')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
+    title(data-i18n='pageTitle') RN 包分析结果展示
+    script(src='./tailwindcss.js')
+    script(src='./icons-inline.js')
+    script(src='./rn-bundle-files-data.js')
+    script(src='./rn-bundle-tree-data.js')
+    script(src='./rn-bundle-inverse-deps-data.js')
+    script.
+      tailwind.config = {
+          theme: {
+              extend: {
+                  colors: {
+                      border: "hsl(214.3 31.8% 91.4%)",
+                      input: "hsl(214.3 31.8% 91.4%)",
+                      ring: "hsl(222.2 84% 4.9%)",
+                      background: "hsl(0 0% 100%)",
+                      foreground: "hsl(222.2 84% 4.9%)",
+                      primary: {
+                          DEFAULT: "hsl(222.2 47.4% 11.2%)",
+                          foreground: "hsl(210 40% 98%)",
+                      },
+                      secondary: {
+                          DEFAULT: "hsl(210 40% 96%)",
+                          foreground: "hsl(222.2 84% 4.9%)",
+                      },
+                      muted: {
+                          DEFAULT: "hsl(210 40% 96%)",
+                          foreground: "hsl(215.4 16.3% 46.9%)",
+                      },
+                      accent: {
+                          DEFAULT: "hsl(210 40% 96%)",
+                          foreground: "hsl(222.2 84% 4.9%)",
+                      },
+                      card: {
+                          DEFAULT: "hsl(0 0% 100%)",
+                          foreground: "hsl(222.2 84% 4.9%)",
+                      },
+                  },
+              }
+          }
+      }
+    style.
+      :root {
+          color-scheme: light;
+      }
+
+      .tree-node {
+          transition: all 0.2s ease;
+      }
+
+      .tree-node.collapsed .tree-children {
+          display: none;
+      }
+
+      .tree-toggle {
+          cursor: pointer;
+          user-select: none;
+          border-radius: 4px;
+          transition: background-color 0.2s ease;
+      }
+
+      .tree-toggle:hover {
+          background-color: hsl(210 40% 94%);
+      }
+
+      .tree-expand-icon {
+          transition: transform 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+      }
+
+      .tree-node.collapsed .tree-expand-icon {
+          transform: rotate(0deg);
+      }
+
+      .tree-node:not(.collapsed) .tree-expand-icon {
+          transform: rotate(90deg);
+      }
+
+      .tree-children {
+          border-left: 1px solid hsl(214.3 31.8% 91.4%);
+          margin-left: 8px;
+          padding-left: 8px;
+      }
+
+      .tree-item {
+          display: flex;
+          align-items: center;
+          padding: 4px 8px;
+          border-radius: 4px;
+          transition: background-color 0.2s ease;
+      }
+
+      .tree-item:hover {
+          background-color: hsl(210 40% 96%);
+      }
+
+      .tree-folder-icon {
+          color: hsl(45 100% 51%);
+      }
+
+      .tree-file-icon {
+          color: hsl(215.4 16.3% 46.9%);
+      }
+
+      .progress-bar {
+          background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
+      }
+
+      .lucide-inline {
+          display: inline-block;
+          vertical-align: middle;
+          flex-shrink: 0;
+      }
+
+      body {
+          background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 40%),
+                      radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 35%);
+          min-height: 100vh;
+      }
+
+      .hero-card {
+          background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
+          backdrop-filter: blur(4px);
+          box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+      }
+
+      .surface-card {
+          background: rgba(255, 255, 255, 0.92);
+          backdrop-filter: blur(5px);
+          box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+          transition: box-shadow 0.2s ease, transform 0.2s ease;
+      }
+
+      .surface-card:hover {
+          box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
+      }
+
+      .pill-button {
+          border-radius: 9999px;
+      }
+
+      .lang-toggle-btn.active {
+          background: hsl(222.2 47.4% 11.2%);
+          color: hsl(210 40% 98%);
+          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
+      }
+
+      .table-scroll::-webkit-scrollbar {
+          height: 8px;
+          width: 8px;
+      }
+
+      .table-scroll::-webkit-scrollbar-thumb {
+          background-color: rgba(100, 116, 139, 0.35);
+          border-radius: 9999px;
+      }
+
+      .table-scroll::-webkit-scrollbar-track {
+          background: transparent;
+      }
+
+  body.bg-background.text-foreground
+    .min-h-screen
+      header.hero-card.border-b.border-border.sticky.top-0.z-20
+        .container.mx-auto.px-4.py-6
+          .flex.items-center.justify-between
+            div
+              h1.text-3xl.font-bold.bg-gradient-to-r.from-blue-600.to-indigo-500.bg-clip-text.text-transparent(data-i18n='headerTitle') RN 包分析结果
+              p.text-muted-foreground.mt-2(data-i18n='headerSubtitle') React Native 项目包大小分析与可视化
+            .flex.items-center.space-x-4
+              .inline-flex.items-center.rounded-full.bg-muted.p-1.shadow-sm
+                button.lang-toggle-btn.active.px-3.py-1.text-xs.font-semibold.rounded-full.transition-all(type='button' data-lang='zh') 中文
+                button.lang-toggle-btn.px-3.py-1.text-xs.font-semibold.rounded-full.transition-all(type='button' data-lang='en') EN
+              .text-right
+                .text-sm.text-muted-foreground(data-i18n='totalFiles') 总文件数
+                #total-files.text-2xl.font-bold -
+              .text-right
+                .text-sm.text-muted-foreground(data-i18n='totalSize') 总大小
+                #total-size.text-2xl.font-bold -
+      main.container.mx-auto.px-4.py-8(class='max-w-[1200px]')
+        .border-b.border-border.mb-6
+          nav.flex.space-x-8
+            button.tab-button.active.py-2.px-1.border-b-2.border-primary.text-primary.font-medium(data-tab='files')
+              != icons('list', 'inline w-4 h-4 mr-2')
+              span(data-i18n='tabFiles') 文件列表视图
+            button(class='tab-button py-2 px-1 border-b-2 border-transparent text-muted-foreground hover:text-foreground font-medium' data-tab='tree')
+              != icons('folder-tree', 'inline w-4 h-4 mr-2')
+              span(data-i18n='tabTree') 目录树视图
+            button(class='tab-button py-2 px-1 border-b-2 border-transparent text-muted-foreground hover:text-foreground font-medium' data-tab='dependencies')
+              != icons('git-fork', 'inline w-4 h-4 mr-2')
+              span(data-i18n='tabDependencies') 反向依赖分析
+        #files-tab.tab-content
+          .mb-6.flex.flex-col(class='sm:flex-row gap-4')
+            .flex-1
+              .relative
+                span(class='absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 pointer-events-none')
+                  != icons('search', 'w-4 h-4')
+                input#search-input(class='w-full pl-10 pr-4 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring' type='text' placeholder='搜索文件名或路径...' data-i18n-placeholder='searchFilesPlaceholder')
+            .flex.gap-2
+              select#extension-filter(class='px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring')
+                option(value='' data-i18n='allFileTypes') 所有文件类型
+              select#sort-select(class='px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring')
+                option(value='size-desc' data-i18n='sortSizeDesc') 大小 (大到小)
+                option(value='size-asc' data-i18n='sortSizeAsc') 大小 (小到大)
+                option(value='name-asc' data-i18n='sortNameAsc') 名称 (A-Z)
+                option(value='name-desc' data-i18n='sortNameDesc') 名称 (Z-A)
+          .surface-card.rounded-xl.border.overflow-hidden(class='border-border/70')
+            .table-scroll.overflow-x-auto
+              table.w-full
+                thead.bg-muted
+                  tr
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colFilePath') 文件路径
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colSize') 大小
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colType') 类型
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colModified') 修改时间
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colInverseDeps') 反向依赖
+                tbody#files-table-body(class='divide-y divide-border')
+          .mt-6.flex.items-center.justify-between
+            .text-sm.text-muted-foreground
+              span(data-i18n='show') 显示
+              |  
+              span#files-range 0-0
+              span(data-i18n='itemsSepA')  项，共 
+              span#files-total 0
+              span(data-i18n='itemsSepB')  项
+            .flex.items-center.space-x-2
+              button#prev-page(class='px-3 py-1 border border-border rounded text-sm hover:bg-accent disabled:opacity-50' data-i18n='prevPage') 上一页
+              span#page-info.px-3.py-1.text-sm 1 / 1
+              button#next-page(class='px-3 py-1 border border-border rounded text-sm hover:bg-accent disabled:opacity-50' data-i18n='nextPage') 下一页
+        #tree-tab.tab-content.hidden
+          .surface-card.rounded-xl.border.p-6(class='border-border/70')
+            .mb-4.space-y-4
+              .flex.flex-col(class='sm:flex-row gap-4')
+                input#tree-search(class='flex-1 px-4 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring' type='text' placeholder='搜索目录或文件...' data-i18n-placeholder='searchTreePlaceholder')
+                .flex.gap-2
+                  button#expand-all-btn(class='px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center')
+                    != icons('chevrons-down', 'w-4 h-4 mr-2')
+                    span(data-i18n='expandAll') 全部展开
+                  button#collapse-all-btn(class='px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors flex items-center')
+                    != icons('chevrons-up', 'w-4 h-4 mr-2')
+                    span(data-i18n='collapseAll') 全部折叠
+            #tree-container.font-mono.text-sm
+        #dependencies-tab.tab-content.hidden
+          .grid.grid-cols-1.gap-6.mb-6(class='md:grid-cols-4')
+            .surface-card.rounded-xl.border.p-4(class='border-border/70')
+              .flex.items-center
+                != icons('file-text', 'w-8 h-8 text-blue-500 mr-3')
+                div
+                  #dep-total-files.text-2xl.font-bold -
+                  .text-sm.text-muted-foreground(data-i18n='totalFiles') 总文件数
+            .surface-card.rounded-xl.border.p-4(class='border-border/70')
+              .flex.items-center
+                != icons('git-fork', 'w-8 h-8 text-green-500 mr-3')
+                div
+                  #dep-total-dependencies.text-2xl.font-bold -
+                  .text-sm.text-muted-foreground(data-i18n='totalDependencyRelations') 总依赖关系数
+            .surface-card.rounded-xl.border.p-4(class='border-border/70')
+              .flex.items-center
+                != icons('trending-up', 'w-8 h-8 text-orange-500 mr-3')
+                div
+                  #dep-average-dependencies.text-2xl.font-bold -
+                  .text-sm.text-muted-foreground(data-i18n='avgDependencies') 平均依赖数
+            .surface-card.rounded-xl.border.p-4(class='border-border/70')
+              .flex.items-center
+                != icons('star', 'w-8 h-8 text-purple-500 mr-3')
+                div
+                  #dep-most-depended.text-2xl.font-bold -
+                  .text-sm.text-muted-foreground(data-i18n='maxDependencies') 最高依赖数
+          .surface-card.rounded-xl.border.p-6.mb-6(class='border-border/70')
+            h3.text-lg.font-semibold.mb-4.flex.items-center
+              != icons('flame', 'w-5 h-5 mr-2 text-red-500')
+              span(data-i18n='topDepsTitle') 热门依赖文件 Top 10
+            #top-dependencies-list.space-y-3
+          .surface-card.rounded-xl.border.p-6(class='border-border/70')
+            .mb-4.flex.flex-col(class='sm:flex-row gap-4')
+              .flex-1
+                .relative
+                  span(class='absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 pointer-events-none')
+                    != icons('search', 'w-4 h-4')
+                  input#dep-search-input(class='w-full pl-10 pr-4 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring' type='text' placeholder='搜索文件路径...' data-i18n-placeholder='searchDepPlaceholder')
+              .flex.gap-2
+                select#dep-sort-select(class='px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring')
+                  option(value='dependents-desc' data-i18n='sortDepsDesc') 依赖数 (高到低)
+                  option(value='dependents-asc' data-i18n='sortDepsAsc') 依赖数 (低到高)
+                  option(value='name-asc' data-i18n='sortFileNameAsc') 文件名 (A-Z)
+                  option(value='name-desc' data-i18n='sortFileNameDesc') 文件名 (Z-A)
+                select#dep-filter-select(class='px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring')
+                  option(value='' data-i18n='allFiles') 所有文件
+                  option(value='src' data-i18n='srcFiles') 源码文件
+                  option(value='node_modules' data-i18n='dependencyPackageFiles') 依赖包文件
+                  option(value='high-deps' data-i18n='highDependencyFiles') 高依赖文件 (>100)
+            .table-scroll.overflow-x-auto
+              table.w-full
+                thead.bg-muted
+                  tr
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colFilePath') 文件路径
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colDependentCount') 被依赖次数
+                    th.px-6.py-3.text-left.text-xs.font-medium.text-muted-foreground.uppercase.tracking-wider(data-i18n='colAction') 操作
+                tbody#dependencies-table-body(class='divide-y divide-border')
+            .mt-6.flex.items-center.justify-between
+              .text-sm.text-muted-foreground
+                span(data-i18n='show') 显示
+                |  
+                span#dep-range 0-0
+                span(data-i18n='itemsSepA')  项，共 
+                span#dep-total 0
+                span(data-i18n='itemsSepB')  项
+              .flex.items-center.space-x-2
+                button#dep-prev-page(class='px-3 py-1 border border-border rounded text-sm hover:bg-accent disabled:opacity-50' data-i18n='prevPage') 上一页
+                span#dep-page-info.px-3.py-1.text-sm 1 / 1
+                button#dep-next-page(class='px-3 py-1 border border-border rounded text-sm hover:bg-accent disabled:opacity-50' data-i18n='nextPage') 下一页
+
+  script
+    include analyse-app.js

package/src/templates/analyseTemplate.ts

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+import pug from 'pug'
+
+type FeatherIcon = { toSvg: (attrs?: Record<string, string>) => string }
+type FeatherModule = { icons: Record<string, FeatherIcon> }
+
+const feather = require('feather-icons') as FeatherModule
+const ICON_NAME_MAP: Record<string, string> = {
+  'folder-tree': 'folder',
+  'git-fork': 'git-branch',
+  flame: 'zap',
+}
+
+function svgInner(kebabName: string): string {
+  const iconName = ICON_NAME_MAP[kebabName] || kebabName
+  const icon = feather.icons[iconName]
+  if (!icon) return ''
+  const raw = icon.toSvg()
+  const match = raw.match(/<svg[^>]*>([\s\S]*)<\/svg>/i)
+  return match ? match[1].trim().replace(/\s+/g, ' ') : ''
+}
+
+function icons(name: string, extraClass?: string): string {
+  const inner = svgInner(name)
+  if (!inner) return ''
+  const cls = extraClass ? `lucide-inline ${extraClass}` : 'lucide-inline'
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ' +
+    'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ' +
+    `class="${cls}">${inner}</svg>`
+  )
+}
+
+const templatePath = path.join(__dirname, 'analyse.pug')
+
+export const analyseHtml: string = pug.renderFile(templatePath, {
+  pretty: true,
+  basedir: __dirname,
+  icons,
+})
+
+export const iconsInlineJs: string = fs.readFileSync(path.join(__dirname, 'icons-inline.js'), 'utf8')
+
+export const tailwindJs: string = fs.readFileSync(path.join(__dirname, 'tailwindcss.js'), 'utf8')

package/src/templates/icons-inline.js

@@ -0,0 +1,27 @@
+/* Icon runtime map for report template. Keep this file in sync manually. */
+(function () {
+  var I = {"list":"<path d=\"M3 5h.01\" /> <path d=\"M3 12h.01\" /> <path d=\"M3 19h.01\" /> <path d=\"M8 5h13\" /> <path d=\"M8 12h13\" /> <path d=\"M8 19h13\" />","folder-tree":"<path d=\"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z\" /> <path d=\"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z\" /> <path d=\"M3 5a2 2 0 0 0 2 2h3\" /> <path d=\"M3 3v13a2 2 0 0 0 2 2h3\" />","git-fork":"<circle cx=\"12\" cy=\"18\" r=\"3\" /> <circle cx=\"6\" cy=\"6\" r=\"3\" /> <circle cx=\"18\" cy=\"6\" r=\"3\" /> <path d=\"M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9\" /> <path d=\"M12 12v3\" />","search":"<path d=\"m21 21-4.34-4.34\" /> <circle cx=\"11\" cy=\"11\" r=\"8\" />","chevrons-down":"<path d=\"m7 6 5 5 5-5\" /> <path d=\"m7 13 5 5 5-5\" />","chevrons-up":"<path d=\"m17 11-5-5-5 5\" /> <path d=\"m17 18-5-5-5 5\" />","file-text":"<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" /> <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" /> <path d=\"M10 9H8\" /> <path d=\"M16 13H8\" /> <path d=\"M16 17H8\" />","trending-up":"<path d=\"M16 7h6v6\" /> <path d=\"m22 7-8.5 8.5-5-5L2 17\" />","star":"<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" />","flame":"<path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\" />","file":"<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" /> <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />","package":"<path d=\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\" /> <path d=\"M12 22V12\" /> <polyline points=\"3.29 7 12 12 20.71 7\" /> <path d=\"m7.5 4.27 9 5.15\" />","chevron-right":"<path d=\"m9 18 6-6-6-6\" />","folder":"<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />","x":"<path d=\"M18 6 6 18\" /> <path d=\"m6 6 12 12\" />","info":"<circle cx=\"12\" cy=\"12\" r=\"10\" /> <path d=\"M12 16v-4\" /> <path d=\"M12 8h.01\" />"};
+  window.iconSvg = function (name, className) {
+    var inner = I[name];
+    if (!inner) return '';
+    var cls = className ? 'lucide-inline ' + className : 'lucide-inline';
+    return (
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' +
+      cls +
+      '">' +
+      inner +
+      '</svg>'
+    );
+  };
+  window.lucide = {
+    createIcons: function () {
+      document.querySelectorAll('[data-lucide]').forEach(function (el) {
+        var name = el.getAttribute('data-lucide');
+        if (!name) return;
+        var cls = el.getAttribute('class') || '';
+        var svg = window.iconSvg(name, cls);
+        if (svg) el.outerHTML = svg;
+      });
+    },
+  };
+})();