react-native-reanimated 4.0.2 → 4.1.0-jsx-fix

package/src/css/svg/native/configs/common.ts

@@ -0,0 +1,144 @@
+'use strict';
+import type { GestureResponderHandlers } from 'react-native';
+import type {
+  AccessibilityProps,
+  ClipProps,
+  ColorProps,
+  CommonFilterProps,
+  CommonMarkerProps,
+  CommonMaskProps,
+  DefinitionProps,
+  FillProps,
+  NativeProps,
+  ResponderProps,
+  StrokeProps,
+  TouchableProps,
+  TransformProps,
+} from 'react-native-svg';
+
+import type { StyleBuilderConfig } from '../../../native';
+import {
+  convertStringToNumber,
+  processColorSVG,
+  processOpacity,
+  processStrokeDashArray,
+} from '../processors';
+
+const colorAttributes = { process: processColorSVG };
+
+const colorProps: StyleBuilderConfig<ColorProps> = {
+  color: colorAttributes,
+};
+
+const fillProps: StyleBuilderConfig<FillProps> = {
+  fill: colorAttributes,
+  fillOpacity: { process: processOpacity },
+  fillRule: {
+    process: convertStringToNumber({
+      evenodd: 0,
+      nonzero: 1,
+    }),
+  },
+};
+
+const strokeProps: StyleBuilderConfig<StrokeProps> = {
+  stroke: colorAttributes,
+  strokeWidth: true,
+  strokeOpacity: { process: processOpacity },
+  strokeDasharray: { process: processStrokeDashArray },
+  strokeDashoffset: true,
+  strokeLinecap: {
+    process: convertStringToNumber({
+      butt: 0,
+      square: 2,
+      round: 1,
+    }),
+  },
+  strokeLinejoin: {
+    process: convertStringToNumber({
+      miter: 0,
+      bevel: 2,
+      round: 1,
+    }),
+  },
+  strokeMiterlimit: true,
+  vectorEffect: {
+    process: convertStringToNumber({
+      none: 0,
+      default: 0,
+      nonScalingStroke: 1,
+      'non-scaling-stroke': 1,
+      inherit: 2,
+      uri: 3,
+    }),
+  },
+};
+
+const clipProps: StyleBuilderConfig<ClipProps> = {
+  clipRule: true,
+  clipPath: true, // TODO - maybe preprocess this?
+};
+
+const transformProps: StyleBuilderConfig<TransformProps> = {
+  translate: true, // TODO - add preprocessor (NumberArray) and split to translateX and translateY
+  translateX: true,
+  translateY: true,
+  origin: true, // TODO - add preprocessor (NumberArray) and split to originX and originY
+  originX: true,
+  originY: true,
+  scale: true, // TODO - add preprocessor (NumberArray) and split to scaleX and scaleY
+  scaleX: true,
+  scaleY: true,
+  skew: true, // TODO - add preprocessor (NumberArray) and split to skewX and skewY
+  skewX: true,
+  skewY: true,
+  rotation: true,
+  x: true,
+  y: true,
+  transform: true, // TODO - add preprocessor
+};
+
+const responderProps: StyleBuilderConfig<
+  Omit<ResponderProps, keyof GestureResponderHandlers>
+> = {
+  pointerEvents: true,
+};
+
+// TODO - check what these props are doing and if we need to preprocess them
+const commonMarkerProps: StyleBuilderConfig<CommonMarkerProps> = {
+  marker: true,
+  markerStart: true,
+  markerMid: true,
+  markerEnd: true,
+};
+
+const commonMaskProps: StyleBuilderConfig<CommonMaskProps> = {
+  mask: true, // TODO - add preprocessor
+};
+
+const commonFilterProps: StyleBuilderConfig<CommonFilterProps> = {
+  filter: true, // TODO - add preprocessor
+};
+
+type NonAnimatablePropNames =
+  | keyof GestureResponderHandlers
+  | keyof TouchableProps
+  | keyof DefinitionProps
+  | keyof NativeProps
+  | keyof AccessibilityProps;
+
+export type SvgStyleBuilderConfig<T> = StyleBuilderConfig<
+  Omit<T, NonAnimatablePropNames>
+>;
+
+export const commonSvgProps = {
+  ...colorProps,
+  ...fillProps,
+  ...strokeProps,
+  ...clipProps,
+  ...transformProps,
+  ...responderProps,
+  ...commonMarkerProps,
+  ...commonMaskProps,
+  ...commonFilterProps,
+} as const;

package/src/css/svg/native/configs/ellipse.ts

