From 9b549b6731cf4053f6e73403ee9b2e35efe440aa Mon Sep 17 00:00:00 2001 From: Casey Klebba Date: Thu, 1 Feb 2024 18:37:30 -0800 Subject: [PATCH] Pins external library versions, other housekeeping --- README.md | 6 ++-- SPEC.md | 55 +++++++------------------------ demo/index.html | 4 +-- demo/lit-html/base-element.js | 30 ++++++++--------- demo/lit-html/demo-lit-html.js | 31 +++++++++++++++++ demo/lit-html/index.html | 10 +++--- demo/lit-html/lit-html-element.js | 27 --------------- demo/performance/index.js | 4 +-- demo/react/index.html | 4 +-- demo/uhtml/base-element.js | 2 +- demo/uhtml/demo-uhtml.js | 31 +++++++++++++++++ demo/uhtml/index.html | 10 +++--- demo/uhtml/uhtml-element.js | 27 --------------- package.json | 17 +++++++--- 14 files changed, 124 insertions(+), 134 deletions(-) create mode 100644 demo/lit-html/demo-lit-html.js delete mode 100644 demo/lit-html/lit-html-element.js create mode 100644 demo/uhtml/demo-uhtml.js delete mode 100644 demo/uhtml/uhtml-element.js diff --git a/README.md b/README.md index c9254f6..ac8c81e 100644 --- a/README.md +++ b/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 diff --git a/SPEC.md b/SPEC.md index 6b08460..81ced85 100644 --- a/SPEC.md +++ b/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 diff --git a/demo/index.html b/demo/index.html index de49a7f..bf1eafb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,8 +12,8 @@

A dead simple starting point for custom elements.

Examples