Header

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
                 'plugin:react/recommended',
                 'plugin:@typescript-eslint/recommended',
                 'plugin:prettier/recommended',
+                'plugin:react/jsx-runtime', // Enables the new JSX transform runtime
             ],
             parserOptions: {
                 ecmaversion: 2018,

.github/actions/analyze/action.yml

@@ -27,6 +27,9 @@ inputs:
   DATADOG_SESSION_SAMPLE_RATE:
     description: 'Datadog session sample rate'
     required: false
+  GITHUB_TOKEN:
+    description: 'Github token for downloading artifacts'
+    required: true
   GD_API_KEY:
     description: 'Google drive api key'
     required: false
@@ -54,10 +57,51 @@ inputs:
   IS_GROWTHBOOK_ENABLED:
     description: 'Is growthbook enabled'
     required: true
+  ISSUE_NUMBER:
+    description: 'Issue to post a comment to'
+    required: false
+  TRUSTPILOT_API_KEY:
+    description: 'Trustpilot api key'
+    required: false
 
 runs:
   using: composite
   steps:
+  - name: Get artifact URL
+    id: get_artifact_url
+    env:
+      GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}
+    shell: bash
+    run: |
+      RESPONSE=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN" \
+        "https://api.github.com/repos/${{ github.repository }}/actions/artifacts?name=analyse")
+
+      ARTIFACT_URL=$(echo $RESPONSE | jq -r '.artifacts[0].archive_download_url')
+
+      if [[ -z "$ARTIFACT_URL" ]]; then
+        echo "Error: No artifact URL found for the master branch with prefix 'analyse'."
+        exit 1
+      else
+        echo "Artifact URL: $ARTIFACT_URL"
+      fi
+
+      echo "artifact_url=$ARTIFACT_URL" >> $GITHUB_OUTPUT
+      echo "artifact_url=$ARTIFACT_URL"
+
+  - name: Download artifact
+    if: steps.get_artifact_url.outputs.artifact_url != 'null'
+    env:
+      ARTIFACT_URL: ${{ steps.get_artifact_url.outputs.artifact_url }}
+      GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}
+    shell: bash
+    run: |
+      curl -L -H "Authorization: Bearer $GITHUB_TOKEN" \
+        "$ARTIFACT_URL" \
+        -o artifact.zip
+      unzip artifact.zip -d old
+      cd old
+      unzip analyse.zip
+
   - name: Analyze all packages
     env:
       NODE_ENV: ${{ inputs.NODE_ENV }}
@@ -77,18 +121,79 @@ runs:
       GROWTHBOOK_DECRYPTION_KEY: ${{ inputs.GROWTHBOOK_DECRYPTION_KEY }}
       REF_NAME: ${{ inputs.REF_NAME }}
       REMOTE_CONFIG_URL: ${{ inputs.REMOTE_CONFIG_URL }}
+      TRUSTPILOT_API_KEY: ${{ inputs.TRUSTPILOT_API_KEY }}
       NODE_OPTIONS: "--max_old_space_size=4096"
-    run: npm run build:prod && npm run analyze:stats
     shell: bash
