From d60b019d5cd0bef67587477b31c10488119de342 Mon Sep 17 00:00:00 2001
From: Mathieu Dutour <mathieu@dutour.me>
Date: Thu, 9 Jul 2015 12:38:55 +0100
Subject: [PATCH 1/2] lint

---
 src/appear.jsx | 4 ++--
 src/slide.jsx  | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/appear.jsx b/src/appear.jsx
index b1423a7e7..b4779ccc8 100644
--- a/src/appear.jsx
+++ b/src/appear.jsx
@@ -5,7 +5,8 @@ import _ from "lodash";
 const Appear = React.createClass({
   mixins: [tweenState.Mixin],
   propTypes: {
-    children: React.PropTypes.node
+    children: React.PropTypes.node,
+    fid: React.PropTypes.string.isRequired
   },
   contextTypes: {
     flux: React.PropTypes.object,
@@ -21,7 +22,6 @@ const Appear = React.createClass({
   },
   componentDidMount() {
     this.context.flux.stores.SlideStore.listen(this._storeChange);
-    const slide = this.context.slide;
   },
   componentWillUnmount() {
     this.context.flux.stores.SlideStore.unlisten(this._storeChange);
diff --git a/src/slide.jsx b/src/slide.jsx
index 5a4b98644..87e8c2f90 100644
--- a/src/slide.jsx
+++ b/src/slide.jsx
@@ -20,7 +20,8 @@ const Slide = React.createClass({
     align: React.PropTypes.string,
     presenterStyle: React.PropTypes.object,
     children: React.PropTypes.node,
-    notes: React.PropTypes.string
+    notes: React.PropTypes.string,
+    slideIndex: React.PropTypes.number
   },
   contextTypes: {
     styles: React.PropTypes.object,
@@ -57,7 +58,7 @@ const Slide = React.createClass({
           id: frag.dataset.fid,
           visible: false
         });
-      })
+      });
     }
     window.addEventListener("load", this.setZoom);
     window.addEventListener("resize", this.setZoom);

From 7c73d4b55942eb85e8fd755c4391ec010f02c4f3 Mon Sep 17 00:00:00 2001
From: Mathieu Dutour <mathieu@dutour.me>
Date: Thu, 9 Jul 2015 14:40:42 +0100
Subject: [PATCH 2/2] remove fid from Appear

---
 README.markdown | 2 +-
 src/appear.jsx  | 8 ++++----
 src/slide.jsx   | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.markdown b/README.markdown
index e8ea4d417..f80c12409 100644
--- a/README.markdown
+++ b/README.markdown
@@ -216,7 +216,7 @@ The element tags are the bread and butter of your slide content. Most of these t
 
 ####\<Appear />
 
-This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation. The Appear tag requires adding `fid` tags that are unique within a given slide. This requirement will go away in React 0.14.
+This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation.
 
 ####\<BlockQuote />, \<Quote/> and \<Cite /> (Base)
 
diff --git a/src/appear.jsx b/src/appear.jsx
index b4779ccc8..4c6dbd906 100644
--- a/src/appear.jsx
+++ b/src/appear.jsx
@@ -5,8 +5,7 @@ import _ from "lodash";
 const Appear = React.createClass({
   mixins: [tweenState.Mixin],
   propTypes: {
-    children: React.PropTypes.node,
-    fid: React.PropTypes.string.isRequired
+    children: React.PropTypes.node
   },
   contextTypes: {
     flux: React.PropTypes.object,
@@ -28,8 +27,9 @@ const Appear = React.createClass({
   },
   _storeChange(state) {
     const slide = this.context.slide;
+    const fragment = React.findDOMNode(this.refs.fragment);
     const key = _.findKey(state.fragments[slide], {
-      "id": this.props.fid
+      "id": parseInt(fragment.dataset.fid)
     });
     if (slide in state.fragments && state.fragments[slide].hasOwnProperty(key)) {
       this.setState({
@@ -52,7 +52,7 @@ const Appear = React.createClass({
       opacity: this.getTweeningValue("opacity")
     };
     return (
-      <div style={styles} className="fragment" data-fid={this.props.fid}>
+      <div style={styles} className="fragment" ref="fragment">
         {this.props.children}
       </div>
     );
diff --git a/src/slide.jsx b/src/slide.jsx
index 87e8c2f90..58e3a61f1 100644
--- a/src/slide.jsx
+++ b/src/slide.jsx
@@ -52,10 +52,11 @@ const Slide = React.createClass({
     const slide = React.findDOMNode(this.refs.slide);
     const frags = slide.querySelectorAll(".fragment");
     if (frags && frags.length) {
-      Array.prototype.slice.call(frags, 0).forEach((frag) => {
+      Array.prototype.slice.call(frags, 0).forEach((frag, i) => {
+        frag.dataset.fid = i;
         this.context.flux.actions.SlideActions.addFragment({
           slide: this.props.slideIndex,
-          id: frag.dataset.fid,
+          id: i,
           visible: false
         });
       });