@office-iss/react-native-win32 0.0.0-canary.310 → 0.0.0-canary.312

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -13,23 +13,23 @@ import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
 // Helper types to enforce that a single key is used in a transform object
 // after generating a TypeScript definition file from the Flow types.
 // $FlowExpectedError[unclear-type]
-type KeysOfUnion<T> = T extends any ? $Keys<T> : empty;
+type KeysOfUnion<T> = T extends any ? keyof T : empty;
 // $FlowExpectedError[unclear-type]
 type ValueOfUnion<T, K> = T extends any
-  ? K extends $Keys<T>
+  ? K extends keyof T
     ? T[K]
     : empty
   : empty;
 type MergeUnion<T> = {
   [K in KeysOfUnion<T>]?: ValueOfUnion<T, K>,
 };
-type MaximumOneOf<T: {...}> = $Values<{
+type MaximumOneOf<T: {...}> = Values<{
   [K in keyof T]: $Exact<{
     [P in keyof T]?: P extends K ? T[P] : empty,
   }>,
 }>;
 
-export type ____TransformStyle_Internal = $ReadOnly<{
+export type ____TransformStyle_Internal = Readonly<{
   /**
    * `transform` accepts an array of transformation objects. Each object specifies
    * the property that will be transformed as the key, and the value to use in the
@@ -47,8 +47,8 @@ export type ____TransformStyle_Internal = $ReadOnly<{
    * `transform([{ skewX: '45deg' }])`
    */
   transform?:
-    | $ReadOnlyArray<
-        $ReadOnly<
+    | ReadonlyArray<
+        Readonly<
           MaximumOneOf<
             MergeUnion<
               | {+perspective: number | AnimatedNode}
@@ -73,7 +73,7 @@ export type ____TransformStyle_Internal = $ReadOnly<{
               | {+skewY: string | AnimatedNode}
               // TODO: what is the actual type it expects?
               | {
-                  +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
+                  +matrix: ReadonlyArray<number | AnimatedNode> | AnimatedNode,
                 },
             >,
           >,

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -37,7 +37,7 @@ type LinearGradientDirection =
 type LinearGradientBackgroundImage = {
   type: 'linear-gradient',
   direction: LinearGradientDirection,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ColorStopColor,
     position: ColorStopPosition,
   }>,
@@ -57,7 +57,7 @@ type RadialGradientBackgroundImage = {
   shape: RadialGradientShape,
   size: RadialGradientSize,
   position: RadialGradientPosition,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ColorStopColor,
     position: ColorStopPosition,
   }>,
@@ -73,9 +73,9 @@ type ParsedBackgroundImageValue =
   | RadialGradientBackgroundImage;
 
 export default function processBackgroundImage(
-  backgroundImage: ?($ReadOnlyArray<BackgroundImageValue> | string),
-): $ReadOnlyArray<ParsedBackgroundImageValue> {
-  let result: $ReadOnlyArray<ParsedBackgroundImageValue> = [];
+  backgroundImage: ?(ReadonlyArray<BackgroundImageValue> | string),
+): ReadonlyArray<ParsedBackgroundImageValue> {
+  let result: ReadonlyArray<ParsedBackgroundImageValue> = [];
   if (backgroundImage == null) {
     return result;
   }
@@ -183,7 +183,7 @@ export default function processBackgroundImage(
   return result;
 }
 
-function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
+function processColorStops(bgImage: BackgroundImageValue): ReadonlyArray<{
   color: ColorStopColor,
   position: ColorStopPosition,
 }> | null {
@@ -249,7 +249,7 @@ function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
 
 function parseBackgroundImageCSSString(
   cssString: string,
-): $ReadOnlyArray<ParsedBackgroundImageValue> {
+): ReadonlyArray<ParsedBackgroundImageValue> {
   const gradients = [];
   const bgImageStrings = splitGradients(cssString);
 

package/Libraries/StyleSheet/processBackgroundPosition.js

@@ -12,9 +12,9 @@
 import type {BackgroundPositionValue} from './StyleSheetTypes';
 
 export default function processBackgroundPosition(
-  backgroundPosition: ?($ReadOnlyArray<BackgroundPositionValue> | string),
-): $ReadOnlyArray<BackgroundPositionValue> {
-  let result: $ReadOnlyArray<BackgroundPositionValue> = [];
+  backgroundPosition: ?(ReadonlyArray<BackgroundPositionValue> | string),
+): ReadonlyArray<BackgroundPositionValue> {
+  let result: ReadonlyArray<BackgroundPositionValue> = [];
 
   if (backgroundPosition == null) {
     return [];
@@ -33,7 +33,7 @@ export default function processBackgroundPosition(
 // https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-position
 const parseBackgroundPositionCSSString = (
   backgroundPosition: string,
-): $ReadOnlyArray<BackgroundPositionValue> => {
+): ReadonlyArray<BackgroundPositionValue> => {
   const result: Array<BackgroundPositionValue> = [];
   const positions = backgroundPosition.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBackgroundRepeat.js

@@ -27,9 +27,9 @@ function isBackgroundRepeatKeyword(
 }
 
 export default function processBackgroundRepeat(
-  backgroundRepeat: ?($ReadOnlyArray<BackgroundRepeatValue> | string),
-): $ReadOnlyArray<BackgroundRepeatValue> {
-  let result: $ReadOnlyArray<BackgroundRepeatValue> = [];
+  backgroundRepeat: ?(ReadonlyArray<BackgroundRepeatValue> | string),
+): ReadonlyArray<BackgroundRepeatValue> {
+  let result: ReadonlyArray<BackgroundRepeatValue> = [];
   if (backgroundRepeat == null) {
     return [];
   }
@@ -50,7 +50,7 @@ export default function processBackgroundRepeat(
 // https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style
 function parseBackgroundRepeatCSSString(
   backgroundRepeat: string,
-): $ReadOnlyArray<BackgroundRepeatValue> {
+): ReadonlyArray<BackgroundRepeatValue> {
   const result: Array<BackgroundRepeatValue> = [];
   const bgRepeatArray = backgroundRepeat.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBackgroundSize.js

@@ -13,9 +13,9 @@
 import type {BackgroundSizeValue} from './StyleSheetTypes';
 
 export default function processBackgroundSize(
-  backgroundSize: ?($ReadOnlyArray<BackgroundSizeValue> | string),
-): $ReadOnlyArray<BackgroundSizeValue> {
-  let result: $ReadOnlyArray<BackgroundSizeValue> = [];
+  backgroundSize: ?(ReadonlyArray<BackgroundSizeValue> | string),
+): ReadonlyArray<BackgroundSizeValue> {
+  let result: ReadonlyArray<BackgroundSizeValue> = [];
 
   if (backgroundSize == null) {
     // If the size is invalid, return an empty array and do not apply any background size. Same as web.
@@ -34,7 +34,7 @@ export default function processBackgroundSize(
 // <bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
 function parseBackgroundSizeCSSString(
   backgroundSize: string,
-): $ReadOnlyArray<BackgroundSizeValue> {
+): ReadonlyArray<BackgroundSizeValue> {
   const result: Array<BackgroundSizeValue> = [];
   const sizes = backgroundSize.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBoxShadow.js

@@ -11,8 +11,15 @@
 import type {ProcessedColorValue} from './processColor';
 import type {BoxShadowValue} from './StyleSheetTypes';
 
+import {enableOptimizedBoxShadowParsing} from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import processColor from './processColor';
 
+// Pre-compiled regex patterns for performance - avoids regex compilation on each call
+const COMMA_SPLIT_REGEX = /,(?![^()]*\))/;
+const WHITESPACE_SPLIT_REGEX = /\s+(?![^(]*\))/;
+const LENGTH_PARSE_REGEX = /^([+-]?\d*\.?\d+)(px)?$/;
+const NEWLINE_REGEX = /\n/g;
+
 export type ParsedBoxShadow = {
   offsetX: number,
   offsetY: number,
@@ -23,7 +30,7 @@ export type ParsedBoxShadow = {
 };
 
 export default function processBoxShadow(
-  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string),
+  rawBoxShadows: ?(ReadonlyArray<BoxShadowValue> | string),
 ): Array<ParsedBoxShadow> {
   const result: Array<ParsedBoxShadow> = [];
   if (rawBoxShadows == null) {
@@ -32,7 +39,12 @@ export default function processBoxShadow(
 
   const boxShadowList =
     typeof rawBoxShadows === 'string'
-      ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '))
+      ? parseBoxShadowString(
+          rawBoxShadows.replace(
+            enableOptimizedBoxShadowParsing() ? NEWLINE_REGEX : /\n/g,
+            ' ',
+          ),
+        )
       : rawBoxShadows;
 
   for (const rawBoxShadow of boxShadowList) {
@@ -109,7 +121,9 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
   let result: Array<BoxShadowValue> = [];
 
   for (const rawBoxShadow of rawBoxShadows
-    .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
+    .split(
+      enableOptimizedBoxShadowParsing() ? COMMA_SPLIT_REGEX : /,(?![^()]*\))/,
+    ) // split by comma that is not in parenthesis
     .map(bS => bS.trim())
     .filter(bS => bS !== '')) {
     const boxShadow: BoxShadowValue = {
@@ -123,7 +137,11 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
     let lengthCount = 0;
 
     // split rawBoxShadow string by all whitespaces that are not in parenthesis
-    const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
+    const args = rawBoxShadow.split(
+      enableOptimizedBoxShadowParsing()
+        ? WHITESPACE_SPLIT_REGEX
+        : /\s+(?![^(]*\))/,
+    );
     for (const arg of args) {
       const processedColor = processColor(arg);
       if (processedColor != null) {
@@ -192,6 +210,28 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
 }
 
 function parseLength(length: string): ?number {
+  if (enableOptimizedBoxShadowParsing()) {
+    // Use pre-compiled regex for performance
+    const match = LENGTH_PARSE_REGEX.exec(length);
+
+    if (!match) {
+      return null;
+    }
+
+    const value = parseFloat(match[1]);
+    if (Number.isNaN(value)) {
+      return null;
+    }
+
+    // match[2] is 'px' or undefined
+    // If no unit and value is not 0, return null
+    if (match[2] == null && value !== 0) {
+      return null;
+    }
+
+    return value;
+  }
+
   // matches on args with units like "1.5 5% -80deg"
   const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
   const match = argsWithUnitsRegex.exec(length);

package/Libraries/StyleSheet/processColorArray.js

@@ -17,8 +17,8 @@ import processColor, {type ProcessedColorValue} from './processColor';
 const TRANSPARENT = 0; // rgba(0, 0, 0, 0)
 
 function processColorArray(
-  colors: ?$ReadOnlyArray<ColorValue>,
-): ?$ReadOnlyArray<ProcessedColorValue> {
+  colors: ?ReadonlyArray<ColorValue>,
+): ?ReadonlyArray<ProcessedColorValue> {
   return colors == null ? null : colors.map(processColorElement);
 }
 

package/Libraries/StyleSheet/processFilter.js

@@ -35,8 +35,8 @@ type ParsedDropShadow = {
 };
 
 export default function processFilter(
-  filter: ?($ReadOnlyArray<FilterFunction> | string),
-): $ReadOnlyArray<ParsedFilter> {
+  filter: ?(ReadonlyArray<FilterFunction> | string),
+): ReadonlyArray<ParsedFilter> {
   let result: Array<ParsedFilter> = [];
   if (filter == null) {
     return result;