Make it possible to locally override the default replacement tag

This may not seem like a useful feature at first (since we're typing both the class an tag name again), but in my opinion it helps convey *semantic* meaning rather than *syntactical* meaning when editing templates.

Possible improvement points:
- Not sure how I'm supposed to handle multiple attribute values here
- pretty-quick is being a bit weird, are you sure this is how you want it to be formatted?
- Maybe a different default attribute name?
- Maybe a shorter option name?
- The replacementTag option (reshape#22) should probably be renamed to defaultReplacementTag

README.md

@@ -24,6 +24,11 @@ const html = `<my-component>
                 
                 <!-- An actual HTML element defined in additionalTags -->
                 <label>Label</label>
+                
+                <!-- Overriding the default replacement tag -->
+                <my-text data-replacement="div">
+                  This will get wrapped in a div instead of a span
+                </my-text>
               </my-component>`
 
 reshape({
@@ -40,15 +45,20 @@ reshape({
   <span class="my-text text">Text</span>
 
   <span class="label">Label</span>
+
+  <div class="my-text">
+    This will get wrapped in a div instead of a span
+  </div>
 </span>
 ```
 
 ## Options
 
-| Name               | Description                                                   | Default |
-| ------------------ | ------------------------------------------------------------- | ------- |
-| **replacementTag** | Tag used to replace the custom element tag name               | `div`   |
-| **additionalTags** | Array of tags to be processed despite being a normal html tag | `[]`    |
+| Name                                | Description                                                              | Default            |
+| ----------------------------------- | ------------------------------------------------------------------------ | ------------------ |
+| **replacementTag**                  | Tag used to replace the custom element tag name                          | `div`              |
+| **additionalTags**                  | Array of tags to be processed despite being a normal html tag            | `[]`               |
+| **replacementTagOverrideAttribute** | Attribute name that can be used to override the default `replacementTag` | `data-replacement` |
 
 ## License
 

lib/index.js

@@ -1,8 +1,11 @@
 const { modifyNodes } = require('reshape-plugin-util')
 
 module.exports = function reshapeCustomElements(options = {}) {
-  const replacementTag = options.replacementTag || options.defaultTag || 'div'
+  const defaultReplacementTag =
+    options.replacementTag || options.defaultTag || 'div'
   const additionalTags = options.additionalTags || options.skipTags || []
+  const replacementTagAttr =
+    options.replacementTagOverrideAttribute || 'data-replacement'
 
   return function(tree) {
     return modifyNodes(
@@ -25,7 +28,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 = replacementTag
+          node.name = defaultReplacementTag
           return node
         }
 
@@ -45,6 +48,16 @@ module.exports = function reshapeCustomElements(options = {}) {
           location: node.location
         })
 
+        // if there is a replacement override attribute, use it
+        let replacementTag = defaultReplacementTag
+        if (
+          node.attrs[replacementTagAttr] &&
+          node.attrs[replacementTagAttr].length > 0
+        ) {
+          replacementTag = node.attrs[replacementTagAttr][0].content
+          delete node.attrs[replacementTagAttr]
+        }
+
         // set the name to the default and return
         node.name = replacementTag
         return node

test/test.js

@@ -53,6 +53,18 @@ test('backwards compatibility', t => {
   })
 })
 
+test('custom replacement tag', t => {
+  const html = '<custom data-replacement="span">Test</custom>'
+  const expected = '<span class="custom">Test</span>'
+  return compare(t, html, expected)
+})
+
+test('custom replacement tag attribute', t => {
+  const html = '<custom tag="span">Test</custom>'
+  const expected = '<span class="custom">Test</span>'
+  return compare(t, html, expected, { replacementTagOverrideAttribute: 'tag' })
+})
+
 function compare(t, html, expected, options) {
   return reshape({ plugins: [customElements(options)] })
     .process(html)