Simplify x-element.

This closes #57, closes #52, closes #46, closes #42, closes #36, closes #31, closes #30, closes #28, closes #26, and closes #25.
Netflix · Jul 8, 2020 · 358cec0 · 358cec0
1 parent 77a31c5
commit 358cec0
Show file tree

Hide file tree

Showing 32 changed files with 2,023 additions and 1,148 deletions.
diff --git a/SPEC.md b/SPEC.md
diff --git a/demo/demo-element-attributes.js b/demo/demo-element-attributes.js
@@ -1,20 +1,5 @@
 import XElement from '../x-element.js';
 
-const styleSheet = XElement.createStyleSheet(`
-:host {
-  display: block;
-  width: 200px;
-}
-
-:host([hyphenated-value]) {
-  background-color: magenta;
-}
-
-:host([boolean-value]) {
-  font-weight: bold;
-}
-`);
-
 class DemoAttributesElement extends XElement {
   static get properties() {
     return {
@@ -27,15 +12,25 @@ class DemoAttributesElement extends XElement {
     };
   }
 
-  static createRenderRoot(host) {
-    const shadowRoot = super.createRenderRoot(host);
-    shadowRoot.adoptedStyleSheets = [styleSheet];
-    return shadowRoot;
-  }
-
   static template(html) {
     return ({ hyphenatedValue }) => {
-      return html`<div id="demo">${hyphenatedValue}</div>`;
+      return html`
+        <style>
+          :host {
+            display: block;
+            width: 200px;
+          }
+          
+          :host([hyphenated-value]) {
+            background-color: magenta;
+          }
+          
+          :host([boolean-value]) {
+            font-weight: bold;
+          }
+        </style>
+        <div id="demo">${hyphenatedValue}</div>
+      `;
     };
   }
 }

diff --git a/demo/demo-element-properties.js b/demo/demo-element-properties.js
@@ -1,20 +1,5 @@
 import XElement from '../x-element.js';
 
-const styleSheet = XElement.createStyleSheet(`
-:host {
-  display: block;
-  width: 200px;
-}
-
-:host([reflected]) {
-  background-color: cyan;
-}
-
-:host([boolean-value]) {
-  font-weight: bold;
-}
-`);
-
 class DemoPropertiesElement extends XElement {
   static get properties() {
     return {
@@ -30,15 +15,25 @@ class DemoPropertiesElement extends XElement {
     };
   }
 
-  static createRenderRoot(host) {
-    const shadowRoot = super.createRenderRoot(host);
-    shadowRoot.adoptedStyleSheets = [styleSheet];
-    return shadowRoot;
-  }
-
   static template(html) {
     return ({ reflected }) => {
-      return html`<div id="demo">${reflected}</div>`;
+      return html`
+        <style>
+          :host {
+            display: block;
+            width: 200px;
+          }
+          
+          :host([reflected]) {
+            background-color: cyan;
+          }
+          
+          :host([boolean-value]) {
+            font-weight: bold;
+          }
+        </style>
+        <div id="demo">${reflected}</div>
+      `;
     };
   }
 }

diff --git a/demo/demo-element.js b/demo/demo-element.js
@@ -1,20 +1,5 @@
 import XElement from '../x-element.js';
 
-const styleSheet = XElement.createStyleSheet(`
-:host {
-  display: block;
-  width: 200px;
-}
-
-:host([reflected]) {
-  background-color: yellow;
-}
-
-:host([boolean-value]) {
-  font-weight: bold;
-}
-`);
-
 class DemoElement extends XElement {
   static get properties() {
     return {
@@ -30,15 +15,25 @@ class DemoElement extends XElement {
     };
   }
 
-  static createRenderRoot(host) {
-    const shadowRoot = super.createRenderRoot(host);
-    shadowRoot.adoptedStyleSheets = [styleSheet];
-    return shadowRoot;
-  }
-
   static template(html) {
     return ({ reflected }) => {
-      return html`<div id="demo">${reflected}</div>`;
+      return html`
+        <style>
+          :host {
+            display: block;
+            width: 200px;
+          }
+          
+          :host([reflected]) {
+            background-color: yellow;
+          }
+          
+          :host([boolean-value]) {
+            font-weight: bold;
+          }
+        </style>
+        <div id="demo">${reflected}</div>
+      `;
     };
   }
 }

diff --git a/demo/index.html b/demo/index.html
@@ -5,11 +5,13 @@
     <script type="module" src="demo-element.js"></script>
     <script type="module" src="demo-element-properties.js"></script>
     <script type="module" src="demo-element-attributes.js"></script>
+    <script type="module" src="right-triangle.js"></script>
   </head>
   <body>
     <demo-element></demo-element>
     <demo-element-properties></demo-element-properties>
     <demo-element-attributes hyphenated-value="ok" boolean-value></demo-element-attributes>
+    <right-triangle></right-triangle>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -1,2 +1,17 @@
 document.querySelector('demo-element').reflected = 'ok';
 document.querySelector('demo-element-properties').reflected = 'ok';
+
+const rightTriangle = document.querySelector('right-triangle');
+const pythagoreanTriples = [
+  { a: 5, b: 12 },
+  { a: 7, b: 24 },
+  { a: 8, b: 15 },
+  { a: 9, b: 40 },
+  { a: 11, b: 60 },
+  { a: 0, b: 0 },
+  { a: 3, b: 4 },
+];
+let count = 0;
+setInterval(() => {
+  Object.assign(rightTriangle, pythagoreanTriples[count++ % pythagoreanTriples.length]);
+}, 2000);
diff --git a/demo/right-triangle.js b/demo/right-triangle.js
@@ -0,0 +1,43 @@
+import XElement from '../x-element.js';
+
+class RightTriangle extends XElement {
+  static get properties() {
+    return {
+      a: {
+        type: Number,
+        value: 3,
+      },
+      b: {
+        type: Number,
+        value: 4,
+      },
+      c: {
+        type: Number,
+        dependencies: ['a', 'b'],
+        resolver: (a, b) => Math.hypot(a, b),
+      },
+      valid: {
+        type: Boolean,
+        dependencies: ['c'],
+        resolver: c => !!c,
+        reflect: true,
+      },
+    };
+  }
+
+  static template(html) {
+    return ({ a, b, c }) => html`
+      <style>
+        :host {
+          display: block;
+        }
+        :host(:not([valid])) {
+          display: none;
+        }
+      </style>
+      <code>Math.hypot(${a}, ${b}) = ${c}<code>
+    `;
+  }
+}
+
+customElements.define('right-triangle', RightTriangle);
diff --git a/index.js b/index.js
@@ -1,62 +1,5 @@
 import XElement from './x-element.js';
 
-const styleSheet = XElement.createStyleSheet(`
-:host {
-  display: block;
-  width: var(--hello-size, 8rem);
-  height: var(--hello-size, 8rem);
-  background-color: cyan;
-  border-radius: 50%;
-  margin: 0.25rem;
-  box-sizing: border-box;
-  transition-duration: 250ms;
-  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-  transition-property: transform, border;
-  will-change: transform;
-  cursor: pointer;
-}
-
-#container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: calc(var(--hello-size, 8rem) * calc(5/11));
-}
-
-:host([rank="\u2655"]) {
-  border: 4px dotted hsl(120, 100%, 50%);
-  background-color: yellow;
-  transform: rotateX(15deg) rotateY(15deg);
-}
-
-:host([rank="\u2654"]) {
-  border: 3px solid hsl(270, 100%, 50%);
-  background-color: magenta;
-  color: blue;
-  transform: rotateX(-10deg) rotateY(-15deg);
-}
-
-:host(:not([rank])),
-:host([rank=""]) {
-  background-color: #ccc;
-}
-
-:host(:hover) {
-  border: 3px solid hsl(180, 100%, 50%);
-  transform: translateZ(-25px);
-}
-
-:host(:focus) {
-  border: 12px solid hsl(90, 100%, 50%);
-  outline: none;
-}
-
-#container:empty::before {
-  content: '\u265F';
-}
-`);
-
 class HelloElement extends XElement {
   static get properties() {
     return {
@@ -72,15 +15,67 @@ class HelloElement extends XElement {
     };
   }
 
-  static createRenderRoot(host) {
-    const shadowRoot = super.createRenderRoot(host);
-    shadowRoot.adoptedStyleSheets = [styleSheet];
-    return shadowRoot;
-  }
-
   static template(html) {
     return ({ rank }) => {
-      return html`<div id="container">${rank}</div>`;
+      return html`
+        <style>
+          :host {
+            display: block;
+            width: var(--hello-size, 8rem);
+            height: var(--hello-size, 8rem);
+            background-color: cyan;
+            border-radius: 50%;
+            margin: 0.25rem;
+            box-sizing: border-box;
+            transition-duration: 250ms;
+            transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+            transition-property: transform, border;
+            will-change: transform;
+            cursor: pointer;
+          }
+          
+          #container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            font-size: calc(var(--hello-size, 8rem) * calc(5/11));
+          }
+          
+          :host([rank="\u2655"]) {
+            border: 4px dotted hsl(120, 100%, 50%);
+            background-color: yellow;
+            transform: rotateX(15deg) rotateY(15deg);
+          }
+          
+          :host([rank="\u2654"]) {
+            border: 3px solid hsl(270, 100%, 50%);
+            background-color: magenta;
+            color: blue;
+            transform: rotateX(-10deg) rotateY(-15deg);
+          }
+          
+          :host(:not([rank])),
+          :host([rank=""]) {
+            background-color: #ccc;
+          }
+          
+          :host(:hover) {
+            border: 3px solid hsl(180, 100%, 50%);
+            transform: translateZ(-25px);
+          }
+          
+          :host(:focus) {
+            border: 12px solid hsl(90, 100%, 50%);
+            outline: none;
+          }
+          
+          #container:empty::before {
+            content: '\u265F';
+          }
+        </style>
+        <div id="container">${rank}</div>
+      `;
     };
   }
 }

diff --git a/package.json b/package.json
@@ -27,13 +27,13 @@
     "/index.css"
   ],
   "dependencies": {
-    "lit-html": "^1.1.1"
+    "lit-html": "^1.2.1"
   },
   "devDependencies": {
     "@netflix/element-server": "^1.0.12",
-    "@netflix/x-test": "^1.0.0-rc.11",
-    "eslint": "^7.0.0",
-    "puppeteer": "^1.11.0",
-    "tap-parser": "^9.0.0"
+    "@netflix/x-test": "^1.0.0-rc.16",
+    "eslint": "^7.2.0",
+    "puppeteer": "^4.0.0",
+    "tap-parser": "^10.0.1"
   }
 }