├── .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 | 50 | 51 | 52 | start-lit-element 53 | ``` 54 | 55 | 2. In index.html, uncomment the service worker registration code: 56 | 57 | ```html 58 | 59 | 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 `" 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 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 19 | 20 | 21 | 29 | 30 | 31 | 32 | 33 | start-lit-element 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 47 | 48 | 49 | 50 |

Start LitElement!

51 |

Hello World from LitElement

52 | 53 | 54 |

55 | 58 | 61 |
62 | 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 | 25 |

You like pie.

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 | 50 | 51 |

Start LitElement!

52 |

${this.message}

53 | 54 | 58 | 59 | 60 | 61 | ${this.pie ? html`` : 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 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 | --------------------------------------------------------------------------------