lit · sorvell · Jan 17, 2018 · Jan 10, 2018 · Jan 10, 2018 · Jan 10, 2018
@@ -1,6 +1,6 @@
 /node_modules
 /bower_components
-/test
-/poly-lit-element.js
-/poly-lit-element.d.ts
-/poly-lit-element.js.map
+/test/lit*
+/lit-element.js
+/lit-element.d.ts
+/lit-element.js.map
@@ -1,3 +1,57 @@
-# polymer-lit
+# lit-element
 
-## This is just an example, and not event working yet. Please hold.
+## Base class for creating custom elements using Polymer and lit-html.
+
+```javascript
+import {LitElement, html} from 'node_modules/@polymer/lit-element/lit-element.js'
+
+class MyElement extends LitElement {
+
+  // Public property API that triggers re-render (synched with attributes)
+  static get properties() {
+    return {
+      foo: String,
+      whales: Number
+    }
+  }
+
+  constructor() {
+    super();
+    this.foo = 'foo';
+  }
+
+  ready() {
+    this.addEventListener('click', async (e) => {
+      this.whales++;
+      await this.nextRendered;
+      this.dispatchEvent(new CustomEvent('whales', {detail: {whales: this.whales}}))
+    });
+    super.ready();
+  }
+
+  // Render method should return a `TemplateResult` using the provided lit-html `html` tag function
+  render({foo, whales}) {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <h4>Foo: ${foo}</h4>
+      <div>whales: ${'🐳'.repeat(whales)}</div>
+      <slot></slot>
+    `;
+  }
+
+}
+customElements.define('my-element', MyElement);
+```
+
+```html
+  <my-element whales="5">hi</my-element>
+```
+
+## Known Issues
+* This element does not yet work with the ShadyCSS polyfill. Support is coming soon!
+* API is subject to minor changes.
+* See [lit-html](https://github.com/Polymer/lit-html) for more info.
@@ -0,0 +1,75 @@
+<!DOCTYPE html><!--
+@license
+Copyright (c) 2015 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
+--><html><head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>lit-element demo</title>
+</head>
+<body>
+  <script type="module">
+    import { LitElement, html } from '../lit-element.js';
+
+    class MyElement extends LitElement {
+
+      static get properties() {
+        return {
+          foo: String,
+          bar: Number,
+          whales: Number
+        }
+      }
+
+      constructor() {
+        super();
+        this.foo = 'foo';
+        this.whales = 0;
+      }
+
+      ready() {
+        this.addEventListener('click', async (e) => {
+          this.whales++;
+          await this.nextRendered;
+          this.dispatchEvent(new CustomEvent('whales', {detail: {whales: this.whales}}))
+          console.log(this.shadowRoot.querySelector('.count').textContent);
+        });
+        super.ready();
+      }
+
+      render({foo, bar, whales}) {
+        return html`
+          <style>
+            :host {
+              display: block;
+            }
+
+            .count {
+              color: green;
+            }
+
+            .content {
+              border: 1px solid black;
+              padding: 8px;
+            }
+          </style>
+          <h4>Foo: ${foo}, Bar: ${bar}</h4>
+          <div class="content">
+            <slot></slot>
+          </div>
+          <div class="count">
+            whales: ${'🐳'.repeat(whales)}
+          </div>
+        `;
+      }
+
+    }
+
+    customElements.define('my-element', MyElement);
+  </script>
+  <my-element bar="5" whales="5">Hi</my-element>
+</body></html>
@@ -1,11 +1,11 @@
 {
-  "name": "poly-lit-element",
+  "name": "@polymer/lit-element",
   "version": "0.1.0",
-  "description": "Polymer + Lit",
+  "description": "Polymer based lit-html custom element",
   "license": "BSD-3-Clause",
-  "repository": "PolymerLabs/poly-lit-element",
-  "main": "poly-lit-element.js",
-  "module": "poly-lit-element.js",
+  "repository": "PolymerLabs/lit-element",
+  "main": "lit-element.js",
+  "module": "lit-element.js",
   "directories": {
     "test": "test"
   },
@@ -15,7 +15,7 @@
     "pretest": "npm run posttest; ln -s node_modules bower_components",
     "test": "npm run build && wct -l chrome && npm run lint",
     "posttest": "rm -f bower_components",
-    "checksize": "uglifyjs poly-lit-element.js -mc --toplevel | gzip -9 | wc -c",
+    "checksize": "uglifyjs lit-element.js -mc --toplevel | gzip -9 | wc -c",
     "format": "find src test | grep '\\.js$\\|\\.ts$' | xargs clang-format --style=file -i",
     "lint": "tslint --project ./"
   },
@@ -27,13 +27,17 @@
     "mocha": "^3.4.2",
     "tslint": "^5.7.0",
     "typedoc": "^0.8.0",
-    "typescript": "^2.5.2",
+    "typescript": "^2.6.2",
     "uglify-es": "^3.0.27",
+    "wct-browser-legacy": "0.0.1-pre.10",
     "web-component-tester": "^6.0.1"
   },
-  "typings": "poly-lit-element.d.ts",
+  "typings": "lit-element.d.ts",
   "dependencies": {
-    "@polymer/polymer": "^3.0.0-pre.1",
-    "lit-html": "^0.6.0"
-  }
+    "@polymer/polymer": "^3.0.0-pre.4",
+    "lit-html": "^0.8.0"
+  },
+"publishConfig": {
+"access": "public"
+}
 }
@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2017 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 { PropertiesMixin } from '../../@polymer/polymer/lib/mixins/properties-mixin.js';
+import { TemplateResult } from '../../lit-html/lit-html.js';
+import { render } from '../../lit-html/lib/lit-extended.js';
+
+export { html } from '../../lit-html/lit-html.js';
+export class LitElement extends PropertiesMixin(HTMLElement) {
+
+  _nextRendered: Promise<any>|null = null;
+  _nextRenderedResolver: Function|null = null;
+
+  ready() {
+    this.attachShadow({mode: 'open'});
+    super.ready();
+  }
+
+  _flushProperties() {
+    super._flushProperties();
+    // TODO(sorvell): propertiesChanged should have `_getData`
+    const result = this.render(this.__data);
+    if (result) {
+      render(result, this.shadowRoot!);
+    }
+    if (this._nextRenderedResolver) {
+      this._nextRenderedResolver();
+      this._nextRenderedResolver = null;
+      this._nextRendered = null;
+    }
+  }
+
+  /**
+   * Return a template result to render using lit-html.
+   */
+  render(_props: object): TemplateResult {
+    throw new Error('render() not implemented');
+  }
+
+  invalidate() {
+    this._invalidateProperties();
+  }
+
+  get nextRendered() {
+    if (!this._nextRendered) {
+      // TODO(sorvell): handle rejected render.
+      this._nextRendered = new Promise((resolve) => {
+        this._nextRenderedResolver = resolve;
+      });
+    }
+    return this._nextRendered;
+  }
+
+}