add lit-element

lit-element.js

@@ -0,0 +1,43 @@
+import {LitElement, html} from '@polymer/lit-element'
+
+class LitElementCounter extends LitElement {
+  static get properties() {
+    return {
+      count: Number,
+    }
+  }
+
+  constructor() {
+    super()
+    this.count = 0
+  }
+
+  render() {
+    return html`<button @click="${e => (this.count += 1)}">${
+      this.count
+    }</button>`
+  }
+}
+
+customElements.define('lit-element-counter', LitElementCounter)
+
+function render() {
+  const container = document.createElement('div')
+  const component = document.createElement('lit-element-counter')
+  container.appendChild(component)
+  document.body.appendChild(container)
+  return {
+    container,
+    ...getQueriesForElement(container),
+  }
+}
+
+test('renders a counter', () => {
+  const {getByText} = render()
+  const counter = getByText('0')
+  fireEvent.click(counter)
+  expect(counter).toHaveTextContent('1')
+
+  fireEvent.click(counter)
+  expect(counter).toHaveTextContent('2')
+})

lit-element.test.js

@@ -0,0 +1,3 @@
+// needed to make Jest play nicely with esm
+require = require('esm')(module, {mode: 'auto'});
+module.exports = require('./lit-element.js');

package.json

@@ -11,7 +11,9 @@
   "keywords": [],
   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
   "license": "MIT",
+  "esm": "auto",
   "dependencies": {
+    "@polymer/lit-element": "^0.6.0",
     "@polymer/polymer": "^3.0.5",
     "aurelia-framework": "^1.3.0",
     "backbone": "^1.3.3",