add react-strict-animated library

[vincentriemer]

This introduces a new package to the RSD repo that provides a subset of React Native's API that works on both web and native, and built with integration of react-strict-dom in mind. The native implementation is largely a thin passthrough to the proper Animated API and some settings pre-configured (such as useAnimatedDriver always being enabled).

The web side is a new Animated implementation that ends up being driven by the Web Animations API.

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

Results	Base	Patch	Ratio
react-strict-dom/dist/web/index.js
· compressed	3,251	3,251	1.00
· minified	10,375	10,375	1.00
react-strict-dom/dist/web/runtime.js
· compressed	1,645	1,645	1.00
· minified	4,131	4,131	1.00
react-strict-dom/dist/native/index.js
· compressed	16,232	16,232	1.00
· minified	62,962	62,962	1.00
react-strict-animated/dist/web/index.js
· compressed		6,896
· minified		23,698
react-strict-animated/dist/native/index.js
· compressed		586
· minified		1,801

[github-actions]

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better.

Results	Base	Patch	Ratio
css.create
· small	1,142,268	1,146,256	1.00	+
· small with units	492,431	494,718	1.00	+
· small with variables	668,880	672,392	1.01	+
· several small	352,288	354,471	1.01	+
· large	202,182	200,826	0.99	-
· large with polyfills	148,034	149,301	1.01	+
· complex	102,183	103,124	1.01	+
· unsupported	211,894	213,841	1.01	+
css.createTheme
· simple theme	228,835	226,694	0.99	-
· polyfill theme	216,403	214,832	0.99	-
css.props
· small	231,931	230,923	1.00	-
· small with units	187,373	189,235	1.01	+
· small with variables	112,861	112,824	1.00	-
· small with variables of units	82,309	82,446	1.00	+
· large	96,865	96,936	1.00	+
· large with polyfills	37,959	38,365	1.01	+
· complex	21,932	22,025	1.00	+
· unsupported	139,215	140,146	1.01	+
· simple merge	160,013	160,071	1.00	+
· wide merge	16,885	16,890	1.00	+
· deep merge	16,605	16,646	1.00	+
· themed merge	32,372	32,301	1.00	-

[necolas]

Thanks for bringing the animation library you've made to the OSS project! Want a hand with the build and package parts?

[vincentriemer]

Thanks for bringing the animation library you've made to the OSS project! Want a hand with the build and package parts?

So I recreated the build system that's basically exactly like how RSD is built but I'm running into some issues related to the generate-types utility:

• As you can tell from the checks the generate-types output contains flow errors
• I had to update my implementation to stop using the hook syntax as that broke the generate-types script.
• Upon inspection of the typescript output of generate-types it looks like its outputting a bunch of anys because it says that features like React.PropsOf and React.RefOf is unsupported.

[vincentriemer]

I've tried digging into how to resolve the type generation issues but haven't had any luck yet :/

[necolas]

We can try upgrading the translator package. And if that doesn't work, report the issues to the flow team

[vincentriemer]

Okay I updated the flow-api-translator which didn't seem to do much but I did find a way to reorganize the exports so that there were no more flow errors after building.

[necolas]

Any ideas on how we might have some unit test coverage for the library?

We could also add a couple of e2e examples in the platform-tests app

[necolas]

This error message probably doesn't make sense in an XPR/RSD/Web context

[necolas]

Is there any way we could avoid the need for normalizeColor?

[necolas]

Can animatedStyle be passed to compat.native so it picks up any relevant polyfills?