feat(plugins/url): add url filter support (options.url) (#162)

Author: michael-ciniawsky

README.md

@@ -69,12 +69,40 @@ If your application includes many HTML Components or certain HTML Components are
 
 ### `url`
 
+#### `{Boolean}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'html-loader',
+  options: {
+    url: false
+  }
+}
+```
+
+#### `{RegExp}`
+
 **webpack.config.js**
 ```js
 {
   loader: 'html-loader',
   options: {
-    url: // TODO add URL filter method (#158 && #159)
+    url: /filter/
+  }
+}
+```
+
+#### `{Function}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'html-loader',
+  options: {
+    url (url) {
+      return /filter/.test(url)
+    }
   }
 }
 ```

package-lock.json

@@ -39,7 +39,7 @@ export default function loader(html, map, meta) {
 
   // HTML URL Plugin
   if (options.url) {
-    plugins.push(urls());
+    plugins.push(urls(options));
   }
 
   // HTML IMPORT Plugin
@@ -49,7 +49,9 @@ export default function loader(html, map, meta) {
 
   // TODO(michael-ciniawsky)
   // <imports src=""./file.html"> aren't minified (options.template) (#160)
-  if (options.minimize) plugins.push(minifier());
+  if (options.minimize) {
+    plugins.push(minifier());
+  }
 
   // Reuse HTML AST (PostHTML AST)
   // (e.g posthtml-loader) to avoid HTML reparsing
@@ -84,7 +86,7 @@ export default function loader(html, map, meta) {
           }
 
           return imports
-        }, '// HTML Imports\n')
+        }, '')
 
       const exports = messages
         .filter((msg) => msg.type === 'export' ? msg : false)
@@ -102,24 +104,25 @@ export default function loader(html, map, meta) {
           }
 
           return exports;
-        }, '// HTML Exports\n')
+        }, '')
 
       // TODO(michael-ciniawsky)
-      // replace with post5/core
-      // HACK
-      // Ensure to cleanup/reset messages
+      // replace posthtml with @post5/core
+      // HACK Ensure to cleanup/reset messages
       // during recursive resolving of imports
       messages.length = 0;
 
       html = options.template
-        ? `// HTML\nexport default function (${options.template}) { return \`${html}\`; }`
-        : `// HTML\nexport default \`${html}\``;
+        ? `function (${options.template}) { return \`${html}\`; }`
+        : `\`${html}\``;
 
       const result = [
-        `${imports}\n`,
-        `${exports}\n`,
-        html,
-      ].join('\n');
+        imports ? `// HTML Imports\n${imports}\n` : false,
+        exports ? `// HTML Exports\n${exports}\n` : false,
+        `// HTML\nexport default ${html}`,
+      ]
+        .filter(Boolean)
+        .join('\n');
 
       cb(null, result);
 

src/index.js

@@ -2,7 +2,12 @@
   "type": "object",
   "properties": {
     "url": {
-      "type": "boolean"
+      "anyOf": [
+        { "type": "string" },
+        { "type": "boolean" },
+        { "instanceof": "RegExp" },
+        { "instanceof": "Function" }
+      ]
     },
     "import": {
       "anyOf": [

src/options.json

@@ -1,20 +1,31 @@
 /* eslint-disable */
 // External URL (Protocol URL)
 const URL = /^\w+:\/\//;
-// TODO(michael-ciniawsky)
-// extend with custom matchers
-// e.g <custom-element custom-src="">
-// (`options.url.filter`) (#159)
+// Attributes Matcher
 const ATTRS = [
   { attrs: { src: true } },
   { attrs: { href: true } },
   { attrs: { srcset: true } },
 ];
 
-// TODO(michael-ciniawsky)
-// add filter method for urls (e.g `options.url.filter`) (#158)
-const filter = (url) => {
-  return URL.test(url) || url.startsWith('//');
+const filter = (url, options) => {
+  if (URL.test(url)) {
+    return true;
+  }
+
+  if (url.startsWith('//')) {
+    return true;
+  }
+
+  if (options.url instanceof RegExp) {
+    return options.url.test(url);
+  }
+
+  if (typeof options.url === 'function') {
+    return options.url(url);
+  }
+  
+  return false;
 };
 
 export default function (options = {}) {
@@ -30,7 +41,7 @@ export default function (options = {}) {
         }
 
         // Ignore external && filtered urls
-        if (filter(node.attrs.src)) {
+        if (filter(node.attrs.src, options)) {
           return node;
         }
 
@@ -48,10 +59,11 @@ export default function (options = {}) {
 
         return node;
       }
+
       // <tag href="path/to/file.ext">
       if (node.attrs.href) {
         // Ignore external && filtered urls
-        if (filter(node.attrs.href)) {
+        if (filter(node.attrs.href, options)) {
           return node;
         }
 
@@ -72,7 +84,7 @@ export default function (options = {}) {
       // <tag srcset="path/to/file.ext">
       if (node.attrs.srcset) {
         // Ignore external && filtered urls
-        if (filter(node.attrs.srcset)) {
+        if (filter(node.attrs.srcset, options)) {
           return node;
         }
 

src/plugins/url.js

@@ -6,9 +6,6 @@ import HTML__URL__0 from './file.png';
 import HTML__IMPORT__0 from './file.html';
 
 
-// HTML Exports
-
-
 // HTML
 export default \`<!DOCTYPE html>
 <html lang=\\"en\\">

test/__snapshots__/loader.test.js.snap

@@ -0,0 +1,11 @@
+<!-- Ignore -->
+<img src="//file.png">
+<img src="//cdn.com/file.png">
+<img src="http://cdn.com/file.png">
+<img src="https://cdn.com/file.png">
+<!-- Transform -->
+<img src="./file.png">
+<img src="/file.png">
+<!-- Filter -->
+<img src="./filter/file.png">
+<img src="/filter/file.png">

test/fixtures/options/url/filter/fixture.html

@@ -0,0 +1,3 @@
+import html from './fixture.html';
+
+export default html;

test/fixtures/options/url/filter/fixture.js

@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Options import {Boolean} - false 1`] = `
-"// HTML Imports
-
-
-// HTML Exports
-
-
-// HTML
+"// HTML
 export default \`<!DOCTYPE html>
 <html lang=\\"en\\">
 <head>
@@ -39,9 +33,6 @@ import HTML__IMPORT__2 from './1.html';
 import HTML__IMPORT__3 from '/2.html';
 
 
-// HTML Exports
-
-
 // HTML
 export default \`<!DOCTYPE html>
 <html lang=\\"en\\">
@@ -74,9 +65,6 @@ import HTML__IMPORT__2 from './1.html';
 import HTML__IMPORT__3 from '/2.html';
 
 
-// HTML Exports
-
-
 // HTML
 export default \`<!-- Ignore -->
 
@@ -107,9 +95,6 @@ import HTML__IMPORT__2 from './1.html';
 import HTML__IMPORT__3 from '/2.html';
 
 
-// HTML Exports
-
-
 // HTML
 export default \`<!-- Ignore -->
 

test/options/__snapshots__/import.test.js.snap

@@ -5,9 +5,6 @@ exports[`Options minimize {Boolean} 1`] = `
 import HTML__URL__0 from './file.png';
 
 
-// HTML Exports
-
-
 // HTML
 export default \`<!DOCTYPE html><html lang=\\"en\\"><head><meta charset=\\"utf-8\\"><title>HTML Loader</title></head><body><div id=\\"app\\"></div><img src=\\"\${HTML__URL__0}\\"></body></html>\`"
 `;