diff --git a/npm/vite-plugin-cypress-esm/README.md b/npm/vite-plugin-cypress-esm/README.md index 81feb67a5b08..97cb3aed2d5a 100644 --- a/npm/vite-plugin-cypress-esm/README.md +++ b/npm/vite-plugin-cypress-esm/README.md @@ -9,7 +9,7 @@ A Vite plugin that intercepts and rewrites ES module imports within [Cypress com Run Cypress with `DEBUG=cypress:vite-plugin-cypress-esm`. You will get logs in the terminal, for the code transformation, and in the browser console, for intercepting and wrapping the modules in a Proxy. ## Compatibility -| @cypress/vite-plugin-mock-esm | cypress | +| @cypress/vite-plugin-cypress-esm | cypress | | ------------------------ | ------- | | >= v1 | >= v12 | diff --git a/npm/vite-plugin-cypress-esm/client/moduleCache.js b/npm/vite-plugin-cypress-esm/client/moduleCache.js index a6f5b526f241..3309bdcba58c 100644 --- a/npm/vite-plugin-cypress-esm/client/moduleCache.js +++ b/npm/vite-plugin-cypress-esm/client/moduleCache.js @@ -176,7 +176,7 @@ function log (msg) { return } - console.log(`[cypress:vite-plugin-mock-esm]: ${msg}`) + console.log(`[cypress:vite-plugin-cypress-esm]: ${msg}`) } function cacheAndProxifyModule (id, module) { diff --git a/npm/vite-plugin-cypress-esm/src/index.ts b/npm/vite-plugin-cypress-esm/src/index.ts index 8d2fd8f48bab..e9416fb112a0 100644 --- a/npm/vite-plugin-cypress-esm/src/index.ts +++ b/npm/vite-plugin-cypress-esm/src/index.ts @@ -3,7 +3,7 @@ import picomatch from 'picomatch' import type { Plugin } from 'vite' import fs from 'fs' import path from 'path' -const debug = debugFn('cypress:vite-plugin-mock-esm') +const debug = debugFn('cypress:vite-plugin-cypress-esm') const MODULE_IMPORTER_IDENTIFIER = '__cypressModule' const MODULE_DYNAMIC_IMPORTER_IDENTIFIER = '__cypressDynamicModule' @@ -75,7 +75,10 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => { * @returns */ const isImportOnIgnoreList = (importTarget: string) => { - return ignoreImportMatcher(importTarget) + // Remove leading dot slash (https://github.com/micromatch/picomatch/issues/77) + const importTargetPath = importTarget.replace(/^\.\//, '') + + return ignoreImportMatcher(importTargetPath) } /** @@ -86,15 +89,12 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => { * @returns */ const isNonJsTarget = (importTarget: string) => { - // Strip quotes & semicolons - const sanitizedImportTarget = importTarget.replace(/["';]/gi, '').trim() - // Exclude common extensions for: // - Images // - Text/Data/Markup/Markdown files // - Styles // Other asset types like audio/video are unlikely to be imported into a JS file thus are not considered here - return /\.(svg|png|jpe?g|gif|tiff|webp|json|md|txt|xml|x?html?|css|less|s[c|a]ss?)(\?|$)/gi.test(sanitizedImportTarget) + return /\.(svg|png|jpe?g|gif|tiff|webp|json|md|txt|xml|x?html?|css|less|s[c|a]ss?)(\?|$)/gi.test(importTarget) } /** @@ -120,7 +120,7 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => { // Ensure import comes at start of line *or* is prefixed by a space so we don't capture things like // `Refresh.__hmr_import('') - const importRegex = /(?<=^|\s)import (.+?) from (.*)/g + const importRegex = /(?<=^|\s)import (.+?) from ['"](.*?)['"]/g return code.replace( importRegex, @@ -134,16 +134,12 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => { debug(`Mapping import ${counter + 1} (${importTarget}) in module ${moduleId}`) if (isNonJsTarget(importTarget)) { - debug(`Import ${importTarget} appears to be an asset and will not be re-mapped`) + debug(`🎨 Import ${importTarget} appears to be an asset, ignoring`) return match } - let replacement = `import * as cypress_${moduleIdentifier}_${++counter} from ${importTarget}` - - if (!replacement.endsWith(';')) { - replacement += ';' - } + let replacement = `import * as cypress_${moduleIdentifier}_${++counter} from '${importTarget}';` // Split the import declaration into named vs non-named segments // e.g.: import TheDefault, { Named }, * as Everything from 'module' @@ -173,7 +169,7 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => { // support `import { foo as bar } from 'module'` syntax, converting to `const { foo: bar } ...` decl = decl.replace(/(? { * __cypressDynamicModule(import("./mod_2")).then(mod => mod) */ const mapDynamicImportsToCache = (id: string, code: string) => { - const RE = /((?<=^|\s)import\((.+?)\))/g + const RE = /((?<=^|\s)import\(['"](.+?)['"]\))/g return code.replace( RE, (match, importVars: string, importTarget: string) => { + if (isImportOnIgnoreList(importTarget)) { + debug(`⏭️ Import ${importTarget} matches ignoreImportList, ignoring`) + + return match + } + if (isNonJsTarget(importTarget)) { debug(`🎨 Import ${importTarget} appears to be an asset, ignoring`) diff --git a/yarn.lock b/yarn.lock index e6922ef9a2f3..f2c45ce7df8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32768,4 +32768,4 @@ zone.js@~0.11.4: resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.11.7.tgz#262194267c7b964e8da77ce16b9fba9bea23cfdc" integrity sha512-e39K2EdK5JfA3FDuUTVRvPlYV4aBfnOOcGuILhQAT7nzeV12uSrLBzImUM9CDVoncDSX4brR/gwqu0heQ3BQ0g== dependencies: - tslib "^2.3.0" + tslib "^2.3.0" \ No newline at end of file