From 16ffef1049014d92908486ac8d49d4c57e2d450e Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Fri, 5 Jan 2018 00:14:10 +0100 Subject: [PATCH] feat(import): add `` filter support (`options.import`) --- README.md | 30 +++++- src/index.js | 12 ++- src/options.json | 7 +- src/plugins/import.js | 23 ++++- .../options/import/filter/fixture.html | 18 ++++ .../fixtures/options/import/filter/fixture.js | 3 + .../options/__snapshots__/import.test.js.snap | 99 ++++++++++++++++++- test/options/import.test.js | 52 +++++++++- 8 files changed, 234 insertions(+), 10 deletions(-) create mode 100644 test/fixtures/options/import/filter/fixture.html create mode 100644 test/fixtures/options/import/filter/fixture.js diff --git a/README.md b/README.md index 10f803e1..c950da29 100644 --- a/README.md +++ b/README.md @@ -93,12 +93,40 @@ If your application includes many HTML Components or certain HTML Components are ``` +#### `{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 index 58fe796a..de47b2bd 100644 --- 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) // aren't minified (options.template) (#160) if (options.minimize) plugins.push(minifier()); diff --git a/src/options.json b/src/options.json index 852d9a77..496efb4b 100644 --- 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 index 781ef002..38f75809 100644 --- 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 new file mode 100644 index 00000000..3275d68a --- /dev/null +++ b/test/fixtures/options/import/filter/fixture.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/test/fixtures/options/import/filter/fixture.js b/test/fixtures/options/import/filter/fixture.js new file mode 100644 index 00000000..1e87a0d2 --- /dev/null +++ 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 index 2dfb9eb7..8ace2f16 100644 --- 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 \` + + + + HTML Loader + + + + + + + + + + + + + + + +\`" +`; + +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 \` \${HTML__IMPORT__3} +\`" +`; + +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 \` + + + + + +\${HTML__IMPORT__0} +\${HTML__IMPORT__1} + + + + +\${HTML__IMPORT__2} +\${HTML__IMPORT__3} + + + + +\`" +`; + +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 \` + + + + + +\${HTML__IMPORT__0} +\${HTML__IMPORT__1} + + + + +\${HTML__IMPORT__2} +\${HTML__IMPORT__3} + + + + \`" `; diff --git a/test/options/import.test.js b/test/options/import.test.js index c911bc3d..c61502c8 100644 --- 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(); + }); }); });