0.0.5 • Published 8 years ago
thin-polymer v0.0.5
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
0.0.5
8 years ago