Remove certain compatibility logic for HTML and CSS props in favor of RN natively supported props

packages/react-strict-dom/babel/plugin.js

@@ -104,14 +104,6 @@ function reactStrictPlugin({ types: t }, options = {}) {
             if (t.isJSXAttribute(attribute) && attribute.name.name === 'for') {
               attribute.name.name = 'htmlFor';
             }
-            // Browser compat: 'role=none' replaced by 'role=presentation'
-            if (
-              t.isJSXAttribute(attribute) &&
-              attribute.name.name === 'role' &&
-              attribute.value.value === 'none'
-            ) {
-              attribute.value.value = 'presentation';
-            }
             // React DOM compat: 'style' replaced by resolver that produces React DOM props
             if (
               t.isJSXAttribute(attribute) &&

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

@@ -328,23 +328,16 @@ export function props(
       nextStyle.minWidth ??= styleValue;
     }
     // borderBlock
-    else if (styleProp === 'borderBlockColor') {
-      nextStyle.borderTopColor ??= styleValue;
-      nextStyle.borderBottomColor ??= styleValue;
-    } else if (styleProp === 'borderBlockStyle') {
+    else if (styleProp === 'borderBlockStyle') {
       nextStyle.borderTopStyle ??= styleValue;
       nextStyle.borderBottomStyle ??= styleValue;
     } else if (styleProp === 'borderBlockWidth') {
       nextStyle.borderTopWidth ??= styleValue;
       nextStyle.borderBottomWidth ??= styleValue;
-    } else if (styleProp === 'borderBlockEndColor') {
-      nextStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue;
     } else if (styleProp === 'borderBlockEndStyle') {
       nextStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue;
     } else if (styleProp === 'borderBlockEndWidth') {
       nextStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue;
-    } else if (styleProp === 'borderBlockStartColor') {
-      nextStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue;
     } else if (styleProp === 'borderBlockStartStyle') {
       nextStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue;
     } else if (styleProp === 'borderBlockStartWidth') {
@@ -373,16 +366,6 @@ export function props(
     } else if (styleProp === 'borderInlineStartWidth') {
       nextStyle.borderStartWidth = styleValue;
     }
-    // borderRadius
-    else if (styleProp === 'borderStartStartRadius') {
-      nextStyle.borderTopStartRadius = styleValue;
-    } else if (styleProp === 'borderEndStartRadius') {
-      nextStyle.borderBottomStartRadius = styleValue;
-    } else if (styleProp === 'borderStartEndRadius') {
-      nextStyle.borderTopEndRadius = styleValue;
-    } else if (styleProp === 'borderEndEndRadius') {
-      nextStyle.borderBottomEndRadius = styleValue;
-    }
     // borderStyle:"none" polyfill
     else if (styleProp === 'borderStyle' && styleValue === 'none') {
       nextStyle.borderWidth = 0;
@@ -397,63 +380,10 @@ export function props(
         nativeProps.cursorColor = styleValue;
       }
     }
-    // inset
-    else if (styleProp === 'inset') {
-      nextStyle.top ??= styleValue;
-      nextStyle.start ??= styleValue;
-      nextStyle.end ??= styleValue;
-      nextStyle.bottom ??= styleValue;
-    } else if (styleProp === 'insetBlock') {
-      nextStyle.top ??= styleValue;
-      nextStyle.bottom ??= styleValue;
-    } else if (styleProp === 'insetBlockEnd') {
-      nextStyle.bottom = flatStyle.bottom ?? styleValue;
-    } else if (styleProp === 'insetBlockStart') {
-      nextStyle.top = flatStyle.top ?? styleValue;
-    } else if (styleProp === 'insetInline') {
-      nextStyle.end ??= styleValue;
-      nextStyle.start ??= styleValue;
-    } else if (styleProp === 'insetInlineEnd') {
-      nextStyle.end = flatStyle.end ?? styleValue;
-    } else if (styleProp === 'insetInlineStart') {
-      nextStyle.start = flatStyle.start ?? styleValue;
-    }
     // lineClamp polyfill
     else if (styleProp === 'lineClamp') {
       nativeProps.numberOfLines = styleValue;
     }
-    // marginBlock
-    else if (styleProp === 'marginBlock') {
-      nextStyle.marginVertical = styleValue;
-    } else if (styleProp === 'marginBlockStart') {
-      nextStyle.marginTop ??= styleValue;
-    } else if (styleProp === 'marginBlockEnd') {
-      nextStyle.marginBottom ??= styleValue;
-    }
-    // marginInline
-    else if (styleProp === 'marginInline') {
-      nextStyle.marginHorizontal = styleValue;
-    } else if (styleProp === 'marginInlineStart') {
-      nextStyle.marginStart = styleValue;
-    } else if (styleProp === 'marginInlineEnd') {
-      nextStyle.marginEnd = styleValue;
-    }
-    // paddingBlock
-    else if (styleProp === 'paddingBlock') {
-      nextStyle.paddingVertical = styleValue;
-    } else if (styleProp === 'paddingBlockStart') {
-      nextStyle.paddingTop ??= styleValue;
-    } else if (styleProp === 'paddingBlockEnd') {
-      nextStyle.paddingBottom ??= styleValue;
-    }
-    // paddingInline
-    else if (styleProp === 'paddingInline') {
-      nextStyle.paddingHorizontal = styleValue;
-    } else if (styleProp === 'paddingInlineStart') {
-      nextStyle.paddingStart = styleValue;
-    } else if (styleProp === 'paddingInlineEnd') {
-      nextStyle.paddingEnd = styleValue;
-    }
     // '::placeholder' polyfill
     else if (styleProp === 'placeholderTextColor') {
       nativeProps.placeholderTextColor = styleValue;

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

@@ -7,8 +7,6 @@
  * @flow strict
  */
 
-import { version } from '../modules/version';
-
 const allowedStyleKeySet = new Set<string>([
   'alignContent',
   'alignItems',
@@ -122,6 +120,10 @@ const allowedStyleKeySet = new Set<string>([
   'mixBlendMode',
   'objectFit',
   'opacity',
+  'outlineColor',
+  'outlineOffset',
+  'outlineStyle',
+  'outlineWidth',
   'overflow',
   'padding',
   'paddingBlock',
@@ -167,13 +169,6 @@ const allowedStyleKeySet = new Set<string>([
   '::placeholder'
 ]);
 
-if (version.experimental) {
-  allowedStyleKeySet.add('outlineColor');
-  allowedStyleKeySet.add('outlineOffset');
-  allowedStyleKeySet.add('outlineStyle');
-  allowedStyleKeySet.add('outlineWidth');
-}
-
 export function isAllowedStyleKey(key: string): boolean {
   return (
     allowedStyleKeySet.has(key) ||

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

@@ -7,8 +7,6 @@
  * @flow strict
  */
 
-import { version } from '../modules/version';
-
 export const lengthStyleKeySet: Set<string> = new Set([
   'blockSize',
   'borderBottomLeftRadius',
@@ -65,6 +63,8 @@ export const lengthStyleKeySet: Set<string> = new Set([
   'minHeight',
   'minInlineSize',
   'minWidth',
+  'outlineOffset',
+  'outlineWidth',
   'padding',
   'paddingBlock',
   'paddingBlockEnd',
@@ -81,8 +81,3 @@ export const lengthStyleKeySet: Set<string> = new Set([
   'top',
   'width'
 ]);
-
-if (version.experimental) {
-  lengthStyleKeySet.add('outlineOffset');
-  lengthStyleKeySet.add('outlineWidth');
-}

packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js

@@ -219,7 +219,7 @@ export function createStrictDOMTextInputComponent<
     }
     if (readOnly != null) {
       // $FlowFixMe[react-rule-hook-mutation]
-      nativeProps.editable = !readOnly;
+      nativeProps.readOnly = readOnly;
     }
     if (spellCheck != null) {
       // $FlowFixMe[react-rule-hook-mutation]

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

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

packages/react-strict-dom/src/web/modules/createStrictDOMComponent.js

@@ -49,11 +49,6 @@ export function createStrictDOMComponent<T, P extends StrictProps>(
     if (htmlFor != null) {
       hostProps.htmlFor = htmlFor;
     }
-    if (props.role != null) {
-      // "presentation" synonym has wider browser support
-      // $FlowFixMe[incompatible-type]
-      hostProps.role = props.role === 'none' ? 'presentation' : props.role;
-    }
     if (TagName === 'button') {
       hostProps.type = hostProps.type ? hostProps.type : 'button';
     } else if (TagName === 'input' || TagName === 'textarea') {

packages/react-strict-dom/tests/__mocks__/react-native/index.js

@@ -68,9 +68,9 @@ export const Platform = {
   get constants() {
     return {
       reactNativeVersion: {
-        major: 1000,
-        minor: 0,
-        patch: 0,
+        major: 0,
+        minor: 79,
+        patch: 5,
         prerelease: undefined
       }
     };

packages/react-strict-dom/tests/__snapshots__/babel-test.node.js.snap

@@ -31,7 +31,7 @@ exports[`react-strict-dom/babel-preset [transform] <html.*> elements other props
 "import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime";
 import { html } from 'react-strict-dom';
 function App() {
-  return <div role="presentation" {..._rsdMerge(_rsdDefaultStyles.div)}>
+  return <div role="none" {..._rsdMerge(_rsdDefaultStyles.div)}>
                 <label htmlFor="for" {..._rsdMerge(_rsdDefaultStyles.label)} />
                 <input dir="auto" {..._rsdMerge(_rsdDefaultStyles.input)} />
                 <textarea dir="auto" {..._rsdMerge(_rsdDefaultStyles.textarea)} />

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

@@ -6,7 +6,7 @@ exports[`<compat.native> "as" equals "div": as=div 1`] = `
   ref={[Function]}
   style={
     {
-      "paddingHorizontal": 32,
+      "paddingInline": 32,
     }
   }
 />
@@ -68,7 +68,7 @@ exports[`<compat.native> default: default 1`] = `
   ref={[Function]}
   style={
     {
-      "paddingHorizontal": 32,
+      "paddingInline": 32,
     }
   }
 />
@@ -106,7 +106,7 @@ exports[`<compat.native> styled: styled 1`] = `
         "position": "absolute",
       },
       {
-        "paddingHorizontal": 32,
+        "paddingInline": 32,
       },
     ]
   }