@@ -0,0 +1,15 @@
+'use strict';
+import type { EllipseProps } from 'react-native-svg';
+
+import type { SvgStyleBuilderConfig } from './common';
+import { commonSvgProps } from './common';
+
+export const SVG_ELLIPSE_PROPERTIES_CONFIG: SvgStyleBuilderConfig<EllipseProps> =
+  {
+    ...commonSvgProps,
+    cx: true,
+    cy: true,
+    rx: true,
+    ry: true,
+    opacity: true,
+  };

package/src/css/svg/native/configs/index.ts

@@ -0,0 +1,6 @@
+'use strict';
+export * from './circle';
+export * from './ellipse';
+export * from './line';
+export * from './path';
+export * from './rect';

package/src/css/svg/native/configs/line.ts

@@ -0,0 +1,14 @@
+'use strict';
+import type { LineProps } from 'react-native-svg';
+
+import type { SvgStyleBuilderConfig } from './common';
+import { commonSvgProps } from './common';
+
+export const SVG_LINE_PROPERTIES_CONFIG: SvgStyleBuilderConfig<LineProps> = {
+  ...commonSvgProps,
+  x1: true,
+  y1: true,
+  x2: true,
+  y2: true,
+  opacity: true,
+};

package/src/css/svg/native/configs/path.ts

@@ -0,0 +1,11 @@
+'use strict';
+import type { PathProps } from 'react-native-svg';
+
+import type { SvgStyleBuilderConfig } from './common';
+import { commonSvgProps } from './common';
+
+// @ts-expect-error - remove when more properties are added
+export const SVG_PATH_PROPERTIES_CONFIG: SvgStyleBuilderConfig<PathProps> = {
+  ...commonSvgProps,
+  // TODO - add more properties
+};

package/src/css/svg/native/configs/rect.ts

@@ -0,0 +1,16 @@
+'use strict';
+import type { RectProps } from 'react-native-svg';
+
+import type { SvgStyleBuilderConfig } from './common';
+import { commonSvgProps } from './common';
+
+export const SVG_RECT_PROPERTIES_CONFIG: SvgStyleBuilderConfig<RectProps> = {
+  ...commonSvgProps,
+  x: true,
+  y: true,
+  rx: true,
+  ry: true,
+  width: true,
+  height: true,
+  opacity: true,
+};

package/src/css/svg/native/index.ts

@@ -0,0 +1,2 @@
+'use strict';
+export * from './configs';

package/src/css/svg/native/processors/colors.ts

@@ -0,0 +1,18 @@
+'use strict';
+import type { ColorValue } from 'react-native';
+
+import { processColor, type ValueProcessor } from '../../../native';
+
+export const processColorSVG: ValueProcessor<
+  ColorValue | number,
+  number | string
+> = (value) => {
+  if (value === 'none') {
+    return 'transparent';
+  }
+  if (value === 'currentColor') {
+    return 'currentColor';
+  }
+
+  return processColor(value);
+};

package/src/css/svg/native/processors/index.ts

@@ -0,0 +1,5 @@
+'use strict';
+export * from './colors';
+export * from './opacity';
+export * from './others';
+export { processStrokeDashArray } from './stroke';

package/src/css/svg/native/processors/opacity.ts

@@ -0,0 +1,12 @@
+'use strict';
+import type { NumberProp } from 'react-native-svg';
+
+import type { ValueProcessor } from '../../../native';
+
+export const processOpacity: ValueProcessor<NumberProp, number> = (opacity) => {
+  const value =
+    typeof opacity === 'string' && opacity.trim().endsWith('%')
+      ? +opacity.slice(0, -1) / 100
+      : +opacity;
+  return isNaN(value) || value > 1 ? 1 : Math.max(value, 0);
+};

package/src/css/svg/native/processors/others.ts

@@ -0,0 +1,9 @@
+'use strict';
+import type { ValueProcessor } from '../../../native';
+
+export const convertStringToNumber =
+  <S extends string>(
+    conversions: Record<S, number>
+  ): ValueProcessor<S, number> =>
+  (value) =>
+    conversions[value];

package/src/css/svg/native/processors/stroke.ts

