fix(cypress): improve compatibility with bundlers

Fix argos-ci/argos#1126

build/rollup.js

@@ -1,5 +1,6 @@
 import { swc } from "rollup-plugin-swc3";
 import ts from "rollup-plugin-ts";
+import json from "@rollup/plugin-json";
 
 export const swcPlugin = swc({
   tsconfig: false,
@@ -31,7 +32,7 @@ export const buildEs = ({
     file: output,
     format: "es",
   },
-  plugins: [swcPlugin],
+  plugins: [json(), swcPlugin],
 });
 
 export const buildTypes = ({
@@ -41,9 +42,9 @@ export const buildTypes = ({
 } = {}) => ({
   input,
   external,
-  plugins: [tsPlugin],
   output: {
     file: output,
     format: "es",
   },
+  plugins: [json(), tsPlugin],
 });

package.json

@@ -2,6 +2,7 @@
   "private": true,
   "type": "module",
   "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-swc": "^0.2.1",
     "@rollup/plugin-typescript": "^11.1.5",
     "@swc/core": "^1.3.93",

packages/browser/package.json

@@ -33,6 +33,10 @@
       "types": "./dist/global.d.ts",
       "default": "./dist/global.js"
     },
+    "./cypress.cjs": {
+      "types": "./dist/cypress.d.ts",
+      "default": "./dist/cypress.cjs"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",

packages/browser/rollup.config.js

@@ -12,6 +12,12 @@ const bundleGlobal = (config) => ({
   ...config,
 });
 
+const bundleCypress = (config) => ({
+  input: "src/cypress.ts",
+  external: ignoreRelative,
+  ...config,
+});
+
 export default [
   buildEs(),
   buildTypes(),
@@ -29,4 +35,18 @@ export default [
     },
     plugins: [tsPlugin],
   }),
+  bundleCypress({
+    output: {
+      file: `dist/cypress.cjs`,
+      format: "cjs",
+    },
+    plugins: [swcPlugin],
+  }),
+  bundleCypress({
+    output: {
+      file: `dist/cypress.d.ts`,
+      format: "es",
+    },
+    plugins: [tsPlugin],
+  }),
 ];

packages/browser/src/cypress.ts

@@ -0,0 +1,3 @@
+export function getGlobalFilePath() {
+  return require.resolve("@argos-ci/browser/global.js");
+}

packages/cypress/src/support.ts

@@ -1,11 +1,14 @@
 import "cypress-wait-until";
 import type { ArgosGlobal } from "@argos-ci/browser/global.js";
-import { resolveViewport, ViewportOption } from "@argos-ci/browser";
+import { resolveViewport, type ViewportOption } from "@argos-ci/browser";
+import { getGlobalFilePath } from "@argos-ci/browser/cypress.cjs";
 import {
   getMetadataPath,
   getScreenshotName,
   ScreenshotMetadata,
 } from "@argos-ci/util/browser";
+// @ts-ignore
+import { version } from "../package.json";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -39,26 +42,13 @@ declare global {
 function injectArgos() {
   cy.window({ log: false }).then((window) => {
     if (typeof (window as any).__ARGOS__ !== "undefined") return;
-    const fileName =
-      typeof require.resolve === "function"
-        ? require.resolve("@argos-ci/browser/global.js")
-        : "node_modules/@argos-ci/browser/dist/global.js";
+    const fileName = getGlobalFilePath();
     return cy.readFile<string>(fileName).then((source) => {
       window.eval(source);
     });
   });
 }
 
-function readArgosCypressVersion() {
-  const fileName =
-    typeof require.resolve === "function"
-      ? require.resolve("@argos-ci/cypress/package.json")
-      : "node_modules/@argos-ci/cypress/package.json";
-  return cy.readFile(fileName).then((source) => {
-    return source.version;
-  });
-}
-
 Cypress.Commands.add(
   "argosScreenshot",
   { prevSubject: ["optional", "element", "window", "document"] },
@@ -110,38 +100,33 @@ Cypress.Commands.add(
           (window as any).__ARGOS__ as ArgosGlobal
         ).getColorScheme();
 
-        readArgosCypressVersion().then((argosCypressVersion) => {
-          const metadata: ScreenshotMetadata = {
-            url: window.location.href,
-            viewport: {
-              width: window.innerWidth,
-              height: window.innerHeight,
-            },
-            colorScheme,
-            mediaType,
-            test: {
-              title: Cypress.currentTest.title,
-              titlePath: Cypress.currentTest.titlePath,
-            },
-            browser: {
-              name: Cypress.browser.name,
-              version: Cypress.browser.version,
-            },
-            automationLibrary: {
-              name: "cypress",
-              version: Cypress.version,
-            },
-            sdk: {
-              name: "@argos-ci/cypress",
-              version: argosCypressVersion,
-            },
-          };
-
-          cy.writeFile(
-            getMetadataPath(ref.props.path),
-            JSON.stringify(metadata),
-          );
-        });
+        const metadata: ScreenshotMetadata = {
+          url: window.location.href,
+          viewport: {
+            width: window.innerWidth,
+            height: window.innerHeight,
+          },
+          colorScheme,
+          mediaType,
+          test: {
+            title: Cypress.currentTest.title,
+            titlePath: Cypress.currentTest.titlePath,
+          },
+          browser: {
+            name: Cypress.browser.name,
+            version: Cypress.browser.version,
+          },
+          automationLibrary: {
+            name: "cypress",
+            version: Cypress.version,
+          },
+          sdk: {
+            name: "@argos-ci/cypress",
+            version,
+          },
+        };
+
+        cy.writeFile(getMetadataPath(ref.props.path), JSON.stringify(metadata));
       });
     }
 

tsconfig.json

@@ -5,6 +5,7 @@
     "paths": {
       "@argos-ci/*": ["packages/*/src"],
       "@argos-ci/browser/global.js": ["packages/browser/src/global.js"],
+      "@argos-ci/browser/cypress.cjs": ["packages/browser/src/cypress.js"],
       "@argos-ci/util/browser": ["packages/util/src/browser.js"],
       "@argos-ci/playwright/reporter": ["packages/playwright/src/reporter.js"]
     },