Merge pull request #3 from morganney/develop

fix: breaking changes in 1.3.0, regex for comment detection

Author: morganney

README.md

@@ -1,6 +1,6 @@
 # [`magic-comments-loader`](https://www.npmjs.com/package/magic-comments-loader)
 
-Adds [magic coments](https://webpack.js.org/api/module-methods/#magic-comments) to your dynamic `import()` statements.
+Keep your source code clean, add [magic coments](https://webpack.js.org/api/module-methods/#magic-comments) to your dynamic `import()` statements at build time.
 
 NOTE: **This loader ignores dynamic imports that already include comments of any kind**.
 
@@ -16,6 +16,26 @@ Magic comments supported:
 
 First `npm install magic-comments-loader`.
 
+Try *not* to have dynamic `import()` statements behind [comments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#comments). **It is better to remove unused code in production**.
+If you must, e.g. your comment is referencing usage of dynamic imports, then these styles are ok:
+
+```js
+// import('some-ignored-module')
+/* Some comment about a dynamic import('module') */
+```
+
+If you must have a multiline comment then this style is ok (only one `import()` per comment line preceded by an asterisk):
+
+```js
+/**
+ * Comment about import('module/one')
+ * Comment about import('module/two')
+ * import('module/three'), etc.
+ */
+```
+
+This module uses a [RegExp](https://github.com/morganney/magic-comments-loader/blob/master/src/loader.js#L8) not a parser. If you would like to add better support for ignoring `import()` behind multiline comments please open a pull request. See some more [examples on regexr](https://regexr.com/65fg0).
+
 ### Configuration
 
 Add this inside your `webpack.config.js`.
@@ -52,8 +72,11 @@ module: {
           webpackChunkName: true,
           webpackMode: 'lazy',
           webpackIgnore: 'src/ignore/**/*.js',
-          webpackPreload: ['src/preload/**/*.js', '!src/preload/skip/**/*.js'],
           webpackPrefetch: 'src/prefetch/**/*.js'
+          webpackPreload: [
+            'src/preload/**/*.js',
+            '!src/preload/skip/**/*.js'
+          ]
         }
       }
     }
@@ -107,19 +130,19 @@ You can also override the configuration passed in the `config` key by using `ove
 ```js
 overrides: [
  {
-   // Can be an array of globs too
-   files: 'src/**/*.js',
+   files: ['src/**/*.js'],
    config: {
      active: true,
-     exports: ['foo', 'bar']
-     // Etc.
+     mode: (modulePath, importPath) => {
+       if (/eager/.test(importPath)) {
+         return 'eager'
+       }
+     }
    }
  }
 ]
 ```
 
-**The `config.match` in an override is ignored. You can only have one, top-level `config.match`**.
-
 Here's a more complete example using `config` and `overrides` to customize how comments are applied:
 
 ```js
@@ -151,7 +174,10 @@ module: {
               }
             ]
           },
