Add native polyfill for willChange

.flowconfig

@@ -16,6 +16,7 @@ component_syntax=true
 module.name_mapper='^react-strict-dom$' -> '<PROJECT_ROOT>/packages/react-strict-dom/dist/native/index.js.flow'
 module.system.node.resolve_dirname=flow_modules
 module.system.node.resolve_dirname=node_modules
+react.runtime=automatic
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 

apps/website/docs/api/02-css/index.md

@@ -277,5 +277,6 @@ The following tables represent the compatibility status of the strict CSS API fo
 | visibility | 🟡 | 🟡 | |
 | whiteSpace | ❌ | ❌ | |
 | width | ✅ | ✅ | |
+| willChange | 🟡 | 🟡 | |
 | wordBreak | ❌ | ❌ | |
 | zIndex | ✅ | ✅ | [#100](https://github.com/facebook/react-strict-dom/issues/100) |

packages/react-strict-dom/src/native/css/index.js

@@ -469,6 +469,12 @@ export function props(
       nextStyle.alignContent ??= styleValue;
       nextStyle.justifyContent ??= styleValue;
     }
+    // willChange polyfill
+    else if (styleProp === 'willChange') {
+      if (typeof styleValue === 'string' && styleValue !== 'auto') {
+        nativeProps.renderToHardwareTextureAndroid = true;
+      }
+    }
     // Everything else
     else {
       nextStyle[styleProp] = styleValue;

packages/react-strict-dom/src/native/css/isAllowedStyleKey.js

@@ -156,6 +156,7 @@ const allowedStyleKeySet = new Set<string>([
   'verticalAlign', // Android Only
   'visibility',
   'width',
+  'willChange', // Android Only
   'zIndex',
   // Object-value keys
   'default',

packages/react-strict-dom/src/types/renderer.native.js

@@ -109,6 +109,7 @@ type ReactNativeProps = {
   pointerEvents?: ViewProps['pointerEvents'],
   ref?: $FlowFixMe,
   referrerPolicy?: ImageProps['referrerPolicy'],
+  renderToHardwareTextureAndroid?: ViewProps['renderToHardwareTextureAndroid'],
   role?: ?string,
   secureTextEntry?: TextInputProps['secureTextEntry'],
   spellCheck?: TextInputProps['spellCheck'],

packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native

@@ -773,6 +773,13 @@ exports[`properties: general visibility: visible 1`] = `
 }
 `;
 
+exports[`properties: general willChange 1`] = `
+{
+  "renderToHardwareTextureAndroid": true,
+  "style": {},
+}
+`;
+
 exports[`properties: logical direction blockSize: blockSize 1`] = `
 {
   "style": {

packages/react-strict-dom/tests/css-test.native.js

@@ -775,6 +775,15 @@ describe('properties: general', () => {
       'visible'
     );
   });
+
+  test('willChange', () => {
+    const styles = css.create({
+      root: {
+        willChange: 'transform'
+      }
+    });
+    expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
 });
 
 /**

packages/react-strict-dom/tools/rollup.config.mjs

@@ -55,7 +55,10 @@ const webConfigs = [
       file: path.join(__dirname, '../dist/dom/index.js'),
       format: 'es'
     },
-    plugins: [...sharedPlugins]
+    plugins: [...sharedPlugins],
+    treeshake: {
+      moduleSideEffects: false,
+    },
   },
   // Runtime
   {
@@ -65,7 +68,10 @@ const webConfigs = [
       file: path.join(__dirname, '../dist/dom/runtime.js'),
       format: 'es'
     },
-    plugins: [...sharedPlugins]
+    plugins: [...sharedPlugins],
+    treeshake: {
+      moduleSideEffects: false,
+    },
   }
 ];