@@ -0,0 +1,45 @@
+'use strict';
+import type { NumberProp } from 'react-native-svg';
+
+import type { ValueProcessor } from '../../../../common';
+import { ReanimatedError } from '../../../../common';
+import { isLength } from '../../../utils';
+
+export const ERROR_MESSAGES = {
+  invalidDashArray: (value: unknown) =>
+    `Invalid stroke dash array value: ${JSON.stringify(value)}`,
+};
+
+export const processStrokeDashArray: ValueProcessor<
+  NumberProp | readonly NumberProp[],
+  (number | string)[] | 'none'
+> = (value) => {
+  let result: NumberProp[] = [];
+
+  if (isLength(value)) {
+    result = [value];
+  } else if (Array.isArray(value)) {
+    // We have to repeat the same pattern twice if the number of elements is odd
+    // "If the number of values is odd, the pattern behaves as if it was duplicated
+    // to yield an even number of values"
+    // (https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-dasharray-length-percentage)
+    result =
+      value.length % 2 === 0 || value.length < 3 ? value : value.concat(value);
+  } else if (value === 'none') {
+    return 'none';
+  } else {
+    throw new ReanimatedError(ERROR_MESSAGES.invalidDashArray(value));
+  }
+
+  if (__DEV__) {
+    isValidDashArray(result);
+  }
+
+  return result;
+};
+
+const isValidDashArray = (value: NumberProp[]) => {
+  if (!value.every(isLength)) {
+    throw new ReanimatedError(ERROR_MESSAGES.invalidDashArray(value));
+  }
+};

package/src/css/types/animation.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { CSSTimingFunction } from '../easings';
+import type { CSSTimingFunction } from '../easing';
 import type { PlainStyle, TimeUnit } from './common';
 import type { AddArrayPropertyType, AddArrayPropertyTypes } from './helpers';
 

package/src/css/types/index.ts

@@ -7,6 +7,7 @@ export type * from './animation';
 export type * from './common';
 export type * from './config';
 export type * from './helpers';
+export type * from './interfaces';
 export type * from './props';
 export type * from './transition';
 

package/src/css/types/transition.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { CSSTimingFunction } from '../easings';
+import type { CSSTimingFunction } from '../easing';
 import type { PlainStyle, TimeUnit } from './common';
 import type { AddArrayPropertyTypes } from './helpers';
 

package/src/css/utils/guards.ts

@@ -6,7 +6,7 @@ import {
   VALID_PREDEFINED_TIMING_FUNCTIONS,
   VALID_STEPS_MODIFIERS,
 } from '../constants';
