├── .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 |
59 | Could not render the custom element. Check that JavaScript is enabled.
60 |
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 | I like pie.
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 |
--------------------------------------------------------------------------------