feat(import): add <import> filter support (options.import)

webpack-contrib · Jan 8, 2018 · 16ffef1 · 16ffef1
1 parent 888645c
commit 16ffef1
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -93,12 +93,40 @@ If your application includes many HTML Components or certain HTML Components are
 </div>
 ```
 
+#### `{Boolean}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'html-loader',
+  options: {
+    import: false
+  }
+}
+```
+
+#### `{RegExp}`
+
 **webpack.config.js**
 ```js
 {
   loader: 'html-loader',
   options: {
-    import: // TODO add URL filter method (#158)
+    import: /filter/
+  }
+}
+```
+
+#### `{Function}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'html-loader',
+  options: {
+    import (url) {
+      return /filter/.test(url)
+    }
   }
 }
 ```

diff --git a/src/index.js b/src/index.js
@@ -37,8 +37,16 @@ export default function loader(html, map, meta) {
 
   const plugins = [];
 
-  if (options.url) plugins.push(urls());
-  if (options.import) plugins.push(imports(options));
+  // HTML URL Plugin
+  if (options.url) {
+    plugins.push(urls());
+  }
+
+  // HTML IMPORT Plugin
+  if (options.import) {
+    plugins.push(imports(options));
+  }
+
   // TODO(michael-ciniawsky)
   // <imports src=""./file.html"> aren't minified (options.template) (#160)
   if (options.minimize) plugins.push(minifier());

diff --git a/src/options.json b/src/options.json
@@ -5,7 +5,12 @@
       "type": "boolean"
     },
     "import": {
-      "type": "boolean"
+      "anyOf": [
+        { "type": "string" },
+        { "type": "boolean" },
+        { "instanceof": "RegExp" },
+        { "instanceof": "Function" }
+      ]
     },
     "template": {
       "type": [ "boolean", "string" ]

diff --git a/src/plugins/import.js b/src/plugins/import.js
@@ -2,10 +2,25 @@
 // External URL (Protocol URL)
 const URL = /^\w+:\/\//;
 const TAGS = [ { tag: 'import' }, { tag: 'include' } ];
-// TODO(michael-ciniawsky)
-// add filter method for urls (e.g `options.import`) (#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.import instanceof RegExp) {
+    return options.import.test(url);
+  }
+
+  if (typeof options.import === 'function') {
+    return options.import(url);
+  }
+
+  return false;
 };
 
 export default function (options = {}) {

diff --git a/test/fixtures/options/import/filter/fixture.html b/test/fixtures/options/import/filter/fixture.html
@@ -0,0 +1,18 @@
+<!-- Ignore -->
+<import src="//file.html"></import>
+<import src="//cdn.com/file.html"></import>
+<import src="http://cdn.com/file.html"></import>
+<import src="https://cdn.com/file.html"></import>
+<!-- Transform -->
+<import src="./1.html"></import>
+<import src="/2.html"></import>
+<!-- Filter (Ignore) -->
+<import src="./filter/1.html"></import>
+<import src="/filter/2.html"></import>
+<!-- Transform -->
+<include src="./1.html"></include>
+<include src="/2.html"></include>
+<!-- Filter (Ignore) -->
+<include src="./filter/1.html"></include>
+<include src="/filter/2.html"></include>
+
diff --git a/test/fixtures/options/import/filter/fixture.js b/test/fixtures/options/import/filter/fixture.js
@@ -0,0 +1,3 @@
+import html from './fixture.html';
+
+export default html;
diff --git a/test/options/__snapshots__/import.test.js.snap b/test/options/__snapshots__/import.test.js.snap
@@ -1,6 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Options import {Boolean} 1`] = `
+exports[`Options import {Boolean} - false 1`] = `
+"// HTML Imports
+
+
+// HTML Exports
+
+
+// HTML
+export default \`<!DOCTYPE html>
+<html lang=\\"en\\">
+<head>
+  <meta charset=\\"utf-8\\">
+  <title>HTML Loader</title>
+</head>
+<body>
+  <!-- Ignore -->
+  <import src=\\"//file.html\\"></import>
+  <import src=\\"//cdn.com/file.html\\"></import>
+  <import src=\\"http://cdn.com/file.html\\"></import>
+  <import src=\\"https://cdn.com/file.html\\"></import>
+  <!-- Transform -->
+  <import src=\\"./1.html\\"></import>
+  <import src=\\"/2.html\\"></import>
+
+  <include src=\\"./1.html\\"></include>
+  <include src=\\"/2.html\\"></include>
+</body>
+</html>
+\`"
+`;
+
+exports[`Options import {Boolean} - true - default 1`] = `
 "// HTML Imports
 import HTML__IMPORT__0 from './1.html';
 import HTML__IMPORT__1 from '/2.html';
@@ -32,5 +63,71 @@ export default \`<!DOCTYPE html>
   \${HTML__IMPORT__3}
 </body>
 </html>
+\`"
+`;
+
+exports[`Options import {Function} 1`] = `
+"// HTML Imports
+import HTML__IMPORT__0 from './1.html';
+import HTML__IMPORT__1 from '/2.html';
+import HTML__IMPORT__2 from './1.html';
+import HTML__IMPORT__3 from '/2.html';
+
+
+// HTML Exports
+
+
+// HTML
+export default \`<!-- Ignore -->
+
+
+
+
+<!-- Transform -->
+\${HTML__IMPORT__0}
+\${HTML__IMPORT__1}
+<!-- Filter (Ignore) -->
+
+
+<!-- Transform -->
+\${HTML__IMPORT__2}
+\${HTML__IMPORT__3}
+<!-- Filter (Ignore) -->
+
+
+
+\`"
+`;
+
+exports[`Options import {RegExp} 1`] = `
+"// HTML Imports
+import HTML__IMPORT__0 from './1.html';
+import HTML__IMPORT__1 from '/2.html';
+import HTML__IMPORT__2 from './1.html';
+import HTML__IMPORT__3 from '/2.html';
+
+
+// HTML Exports
+
+
+// HTML
+export default \`<!-- Ignore -->
+
+
+
+
+<!-- Transform -->
+\${HTML__IMPORT__0}
+\${HTML__IMPORT__1}
+<!-- Filter (Ignore) -->
+
+
+<!-- Transform -->
+\${HTML__IMPORT__2}
+\${HTML__IMPORT__3}
+<!-- Filter (Ignore) -->
+
+
+
 \`"
 `;
diff --git a/test/options/import.test.js b/test/options/import.test.js
@@ -3,7 +3,7 @@ import webpack from '../helpers/compiler';
 
 describe('Options', () => {
   describe('import', () => {
-    test('{Boolean}', async () => {
+    test('{Boolean} - true - default', async () => {
       const config = {
         loader: {
           test: /\.html$/,
@@ -16,5 +16,55 @@ describe('Options', () => {
 
       expect(source).toMatchSnapshot();
     });
+
+    test('{Boolean} - false', async () => {
+      const config = {
+        loader: {
+          test: /\.html$/,
+          options: {
+            import: false
+          },
+        },
+      };
+
+      const stats = await webpack('options/import/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
+
+    test('{RegExp}', async () => {
+      const config = {
+        loader: {
+          test: /\.html$/,
+          options: {
+            import: /filter/
+          },
+        },
+      };
+
+      const stats = await webpack('options/import/filter/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
+
+    test('{Function}', async () => {
+      const config = {
+        loader: {
+          test: /\.html$/,
+          options: {
+            import (url) {
+              return /filter/.test(url)
+            }
+          },
+        },
+      };
+
+      const stats = await webpack('options/import/filter/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
   });
 });