Prepare for 2.x interface.

Changes:
* Adding `??attr` binding syntax.
* Changing `ifDefined` to delete attr on `null` as well as `undefined`.
* Deprecating `ifDefined` / `nullish` in favor of `??attr` binding.
* Deprecating `repeat` in favor of `map`.
* Updating documentation.

Closes #204.

CHANGELOG.md

@@ -6,10 +6,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- You can now bind attributes with `??foo="${bar}"` syntax. This is functionally
+  equivalent to the `nullish` updater and will replace that functionality later.
+- A new `unsafe` updater was added to replace `unsafeHTML` and `unsafeSVG`. You
+  use it like `unsafe(value, 'html')` and `unsafe(value, 'svg')`.
+
 ### Changed
 
 - Template errors now include approximate line numbers from the offending
   template. They also print the registered custom element tag name (#201).
+- The `ifDefined` updater now deletes the attribute on `null` in addition to
+  `undefined`. This makes it behave identically to `nullish`. However, both
+  updaters are deprecated and the `??attr` binding should be used instead.
+
+### Deprecated
+
+- The `ifDefined` and `nullish` updaters are deprecated, update templates to use
+  syntax like `??foo="${bar}"`.
+- The `repeat` updater is deprecated, use `map` instead.
+- The `unsafeHTML` and `unsafeSVG` updaters are deprecated, use `unsafe`.
+
+### Fixed
+
+- Transitions from different content values should all now work. For example,
+  you previously could not change from a text value to an array. Additionally,
+  state is properly cleared when going from one value type to another — e.g.,
+  when going from `unsafe` back to `null`.
+- The `map` updater throws immediately when given non-array input. Previously,
+  it only threw _just before_ it was bound as content.
+- Dummy content cursor is no longer appended to end of template. This was an
+  innocuous off-by-one error when creating instrumented html from the tagged
+  template strings.
 
 ## [1.1.1] - 2024-11-09
 
@@ -27,20 +56,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - New support for static `styles` getter for `adoptedStyleSheets` ergonomics
   (#52).
 
-### Fixed
-
-- The `map` function now works with properties / attributes bound across
-  template contexts (#179).
-- The `x-element.d.ts` file now reflects the actual interface. Previously, it
-  has some issues (e.g., improper module export).
-
 ### Changed
 
 - The `x-element.js` file is now “typed” via JSDoc. The validity of the JSDoc
   comments are linted alongside the rest of the code and the annotations there
   are exported into a generated `x-element.d.ts` file. Previously, that file was
   hand-curated.
 
+### Fixed
+
+- The `map` function now works with properties / attributes bound across
+  template contexts (#179).
+- The `x-element.d.ts` file now reflects the actual interface. Previously, it
+  has some issues (e.g., improper module export).
+
 ## [1.0.0] - 2024-02-29
 
 ### Added

demo/lit-html/base-element.js

@@ -1,28 +1,36 @@
 import XElement from '../../x-element.js';
-import { asyncAppend } from 'https://unpkg.com/[email protected]/directives/async-append.js';
-import { asyncReplace } from 'https://unpkg.com/[email protected]/directives/async-replace.js';
-import { cache } from 'https://unpkg.com/[email protected]/directives/cache.js';
-import { classMap } from 'https://unpkg.com/[email protected]/directives/class-map.js';
-import { directive } from 'https://unpkg.com/[email protected]/directive.js';
-import { guard } from 'https://unpkg.com/[email protected]/directives/guard.js';
-import { html, render as originalRender, svg } from 'https://unpkg.com/[email protected]/lit-html.js';
-import { ifDefined } from 'https://unpkg.com/[email protected]/directives/if-defined.js';
-import { live } from 'https://unpkg.com/[email protected]/directives/live.js';
-import { repeat } from 'https://unpkg.com/[email protected]/directives/repeat.js';
-import { styleMap } from 'https://unpkg.com/[email protected]/directives/style-map.js';
-import { templateContent } from 'https://unpkg.com/[email protected]/directives/template-content.js';
-import { unsafeHTML } from 'https://unpkg.com/[email protected]/directives/unsafe-html.js';
-import { unsafeSVG } from 'https://unpkg.com/[email protected]/directives/unsafe-svg.js';
-import { until } from 'https://unpkg.com/[email protected]/directives/until.js';
+import { asyncAppend } from 'lit-html/directives/async-append.js';
+import { asyncReplace } from 'lit-html/directives/async-replace.js';
+import { cache } from 'lit-html/directives/cache.js';
+import { choose } from 'lit-html/directives/choose.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { directive } from 'lit-html/directive.js';
+import { guard } from 'lit-html/directives/guard.js';
+import { html, render as originalRender, svg } from 'lit-html/lit-html.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { join } from 'lit-html/directives/join.js';
+import { keyed } from 'lit-html/directives/keyed.js';
+import { live } from 'lit-html/directives/live.js';
+import { map } from 'lit-html/directives/map.js';
+import { range } from 'lit-html/directives/range.js';
+import { ref } from 'lit-html/directives/ref.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { templateContent } from 'lit-html/directives/template-content.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import { until } from 'lit-html/directives/until.js';
+import { when } from 'lit-html/directives/when.js';
+
 
 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,
+      render, html, svg, asyncAppend, asyncReplace, cache, choose, classMap,
+      directive, guard, ifDefined, join, keyed, live, map, range, ref, repeat,
+      styleMap, templateContent, unsafeHTML, unsafeSVG, until, when,
     };
   }
 }

demo/lit-html/index.html

@@ -2,6 +2,13 @@
 <html>
   <head>
     <meta charset="UTF-8">
+    <script type="importmap">
+      {
+        "imports": {
+          "lit-html/": "https://esm.sh/[email protected]/"
+        }
+      }
+    </script>
     <script type="module" src="./demo-lit-html.js"></script>
   </head>
   <body>

demo/performance/index.css

@@ -10,6 +10,11 @@
   height: calc(20px * 3);
 }
 
+#fixture {
+  height: calc(20px * 9);
+  color: gray;
+}
+
 p {
   width: 70ch;
 }

demo/performance/index.html

@@ -2,9 +2,21 @@
 <html>
   <head>
     <meta charset="UTF-8">
+    <script type="importmap">
+      {
+        "imports": {
+          "lit-html": "https://esm.sh/[email protected]",
+          "uhtml": "https://esm.sh/[email protected]"
+        }
+      }
+    </script>
     <link rel="stylesheet" href="./index.css">
   </head>
   <body>
+    <div>
+      <div class="label">test fixture</div>
+      <pre id="fixture" class="output"></pre>
+    </div>
     <div>
       <div class="label">default</div>
       <pre id="default" class="output"></pre>