feat: support no node_modules folder (#109)

Support yarn pnp with no node_modules folder

The strategy to inject script is now simple, it reduces problems.

build/rollup.js

@@ -25,14 +25,15 @@ export const buildEs = ({
   input = "src/index.ts",
   output = "dist/index.mjs",
   external = ignoreRelative,
+  extraPlugins = [],
 } = {}) => ({
   input,
   external,
   output: {
     file: output,
     format: "es",
   },
-  plugins: [json(), swcPlugin],
+  plugins: [json(), swcPlugin, ...extraPlugins],
 });
 
 export const buildCjs = ({

packages/browser/.npmignore

@@ -1,3 +1,4 @@
 /*
-!/dist/
+!/dist/index.d.ts
+!/dist/index.mjs
 !/bin/

packages/browser/package.json

@@ -29,14 +29,6 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
-    "./global.js": {
-      "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",
@@ -48,6 +40,7 @@
     "build": "rollup -c"
   },
   "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
     "@types/node": "^16.0.0"
   }
 }

packages/browser/rollup.config.js

@@ -3,50 +3,36 @@ import {
   buildTypes,
   ignoreRelative,
   swcPlugin,
-  tsPlugin,
 } from "../../build/rollup.js";
+import { readFileSync } from "node:fs";
 
-const bundleGlobal = (config) => ({
-  input: "src/global.ts",
-  external: ignoreRelative,
-  ...config,
-});
+import replace from "@rollup/plugin-replace";
 
-const bundleCypress = (config) => ({
-  input: "src/cypress.ts",
+const bundleGlobal = (config) => ({
+  input: "src/global/index.ts",
   external: ignoreRelative,
   ...config,
 });
 
 export default [
-  buildEs(),
-  buildTypes(),
   bundleGlobal({
     output: {
       file: `dist/global.js`,
       format: "iife",
     },
     plugins: [swcPlugin],
   }),
-  bundleGlobal({
-    output: {
-      file: `dist/global.d.ts`,
-      format: "es",
-    },
-    plugins: [tsPlugin],
-  }),
-  bundleCypress({
-    output: {
-      file: `dist/cypress.cjs`,
-      format: "cjs",
-    },
-    plugins: [swcPlugin],
-  }),
-  bundleCypress({
-    output: {
-      file: `dist/cypress.d.ts`,
-      format: "es",
-    },
-    plugins: [tsPlugin],
+  buildEs({
+    extraPlugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          "process.env.GLOBAL_SCRIPT": () =>
+            JSON.stringify(readFileSync("dist/global.js", "utf-8")),
+        },
+      }),
+    ],
+    external: (id) => ignoreRelative(id) && id !== "__GLOBAL__",
   }),
+  buildTypes(),
 ];

packages/browser/src/index.ts

@@ -1 +1,2 @@
 export * from "./viewport";
+export * from "./script";

packages/browser/src/script.ts

@@ -0,0 +1,8 @@
+export type { ArgosGlobal } from "./global/index";
+
+/**
+ * Read the global script and return it as a string.
+ */
+export function getGlobalScript() {
+  return process.env.GLOBAL_SCRIPT as string;
+}

packages/cypress/src/support.ts

@@ -1,7 +1,10 @@
 import "cypress-wait-until";
-import type { ArgosGlobal } from "@argos-ci/browser/global.js";
-import { resolveViewport, type ViewportOption } from "@argos-ci/browser";
-import { getGlobalFilePath } from "@argos-ci/browser/cypress.cjs";
+import {
+  ArgosGlobal,
+  resolveViewport,
+  type ViewportOption,
+} from "@argos-ci/browser";
+import { getGlobalScript } from "@argos-ci/browser";
 import {
   getMetadataPath,
   getScreenshotName,
@@ -42,10 +45,7 @@ declare global {
 function injectArgos() {
   cy.window({ log: false }).then((window) => {
     if (typeof (window as any).__ARGOS__ !== "undefined") return;
-    const fileName = getGlobalFilePath();
-    return cy.readFile<string>(fileName).then((source) => {
-      window.eval(source);
-    });
+    window.eval(getGlobalScript());
   });
 }
 

packages/playwright/e2e.spec.ts

@@ -2,7 +2,9 @@
 import { test, chromium, expect, Page } from "@playwright/test";
 import { fileURLToPath } from "node:url";
 import { stat } from "node:fs/promises";
-import { argosScreenshot } from "./src/index.js";
+// @ts-ignore
+import { argosScreenshot } from "./dist/index";
+import { argosScreenshot as typedArgosScreenshot } from "./src";
 // @ts-ignore
 import { argosScreenshot as argosScreenshotCjs } from "./dist/index.cjs";
 import { checkIsUsingArgosReporter } from "./src/util.js";
@@ -60,7 +62,7 @@ test.describe("#argosScreenshot", () => {
     let error: any;
     try {
       // @ts-expect-error - We want to test the error
-      await argosScreenshot();
+      await typedArgosScreenshot();
     } catch (e: any) {
       error = e;
     }
@@ -71,7 +73,7 @@ test.describe("#argosScreenshot", () => {
     let error: any;
     try {
       // @ts-expect-error - We want to test the error
-      await argosScreenshot(page);
+      await typedArgosScreenshot(page);
     } catch (e: any) {
       error = e;
     }

packages/playwright/src/index.ts

@@ -1,4 +1,4 @@
-import { mkdir, readFile } from "node:fs/promises";
+import { mkdir } from "node:fs/promises";
 import { resolve, dirname } from "node:path";
 import type {
   Page,
@@ -7,9 +7,12 @@ import type {
   ElementHandle,
   TestInfo,
 } from "@playwright/test";
-import { createRequire } from "node:module";
-import { ArgosGlobal } from "@argos-ci/browser/global.js";
-import { ViewportOption, resolveViewport } from "@argos-ci/browser";
+import {
+  ViewportOption,
+  resolveViewport,
+  ArgosGlobal,
+  getGlobalScript,
+} from "@argos-ci/browser";
 import {
   getMetadataPath,
   getScreenshotName,
@@ -20,8 +23,6 @@ import { getAttachmentName } from "./attachment";
 import { getLibraryMetadata, getTestMetadataFromTestInfo } from "./metadata";
 import { checkIsUsingArgosReporter } from "./util";
 
-const require = createRequire(import.meta.url);
-
 const screenshotFolder = "./screenshots";
 
 type LocatorOptions = Parameters<Page["locator"]>[1];
@@ -55,9 +56,7 @@ async function injectArgos(page: Page) {
     () => typeof (window as any).__ARGOS__ !== "undefined",
   );
   if (injected) return;
-  const fileName = require.resolve("@argos-ci/browser/global.js");
-  const content = await readFile(fileName, "utf-8");
-  await page.addScriptTag({ content });
+  await page.addScriptTag({ content: getGlobalScript() });
 }
 
 async function getTestInfo() {

packages/puppeteer/src/index.ts

@@ -1,9 +1,13 @@
 import { resolve } from "node:path";
-import { mkdir, readFile } from "node:fs/promises";
+import { mkdir } from "node:fs/promises";
 import { ElementHandle, Page, ScreenshotOptions } from "puppeteer";
 import { createRequire } from "node:module";
-import { ArgosGlobal } from "@argos-ci/browser/global.js";
-import { ViewportOption, resolveViewport } from "@argos-ci/browser";
+import {
+  ViewportOption,
+  resolveViewport,
+  ArgosGlobal,
+  getGlobalScript,
+} from "@argos-ci/browser";
 import {
   ScreenshotMetadata,
   getScreenshotName,
@@ -21,9 +25,7 @@ async function injectArgos(page: Page) {
     () => typeof (window as any).__ARGOS__ !== "undefined",
   );
   if (injected) return;
-  const fileName = require.resolve("@argos-ci/browser/global.js");
-  const content = await readFile(fileName, "utf-8");
-  await page.addScriptTag({ content });
+  await page.addScriptTag({ content: getGlobalScript() });
 }
 
 export type ArgosScreenshotOptions = Omit<

tsconfig.json

@@ -4,8 +4,6 @@
     "baseUrl": ".",
     "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"]
     },