Skip to content
This repository has been archived by the owner on Nov 25, 2021. It is now read-only.

Script that checks web components used in your .html file and tries to import definitions automatically

License

Notifications You must be signed in to change notification settings

iSuslov/polymer-auto-import

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

polymer-auto-import

Script that checks web components used in your .html file and tries to import definitions automatically. All unused imports go under <!--UNUSED DIRECTLY--> comment.

npm package | github

Key features

Searches for usages in:

In dom-module

  • All web components with names that contain
  • Animations in `entry-animation` and `exit-animation` attributes (configurable)
  • Icons in all attributes with name `icon`
  • All `include` attributes in `style` tags
  • All `effects` attributes (configurable)
  • In Polymer({...}) initialization snippet

  • Behaviors in `Polymer({behaviors:[...]})` array
  • Animations in `animationConfig` property
  • After that it looks for definitions in folders starting from the root project folder and creates relative imports. Not tested for component developing.

    ##Install

    npm install -g polymer-auto-import

    ##Simple Usage:

    Script takes file path as a first argument. Following command

    polymer-imports /Users/User/Documents/MyProject/app/src/my-app/app-gallery.html

    Will convert this:

    <link rel="import" href="../../bower_components/polymerfire/firebase-app.html">
    
    <!--
    `app-gallery`
    
    
    @demo demo/index.html 
    -->
    
    <dom-module id="app-gallery">
        <template>
            <style>
                :host {
                    display: block;
                }
            </style>
            <paper-button></paper-button>
            <neon-animated-pages entry-animation="slide-down-animation" exit-animation="slide-left-animation">
    
            </neon-animated-pages>
            <iron-icon icon="vaadin-icons:check"></iron-icon>
            <paper-icon-button icon="menu"></paper-icon-button>
        </template>
    
        <script>
    
            Polymer({
    
                is: 'app-gallery',
                behaviors: [
                    Polymer.NeonAnimationRunnerBehavior,
                    Polymer.NeonAnimatableBehavior,
                ]
                ,
                properties: {
                    animationConfig: {
                        value: function () {
                            return {
                                'entry': [{
                                    name: 'slide-down-animation',
                                    node: this
                                }, {
                                    name: 'fade-in-animation',
                                    node: this,
                                    timing: {delay: 50}
                                }]
                            }
                        }
                    }
                },
    
            });
        </script>
    </dom-module>

    into this:

    <link rel="import" href="../../bower_components/polymer/polymer.html">
    
    <!--Paper elements-->
    <link rel="import" href="../../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
    
    <!--Neon elements-->
    <link rel="import" href="../../bower_components/neon-animation/animations/slide-down-animation.html">
    <link rel="import" href="../../bower_components/neon-animation/animations/slide-left-animation.html">
    <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../../bower_components/neon-animation/neon-animation-runner-behavior.html">
    <link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../../bower_components/neon-animation/animations/fade-in-animation.html">
    
    <!--Vaadin elements-->
    <link rel="import" href="../../bower_components/vaadin-icons/vaadin-icons.html">
    
    <!--Iron elements-->
    <link rel="import" href="../../bower_components/iron-icon/iron-icon.html" async>
    <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
    
    <!--UNUSED DIRECTLY-->
    <link rel="import" href="../../bower_components/polymerfire/firebase-app.html">
    
    <!--
    `app-gallery`
    
    
    @demo demo/index.html 
    -->
    
    <dom-module id="app-gallery">
        <template>
            <style>
                :host {
                    display: block;
                }
            </style>
            <paper-button></paper-button>
            <neon-animated-pages entry-animation="slide-down-animation" exit-animation="slide-left-animation">
    
            </neon-animated-pages>
            <iron-icon icon="vaadin-icons:check"></iron-icon>
            <paper-icon-button icon="menu"></paper-icon-button>
        </template>
    
        <script>
    
            Polymer({
    
                is: 'app-gallery',
                behaviors: [
                    Polymer.NeonAnimationRunnerBehavior,
                    Polymer.NeonAnimatableBehavior,
                ]
                ,
                properties: {
                    animationConfig: {
                        value: function () {
                            return {
                                'entry': [{
                                    name: 'slide-down-animation',
                                    node: this
                                }, {
                                    name: 'fade-in-animation',
                                    node: this,
                                    timing: {delay: 50}
                                }]
                            }
                        }
                    }
                },
    
            });
        </script>
    </dom-module>

    ##Options In most cases you will be fine without additional configuration.

    ####Additional arguments polymer-imports command requires one mandatory argument - path for a file to inspect for imports.

    You can also path two more arguments (order does not matter):

    • Path to the config file which should be .json file with configuration
    • Path to the root directory of your project. If you passed this path, it is not required to have polymer.json in root dir.

    ####Config file Config file can be .json file with any name and any set of properties from the default configuration, which looks like this:

    {
        "rootDir": "",
        "bowerFolderName": "bower_components",
        "ignoredFolders": ["test", "demo"],
        "ignoredComponents": [],
        "attributes": [
            "effects",
            "entry-animation",
            "exit-animation"
        ],
        "resolve: {
            "iron-flex": "iron-flex-layout-classes",
            "iron-flex-reverse": "iron-flex-layout-classes",
            "iron-flex-alignment": "iron-flex-layout-classes",
            "iron-flex-factors": "iron-flex-layout-classes",
            "iron-positioning": "iron-flex-layout-classes"
        }
    }
    

    You can use this default config file as an example for your own. If you define a property in your config it will OVERRIDE the same property in the default configuration.

    ####Ignore import If you don't want an element to be auto imported (you use lazy loading), add noimport attribute like this: <paper-button noimport></paper-button>

    You can also avoid element to be imported by adding its name to config (if you use config file) to "ignoredComponents" property like this "ignoredComponents": ["paper-button"]

    Importance of polymer.json file

    If you did not provide root directory path of your project as second or third argument or rootDir in config file it is important to have polymer.json file in the root directory of your polymer project. This script will search for polymer.json file when determining the root of your project.

    ##Keypoints

    If you have other scripts that run inside <script> snippet where Polymer({}) initialization happens, it is possible that polymer-auto-import will fail to check behaviors and animations there. For example

    <script>
    // this will lead to errors when parsing snippet
    var lib = new Lib();
    
    Polymer({
       is: "my-component"
    });
    
    </script>
    

    the solution is to separate <script> snippets and have one only for Polymer initialization like this:

    <script>
      // this is OK
      var lib = new Lib();
    </script>
    
    <script>
    Polymer({
       is: "my-component"
    });
    </script>
    

    ##Requirements:

    • required web components should be installed with bower before use
    • node v4 +

    ##Suggested usage I recommend to use this script as an external tool with your IDE.

    ###WebStorm Example Create a new external tool

    Create a new key binding

    About

    Script that checks web components used in your .html file and tries to import definitions automatically

    Resources

    License

    Stars

    Watchers

    Forks

    Packages

    No packages published