Add nothing sentinel (lit#673)

src/lib/part.ts

@@ -40,3 +40,8 @@ export interface Part {
  * should not be written to the DOM.
  */
 export const noChange = {};
+
+/**
+ * A sentinel value that signals a NodePart to fully clear its content.
+ */
+export const nothing = {};

src/lib/parts.ts

@@ -18,7 +18,7 @@
 
 import {isDirective} from './directive.js';
 import {removeNodes} from './dom.js';
-import {noChange, Part} from './part.js';
+import {noChange, nothing, Part} from './part.js';
 import {RenderOptions} from './render-options.js';
 import {TemplateInstance} from './template-instance.js';
 import {TemplateResult} from './template-result.js';
@@ -200,6 +200,9 @@ export class NodePart implements Part {
       this._commitNode(value);
     } else if (Array.isArray(value) || value[Symbol.iterator]) {
       this._commitIterable(value);
+    } else if (value === nothing) {
+      this.value = nothing;
+      this.clear();
     } else {
       // Fallback, will render the string representation
       this._commitText(value);

src/lit-html.ts

@@ -37,7 +37,7 @@ export {DefaultTemplateProcessor, defaultTemplateProcessor} from './lib/default-
 export {directive, DirectiveFn, isDirective} from './lib/directive.js';
 // TODO(justinfagnani): remove line when we get NodePart moving methods
 export {removeNodes, reparentNodes} from './lib/dom.js';
-export {noChange, Part} from './lib/part.js';
+export {noChange, nothing, Part} from './lib/part.js';
 export {AttributeCommitter, AttributePart, BooleanAttributePart, EventPart, isPrimitive, NodePart, PropertyCommitter, PropertyPart} from './lib/parts.js';
 export {RenderOptions} from './lib/render-options.js';
 export {parts, render} from './lib/render.js';

src/test/lib/render_test.ts

@@ -12,7 +12,7 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import {AttributePart, directive, html, NodePart, Part, render, svg, templateFactory} from '../../lit-html.js';
+import {AttributePart, directive, html, noChange, NodePart, nothing, Part, render, svg, templateFactory} from '../../lit-html.js';
 import {stripExpressionMarkers} from '../test-utils/strip-markers.js';
 
 const assert = chai.assert;
@@ -43,8 +43,7 @@ suite('render()', () => {
 
   suite('text', () => {
     test('renders plain text expression', () => {
-      const result = html`test`;
-      render(result, container);
+      render(html`test`, container);
       assert.equal(stripExpressionMarkers(container.innerHTML), 'test');
     });
 
@@ -70,6 +69,23 @@ suite('render()', () => {
       assert.equal(stripExpressionMarkers(container.innerHTML), '<div></div>');
     });
 
+    test('renders noChange', () => {
+      const template = (i: any) => html`<div>${i}</div>`;
+      render(template('foo'), container);
+      render(template(noChange), container)
+      assert.equal(
+          stripExpressionMarkers(container.innerHTML), '<div>foo</div>');
+    });
+
+    test('renders nothing', () => {
+      const template = (i: any) => html`<div>${i}</div>`;
+      render(template('foo'), container);
+      render(template(nothing), container)
+      const children = Array.from(container.querySelector('div')!.childNodes);
+      assert.isEmpty(
+          children.filter(node => node.nodeType !== Node.COMMENT_NODE));
+    });
+
     testIfHasSymbol('renders a Symbol', () => {
       render(html`<div>${Symbol('A')}</div>`, container);
       assert.include(