Use transpiler and inline transitions

examples/diffhtml/lib/components/todo-app.js

 import * as diff from 'diffhtml';
+import inlineTransitions from 'diffhtml-inline-transitions';
 import store from '../redux/store';
 import * as todoAppActions from '../redux/actions/todo-app';
 import renderTodoList from './todo-list';
 
-const { html, innerHTML, addTransitionState } = diff;
+const { html, innerHTML } = diff;
 
 // Used to silence errors produced by missing Web Animations API support in the
 // transition promises below.
 const warnAboutWebAnim = () => console.info('No Web Animations API support');
 
+// Allow diffHTML transitions to be bound inside the tagged helper.
+inlineTransitions(diff);
+
 export default class TodoApp {
 	static create(mount) { return new TodoApp(mount); }
 
 	constructor(mount) {
-		addTransitionState('attached', this.animateAttached);
-		addTransitionState('detached', this.animateDetached);
-
 		this.mount = mount;
-		this.existingMarkup = this.mount.innerHTML;
+		this.existingFooter = this.mount.querySelector('footer').cloneNode(true);
 		this.unsubscribeStore = store.subscribe(() => this.render());
 
 		this.render();
 	}
 
-	animateAttached(element) {
+	animateAttached(parent, element) {
+		if (!element.animate) { return; }
+
 		if (element.matches('footer.info')) {
 			new Promise(resolve => element.animate([
 				{ opacity: 0, transform: 'scale(.5)' },
 				{ opacity: 1, transform: 'scale(1)' }
 			], { duration: 250 }).onfinish = resolve).then(() => {
 				element.style.opacity = 1;
-			}).then(null, warnAboutWebAnim);
+			});
 		}
 
 		// Animate Todo item being added.
@@ -38,7 +41,7 @@ export default class TodoApp {
 			new Promise(resolve => element.animate([
 				{ opacity: 0, transform: 'scale(.5)' },
 				{ opacity: 1, transform: 'scale(1)' }
-			], { duration: 250 }).onfinish = resolve).then(null, warnAboutWebAnim);
+			], { duration: 250 }).onfinish = resolve);
 		}
 
 		// Animate the entire app loading.
@@ -46,17 +49,19 @@ export default class TodoApp {
 			new Promise(resolve => element.animate([
 				{ opacity: 0, transform: 'translateY(100%)', easing: 'ease-out' },
 				{ opacity: 1, transform: 'translateY(0)' }
-			], { duration: 375 }).onfinish = resolve).then(null, warnAboutWebAnim);
+			], { duration: 375 }).onfinish = resolve);
 		}
 	}
 
-	animateDetached(el) {
+	animateDetached(parent, element) {
+		if (!element.animate) { return; }
+
 		// We are removing an item from the list.
-		if (el.matches('.todo-list li')) {
-			return new Promise(resolve => el.animate([
+		if (element.matches('.todo-list li')) {
+			return new Promise(resolve => element.animate([
 				{ opacity: 1, transform: 'scale(1)' },
 				{ opacity: 0, transform: 'scale(.5)' }
-			], { duration: 250 }).onfinish = resolve).then(null, warnAboutWebAnim);
+			], { duration: 250 }).onfinish = resolve);
 		}
 	}
 
@@ -198,6 +203,8 @@ export default class TodoApp {
 
 		innerHTML(this.mount, html`
 			<section class="todoapp"
+				attached=${this.animateAttached}
+				detached=${this.animateDetached}
 				onsubmit=${this.onSubmitHandler.bind(this)}
 				onclick=${this.onClickHandler.bind(this)}
 				onkeydown=${this.handleKeyDown.bind(this)}
@@ -260,7 +267,7 @@ export default class TodoApp {
 				` : ''}
 			</section>
 
-			${this.existingMarkup}
+			${this.existingFooter}
 		`);
 	}
 }

examples/diffhtml/package.json

@@ -23,15 +23,16 @@
     "babelify": "^7.3.0",
     "browserify": "^13.0.1",
     "derequire": "^2.0.3",
+    "diffhtml-inline-transitions": "^1.0.0-rc3",
     "mocha": "^2.5.3",
+    "transform-tagged-diffhtml": "tbranyen/transform-tagged-diffhtml#588e6ed052616dafa87bf735787f7770bc6d8ba5",
     "watchify": "^3.7.0"
   },
   "dependencies": {
-    "diffhtml": "tbranyen/diffhtml#a6570c577f1a08b78aca52ba68e19b4aed34c911",
+    "diffhtml": "tbranyen/diffhtml#24ad47b9b76bd6a2ccc2882a5f22f69e507d14cc",
     "redux": "^3.5.2",
     "redux-logger": "^2.6.1",
     "todomvc-app-css": "^2.0.6",
-    "todomvc-common": "^1.0.2",
-    "transform-tagged-diffhtml": "tbranyen/transform-tagged-diffhtml#588e6ed052616dafa87bf735787f7770bc6d8ba5"
+    "todomvc-common": "^1.0.2"
   }
 }