Report on initial chunks

__tests__/__snapshots__/main.test.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Shows initial stats for builds with async chunks 1`] = `
+"**Total**
+
+Files count | Total bundle size | % Changed
+----------- | ----------------- | ---------
+7 -> 2 | 1.34 MB -> 1.29 MB (-53.65 KB)<br />386.44 KB -> N/A (gzip) | -3.91%"
+`;
+
 exports[`Shows stats when files are added 1`] = `
 "**Total**
 

__tests__/main.test.ts

@@ -93,6 +93,23 @@ test('computes the correct module diff information', async () => {
   expect(statsDiff?.total.new).toEqual(statsDiff?.total.old)
   expect(statsDiff?.total.diff).toEqual(0)
   expect(statsDiff?.total.diffPercentage).toEqual(0)
+  // No async chunks results in no initial stats being reported
+  expect(statsDiff?.initial).toBe(undefined)
+
+  // TODO(mariaines): add test case for initial stats for a build with async chunks
+})
+
+// TODO(mariaines): update this snapshot for testing initial stats
+test('Shows initial stats for builds with async chunks', async () => {
+  const statsDiff = getStatsDiff(
+    await readJsonFile('./__mocks__/old-stats-assets.json'),
+    await readJsonFile('./__mocks__/new-stats-assets.json')
+  )
+  const chunkModuleDiff = getChunkModuleDiff(
+    await readJsonFile('./__mocks__/old-stats-with-chunks.json'),
+    await readJsonFile('./__mocks__/new-stats-with-chunks.json')
+  )
+  expect(printTotalAssetTable(statsDiff, chunkModuleDiff)).toMatchSnapshot()
 })
 
 test('displays module information when files are added/removed/changed', async () => {

src/get-chunk-module-diff.ts

@@ -1,14 +1,14 @@
 import type {StatsCompilation} from 'webpack'
 import {chunkModuleNameToSizeMap} from './name-to-size-map'
-import type {WebpackStatsDiff} from './types'
+import type {WebpackStatsDiff, ChunkSizes} from './types'
 import {webpackStatsDiff} from './webpack-stats-diff'
 
 export function getChunkModuleDiff(
   oldStats: Pick<StatsCompilation, 'chunks'>,
   newStats: Pick<StatsCompilation, 'chunks'>
-): WebpackStatsDiff | null {
+): WebpackStatsDiff<ChunkSizes> | undefined {
   if (!oldStats.chunks || !newStats.chunks) {
-    return null
+    return undefined
   }
   return webpackStatsDiff(
     chunkModuleNameToSizeMap(oldStats.chunks),

src/get-stats-diff.ts

@@ -1,12 +1,12 @@
 import type {StatsCompilation} from 'webpack'
 import {assetNameToSizeMap} from './name-to-size-map'
-import type {WebpackStatsDiff} from './types'
+import type {WebpackStatsDiff, Sizes} from './types'
 import {webpackStatsDiff} from './webpack-stats-diff'
 
 export function getStatsDiff(
   oldAssetStats: Pick<StatsCompilation, 'assets'>,
   newAssetStats: Pick<StatsCompilation, 'assets'>
-): WebpackStatsDiff {
+): WebpackStatsDiff<Sizes> {
   return webpackStatsDiff(
     assetNameToSizeMap(oldAssetStats.assets),
     assetNameToSizeMap(newAssetStats.assets)

src/name-to-size-map.ts

@@ -1,5 +1,5 @@
 import {StatsCompilation} from 'webpack'
-import type {Sizes} from './types'
+import type {Sizes, ChunkSizes} from './types'
 
 export function assetNameToSizeMap(
   statAssets: StatsCompilation['assets'] = []
@@ -32,7 +32,7 @@ export function assetNameToSizeMap(
 
 export function chunkModuleNameToSizeMap(
   statChunks: StatsCompilation['chunks'] = []
-): Map<string, Sizes> {
+): Map<string, ChunkSizes> {
   return new Map(
     statChunks.flatMap(chunk => {
       if (!chunk.modules) return []
@@ -43,6 +43,7 @@ export function chunkModuleNameToSizeMap(
           return module.modules.map(submodule => [
             submodule.name ?? '',
             {
+              initial: chunk.initial,
               size: submodule.size ?? 0,
               gzipSize: null
             }
@@ -52,6 +53,7 @@ export function chunkModuleNameToSizeMap(
             [
               module.name ?? '',
               {
+                initial: chunk.initial,
                 size: module.size ?? 0,
                 gzipSize: null
               }

src/print-markdown.ts

@@ -1,5 +1,5 @@
 import {formatFileSizeIEC} from './file-sizes'
-import type {AssetDiff, WebpackStatsDiff} from './types'
+import type {AssetDiff, WebpackStatsDiff, Sizes, ChunkSizes} from './types'
 
 function conditionalPercentage(number: number): string {
   if ([Infinity, -Infinity].includes(number)) {
@@ -86,7 +86,7 @@ function printAssetTableRow(asset: AssetDiff): string {
 }
 
 export function printAssetTablesByGroup(
-  statsDiff: Omit<WebpackStatsDiff, 'total'>
+  statsDiff: Omit<WebpackStatsDiff<Sizes>, 'total'>
 ): string {
   const statsFields = [
     'added',
@@ -159,7 +159,7 @@ function printChunkModuleRow(chunkModule: AssetDiff): string {
 }
 
 export function printChunkModulesTable(
-  statsDiff: Omit<WebpackStatsDiff, 'total' | 'unchanged'> | null
+  statsDiff?: Omit<WebpackStatsDiff<Sizes>, 'total' | 'unchanged'>
 ): string {
   if (!statsDiff) return ''
   const changedModules = [
@@ -193,10 +193,17 @@ ${changedModules
 }
 
 export function printTotalAssetTable(
-  statsDiff: Pick<WebpackStatsDiff, 'total'>
+  totalStatsDiff: Pick<WebpackStatsDiff<Sizes>, 'total'>,
+  initialStatsDiff?: Pick<WebpackStatsDiff<ChunkSizes>, 'initial'>
 ): string {
-  return `**Total**
+  const result = `**Total**
 
 ${TOTAL_HEADERS}
-${printAssetTableRow(statsDiff.total)}`
+${printAssetTableRow(totalStatsDiff.total)}`
+  if (initialStatsDiff && initialStatsDiff.initial) {
+    return `${result}
+  ${printAssetTableRow(initialStatsDiff.initial)}`
+  } else {
+    return result
+  }
 }

src/to-comment-body.ts

@@ -3,15 +3,15 @@ import {
   printChunkModulesTable,
   printTotalAssetTable
 } from './print-markdown'
-import type {WebpackStatsDiff} from './types'
+import type {WebpackStatsDiff, Sizes, ChunkSizes} from './types'
 
 export function getIdentifierComment(key: string): string {
   return `<!--- bundlestats-action-comment${key ? ` key:${key}` : ''} --->`
 }
 
 export function getCommentBody(
-  statsDiff: WebpackStatsDiff,
-  chunkModuleDiff: WebpackStatsDiff | null,
+  statsDiff: WebpackStatsDiff<Sizes>,
+  chunkModuleDiff: WebpackStatsDiff<ChunkSizes> | undefined,
   title: string
 ): string {
   return `
@@ -21,7 +21,7 @@ Hey there, this message comes from a [GitHub action](https://github.com/github/w
 
 As this PR is updated, I'll keep you updated on how the bundle size is impacted.
 
-${printTotalAssetTable(statsDiff)}
+${printTotalAssetTable(statsDiff, chunkModuleDiff)}
 ${chunkModuleDiff ? `${printChunkModulesTable(chunkModuleDiff)}\n` : ''}
 <details>
 <summary>View detailed bundle breakdown</summary>

src/types.ts

@@ -12,16 +12,29 @@ export type AssetDiff = {
   diffPercentage: number
 }
 
-export type Sizes = {
+export interface Sizes {
   size: number
   gzipSize: number | null
 }
 
-export type WebpackStatsDiff = {
+export interface ChunkSizes extends Sizes {
+  initial: boolean
+}
+
+export function isChunkSizes(sizes: Sizes): sizes is ChunkSizes {
+  return 'initial' in sizes
+}
+
+interface _WebpackStatsDiff {
   added: AssetDiff[]
   removed: AssetDiff[]
   bigger: AssetDiff[]
   smaller: AssetDiff[]
   unchanged: AssetDiff[]
   total: AssetDiff
+  initial?: AssetDiff
 }
+
+export type WebpackStatsDiff<T extends Sizes> = T extends ChunkSizes
+  ? _WebpackStatsDiff
+  : Omit<_WebpackStatsDiff, 'initial'>