Merge pull request #2537 from Polymer/stack-blitz

Stackblitz demos for 3.x elements

Author: Elliott Marquez

app/3.0/start/quick-tour.md

@@ -34,8 +34,8 @@ of the samples in an interactive sandbox.
 Tap the buttons following each feature to learn more.
 
 **The Plunker samples won't work in Internet Explorer 11.** These code samples need to
-be transpiled from ES6 to ES5 to work in Internet Explorer. This is usually done as a 
-build step. At the moment, we don't have a way to transpile the interactive samples on 
+be transpiled from ES6 to ES5 to work in Internet Explorer. This is usually done as a
+build step. At the moment, we don't have a way to transpile the interactive samples on
 Plunker. The samples will work in browsers that support ES6 - for example, the latest
 versions of Chrome, Edge, Firefox and Safari.
 {: .alert .alert-info }
@@ -49,7 +49,7 @@ an element name with a class, so you can add properties and methods to your cust
 element. The custom element's name **must start with an ASCII letter and
 contain a dash (-)**.
 
-<demo-tabs selected="0" name="qt-1-register" src="http://plnkr.co/edit/FYhDkkAuD4TEnsgeZuc7?p=preview">
+<demo-tabs selected="0" name="qt-1-register" editor-open-file="custom-element.js" project-path="/3.0/start/samples/custom-element">
   <paper-tab slot="tabs">custom-element.js</paper-tab>
   <div>
 
@@ -66,13 +66,12 @@ contain a dash (-)**.
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/custom-element/index.html" width="100%" height="40"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
-* Try modifying the contents of `this.textContent`. 
+* Try modifying the contents of `this.textContent`.
 * If you’re familiar with your browser’s developer tools, try printing the
-  custom element’s `tagName` property to the console. 
+  custom element’s `tagName` property to the console.
   Hint: add `console.log(this.tagName);` to the constructor method!
 
 This sample uses a lifecycle callback
@@ -93,7 +92,7 @@ You can use the `ready` callback for one-time initialization work after the elem
 Many elements include some internal DOM nodes to implement the element's UI and behavior.
 You can use Polymer's DOM templating to create a shadow DOM tree for your element.
 
-<demo-tabs selected="0" name="qt-2-shadow-dom" src="http://plnkr.co/edit/IvBQDkwRlLuG6P1fIMLr?p=preview">
+<demo-tabs selected="0" name="qt-2-shadow-dom" editor-open-file="dom-element.js" project-path="/3.0/start/samples/dom-element">
   <paper-tab slot="tabs">dom-element.js</paper-tab>
   <div>
 
@@ -110,7 +109,6 @@ You can use Polymer's DOM templating to create a shadow DOM tree for your elemen
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/dom-element/index.html" width="100%" height="40"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
@@ -128,7 +126,7 @@ so they render as if they were inserted into the shadow DOM tree.
 This example creates a simple tag that decorates an image by wrapping it
 with a styled `<div>` tag.
 
-<demo-tabs selected="0" name="qt-3-compose" src="http://plnkr.co/edit/RhauVxmC96dSKRgSn04Y?p=preview">
+<demo-tabs selected="0" name="qt-3-compose" editor-open-file="picture-frame.js" project-path="/3.0/start/samples/picture-frame">
   <paper-tab slot="tabs">picture-frame.js</paper-tab>
   <div>
 
@@ -145,7 +143,6 @@ with a styled `<div>` tag.
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/picture-frame/index.html" width="100%" height="60"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
@@ -168,7 +165,7 @@ Data binding is a great way to quickly propagate changes in your element and red
 You can bind properties in your component using the "double-mustache" syntax (`{%raw%}{{}}{%endraw%}`).
 The `{%raw%}{{}}{%endraw%}` is replaced by the value of the property referenced between the brackets.
 
-<demo-tabs selected="0" name="qt-4-data-binding" src="http://plnkr.co/edit/dobBH1EwNvnymIrs0yMd?p=preview">
+<demo-tabs selected="0" name="qt-4-data-binding" editor-open-file="name-tag.js" project-path="/3.0/start/samples/name-tag">
   <paper-tab slot="tabs">name-tag.js</paper-tab>
   <div>
 
@@ -185,14 +182,13 @@ The `{%raw%}{{}}{%endraw%}` is replaced by the value of the property referenced
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/name-tag/index.html" width="100%" height="40"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
 * Try editing the value of the `owner` property.
-* Try adding another property and binding it in your component. 
+* Try adding another property and binding it in your component.
   Hint: Add `this.propertyName = 'Property contents';` to the constructor
-  and add something like `<p>{{propertyName}}</p>` to the element’s template.  
+  and add something like `<p>{{propertyName}}</p>` to the element’s template.
 
 <p><a href="/3.0/docs/devguide/data-binding" class="blue-button">
 Learn more: data binding</a></p>
@@ -206,7 +202,7 @@ values, configuring properties from markup, observing property changes, and more
 The following example declares the `owner` property from the last example.
 It also shows configuring the owner property from markup in `index.html`.
 
-<demo-tabs selected="0" name="qt-5-declare-property" src="http://plnkr.co/edit/nnEna7Sp3HoT8ndablOp?p=preview">
+<demo-tabs selected="0" name="qt-5-declare-property" editor-open-file="configurable-name-tag.js" project-path="/3.0/start/samples/configurable-name-tag">
   <paper-tab slot="tabs">configurable-name-tag.js</paper-tab>
   <div>
 
@@ -223,7 +219,6 @@ It also shows configuring the owner property from markup in `index.html`.
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/configurable-name-tag/index.html" width="100%" height="40"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
@@ -239,10 +234,10 @@ In addition to text content, you can bind to an element's _properties_ (using
 can optionally support two-way binding, using curly braces (`property-name="{{binding}}"`).
 
 This example uses two-way binding: binding the value of a property on a parent element to a property
-on the child element. When the child element updates the property, the changes are bound to the 
+on the child element. When the child element updates the property, the changes are bound to the
 parent element.
 
-<demo-tabs selected="0" name="qt-6-bind-property" src="http://plnkr.co/edit/ixopefPZUV96R6SzEJun?p=preview">
+<demo-tabs selected="0" name="qt-6-bind-property" editor-open-file="parent-element.js" project-path="/3.0/start/samples/parent-element">
   <paper-tab slot="tabs">parent-element.js</paper-tab>
   <div>
 
@@ -267,21 +262,20 @@ parent element.
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/parent-element/index.html" width="100%" height="100"></iframe>
 </demo-tabs>
 
 **Note:** `<child-element>` exposes its property to be used in two-way binding by setting the
-`reflectToAttribute` and `notify` attributes when the property is declared. 
+`reflectToAttribute` and `notify` attributes when the property is declared.
 {: .alert .alert-info }
 
 <p><a href="/3.0/docs/devguide/data-binding#two-way-bindings" class="blue-button">
 Learn more: Two-way binding</a></p>
 
-<!-- 
+<!--
 This example uses two-way binding: binding the value of a custom input element (`iron-input`)
 to the element's `owner` property, so it's updated as the user types.
 
-<demo-tabs selected="0" name="qt-6-bind-property" src="http://plnkr.co/edit/VdazK3ub45MrwYU1GTRM?p=preview">
+<demo-tabs selected="0" name="qt-6-bind-property" editor-open-file="editable-name-tag.js" project-path="/3.0/start/samples/editable-name-tag"">
   <paper-tab slot="tabs">editable-name-tag.js</paper-tab>
   <div>
 
@@ -298,7 +292,6 @@ to the element's `owner` property, so it's updated as the user types.
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/editable-name-tag/index.html" width="100%" height="100"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
@@ -314,7 +307,7 @@ data binding and input validation.
 
 The template repeater (`dom-repeat`) is a specialized template that binds to an array. It creates one instance of the template's contents for each item in the array.
 
-<demo-tabs selected="0" name="qt-7-dom-repeat" src="http://plnkr.co/edit/9qFNzWTiytFEqJjRNxNi?p=preview">
+<demo-tabs selected="0" name="qt-7-dom-repeat" editor-open-file="employee-list.js" project-path="/3.0/start/samples/employee-list">
   <paper-tab slot="tabs">employee-list.js</paper-tab>
   <div>
 
@@ -331,16 +324,15 @@ The template repeater (`dom-repeat`) is a specialized template that binds to an
 ```
 
   </div>
-  <iframe slot="results" frameborder="0" src="samples/employee-list/index.html" width="100%" height="100"></iframe>
 </demo-tabs>
 
 Try it out in **Plunker**:
 * Change the first and last names inside this.employees
 * Add another employee by inserting the following item into the array definition:<br/>
   ```js
-     {first: 'Shawna', last: 'Williams'} 
+     {first: 'Shawna', last: 'Williams'}
   ```
-  
+
 Don't forget to make sure your commas are correct!
 
 <p><a href="/3.0/docs/devguide/templates" class="blue-button">

app/3.0/start/samples/configurable-name-tag/configurable-name-tag.js

@@ -1,4 +1,4 @@
-import {Element as PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.7/polymer-element.js'
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'
 
 class ConfigurableNameTag extends PolymerElement {
   static get properties () {
@@ -9,7 +9,7 @@ class ConfigurableNameTag extends PolymerElement {
           value: 'Daniel',
       }
     };
-  } 
+  }
   static get template () {
     return html`
       <!-- bind to the "owner" property -->

app/3.0/start/samples/configurable-name-tag/index.html

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script type="module" src="configurable-name-tag.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
   </head>
   <body>
     <!-- configure a property from markup by setting
-         the corresponding attribute:                 
+         the corresponding attribute:
     -->
     <configurable-name-tag owner="Scott"></configurable-name-tag>
     <!--
-      TODO: Try editing the initial value of `owner` in 
+      TODO: Try editing the initial value of `owner` in
       index.html. Observe how this sets the property directly
       from your HTML.
     -->

app/3.0/start/samples/configurable-name-tag/index.js

@@ -0,0 +1 @@
+import './configurable-name-tag.js';

app/3.0/start/samples/configurable-name-tag/manifest.json

@@ -0,0 +1,11 @@
+{
+  "files": [
+    "configurable-name-tag.js",
+    "index.html",
+    "index.js"
+  ],
+  "dependencies": {
+    "@polymer/polymer": "next",
+    "@webcomponents/webcomponentsjs": "^1.0.0"
+  }
+}

app/3.0/start/samples/custom-element/custom-element.js

@@ -1,8 +1,7 @@
-import {Element as PolymerElement} from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.7/polymer-element.js'
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 
 // Define the class for a new element called custom-element
 class CustomElement extends PolymerElement {
-  
   constructor() {
     super();
     this.textContent = 'I\'m a custom-element.';
@@ -13,6 +12,6 @@ customElements.define('custom-element', CustomElement);
 
 /*
   If you’re familiar with your browser’s developer tools, try printing the
-  custom element’s `tagName` property to the console. 
+  custom element’s `tagName` property to the console.
   Hint: add `console.log(this.tagName);` to the constructor method!
 */

app/3.0/start/samples/custom-element/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script type="module" src="custom-element.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
   </head>
-  <body></body>
+  <body>
     <custom-element></custom-element>
   </body>
-</html>
+</html>

app/3.0/start/samples/custom-element/index.js

@@ -0,0 +1 @@
+import './custom-element.js';

app/3.0/start/samples/custom-element/manifest.json

@@ -0,0 +1,11 @@
+{
+  "files": [
+    "custom-element.js",
+    "index.html",
+    "index.js"
+  ],
+  "dependencies": {
+    "@polymer/polymer": "next",
+    "@webcomponents/webcomponentsjs": "^1.0.0"
+  }
+}

app/3.0/start/samples/dom-element/dom-element.js

@@ -1,16 +1,16 @@
-import {Element as PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.7/polymer-element.js'
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'
 
 // Define the class for a new element called custom-element
 class DomElement extends PolymerElement {
-  
+
   static get template () {
     return html`
       <p>I'm a DOM element. This is my shadow DOM!</p>
-      
-      <!-- TODO: Try adding some other html elements inside the 
-           template. For example, add <h1>A heading!</h1> or 
+
+      <!-- TODO: Try adding some other html elements inside the
+           template. For example, add <h1>A heading!</h1> or
            <a href="stuff.html">A link!</a>
-      --> 
+      -->
     `;
   }
 }

app/3.0/start/samples/dom-element/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>  
-    <script type="module" src="dom-element.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
   </head>
-  <body></body>
+  <body>
     <dom-element></dom-element>
   </body>
 </html>

app/3.0/start/samples/dom-element/index.js

@@ -0,0 +1 @@
+import './dom-element.js';

app/3.0/start/samples/dom-element/manifest.json

@@ -0,0 +1,11 @@
+{
+  "files": [
+    "dom-element.js",
+    "index.html",
+    "index.js"
+  ],
+  "dependencies": {
+    "@polymer/polymer": "next",
+    "@webcomponents/webcomponentsjs": "^1.0.0"
+  }
+}

app/3.0/start/samples/editable-name-tag/editable-name-tag.js

@@ -1,5 +1,5 @@
-import {Element as PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.7/polymer-element.js';
-import 'https://unpkg.com/@polymer/iron-input@3.0.0-pre.7/iron-input.js';
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import '@polymer/iron-input/iron-input.js';
 
 class EditableNameTag extends PolymerElement {
   static get properties () {
@@ -14,13 +14,13 @@ class EditableNameTag extends PolymerElement {
     return html`
       <!-- bind to the 'owner' property -->
       <p>This is <b>[[owner]]</b>'s name-tag element.</p>
-    
+
       <!-- iron-input exposes a two-way bindable input value -->
       <iron-input bind-value="{{owner}}">
-        <!-- 
+        <!--
           TODO: Edit the placeholder text to see two-way data
           binding at work.
-        --> 
+        -->
       <input is="iron-input" placeholder="Your name here...">
       </iron-input>
     `;

app/3.0/start/samples/editable-name-tag/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script type="module" src="editable-name-tag.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
   </head>
   <body>
     <editable-name-tag></editable-name-tag>

app/3.0/start/samples/editable-name-tag/index.js

@@ -0,0 +1 @@
+import './editable-name-tag.js';

app/3.0/start/samples/editable-name-tag/manifest.json

@@ -0,0 +1,12 @@
+{
+  "files": [
+    "editable-name-tag.js",
+    "index.html",
+    "index.js"
+  ],
+  "dependencies": {
+    "@polymer/polymer": "next",
+    "@webcomponents/webcomponentsjs": "^1.0.0",
+    "@polymer/iron-input": "next"
+  }
+}