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