+    run: npm run build:prod && npm run analyze:stats && npm run analyze:build
+
+  - name: Compare report to master
+    id: diff
+    if: steps.get_artifact_url.outputs.artifact_url != 'null'
+    shell: bash
+    run: |
+      DIFF_OUTPUT_HTML=$(node .github/actions/analyze/compareReports.js --format=html)
+      ABOVE_THRESHOLD=$(node .github/actions/analyze/compareReports.js --format=boolean) || { echo "Threshold check failed"; exit 1; }
+
+      # Output results to GITHUB_OUTPUT
+      echo "diff_output_html=$DIFF_OUTPUT_HTML" >> $GITHUB_OUTPUT
+      echo "above_threshold=$ABOVE_THRESHOLD" >> $GITHUB_OUTPUT
+
+  - name: Comment on PR with Diff Output
+    if: steps.get_artifact_url.outputs.artifact_url != 'null' && inputs.ISSUE_NUMBER
+    uses: actions/github-script@v5
+    env:
+      DIFF_OUTPUT_HTML: ${{ steps.diff.outputs.diff_output_html }}
+      ISSUE_NUMBER: ${{ inputs.ISSUE_NUMBER }}
+    with:
+      script: |
+        const diffOutputHtml = process.env.DIFF_OUTPUT_HTML;  // Removed Buffer.from and base64 decoding
+        const issueNumber = process.env.ISSUE_NUMBER;
+        github.rest.issues.createComment({
+          owner: context.repo.owner,
+          repo: context.repo.repo,
+          issue_number: issueNumber,
+          body: `${diffOutputHtml}`
+        });
+    continue-on-error: true
+
+  - name: Print out differences on console
+    id: print_diff
+    if: steps.get_artifact_url.outputs.artifact_url != 'null'
+    shell: bash
+    run: |
+      node .github/actions/analyze/compareReports.js --format=console
 
-  - name: Zip all stats.json files
+  - name: Validate size changes
+    if: ${{ steps.diff.outputs.above_threshold == 'true' }}
+    uses: actions/github-script@v5
+    with:
+      script: |
+        core.setFailed('Size changes exceed the defined threshold. Check above logs for details.');
+
+  - name: Zip all report.json files
+    shell: bash
     run: |
-      zip -r stats.zip packages/*/stats.json
+      zip -r analyse.zip packages/*/report.json
+
+  - name: Upload analyse.zip for Master Branch
+    if: github.ref == 'refs/heads/master'
+    uses: actions/upload-artifact@v4
+    with:
+      name: analyse
+      path: analyse.zip
+      retention-days: 20
+
+  - name: Set sanitized branch name
+    id: sanitize
     shell: bash
+    run: |
+      SANITIZED_REF_NAME=$(echo "${{ github.ref_name }}" | sed 's/[^a-zA-Z0-9]/-/g')
+      echo "SANITIZED_REF_NAME=${SANITIZED_REF_NAME}" >> $GITHUB_ENV
 
-  - name: Upload stats.zip
+  - name: Upload analyse.zip for Feature Branches
+    if: github.ref != 'refs/heads/master'
     uses: actions/upload-artifact@v4
     with:
-      name: stats-${{ github.sha }}
-      path: stats.zip
-      retention-days: 1
+      name: analyse-${{ env.SANITIZED_REF_NAME }}
+      path: analyse.zip
+      retention-days: 5

.github/actions/analyze/compareReports.js

