facebook / react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.
https://facebook.github.io/react-strict-dom
MIT License
3.17k stars 162 forks source link

How to enable React Native web capabilities? #21

Open necolas opened 8 months ago

necolas commented 8 months ago

Describe the feature request

React Native does not document how to enable the various web capabilities currently implemented on the Fabric architecture in the canary releases. Once that is available we can provide OSS users of RSD with specific instructions on how to use features that we currently rely on internally.

necolas commented 7 months ago

Does this look about right @rubennorte?

const ReactNativeFeatureFlags = require('react-native/src/private/featureflags/ReactNativeFeatureFlags');

ReactNativeFeatureFlags.override({
  // RuntimeScheduler processing the event loop will batch/dispatch rendering together at the end of each loop iteration
  batchRenderingUpdatesInEventLoop: () => boolean,
  // Enables access to the host tree in Fabric using DOM-compatible APIs.
  enableAccessToHostTreeInFabric: () => boolean,
  // Enables the use of microtasks in Hermes (scheduling) and RuntimeScheduler (execution).
  enableMicrotasks: () => boolean,
  // Dispatches state updates synchronously in Fabric (e.g.: updates the scroll position synchronously)
  enableSynchronousStateUpdates: () => boolean,
});
rubennorte commented 7 months ago

Does this look about right @rubennorte?

const ReactNativeFeatureFlags = require('react-native/src/private/featureflags/ReactNativeFeatureFlags');

ReactNativeFeatureFlags.override({
  // RuntimeScheduler processing the event loop will batch/dispatch rendering together at the end of each loop iteration
  batchRenderingUpdatesInEventLoop: () => boolean,
  // Enables access to the host tree in Fabric using DOM-compatible APIs.
  enableAccessToHostTreeInFabric: () => boolean,
  // Enables the use of microtasks in Hermes (scheduling) and RuntimeScheduler (execution).
  enableMicrotasks: () => boolean,
  // Dispatches state updates synchronously in Fabric (e.g.: updates the scroll position synchronously)
  enableSynchronousStateUpdates: () => boolean,
});

Those feature flags are internal, so users shouldn't access them directly. The only one we haven't enabled yet is the one to access the DOM tree. Let me talk to folks working on releases to see what's the right path forward for those.