Announcing React-RETINA (<canvas> for React v15 & also Preact compatible)

[xphung]

(An issue for attention of DevelopIT is listed at bottom of this announcement)

This library is an alternative implementation of React-ART/React-Canvas, except it is also compatible with Preact!! (as well as React+ReactDOM).

See:

https://github.com/xphung/react-retina

Features:

1. React-RETINA only uses standard/public React APIs.
2. The React-RETINA design avoids numerous React v15 anti-patterns (which React Canvas/React ART are guilty of using). There are no mixins, string Refs, or even Contexts. It does not use non standard lifecycle methods.
3. The React RETINA component library source code is much easier to understand as a result and is leaner and cleaner.
4. The View base component is extremely lightweight and specialised components (Image, Text, etc) are built on top of View via a custom draw callback. This is very flexible and allows virtually any drawable shape or component to be built on top of View.
5. Keyboard events are supported!!
6. Gallery component supports variable sized pages (whereas react-canvas ListView is limited to fixed size pages)
7. The React RETINA Backing Store implementation is simpler and cleaner to use - instead of requiring specialised hooks/lifecycle to manage invalidation and repaints, just assign a unique ID to the useBackingStore property to make the View the cache a repaint. Simply assign a new ID whenever an invalidation and repaint into Backing Store is required ... no need for a special Javascript calls or API to invalidate cache data!

[Attention DevelopIT, re: Preact vs React ~~ there seems to be differences in the lifecycle on when the ref function callback is called. The Gallery component of the above library relies on the Canvas DOM node being appended into the document at time of a Ref callback, as the callback uses the DOM node's focus() function to enable keyboard events. In React, focus() works correctly. In Preact, focus() on the DOM node does not work, as it seems the DOM node passed by the Ref callback has not yet been appended to the HTML document ... is this a difference in lifecycle management between React vs Preact? The result is that the user needs to manually click on the Canvas element before it can process keyboard events in Preact, but this is not needed in React]

[developit]

@xphung Yes, there is currently a small timing difference for refs. It was first reported as #477. I'm open to solutions for fixing the timing, just needs to be lightweight.

[developit]

Ref timing was fixed in 8. Cheers!