fix: Some fixes and improvements to vite-plugin-cypress-esm (#29368)

* Unify naming

* Sanatize import target for import ignore matcher

* Fix regex: import target must start with a quote

* Ignore invalid import targets

* Improve glob matching

* Remove unused dependency

* Update yarn.lock after removing unused dependency

* Remove now unnecessary replacing of quotes

* Ignore dynamic imports on the importIgnoreList as well

---------

Co-authored-by: Bill Glesias <[email protected]>

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  |
 

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) {

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(/(?<!\*) as /g, ': ')
 
-            return `const ${decl} = ${MODULE_IMPORTER_IDENTIFIER}('${moduleId}#${importTarget.replace(/['"`]/ig, '')}', cypress_${moduleIdentifier}_${counter}, ${debug.enabled});`
+            return `const ${decl} = ${MODULE_IMPORTER_IDENTIFIER}('${moduleId}#${importTarget}', cypress_${moduleIdentifier}_${counter}, ${debug.enabled});`
           })
           .join('')
 
@@ -208,11 +204,17 @@ export const CypressEsm = (options?: CypressEsmOptions): Plugin => {
    *   __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`)
 

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"