reshape-custom-elements v1.0.0

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

License

• Licensed under MIT
• See our contributing guidelines