@@ -0,0 +1,170 @@
+const fs = require('fs');
+const path = require('path');
+
+// read and use parameters from command line
+const args = process.argv.slice(2); // Skip the first two elements
+let format = args.find(arg => arg.startsWith('--format='))?.split('=')[1] || 'html';
+let orangeThreshold = +(args.find(arg => arg.startsWith('--orangeThreshold='))?.split('=')[1] || 0.5);
+let redThreshold = +(args.find(arg => arg.startsWith('--redThreshold='))?.split('=')[1] || 5);
+
+// main function execution
+main();
+
+function main() {
+    // format: [package]: { oldSize, newSize, diff, percentage }
+    const sizes = analyse();
+
+    // format to different output based on the format parameter
+    // nice table in html if its for comment, nice table in console if its for console, or just true/false if its just to check validity
+    if (format === 'html') {
+        let formattedOutput = formatToTable(sizes);
+        console.log(formattedOutput);
+    } else if (format === 'console') {
+        let formattedOutput = formatToConsole(sizes);
+        console.table(formattedOutput, ['oldSize', 'newSize', 'diff', 'percentage', 'alert']);
+    } else if (format === 'boolean') {
+        const aboveRedThreshold = Object.values(sizes).some(pkg => pkg.percentage > redThreshold);
+        if (aboveRedThreshold) {
+            console.log('true');
+        } else {
+            console.log('false');
+        }
+    }
+}
+
+function analyse() {
+    const packagesDir = './packages';
+    const oldPackagesDir = './old/packages';
+
+    const packages = [...new Set([...fs.readdirSync(packagesDir), ...fs.readdirSync(oldPackagesDir)])];
+
+    const result = {};
+
+    for (const pkg of packages) {
+        const oldReport = readJsonFile(path.join(oldPackagesDir, pkg, 'report.json'));
+        const newReport = readJsonFile(path.join(packagesDir, pkg, 'report.json'));
+
+        if (!newReport) {
+            continue;
+        }
+
+        const oldSize = oldReport ? oldReport.reduce((acc, item) => acc + item.gzipSize, 0) : null;
+        const newSize = newReport ? newReport.reduce((acc, item) => acc + item.gzipSize, 0) : null;
+
+        let diff = oldSize && newSize ? newSize - oldSize : oldSize || newSize;
+        let percentage = oldSize && newSize ? calculatePercentage(oldSize, newSize) : null;
+
+        result[pkg] = {
+            oldSize,
+            newSize,
+            diff,
+            percentage,
+        };
+    }
+
+    return result;
+}
+
+function formatToTable(sizes) {
+    const GREEN_SIGN = '🟢';
+    const YELLOW_SIGN = '🟡';
+    const RED_SIGN = '🔴';
+
+    let tableRows = '';
+    for (const [pkg, { oldSize, newSize, diff, percentage }] of Object.entries(sizes)) {
+        const formattedPercentage = formatPercentageWithSign(percentage);
+        const lightSign =
+            percentage > redThreshold ? RED_SIGN : percentage > orangeThreshold ? YELLOW_SIGN : GREEN_SIGN;
+
+        tableRows += `
+        <tr>
+          <td>${pkg}</td>
+          <td>${formatBytes(oldSize)}</td>
+          <td>${formatBytes(newSize)}</td>
+          <td>${formatBytes(diff, true)}</td>
+          <td>${formattedPercentage} ${lightSign}</td>
+        </tr>
+      `.trim();
+    }
+
+    return `
+    <table>
+        <thead>
+            <th>package</th>
+            <th>old</th>
+            <th>new</th>
+            <th>diff</th>
+            <th>pct change</th>
+        </thead>
+        <tbody>
+            ${tableRows}
+        </tbody>
+    </table>`
+        .replace(/[\n\t]/g, '')
+        .trim();
+}
+
+function formatToConsole(sizes) {
+    Object.keys(sizes).forEach(key => {
+        const pkg = sizes[key];
+        pkg.oldSize = formatBytes(pkg.oldSize);
+        pkg.newSize = formatBytes(pkg.newSize);
+        pkg.diff = formatBytes(pkg.diff, true);
+        pkg.alert = pkg.percentage > redThreshold ? 'FAIL' : pkg.percentage > orangeThreshold ? 'WARN' : 'OK';
+        pkg.percentage = formatPercentageWithSign(pkg.percentage);
+    });
+    return sizes;
+}
+
+function readJsonFile(filePath) {
+    if (fs.existsSync(filePath)) {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    }
+    return null;
+}
+
+function calculatePercentage(oldSize, newSize) {
+    return ((newSize - oldSize) / oldSize) * 100;
+}
+
+function formatBytes(bytes, sign = false) {
+    if (bytes === null || isNaN(bytes)) {
+        return 'n/a';
+    }
+
+    let formattedValue = '';
+
+    if (bytes < 1024) {
+        formattedValue = bytes + ' B'; // Bytes
+    } else if (bytes < 1048576) {
+        formattedValue = Math.round(bytes / 1024) + ' KB'; // Kilobytes
+    } else {
+        formattedValue = (bytes / 1048576).toFixed(1) + ' MB'; // Megabytes
+    }
+
+    if (sign) {
+        if (bytes === 0) {
+            return '0 B';
+        }
+        formattedValue = bytes >= 0 ? '+' + formattedValue : '-' + formattedValue;
+    }
+
+    return formattedValue;
+}
+
+function formatPercentageWithSign(percentage) {
+    if (percentage === null || isNaN(percentage)) {
+        return 'n/a';
+    }
+
+    const absPercentage = Math.abs(percentage);
+    const decimalPoints = absPercentage < 10 ? 1 : 2;
+    let formattedValue = percentage.toFixed(decimalPoints) + '%';
+
+    if (percentage === 0) {
+        return '0%';
+    }
+
+    return percentage >= 0 ? '+' + formattedValue : '−' + formattedValue;
+}

