npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

thin-polymer

0.0.5 • Public • Published

thin-polymer

Thin Polymer syntax for ES6 (experimental)

Demo on GitHub Pages

Install

    bower install --save thin-polymer

Import

    <link rel="import" href="/path/to/bower_components/thin-polymer/thin-polymer.html">

Thinner Syntax

Pure ES5

Omit <dom-module> and Polymer()

    <template id="es5-element1">
      <span>{{label}}</span>
    </template>
    <script>
    Prototype = {
      is: 'es5-element1',
      properties: {
        label: {
          type: String,
          value: 'label'
        }
      },
      attached: function () {
        this.label = this.label.toUpperCase();
      }
    }
    </script> 

Partial ES6

ES6 template string for template property and ES6 shorthand method.

    <script>
    Prototype = {
      is: 'es5-element2',
      template: `
        <span>{{label}}</span>
      `,
      properties: {
        label: {
          type: String,
          value: 'label'
        }
      },
      attached () {
        this.label = this.label.toUpperCase();
      }
    }
    </script> 

ES6 class with beforeRegister

ES6 class with beforeRegister() callback.

    <template id="es6-element1">
      <span>{{label}}</span>
    </template>
    <script>
    Prototype = class Es6Element1 {
      beforeRegister () {
        this.is = 'es6-element1';
        this.properties = {
          label: {
            type: String,
            value: 'label'
          }
        };
      }
      attached () {
        this.label = this.label.toUpperCase();
      }
    }
    </script> 

ES6 class with constructor

ES6 class with initialization at constructor. Automatic un-camel-casing from class name.

    <script>
    'use strict';
 
    Prototype = class Es6Element2 {
      constructor () {
        this.template = `
          <span>{{label}}</span>
        `;
        this.properties = {
          label: {
            type: String,
            value: 'label'
          }
        };
      }
      attached () {
        this.label = this.label.toUpperCase();
      }
    }
    </script> 

ES7 class property

ES7 class properties for initialization.

    <script>
    // Babel tranpilation required
    Prototype = class Es7Element2 {
      template = `
        <span>{{label}}</span>
      `;
      properties = {
        label: {
          type: String,
          value: 'label'
        }
      };
      attached () {
        this.label = this.label.toUpperCase();
      }
    }
    </script> 

Equivalent ES5 Polymer syntax

    <dom-module id="es5-element">
      <template>
        <span>{{label}}</span>
      </template>
      <script>
      Polymer({
        is: 'es5-element',
        properties: {
          label: {
            type: String,
            value: 'label'
          }
        },
        attached: function () {
          this.label = this.label.toUpperCase();
        }
      });
      </script> 
    </dom-module>

Compatibility

  • Release 0.0.3 Compatibility Table

Babel Transpilation:

Browser Pure ES5 Partial ES6 ES6 class ES6 constructor ES7 property
Chrome 48 Run Run Run Run Run
Microsoft Edge Run Run Run Run Run
IE 11 Run Run Run Run Run
Firefox 43 Run Run Run Run Run
Safari N/A N/A N/A N/A N/A
Mobile Chrome 48 Run Run Run Run Run

Native:

Browser Pure ES5 Partial ES6 ES6 class ES6 constructor ES7 property
Chrome 48 Run Run Run Run Not Run
Microsoft Edge Run Run Not Run Not Run Not Run
IE 11 Run Not Run Not Run Not Run Not Run
Firefox 43 Run Run Not Run Not Run Not Run
Safari N/A N/A N/A N/A N/A
Mobile Chrome 48 Run Run Run Run Not Run
  • Importing

Browsers with HTML Import polyfill, that is, non-Chrome browsers, have to wrap <script src=""></script> by HTML import so that thin-polymer is loaded before the scripts.

Demo Transpilation by Babel

    npm install && bower install
    # Source demo/native/; Dest demo/babel/
    gulp demo

License

BSD-2-Clause

install

npm i thin-polymer

Downloadsweekly downloads

2

version

0.0.5

license

BSD-2-Clause

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability