├── .firebaserc
├── .gitignore
├── README.md
├── firebase.json
├── index.html
├── manifest.json
├── manifest
    ├── favicon.ico
    ├── icon-144x144.png
    ├── icon-192x192.png
    ├── icon-48x48.png
    ├── icon-512x512.png
    ├── icon-72x72.png
    └── icon-96x96.png
├── package-lock.json
├── package.json
├── polymer.json
├── robots.txt
└── src
    ├── lazy-element.js
    └── start-lit-element.js


/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "start-lit-element"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .DS_Store
4 | .firebase
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # start-lit-element
  2 | 
  3 | A simple Hello World for LitElement.
  4 | 
  5 | https://start-lit-element.firebaseapp.com/
  6 | 
  7 | * [Quick start](#quick-start)
  8 | * [Detailed setup info](#detailed-setup-info)
  9 | * [Browser compatibility and performance](#browser-compatibility-and-performance)
 10 | 
 11 | ## Quick start
 12 | 
 13 | ```
 14 | npm install -g polymer-cli
 15 | git clone https://github.com/PolymerLabs/start-lit-element
 16 | cd start-lit-element
 17 | npm install
 18 | polymer serve
 19 | ```
 20 | 
 21 | ## Detailed setup info
 22 | 
 23 | * [Clone](#clone-this-repo)
 24 | * [Serve](#start-a-dev-server)
 25 | * [Setup](#set-up-new-app)
 26 | * [Build](#build-for-production-and-serve-locally)
 27 | * [Deploy](#deploy)
 28 | 
 29 | ### Clone this repo
 30 | 
 31 | ```
 32 | git clone https://github.com/PolymerLabs/start-lit-element
 33 | ```
 34 | 
 35 | ### Start a dev server
 36 | 
 37 | ```
 38 | npm install -g polymer-cli
 39 | cd start-lit-element
 40 | npm install
 41 | polymer serve
 42 | ```
 43 | 
 44 | ### Set up new app
 45 | 
 46 | 1. In index.html, update metadata stuff:
 47 | 
 48 | ```html
 49 | <!-- Change stuff here for your app -->
 50 | <meta name="description" content="start-lit-element">
 51 | <meta name="theme-color" content="#ffffff">
 52 | <title>start-lit-element</title>
 53 | ```
 54 | 
 55 | 2. In index.html, uncomment the service worker registration code:
 56 | 
 57 | ```html
 58 | <!-- Register service worker if supported. -->
 59 | <!--
 60 | <script>
 61 |   if ('serviceWorker' in navigator) {
 62 |     navigator.serviceWorker.register('/service-worker.js');
 63 |   }
 64 | </script> -->
 65 | ```
 66 | 
 67 | 3. In manifest.json, update the app description, etc:
 68 | 
 69 | ```json
 70 | "description": "start-lit-element",
 71 | "start_url": "index.html",
 72 | "name": "start-lit-element",
 73 | "short_name": "start-lit-el",
 74 | "background_color": "#ffffff",
 75 | "theme_color":"#ffffff",
 76 | ```
 77 | 
 78 | 4. Update your package.json if required
 79 | 
 80 | 5. In polymer.json, update your shell & entrypoint if required
 81 | 
 82 | ```
 83 | "shell": "src/start-lit-element.js",
 84 | "entrypoint": "index.html",
 85 | ```
 86 | 
 87 | 6. Remember to update firebase.json and .firebaserc for a real deployment!
 88 | 
 89 | ### Build for production and serve locally
 90 | 
 91 | Build your project and serve the build locally:
 92 | 
 93 | ```
 94 | polymer build
 95 | polymer serve build/default
 96 | ```
 97 | 
 98 | If you changed significant stuff (e.g. filenames, folder structure, installed other modules, etc), edit your polymer.json file to configure your build correctly. See the [Polymer CLI documentation](https://www.polymer-project.org/3.0/docs/tools/polymer-json) for more info.
 99 | 
100 | ### Deploy
101 | 
102 | 1.  [Set up Firebase CLI tools](https://firebase.google.com/docs/cli/).
103 | 2.  [Create a new Firebase project](https://firebase.google.com/console).
104 | 3.  Update firebase.json and .firebaserc with your own app details.   
105 | 4.  Deploy.
106 | 
107 |     ```
108 |     firebase deploy
109 |     ```
110 | 
111 | See the [Firebase CLI Reference](https://firebase.google.com/docs/cli) for more info.
112 | 
113 | ## Browser compatibility and performance
114 | 
115 | At the time of writing (Dec 11 2018) this app was scoring 100% on all Lighthouse audits when deployed, and was working fine on the most recent versions of Chrome, Safari, Firefox, and Edge.
116 | 
117 | Let me know of any [issues](https://github.com/PolymerLabs/start-lit-element/issues).
118 | 
119 | ## Known issues
120 | 
121 | (All browsers) Dynamic `import` warning:
122 | 
123 | ```
124 | Could not resolve module specifier "require" in file "..src/start-lit-element.js".
125 | ```
126 | 
127 | See https://github.com/Polymer/tools/issues/131.
128 | 
129 | (IE11 and Edge) Warning due to `<!--!` in built HTML:
130 | 
131 | ```
132 | Unexpected character: U+0021 EXCLAMATION MARK (!)
133 | Unexpected character in comment end. Expected "-->"
134 | ```
135 | 
136 | See https://github.com/Polymer/polymer-cli/issues/779.
137 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "build/default",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*"
 7 |     ],
 8 |     "rewrites": [
 9 |       {
10 |         "source": "**",
11 |         "destination": "/index.html"
12 |       }
13 |     ]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | <head>
 5 |   <!-- Register service worker if supported. -->
 6 |   <!--
 7 |   <script>
 8 |     if ('serviceWorker' in navigator) {
 9 |       navigator.serviceWorker.register('/service-worker.js');
10 |     }
11 |   </script>
12 |   -->
13 |   
14 |   <!-- Load polyfills -->
15 |   <script 
16 |     src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
17 |     defer>
18 |   </script> 
19 | 
20 |   <!-- Load components via WebComponents.waitFor -->
21 |   <script type="module">
22 |     window.WebComponents = window.WebComponents || { 
23 |       waitFor(cb){ addEventListener('WebComponentsReady', cb) }
24 |     } 
25 |     WebComponents.waitFor(async () => { 
26 |       import('./src/start-lit-element.js');
27 |     });
28 |   </script>
29 |   
30 |   <!-- Change stuff here for your app -->
31 |   <meta name="description" content="start-lit-element">
32 |   <meta name="theme-color" content="#ffffff">
33 |   <title>start-lit-element</title>
34 |   
35 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
36 |   <link rel="manifest" href="./manifest.json">
37 |   <link rel="shortcut icon" href="/manifest/favicon.ico">
38 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
39 |   <meta charset="UTF-8">
40 | </head>
41 | <body>
42 | 
43 |   <!-- 
44 |     To configure starting state of the checkbox from markup: 
45 |     <start-lit-element pie="true"> 
46 |   -->
47 |   
48 |   <start-lit-element>
49 |     <!-- Placeholders to improve time to first paint -->
50 |     <h1>Start LitElement!</h1>
51 |     <p>Hello World from LitElement</p>
52 | 
53 |     <!-- Check for JavaScript -->
54 |     <p id="jsyes"></p>
55 |     <script type="text/javascript">
56 |       document.getElementById('jsyes').innerHTML='Loading...';
57 |     </script>
58 |     <noscript>
59 |       Could not render the custom element. Check that JavaScript is enabled.
60 |     </noscript>
61 |   </start-lit-element>
62 | </body>
63 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "display": "fullscreen",
 3 |   "version": "1.0",
 4 |   "manifest_version": 1,
 5 | 
 6 |   "description": "start-lit-element",
 7 |   "start_url": "index.html",
 8 |   "name": "start-lit-element",
 9 |   "short_name": "start-lit-el",
10 |   "background_color": "#ffffff",
11 |   "theme_color":"#ffffff",
12 |   
13 |   "icons": [{
14 |     "src": "./manifest/icon-48x48.png",
15 |     "sizes": "48x48",
16 |     "type": "image/png"
17 |   }, {
18 |     "src": "./manifest/icon-72x72.png",
19 |     "sizes": "72x72",
20 |     "type": "image/png"
21 |   }, {
22 |     "src": "./manifest/icon-96x96.png",
23 |     "sizes": "96x96",
24 |     "type": "image/png"
25 |   }, {
26 |     "src": "./manifest/icon-144x144.png",
27 |     "sizes": "144x144",
28 |     "type": "image/png"
29 |   }, {
30 |     "src": "./manifest/icon-192x192.png",
31 |     "sizes": "192x192",
32 |     "type": "image/png"
33 |   }, {
34 |     "src": "./manifest/icon-512x512.png",
35 |     "sizes": "512x512",
36 |     "type": "image/png"
37 |   }]
38 | }
39 | 


--------------------------------------------------------------------------------
/manifest/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/favicon.ico


--------------------------------------------------------------------------------
/manifest/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-144x144.png


--------------------------------------------------------------------------------
/manifest/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-192x192.png


--------------------------------------------------------------------------------
/manifest/icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-48x48.png


--------------------------------------------------------------------------------
/manifest/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-512x512.png


--------------------------------------------------------------------------------
/manifest/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-72x72.png


--------------------------------------------------------------------------------
/manifest/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/manifest/icon-96x96.png


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "start-lit-element",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "@polymer/lit-element": {
 8 |       "version": "0.6.4",
 9 |       "resolved": "https://registry.npmjs.org/@polymer/lit-element/-/lit-element-0.6.4.tgz",
10 |       "integrity": "sha512-5EsrZJebIE1plULhMtC21zpryzJNFxM63/XY7G2BvzX/zd2rSPuNsqXiBK2x76TniLDaxuD4Tj6eb3WgR1OoCg==",
11 |       "requires": {
12 |         "lit-html": "^0.14.0"
13 |       }
14 |     },
15 |     "@webcomponents/webcomponentsjs": {
16 |       "version": "2.2.1",
17 |       "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.2.1.tgz",
18 |       "integrity": "sha512-lZZ+Lkke6JhsJcQQqSVk1Pny6/8y4qhJ98LO7a/MwBSRO8WqHqK1X2vscfeL8vOnYGFnmBUyVG95lwYv/AXyLQ=="
19 |     },
20 |     "lit-html": {
21 |       "version": "0.14.0",
22 |       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-0.14.0.tgz",
23 |       "integrity": "sha512-+xqUPzzJGEDqb0F5DOnMXvL0jxpkKebAMlXycKZxFtzlmD+qePEmYrEUPF9XVXcc5eYBzYXTCOUcjSCod4YvgQ=="
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "start-lit-element",
 3 |   "version": "1.0.0",
 4 |   "description": "start-lit-element",
 5 |   "repository": "https://github.com/PolymerLabs/start-lit-element.git",
 6 |   "main": "start-lit-element.js",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "author": "The Polymer Authors",
11 |   "license": "BSD-3-Clause",
12 |   "dependencies": {
13 |     "@webcomponents/webcomponentsjs": "latest",
14 |     "lit-element": "latest"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/polymer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "shell": "src/start-lit-element.js",
 3 |   "entrypoint": "index.html",
 4 |   "fragments": ["src/lazy-element.js"],
 5 |   "npm": true,
 6 |   "moduleResolution": "node",
 7 |   "sources": ["src/start-lit-element.js", "manifest/**", "manifest.json", "package.json"],
 8 |   "extraDependencies": [
 9 |     "robots.txt",
10 |     "node_modules/@webcomponents/webcomponentsjs/**"
11 |   ],
12 |   "builds": [{
13 |     "bundle": true,
14 |     "js": { 
15 |       "minify": false,
16 |       "compile": "es5",
17 |       "transformModulesToAmd": true
18 |     },
19 |     "addServiceWorker": true,
20 |     "addPushManifest": true
21 |   }]
22 | }
23 | 


--------------------------------------------------------------------------------
/robots.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PolymerLabs/start-lit-element/f00f8f01214a0160bbc1d772f87b273766f3e4f5/robots.txt


--------------------------------------------------------------------------------
/src/lazy-element.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
 4 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 |  * Code distributed by Google as part of the polymer project is also
 8 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 |  */
10 | 
11 | // Import LitElement base class and html helper function
12 | import { LitElement, html } from 'lit-element';
13 | 
14 | export class LazyElement extends LitElement {
15 |   /**
16 |    * Define a template for the new element by implementing LitElement's
17 |    * `render` function. `render` must return a lit-html TemplateResult.
18 |    */
19 |   render() {
20 |     return html`
21 |       <style>
22 |         :host { display: block; }
23 |         :host([hidden]) { display: none; }
24 |       </style>
25 |       <p>You like pie.</p>
26 |     `;
27 |   }
28 | }
29 | // Register the element with the browser
30 | customElements.define('lazy-element', LazyElement);
31 | 


--------------------------------------------------------------------------------
/src/start-lit-element.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
  4 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 |  * Code distributed by Google as part of the polymer project is also
  8 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 |  */
 10 | 
 11 | 
 12 | // Import LitElement base class and html helper function
 13 | import { LitElement, html } from 'lit-element';
 14 | 
 15 | export class StartLitElement extends LitElement {
 16 |   /**
 17 |    * Define properties. Properties defined here will be automatically 
 18 |    * observed.
 19 |    */
 20 |   static get properties() {
 21 |     return {
 22 |       message: { type: String },
 23 |       pie: { type: Boolean }
 24 |     };
 25 |   }
 26 | 
 27 |   /**  
 28 |    * In the element constructor, assign default property values.
 29 |    */
 30 |   constructor() {
 31 |     // Must call superconstructor first.
 32 |     super();
 33 | 
 34 |     // Initialize properties
 35 |     this.loadComplete = false;
 36 |     this.message = 'Hello World from LitElement';
 37 |     this.pie = false;
 38 |   }
 39 | 
 40 |   /**
 41 |    * Define a template for the new element by implementing LitElement's
 42 |    * `render` function. `render` must return a lit-html TemplateResult.
 43 |    */
 44 |   render() {
 45 |     return html`
 46 |       <style>
 47 |         :host { display: block; }
 48 |         :host([hidden]) { display: none; }
 49 |       </style>
 50 | 
 51 |       <h1>Start LitElement!</h1>
 52 |       <p>${this.message}</p>
 53 | 
 54 |       <input name="myinput" id="myinput" 
 55 |         type="checkbox"
 56 |         ?checked="${this.pie}"
 57 |         @change="${this.togglePie}">
 58 | 
 59 |       <label for="myinput">I like pie.</label>
 60 |       
 61 |       ${this.pie ? html`<lazy-element></lazy-element>` : html``}
 62 |     `;
 63 |   }
 64 | 
 65 |   /**
 66 |    * Implement firstUpdated to perform one-time work on first update:
 67 |    * - Call a method to load the lazy element if necessary
 68 |    * - Focus the checkbox
 69 |    */
 70 |   firstUpdated() {
 71 |     this.loadLazy();
 72 | 
 73 |     const myInput = this.shadowRoot.getElementById('myinput');
 74 |     myInput.focus();
 75 |   }
 76 | 
 77 |   /**
 78 |    * Event handler. Gets called whenever the checkbox fires a `change` event.
 79 |    * - Toggle whether to display <lazy-element>
 80 |    * - Call a method to load the lazy element if necessary
 81 |    */
 82 |   togglePie(e) {
 83 |     this.pie = !this.pie;
 84 |     this.loadLazy();
 85 |   }
 86 | 
 87 |   /**
 88 |    * If we need the lazy element && it hasn't already been loaded, 
 89 |    * load it and remember that we loaded it.
 90 |    */
 91 |   async loadLazy() {
 92 |     console.log('loadLazy');
 93 |     if(this.pie && !this.loadComplete) {
 94 |       return import('./lazy-element.js').then((LazyElement) => {
 95 |         this.loadComplete = true;
 96 |         console.log("LazyElement loaded");
 97 |       }).catch((reason) => {
 98 |         this.loadComplete = false;
 99 |         console.log("LazyElement failed to load", reason);
100 |       });
101 |     }
102 |   }
103 | }
104 | 
105 | // Register the element with the browser
106 | customElements.define('start-lit-element', StartLitElement);
107 | 


--------------------------------------------------------------------------------