❤
npm
Sign UpSign In

rename-custom-elements-webpack-plugin

0.3.0 • Public • Published

Rename Custom Elements Webpack Plugin

This webpack plugin will rename all custom elements in a project, adding a suffix, a prefix, or both.

Note: This plugin will only work on custom elements with a string literal definition (e.g. customElements.define('my-element, MyElement))

What does it rename

Any reference to the custom element found in the webpack chunks (js, css, html).

The plugin was tested in a Lit-Element project.

Options

Option name Value type Default value Description
prefix String '' Adds this prefix to all custom elements in the project
suffix String Date.now().toString(36) Adds this suffix to all custom elements in project
index String index.html Specifies an index.html that is also parsed for custom elements
tagFilter RegExp /^my-app(-[-a-z]+$)/ Filter the tags to be renamed

Example

Let's say you project has the following custom element:

class MyCustomElement extends HTMLElement {
    ...
}
 
customElements.define('my-custom-element', MyCustomElement);

If we run webpack with the RenameCustomElementsWebpackPlugin using the following options:

const RenameCustomElementsWebpackPlugin = require('rename-custom-elements-webpack-plugin');
 
...
plugins: [
    new RenameCustomElementsWebpackPlugin({
        prefix: 'org',
        suffix: '000',
        tagFilter: /^my-custom(-[-a-z]+|$)/,
    })
],
...

Then the output will looks like this

<body>
  <org-my-custom-element-000> ...some other content </org-my-custom-element-000>
  ...
</body>

Readme

Keywords

Package Sidebar

Install

npm i rename-custom-elements-webpack-plugin

Repository

github.com/marvin89/rename-custom-elements-webpack-plugin

Homepage

github.com/marvin89/rename-custom-elements-webpack-plugin

Weekly Downloads

0

Version

0.3.0

License

none

Unpacked Size

6.89 kB

Total Files

5

Last publish

Collaborators

  • bogdan.arvinte
Try on RunKit
Report malware