Measure Bundle Size in CI and upload size data to docsite (#55)

* add bundlesize.yml

* Add bundleSize JSON fetch

* Add Table for bundleSize

* remove unused state

* Convert component to tsx and add error handling

* Add logic for pushing monosize json to charting-contrib repo

* Fix yarn.lock path for node setup

* Make fix in right file

* change repo to foked repo for test

* remove unused step

* remove on push trigger

* revert repo to MSFT repo

* Change JSON link

* Add intro

* Shorten links

* Update workflow dispatch desc

* Allow CORS in fetch

.github/workflows/bundlesize.yml

@@ -0,0 +1,69 @@
+name: "Generate bundle-size for react charting"
+on:
+  schedule:
+    - cron: "30 3 * * *"
+  # "30 3 * * *" --> Every day at 3:30 AM UTC --> Every day at  9:00 AM IST    
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: "Repo to run monosize on"
+        required: true
+        default: "microsoft/fluentui"
+      branch:
+        description: "Branch to run monosize on"
+        required: true
+        default: "master"
+jobs:
+  run-monosize:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{github.event.inputs.repo || 'microsoft/fluentui'}}
+          ref: ${{github.event.inputs.branch || 'master'}}
+          path: repo
+
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+          cache-dependency-path: ./repo/yarn.lock
+
+      - name: "Install dependencies and build upto react-charting"
+        run: |
+          cd repo
+          yarn && yarn buildto @fluentui/react-charting
+      
+      - name: "Run monosize on react-charting"
+        run: |
+          cd repo/packages/react-charting
+          yarn monosize measure
+          mv -f ./dist/bundle-size/monosize.json ./../../../
+          cd ./../../../
+          rm -rf ./repo
+
+      - uses: actions/checkout@v4
+        with:
+          repository: 'microsoft/fluentui-charting-contrib'
+          ref: 'test-coverage-artifacts'
+          path: contrib-repo
+
+      - name: Move new bundle-size to folder and clear old folder
+        run: |
+          cd ./contrib-repo
+          if [ -d bundle-size ]; then
+            rm -rf ./bundle-size
+          fi
+          mkdir bundle-size
+          cd ..
+          mv -f ./monosize.json ./contrib-repo/bundle-size/
+          cd contrib-repo/bundle-size
+          ls -a
+
+      - name: Push bundle-size to branch
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          repository: contrib-repo
+          branch: test-coverage-artifacts
+          commit_message: Scheduled bundle-size changes push

.github/workflows/testCoverage.yml

@@ -219,13 +219,17 @@ jobs:
       - name: Move coverage JSONs to root
         run: | 
           mv -f ./repo/.github ./
+          mv -f ./repo/bundle-size ./
           cd repo
           rm -rf ./*
           cd ..
           mv -f ./.github ./repo/
+          mv -f ./bundle-size ./repo/
           mv -f ./coverage/* ./repo/
           cd repo
           ls
+        continue-on-error: true
+
       - uses: stefanzweifel/git-auto-commit-action@v5
         with:
           repository: repo

apps/docsite/sidebars.ts

@@ -52,6 +52,7 @@ const sidebars: SidebarsConfig = {
       ]
     },
     'Testing Unpublished Library Version',
+    'BundleSize'
   ],
 
 };

apps/docsite/src/components/BundleSizeTable.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+type MonosizeJSON = {
+  name: string;
+  path: string;
+  minifiedSize: number;
+  gzippedSize: number;
+};
+const BundleSizeTable = () => {
+  const [bundleSizeData, setBundleSizeData] = useState<
+    MonosizeJSON[] | undefined
+  >(undefined);
+  const [errorState, setErrorState] = useState<Error | undefined>();
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          "https://raw.githubusercontent.com/microsoft/fluentui-charting-contrib/test-coverage-artifacts/bundle-size/monosize.json",
+          { mode: "cors" }
+        )
+        if (!response) {
+          throw new Error("Invalid response");
+        }
+        const data = await response.json();
+        setBundleSizeData(data);
+      } catch (error) {
+        setErrorState(error);
+      }
+    };
+    fetchData();
+  }, []);
+  if (errorState) {
+    return <h3>Error: {errorState.message}</h3>;
+  }
+  return (
+    <>
+      {bundleSizeData ? (
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>MIN size</th>
+              <th>GZIP size</th>
+            </tr>
+          </thead>
+          <tbody>
+            {bundleSizeData.map((item, index) => (
+              <tr key={index}>
+                <td>{item.name}</td>
+                <td>{(item.minifiedSize / 1024).toFixed(2)} KiB</td>
+                <td>{(item.gzippedSize / 1024).toFixed(2)} KiB</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <h4>Loading...</h4>
+      )}
+    </>
+  );
+};
+
+export default BundleSizeTable;

docs/BundleSize.md

@@ -0,0 +1,11 @@
+# Bundle Size
+
+This table measures the maximum unpacked size of each chart control. This is measured by the [monosize tool](https://github.com/microsoft/monosize).
+
+Each chart is [tree shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).
+The actual size overhead for your application consuming the chart will depend on only the piece of functionality that you are importing.
+To further improve the dependency size, consider turning on the mangle and code chunking options while bundling your package.
+
+import BundleSizeComponent from "../apps/docsite/src/components/BundleSizeTable.tsx"
+
+<BundleSizeComponent/>