[react devtools][device storage] Device storage methods for React DevTools

[rbalicki2]

Summary

• React DevTools now accepts a deviceStorageMethods parameter to the object passed to connectToDevTools. These methods provide write and synchronous read access to persistent, on-device storage.
• This is used by React DevTools to cache certain settings, e.g. whether to append component stacks, etc. that are needed during the intial render of a React Native app. The source of truth of these settings is the frontend of React DevTools; this has not connected and is unavailable during the initial render of a React Native app.

Changelog

[General] [Added] - Pass methods that read/write from local storage, using react-mmkv-storage.

Test Plan

• Manually tested with standalone, behaved as expected

[github-actions]

	Warnings
⚠️	🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 150c1b0

[ecreeth]

nit: ^G2.4.3 -> ^2.4.3

[rbalicki2]

thanks!

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,618,866	-23,420
android	hermes	armeabi-v7a	7,032,799	-22,386
android	hermes	x86	7,918,814	-25,733
android	hermes	x86_64	7,892,497	-24,362
android	jsc	arm64-v8a	9,495,240	-19,476
android	jsc	armeabi-v7a	8,272,845	-18,288
android	jsc	x86	9,433,033	-21,678
android	jsc	x86_64	10,026,033	-20,031

Base commit: 9929ead
Branch: main

[rickhanlonii]

The source of truth of these settings is the frontend of React DevTools

Hm, what happens if the React DevTools connect to a different device than DevTools last used, or a different app on the same device than DevTools last used?

[facebook-github-bot]

@rbalicki2 has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[rbalicki2]

@rickhanlonii after some slight modifications (per a discussion with Luna), it will behave as follows:

• when DevTools connects to an app or when a setting is modified, React DevTools syncs (caches) its stringified settings on the device
• when an app starts up, it (before the first render) synchronously reads the most recent settings (as an unparsed) and passes those to the frontend.

So, there isn't an issue with the same DevTools being used with multiple apps, since information never flows from app -> DevTools. OTOH, if you connect an app to multiple DevTools, you will have different settings synced over. As long as the frontend and backend are compatible, though, it should be fine.

The frontend will parse the settings defensively, which (when we start syncing more complicated objects like component filters) probably means using a library. But for now, we're just parsing booleans and enums, which is easy enough to do manually.

Anyway, going to import this to fbsource.

[rickhanlonii]

@rbalicki2 awesome, yeah that makes sense!