Introduce examples for mixins and string templates

examples/polymer-cli/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  globals: {
+    Polymer: true,
+    customElements: true,
+    CustomEvent: true,
+  },
+};

examples/polymer-cli/src/separated-button/separated-button.html

@@ -0,0 +1,17 @@
+<link rel="import" href="../../../../node_modules/@polymer/polymer/polymer-element.html">
+
+<dom-module id="separated-button">
+  <template>
+    <button on-click="handleTap">
+      [[title]] [[counter]]
+    </button>
+  </template>
+  <script>
+    import { separatedButton } from './separated-button';
+
+    class PlaygroundButton extends separatedButton(Polymer.Element) {
+    }
+
+    customElements.define(PlaygroundButton.is, PlaygroundButton);
+  </script>
+</dom-module>

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();
+    }
+  };

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' }));
+    }
+  };

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)
           </div>
         `;
   });
+
+storiesOf('Element definition types', module)
+  .add('separated js', () => '<separated-button title="Click me!"></separated-button>')
+  .add('string template', () => new StringTemplateButton());

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 '<button on-click="handleTap">[[title]]: [[counter]]</button>';
+  }
+
+  handleTap() {
+    this.counter += 1;
+  }
+}
+
+customElements.define(StringTemplateButton.is, StringTemplateButton);