.github/actions/build/action.yml

@@ -54,6 +54,9 @@ inputs:
   IS_GROWTHBOOK_ENABLED:
     description: 'Is growthbook enabled'
     required: true
+  TRUSTPILOT_API_KEY:
+    description: 'Trustpilot api key'
+    required: false
 
 runs:
   using: composite
@@ -77,5 +80,6 @@ runs:
       GROWTHBOOK_DECRYPTION_KEY: ${{ inputs.GROWTHBOOK_DECRYPTION_KEY }}
       REF_NAME: ${{ inputs.REF_NAME }}
       REMOTE_CONFIG_URL: ${{ inputs.REMOTE_CONFIG_URL }}
+      TRUSTPILOT_API_KEY: ${{ inputs.TRUSTPILOT_API_KEY }}
     run: npm run build:all
     shell: bash

.github/workflows/analyze.yml

@@ -7,11 +7,16 @@ on:
     branches:
     - master
 
+
 jobs:
   build_and_test:
     name: Analyze Bundle
     runs-on: Runner_16cores_Deriv-app
     environment: Preview
+    permissions:
+      contents: read
+      pull-requests: write
+      actions: read
     steps:
     - name: Checkout
       uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
@@ -31,6 +36,7 @@ jobs:
         DATADOG_SESSION_REPLAY_SAMPLE_RATE: ${{ vars.DATADOG_SESSION_REPLAY_SAMPLE_RATE }}
         DATADOG_SESSION_SAMPLE_RATE: ${{ vars.DATADOG_SESSION_SAMPLE_RATE }}
         DATADOG_SESSION_SAMPLE_RATE_LOGS: ${{ vars.DATADOG_SESSION_SAMPLE_RATE_LOGS }}
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         GD_API_KEY: ${{ secrets.GD_API_KEY }}
         GD_APP_ID: ${{ secrets.GD_APP_ID }}
         GD_CLIENT_ID: ${{ secrets.GD_CLIENT_ID }}
@@ -39,3 +45,5 @@ jobs:
         GROWTHBOOK_DECRYPTION_KEY: ${{ vars.GROWTHBOOK_DECRYPTION_KEY }}
         REF_NAME: ${{ github.ref_name }}
         REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
+        ISSUE_NUMBER: ${{ github.event.pull_request.number }}
+        TRUSTPILOT_API_KEY: ${{ secrets.TRUSTPILOT_API_KEY }}

.github/workflows/release_production.yml

@@ -42,6 +42,7 @@ jobs:
         GROWTHBOOK_DECRYPTION_KEY: ${{ vars.GROWTHBOOK_DECRYPTION_KEY }}
         REF_NAME: ${{ github.ref_name }}
         REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
+        TRUSTPILOT_API_KEY: ${{ secrets.TRUSTPILOT_API_KEY }}
     - name: Run tests
       run: npm test
     - name: Versioning

.github/workflows/release_staging.yml

@@ -40,6 +40,7 @@ jobs:
         GROWTHBOOK_DECRYPTION_KEY: ${{ vars.GROWTHBOOK_DECRYPTION_KEY }}
         REF_NAME: ${{ github.ref_name }}
         REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
+        TRUSTPILOT_API_KEY: ${{ secrets.TRUSTPILOT_API_KEY }}
     - name: Run tests
       run: npm test
     - name: Versioning