Nasal Piercings Manipulator
Wondering what’s next for npm?Check out our public roadmap! »

web-components-codemods

1.1.4 • Public • Published

Web Components Codemods

Build Status Commitizen friendly semantic-release codecov Dependency status

NPM

Codemods for Web Components.
Breaking changes? Don't panic :)

Table of contents

Usage

The available codemods can be run in two ways: by using the included CLI or running the transform scripts directly with jscodeshift.

Using the included CLI

Install this package globally:

npm i -g web-components-codemods

Run the command in the directory you want to run a transform (the directory can be changed later):

kodemod

The command will prompt you for the transform to run and all of its options. kodemod CLI screenshot

Alternatively, you can run a specific transform by running kodemod <transform>.

Example:

kodemod replace-attrs

Available transform commands (same as transform scripts):

Using jscodeshift

Install jscodeshift globally:

npm i -g jscodeshift

Clone or download this repository:

npx degit kcmr/web-components-codemods

Run jscodeshift passing the transform script with the -t option:

jscodeshift target-dir/*.js -t web-components-codemods/<transform-script>.js

Available codemods

Replace attrs

Replaces attributes in the specified tag inside a template literal tagged html (LitElement or lit-html).

Script: transforms/replace-attrs.js

Options

Name Default Type Description
--tag undefined String Tag name where the attributes will be replaced
--attrs undefined String Stringified object with {'old-attr': 'new-attr'} pairs
--tabWidth 4 Number Number of spaces used per tab
--useTabs false Boolean Use tabs instead of spaces

Example input:

class MyComponent extends LitElement {
  render() {
    return html`
      <some-component
        attr-one="value"
        attr-two="${expression}"
        .someProp="${expression}"
      >
      </some-component>
    `;
  }
}

Command with options:

jscodeshift input.js -t replace-attrs.js --tag=some-component --attrs='{"attr-one": "foo", ".someProp": ".newProp"}'

Output:

class MyComponent extends LitElement {
  render() {
    return html`
      <some-component
-        attr-one="value"
+        foo="value"
        attr-two="${expression}"
-        .someProp="${expression}"
+        .newProp="${expression}"
      >
      </some-component>
    `;
  }
}

Replace block scope by IIFE

Replaces brackets used as scope in a file by an IIFE.

Script: transforms/block-scope-to-iife.js

Options: no options.

Example input:

{
  const { Element } = Polymer;
}

Command with options:

jscodeshift input.js -t block-scope-to-iife.js

Output:

-{
+(function() {
  const { Element } = Polymer;
+})();
-}

Rename tag

Renames a tag name inside template literals and strings.

Script: transforms/rename-tag.js

Options

Name Default Type Description
--oldTag undefined String Tag name to replace
--newTag undefined String New tag name
--tabWidth 2 Number Number of spaces used per tab
--useTabs false Boolean Use tabs instead of spaces

Example input:

const tpl = `
  <some-tag>
    <some-tag-two></some-tag-two>
  </some-tag>
`;
customElements.define('some-tag', SomeTag);

Command with options:

jscodeshift input.js -t rename-tag.js --oldTag=some-tag --newTag=new-tag

Output:

const tpl = `
-  <some-tag>
+  <new-tag>
    <some-tag-two></some-tag-two>
-  </some-tag>
+  </new-tag>
`;
-customElements.define('some-tag', SomeTag);
+customElements.define('new-tag', SomeTag);

Acknowledgments

Inspiration

Resources

License

This project is licensed under the MIT License.

Install

npm i web-components-codemods

DownloadsWeekly Downloads

8

Version

1.1.4

License

MIT

Unpacked Size

21.2 kB

Total Files

11

Last publish

Collaborators

  • avatar