Package Exports

rename-custom-elements-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rename-custom-elements-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>