feat: implement the filter option for filtering some of sources (#255)

Author: evilebottnawi

src/index.js

@@ -28,7 +28,7 @@ export default function htmlLoader(content) {
     typeof options.attributes === 'undefined' ? true : options.attributes;
 
   if (attributes) {
-    plugins.push(sourcePlugin(options));
+    plugins.push(sourcePlugin({ attributes, resourcePath: this.resourcePath }));
   }
 
   const minimize =
@@ -37,7 +37,7 @@ export default function htmlLoader(content) {
       : options.minimize;
 
   if (minimize) {
-    plugins.push(minimizerPlugin(options));
+    plugins.push(minimizerPlugin({ minimize }));
   }
 
   const { html, messages, warnings, errors } = pluginRunner(plugins).process(

src/options.json

@@ -13,14 +13,17 @@
         {
           "type": "object",
           "properties": {
-            "root": {
-              "type": "string"
-            },
             "list": {
               "type": "array",
               "items": {
                 "type": "string"
               }
+            },
+            "filter": {
+              "instanceof": "Function"
+            },
+            "root": {
+              "type": "string"
             }
           },
           "additionalProperties": false

src/plugins/source-plugin.js

@@ -3,6 +3,8 @@ import { parse } from 'url';
 import { Parser } from 'htmlparser2';
 import { isUrlRequest, urlToRequest } from 'loader-utils';
 
+import { getFilter } from '../utils';
+
 function isASCIIWhitespace(character) {
   return (
     // Horizontal tab
@@ -389,28 +391,31 @@ const defaultAttributes = [
 
 export default (options) =>
   function process(html, result) {
-    let tagsAndAttributes;
+    let possibleAttributes;
+    let maybeFilter;
     let root;
 
     if (
       typeof options.attributes === 'undefined' ||
       options.attributes === true
     ) {
-      tagsAndAttributes = defaultAttributes;
+      possibleAttributes = defaultAttributes;
     } else if (Array.isArray(options.attributes)) {
-      tagsAndAttributes = options.attributes;
+      possibleAttributes = options.attributes;
     } else {
-      tagsAndAttributes = options.attributes.list || defaultAttributes;
+      possibleAttributes = options.attributes.list || defaultAttributes;
+      // eslint-disable-next-line no-undefined
+      maybeFilter = options.attributes.filter || undefined;
       // eslint-disable-next-line no-undefined
       root = options.attributes.root ? options.attributes.root : undefined;
     }
 
     const sources = [];
     const onOpenTagFilter = new RegExp(
-      `^(${tagsAndAttributes.join('|')})$`,
+      `^(${possibleAttributes.join('|')})$`,
       'i'
     );
-    const filter = (value) => isUrlRequest(value, root);
+    const filter = getFilter(maybeFilter, (value) => isUrlRequest(value, root));
     const parser = new Parser(
       {
         attributesMeta: {},
@@ -457,7 +462,7 @@ export default (options) =>
               sourceSet.forEach((sourceItem) => {
                 const { source } = sourceItem;
 
-                if (!filter(source.value)) {
+                if (!filter(attribute, source.value, options.resourcePath)) {
                   return;
                 }
 
@@ -483,7 +488,7 @@ export default (options) =>
               return;
             }
 
-            if (!filter(source.value)) {
+            if (!filter(attribute, source.value, options.resourcePath)) {
               return;
             }
 

src/utils.js

@@ -19,6 +19,20 @@ export function pluginRunner(plugins) {
   };
 }
 
+export function getFilter(filter, defaultFilter = null) {
+  return (attribute, value, resourcePath) => {
+    if (defaultFilter && !defaultFilter(value)) {
+      return false;
+    }
+
+    if (typeof filter === 'function') {
+      return filter(attribute, value, resourcePath);
+    }
+
+    return true;
+  };
+}
+
 export function isProductionMode(loaderContext) {
   return loaderContext.mode === 'production' || !loaderContext.mode;
 }

test/__snapshots__/attributes-option.test.js.snap

@@ -86,6 +86,20 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should work with an empty "object" notations', async () => {
+    const compiler = getCompiler('simple.js', {
+      attributes: {},
+    });
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('should work with an "object" notations', async () => {
     const compiler = getCompiler('simple.js', {
       attributes: {
@@ -115,10 +129,8 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with an empty "object" notations', async () => {
-    const compiler = getCompiler('simple.js', {
-      attributes: {},
-    });
+  it('should work with an "object" notations and translate root-relative sources', async () => {
+    const compiler = getCompiler('simple.js', { attributes: { root: '.' } });
     const stats = await compile(compiler);
 
     expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');
@@ -129,8 +141,22 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should translate root-relative sources', async () => {
-    const compiler = getCompiler('simple.js', { attributes: { root: '.' } });
+  it('should work with an "object" notations and filter some sources', async () => {
+    const compiler = getCompiler('simple.js', {
+      attributes: {
+        filter: (attribute, value, resourcePath) => {
+          expect(typeof attribute).toBe('string');
+          expect(typeof value).toBe('string');
+          expect(typeof resourcePath).toBe('string');
+
+          if (value.includes('example')) {
+            return false;
+          }
+
+          return true;
+        },
+      },
+    });
     const stats = await compile(compiler);
 
     expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');