DEV Community

Cover image for analyzeSizeChange script in tRPC source code
thinkThroo
thinkThroo

Posted on

analyzeSizeChange script in tRPC source code

In this article, we provide an overview of analyzeSizeChange script in trpc source code.

This file has the following functions:

1. func analyzeSizeChange

2. func onAnalysis

3. type GitHubLogType

4. type GitHubLogOptions

5. func logNewModule

6. func logDifference

7. func logGithubMessage

8. func difference

9. func resolveJsonPaths

10. func stripAnsiEscapes

11. func formatGithubOptions

12. func formatGithubMessage

Image description

The most important function here is analyzeSizeChange because it has a function named onAnalysis.

export default function analyzeSizeChange(packageDir: string) {
 let analyzePluginIterations = 0;
 return analyze({
 summaryOnly: process.env.CI ? undefined : true,
 skipFormatted: process.env.CI ? true : undefined,
 onAnalysis: (analysis) => {
 …
 // calls logDifference
 if (prevModule) {
 logDifference(
 `Module '${module.id}'`,
 prevModule.size,
 module.size,
 );
 } else {
 logNewModule(module.id, module.size);
 }
 …
 })
}
Enter fullscreen mode Exit fullscreen mode

logDifference and logNewModule are in this same file and are colocated. This is for readability and reusability purposes.

logNewModule:

function logNewModule(name: string, size: number) {
 if (size < ABSOLUTE_BYTE_CHANGE_THRESHOLD) {
   return;
 }
 const type = 'notice';
 const options = {
   title: `New Module (${size} bytes in ${name})`,
 };
 const message = `${name} size: ${size} bytes`;
 logGithubMessage(type, message, options);
}
Enter fullscreen mode Exit fullscreen mode

logNewModule calls a function named logGithubMessage that is located somewhere at the bottom of this same file after this

function.

logDifference:

function logDifference(name: string, before: number, after: number) {
 const change = difference(before, after);
 if (
   change.absolute < ABSOLUTE_BYTE_CHANGE_THRESHOLD &&
   change.percent < PERCENT_CHANGE_THRESHOLD
 ) {
   return;
 }
 const type = 'error';
 const options = {
   title: `Important Size Change (${change.absolute} bytes in ${name})`,
 };
 const message = `${name} size change: ${
   change.absolute
 } bytes (${change.percent.toFixed(2)}%)`;
 logGithubMessage(type, message, options);
}
Enter fullscreen mode Exit fullscreen mode

logDifference calls logGithubMessage and difference functions, at this point, we can see that function heierarchy is

from top to bottom, core functions are ranked higher while single responsibility functions are positioned lower.

logGithubMessage

function logGithubMessage(
 type: GitHubLogType,
 message: string,
 options: GitHubLogOptions = {},
) {
 console.log(
   stripAnsiEscapes(
   `::${type} ${formatGithubOptions(options)}::${formatGithubMessage(
   message,
   )
}`,
),
 );
}
Enter fullscreen mode Exit fullscreen mode

logGithubMessage uses three functions — stripAnsiEscapes, formatGithubOptions and formatGithubMessage.

About us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed resubale Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to disucss your project.

Image description

Image description

References:

1. https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts



Top comments (0)