0.18 preview release

.eslintrc

@@ -118,7 +118,7 @@
     "no-with": 2,
     "prefer-const": 2,
     "prefer-rest-params": 2,
-    "quotes": [2, "single", "avoid-escape"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
     "radix": 2,
     "use-isnan": 2,
     "valid-typeof": 2,

.flowconfig

@@ -1,11 +1,12 @@
 [version]
-^0.148.0
+0.148.0
 
 [ignore]
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/docs/.*
 <PROJECT_ROOT>/packages/examples/.*
+.*/node_modules/.*/.*.json
 .*/node_modules/@emotion/css/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*
 

LICENSE

@@ -1,7 +1,7 @@
 MIT License
 
-Copyright (c) 2015-present, Nicolas Gallagher.
-Copyright (c) 2015-present, Facebook, Inc.
+Copyright (c) Nicolas Gallagher.
+Copyright (c) Meta Platforms, Inc. and affiliates.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -45,7 +45,7 @@ The main purpose of this repository is to help evolve React web and native devel
 
 ### Code of conduct
 
-Facebook has adopted a [Code of Conduct][code-of-conduct] that this project expects all participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+Meta has adopted a [Code of Conduct][code-of-conduct] that this project expects all participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
 
 ### Contributing guide
 
@@ -63,7 +63,7 @@ React Native for Web is [MIT licensed](./LICENSE). By contributing to React Nati
 [package-url]: https://www.npmjs.com/package/react-native-web
 [ci-badge]: https://github.com/necolas/react-native-web/workflows/tests/badge.svg
 [ci-url]: https://github.com/necolas/react-native-web/actions
-[react-native-url]: https://facebook.github.io/react-native/
+[react-native-url]: https://reactnative.dev/
 [contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
 [good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue
-[code-of-conduct]: https://code.facebook.com/codeofconduct
+[code-of-conduct]: https://opensource.fb.com/code-of-conduct/

flow-typed/npm/styleq.js

@@ -0,0 +1,40 @@
+type CompiledStyle = {
+  $$css: boolean,
+  [key: string]: string,
+};
+
+type InlineStyle = {
+  [key: string]: mixed,
+};
+
+type EitherStyle = CompiledStyle | InlineStyle;
+
+type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
+type Styles = StylesArray<EitherStyle | false | void>;
+type Style<+T = EitherStyle> = StylesArray<false | ?T>;
+
+type StyleqOptions = {
+  disableCache?: boolean,
+  disableMix?: boolean,
+  transform?: (EitherStyle) => EitherStyle,
+};
+
+type StyleqResult = [string, InlineStyle | null];
+type Styleq = (styles: Styles) => StyleqResult;
+
+type IStyleq = {
+  (...styles: $ReadOnlyArray<Styles>): StyleqResult,
+  factory: (options?: StyleqOptions) => Styleq,
+};
+
+declare module "styleq" {
+  declare module.exports: {
+    styleq: IStyleq
+  };
+}
+
+declare module "styleq/transform-localize-style" {
+  declare module.exports: {
+    localizeStyle: (style: EitherStyle, isRTL: boolean) => EitherStyle
+  };
+}

package.json

@@ -19,7 +19,9 @@
     "flow": "flow",
     "fmt": "prettier --write \"**/*.js\"",
     "fmt:report": "prettier --check \"**/*.js\"",
-    "jest": "jest --config ./scripts/jest/config.js",
+    "jest": "npm-run-all \"jest:* {@}\" --",
+    "jest:dom": "jest --config ./scripts/jest/config.js",
+    "jest:node": "jest --config ./scripts/jest/config.node.js",
     "lint": "yarn lint:report --fix",
     "lint:report": "eslint packages scripts",
     "prerelease": "yarn test && yarn compile",
@@ -39,32 +41,31 @@
     "@babel/preset-react": "^7.12.13",
     "@testing-library/react": "^11.2.5",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "caniuse-api": "^3.0.0",
     "cross-env": "^7.0.3",
-    "del-cli": "^3.0.1",
+    "del-cli": "^4.0.1",
     "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-flowtype": "^5.4.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "flow-bin": "^0.148.0",
+    "flow-bin": "0.148.0",
     "gen-flow-files": "^0.4.11",
     "glob": "^7.1.6",
     "husky": "^4.3.8",
     "inline-style-prefixer": "^6.0.0",
-    "jest": "^25.5.0",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^27.5.1",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.3",
     "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2"
   },
   "workspaces": [
     "packages/*"

packages/babel-plugin-react-native-web/src/moduleMap.js

@@ -67,5 +67,6 @@ module.exports = {
   render: true,
   unmountComponentAtNode: true,
   useColorScheme: true,
+  useLocaleContext: true,
   useWindowDimensions: true
 };

packages/benchmarks/package.json

@@ -7,13 +7,9 @@
     "build": "NODE_ENV=production yarn dev"
   },
   "dependencies": {
-    "aphrodite": "^2.4.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "d3-scale-chromatic": "^2.0.0",
-    "@emotion/css": "^11.1.3",
-    "react-jss": "^10.5.1",
-    "react-native-web": "0.17.7",
-    "styled-components": "^5.2.1"
+    "react-native-web": "0.17.7"
   },
   "devDependencies": {
     "babel-plugin-react-native-web": "0.17.7",

packages/benchmarks/src/app/App.js

@@ -169,7 +169,7 @@ export default class App extends Component {
       () => ({ status: 'running' }),
       () => {
         if (this._shouldHideBenchmark && this._benchWrapperRef) {
-          this._benchWrapperRef.setNativeProps({ style: { opacity: 0 } });
+          this._benchWrapperRef.style.opacity = 0;
         }
         this._benchmarkRef.start();
         this._scrollToEnd();
@@ -181,9 +181,7 @@ export default class App extends Component {
   _handleVisuallyHideBenchmark = () => {
     this._shouldHideBenchmark = !this._shouldHideBenchmark;
     if (this._benchWrapperRef) {
-      this._benchWrapperRef.setNativeProps({
-        style: { opacity: this._shouldHideBenchmark ? 0 : 1 }
-      });
+      this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1;
     }
   };
 

packages/benchmarks/src/app/Icons.js

@@ -15,16 +15,13 @@ const styles = StyleSheet.create({
 
 const createIcon = (children) => {
   const Icon = (props) =>
-    createElement(
-      'svg',
-      {
-        style: StyleSheet.compose(styles.root, props.style),
-        width: 24,
-        height: 24,
-        viewBox: '0 0 24 24'
-      },
-      children
-    );
+    createElement('svg', {
+      children,
+      style: StyleSheet.compose(styles.root, props.style),
+      width: 24,
+      height: 24,
+      viewBox: '0 0 24 24'
+    });
   return Icon;
 };
 

packages/benchmarks/src/app/theme.js

@@ -1,8 +1,9 @@
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import { Dimensions, Platform } from 'react-native';
 
 const baseFontSize = 14;
 const baseUnit = 1.3125;
+const { canUseDOM } = ExecutionEnvironment;
 
 const createPlatformLength = (multiplier) =>
   Platform.select({ web: `${multiplier}rem`, default: multiplier * baseFontSize });

packages/benchmarks/src/impl.js

@@ -10,7 +10,6 @@ type ComponentsType = {
   Box: Component,
   Dot: Component,
   Provider: Component,
-  TextBox: Component,
   View: Component
 };
 

packages/benchmarks/src/implementations/css-modules/Dot.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './dot-styles.css';
+
+const Dot = ({ size, x, y, children, color }) => (
+  <div
+    className={styles.root}
+    style={{
+      borderBottomColor: color,
+      borderRightWidth: `${size / 2}px`,
+      borderBottomWidth: `${size / 2}px`,
+      borderLeftWidth: `${size / 2}px`,
+      marginLeft: `${x}px`,
+      marginTop: `${y}px`
+    }}
+  >
+    {children}
+  </div>
+);
+
+export default Dot;

packages/benchmarks/src/implementations/css-modules/dot-styles.css

@@ -0,0 +1,10 @@
+.root {
+  position: absolute;
+  cursor: pointer;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-top-width: 0;
+  transform: translate(50%, 50%);
+}

packages/benchmarks/src/implementations/css-modules/index.js

@@ -1,9 +1,11 @@
 import Box from './Box';
+import Dot from './Dot';
 import Provider from './Provider';
 import View from './View';
 
 export default {
   Box,
+  Dot,
   Provider,
   View
 };

packages/benchmarks/src/implementations/css-modules/view-styles.css

@@ -1,15 +1,18 @@
 .initial {
   align-items: stretch;
+  background-color: transparent;
   border-width: 0;
   border-style: solid;
   box-sizing: border-box;
   display: flex;
   flex-basis: auto;
   flex-direction: column;
   flex-shrink: 0;
+  list-style: none;
   margin: 0;
-  padding: 0;
-  position: relative;
   min-height: 0;
   min-width: 0;
+  padding: 0;
+  position: relative;
+  z-index: 0;
 }