base polymer component

shader-park · Jun 14, 2019 · c5a547c · c5a547c
1 parent b5c1ab2
commit c5a547c
Show file tree

Hide file tree

Showing 19 changed files with 462 additions and 0 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "start-lit-element"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+build
+.DS_Store
+.firebase
diff --git a/README.md b/README.md
@@ -0,0 +1,136 @@
+# start-lit-element
+
+A simple Hello World for LitElement.
+
+https://start-lit-element.firebaseapp.com/
+
+* [Quick start](#quick-start)
+* [Detailed setup info](#detailed-setup-info)
+* [Browser compatibility and performance](#browser-compatibility-and-performance)
+
+## Quick start
+
+```
+npm install -g polymer-cli
+git clone https://github.com/PolymerLabs/start-lit-element
+cd start-lit-element
+npm install
+polymer serve
+```
+
+## Detailed setup info
+
+* [Clone](#clone-this-repo)
+* [Serve](#start-a-dev-server)
+* [Setup](#set-up-new-app)
+* [Build](#build-for-production-and-serve-locally)
+* [Deploy](#deploy)
+
+### Clone this repo
+
+```
+git clone https://github.com/PolymerLabs/start-lit-element
+```
+
+### Start a dev server
+
+```
+npm install -g polymer-cli
+cd start-lit-element
+npm install
+polymer serve
+```
+
+### Set up new app
+
+1. In index.html, update metadata stuff:
+
+```html
+<!-- Change stuff here for your app -->
+<meta name="description" content="start-lit-element">
+<meta name="theme-color" content="#ffffff">
+<title>start-lit-element</title>
+```
+
+2. In index.html, uncomment the service worker registration code:
+
+```html
+<!-- Register service worker if supported. -->
+<!--
+<script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js');
+  }
+</script> -->
+```
+
+3. In manifest.json, update the app description, etc:
+
+```json
+"description": "start-lit-element",
+"start_url": "index.html",
+"name": "start-lit-element",
+"short_name": "start-lit-el",
+"background_color": "#ffffff",
+"theme_color":"#ffffff",
+```
+
+4. Update your package.json if required
+
+5. In polymer.json, update your shell & entrypoint if required
+
+```
+"shell": "src/start-lit-element.js",
+"entrypoint": "index.html",
+```
+
+6. Remember to update firebase.json and .firebaserc for a real deployment!
+
+### Build for production and serve locally
+
+Build your project and serve the build locally:
+
+```
+polymer build
+polymer serve build/default
+```
+
+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.
+
+### Deploy
+
+1.  [Set up Firebase CLI tools](https://firebase.google.com/docs/cli/).
+2.  [Create a new Firebase project](https://firebase.google.com/console).
+3.  Update firebase.json and .firebaserc with your own app details.   
+4.  Deploy.
+
+    ```
+    firebase deploy
+    ```
+
+See the [Firebase CLI Reference](https://firebase.google.com/docs/cli) for more info.
+
+## Browser compatibility and performance
+
+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.
+
+Let me know of any [issues](https://github.com/PolymerLabs/start-lit-element/issues).
+
+## Known issues
+
+(All browsers) Dynamic `import` warning:
+
+```
+Could not resolve module specifier "require" in file "..src/start-lit-element.js".
+```
+
+See https://github.com/Polymer/tools/issues/131.
+
+(IE11 and Edge) Warning due to `<!--!` in built HTML:
+
+```
+Unexpected character: U+0021 EXCLAMATION MARK (!)
+Unexpected character in comment end. Expected "-->"
+```
+
+See https://github.com/Polymer/polymer-cli/issues/779.
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,15 @@
+{
+  "hosting": {
+    "public": "build/default",
+    "ignore": [
+      "firebase.json",
+      "**/.*"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <!-- Register service worker if supported. -->
+  <!--
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/service-worker.js');
+    }
+  </script>
+  -->
+
+  <!-- Load polyfills -->
+  <script 
+    src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
+    defer>
+  </script> 
+
+  <!-- Load components via WebComponents.waitFor -->
+  <script type="module">
+    window.WebComponents = window.WebComponents || { 
+      waitFor(cb){ addEventListener('WebComponentsReady', cb) }
+    } 
+    WebComponents.waitFor(async () => { 
+      import('./src/start-lit-element.js');
+    });
+  </script>
+
+  <!-- Change stuff here for your app -->
+  <meta name="description" content="start-lit-element">
+  <meta name="theme-color" content="#ffffff">
+  <title>start-lit-element</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="manifest" href="./manifest.json">
+  <link rel="shortcut icon" href="/manifest/favicon.ico">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta charset="UTF-8">
+</head>
+<body>
+
+  <!-- 
+    To configure starting state of the checkbox from markup: 
+    <start-lit-element pie="true"> 
+  -->
+
+  <start-lit-element>
+    <!-- Placeholders to improve time to first paint -->
+    <h1>Start LitElement!</h1>
+    <p>Hello World from LitElement</p>
+
+    <!-- Check for JavaScript -->
+    <p id="jsyes"></p>
+    <script type="text/javascript">
+      document.getElementById('jsyes').innerHTML='Loading...';
+    </script>
+    <noscript>
+      Could not render the custom element. Check that JavaScript is enabled.
+    </noscript>
+  </start-lit-element>
+</body>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,38 @@
+{
+  "display": "fullscreen",
+  "version": "1.0",
+  "manifest_version": 1,
+
+  "description": "start-lit-element",
+  "start_url": "index.html",
+  "name": "start-lit-element",
+  "short_name": "start-lit-el",
+  "background_color": "#ffffff",
+  "theme_color":"#ffffff",
+
+  "icons": [{
+    "src": "./manifest/icon-48x48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "./manifest/icon-72x72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "./manifest/icon-96x96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "./manifest/icon-144x144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "./manifest/icon-192x192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }, {
+    "src": "./manifest/icon-512x512.png",
+    "sizes": "512x512",
+    "type": "image/png"
+  }]
+}
diff --git a/manifest/favicon.ico b/manifest/favicon.ico
diff --git a/manifest/icon-144x144.png b/manifest/icon-144x144.png
diff --git a/manifest/icon-192x192.png b/manifest/icon-192x192.png
diff --git a/manifest/icon-48x48.png b/manifest/icon-48x48.png
diff --git a/manifest/icon-512x512.png b/manifest/icon-512x512.png
diff --git a/manifest/icon-72x72.png b/manifest/icon-72x72.png
diff --git a/manifest/icon-96x96.png b/manifest/icon-96x96.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "start-lit-element",
+  "version": "1.0.0",
+  "description": "start-lit-element",
+  "repository": "https://github.com/PolymerLabs/start-lit-element.git",
+  "main": "start-lit-element.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "The Polymer Authors",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "latest",
+    "lit-element": "latest"
+  }
+}
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,22 @@
+{
+  "shell": "src/start-lit-element.js",
+  "entrypoint": "index.html",
+  "fragments": ["src/lazy-element.js"],
+  "npm": true,
+  "moduleResolution": "node",
+  "sources": ["src/start-lit-element.js", "manifest/**", "manifest.json", "package.json"],
+  "extraDependencies": [
+    "robots.txt",
+    "node_modules/@webcomponents/webcomponentsjs/**"
+  ],
+  "builds": [{
+    "bundle": true,
+    "js": { 
+      "minify": false,
+      "compile": "es5",
+      "transformModulesToAmd": true
+    },
+    "addServiceWorker": true,
+    "addPushManifest": true
+  }]
+}
diff --git a/robots.txt b/robots.txt
diff --git a/src/lazy-element.js b/src/lazy-element.js
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+// Import LitElement base class and html helper function
+import { LitElement, html } from 'lit-element';
+
+export class LazyElement extends LitElement {
+  /**
+   * Define a template for the new element by implementing LitElement's
+   * `render` function. `render` must return a lit-html TemplateResult.
+   */
+  render() {
+    return html`
+      <style>
+        :host { display: block; }
+        :host([hidden]) { display: none; }
+      </style>
+      <p>You like pie.</p>
+    `;
+  }
+}
+// Register the element with the browser
+customElements.define('lazy-element', LazyElement);