Update deps + rename options for clarity

README.md

@@ -21,25 +21,30 @@ const customElements = require('reshape-custom-elements')
 
 const html = `<my-component>
                 <my-text class="text">Text</my-text>
+
+                <!-- An actual HTML element defined in additionalTags -->
+                <label>Label</label>
               </my-component>`
 
-reshape({plugins: [customElements({defaultTag: 'span'})]})
+reshape({plugins: [customElements({replacementTag: 'span', additionalTags: ['label']})]})
   .process(html)
   .then((res) => console.log(res.output()))
 ```
 
 ```html
 <span class="my-component">
   <span class="my-text text">Text</span>
+
+  <span class="label">Label</span>
 </span>
 ```
 
 ## Options
 
 | Name | Description | Default |
 | ---- | ----------- | ------- |
-| **defaultTag** | Tag used to replace the custom element tag name | `div` |
-| **skipTags** | Array of tags to be processed despite being a normal html tag | `[]`
+| **replacementTag** | Tag used to replace the custom element tag name | `div` |
+| **additionalTags** | Array of tags to be processed despite being a normal html tag | `[]`
 
 ## License
 

lib/index.js

@@ -1,16 +1,16 @@
 const { modifyNodes } = require('reshape-plugin-util')
 
 module.exports = function reshapeCustomElements(options = {}) {
-  const defaultTag = options.defaultTag || 'div'
-  const skipTags = options.skipTags || []
+  const replacementTag = options.replacementTag || options.defaultTag || 'div'
+  const additionalTags = options.additionalTags || options.skipTags || []
 
   return function(tree) {
     return modifyNodes(
       tree,
       node => {
         return (
           node.type === 'tag' &&
-          (htmlTags.indexOf(node.name) < 0 || skipTags.indexOf(node.name) > -1)
+          (htmlTags.indexOf(node.name) < 0 || additionalTags.indexOf(node.name) > -1)
         )
       },
       node => {
@@ -24,7 +24,7 @@ module.exports = function reshapeCustomElements(options = {}) {
 
         // if there's already the same class, return
         if (node.attrs.class.find(n => n.content === node.name)) {
-          node.name = defaultTag
+          node.name = replacementTag
           return node
         }
 
@@ -45,7 +45,7 @@ module.exports = function reshapeCustomElements(options = {}) {
         })
 
         // set the name to the default and return
-        node.name = defaultTag
+        node.name = replacementTag
         return node
       }
     )

package.json

@@ -13,10 +13,10 @@
   "devDependencies": {
     "ava": "^1.4.1",
     "coveralls": "^3.0.3",
-    "nyc": "^14.1.0",
-    "prettier": "^1.17.0",
+    "nyc": "^14.1.1",
+    "prettier": "^1.17.1",
     "pretty-quick": "^1.10.0",
-    "reshape": "^1.0.0"
+    "reshape": "^1.0.1"
   },
   "homepage": "https://github.com/reshape/custom-elements",
   "keywords": [

test/test.js

@@ -32,16 +32,22 @@ test('undefined options', (t) => {
   return compare(t, html, expected, undefined)
 })
 
-test('defaultTag', (t) => {
+test('replacementTag', (t) => {
   const html = '<custom class="custom">Test</custom>'
   const expected = '<span class="custom">Test</span>'
-  return compare(t, html, expected, { defaultTag: 'span' })
+  return compare(t, html, expected, { replacementTag: 'span' })
 })
 
-test('skip tags option', (t) => {
+test('additionalTags option', (t) => {
   const html = '<header class="custom">Test</header>'
   const expected = '<div class="custom header">Test</div>'
-  return compare(t, html, expected, { skipTags: ['header'] })
+  return compare(t, html, expected, { additionalTags: ['header'] })
+})
+
+test('backwards compatibility', (t) => {
+  const html = '<header class="custom">Test</header>'
+  const expected = '<span class="custom header">Test</span>'
+  return compare(t, html, expected, { defaultTag: 'span', skipTags: ['header'] })
 })
 
 function compare (t, html, expected, options) {