Merge pull request #1 from black-trooper/master

Add custom escape option

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 `<xmp>` 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

index.js

@@ -14,22 +14,17 @@ 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
   return blockLoader({
     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)
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmp-escape-loader",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {

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></xmp>'
@@ -18,3 +19,11 @@ test('works on multiline inputs', () => {
   const output = xmpEscapeLoader(input)
   expect(output).toEqual('<xmp>\n&lt;div&gt; Test &lt;/div&gt;\n</xmp>')
 })
+
+test('can receive custom escape', () => {
+  const input = '<xmp><div> Test </div></xmp>'
+  const escape = (string) => escapeHtml(string).toLowerCase()
+  const customLoader = xmpEscapeLoader.bind({ query: { escape } })
+  const output = customLoader(input)
+  expect(output).toEqual('<xmp>&lt;div&gt; test &lt;/div&gt;</xmp>')
+})