Fixing fragment syncing, fixing fragments in export/overview mode

Author: kenwheeler

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.
+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.
 
 ####\<BlockQuote />, \<Quote/> and \<Cite /> (Base)
 

presentation/deck.jsx

@@ -49,17 +49,17 @@ export default class extends React.Component {
             margin="20px auto"/>
         </Slide>
         <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
-          <Appear>
+          <Appear fid="1">
             <Heading size={1} caps fit textColor="primary">
               Full Width
             </Heading>
           </Appear>
-          <Appear>
+          <Appear fid="2">
             <Heading size={1} caps fit textColor="tertiary">
               Adjustable Darkness
             </Heading>
           </Appear>
-          <Appear>
+          <Appear fid="3">
             <Heading size={1} caps fit textColor="primary">
               Background Imagery
             </Heading>
@@ -96,12 +96,12 @@ export default class extends React.Component {
         </Slide>
         <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
           <List>
-            <ListItem><Appear>Inline style based theme system</Appear></ListItem>
-            <ListItem><Appear>Autofit text</Appear></ListItem>
-            <ListItem><Appear>Flexbox layout system</Appear></ListItem>
-            <ListItem><Appear>React-Router navigation</Appear></ListItem>
-            <ListItem><Appear>PDF export</Appear></ListItem>
-            <ListItem><Appear>And...</Appear></ListItem>
+            <ListItem><Appear fid="1">Inline style based theme system</Appear></ListItem>
+            <ListItem><Appear fid="2">Autofit text</Appear></ListItem>
+            <ListItem><Appear fid="3">Flexbox layout system</Appear></ListItem>
+            <ListItem><Appear fid="4">React-Router navigation</Appear></ListItem>
+            <ListItem><Appear fid="5">PDF export</Appear></ListItem>
+            <ListItem><Appear fid="6">And...</Appear></ListItem>
           </List>
         </Slide>
         <Slide transition={["slide"]} bgColor="primary">

src/appear.jsx

@@ -16,27 +16,22 @@ const Appear = React.createClass({
   getInitialState() {
     return {
       active: false,
-      opacity: 0
+      opacity: this.context.export || this.context.overview ? 1 : 0
     };
   },
   componentDidMount() {
     this.context.flux.stores.SlideStore.listen(this._storeChange);
     const slide = this.context.slide;
-    this.context.flux.actions.SlideActions.addFragment({
-      slide,
-      id: this._reactInternalInstance._rootNodeID,
-      visible: false
-    });
   },
   componentWillUnmount() {
     this.context.flux.stores.SlideStore.unlisten(this._storeChange);
   },
   _storeChange(state) {
     const slide = this.context.slide;
     const key = _.findKey(state.fragments[slide], {
-      "id": this._reactInternalInstance._rootNodeID
+      "id": this.props.fid
     });
-    if (state.fragments[slide].hasOwnProperty(key)) {
+    if (slide in state.fragments && state.fragments[slide].hasOwnProperty(key)) {
       this.setState({
         active: state.fragments[slide][key].visible
       }, () => {
@@ -57,7 +52,7 @@ const Appear = React.createClass({
       opacity: this.getTweeningValue("opacity")
     };
     return (
-      <div style={styles} className="fragment">
+      <div style={styles} className="fragment" data-fid={this.props.fid}>
         {this.props.children}
       </div>
     );

src/slide.jsx

@@ -26,7 +26,8 @@ const Slide = React.createClass({
     styles: React.PropTypes.object,
     export: React.PropTypes.bool,
     print: React.PropTypes.bool,
-    overview: React.PropTypes.bool
+    overview: React.PropTypes.bool,
+    flux: React.PropTypes.object
   },
   getInitialState() {
     return {
@@ -47,6 +48,17 @@ const Slide = React.createClass({
   },
   componentDidMount() {
     this.setZoom();
+    const slide = React.findDOMNode(this.refs.slide);
+    const frags = slide.querySelectorAll(".fragment");
+    if (frags && frags.length) {
+      Array.prototype.slice.call(frags, 0).forEach((frag) => {
+        this.context.flux.actions.SlideActions.addFragment({
+          slide: this.props.slideIndex,
+          id: frag.dataset.fid,
+          visible: false
+        });
+      })
+    }
     window.addEventListener("load", this.setZoom);
     window.addEventListener("resize", this.setZoom);
   },
@@ -88,6 +100,7 @@ const Slide = React.createClass({
     };
     return (
       <div className="spectacle-slide"
+        ref="slide"
         style={[
           styles.outer,
           this.getStyles(),