-          webpackPrefetch: ['src/prefetch/**/*.js', '!src/prefetch/skip/**/*.js'],
+          webpackPrefetch: [
+            'src/prefetch/**/*.js',
+            '!src/prefetch/skip/**/*.js'
+          ],
           webpackMode: {
             config: {
               mode: 'lazy'
@@ -210,7 +236,7 @@ const dynamicModule = await import(/* webpackChunkName: "path-to-module", webpac
 
 ## Options
 
-These are the options that can be configured under the loader `options`. When using comments with a [`config`](#with-config-options) key, you may also specify [`overrides`](#overrides)(`config.match` is ignored inside overrides).
+These are the options that can be configured under the loader `options`. When using comments with a [`config`](#with-config-options) key, you may also specify [`overrides`](#overrides).
 
 * `verbose`: Boolean. Prints console statements of the module filepath and updated `import()` during the webpack build. Useful for debugging your custom configurations.
 * `match`: `String(module|import)`. Sets how globs are matched, either the module file path or the `import()` path. Defaults to `'module'`.
@@ -245,7 +271,7 @@ These are the options that can be configured under the loader `options`. When us
   * `String(lazy|lazy-once|eager|weak)`: Adds the comment to **all** dynamic imports using the provided value.
   * `Function`: `(modulePath, importPath) => String(lazy|lazy-once|eager|weak)`. Return falsy value to skip.
   * `config.active`: Boolean | `(modulePath, importPath) => Boolean`. Returning `false` does not add the comment.
-  * `config.mode`: `(modulePath, importPath) => String(lazy|lazy-once|eager|weak)`. Return falsy value to skip.
+  * `config.mode`: `String(lazy|lazy-once|eager|weak)` | `(modulePath, importPath) => String(lazy|lazy-once|eager|weak)`. Return falsy value to skip.
 * `webpackExports`
   * `Function`: `(modulePath, importPath) => [String(<module names|default>)]`. Return falsy value to skip.
   * `config.active`: Boolean | `(modulePath, importPath) => Boolean`. Returning `false` does not add the comment.

__tests__/webpackChunkName.js

@@ -9,6 +9,7 @@ describe('webpackChunkName', () => {
     expect(webpackChunkName(testPath, testImportPath, true)).toEqual(
       'webpackChunkName: "some-import-path"'
     )
+    expect(webpackChunkName(testPath, testImportPath, false)).toEqual('')
     expect(webpackChunkName(testPath, testImportPath, 'some/**/*.js')).toEqual(
       'webpackChunkName: "some-import-path"'
     )

__tests__/webpackExports.js

@@ -12,6 +12,7 @@ describe('webpackExports', () => {
     expect(comment).toEqual('webpackExports: ["mock"]')
     expect(exports).toHaveBeenCalledWith('some/test/module.js', './some/import/path')
     expect(webpackExports(testPath, testImportPath, true)).toEqual('')
+    expect(webpackExports(testPath, testImportPath, false)).toEqual('')
     expect(
       webpackExports(testPath, testImportPath, {
         config: { active: () => true, exports: () => ['one', 'two'] }

__tests__/webpackMode.js

@@ -6,16 +6,22 @@ describe('webpackMode', () => {
     const testImportPath = './some/import/path'
 
     expect(webpackMode(testPath, testImportPath, true)).toEqual('webpackMode: "lazy"')
+    expect(webpackMode(testPath, testImportPath, false)).toEqual('')
     expect(webpackMode(testPath, testImportPath, 'eager')).toEqual('webpackMode: "eager"')
     expect(webpackMode(testPath, testImportPath, () => 'lazy-once')).toEqual(
       'webpackMode: "lazy-once"'
     )
     expect(webpackMode(testPath, testImportPath, () => 'invalid')).toEqual('')
     expect(
       webpackMode(testPath, testImportPath, {
-        config: { mode: () => 'lazy', active: () => true }
+        config: { mode: 'lazy', active: () => true }
       })
     ).toEqual('webpackMode: "lazy"')
+    expect(
+      webpackMode(testPath, testImportPath, {
+        config: { mode: () => 'weak' }
+      })
+    ).toEqual('webpackMode: "weak"')
     expect(
       webpackMode(testPath, testImportPath, {
         config: { mode: 'weak' },

__tests__/webpackPrefetch.js

@@ -8,6 +8,7 @@ describe('webpackPrefetch', () => {
     expect(webpackPrefetch(testPath, testImportPath, true)).toEqual(
       'webpackPrefetch: true'
     )
+    expect(webpackPrefetch(testPath, testImportPath, false)).toEqual('')
     expect(webpackPrefetch(testPath, testImportPath, 'some/**/*.js')).toEqual(
       'webpackPrefetch: true'
     )

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "magic-comments-loader",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Add webpack magic comments to your dynamic imports during build time",
   "main": "dist",
   "type": "module",
@@ -17,6 +17,7 @@
   "scripts": {
     "prepack": "node --experimental-json-modules ./prepack.js",
     "lint": "eslint . src __tests__ --ext .js,.cjs",
+    "lint:fix": "npm run lint -- --fix",
     "test": "node --experimental-vm-modules ./node_modules/.bin/jest"
   },
   "keywords": [

package.json

@@ -44,6 +44,13 @@ const getConfig = (
     return defaultConfig
   }
 
+  if (value === false) {
+    return {
+      ...defaultConfig,
+      active: false
+    }
+  }
+
   if (Array.isArray(value) || typeof value === 'string') {
     return {
       ...defaultConfig,

src/booleanComment.js

@@ -1,33 +1,34 @@
 import { commentFor } from './strategy.js'
 
-const getCommenter = (filepath, options) => (rgxMatch, capturedImportPath) => {
-  const importPath = capturedImportPath.trim()
-  const bareImportPath = importPath.replace(/['"`]/g, '')
-  const { verbose, match, ...magicCommentOptions } = options
-  const magicComment = Object.keys(magicCommentOptions)
-    .map(key => {
-      const option = magicCommentOptions[key]
+const getCommenter =
+  (filepath, options, logger = console) =>
+  (rgxMatch, capturedImportPath) => {
+    const importPath = capturedImportPath.trim()
+    const bareImportPath = importPath.replace(/['"`]/g, '')
+    const { verbose, match, ...magicCommentOptions } = options
+    const magicComment = Object.keys(magicCommentOptions)
+      .map(key => {
+        const option = magicCommentOptions[key]
 
-      if (option) {
-        return commentFor[key](filepath, bareImportPath, option, match)
-      }
+        if (option) {
+          return commentFor[key](filepath, bareImportPath, option, match)
+        }
 
-      return null
-    })
-    .filter(comment => comment)
-  const magicImport = rgxMatch.replace(
-    capturedImportPath,
-    magicComment.length > 0
-      ? `/* ${magicComment.join(', ')} */ ${importPath}`
-      : `${importPath}`
-  )
+        return null
+      })
+      .filter(comment => comment)
+    const magicImport = rgxMatch.replace(
+      capturedImportPath,
+      magicComment.length > 0
+        ? `/* ${magicComment.join(', ')} */ ${importPath}`
+        : `${importPath}`
+    )
 
-  if (verbose) {
-    // eslint-disable-next-line no-console
-    console.log('\x1b[32m%s\x1b[0m', '[MCL]', `${filepath} : ${magicImport}`)
-  }
+    if (verbose) {
+      logger.info('[MCL]', `${filepath} : ${magicImport}`)
+    }
 
-  return magicImport
-}
+    return magicImport
+  }
 
 export { getCommenter }

src/comment.js

@@ -5,10 +5,11 @@ import { schema } from './schema.js'
 import { getCommenter } from './comment.js'
 
 const dynamicImportsWithoutComments =
-  /(?<!\w|\*[\s\w]*?|\/\/\s*)import\s*\((?!\s*\/\*)(?<path>\s*?['"`].+['"`]\s*)\)/g
+  /(?<![\w.]|#!|\*[\s\w]*?|\/\/\s*)import\s*\((?!\s*\/\*)(?<path>\s*?['"`][^)]+['"`]\s*)\)(?![\s]*?\*\/)/g
 const loader = function (source, map, meta) {
   const options = getOptions(this)
   const optionKeys = Object.keys(options)
+  const logger = this.getLogger('MCL')
 
   validate(schema, options, {
     name: 'magic-comments-loader'
@@ -17,7 +18,8 @@ const loader = function (source, map, meta) {
   const filepath = this.utils.contextify(this.rootContext, this.resourcePath)
   const magicComments = getCommenter(
     filepath.replace(/^\.\/?/, ''),
-    optionKeys.length > 0 ? options : { match: 'module', webpackChunkName: true }
+    optionKeys.length > 0 ? options : { match: 'module', webpackChunkName: true },
+    logger
   )
 
   this.callback(