Merge pull request #19 from PolymerLabs/until

Add until() to labs/

src/labs/until.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+
+import { NodePart } from "../lit-html.js";
+
+/**
+ * Display `defaultContent` until `promise` resolves.
+ */
+export function until(promise: Promise<any>, defaultContent: any) {
+  return async function(part: NodePart) {
+    part.setValue(defaultContent);
+    part.setValue(await promise);
+  }
+}

src/test/labs/until_test.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+
+/// <reference path="../../../node_modules/@types/mocha/index.d.ts" />
+/// <reference path="../../../node_modules/@types/chai/index.d.ts" />
+
+import {until} from '../../labs/until.js';
+import {html, render} from '../../lit-html.js';
+
+const assert = chai.assert;
+
+suite('until', () => {
+
+  test('displays defaultContent immediately', async () => {
+    const container = document.createElement('div');
+    let resolve: (v: any) => void;
+    const promise = new Promise((res, _) => {resolve = res;});
+    render(html`<div>${until(promise, html`<span>loading...</span>`)}</div>`, container);
+    assert.equal(container.innerHTML, '<div><span>loading...</span></div>');
+    resolve!('foo');
+    await promise;
+    assert.equal(container.innerHTML, '<div>foo</div>');         
+  });
+
+});

test/index.html

@@ -12,6 +12,7 @@
     <div id="mocha"></div>
     <script type="module" src="../lib/test/lit-html_test.js"></script>
     <script type="module" src="../lib/test/labs/repeat_test.js"></script>
+    <script type="module" src="../lib/test/labs/until_test.js"></script>
     <script type="module" src="../lib/test/labs/lit-extended_test.js"></script>
     <script type="module">
       mocha.run();