[lit-html] Don't remove attributes with noChange on first render (#1922)

Author: justinfagnani

.changeset/curvy-suns-confess.md

@@ -0,0 +1,5 @@
+---
+'lit-html': patch
+---
+
+Binding `noChange` into an interpolated attribute expression now no longer removes the attribute on first render - instead it acts like an empty string. This is mostly noticable when using `until()` without a fallback in interpolated attributes.

packages/lit-html/src/lit-html.ts

@@ -1408,7 +1408,7 @@ class AttributePart implements Disconnectable {
  this._$parent = parent;
  this.options = options;
  if (strings.length > 2 || strings[0] !== '' || strings[1] !== '') {
- this._$committedValue = new Array(strings.length - 1).fill(nothing);
+ this._$committedValue = new Array(strings.length - 1).fill(new String());
  this.strings = strings;
  } else {
  this._$committedValue = nothing;

packages/lit-html/src/test/directives/until_test.ts

@@ -127,6 +127,23 @@ suite('until directive', () => {
  test('renders a Promise to an interpolated attribute', async () => {
  const promise = Promise.resolve('foo');
  render(html`<div test="value:${until(promise)}"></div>`, container);
+ assert.equal(
+ stripExpressionMarkers(container.innerHTML),
+ '<div test="value:"></div>'
+ );
+ await promise;
+ assert.equal(
+ stripExpressionMarkers(container.innerHTML),
+ '<div test="value:foo"></div>'
+ );
+ });
+
+ test('renders a nothing fallback to an interpolated attribute', async () => {
+ const promise = Promise.resolve('foo');
+ render(
+ html`<div test="value:${until(promise, nothing)}"></div>`,
+ container
+ );
  assert.equal(stripExpressionMarkers(container.innerHTML), '<div></div>');
  await promise;
  assert.equal(
@@ -435,7 +452,10 @@ suite('until directive', () => {
  )}"></div>`,
  container
  );
- assert.equal(stripExpressionMarkers(container.innerHTML), '<div></div>');
+ assert.equal(
+ stripExpressionMarkers(container.innerHTML),
+ '<div data-attr="other "></div>'
+ );
 
  await laterTask();
  assert.equal(
@@ -536,7 +556,10 @@ suite('until directive', () => {
  )}"></div>`,
  container
  );
- assert.equal(stripExpressionMarkers(container.innerHTML), '<div></div>');
+ assert.equal(
+ stripExpressionMarkers(container.innerHTML),
+ '<div data-attr="other "></div>'
+ );
 
  await laterTask();
  assert.equal(

packages/lit-html/src/test/lit-html_test.ts

@@ -1004,7 +1004,7 @@ suite('lit-html', () => {
  assertContent('<div>baz</div><div foo="bar"></div>');
  });
 
- test('renders undefined in attributes', () => {
+ test('renders undefined in interpolated attributes', () => {
  render(html`<div attribute="it's ${undefined}"></div>`, container);
  assert.equal(
  stripExpressionComments(container.innerHTML),
@@ -1022,6 +1022,32 @@ suite('lit-html', () => {
  assertContent('<div attribute=""></div>');
  });
 
+ test('renders empty string in attributes', () => {
+ render(html`<div attribute="${''}"></div>`, container);
+ assertContent('<div attribute=""></div>');
+ });
+
+ test('renders empty string in interpolated attributes', () => {
+ render(html`<div attribute="foo${''}"></div>`, container);
+ assertContent('<div attribute="foo"></div>');
+ });
+
+ test('initial render of noChange in fully-controlled attribute', () => {
+ render(html`<div attribute="${noChange as any}"></div>`, container);
+ assertContent('<div></div>');
+ });
+
+ test('renders noChange in attributes, preserves outside attribute value', () => {
+ const go = (v: any) =>
+ render(html`<div attribute="${v}"></div>`, container);
+ go(noChange);
+ assertContent('<div></div>');
+ const div = container.querySelector('div');
+ div?.setAttribute('attribute', 'A');
+ go(noChange);
+ assertContent('<div attribute="A"></div>');
+ });
+
  test('nothing sentinel removes an attribute', () => {
  const go = (v: any) => html`<div a=${v}></div>`;
  render(go(nothing), container);
@@ -1063,9 +1089,17 @@ suite('lit-html', () => {
  assert.isEmpty(observer.takeRecords());
  });
 
- test('noChange works on one of multiple expressions', () => {
+ test('noChange renders as empty string when used in interpolated attributes', () => {
  const go = (a: any, b: any) =>
  render(html`<div foo="${a}:${b}"></div>`, container);
+
+ go('A', noChange);
+ assert.equal(
+ stripExpressionComments(container.innerHTML),
+ '<div foo="A:"></div>',
+ 'A'
+ );
+
  go('A', 'B');
  assert.equal(
  stripExpressionComments(container.innerHTML),