Merge pull request #1 from morganney/develop

Add webpackPreload and webpackPrefetch

Author: morganney

README.md

@@ -8,7 +8,8 @@ Magic comments supported:
 * `webpackChunkName`
 * `webpackMode`
 * `webpackIgnore`
-
+* `webpackPreload`
+* `webpackPrefetch`
 
 ## Usage
 
@@ -48,7 +49,7 @@ module: {
         options: {
           webpackChunkName: true,
           webpackMode: 'lazy',
-          webpackIgnore: 'src/ignore/**/*.js'
+          webpackPreload: 'src/preload/**/*.js'
         }
       }
     }
@@ -85,23 +86,24 @@ module: {
 }
 ```
 
-You can also override the configuration passed in the `config` key by using the `overrides` key, which is an array of objects that look like:
+#### Overrides
+
+You can also override the configuration passed in the `config` key by using `overrides`, which is an array of objects that look like:
 
 ```js
 overrides: [
  {
-   // Array of globs or a specific file (can be a string too)
-   // Uses micromatch to compare the module filepath to the provided string
-   files: ['src/**/*.js', '!/src/skip/**/*.js']
-   // Other configuration keys for the comment type can go here too
+   // Can be an array of strings too
+   files: 'src/**/*.js',
    config: {
-     active: false
+     active: false,
+     // Possibly other configuration values
    }
  }
 ]
 ```
 
-Here's a more complete example using comment `config` and `overrides`:
+Here's a more complete example using `config` and `overrides` to customize how comments are applied:
 
 ```js
 module: {
@@ -189,21 +191,32 @@ const dynamicModule = await import(/* webpackChunkName: "path-to-some-module", w
 
 ### Options
 
-These are the options that can be configured under the loader `options`.
+These are the options that can be configured under the loader `options`. All comments accept an [`overrides`](#overrides) key in addition to `config` when defined as an object.
 
 * `verbose`: Prints console statements of the updated `import()`s per module filepath during the webpack build. Useful for debugging your custom configurations.
 * `webpackChunkName`
   * `true`: Adds `webpackChunkName` comments to **all** dynamic imports using the full path to the imported module to construct the name, so `import('path/to/module')` becomes `import(/* webpackChunkName: "path-to-module" */ 'path/to/module')`. This is the default.
   * `false`: Disables adding the `webpackChunkName` comment globally.
+  * `some/glob/**/*.js`|`['/some/globs/**/*.js']`: Adds the comment with the default behavior of slugifying (hyphenating) the import path.
   * `config.active`: Boolean to enable/disable the comment.
   * `config.basename`: Boolean to use only the basename from the import path as the chunk name. Some relative path imports may end up with the same basename depsite importing different modules. Use in areas where you know the basenames are unique.
 * `webpackMode`
-  * `true`: Adds `webpackMode` comments to **all** dynamic imports using `lazy` so `import('path/to/module')` becomes `import(/* webpackMode: "lazy" */ 'path/to/module')`.
+  * `true`: Adds `webpackMode` comments to **all** dynamic imports using `lazy`, so `import('path/to/module')` becomes `import(/* webpackMode: "lazy" */ 'path/to/module')`.
   * `false`: Disables adding the `webpackChunkName` comment globally. This is the default.
   * `config.active`: Boolean to enable/disable the comment.
   * `config.mode`: String to set the mode. `lazy`, `lazy-once`, `eager`, or `weak`.
 * `webpackIgnore`
-  * `true`: Adds `webpackIgnore` comments to **all** dynamic imports `true` so `import('path/to/module')` becomes `import(/* webpackIgnore: true */ 'path/to/module')`.
+  * `true`: Adds `webpackIgnore` comments to **all** dynamic imports, so `import('path/to/module')` becomes `import(/* webpackIgnore: true */ 'path/to/module')`.
   * `false`: Disables adding the `webpackIgnore` comment globally. This is the default.
   * `some/glob/**/*.js`|`['/some/globs/**/*.js']`: Adds the comment with a value of `true` to all module filepaths that match the string or array of strings.
   * `config.active`: Boolean to enable/disable the comment.
+* `webpackPreload`
+  * `true`: Adds `webpackPreload` comments to **all** dynamic imports, so `import('path/to/module')` becomes `import(/* webpackPreload: true */ 'path/to/module')`.
+  * `false`: Disables adding the `webpackPreload` comment globally. This is the default.
+  * `some/glob/**/*.js`|`['/some/globs/**/*.js']`: Adds the comment with a value of `true` to all module filepaths that match the string or array of strings.
+  * `config.active`: Boolean to enable/disable the comment.
+* `webpackPrefetch`
+  * `true`: Adds `webpackPrefetch` comments to **all** dynamic imports, so `import('path/to/module')` becomes `import(/* webpackPrefetch: true */ 'path/to/module')`.
+  * `false`: Disables adding the `webpackPrefetch` comment globally. This is the default.
+  * `some/glob/**/*.js`|`['/some/globs/**/*.js']`: Adds the comment with a value of `true` to all module filepaths that match the string or array of strings.
+  * `config.active`: Boolean to enable/disable the comment.

__tests__/comment.js

@@ -0,0 +1,44 @@
+import { getCommenter } from '../src/comment.js'
+
+describe('getCommenter', () => {
+  it('creates a function for adding magic comments to imports', () => {
+    expect(
+      getCommenter('some/file/path.js', {
+        webpackChunkName: true
+      })('import("./some/test/module.js")', '"./some/test/module.js"')
+    ).toBe('import(/* webpackChunkName: "some-test-module" */ "./some/test/module.js")')
+
+    expect(
+      getCommenter('some/file/path.js', {
+        webpackChunkName: true,
+        webpackMode: 'eager',
+        webpackPrefetch: 'some/**/*.js',
+        webpackPreload: false
+      })('import("./some/test/module")', '"./some/test/module"')
+    ).toBe(
+      'import(/* webpackChunkName: "some-test-module", webpackMode: "eager", webpackPrefetch: true */ "./some/test/module")'
+    )
+
+    expect(
+      getCommenter('some/file/path.js', {
+        verbose: true,
+        webpackPreload: true,
+        webpackChunkName: true
+      })('import("./some/test/module")', '"./some/test/module"')
+    ).toBe(
+      'import(/* webpackPreload: true, webpackChunkName: "some-test-module" */ "./some/test/module")'
+    )
+
+    expect(
+      getCommenter('some/file/path.js', {
+        webpackIgnore: true
+      })('import("./some/test/module")', '"./some/test/module"')
+    ).toBe('import(/* webpackIgnore: true */ "./some/test/module")')
+
+    expect(
+      getCommenter('some/file/path.js', {
+        webpackChunkName: 'some/**/*.js'
+      })('import("./some/test/module")', '"./some/test/module"')
+    ).toBe('import(/* webpackChunkName: "some-test-module" */ "./some/test/module")')
+  })
+})

__tests__/strategy.js

@@ -6,7 +6,9 @@ describe('commentFor', () => {
       expect.objectContaining({
         webpackChunkName: expect.any(Function),
         webpackMode: expect.any(Function),
-        webpackIgnore: expect.any(Function)
+        webpackIgnore: expect.any(Function),
+        webpackPreload: expect.any(Function),
+        webpackPrefetch: expect.any(Function)
       })
     )
   })

__tests__/util.js

@@ -0,0 +1,38 @@
+import { filepathIsMatch, getOverrideConfig } from '../src/util.js'
+
+describe('filepathIsMatch', () => {
+  it('compares a filepath to glob patterns', () => {
+    expect(filepathIsMatch('some/file/path.js', 'some/**/*.js')).toEqual(true)
+    expect(
+      filepathIsMatch('some/file/path', ['some/**/*.js', '!some/file/*.js'])
+    ).toEqual(false)
+    expect(
+      filepathIsMatch('some/file/path.js', ['some/**/*.js', '!some/miss/*.js'])
+    ).toEqual(true)
+  })
+})
+
+describe('getOverrideConfig', () => {
+  const overrides = [
+    {
+      files: 'some/**/*.js',
+      config: {
+        test: true
+      }
+    }
+  ]
+
+  it('gets config overrides based on path globs', () => {
+    expect(
+      getOverrideConfig(overrides, 'some/file/path.js', { test: false })
+    ).toStrictEqual({
+      test: true
+    })
+  })
+
+  it('returns the passed config if filepath is not a match', () => {
+    const config = { test: 'it' }
+
+    expect(getOverrideConfig(overrides, 'miss/file/path.js', config)).toBe(config)
+  })
+})

__tests__/webpackChunkName.js

@@ -1,4 +1,4 @@
-import { webpackChunkName } from '../src/webpackChunkName'
+import { webpackChunkName } from '../src/webpackChunkName.js'
 
 describe('webpackChunkName', () => {
   it('returns a "webpackChunkName" magic comment', () => {
@@ -8,6 +8,12 @@ describe('webpackChunkName', () => {
     expect(webpackChunkName(testPath, testImportPath, true)).toEqual(
       'webpackChunkName: "some-import-path"'
     )
+    expect(webpackChunkName(testPath, testImportPath, 'some/**/*.js')).toEqual(
+      'webpackChunkName: "some-import-path"'
+    )
+    expect(
+      webpackChunkName(testPath, testImportPath, ['some/**/*.js', '!some/test/*.js'])
+    ).toEqual('')
     expect(
       webpackChunkName(testPath, testImportPath, { config: { basename: true } })
     ).toEqual('webpackChunkName: "path"')

__tests__/webpackIgnore.js

@@ -1,4 +1,4 @@
-import { webpackIgnore } from '../src/webpackIgnore'
+import { webpackIgnore } from '../src/webpackIgnore.js'
 
 describe('webpackIgnore', () => {
   it('returns a "webpackIgnore" magic comment', () => {

__tests__/webpackMode.js

@@ -1,4 +1,4 @@
-import { webpackMode } from '../src/webpackMode'
+import { webpackMode } from '../src/webpackMode.js'
 
 describe('webpackMode', () => {
   it('returns a "webpackMode" magic comment', () => {

__tests__/webpackPrefetch.js

@@ -0,0 +1,31 @@
+import { webpackPrefetch } from '../src/webpackPrefetch.js'
+
+describe('webpackPrefetch', () => {
+  it('returns a "webpackPrefetch" magic comment', () => {
+    const testPath = 'some/test/module.js'
+    const testImportPath = './some/import/path'
+
+    expect(webpackPrefetch(testPath, testImportPath, true)).toEqual(
+      'webpackPrefetch: true'
+    )
+    expect(webpackPrefetch(testPath, testImportPath, 'some/**/*.js')).toEqual(
+      'webpackPrefetch: true'
+    )
+    expect(
+      webpackPrefetch(testPath, testImportPath, { config: { active: false } })
+    ).toEqual('')
+    expect(
+      webpackPrefetch(testPath, testImportPath, {
+        config: { active: false },
+        overrides: [
+          {
+            files: 'some/**/*.js',
+            config: {
+              active: true
+            }
+          }
+        ]
+      })
+    ).toEqual('webpackPrefetch: true')
+  })
+})

__tests__/webpackPreload.js

@@ -0,0 +1,29 @@
+import { webpackPreload } from '../src/webpackPreload.js'
+
+describe('webpackPreload', () => {
+  it('returns a "webpackPreload" magic comment', () => {
+    const testPath = 'some/test/module.js'
+    const testImportPath = './some/import/path'
+
+    expect(webpackPreload(testPath, testImportPath, true)).toEqual('webpackPreload: true')
+    expect(webpackPreload(testPath, testImportPath, 'some/**/*.js')).toEqual(
+      'webpackPreload: true'
+    )
+    expect(
+      webpackPreload(testPath, testImportPath, { config: { active: false } })
+    ).toEqual('')
+    expect(
+      webpackPreload(testPath, testImportPath, {
+        config: { active: false },
+        overrides: [
+          {
+            files: 'some/**/*.js',
+            config: {
+              active: true
+            }
+          }
+        ]
+      })
+    ).toEqual('webpackPreload: true')
+  })
+})