Start putting the fiber docs together

[iamdustan]

No description provided.

[oatkiller]

👍 Not sure if this is ready, but I am eager to learn!

[ManasJayanth]

@iamdustan First off, great work. Love this repo. Based on TinyRenderer I did manage to write a bare basic dom and canvas renderer. (I can share it if you like).

Do you have any kind of notes/links/react PRs/github comments that can be referred. 1. I'd like to contribute here. 2. I want to make sure I'm on the right path writing renderers for fiber.

[iamdustan]

Oh I suppose I could land this 😅

@prometheansacrifice I don’t have any PRs for reference off-hand, but I do want to add those references to this repo/documentation as relevant.

[ManasJayanth]

Here's what I dug up

1. First fiber commit using a Noop Renderer: New Reconciler Infra
2. First commit integrating Host environment API: Host environment side-effects
3. Paul Irish's links
4. List of Fiber PRs

[ManasJayanth]

Appendix files are empty. Most likely, what is going to be the content of Rendering-A-Top-Level-Element and Reconcile-Transaction?

[kevzettler]

Is this good to merge? I'm attempting to write a renderer and found this repo. Seems the /stack examples are not up to date and fiber is about to land in react. Should I use this branch as a resource?

[kevzettler]

@prometheansacrifice I would appreciate a look at your canvas renderer if you don't mind

[ManasJayanth]

@kevzettler Just to illustrate, I've put together a snippet. Try it with a simple component like

const HelloWorld = ({ name }) => <div>Hello there <span>{ name }</span></div>;

It will however fail for stateful components.

class HelloWorld extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState((state, props) => {
        return {
          counter: state.counter + 1
        };
      });
    }, 1000);
  }
  render() {
    return (
      <div>
      counter is <span>{ this.state.counter }</span>
      </div>
    );
  }
}

Canvas is a immediate mode api and doesn't work well as is. You might want to look at ART and use it to write a renderer yourself (Though react officially has react-art) I did get a chance to write this myself, but let me know if I can help.

Which brings me to another question: Is react suited only for retained mode graphics? (Will probably open a SO question)

[iamdustan]

A bit premature perhaps, but I’ll still land this for now. It won’t work with the latest React 16 releases due to flat bundles, but if you stumble across this you can follow facebook/react#9103 for whenever a solution does land.