magic-comments-loader - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

dist/comment.js

 import { commentFor } from './strategy.js';
+import { getBareImportSpecifier } from './util.js';
 const getCommenter = (filepath, options, logger) => (rgxMatch, capturedImportPath) => {
   const importPath = capturedImportPath.trim();
-  const bareImportPath = importPath.replace(/['"`]/g, '');
+  const bareImportPath = getBareImportSpecifier(importPath);
   const {
     verbose,
     match,
-    ...magicCommentOptions
+    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 magicImport = rgxMatch.replace(capturedImportPath, magicComment.length > 0 ? `/* ${magicComment.join(', ')} */ ${importPath}` : importPath);
   if (verbose) {
@@ -13,0 +14,0 @@ logger.info(`${filepath} : ${magicImport}`);

dist/loader.js

 import { validate } from 'schema-utils';
 import { schema } from './schema.js';
+import { parse } from './parser.js';
+import { format } from './formatter.js';
 import { getCommenter } from './comment.js';
 import { dynamicImportsWithoutComments } from './util.js';
-const loader = function (source, map, meta) {
+const loader = function (source) {
   const options = this.getOptions();
-  const optionKeys = Object.keys(options);
   const logger = this.getLogger('MCL');
@@ -12,9 +13,32 @@ validate(schema, options, {
   });
-  const filepath = this.utils.contextify(this.rootContext, this.resourcePath);
-  const magicComments = getCommenter(filepath.replace(/^\.\/?/, ''), optionKeys.length > 0 ? options : {
-    match: 'module',
+  const {
+    mode = 'parser',
+    match = 'module',
+    verbose = false,
+    ...rest
+  } = options;
+  const magicCommentOptions = Object.keys(rest).length ? rest : {
     webpackChunkName: true
-  }, logger);
-  this.callback(null, source.replace(dynamicImportsWithoutComments, magicComments), map, meta);
+  };
+  const filepath = this.utils.contextify(this.rootContext, this.resourcePath).replace(/^\.\/?/, '');
+  if (mode === 'parser') {
+    const [magicSource, magicImports] = format({
+      ...parse(source),
+      match,
+      filepath,
+      magicCommentOptions
+    });
+    if (verbose) {
+      magicImports.forEach(magicImport => {
+        logger.info(`${filepath} : ${magicImport}`);
+      });
+    }
+    return magicSource;
+  }
+  return source.replace(dynamicImportsWithoutComments, getCommenter(filepath, {
+    verbose,
+    match,
+    magicCommentOptions
+  }, logger));
 };
 export { loader };

dist/schema.js

@@ -16,2 +16,5 @@ import { schema as webpackChunkNameSchema } from './webpackChunkName.js';
     },
+    mode: {
+      enum: ['parser', 'regexp']
+    },
     match: {
@@ -18,0 +21,0 @@ enum: ['module', 'import']

dist/util.js

@@ -49,4 +49,7 @@ import micromatch from 'micromatch';
 };
+const getBareImportSpecifier = specifier => {
+  return specifier.replace(/['"`]/g, '');
+};
 const importPrefix = /^(?:(\.{1,2}\/)+)|^\/|^.+:\/\/\/?[.-\w]+\//;
 const dynamicImportsWithoutComments = /(?<![\w.]|#!|(?:\/{2}.+\n?)+|\/\*[\s\w]*?|\*.+?|['"`][^)$,\n]*)import\s*\((?!\s*\/\*)(?<path>\s*?['"`][^)]+['"`]\s*)\)(?!\s*?\*\/)/gm;
-export { getOverrideConfig, getOverrideSchema, pathIsMatch, importPrefix, dynamicImportsWithoutComments };
+export { getBareImportSpecifier, getOverrideConfig, getOverrideSchema, pathIsMatch, importPrefix, dynamicImportsWithoutComments };

package.json

 {
   "name": "magic-comments-loader",
-  "version": "1.5.1",
-  "description": "Add webpack magic comments to your dynamic imports at build time",
+  "version": "1.6.0",
+  "description": "Add webpack magic comments to your dynamic imports at build time.",
   "main": "dist",
@@ -67,3 +67,8 @@ "type": "module",
   "dependencies": {
+    "acorn": "^8.9.0",
+    "acorn-jsx": "^5.3.2",
+    "acorn-jsx-walk": "^2.0.0",
+    "acorn-walk": "^8.2.0",
     "loader-utils": "^3.2.1",
+    "magic-string": "^0.30.0",
     "micromatch": "^4.0.4",
@@ -70,0 +75,0 @@ "schema-utils": "^4.1.0"

README.md

@@ -6,3 +6,3 @@ # [`magic-comments-loader`](https://www.npmjs.com/package/magic-comments-loader) 🪄
 
-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.
+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.
 
@@ -23,3 +23,3 @@ ## Getting Started
     {
-      test: /\.[jt]sx?$/,
+      test: /\.jsx?$/,
       use: ['magic-comments-loader']
@@ -50,2 +50,3 @@ }
 * [`verbose`](#verbose)
+* [`mode`](#mode)
 * [`match`](#match)
@@ -101,2 +102,11 @@ * [`webpackChunkName`](#webpackchunkname)
 
+### `mode`
+**type**
+```ts
+'parser' | 'regexp'
+```
+**default** `'parser'`
+
+Sets how the loader finds dynamic import expressions in your source code, either using an [ECMAScript parser](https://github.com/acornjs/acorn), or a regular expression. Your mileage may vary when using `'regexp'`.
+
 ### `match`
@@ -532,3 +542,3 @@ **type**
 
-The `files` and `config` keys are both required, where the former is glob string, or array thereof, and the latter is the associated magic comment's [`CommentOptions`](#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).
 
@@ -589,1 +599,25 @@ Here's a more complete example of how overrides can be applied:
 ```
+
+### 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.
+
+For example, if your project source code is written in TypeScript, and you use `babel-loader` to transpile and remove type annotations via `@babel/preset-typescript`, while `tsc` is used for type-checking only, chain loaders like this:
+
+**config**
+```js
+module: {
+  rules: [
+    {
+      test: /\.[jt]sx?$/,
+      // Webpack loader chains are processed in reverse order, i.e. last comes first.
+      use: [
+        'magic-comments-loader',
+        'babel-loader'
+      ]
+    }
+  ]
+}
+```
+
+You would configure `ts-loader` similarly, or any other loader that transpiles your source code into spec compliant ECMAScript.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65635

increased by14.51%

Number of package files

42

increased by10.53%

Lines of code

1505

increased by19.26%

Number of lines in readme file

618

increased by5.82%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

8

increased by166.67%

Dependency changes

• + Addedacorn@^8.9.0

• + Addedacorn-jsx@^5.3.2

• + Addedacorn-jsx-walk@^2.0.0

• + Addedacorn-walk@^8.2.0

• + Addedmagic-string@^0.30.0

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Addedacorn@8.14.0(transitive)

• + Addedacorn-jsx@5.3.2(transitive)

• + Addedacorn-jsx-walk@2.0.0(transitive)

• + Addedacorn-walk@8.3.4(transitive)

• + Addedmagic-string@0.30.17(transitive)