magic-comments-loader 1.6.0 → 2.0.0

package/README.md

@@ -1,7 +1,8 @@
 # [`magic-comments-loader`](https://www.npmjs.com/package/magic-comments-loader) 🪄
 
 ![CI](https://github.com/morganney/magic-comments-loader/actions/workflows/ci.yml/badge.svg)
-[![codecov](https://codecov.io/gh/morganney/magic-comments-loader/branch/master/graph/badge.svg?token=1DWQL43B8V)](https://codecov.io/gh/morganney/magic-comments-loader)
+[![codecov](https://codecov.io/gh/morganney/magic-comments-loader/branch/main/graph/badge.svg?token=1DWQL43B8V)](https://codecov.io/gh/morganney/magic-comments-loader)
+[![NPM version](https://img.shields.io/npm/v/magic-comments-loader.svg)](https://www.npmjs.com/package/magic-comments-loader)
 
 Keep your source code clean, add [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) to your dynamic `import()` expressions at build time.
 
@@ -42,50 +43,10 @@ The `webpackChunkName` comment is added by default when registering the loader.
 
 ## Options
 
-Most loader options can be defined with a [`CommentConfig`](#commentconfig) object to support overrides and  suboptions ([`CommentOptions`](#commentoptions)). Options that support globs use [`micromatch`](https://github.com/micromatch/micromatch) for pattern matching.
-
 * [`verbose`](#verbose)
 * [`mode`](#mode)
 * [`match`](#match)
-* [`webpackChunkName`](#webpackchunkname)
-* [`webpackFetchPriority`](#webpackfetchpriority)
-* [`webpackMode`](#webpackmode)
-* [`webpackPrefetch`](#webpackprefetch)
-* [`webpackPreload`](#webpackpreload)
-* [`webpackInclude`](#webpackinclude)
-* [`webpackExclude`](#webpackexclude)
-* [`webpackExports`](#webpackexports)
-* [`webpackIgnore`](#webpackignore)
-
-### `CommentConfig`
-To allow configuration overrides based on module or import paths, or to support comment options that extend functionality, all options except `verbose`, and `match`, can be defined with an object using the following interface:
-
-```ts
-interface CommentConfig {
-  config: CommentOptions;
-  overrides?: Array<{
-    files: string | string[];
-    config: CommentOptions;
-  }>;
-}
-```
-
-#### `CommentOptions`
-
-The exact `CommentOptions` shape defining `config` is determined by the loader option it is associated with, but the interface always extends `CommentOptionsBase`:
-```ts
-interface CommentOptions extends CommentOptionsBase {
-  // In general, a "falsy" value disables the comment.
-  [option: string]: boolean | string | Function | RegExp | undefined;
-}
-
-interface CommentOptionsBase {
-  // Can be used to turn a magic comment on or off.
-  active?: boolean | ((modulePath: string, importPath: string) => boolean)
-}
-```
-
-You can skip to the [overrides example](#overrides) to get a better sense of how this all works.
+* `[magicCommentName: string]: MagicCommentValue` see `magic-comments` [options](https://github.com/morganney/magic-comments#options) for details
 
 ### `verbose`
 **type**
@@ -114,278 +75,6 @@ Sets how the loader finds dynamic import expressions in your source code, either
 
 Sets how globs are matched, either the module file path, or the `import()` specifier.
 
-### `webpackChunkName`
-
-**type**
-```ts
-boolean
-| string
-| string[]
-| ((modulePath: string, importPath: string) => any)
-| CommentConfig
-```
-**default** `true`
-
-Adds `webpackChunkName` magic comments. This option is enabled by default when registering the loader in your webpack configuration.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  basename: boolean;
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-* `true` - Adds `webpackChunkName` comments to **all** dynamic imports using the derived path from the import specifier in kebab-case as the chunk name. This is the default.
-* `false` - Disables adding the `webpackChunkName` comment globally.
-* `string | string[]` - When the glob(s) match a path from a [`match`](#match) path, a `webpackChunkName` comment is added using the derived path from the import specifier in kebab-case as the chunk name.
-* `(modulePath: string, importPath: string) => any` - Return a string to be used as the chunk name. Returning a falsy value will skip adding the comment.
-* `config.basename`:
-  * `true` - Use only the [basename](https://nodejs.org/api/path.html#pathbasenamepath-suffix) from the import specifier as the chunk name. Relative imports may result in name collisions. Use in areas where you know the basenames are unique.
-  * `false` - Use the full derived path from the import specifier in kebab-case as the chunk name, same as the default behavior.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### `webpackFetchPriority`
-
-**type**
-```ts
-boolean
-| 'high' | 'low' | 'auto'
-| ((modulePath: string, importPath: string) => any)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackFetchPriority` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  fetchPriority: 'high' | 'low' | 'auto' | ((modulePath: string, importPath: string) => any);
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-* `false` - Disables the comment globally. This is the default behavior.
-* `true` - Add `webpackFetchPriority` magic comments to **all** dynamic imports with the default value of `'auto'`.
-* `string` - Add `webpackFetchPriority` magic comments to **all** dynamic imports with the provided string value as the priority. If the string is not `'high'`, `'low'`, or `'auto'` the comment will **not** be added.
-* `(modulePath: string, importPath: string) => any` - Return a string to be used as the priority. Returning a falsy value or an unsupported string will **not** add the comment.
-* `config.fetchPriority`:
-  * `'high' | 'low' | 'auto'` - Sets the fetch priority to the provided value when adding the comment.
-  * `(modulePath: string, importPath: string) => any` - Same as using a function for the loader option.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### `webpackMode`
-
-**type**
-```ts
-boolean
-| 'lazy' | 'lazy-once' | 'eager' | 'weak'
-| ((modulePath: string, importPath: string) => any)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackMode` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  mode: 'lazy' | 'lazy-once' | 'eager' | 'weak' | ((modulePath: string, importPath: string) => any);
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-* `false` - Disables the comment globally. This is the default behavior.
-* `true` - Add `webpackMode` magic comments to **all** dynamic imports with the default value of `'lazy'`.
-* `string` - Add `webpackMode` magic comments to **all** dynamic imports with the provided string value as the mode. If the string is not `'lazy'`, `'lazy-once'`, `'eager'`, or `'weak'` the comment will **not** be added.
-* `(modulePath: string, importPath: string) => any` - Return a string to be used as the mode. Returning a falsy value or an unsupported string will **not** add the comment.
-* `config.mode`:
-  * `'lazy' | 'lazy-once' | 'eager' | 'weak'` - Sets the chunk loading mode to the provided value when adding the comment.
-  * `(modulePath: string, importPath: string) => any` - Same as using a function for the loader option.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### [`webpackPrefetch`](https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules)
-
-**type**
-```ts
-boolean
-| string
-| string[]
-| ((modulePath: string, importPath: string) => boolean)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackPrefetch` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{ active: boolean | ((modulePath: string, importPath: string) => boolean); }
-```
-
-Possible values:
-* `false` - Disables the comment globally. This is the default behavior.
-* `true` - Add `webpackPrefetch` magic comments with a value of `true` to **all** dynamic imports. 
-* `string | string[]` - Add `webpackPrefetch` comment with a value of `true` when the glob(s) match a path from a [`match`](#match) path.
-* `(modulePath: string, importPath: string) => boolean` - Returning `false` will disable adding the comment, otherwise it will be added.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### [`webpackPreload`](https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules)
-
-**type**
-```ts
-boolean
-| string
-| string[]
-| ((modulePath: string, importPath: string) => boolean)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackPreload` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{ active: boolean | ((modulePath: string, importPath: string) => boolean); }
-```
-
-Possible values:
-* `false` - Disables the comment globally. This is the default behavior.
-* `true` - Add `webpackPreload` magic comments with a value of `true` to **all** dynamic imports. 
-* `string | string[]` - Add `webpackPreload` comment with a value of `true` when the glob(s) match a path from a [`match`](#match) path.
-* `(modulePath: string, importPath: string) => boolean` - Returning `false` will disable adding the comment, otherwise it will be added.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### `webpackInclude`
-
-**type**
-```ts
-RegExp
-| ((modulePath: string, importPath: string) => RegExp)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackInclude` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  include: (modulePath: string, importPath: string) => RegExp;
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-*  `RegExp` - Adds a `webpackInclude` comment to **all** dynamic imports using the provided regular expression.
-*  `(modulePath: string, importPath: string) => RegExp` - Adds a `webpackInclude` comment using the provided regular expression. Returning anything other than a regular expression does **not** add the comment.
-*  `config.include`:
-   * `RegExp` - Adds a `webpackInclude` comment to **all** dynamic imports, or only those matching a path from the [`match`](#match) path if using overrides.
-   * `(modulePath: string, importPath: string) => RegExp` - Same as using a function in the loader option.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### `webpackExclude`
-
-**type**
-```ts
-RegExp
-| ((modulePath: string, importPath: string) => RegExp)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackExclude` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  exclude: (modulePath: string, importPath: string) => RegExp;
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-*  `RegExp` - Adds a `webpackExclude` comment to **all** dynamic imports using the provided regular expression.
-*  `(modulePath: string, importPath: string) => RegExp` - Adds a `webpackExclude` comment using the provided regular expression. Returning anything other than a regular expression does **not** add the comment.
-*  `config.exclude`:
-   * `RegExp` - Adds a `webpackExclude` comment to **all** dynamic imports, or only those matching a path from the [`match`](#match) path if using overrides.
-   * `(modulePath: string, importPath: string) => RegExp` - Same as using a function in the loader option.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-### `webpackExports`
-
-**type**
-```ts
-((modulePath: string, importPath: string) => string[])
-| CommentConfig
-```
-**default** None
-
-Adds `webpackExports` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{
-  exports: (modulePath: string, importPath: string) => string[];
-  active: boolean | ((modulePath: string, importPath: string) => boolean);
-}
-```
-
-Possible values:
-* `(modulePath: string, importPath: string) => string[]` - Adds a `webpackExports` comment using the strings in the returned array as the export names. Returning anything other than an array will **not** add the comment.
-* `config.exports`:
-  * `(modulePath: string, importPath: string) => string[]` - Same as using a function in the loader option.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
-
-### `webpackIgnore`
-
-**type**
-```ts
-boolean
-| string
-| string[]
-| ((modulePath: string, importPath: string) => boolean)
-| CommentConfig
-```
-**default** None
-
-Adds `webpackIgnore` magic comments.
-
-When using a [`CommentConfig`](#commentconfig) the following comment options are supported:
-```ts
-{ active: boolean | ((modulePath: string, importPath: string) => boolean); }
-```
-
-Possible values:
-* `false` - Disables the comment globally. This is the default behavior.
-* `true` - Add `webpackIgnore` magic comments with a value of `true` to **all** dynamic imports. Effectively, opt-out of webpack code-splitting for dynamic imports. 
-* `string | string[]` - Add `webpackIgnore` comment with a value of `true` when the glob(s) match a path from a [`match`](#match) path.
-* `(modulePath: string, importPath: string) => boolean` - Returning `false` will **not** add the comment, otherwise it will be added.
-* `config.active`:
-  * `true` - Disable the comment.
-  * `false` - Enable the comment.
-
 ## Examples
 
 Below are examples for some of the supported magic comments. Consult the [loader specification](https://github.com/morganney/magic-comments-loader/blob/main/__tests__/loader.spec.js) for a comprehensive usage example.
@@ -452,7 +141,7 @@ import('./folder/module.js')
 import(/* webpackChunkName: "custom-chunk-name" */ './folder/module.js')
 ```
 
-Finally, using a [`CommentConfig`](#commentconfig) object you can change the chunk name to the import specifier's basename (instead of the full hyphenated path). This could potentially result in name collisions, so be mindful of import specifiers when activating. You could also achieve the same thing by using a function instead of `config.basename`.
+Finally, using a [`CommentConfig`](https://github.com/morganney/magic-comments#commentconfig) object you can change the chunk name to the import specifier's basename (instead of the full hyphenated path). This could potentially result in name collisions, so be mindful of import specifiers when activating. You could also achieve the same thing by using a function instead of `options.basename`.
 
 **config**
 ```js
@@ -464,7 +153,7 @@ module: {
         loader: 'magic-comments-loader',
         options: {
           webpackChunkName: {
-            config: {
+            options: {
               basename: true
             }
           }
@@ -485,7 +174,7 @@ import('./folder/module.js')
 import(/* webpackChunkName: "module" */ './folder/module.js')
 ```
 
-Most of the magic comments can be configured similarly, and **all** support configuration as a function with the signature `(modulePath: string, importPath: string) => any`, albeit the return type is checked at runtime for compliance with the expected values. Check out the loader [options](#options) for more details.
+Most of the magic comments can be configured similarly, and **all** support configuration as a function with the signature `(modulePath: string, importPath: string) => any`, albeit the return type is checked at runtime for compliance with the expected values. Check out the [options](https://github.com/morganney/magic-comments#options) for `magic-comments` more details.
 
 ### Multiple
 
@@ -526,16 +215,16 @@ import(/* webpackChunkName: "priority-module", webpackMode: "lazy", webpackFetch
 
 ### Overrides
 
-When using a [`CommentConfig`](#commentconfig) object, you can override the configuration passed in the `config` key by defining `overrides`. It is an array of objects that look like:
+When using a [`CommentConfig`](https://github.com/morganney/magic-comments#commentconfig) object, you can override the configuration passed in the `options` key by defining `overrides`. It is an array of objects that look like:
 
 ```ts
-{
+Array<{
   files: string | string[];
-  config: CommentOptions;
-}
+  options: CommentOptions;
+}>
 ```
 
-The `files` and `config` keys are both required, where the former is a glob string, or an array thereof, and the latter is the associated magic comment's [`CommentOptions`](#commentoptions).
+The `files` and `options` keys are both required, where the former is a glob string, or an array thereof, and the latter is the associated magic comment's [`CommentOptions`](https://github.com/morganney/magic-comments#commentoptions).
 
 Here's a more complete example of how overrides can be applied:
 
@@ -551,19 +240,19 @@ module: {
           match: 'import', // Now provided globs match against the import specifier
           webpackChunkName: '*.json',
           webpackMode: {
-            config: {
+            options: {
               mode: 'lazy'
             },
             overrides: [
               {
                 files: ['eager/**/*.js'],
-                config: {
+                options: {
                   mode: 'eager'
                 }
               },
               {
                 files: ['locales/**/*.json'],
-                config: {
+                options: {
                   mode: 'lazy-once'
                 }
               }
@@ -592,6 +281,8 @@ import(/* webpackMode: "eager" */ './eager/module.js')
 import(/* webpackChunkName: "locales-[request]", webpackMode: "lazy-once" */ `./locales/${lang}.json`)
 ```
 
+You can also see the [example for overrides in `magic-comments`](https://github.com/morganney/magic-comments#overrides).
+
 ### TypeScript
 
 When using TypeScript or experimental ECMAScript features <= [stage 3](https://tc39.es/process-document/), i.e. non spec compliant, you must chain the appropriate loaders with `magic-comments-loader` coming after.

package/dist/cjs/comment.cjs

@@ -4,18 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCommenter = void 0;
-var _strategy = require("./strategy.cjs");
-var _util = require("./util.cjs");
+var _magicComments = require("magic-comments");
 const getCommenter = (filepath, options, logger) => (rgxMatch, capturedImportPath) => {
   const importPath = capturedImportPath.trim();
-  const bareImportPath = (0, _util.getBareImportSpecifier)(importPath);
   const {
     verbose,
     match,
     magicCommentOptions
   } = options;
-  const magicComment = Object.keys(magicCommentOptions).map(key => _strategy.commentFor[key](filepath, bareImportPath, magicCommentOptions[key], match)).filter(Boolean);
-  const magicImport = rgxMatch.replace(capturedImportPath, magicComment.length > 0 ? `/* ${magicComment.join(', ')} */ ${importPath}` : importPath);
+  const magicComment = (0, _magicComments.getMagicComment)({
+    match,
+    importPath,
+    modulePath: filepath,
+    options: magicCommentOptions
+  });
+  const magicImport = rgxMatch.replace(capturedImportPath, magicComment.length > 0 ? `${magicComment} ${importPath}` : importPath);
   if (verbose) {
     logger.info(`${filepath} : ${magicImport}`);
   }

package/dist/cjs/formatter.cjs

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.format = void 0;
+var _magicComments = require("magic-comments");
 var _magicString = _interopRequireDefault(require("magic-string"));
-var _strategy = require("./strategy.cjs");
-var _util = require("./util.cjs");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const format = ({
   match,
@@ -17,7 +16,6 @@ const format = ({
   importExpressionNodes
 }) => {
   const magicImports = [];
-  const step = 'import('.length;
   const cmts = [...comments];
   const src = new _magicString.default(source);
   const hasComment = node => {
@@ -30,13 +28,16 @@ const format = ({
   };
   for (const node of importExpressionNodes) {
     if (!hasComment(node)) {
-      const specifier = source.substring(node.start + step, node.end - 1);
-      const bareImportPath = (0, _util.getBareImportSpecifier)(specifier);
-      const magic = Object.keys(magicCommentOptions).map(key => _strategy.commentFor[key](filepath, bareImportPath, magicCommentOptions[key], match)).filter(Boolean);
-      if (magic.length) {
-        const magicComment = `/* ${magic.join(', ')} */ `;
-        magicImports.push(src.snip(node.start, node.end).toString().replace(specifier, `${magicComment}${specifier}`));
-        src.appendRight(node.start + step, `${magicComment}`);
+      const specifier = source.substring(node.source.start, node.source.end);
+      const magicComment = (0, _magicComments.getMagicComment)({
+        match,
+        modulePath: filepath,
+        importPath: specifier,
+        options: magicCommentOptions
+      });
+      if (magicComment) {
+        magicImports.push(src.snip(node.start, node.end).toString().replace(specifier, `${magicComment} ${specifier}`));
+        src.appendLeft(node.source.start, `${magicComment} `);
       }
     }
   }

package/dist/cjs/loader.cjs

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.loader = void 0;
+var _nodePath = require("node:path");
 var _schemaUtils = require("schema-utils");
 var _schema = require("./schema.cjs");
 var _parser = require("./parser.cjs");
 var _formatter = require("./formatter.cjs");
+var _magicComments = require("magic-comments");
 var _comment = require("./comment.cjs");
-var _util = require("./util.cjs");
 const loader = function (source) {
   const options = this.getOptions();
   const logger = this.getLogger('MCL');
@@ -25,7 +26,7 @@ const loader = function (source) {
   const magicCommentOptions = Object.keys(rest).length ? rest : {
     webpackChunkName: true
   };
-  const filepath = this.utils.contextify(this.rootContext, this.resourcePath).replace(/^\.\/?/, '');
+  const filepath = this.resourcePath;
   if (mode === 'parser') {
     const [magicSource, magicImports] = (0, _formatter.format)({
       ...(0, _parser.parse)(source),
@@ -34,13 +35,14 @@ const loader = function (source) {
       magicCommentOptions
     });
     if (verbose) {
+      const relativePath = (0, _nodePath.relative)(this.rootContext, filepath);
       magicImports.forEach(magicImport => {
-        logger.info(`${filepath} : ${magicImport}`);
+        logger.info(`${relativePath} : ${magicImport}`);
       });
     }
     return magicSource;
   }
-  return source.replace(_util.dynamicImportsWithoutComments, (0, _comment.getCommenter)(filepath, {
+  return source.replace(_magicComments.dynamicImportsWithoutComments, (0, _comment.getCommenter)(filepath, {
     verbose,
     match,
     magicCommentOptions

package/dist/cjs/schema.cjs

@@ -4,36 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.schema = void 0;
-var _webpackChunkName = require("./webpackChunkName.cjs");
-var _webpackFetchPriority = require("./webpackFetchPriority.cjs");
-var _webpackMode = require("./webpackMode.cjs");
-var _webpackIgnore = require("./webpackIgnore.cjs");
-var _webpackPrefetch = require("./webpackPrefetch.cjs");
-var _webpackPreload = require("./webpackPreload.cjs");
-var _webpackExports = require("./webpackExports.cjs");
-var _webpackInclude = require("./webpackInclude.cjs");
-var _webpackExclude = require("./webpackExclude.cjs");
+var _magicComments = require("magic-comments");
 const schema = {
   type: 'object',
   properties: {
-    verbose: {
-      type: 'boolean'
-    },
+    ..._magicComments.schema.properties,
     mode: {
       enum: ['parser', 'regexp']
-    },
-    match: {
-      enum: ['module', 'import']
-    },
-    webpackChunkName: _webpackChunkName.schema,
-    webpackFetchPriority: _webpackFetchPriority.schema,
-    webpackMode: _webpackMode.schema,
-    webpackIgnore: _webpackIgnore.schema,
-    webpackPrefetch: _webpackPrefetch.schema,
-    webpackPreload: _webpackPreload.schema,
-    webpackExports: _webpackExports.schema,
-    webpackInclude: _webpackInclude.schema,
-    webpackExclude: _webpackExclude.schema
+    }
   },
   additionalProperties: false
 };

package/dist/comment.js

@@ -1,15 +1,18 @@
-import { commentFor } from './strategy.js';
-import { getBareImportSpecifier } from './util.js';
+import { getMagicComment } from 'magic-comments';
 const getCommenter = (filepath, options, logger) => (rgxMatch, capturedImportPath) => {
   const importPath = capturedImportPath.trim();
-  const bareImportPath = getBareImportSpecifier(importPath);
   const {
     verbose,
     match,
     magicCommentOptions
   } = options;
-  const magicComment = Object.keys(magicCommentOptions).map(key => commentFor[key](filepath, bareImportPath, magicCommentOptions[key], match)).filter(Boolean);
-  const magicImport = rgxMatch.replace(capturedImportPath, magicComment.length > 0 ? `/* ${magicComment.join(', ')} */ ${importPath}` : importPath);
+  const magicComment = getMagicComment({
+    match,
+    importPath,
+    modulePath: filepath,
+    options: magicCommentOptions
+  });
+  const magicImport = rgxMatch.replace(capturedImportPath, magicComment.length > 0 ? `${magicComment} ${importPath}` : importPath);
   if (verbose) {
     logger.info(`${filepath} : ${magicImport}`);
   }

package/dist/formatter.js

@@ -1,6 +1,5 @@
+import { getMagicComment } from 'magic-comments';
 import MagicString from 'magic-string';
-import { commentFor } from './strategy.js';
-import { getBareImportSpecifier } from './util.js';
 const format = ({
   match,
   source,
@@ -10,7 +9,6 @@ const format = ({
   importExpressionNodes
 }) => {
   const magicImports = [];
-  const step = 'import('.length;
   const cmts = [...comments];
   const src = new MagicString(source);
   const hasComment = node => {
@@ -23,13 +21,16 @@ const format = ({
   };
   for (const node of importExpressionNodes) {
     if (!hasComment(node)) {
-      const specifier = source.substring(node.start + step, node.end - 1);
-      const bareImportPath = getBareImportSpecifier(specifier);
-      const magic = Object.keys(magicCommentOptions).map(key => commentFor[key](filepath, bareImportPath, magicCommentOptions[key], match)).filter(Boolean);
-      if (magic.length) {
-        const magicComment = `/* ${magic.join(', ')} */ `;
-        magicImports.push(src.snip(node.start, node.end).toString().replace(specifier, `${magicComment}${specifier}`));
-        src.appendRight(node.start + step, `${magicComment}`);
+      const specifier = source.substring(node.source.start, node.source.end);
+      const magicComment = getMagicComment({
+        match,
+        modulePath: filepath,
+        importPath: specifier,
+        options: magicCommentOptions
+      });
+      if (magicComment) {
+        magicImports.push(src.snip(node.start, node.end).toString().replace(specifier, `${magicComment} ${specifier}`));
+        src.appendLeft(node.source.start, `${magicComment} `);
       }
     }
   }

package/dist/loader.js

@@ -1,9 +1,10 @@
+import { relative } from 'node:path';
 import { validate } from 'schema-utils';
 import { schema } from './schema.js';
 import { parse } from './parser.js';
 import { format } from './formatter.js';
+import { dynamicImportsWithoutComments } from 'magic-comments';
 import { getCommenter } from './comment.js';
-import { dynamicImportsWithoutComments } from './util.js';
 const loader = function (source) {
   const options = this.getOptions();
   const logger = this.getLogger('MCL');
@@ -19,7 +20,7 @@ const loader = function (source) {
   const magicCommentOptions = Object.keys(rest).length ? rest : {
     webpackChunkName: true
   };
-  const filepath = this.utils.contextify(this.rootContext, this.resourcePath).replace(/^\.\/?/, '');
+  const filepath = this.resourcePath;
   if (mode === 'parser') {
     const [magicSource, magicImports] = format({
       ...parse(source),
@@ -28,8 +29,9 @@ const loader = function (source) {
       magicCommentOptions
     });
     if (verbose) {
+      const relativePath = relative(this.rootContext, filepath);
       magicImports.forEach(magicImport => {
-        logger.info(`${filepath} : ${magicImport}`);
+        logger.info(`${relativePath} : ${magicImport}`);
       });
     }
     return magicSource;