Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.18 preview release #2248

Merged
merged 17 commits into from
Jun 10, 2022
Merged

0.18 preview release #2248

merged 17 commits into from
Jun 10, 2022

Conversation

necolas
Copy link
Owner

@necolas necolas commented Mar 2, 2022

0.18 preview

Breaking changes

  • Browser support has been reduced: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
  • StyleSheet.create() is now the identify function, returning the input style objects. Previously, it replaced styles with numeric ids. This improves compatibility with React Native, but accessing the returned style objects at runtime is still not recommended as it can prevent static extraction to CSS. (Stylesheet.create incompatible return type #2068)
  • React 18 optimizations mean that styles are now inserted on module eval, not component render. Server-rendering can continue using AppRegistry to inline styles, but all styles in eval-ed modules will be included, rather than only the styles produced by the initial render. The StyleSheet.getSheet() API can also be used to retrieve the current style sheet as a CSS string. (React 18 support #2196)
  • I18nManager is now a mock API included only for compatibility with React Native. The ability to swap between left/right values for RTL writing directions has been removed entirely. See below for new localization APIs.
  • Inline styles are no longer automatically vendor-prefixed. This improves inline style performance and discourages use of inline styles. This should have little effect in practice if your app is predominantly using StyleSheet.create().
  • The deprecated accessible, accessibilityState, and accessibilityValue props have been removed.
  • The :focus-visible polyfill has been removed, as by default modern browsers no longer show focus rings for pointer interactions.
  • VirtualizedList, FlatList, and SectionList vendor components have been updated to match latest React Native. (Updated VirtualizedList vendor files (with FlatList, SectionList) #2241) Thanks to @DavidRieman.
  • The jest preset and snapshot serializer has been removed.
  • The unstable_createElement API has changed. Children are no longer accepted as the 3rd argument, they must be included in the props as the 2nd argument. The 3rd argument is now an options object with a field to set the expected writing direction ({ writingDirection }).

New features

  • Localized LTR/RTL layouts can now be nesting to arbitrary depths simply by setting the dir or lang prop on a component.
  • Localized LTR/RTL layouts can be switched dynamically at runtime.
  • A new useLocaleContext API is exported to query a component's locale and writing direction for fine-grained control over localized layout.
  • Rendering into multiple windows and shadow roots in now supported. (Styles should work with ShadowDOM roots. #1517, feat: shadow root support #2138)
  • Extraction to static CSS and consumption of external CSS is now possible. The StyleSheet runtime can consume any styles that match an expected format. (See below for more details.)

Fixes

Notes

StyleSheet runtime

StyleSheet has been rewritten to better separate the runtime from the compiler. The performance of the new merging runtime is on par with using css-modules. The core runtime is a standalone package called styleQ; refer to the styleQ documentation for more details.

image

The performance of inline styles has also been significantly improved, although StyleSheet still has to perform extra work to transform non-standard React Native styles and polyfill logical styles.

image

The StyleSheet import is now a standalone module. StyleSheet itself is a function that can be called to resolve styles to DOM className and style values, e.g.,

const [ className, inlineStyle ] = StyleSheet([ styles.root, prop.styles ])

StyleSheet extraction

One of the benefits behind the new architecture is that StyleSheet can now resolve compiled styles that conform to the expected format, whether they are produced by the built-in compiler or an external source.

Style compilers must produce annotated objects that are treated as class name maps, and classes are deduped based on whether they share the same key, e.g.,

{
  $$css: true,
  display: 'display-class',
  opacity: 'opacity-class'
}

This is the first step towards allowing 3rd party tools to extract styles to static CSS files, and optionally dropping the client-side compiler, without needing to integrate deeply with the StyleSheet runtime or having to modify props/prop values in the source code, i.e., only the StyleSheet.create() call needs transforming by the compiler.

The existence of the StyleSheet.flatten() API can be a problem for build-time compiling of some styles. Components that flatten styles expect to be able to work with the source styles, and use the source values at runtime. A compiler that aims to extract all styles and have no runtime transform would need to disallow the use of StyleSheet.flatten() entirely (unfortunately it's also used by the Animated API internals).

necolas added 3 commits March 2, 2022 10:06
We only need to test against the baseline of css-modules.

Fix #2210
Removes 'accessible', 'accessibilityState', and 'accessibilityValue' props.
@necolas necolas added this to the 0.18: StyleSheet milestone Mar 2, 2022
@necolas necolas mentioned this pull request Mar 2, 2022
7 tasks
@github-actions
Copy link

github-actions bot commented Mar 2, 2022

Size change: -0.29 kB
Total size: 130.80 kB

Filename: gzip (minify) kB size kB change % change
./packages/react-native-web/dist/exports/AccessibilityInfo/index.js 0.49 (1.54) +0.01 (+0.06) +2.1% (+3.8%) 🟡
./packages/react-native-web/dist/exports/ActivityIndicator/index.js 0.98 (1.97) -0.01 (-0.02) -0.6% (-1.2%) 🟢
./packages/react-native-web/dist/exports/Appearance/index.js 0.34 (0.69) +0.01 (+0.06) +2.7% (+8.8%)
./packages/react-native-web/dist/exports/AppRegistry/renderApplication.js 0.51 (0.99) -0.01 (-0.03) -1.5% (-2.5%) 🟢
./packages/react-native-web/dist/exports/AppState/index.js 0.90 (2.02) +0.01 (+0.05) +0.7% (+2.6%)
./packages/react-native-web/dist/exports/CheckBox/index.js 1.80 (3.72) +0.00 (+0.01) +0.2% (+0.2%)
./packages/react-native-web/dist/exports/createElement/index.js 0.27 (0.51) -0.01 (+0.04) -4.2% (+9.3%) 🟢
./packages/react-native-web/dist/exports/DeviceInfo/index.js 0.32 (0.72) +0.01 (+0.05) +2.2% (+7.7%)
./packages/react-native-web/dist/exports/Dimensions/index.js 0.55 (1.38) +0.01 (+0.05) +1.1% (+3.9%)
./packages/react-native-web/dist/exports/I18nManager/index.js 0.11 (0.13) -0.23 (-0.68) -66.4% (-83.9%) 🟢
./packages/react-native-web/dist/exports/Image/index.js 2.69 (6.53) -0.02 (-0.08) -0.8% (-1.2%) 🟢
./packages/react-native-web/dist/exports/ImageBackground/index.js 0.56 (1.04) -0.00 (0.00) -0.2% (0.0%)
./packages/react-native-web/dist/exports/Linking/index.js 0.64 (1.36) +0.02 (+0.09) +3.2% (+6.7%) 🔴
./packages/react-native-web/dist/exports/Modal/ModalContent.js 0.53 (1.03) +0.01 (+0.06) +1.1% (+6.0%)
./packages/react-native-web/dist/exports/Modal/ModalFocusTrap.js 0.72 (2.02) +0.00 (+0.05) +0.6% (+2.6%)
./packages/react-native-web/dist/exports/Modal/ModalPortal.js 0.30 (0.59) +0.01 (+0.06) +2.4% (+10.4%)
./packages/react-native-web/dist/exports/Picker/PickerItem.js 0.16 (0.20) +0.01 (+0.01) +3.2% (+4.6%)
./packages/react-native-web/dist/exports/Pressable/index.js 1.21 (2.75) +0.02 (+0.04) +1.3% (+1.4%) 🟡
./packages/react-native-web/dist/exports/ProgressBar/index.js 0.81 (1.56) -0.05 (-0.09) -6.3% (-5.4%) 🟢
./packages/react-native-web/dist/exports/render/index.js 0.15 (0.26) +0.08 (+0.18) +101.3% (+236.8%) 🔴
./packages/react-native-web/dist/exports/SafeAreaView/index.js 0.60 (1.23) +0.01 (+0.05) +1.0% (+4.4%)
./packages/react-native-web/dist/exports/StyleSheet/compile.js 0.00 (0.00) -1.62 (-4.41) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/constants.js 0.00 (0.00) -0.54 (-1.35) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/createCompileableStyle.js 0.00 (0.00) -0.54 (-1.29) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/createCSSStyleSheet.js 0.00 (0.00) -0.23 (-0.32) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/createOrderedCSSStyleSheet.js 0.00 (0.00) -0.69 (-1.40) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/createReactDOMStyle.js 0.00 (0.00) -0.90 (-1.96) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/createStyleResolver.js 0.00 (0.00) -1.33 (-3.33) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/css.js 0.00 (0.00) -0.12 (-0.13) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/flattenStyle.js 0.00 (0.00) -0.31 (-0.49) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/i18nStyle.js 0.00 (0.00) -0.84 (-2.62) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/index.js 1.31 (3.17) +1.13 (+2.93) +643.2% (+1221.3%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/initialRules.js 0.00 (0.00) -0.22 (-0.40) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/modality.js 0.00 (0.00) -0.85 (-2.52) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/normalizeValueWithProperty.js 0.00 (0.00) -0.27 (-0.49) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/ReactNativePropRegistry.js 0.00 (0.00) -0.31 (-0.50) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/resolveShadowValue.js 0.00 (0.00) -0.28 (-0.54) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/styleResolver.js 0.00 (0.00) -0.09 (-0.12) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/StyleSheet.js 0.00 (0.00) -0.47 (-0.91) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/validate.js 0.62 (1.21) +0.14 (+0.39) +30.1% (+48.0%) 🔴
./packages/react-native-web/dist/exports/Switch/index.js 1.64 (4.21) +0.00 (+0.01) +0.1% (+0.2%)
./packages/react-native-web/dist/exports/Text/index.js 1.88 (5.33) +0.29 (+0.98) +18.2% (+22.5%) 🔴
./packages/react-native-web/dist/exports/TextInput/index.js 2.48 (6.77) +0.07 (+0.21) +2.7% (+3.3%) 🔴
./packages/react-native-web/dist/exports/TouchableHighlight/index.js 1.17 (2.62) +0.01 (+0.03) +0.9% (+1.2%) 🟡
./packages/react-native-web/dist/exports/TouchableOpacity/index.js 1.06 (2.28) +0.01 (+0.03) +1.2% (+1.3%) 🟡
./packages/react-native-web/dist/exports/View/index.js 1.65 (4.65) +0.24 (+0.82) +17.5% (+21.5%) 🔴
./packages/react-native-web/dist/index.js 0.84 (4.08) +0.01 (+0.06) +1.6% (+1.4%) 🟡
./packages/react-native-web/dist/modules/createDOMProps/index.js 1.93 (5.89) -0.34 (-0.96) -15.1% (-14.0%) 🟢
./packages/react-native-web/dist/modules/createEventHandle/index.js 0.52 (1.17) +0.01 (+0.05) +1.4% (+4.7%)
./packages/react-native-web/dist/modules/flattenArray/index.js 0.00 (0.00) -0.15 (-0.18) -100.0% (-100.0%) 🟢
./packages/react-native-web/dist/modules/forwardedProps/index.js 0.58 (1.88) -0.01 (-0.06) -1.4% (-3.0%) 🟢
./packages/react-native-web/dist/modules/modality/index.js 1.22 (4.45) +0.01 (+0.05) +0.4% (+1.2%)
./packages/react-native-web/dist/modules/pick/index.js 0.12 (0.11) -0.02 (-0.03) -11.7% (-19.0%) 🟢
./packages/react-native-web/dist/modules/prefixStyles/index.js 0.12 (0.17) -0.10 (-0.16) -44.2% (-48.8%) 🟢
./packages/react-native-web/dist/modules/prefixStyles/static.js 0.56 (1.64) -0.40 (-1.34) -41.4% (-45.0%) 🟢
./packages/react-native-web/dist/modules/requestIdleCallback/index.js 0.29 (0.61) +0.01 (+0.05) +3.6% (+9.4%) 🟡
./packages/react-native-web/dist/modules/useElementLayout/index.js 0.68 (1.42) +0.01 (+0.05) +0.7% (+3.8%)
./packages/react-native-web/dist/modules/useLayoutEffect/index.js 0.15 (0.24) +0.01 (+0.05) +7.9% (+26.9%) 🟡
./packages/react-native-web/dist/modules/usePlatformMethods/index.js 0.78 (1.87) +0.04 (+0.06) +5.6% (+3.1%) 🔴
./packages/react-native-web/dist/modules/useResponderEvents/ResponderSystem.js 1.90 (6.09) +0.01 (+0.05) +0.4% (+0.9%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedStyle.js 0.96 (2.89) +0.01 (+0.02) +0.5% (+0.6%)
./packages/react-native-web/dist/vendor/react-native/FlatList/index.js 2.26 (7.13) +0.11 (+0.46) +5.0% (+6.8%) 🔴
./packages/react-native-web/dist/vendor/react-native/SectionList/index.js 0.82 (2.17) -0.15 (-0.64) -15.9% (-22.9%) 🟢
./packages/react-native-web/dist/vendor/react-native/VirtualizedList/index.js 8.85 (31.35) +0.16 (+1.27) +1.9% (+4.2%) 🔴
./packages/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 3.08 (8.94) +0.10 (-0.42) +3.2% (-4.5%) 🔴
./packages/react-native-web/dist/vendor/react-native/VirtualizeUtils/index.js 0.86 (1.55) -0.03 (-0.17) -3.2% (-9.8%) 🟢
./packages/react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle.js 1.23 (3.02) +1.23 (+3.02) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/hash.js 0.30 (0.71) +0.30 (+0.71) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/hyphenateStyleName.js 0.20 (0.29) +0.20 (+0.29) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/index.js 2.51 (7.43) +2.51 (+7.43) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/normalizeColor.js 0.24 (0.37) +0.24 (+0.37) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/normalizeValueWithProperty.js 0.26 (0.46) +0.26 (+0.46) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/resolveShadowValue.js 0.27 (0.52) +0.27 (+0.52) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/compiler/unitlessNumbers.js 0.46 (0.95) +0.46 (+0.95) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/dom/createCSSStyleSheet.js 0.31 (0.49) +0.31 (+0.49) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js 0.72 (1.49) +0.72 (+1.49) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/dom/index.js 0.58 (1.43) +0.58 (+1.43) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/StyleSheet/preprocess.js 0.55 (1.51) +0.55 (+1.51) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/exports/useLocaleContext/index.js 0.07 (0.05) +0.07 (+0.05) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/modules/useLocale/index.js 0.27 (0.52) +0.27 (+0.52) +100.0% (+100.0%) 🔴
./packages/react-native-web/dist/modules/useLocale/isLocaleRTL.js 0.31 (0.48) +0.31 (+0.48) +100.0% (+100.0%) 🔴
View unchanged
Filename: gzip (minify) kB size kB change % change
./packages/react-native-web/dist/exports/Alert/index.js 0.08 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Animated/index.js 0.08 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/AppRegistry/AppContainer.js 0.29 (0.56) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/AppRegistry/index.js 1.04 (2.98) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/BackHandler/index.js 0.13 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Button/index.js 0.46 (0.86) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Clipboard/index.js 0.40 (0.78) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/DeviceEventEmitter/index.js 0.10 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/DrawerLayoutAndroid/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Easing/index.js 0.09 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/findNodeHandle/index.js 0.13 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/FlatList/index.js 0.08 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Image/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/InputAccessoryView/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/InteractionManager/index.js 0.32 (0.64) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Keyboard/index.js 0.15 (0.25) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/KeyboardAvoidingView/index.js 0.71 (1.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/LayoutAnimation/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/LogBox/index.js 0.09 (0.13) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/index.js 0.62 (1.61) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Modal/ModalAnimation.js 0.73 (1.87) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/NativeEventEmitter/index.js 0.09 (0.11) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/NativeModules/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PanResponder/Alternative.js 0.94 (3.41) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PanResponder/index.js 0.09 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PermissionsAndroid/index.js 0.15 (0.22) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Picker/index.js 0.85 (1.90) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/PixelRatio/index.js 0.21 (0.40) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Platform/index.js 0.14 (0.15) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/processColor/index.js 0.15 (0.19) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/RefreshControl/index.js 0.35 (0.61) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ScrollView/index.js 2.45 (7.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ScrollView/ScrollViewBase.js 1.01 (2.32) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/SectionList/index.js 0.09 (0.09) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Settings/index.js 0.04 (0.02) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Share/index.js 0.55 (1.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/StatusBar/index.js 0.17 (0.30) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Systrace/index.js 0.04 (0.02) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Text/TextAncestorContext.js 0.09 (0.11) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Text/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TextInput/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/ToastAndroid/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/BoundingDimensions.js 0.25 (0.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/ensurePositiveDelayProps.js 0.18 (0.26) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/index.js 3.45 (14.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Touchable/Position.js 0.19 (0.31) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TouchableNativeFeedback/index.js 0.08 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TouchableWithoutFeedback/index.js 0.62 (1.40) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/TVEventHandler/index.js 0.04 (0.02) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/UIManager/index.js 0.67 (1.40) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/unmountComponentAtNode/index.js 0.08 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/useColorScheme/index.js 0.20 (0.34) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/useWindowDimensions/index.js 0.24 (0.42) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/Vibration/index.js 0.15 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/View/types.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/VirtualizedList/index.js 0.09 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/exports/YellowBox/index.js 0.16 (0.22) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/index.js 0.14 (0.33) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/isDisabled.js 0.13 (0.16) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js 0.38 (0.66) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AccessibilityUtil/propsToAriaRole.js 0.24 (0.37) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/AssetRegistry/index.js 0.10 (0.12) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/dismissKeyboard/index.js 0.14 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/getBoundingClientRect/index.js 0.13 (0.18) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/ImageLoader/index.js 0.76 (1.69) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/isSelectionValid/index.js 0.17 (0.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/isWebColor/index.js 0.12 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/mergeRefs/index.js 0.26 (0.35) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/multiplyStyleLengthValue/index.js 0.24 (0.34) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/normalizeColor/index.js 0.23 (0.36) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/ScrollResponder/index.js 1.48 (5.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/setValueForStyles/dangerousStyleValue.js 0.19 (0.27) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/setValueForStyles/index.js 0.20 (0.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/TextInputState/index.js 0.22 (0.51) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/UnimplementedView/index.js 0.40 (0.75) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/unitlessNumbers/index.js 0.46 (0.95) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useEvent/index.js 0.25 (0.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useHover/index.js 0.71 (1.67) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useMergeRefs/index.js 0.19 (0.26) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/usePressEvents/index.js 0.24 (0.39) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/usePressEvents/PressResponder.js 2.01 (7.44) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/createResponderEvent.js 0.77 (1.92) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/index.js 0.44 (1.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/ResponderEventTypes.js 0.34 (0.88) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/ResponderTouchHistoryStore.js 1.06 (3.46) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useResponderEvents/utils.js 0.68 (1.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/modules/useStable/index.js 0.19 (0.26) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/types/index.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/types/styles.js 0.02 (0.00) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/hash/index.js 0.30 (0.71) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/Animated.js 0.53 (1.41) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedEvent.js 1.15 (3.27) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedImplementation.js 1.83 (6.67) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/AnimatedMock.js 0.85 (2.69) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/Animation.js 0.41 (0.98) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/DecayAnimation.js 0.67 (1.69) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/SpringAnimation.js 1.66 (5.03) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/animations/TimingAnimation.js 0.93 (2.48) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/bezier.js 0.69 (1.43) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedFlatList.js 0.33 (0.58) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedImage.js 0.13 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedScrollView.js 0.34 (0.61) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedSectionList.js 0.34 (0.59) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedText.js 0.13 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/components/AnimatedView.js 0.13 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js 2.12 (6.28) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/Easing.js 0.48 (1.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedHelper.js 1.70 (7.96) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedModule.js 0.10 (0.13) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/NativeAnimatedTurboModule.js 0.10 (0.14) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedAddition.js 0.47 (1.28) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedDiffClamp.js 0.50 (1.24) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedDivision.js 0.60 (1.62) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedInterpolation.js 1.89 (5.23) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedModulo.js 0.43 (1.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedMultiplication.js 0.48 (1.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedNode.js 0.87 (2.85) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedProps.js 1.10 (3.58) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedSubtraction.js 0.48 (1.29) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTracking.js 0.86 (2.38) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedTransform.js 0.59 (1.81) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedValue.js 0.95 (3.05) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedValueXY.js 0.72 (2.02) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/nodes/AnimatedWithChildren.js 1.05 (2.62) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Animated/SpringConfig.js 0.41 (0.92) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Batchinator/index.js 0.32 (0.62) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/deepDiffer/index.js 0.28 (0.54) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/_EmitterSubscription.js 0.29 (0.58) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/_EventEmitter.js 0.60 (1.42) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/_EventSubscription.js 0.14 (0.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/_EventSubscriptionVendor.js 0.34 (0.80) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/EventEmitter.js 0.08 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/emitter/EventSubscription.js 0.03 (0.01) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/FillRateHelper/index.js 1.44 (4.24) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/infoLog/index.js 0.11 (0.10) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/JSEventLoopWatchdog/index.js 0.49 (1.15) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/LayoutAnimation/index.js 0.53 (1.24) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/NativeEventEmitter/index.js 0.51 (1.27) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter.js 0.07 (0.08) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/PanResponder/index.js 1.07 (4.20) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/PooledClass/index.js 0.32 (0.62) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/StaticContainer/index.js 0.32 (0.61) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/StaticRenderer/index.js 0.29 (0.56) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TouchHistoryMath/index.js 0.39 (1.16) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TurboModule/RCTExport.js 0.03 (0.01) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/TurboModule/TurboModuleRegistry.js 0.22 (0.30) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Types/CoreEventTypes.js 0.03 (0.01) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/Utilities/setAndForwardRef.js 0.17 (0.22) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/ViewabilityHelper/index.js 1.77 (4.21) 0.00 (0.00) 0.0% (0.0%)
./packages/react-native-web/dist/vendor/react-native/VirtualizedList/VirtualizedListContext.js 0.74 (2.18) 0.00 (0.00) 0.0% (0.0%)

compressed-size-action

necolas and others added 5 commits March 2, 2022 10:50
* Improves React Native compatibility by making StyleSheet.create the identify function.
* Improves React 18 support by inserting styles on eval.
* Supports use with multiple windows (i.e., iframes) and shadow roots.
* Supports nested LTR/RTL layouts.
* Supports 3rd party compilers and extraction to static CSS.
* Fixes static and dynamic short/longform deduplication.
* Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers.
* Removes automatic vendor-prefixing of inline styles (for better perf).
* Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions.

Close #2208
Fix #2138
Fix #2196
Fix #2007
Fix #1517
Also add node-based unit tests for SSR APIs.
Remove libraries from benchmarks as comparison to css-modules baseline is what
matters. This makes benchmark builds faster and will reduce how often people
open PRs asking for their library to be included.

Close #2210
necolas and others added 3 commits March 22, 2022 09:44
* Control writing direction using 'dir' and 'lang' props.
* Change the compiler output for RTL styles polyfill.
* Export 'useLocaleContext' for working with writing direction context.
* Turn I18nManager into a mock API
@marklawlor
Copy link
Contributor

There appears to be an issue with Animated when mixing preprocessed styles and inline-styles.

https://codesandbox.io/s/crazy-chatelet-iq8uq4?file=/src/App.js

Error: styleq: maxWidth typeof 500 is not "string".

You can see on the root View that it has added the inline styles as classNames.

@necolas
Copy link
Owner Author

necolas commented May 7, 2022

See this note on problems for static extraction:

The existence of the StyleSheet.flatten() API can be a problem for build-time compiling of some styles. Components that flatten styles expect to be able to work with the source styles, and use the source values at runtime. A compiler that aims to extract all styles and have no runtime transform would need to disallow the use of StyleSheet.flatten() entirely (unfortunately it's also used by the Animated API internals).

Possibly StyleSheet.flatten could be modified to keep compiled and dynamic styles separate. But at the moment no one is using static extraction of styles.

Unfortunately, the RN API isn't being designed for Web, and that both limits a lot of what we can do, as well as adds a lot of overhead in the web shim.

@jmeistrich
Copy link

@marklawlor @necolas I attempted a fix to the Animated issue and it does seem to work. It basically pulls any styles with $$css out of the AnimatedProps and merges it back in when rendering the animated component. My approach is a bit hacky but maybe the concept makes sense?

jmeistrich@0266076

@marcuzgabriel
Copy link

marcuzgabriel commented May 18, 2022

Using the latest react-native-web with react / react-dom version 18 or above causes error as ReactDOM.render is no longer supported. The error is reproducable by taking your sandbox example and changing the react and react-dom versions to 18.0.0 or above. The error is then logged in the console.

I do not see any issues in general but. Is this something that will be addressed?

I can create an issue / observation if this is the wrong PR to mention it in.

Skærmbillede 2022-05-18 kl  15 48 37

@necolas
Copy link
Owner Author

necolas commented Jun 8, 2022

Using the latest react-native-web with react / react-dom version 18 or above causes error as ReactDOM.render is no longer supported.

It's a warning, not an error. I don't intend to switch to createRoot in this release, as React Native won't be supporting it for a while yet, and various APIs need changing (e.g., unmountComponentAtNode)

@necolas
Copy link
Owner Author

necolas commented Jun 9, 2022

@jmeistrich that patch doesn't look like it will work with more than one style. As I mentioned above, fundamentally this is a problem related to having StyleSheet.flatten as an API. Any code path that uses StyleSheet.flatten during render (like Animated does internally) will likely break if styles have been processed and extracted at build time. Even components like Image use flatten to provide compatibility with how React Native handles various styles on images (e.g., shadows, tintColor, etc., get turned into filters)...at least in those cases I can just drop those compatibility features. But fixing the issue with Animated would involve rewriting Animated to use Web Animations and dropping compatibility with the Animated APIs that cannot be implemented on web. @vincentriemer explored this at Meta, but I don't think either of us have time to work on it for React Native for Web.

@necolas necolas merged commit cb8381a into master Jun 10, 2022
@necolas
Copy link
Owner Author

necolas commented Jun 10, 2022

This branch was merged into master and 0.18 is now available on npm

@necolas
Copy link
Owner Author

necolas commented Aug 29, 2022

There appears to be an issue with Animated when mixing preprocessed styles and inline-styles.

@marklawlor I may have found a workaround for this issue while looking into #2387. If you follow that issue I'll likely have a patch up and publish a test version for you to try in your e2e setup

Kudo pushed a commit to expo/expo that referenced this pull request Feb 16, 2023
# Why

- Since 0.18, RNW allows passing css classes to views using [$css: true](necolas/react-native-web#2248) and handles merging with styleQ processor.
- Flattening creates issue for libraries such as NativeWind that uses `$css` approach to pass classnames in View.
- Checkout this [repro](https://github.com/intergalacticspacehighway/nativewind-expo-av-web-repro/blob/main/App.tsx). Here, we pass `w-40 h-40` which gets translated to `{$css: true, width: "w-40", height: "h-40"}` by NativeWind. expo-av's flattening results in `{$css: true, width: "w-40", height: "h-40", overflow: "hidden" }`. styleQ converts that object into a class string `h-40 w-40 hidden`, resulting in a hidden View.

# How

I think we don't need to flatten styles (unless I am missing something) as RN and RNW internally do the [flattening](https://github.com/facebook/react-native/blob/4a07ed2c0c78fd7d3353aff6e0a7f75a2a4b6b86/Libraries/Components/View/View.js#L102). Also, recursive array styles work with RN (also TS definitions support it)

# Test Plan

- Tested running video [example](https://github.com/intergalacticspacehighway/nativewind-expo-av-web-repro/blob/main/App.tsx) on native and web. Before and after this change should have no effect on the UI apart from fixing the hidden View bug on **web.**
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants