Reshape Custom Elements

Transform custom element names into class names.

Installation

npm i reshape-custom-elements --save

Usage

Input HTML

<my-component>
  <my-text class="text">Text</my-text>

  <!-- An actual HTML element defined in additionalTags -->
  <label>Label</label>

  <!-- Overriding the default replacement tag with a map -->
  <my-footer>
    Reshape is licensed under the MIT license
  </my-footer>

  <!-- Locally overriding the default replacement tag with an attribute -->
  <my-text data-replacement="div">
    This will get wrapped in a div instead of a span
  </my-text>
</my-component>

Reshape processing

const reshape = require('reshape')
const customElements = require('reshape-custom-elements')

reshape({
  plugins: [
    customElements({
      replacementTag: 'span',
      additionalTags: ['label'],
      replacementTagMap: {
        footer: ['my-footer']
      }
    })
  ]
})
  .process(html)
  .then(res => console.log(res.output()))

Output HTML

<span class="my-component">
  <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>

  <footer class="my-footer">
    Reshape is licensed under the MIT license
  </footer>
</span>

Options

Name	Description	Default
defaultReplacementTag	Tag used to replace the custom element tag name	div
additionalTags	Array of tags to be processed despite being a normal HTML tag. HTML tags that are used in the replacementTagMap will automatically be added to this list	[]
blacklist	Array of tags that should never be processed	[]
replacementTagMap	Object containing custom tag ↔ replacement tag mappings in the format: ReplacedTag: [ customTag1, customTag2, ... ]. Overrides replacementTag	{}
replacementTagOverrideAttribute	Attribute name that can be used to locally override the used replacement tag. Overrides replacementTag and replacementTagMap	data-replacement

License

• Licensed under MIT
• See our contributing guidelines