diff --git a/README.md b/README.md index 67335d4..7296f77 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ function MyXMPComponent () { ### Usage -To load your code with this loader, simply add it to your existing JS loaders in your webpack config. It's also possible to use a tag ther than `` by passing in a loader option. +To load your code with this loader, simply add it to your existing JS loaders in your webpack config. It's also possible to use a tag other than `<xmp>` by passing in a loader option. ```jsx // webpack.config.js @@ -56,6 +56,24 @@ To load your code with this loader, simply add it to your existing JS loaders in }, ... ], + +// with custom escape function + ... + rules: [ + { + test: /\.js$/, + use: [ + 'babel-loader', + { + loader: 'xmp-escape-loader', + options: { + escape: string => escapeHtml(string).toLowerCase() + } + }, + ], + }, + ... + ], ``` ### How it works diff --git a/index.js b/index.js index e75ce96..d671415 100644 --- a/index.js +++ b/index.js @@ -14,14 +14,8 @@ function getDelimiters (tag) { } } -// Escape inner text between delimiters -function escapeTextInDelimiters (str, start, end) { - var middleText = str.slice(start.length, end.length * -1) - return start + escapeHtml(middleText) + end -} - // Create block loader with given tag delimiter -function loaderWithTag (tag) { +function loaderWithTag (tag, escape) { var delimiters = getDelimiters(tag) var start = delimiters.start var end = delimiters.end @@ -29,7 +23,8 @@ function loaderWithTag (tag) { start: start, end: end, process: function (str) { - return escapeTextInDelimiters(str, start, end) + var middleText = str.slice(start.length, end.length * -1) + return start + escape(middleText) + end } }) } @@ -38,7 +33,8 @@ function loaderWithTag (tag) { function load (data) { var options = getOptions(this) || {} var tag = options.tag || 'xmp' - var loader = loaderWithTag(tag) + var escape = options.escape || escapeHtml + var loader = loaderWithTag(tag, escape) return loader(data) } diff --git a/package.json b/package.json index dee2e65..473a799 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xmp-escape-loader", - "version": "2.0.0", + "version": "2.1.0", "description": "", "main": "index.js", "scripts": { diff --git a/test/xmp-escape-loader.test.js b/test/xmp-escape-loader.test.js index 0397198..8dbe977 100644 --- a/test/xmp-escape-loader.test.js +++ b/test/xmp-escape-loader.test.js @@ -1,4 +1,5 @@ const xmpEscapeLoader = require('../index') +const escapeHtml = require('escape-html') test('defaults to xmp tag', () => { const input = '<xmp><div> Test </div>' @@ -18,3 +19,11 @@ test('works on multiline inputs', () => { const output = xmpEscapeLoader(input) expect(output).toEqual('\n&lt;div&gt; Test &lt;/div&gt;\n') }) + +test('can receive custom escape', () => { + const input = '<div> Test </div>' + const escape = (string) => escapeHtml(string).toLowerCase() + const customLoader = xmpEscapeLoader.bind({ query: { escape } }) + const output = customLoader(input) + expect(output).toEqual('&lt;div&gt; test &lt;/div&gt;') +}) \ No newline at end of file