Pins external library versions, other housekeeping

README.md

@@ -11,7 +11,7 @@
 A dead simple starting point for custom elements. It provides the following functionality:
 
 - Efficient element generation and data binding via an integrated templating engine
-- ...or drop in an engine of your choice (e.g., [lit-html](https://lit.dev))
+- ...or use another engine (e.g., [lit-html](https://lit.dev))
 - Automatic `.property` to `[attribute]` reflection (opt-in)
 - Automatic `[attribute]` to `.property` synchronization (one-directional, on connected)
 - Simple and efficient property observation and computation
@@ -43,8 +43,8 @@ import XElement from 'https://deno.land/x/element/x-element.js';
 1. No compilation step is necessary for adoption, just import `x-element.js`
 2. Implement a minimal set of generalized functionality
 3. Make as few design decisions as possible
-4. Presume adopters are browser experts already, don't get in their way
-5. Follow the web platform precedents whenever possible
+4. Presume adopters are browser experts already (stay out of their way)
+5. Follow web platform precedents whenever possible
 6. Remain compatible with any browser which fully supports custom elements
 7. Prioritize simple syntax and useful comments in the code itself
 8. Zero dependencies

SPEC.md

@@ -34,40 +34,9 @@ And use it in your markup:
 
 ## Rendering
 
-XElement uses default templating engine (or one you choose like [lit-html]) to
-efficiently turn interpolated html markup into dom nodes. Here's an example
-using [lit-html]:
+XElement has a built-in templating engine to efficiently turn interpolated html markup into DOM nodes.
 
-```javascript
-import XElement from 'https://deno.land/x/element/x-element.js';
-import { asyncAppend } from 'https://unpkg.com/lit-html/directives/async-append.js?module';
-import { asyncReplace } from 'https://unpkg.com/lit-html/directives/async-replace.js?module';
-import { cache } from 'https://unpkg.com/lit-html/directives/cache.js?module';
-import { classMap } from 'https://unpkg.com/lit-html/directives/class-map.js?module';
-import { directive } from 'https://unpkg.com/lit-html/directive.js?module';
-import { guard } from 'https://unpkg.com/lit-html/directives/guard.js?module';
-import { html, render as originalRender, svg } from 'https://unpkg.com/lit-html/lit-html.js?module';
-import { ifDefined } from 'https://unpkg.com/lit-html/directives/if-defined.js?module';
-import { live } from 'https://unpkg.com/lit-html/directives/live.js?module';
-import { repeat } from 'https://unpkg.com/lit-html/directives/repeat.js?module';
-import { styleMap } from 'https://unpkg.com/lit-html/directives/style-map.js?module';
-import { templateContent } from 'https://unpkg.com/lit-html/directives/template-content.js?module';
-import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module';
-import { unsafeSVG } from 'https://unpkg.com/lit-html/directives/unsafe-svg.js?module';
-import { until } from 'https://unpkg.com/lit-html/directives/until.js?module';
-
-export default class BaseElement extends XElement {
-  // Use lit-html's template engine rather than the built-in x-element engine.
-  static get templateEngine() {
-    const render = (container, template) => originalRender(template, container);
-    return {
-      render, html, svg, asyncAppend, asyncReplace, cache, classMap, directive,
-      guard, ifDefined, live, repeat, styleMap, templateContent, unsafeHTML,
-      unsafeSVG, until,
-    };
-  }
-}
-```
+It is also possible to integrate third party rendering engines. Here is an example using [lit-html]: [demo/lit-html/base-element.js](./demo/lit-html/base-element.js)
 
 ## Properties
 
@@ -76,16 +45,16 @@ attribute is updated, a render is queued.
 
 Property definitions have the following options:
 
-- `type` [Function]: associate properties with types.
+- `type`      [Function]: associate properties with types.
 - `attribute` [String]: override default attribute for properties.
-- `input` [StringArray]: declare names of watched properties for a computed property.
-- `compute` [Function]: compute property value when input changes.
-- `reflect` [Boolean]: reflect properties back to attributes.
-- `observe` [Function]: react when properties change.
-- `initial` [Function|Any]: provide initial, default values for nullish properties.
-- `default` [Function|Any]: provide recurring, default values for nullish properties.
-- `readOnly` [Boolean]: prevent setting properties on the host.
-- `internal` [Boolean]: prevent getting / setting properties on the host.
+- `input`     [StringArray]: declare names of watched properties for a computed property.
+- `compute`   [Function]: compute property value when input changes.
+- `reflect`   [Boolean]: reflect properties back to attributes.
+- `observe`   [Function]: react when properties change.
+- `initial`   [Function|Any]: provide initial, default values for nullish properties.
+- `default`   [Function|Any]: provide recurring, default values for nullish properties.
+- `readOnly`  [Boolean]: prevent setting properties on the host.
+- `internal`  [Boolean]: prevent getting / setting properties on the host.
 
 ### Example
 
@@ -388,4 +357,4 @@ class MyElement extends XElement {
 - [lit-html]
 
 [WHATWG Custom Elements Spec]: https://html.spec.whatwg.org/multipage/custom-elements.html
-[lit-html]: https://lit-html.polymer-project.org/
+[lit-html]: https://lit.dev

demo/index.html

@@ -12,8 +12,8 @@ <h2 id="tagline">A dead simple starting point for custom elements.</h2>
       <p id="label">Examples</p>
       <ul id="list">
         <li><a href="./chess">chess piece</a></li>
-        <li><a href="./lit-html">using lit-html</a></li>
-        <li><a href="./uhtml">using µhtml</a></li>
+        <li><a href="./lit-html">integrating with lit-html</a></li>
+        <li><a href="./uhtml">integrating with µhtml</a></li>
         <li><a href="./react">wrapping in react</a></li>
         <li><a href="../test">run tests</a></li>
         <li><a href="./performance">performance</a></li>

demo/lit-html/base-element.js

@@ -1,19 +1,19 @@
 import XElement from '../../x-element.js';
-import { asyncAppend } from 'https://unpkg.com/lit-html/directives/async-append.js';
-import { asyncReplace } from 'https://unpkg.com/lit-html/directives/async-replace.js';
-import { cache } from 'https://unpkg.com/lit-html/directives/cache.js';
-import { classMap } from 'https://unpkg.com/lit-html/directives/class-map.js';
-import { directive } from 'https://unpkg.com/lit-html/directive.js';
-import { guard } from 'https://unpkg.com/lit-html/directives/guard.js';
-import { html, render as originalRender, svg } from 'https://unpkg.com/lit-html/lit-html.js';
-import { ifDefined } from 'https://unpkg.com/lit-html/directives/if-defined.js';
-import { live } from 'https://unpkg.com/lit-html/directives/live.js';
-import { repeat } from 'https://unpkg.com/lit-html/directives/repeat.js';
-import { styleMap } from 'https://unpkg.com/lit-html/directives/style-map.js';
-import { templateContent } from 'https://unpkg.com/lit-html/directives/template-content.js';
-import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js';
-import { unsafeSVG } from 'https://unpkg.com/lit-html/directives/unsafe-svg.js';
-import { until } from 'https://unpkg.com/lit-html/directives/until.js';
+import { asyncAppend } from 'https://unpkg.com/lit-html@3.1.2/directives/async-append.js';
+import { asyncReplace } from 'https://unpkg.com/lit-html@3.1.2/directives/async-replace.js';
+import { cache } from 'https://unpkg.com/lit-html@3.1.2/directives/cache.js';
+import { classMap } from 'https://unpkg.com/lit-html@3.1.2/directives/class-map.js';
+import { directive } from 'https://unpkg.com/lit-html@3.1.2/directive.js';
+import { guard } from 'https://unpkg.com/lit-html@3.1.2/directives/guard.js';
+import { html, render as originalRender, svg } from 'https://unpkg.com/lit-html@3.1.2/lit-html.js';
+import { ifDefined } from 'https://unpkg.com/lit-html@3.1.2/directives/if-defined.js';
+import { live } from 'https://unpkg.com/lit-html@3.1.2/directives/live.js';
+import { repeat } from 'https://unpkg.com/lit-html@3.1.2/directives/repeat.js';
+import { styleMap } from 'https://unpkg.com/lit-html@3.1.2/directives/style-map.js';
+import { templateContent } from 'https://unpkg.com/lit-html@3.1.2/directives/template-content.js';
+import { unsafeHTML } from 'https://unpkg.com/lit-html@3.1.2/directives/unsafe-html.js';
+import { unsafeSVG } from 'https://unpkg.com/lit-html@3.1.2/directives/unsafe-svg.js';
+import { until } from 'https://unpkg.com/lit-html@3.1.2/directives/until.js';
 
 export default class BaseElement extends XElement {
   // Use lit-html's template engine rather than the built-in x-element engine.

demo/lit-html/demo-lit-html.js

@@ -0,0 +1,31 @@
+import BaseElement from './base-element.js';
+
+export default class DemoLitHtml extends BaseElement {
+  static get properties() {
+    return {
+      emoji: {
+        type: String,
+      },
+      message: {
+        type: String,
+      },
+    };
+  }
+
+  // What's injected into the "template" function is defined in "BaseElement".
+  static template(html, { ifDefined }) {
+    return ({ emoji, message }) => {
+      return html`
+        <style>
+          #container[emoji]::before {
+            content: " " attr(emoji);
+            font-size: 2rem;
+          }
+        </style>
+        <div id="container" emoji="${ifDefined(emoji)}">Rendered &ldquo;${message}&rdquo; using <code>lit-html</code>.</div>
+      `;
+    };
+  }
+}
+
+customElements.define('demo-lit-html', DemoLitHtml);

demo/lit-html/index.html

@@ -1,11 +1,13 @@
 <!doctype html>
 <html>
   <head>
-    <script type="module" src="./lit-html-element.js"></script>
+    <script type="module" src="./demo-lit-html.js"></script>
   </head>
   <body>
-    <lit-html-element message=" woo! "></lit-html-element>
-    <lit-html-element message=" yay! "></lit-html-element>
-    <lit-html-element message=" woo! "></lit-html-element>
+    <ol>
+      <li><demo-lit-html message="one" emoji="🔥"></demo-lit-html></li>
+      <li><demo-lit-html message="two" emoji="😻"></demo-lit-html></li>
+      <li><demo-lit-html message="three" emoji="✌️"></demo-lit-html></li>
+    </ol>
   </body>
 </html>

demo/performance/index.js

@@ -1,6 +1,6 @@
 import XElement from '../../x-element.js';
-import { html as litHtmlHtml, render as litHtmlRender } from 'https://unpkg.com/lit-html/lit-html.js';
-import { render as uhtmlRender, html as uhtmlHtml } from 'https://unpkg.com/uhtml';
+import { html as litHtmlHtml, render as litHtmlRender } from 'https://unpkg.com/lit-html@3.1.2/lit-html.js';
+import { html as uhtmlHtml, render as uhtmlRender } from 'https://unpkg.com/uhtml@4.4.7';
 
 class LitHtmlElement extends XElement {
   // Use lit-html's template engine rather than the built-in x-element engine.

demo/react/index.html

@@ -2,8 +2,8 @@
 <html>
   <head>
     <script type="module" src="../chess/index.js"></script>
-    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   </head>
   <body>
     <div id="root"></div>

demo/uhtml/base-element.js

@@ -1,5 +1,5 @@
 import XElement from '../../x-element.js';
-import { render, html, svg } from 'https://unpkg.com/uhtml';
+import { render, html, svg } from 'https://unpkg.com/uhtml@4.4.7';
 
 export default class BaseElement extends XElement {
   // Use µhtml's template engine rather than the built-in x-element engine.

demo/uhtml/demo-uhtml.js

@@ -0,0 +1,31 @@
+import BaseElement from './base-element.js';
+
+export default class DemoUhtml extends BaseElement {
+  static get properties() {
+    return {
+      emoji: {
+        type: String,
+      },
+      message: {
+        type: String,
+      },
+    };
+  }
+
+  // What's injected into the "template" function is defined in "BaseElement".
+  static template(html) {
+    return ({ emoji, message }) => {
+      return html`
+        <style>
+          #container[emoji]::before {
+            content: " " attr(emoji);
+            font-size: 2rem;
+          }
+        </style>
+        <div id="container" emoji="${emoji}">Rendered &ldquo;${message}&rdquo; using <code>µhtml</code>.</div>
+      `;
+    };
+  }
+}
+
+customElements.define('demo-uhtml', DemoUhtml);

demo/uhtml/index.html

@@ -1,11 +1,13 @@
 <!doctype html>
 <html>
   <head>
-    <script type="module" src="./uhtml-element.js"></script>
+    <script type="module" src="./demo-uhtml.js"></script>
   </head>
   <body>
-    <uhtml-element message=" woo! "></uhtml-element>
-    <uhtml-element message=" yay! "></uhtml-element>
-    <uhtml-element message=" woo! "></uhtml-element>
+    <ol>
+      <li><demo-uhtml message="one" emoji="🔥"></demo-uhtml></li>
+      <li><demo-uhtml message="two" emoji="😻"></demo-uhtml></li>
+      <li><demo-uhtml message="three" emoji="✌️"></demo-uhtml></li>
+    </ol>
   </body>
 </html>

package.json

@@ -1,9 +1,8 @@
 {
   "name": "@netflix/x-element",
-  "author": "Casey Klebba",
-  "description": "Custom Element base class.",
+  "description": "A dead simple starting point for custom elements.",
   "version": "1.0.0-rc.57",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "Apache-2.0",
   "repository": "https://github.com/Netflix/x-element",
   "type": "module",
   "main": "x-element.js",
@@ -31,5 +30,15 @@
     "http-server": "^14.1.1",
     "puppeteer": "^21.10.0",
     "tap-parser": "^15.3.1"
-  }
+  },
+  "contributors": [
+    {
+      "name": "Andrew Seier",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Casey Klebba",
+      "email": "[email protected]"
+    }
+  ]
 }