From 66aa120b94a8990b3ce549d101ad733ac9bfd929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Tue, 30 Jan 2024 12:55:18 +0100 Subject: [PATCH] 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 | 3 +- packages/browser/.npmignore | 3 +- packages/browser/package.json | 9 +--- packages/browser/rollup.config.js | 46 +++++++------------ packages/browser/src/cypress.ts | 3 -- .../src/{global.ts => global/index.ts} | 0 packages/browser/src/{ => global}/media.ts | 0 .../browser/src/{ => global}/stabilization.ts | 0 packages/browser/src/index.ts | 1 + packages/browser/src/script.ts | 8 ++++ packages/cypress/src/support.ts | 14 +++--- packages/playwright/e2e.spec.ts | 8 ++-- packages/playwright/src/index.ts | 17 ++++--- packages/puppeteer/src/index.ts | 14 +++--- pnpm-lock.yaml | 17 +++++++ tsconfig.json | 2 - 16 files changed, 75 insertions(+), 70 deletions(-) delete mode 100644 packages/browser/src/cypress.ts rename packages/browser/src/{global.ts => global/index.ts} (100%) rename packages/browser/src/{ => global}/media.ts (100%) rename packages/browser/src/{ => global}/stabilization.ts (100%) create mode 100644 packages/browser/src/script.ts diff --git a/build/rollup.js b/build/rollup.js index 6d27eae..ee358fa 100644 --- a/build/rollup.js +++ b/build/rollup.js @@ -25,6 +25,7 @@ export const buildEs = ({ input = "src/index.ts", output = "dist/index.mjs", external = ignoreRelative, + extraPlugins = [], } = {}) => ({ input, external, @@ -32,7 +33,7 @@ export const buildEs = ({ file: output, format: "es", }, - plugins: [json(), swcPlugin], + plugins: [json(), swcPlugin, ...extraPlugins], }); export const buildCjs = ({ diff --git a/packages/browser/.npmignore b/packages/browser/.npmignore index aed64aa..1b49a9e 100644 --- a/packages/browser/.npmignore +++ b/packages/browser/.npmignore @@ -1,3 +1,4 @@ /* -!/dist/ +!/dist/index.d.ts +!/dist/index.mjs !/bin/ \ No newline at end of file diff --git a/packages/browser/package.json b/packages/browser/package.json index 9d3fb55..7cfe12c 100644 --- a/packages/browser/package.json +++ b/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" } } diff --git a/packages/browser/rollup.config.js b/packages/browser/rollup.config.js index f101c39..464d44f 100644 --- a/packages/browser/rollup.config.js +++ b/packages/browser/rollup.config.js @@ -3,24 +3,18 @@ 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`, @@ -28,25 +22,17 @@ export default [ }, 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(), ]; diff --git a/packages/browser/src/cypress.ts b/packages/browser/src/cypress.ts deleted file mode 100644 index 7be1ae6..0000000 --- a/packages/browser/src/cypress.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function getGlobalFilePath() { - return require.resolve("@argos-ci/browser/global.js"); -} diff --git a/packages/browser/src/global.ts b/packages/browser/src/global/index.ts similarity index 100% rename from packages/browser/src/global.ts rename to packages/browser/src/global/index.ts diff --git a/packages/browser/src/media.ts b/packages/browser/src/global/media.ts similarity index 100% rename from packages/browser/src/media.ts rename to packages/browser/src/global/media.ts diff --git a/packages/browser/src/stabilization.ts b/packages/browser/src/global/stabilization.ts similarity index 100% rename from packages/browser/src/stabilization.ts rename to packages/browser/src/global/stabilization.ts diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts index fed2df6..cd7cf15 100644 --- a/packages/browser/src/index.ts +++ b/packages/browser/src/index.ts @@ -1 +1,2 @@ export * from "./viewport"; +export * from "./script"; diff --git a/packages/browser/src/script.ts b/packages/browser/src/script.ts new file mode 100644 index 0000000..a2d2a89 --- /dev/null +++ b/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; +} diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts index c584db5..893f878 100644 --- a/packages/cypress/src/support.ts +++ b/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(fileName).then((source) => { - window.eval(source); - }); + window.eval(getGlobalScript()); }); } diff --git a/packages/playwright/e2e.spec.ts b/packages/playwright/e2e.spec.ts index 9c4b5d0..c5748d9 100644 --- a/packages/playwright/e2e.spec.ts +++ b/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; } diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts index d9d8ca5..54169e0 100644 --- a/packages/playwright/src/index.ts +++ b/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[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() { diff --git a/packages/puppeteer/src/index.ts b/packages/puppeteer/src/index.ts index 27a1d16..9c5cfb3 100644 --- a/packages/puppeteer/src/index.ts +++ b/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< diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6edb73d..c793760 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: packages/browser: devDependencies: + '@rollup/plugin-replace': + specifier: ^5.0.5 + version: 5.0.5(rollup@4.1.4) '@types/node': specifier: ^16.0.0 version: 16.18.58 @@ -1921,6 +1924,20 @@ packages: rollup: 4.1.4 dev: true + /@rollup/plugin-replace@5.0.5(rollup@4.1.4): + resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.1.4) + magic-string: 0.30.5 + rollup: 4.1.4 + dev: true + /@rollup/plugin-swc@0.2.1(@swc/core@1.3.93)(rollup@4.1.4): resolution: {integrity: sha512-VioOZNQ72+EIR7zyDBM/2woQ8nGkQ5PlmnK1yArt1oJpf/eapYihWcybfyfZ9bCHMTadAMnaHGoy186nCQ5Mng==} engines: {node: '>=14.0.0'} diff --git a/tsconfig.json b/tsconfig.json index 5335be9..da0c121 100644 --- a/tsconfig.json +++ b/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"] },