{"version":3,"file":"pages/BundleSize/components/index.mjs","sources":["../../../../src/pages/BundleSize/components/index.tsx"],"sourcesContent":["import {\n  CodepenCircleOutlined,\n  DeploymentUnitOutlined,\n  InfoCircleOutlined,\n  ShrinkOutlined,\n  ArrowsAltOutlined,\n} from '@ant-design/icons';\nimport { type Client, SDK } from '@rsdoctor/types';\nimport {\n  Button,\n  Card,\n  Col,\n  Row,\n  Space,\n  Tag,\n  Tooltip,\n  Typography,\n  Tabs,\n} from 'antd';\nimport React, { useId } from 'react';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { useProjectInfo } from '../../../components/Layout/project-info-context';\nimport {\n  flattenTreemapData,\n  usePersistedState,\n  useTheme,\n} from '../../../utils';\nimport { BundleCards } from './cards';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport {\n  AssetTreemapWithFilter,\n  TreeNode,\n} from 'src/components/Charts/TreeMap';\nimport { Rspack } from '@rsdoctor/utils/common';\nimport { TreeGraph } from './tree-graph';\nimport { isJavaScriptAsset } from '../../../utils/assets';\n\ninterface WebpackModulesOverallProps {\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: Client.RsdoctorClientAssetsSummary;\n  entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n}\n\nexport const WebpackModulesOverallBase: React.FC<\n  WebpackModulesOverallProps\n> = ({ errors, cwd, summary, entryPoints }) => {\n  const [expanded, setExpanded] = usePersistedState(\n    'bundle-size-tabs-card-expanded',\n    false,\n  );\n  const cardDomId = useId();\n  const expandActionText = expanded ? 'Shrink card' : 'Expand card';\n  const { isLight } = useTheme();\n  // In light mode the tooltip's background is dark and the text is also dark cause Typography is used inside. dark mode is ok\n  const treeGraphTooltipColor = isLight ? 'white' : undefined;\n  return (\n    <>\n      <React.Activity mode={expanded ? 'hidden' : 'visible'}>\n        <BundleCards cwd={cwd} errors={errors} summary={summary} />\n      </React.Activity>\n      <Card\n        className={styles.root}\n        classNames={{ body: styles.rootBody }}\n        id={cardDomId}\n      >\n        <Tabs\n          size=\"middle\"\n          className={styles.tabsRoot}\n          tabBarExtraContent={{\n            right: (\n              <Tooltip\n                // the content collapses/expands, but the cursor stays at the same position (outside the button now, cause layout has shifted)\n                // antd doesn't know that and keeps the tooltip open, so we need to force rerender it on every state change\n                key={String(expanded)}\n                title={expandActionText}\n              >\n                <Button\n                  // TODO:: does it make sense here? the content basically stays the same and we're actually controlling other elements\n                  aria-controls={cardDomId}\n                  aria-expanded={expanded}\n                  aria-label={expandActionText}\n                  onClick={() => setExpanded(!expanded)}\n                  icon={expanded ? <ShrinkOutlined /> : <ArrowsAltOutlined />}\n                  size=\"small\"\n                ></Button>\n              </Tooltip>\n            ),\n          }}\n          items={[\n            {\n              key: 'tree',\n              label: (\n                <Space>\n                  <Typography.Text>Tree Graph</Typography.Text>\n                  <Tooltip\n                    overlayStyle={{ maxWidth: 380 }}\n                    overlayInnerStyle={{ marginLeft: 16, padding: 10 }}\n                    color={treeGraphTooltipColor}\n                    title={\n                      <Space\n                        direction=\"vertical\"\n                        color={treeGraphTooltipColor}\n                        size=\"middle\"\n                      >\n                        <Row>\n                          <Col>\n                            <Tag color=\"cyan\" style={{ margin: 0 }}>\n                              initial\n                            </Tag>\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Identify whether the chunk is an initial chunk.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color=\"green\" style={{ margin: 0 }}>\n                              concatenated\n                            </Tag>\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Identify whether the module is a concatenated\n                              module\n                            </Typography.Text>\n                            {/* TODO:: it's literally a tooltip inside another tooltip */}\n                            <Tooltip\n                              overlayStyle={{ maxWidth: 408 }}\n                              placement=\"bottom\"\n                              color={treeGraphTooltipColor}\n                              title={\n                                <Space direction=\"vertical\" color=\"white\">\n                                  <Row>\n                                    <Col>\n                                      <Typography.Text strong>\n                                        Concatenated Module\n                                      </Typography.Text>\n                                      <Typography.Text>\n                                        : A performance optimization where\n                                        multiple modules are merged (or\n                                        \"hoisted\") into a single scope instead\n                                        of wrapping each module in separate\n                                        function closures. This reduces the\n                                        bundle size and improves runtime\n                                        performance by minimizing function call\n                                        overhead.\n                                      </Typography.Text>\n                                    </Col>\n                                  </Row>\n                                </Space>\n                              }\n                            >\n                              <Typography.Text\n                                type=\"secondary\"\n                                style={{ marginLeft: 4 }}\n                              >\n                                <InfoCircleOutlined />\n                              </Typography.Text>\n                            </Tooltip>\n                            <Typography.Text>.</Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Button\n                              size=\"small\"\n                              icon={<CodepenCircleOutlined />}\n                            />\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Open the code.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Button\n                              size=\"small\"\n                              icon={<DeploymentUnitOutlined />}\n                            />\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              View the module dependency, that is, module\n                              reasons in stats.json.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color={'purple'}>{'Bundled: 15.77 KB'}</Tag>\n                            <Typography.Text>\n                              The final size of the output files after\n                              processing, bundling, and optimization. This is\n                              what is delivered to the browser.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color={'orange'}>{'Source: 60.46 KB'}</Tag>\n                            <Typography.Text>\n                              The original size of your source code files before\n                              any processing or transformations. This is the raw\n                              size of your code as you wrote it.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                      </Space>\n                    }\n                  >\n                    <InfoCircleOutlined\n                      style={{ color: 'var(--text-color-secondary)' }}\n                    />\n                  </Tooltip>\n                </Space>\n              ),\n              children: (\n                <TreeGraph\n                  entryPoints={entryPoints}\n                  cwd={cwd}\n                  summary={summary}\n                />\n              ),\n            },\n            {\n              key: 'treemap',\n              label: 'Treemap',\n              children: (\n                <ServerAPIProvider api={SDK.ServerAPI.API.GetProjectInfo}>\n                  {(data) => {\n                    const { isRspack, hasSourceMap } =\n                      Rspack.checkSourceMapSupport(data.configs);\n                    return (\n                      <ServerAPIProvider\n                        api={SDK.ServerAPI.API.GetSummaryBundles}\n                      >\n                        {(data) => {\n                          // Filter assets to only show JS (js, cjs, mjs), .bundle, CSS, and HTML files\n                          const isVisibleTreemapAsset = (filePath: string) => {\n                            const ext =\n                              filePath.toLowerCase().split('.').pop() || '';\n                            return (\n                              isJavaScriptAsset(filePath) ||\n                              ext === 'css' ||\n                              ext === 'html'\n                            );\n                          };\n\n                          const computedTreeData: TreeNode[] = data\n                            .filter((item) =>\n                              isVisibleTreemapAsset(item.asset.path),\n                            )\n                            .map((item) => {\n                              const moduleTree = flattenTreemapData(\n                                item.modules,\n                              );\n                              const hasModules = item.modules.length > 0;\n                              return {\n                                name: item.asset.path,\n                                sourceSize: hasModules\n                                  ? (moduleTree.sourceSize ?? 0)\n                                  : item.asset.size,\n                                bundledSize: item.asset.size,\n                                gzipSize: item.asset.gzipSize ?? 0,\n                                children: moduleTree.children,\n                              };\n                            });\n                          return (\n                            <AssetTreemapWithFilter\n                              treeData={computedTreeData}\n                              bundledSize={hasSourceMap || isRspack}\n                            />\n                          );\n                        }}\n                      </ServerAPIProvider>\n                    );\n                  }}\n                </ServerAPIProvider>\n              ),\n            },\n          ]}\n          defaultActiveKey=\"tree\"\n        />\n      </Card>\n    </>\n  );\n};\n\nexport const WebpackModulesOverall: React.FC = () => {\n  const { project } = useProjectInfo();\n\n  if (!project) {\n    return null;\n  }\n\n  const { root, errors } = project;\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: true }}\n    >\n      {(summary) => {\n        return (\n          <ServerAPIProvider api={SDK.ServerAPI.API.GetEntryPoints}>\n            {(entryPoints) => (\n              <WebpackModulesOverallBase\n                cwd={root}\n                errors={errors}\n                summary={summary}\n                entryPoints={entryPoints}\n              />\n            )}\n          </ServerAPIProvider>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["WebpackModulesOverallBase","errors","cwd","summary","entryPoints","expanded","setExpanded","usePersistedState","cardDomId","useId","expandActionText","isLight","useTheme","treeGraphTooltipColor","undefined","React","BundleCards","Card","styles","Tabs","Tooltip","Button","ShrinkOutlined","ArrowsAltOutlined","String","Space","Typography","Row","Col","Tag","InfoCircleOutlined","CodepenCircleOutlined","DeploymentUnitOutlined","TreeGraph","ServerAPIProvider","SDK","data","isRspack","hasSourceMap","Rspack","isVisibleTreemapAsset","filePath","ext","isJavaScriptAsset","computedTreeData","item","moduleTree","flattenTreemapData","hasModules","AssetTreemapWithFilter","WebpackModulesOverall","project","useProjectInfo","root"],"mappings":"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"}