remove fid from Appear

Author: mathieudutour

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)
 

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>
     );

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
         });
       });