-import type { PredefinedTimingFunction, StepsModifier } from '../easings/types';
+import type { PredefinedTimingFunction, StepsModifier } from '../easing/types';
 import type {
   AnyRecord,
   CSSAnimationKeyframes,
@@ -60,10 +60,13 @@ export const isTimeUnit = (value: unknown): value is TimeUnit =>
 export const isNumber = (value: unknown): value is number =>
   typeof value === 'number' && !isNaN(value);
 
-export const isPercentage = (value: string | number): value is `${number}%` =>
+export const isPercentage = (value: unknown): value is `${number}%` =>
   typeof value === 'string' && /^-?\d+(\.\d+)?%$/.test(value);
 
-export const isAngleValue = (
+export const isLength = (value: unknown): value is `${number}%` | number =>
+  isNumber(value) || isPercentage(value);
+
+export const isAngle = (
   value: string | number
 ): value is `${number}deg` | `${number}rad` =>
   typeof value === 'string' && /^-?\d+(\.\d+)?(deg|rad)$/.test(value);

package/src/css/{platform/web → web}/animationParser.ts

@@ -1,10 +1,10 @@
 'use strict';
-import { hasSuffix } from '../../../common';
+import { hasSuffix } from '../../common';
 import type {
   CSSAnimationKeyframeBlock,
   CSSAnimationKeyframes,
   PlainStyle,
-} from '../../types';
+} from '../types';
 import { PROPERTIES_CONFIG } from './config';
 import { createStyleBuilder } from './style';
 import { parseTimingFunction } from './utils';

package/src/css/{platform/web → web}/config.ts

@@ -1,6 +1,6 @@
 'use strict';
-import { processBoxShadowWeb } from '../../../common';
-import type { PlainStyle } from '../../types';
+import { processBoxShadowWeb } from '../../common';
+import type { PlainStyle } from '../types';
 import type { StyleBuilderConfig } from './style';
 import {
   boxShadowBuilder,

package/src/css/{platform/web → web}/domUtils.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { IS_WINDOW_AVAILABLE, logger, ReanimatedError } from '../../../common';
+import { IS_WINDOW_AVAILABLE, logger, ReanimatedError } from '../../common';
 
 const CSS_ANIMATIONS_STYLE_TAG_ID = 'ReanimatedCSSStyleTag';
 

package/src/css/{platform/web → web}/index.ts

@@ -1,5 +1,7 @@
 'use strict';
 export * from './animationParser';
 export * from './domUtils';
+export * from './keyframes';
+export * from './managers';
 export * from './normalization';
 export * from './utils';

package/src/css/{models/CSSKeyframesRule.web.ts → web/keyframes/CSSKeyframesRuleImpl.ts}

@@ -1,7 +1,7 @@
 'use strict';
-import { processKeyframeDefinitions } from '../platform/web';
-import type { CSSAnimationKeyframes, PlainStyle } from '../types';
-import CSSKeyframesRuleBase from './CSSKeyframesRuleBase';
+import { CSSKeyframesRuleBase } from '../../models';
+import type { CSSAnimationKeyframes, PlainStyle } from '../../types';
+import { processKeyframeDefinitions } from '../animationParser';
 
 export default class CSSKeyframesRuleImpl<
   S extends PlainStyle = PlainStyle,

package/src/css/web/keyframes/index.ts

@@ -0,0 +1,2 @@
+'use strict';
+export { default as CSSKeyframesRuleImpl } from './CSSKeyframesRuleImpl';

package/src/css/{managers/CSSAnimationsManager.web.ts → web/managers/CSSAnimationsManager.ts}

@@ -1,24 +1,23 @@
 'use strict';
-import type { ReanimatedHTMLElement } from '../../ReanimatedModule/js-reanimated';
-import CSSKeyframesRuleImpl from '../models/CSSKeyframesRule.web';
-import {
-  configureWebCSSAnimations,
-  insertCSSAnimation,
-  maybeAddSuffixes,
-  parseTimingFunction,
-  processKeyframeDefinitions,
-  removeCSSAnimation,
-} from '../platform/web';
+import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated';
 import type {
   ConvertValuesToArrays,
   CSSAnimationKeyframes,
   CSSAnimationSettings,
   ExistingCSSAnimationProperties,
-} from '../types';
-import type { ICSSAnimationsManager } from '../types/interfaces';
-import { convertPropertiesToArrays, kebabizeCamelCase } from '../utils';
+  ICSSAnimationsManager,
+} from '../../types';
+import { convertPropertiesToArrays, kebabizeCamelCase } from '../../utils';
+import { processKeyframeDefinitions } from '../animationParser';
+import {
+  configureWebCSSAnimations,
+  insertCSSAnimation,
+  removeCSSAnimation,
+} from '../domUtils';
+import { CSSKeyframesRuleImpl } from '../keyframes';
+import { maybeAddSuffixes, parseTimingFunction } from '../utils';
 
-export const isCSSKeyframesRuleImpl = (
+const isCSSKeyframesRuleImpl = (
   keyframes: ExistingCSSAnimationProperties['animationName']
 ): keyframes is CSSKeyframesRuleImpl =>
   typeof keyframes === 'object' && 'processedKeyframes' in keyframes;

package/src/css/{managers/CSSManager.web.ts → web/managers/CSSManager.ts}

@@ -1,11 +1,11 @@
 'use strict';
-import type { ViewInfo } from '../../createAnimatedComponent/commonTypes';
-import type { ReanimatedHTMLElement } from '../../ReanimatedModule/js-reanimated';
-import type { CSSStyle } from '../types';
-import type { ICSSManager } from '../types/interfaces';
-import { filterCSSAndStyleProperties } from '../utils';
-import CSSAnimationsManager from './CSSAnimationsManager.web';
-import CSSTransitionsManager from './CSSTransitionsManager.web';
+import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
+import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated';
+import type { CSSStyle } from '../../types';
+import type { ICSSManager } from '../../types/interfaces';
+import { filterCSSAndStyleProperties } from '../../utils';
+import CSSAnimationsManager from './CSSAnimationsManager';
+import CSSTransitionsManager from './CSSTransitionsManager';
 
 export default class CSSManager implements ICSSManager {
   private readonly element: ReanimatedHTMLElement;

package/src/css/{managers/CSSTransitionsManager.web.ts → web/managers/CSSTransitionsManager.ts}

@@ -1,13 +1,12 @@
 'use strict';
-import type { ReanimatedHTMLElement } from '../../ReanimatedModule/js-reanimated';
-import {
-  maybeAddSuffixes,
-  normalizeCSSTransitionProperties,
-  parseTimingFunction,
-} from '../platform/web';
-import type { CSSTransitionProperties } from '../types';
-import type { ICSSTransitionsManager } from '../types/interfaces';
-import { kebabizeCamelCase } from '../utils';
+import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated';
+import type {
+  CSSTransitionProperties,
+  ICSSTransitionsManager,
+} from '../../types';
+import { kebabizeCamelCase } from '../../utils';
+import { normalizeCSSTransitionProperties } from '../normalization';
+import { maybeAddSuffixes, parseTimingFunction } from '../utils';
 
 export default class CSSTransitionsManager implements ICSSTransitionsManager {
   private readonly element: ReanimatedHTMLElement;

package/src/css/web/managers/index.ts

@@ -0,0 +1,2 @@
+'use strict';
+export { default as CSSManager } from './CSSManager';

package/src/css/{platform/web → web}/normalization/transition.ts

@@ -3,12 +3,12 @@ import type {
   AnyRecord,
   CSSTransitionProp,
   CSSTransitionProperties,
-} from '../../../types';
+} from '../../types';
 import {
   convertPropertyToArray,
   parseSingleTransitionShorthand,
   splitByComma,
-} from '../../../utils';
+} from '../../utils';
 
 type ExpandedCSSTransitionConfigProperties = Record<
   Exclude<CSSTransitionProp, 'transition'>,

package/src/css/{platform/web → web}/style/builderFactories.ts

@@ -1,14 +1,14 @@
 'use strict';
 
-import { hasSuffix } from '../../../../common';
-import type { AnyRecord } from '../../../types';
+import { hasSuffix } from '../../../common';
+import type { AnyRecord } from '../../types';
 import {
   hasProp,
   isConfigPropertyAlias,
   isDefined,
   isRecord,
   kebabizeCamelCase,
-} from '../../../utils';
+} from '../../utils';
 import type {
   AnyBuilderConfig,
   RuleBuilder,

package/src/css/{platform/web → web}/style/builders/shadows.ts

@@ -1,8 +1,8 @@
 'use strict';
 import type { TextStyle, ViewStyle } from 'react-native';
 
-import type { ValueProcessor } from '../../../../../common';
-import { logger } from '../../../../../common';
+import type { ValueProcessor } from '../../../../common';
+import { logger } from '../../../../common';
 import { opacifyColor } from '../../utils';
 import { createRuleBuilder } from '../builderFactories';
 import { processColor } from '../processors';

package/src/css/{platform/web → web}/style/processors/colors.ts

@@ -1,8 +1,8 @@
 'use strict';
 import type { ColorValue } from 'react-native';
 
-import { convertToRGBA, rgbaArrayToRGBAColor } from '../../../../../Colors';
-import { isNumber } from '../../../../utils';
+import { convertToRGBA, rgbaArrayToRGBAColor } from '../../../../Colors';
+import { isNumber } from '../../../utils';
 import type { ValueProcessor } from '../types';
 
 export const processColor: ValueProcessor<ColorValue> = (value) => {

package/src/css/{platform/web → web}/style/processors/filter.ts

@@ -1,7 +1,7 @@
 'use strict';
 import type { FilterFunction } from 'react-native';
 
-import { maybeAddSuffix } from '../../../../../common';
+import { maybeAddSuffix } from '../../../../common';
 import type { ValueProcessor } from '../types';
 
 const FILTER_SUFFIXES: Record<string, string> = {

package/src/css/{platform/web → web}/style/processors/font.ts

@@ -1,7 +1,7 @@
 'use strict';
 import type { FontVariant } from 'react-native';
 
-import { FONT_WEIGHT_MAPPINGS } from '../../../../constants';
+import { FONT_WEIGHT_MAPPINGS } from '../../../constants';
 import type { ValueProcessor } from '../types';
 
 export const processFontWeight: ValueProcessor<number | string> = (value) => {

package/src/css/{platform/web → web}/style/types.ts

@@ -1,6 +1,6 @@
 'use strict';
-import type { Maybe } from '../../../../common';
-import type { AnyRecord } from '../../../types';
+import type { Maybe } from '../../../common';
+import type { AnyRecord } from '../../types';
 
 export type ValueProcessor<V> = (
   value: V

package/src/css/{platform/web → web}/utils.ts

@@ -6,11 +6,11 @@ import {
   maybeAddSuffix,
   processColor,
   ReanimatedError,
-} from '../../../common';
-import type { ParametrizedTimingFunction } from '../../easings';
-import { CubicBezierEasing, LinearEasing, StepsEasing } from '../../easings';
-import type { AddArrayPropertyType, ConvertValuesToArrays } from '../../types';
-import { kebabizeCamelCase } from '../../utils';
+} from '../../common';
+import type { ParametrizedTimingFunction } from '../easing';
+import { CubicBezierEasing, LinearEasing, StepsEasing } from '../easing';
+import type { AddArrayPropertyType, ConvertValuesToArrays } from '../types';
+import { kebabizeCamelCase } from '../utils';
 
 export function maybeAddSuffixes<T, K extends keyof T>(
   object: ConvertValuesToArrays<T>,