diff --git a/examples/polymer-cli/.eslintrc.js b/examples/polymer-cli/.eslintrc.js new file mode 100644 index 000000000000..531436200f94 --- /dev/null +++ b/examples/polymer-cli/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + globals: { + Polymer: true, + customElements: true, + CustomEvent: true, + }, +}; diff --git a/examples/polymer-cli/src/separated-button/separated-button.html b/examples/polymer-cli/src/separated-button/separated-button.html new file mode 100644 index 000000000000..8fc31ada6849 --- /dev/null +++ b/examples/polymer-cli/src/separated-button/separated-button.html @@ -0,0 +1,17 @@ + + + + + + diff --git a/examples/polymer-cli/src/separated-button/separated-button.js b/examples/polymer-cli/src/separated-button/separated-button.js new file mode 100644 index 000000000000..5fbc2d615a04 --- /dev/null +++ b/examples/polymer-cli/src/separated-button/separated-button.js @@ -0,0 +1,26 @@ +import { uselessMixin } from './useless-mixin'; + +export const separatedButton = superClass => + class SeparatedButton extends uselessMixin(superClass) { + static get is() { + return 'separated-button'; + } + + static get properties() { + return { + title: { + type: String, + value: 'Click me:', + }, + counter: { + type: Number, + value: 0, + }, + }; + } + + async handleTap() { + this.counter += await Promise.resolve(1); + this.someMethod(); + } + }; diff --git a/examples/polymer-cli/src/separated-button/useless-mixin.js b/examples/polymer-cli/src/separated-button/useless-mixin.js new file mode 100644 index 000000000000..e7e2748ee3a8 --- /dev/null +++ b/examples/polymer-cli/src/separated-button/useless-mixin.js @@ -0,0 +1,12 @@ +export const uselessMixin = superClass => + class UselessMixin extends superClass { + constructor() { + super(); + + this.eventType = 'test'; + } + + someMethod() { + this.dispatchEvent(new CustomEvent(this.eventType, { detail: 'test' })); + } + }; diff --git a/examples/polymer-cli/src/stories/index.js b/examples/polymer-cli/src/stories/index.js index 7c80b84be23e..59533f131209 100644 --- a/examples/polymer-cli/src/stories/index.js +++ b/examples/polymer-cli/src/stories/index.js @@ -15,7 +15,9 @@ import { import { document } from 'global'; import '../polymer-playground-app.html'; import '../playground-button.html'; +import '../separated-button/separated-button.html'; import './storybook-welcome-to-polymer.html'; +import { StringTemplateButton } from '../string-template-button'; storiesOf('Welcome', module).add( 'Welcome', @@ -132,3 +134,7 @@ storiesOf('Addon Knobs', module) `; }); + +storiesOf('Element definition types', module) + .add('separated js', () => '') + .add('string template', () => new StringTemplateButton()); diff --git a/examples/polymer-cli/src/string-template-button.js b/examples/polymer-cli/src/string-template-button.js new file mode 100644 index 000000000000..362e2d50735c --- /dev/null +++ b/examples/polymer-cli/src/string-template-button.js @@ -0,0 +1,28 @@ +export class StringTemplateButton extends Polymer.Element { + static get is() { + return 'string-template-button'; + } + + static get properties() { + return { + title: { + type: String, + value: 'Wow, I am inline', + }, + counter: { + type: Number, + value: 0, + }, + }; + } + + static get template() { + return ''; + } + + handleTap() { + this.counter += 1; + } +} + +customElements.define(StringTemplateButton.is, StringTemplateButton);