Merge pull request #50 from liamgold/feature/bundle-co2-library

Bundle @tgwf/co2 library locally to remove Skypack CDN dependency

Author: liamgold

examples/DancingGoat/packages.lock.json

@@ -1062,14 +1062,14 @@
         "dependencies": {
           "Kentico.Xperience.admin": "[30.4.2, )",
           "Kentico.Xperience.webapp": "[30.4.2, )",
-          "Microsoft.Playwright": "[1.52.0, )"
+          "Microsoft.Playwright": "[1.55.0, )"
         }
       },
       "Microsoft.Playwright": {
         "type": "CentralTransitive",
-        "requested": "[1.52.0, )",
-        "resolved": "1.52.0",
-        "contentHash": "zH8a7OiXtq8BC6i0yYHAG/DSN8J8/bVyQYVESK7mK1ZJF19eY1ca51BAQpQxzF+Qm/A20x6Rsl8cT+QYXSfxbw==",
+        "requested": "[1.55.0, )",
+        "resolved": "1.55.0",
+        "contentHash": "iPVHeRI5EZB1gK43MC/qnINvGUV3pYh/PJn5wNmeaiZ4ARlFAfK3azf46c7/kx/lmVaknZ5rSNT1F8SZgSaWSQ==",
         "dependencies": {
           "Microsoft.Bcl.AsyncInterfaces": "6.0.0",
           "System.ComponentModel.Annotations": "5.0.0",

src/Client/package-lock.json

@@ -6,11 +6,14 @@
   "scripts": {
     "start": "webpack serve --mode development",
     "dev:buildlike": "webpack serve --mode development --env buildlike=true",
-    "build": "webpack --mode=production"
+    "build": "npm run build:admin && npm run build:resource-checker",
+    "build:admin": "webpack --mode=production",
+    "build:resource-checker": "webpack --config webpack.resource-checker.config.js"
   },
   "dependencies": {
     "@kentico/xperience-admin-base": "30.4.2",
     "@kentico/xperience-admin-components": "30.4.2",
+    "@tgwf/co2": "^0.15.0",
     "css-loader": "^7.1.2",
     "postcss-loader": "^8.2.0",
     "react": "^18.3.1",

src/Client/package.json

@@ -0,0 +1,69 @@
+import { co2, hosting } from '@tgwf/co2';
+
+export async function reportEmissions() {
+    console.log("reportEmissions called");
+
+    await scrollPage();
+    await delay(2000); // give lazy-loaded resources time to load
+
+    console.log("getting emissions data");
+    const emissionsData = await getEmissionsData();
+    console.log("received emissions data");
+
+    const emissionsDiv = document.createElement("div");
+    emissionsDiv.setAttribute("data-testid", "sustainabilityData");
+    emissionsDiv.textContent = JSON.stringify(emissionsData);
+
+    document.body.appendChild(emissionsDiv);
+}
+
+async function scrollPage() {
+    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+    return delay(2000);
+}
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function getEmissionsData() {
+    console.log("calculating...");
+    const resources = getResources();
+    const bytesSent = getTransferSize(resources);
+    const hostCheck = await hosting.check(window.location.hostname);
+
+    const co2Emission = new co2({ model: "swd" });
+    const emissions = co2Emission.perVisitTrace(bytesSent, hostCheck);
+
+    return {
+        pageWeight: bytesSent,
+        carbonRating: calculateGrade(emissions.co2),
+        emissions: emissions,
+        resources: resources
+    };
+}
+
+function getResources() {
+    const allResources = window.performance.getEntriesByType("resource");
+    // Filter out the resource-checker.js script itself to avoid artificially inflating page weight calculations
+    return allResources.filter(resource => {
+        const url = resource.name || '';
+        return !url.includes('resource-checker.js');
+    });
+}
+
+function getTransferSize(resources) {
+    return resources.reduce((total, entry) => total + entry.transferSize, 0);
+}
+
+// grade using swd digital carbon ratings
+// https://sustainablewebdesign.org/digital-carbon-ratings/
+function calculateGrade(score) {
+    if (score < 0.095) return 'A+';
+    if (score < 0.186) return 'A';
+    if (score < 0.341) return 'B';
+    if (score < 0.493) return 'C';
+    if (score < 0.656) return 'D';
+    if (score < 0.846) return 'E';
+    return 'F';
+}

src/Client/src/resource-checker.js

@@ -0,0 +1,38 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: path.resolve(__dirname, "src/resource-checker.js"),
+  output: {
+    path: path.resolve(__dirname, "../wwwroot/scripts"),
+    filename: "resource-checker.js",
+    library: {
+      type: "module",
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              ["@babel/preset-env", {
+                targets: "> .2% and last 3 versions, not op_mini all, not IE 11",
+                modules: false,
+              }]
+            ],
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".js"],
+  },
+};

src/Client/webpack.resource-checker.config.js

@@ -4,6 +4,7 @@
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
 using Microsoft.Playwright;
+using System.Reflection;
 using System.Text.Json;
 using XperienceCommunity.Sustainability.Models;
 
@@ -23,9 +24,15 @@ public class SustainabilityService : ISustainabilityService
     private readonly IInfoProvider<SustainabilityPageDataInfo> _sustainabilityPageDataInfoProvider;
     private readonly SustainabilityOptions _options;
 
-    private const string ScriptPath = "/_content/XperienceCommunity.Sustainability/scripts/resource-checker.js";
+    private static readonly string ScriptPath = GetScriptPath();
     private const string SustainabilityDataTestId = "sustainabilityData";
 
+    private static string GetScriptPath()
+    {
+        var version = Assembly.GetExecutingAssembly().GetName().Version?.ToString() ?? "1.0.0";
+        return $"/_content/XperienceCommunity.Sustainability/scripts/resource-checker.js?v={version}";
+    }
+
     public SustainabilityService(
         IWebHostEnvironment env,
         IEventLogService eventLogService,