https://github.com/t2ym/thin-polymer
Thin Polymer syntax for ES6
https://github.com/t2ym/thin-polymer
Last synced: 6 months ago
JSON representation
Thin Polymer syntax for ES6
- Host: GitHub
- URL: https://github.com/t2ym/thin-polymer
- Owner: t2ym
- License: other
- Created: 2016-01-26T05:03:59.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-13T03:43:48.000Z (over 10 years ago)
- Last Synced: 2025-10-15T15:05:44.314Z (9 months ago)
- Language: HTML
- Size: 2.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# thin-polymer
Thin Polymer syntax for ES6 (experimental)
[Demo](https://t2ym.github.io/thin-polymer/components/thin-polymer/demo/) on GitHub Pages
## Install
```
bower install --save thin-polymer
```
## Import
```html
```
## Thinner Syntax
### Pure ES5
Omit `` and `Polymer()`
```html
{{label}}
Prototype = {
is: 'es5-element1',
properties: {
label: {
type: String,
value: 'label'
}
},
attached: function () {
this.label = this.label.toUpperCase();
}
}
```
### Partial ES6
ES6 template string for `template` property and ES6 shorthand method.
```html
Prototype = {
is: 'es5-element2',
template: `
<span>{{label}}</span>
`,
properties: {
label: {
type: String,
value: 'label'
}
},
attached () {
this.label = this.label.toUpperCase();
}
}
```
### ES6 class with beforeRegister
ES6 class with beforeRegister() callback.
```html
{{label}}
Prototype = class Es6Element1 {
beforeRegister () {
this.is = 'es6-element1';
this.properties = {
label: {
type: String,
value: 'label'
}
};
}
attached () {
this.label = this.label.toUpperCase();
}
}
```
### ES6 class with constructor
ES6 class with initialization at constructor.
Automatic un-camel-casing from class name.
```html
'use strict';
Prototype = class Es6Element2 {
constructor () {
this.template = `
<span>{{label}}</span>
`;
this.properties = {
label: {
type: String,
value: 'label'
}
};
}
attached () {
this.label = this.label.toUpperCase();
}
}
```
### ES7 class property
ES7 class properties for initialization.
```html
// Babel tranpilation required
Prototype = class Es7Element2 {
template = `
<span>{{label}}</span>
`;
properties = {
label: {
type: String,
value: 'label'
}
};
attached () {
this.label = this.label.toUpperCase();
}
}
```
### Equivalent ES5 Polymer syntax
```html
{{label}}
Polymer({
is: 'es5-element',
properties: {
label: {
type: String,
value: 'label'
}
},
attached: function () {
this.label = this.label.toUpperCase();
}
});
```
## Compatibility
- Release 0.0.5 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 44 | Run | Run | Run | Run | Run |
| Safari 9 | Run | Run | Run | Run | Run |
| 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 44 | Run | Run | Not Run | Not Run | Not Run |
| Safari 9 | Run | Run | Run | Run | Not Run |
| Mobile Chrome 48 | Run | Run | Run | Run | Not Run |
- Importing
Browsers with HTML Import polyfill, that is, non-Chrome browsers, have to wrap
`` 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](https://github.com/t2ym/thin-polymer/blob/master/LICENSE.md)