reshape-custom-elements
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Reshape Custom Elements

npm tests dependencies coverage

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

Package Sidebar

Install

npm i reshape-custom-elements

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

11.3 kB

Total Files

5

Last publish

Collaborators

  • jescalan