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

package/src/css/{platform/native → native}/normalization/animation/keyframes.ts

@@ -1,16 +1,15 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { StyleProps } from '../../../../../commonTypes';
-import { PERCENTAGE_REGEX } from '../../../../constants';
+import { ReanimatedError } from '../../../../common';
+import type { StyleProps } from '../../../../commonTypes';
+import { PERCENTAGE_REGEX } from '../../../constants';
 import type {
   AnyRecord,
   CSSAnimationKeyframes,
   CSSAnimationKeyframeSelector,
   CSSAnimationTimingFunction,
-} from '../../../../types';
-import { isDefined, isNumber } from '../../../../utils';
-import { SEPARATELY_INTERPOLATED_ARRAY_PROPERTIES } from '../../config';
-import styleBuilder from '../../styleBuilder';
+} from '../../../types';
+import { isDefined, isNumber } from '../../../utils';
+import type { StyleBuilder } from '../../style';
 import type {
   NormalizedCSSAnimationKeyframesConfig,
   NormalizedCSSKeyframesStyle,
@@ -69,7 +68,8 @@ type ProcessedKeyframes = Array<{
 }>;
 
 function processKeyframes(
-  keyframes: CSSAnimationKeyframes
+  keyframes: CSSAnimationKeyframes,
+  styleBuilder: StyleBuilder<AnyRecord>
 ): ProcessedKeyframes {
   return Object.entries(keyframes)
     .flatMap(
@@ -101,7 +101,8 @@ function processKeyframes(
 function processStyleProperties<S extends AnyRecord>(
   offset: number,
   style: S,
-  keyframeStyle: AnyRecord
+  keyframeStyle: AnyRecord,
+  styleBuilder: StyleBuilder<AnyRecord>
 ) {
   Object.entries(style).forEach(([property, value]) => {
     if (!isDefined(value)) {
@@ -111,12 +112,17 @@ function processStyleProperties<S extends AnyRecord>(
     if (typeof value === 'object') {
       if (
         !Array.isArray(value) ||
-        SEPARATELY_INTERPOLATED_ARRAY_PROPERTIES.has(property)
+        styleBuilder.isSeparatelyInterpolatedArrayProperty(property)
       ) {
         if (!keyframeStyle[property]) {
           keyframeStyle[property] = Array.isArray(value) ? [] : {};
         }
-        processStyleProperties(offset, value, keyframeStyle[property]);
+        processStyleProperties(
+          offset,
+          value,
+          keyframeStyle[property],
+          styleBuilder
+        );
         return;
       }
     }
@@ -129,17 +135,20 @@ function processStyleProperties<S extends AnyRecord>(
 }
 
 export function normalizeAnimationKeyframes(
-  keyframes: CSSAnimationKeyframes
+  keyframes: CSSAnimationKeyframes,
+  styleBuilder: StyleBuilder<AnyRecord>
 ): NormalizedCSSAnimationKeyframesConfig {
   const keyframesStyle: NormalizedCSSKeyframesStyle = {};
   const timingFunctions: NormalizedCSSKeyframeTimingFunctions = {};
 
-  processKeyframes(keyframes).forEach(({ offset, style, timingFunction }) => {
-    processStyleProperties(offset, style, keyframesStyle);
-    if (timingFunction && offset < 1) {
-      timingFunctions[offset] = normalizeTimingFunction(timingFunction);
+  processKeyframes(keyframes, styleBuilder).forEach(
+    ({ offset, style, timingFunction }) => {
+      processStyleProperties(offset, style, keyframesStyle, styleBuilder);
+      if (timingFunction && offset < 1) {
+        timingFunctions[offset] = normalizeTimingFunction(timingFunction);
+      }
     }
-  });
+  );
 
   return { keyframesStyle, keyframeTimingFunctions: timingFunctions };
 }

package/src/css/{platform/native → native}/normalization/animation/properties.ts

@@ -2,8 +2,8 @@
 import type {
   ExistingCSSAnimationProperties,
   SingleCSSAnimationProperties,
-} from '../../../../types';
-import { convertPropertiesToArrays } from '../../../../utils';
+} from '../../../types';
+import { convertPropertiesToArrays } from '../../../utils';
 
 export function createSingleCSSAnimationProperties(
   properties: ExistingCSSAnimationProperties

package/src/css/{platform/native → native}/normalization/animation/settings.ts

@@ -1,13 +1,13 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../../common';
 import type {
   CSSAnimationDirection,
   CSSAnimationFillMode,
   CSSAnimationIterationCount,
   CSSAnimationPlayState,
   SingleCSSAnimationSettings,
-} from '../../../../types';
-import { deepEqual, isNumber } from '../../../../utils';
+} from '../../../types';
+import { deepEqual, isNumber } from '../../../utils';
 import type { NormalizedSingleCSSAnimationSettings } from '../../types';
 import {
   normalizeDelay,

package/src/css/{platform/native → native}/normalization/common/settings.ts

@@ -1,17 +1,17 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../../common';
 import {
   MILLISECONDS_REGEX,
   SECONDS_REGEX,
   VALID_PREDEFINED_TIMING_FUNCTIONS,
-} from '../../../../constants';
+} from '../../../constants';
 import type {
   CSSTimingFunction,
   NormalizedCSSTimingFunction,
   PredefinedTimingFunction,
-} from '../../../../easings';
-import type { TimeUnit } from '../../../../types';
-import { isPredefinedTimingFunction } from '../../../../utils';
+} from '../../../easing';
+import type { TimeUnit } from '../../../types';
+import { isPredefinedTimingFunction } from '../../../utils';
 
 export const ERROR_MESSAGES = {
   invalidDelay: (timeUnit: TimeUnit) =>

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

@@ -1,15 +1,15 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../../common';
 import type {
   AnyRecord,
   CSSTransitionProperties,
   CSSTransitionProperty,
-} from '../../../../types';
+} from '../../../types';
 import {
   areArraysEqual,
   convertPropertyToArray,
   deepEqual,
-} from '../../../../utils';
+} from '../../../utils';
 import type {
   NormalizedCSSTransitionConfig,
   NormalizedCSSTransitionConfigUpdates,

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

@@ -1,5 +1,5 @@
 'use strict';
-import type { CSSTransitionBehavior } from '../../../../types';
+import type { CSSTransitionBehavior } from '../../../types';
 
 export const VALID_TRANSITION_BEHAVIORS: CSSTransitionBehavior[] = [
   'normal',

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

@@ -1,6 +1,6 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { CSSTransitionBehavior } from '../../../../types';
+import { ReanimatedError } from '../../../../common';
+import type { CSSTransitionBehavior } from '../../../types';
 import { VALID_TRANSITION_BEHAVIORS } from './constants';
 
 export const ERROR_MESSAGES = {

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

@@ -1,11 +1,11 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { ControlPoint, CSSTimingFunction } from '../../../../easings';
-import { cubicBezier, linear, steps } from '../../../../easings';
+import { ReanimatedError } from '../../../../common';
+import type { ControlPoint, CSSTimingFunction } from '../../../easing';
+import { cubicBezier, linear, steps } from '../../../easing';
 import type {
   ConvertValuesToArraysWithUndefined,
   CSSTransitionProperties,
-} from '../../../../types';
+} from '../../../types';
 import {
   camelizeKebabCase,
   isArrayOfLength,
@@ -15,7 +15,7 @@ import {
   parseSingleTransitionShorthand,
   splitByComma,
   splitByWhitespace,
-} from '../../../../utils';
+} from '../../../utils';
 
 export type ExpandedCSSTransitionConfigProperties = Required<
   ConvertValuesToArraysWithUndefined<

package/src/css/{platform/native/native.ts → native/proxy.ts}

@@ -1,6 +1,6 @@
 'use strict';
-import type { ShadowNodeWrapper, StyleProps } from '../../../commonTypes';
-import { ReanimatedModule } from '../../../ReanimatedModule';
+import type { ShadowNodeWrapper, StyleProps } from '../../commonTypes';
+import { ReanimatedModule } from '../../ReanimatedModule';
 import type {
   CSSAnimationUpdates,
   NormalizedCSSAnimationKeyframesConfig,
@@ -27,13 +27,21 @@ export function unmarkNodeAsRemovable(viewTag: number) {
 
 export function registerCSSKeyframes(
   animationName: string,
+  viewName: string,
   keyframesConfig: NormalizedCSSAnimationKeyframesConfig
 ) {
-  ReanimatedModule.registerCSSKeyframes(animationName, keyframesConfig);
+  ReanimatedModule.registerCSSKeyframes(
+    animationName,
+    viewName,
+    keyframesConfig
+  );
 }
 
-export function unregisterCSSKeyframes(animationName: string) {
-  ReanimatedModule.unregisterCSSKeyframes(animationName);
+export function unregisterCSSKeyframes(
+  animationName: string,
+  viewName: string
+) {
+  ReanimatedModule.unregisterCSSKeyframes(animationName, viewName);
 }
 
 // View animations

package/src/css/native/registry.ts

@@ -0,0 +1,41 @@
+'use strict';
+import { ReanimatedError } from '../../common';
+import type { StyleBuilder, StyleBuilderConfig } from './style';
+import { BASE_PROPERTIES_CONFIG, createStyleBuilder } from './style';
+
+export const ERROR_MESSAGES = {
+  styleBuilderNotFound: (componentName: string) =>
+    `CSS style builder for component ${componentName} was not found`,
+};
+
+const baseStyleBuilder = createStyleBuilder(BASE_PROPERTIES_CONFIG, {
+  separatelyInterpolatedArrayProperties: ['transformOrigin', 'boxShadow'],
+});
+
+const STYLE_BUILDERS: Record<string, StyleBuilder> = {};
+
+export function hasStyleBuilder(componentName: string): boolean {
+  return !!STYLE_BUILDERS[componentName] || componentName.startsWith('RCT');
+}
+
+export function getStyleBuilder(componentName: string): StyleBuilder {
+  const styleBuilder = STYLE_BUILDERS[componentName];
+
+  if (styleBuilder) {
+    return styleBuilder;
+  }
+
+  // This captures all React Native components
+  if (componentName.startsWith('RCT')) {
+    return baseStyleBuilder;
+  }
+
+  throw new ReanimatedError(ERROR_MESSAGES.styleBuilderNotFound(componentName));
+}
+
+export function registerComponentStyleBuilder(
+  componentName: string,
+  config: StyleBuilderConfig
+) {
+  STYLE_BUILDERS[componentName] = createStyleBuilder(config);
+}

package/src/css/{platform/native → native/style}/config.ts

@@ -2,24 +2,24 @@
 import {
   IS_ANDROID,
   processBoxShadowNative,
+  processColor,
   processTransformOrigin,
 } from '../../../common';
 import type { PlainStyle } from '../../types';
-import type { StyleBuilderConfig } from './style';
 import {
   processAspectRatio,
-  processColor,
   processFontWeight,
   processGap,
   processInset,
   processInsetBlock,
   processInsetInline,
   processTransform,
-} from './style';
+} from './processors';
+import type { StyleBuilderConfig } from './types';
 
 const colorAttributes = { process: processColor };
 
-export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
+export const BASE_PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   /** Layout and Positioning */
   // FLEXBOX
   flex: true,
@@ -227,8 +227,3 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   filter: false, // web only
   isolation: true,
 };
-
-export const SEPARATELY_INTERPOLATED_ARRAY_PROPERTIES = new Set([
-  'transformOrigin',
-  'boxShadow',
-]);

package/src/css/{platform/native/style/builderFactory.ts → native/style/createStyleBuilder.ts}

@@ -1,18 +1,33 @@
 'use strict';
-import type { AnyRecord } from '../../../types';
-import { isConfigPropertyAlias, isDefined, isRecord } from '../../../utils';
-import type { BuildHandler, StyleBuilder, StyleBuilderConfig } from './types';
+import type { AnyRecord } from '../../types';
+import { isConfigPropertyAlias, isDefined, isRecord } from '../../utils';
+import type {
+  StyleBuilder,
+  StyleBuilderConfig,
+  StyleBuildMiddleware,
+} from './types';
+
+type StyleBuilderOptions<P extends AnyRecord> = {
+  buildMiddleware?: StyleBuildMiddleware<P>;
+  separatelyInterpolatedArrayProperties?: (keyof P)[];
+};
 
 class StyleBuilderImpl<P extends AnyRecord> implements StyleBuilder<P> {
-  private readonly buildHandler: BuildHandler<P>;
-
+  private readonly buildMiddleware: StyleBuildMiddleware<P>;
   private readonly config: StyleBuilderConfig<P>;
+  private readonly separatelyInterpolatedArrayProperties_: (keyof P)[];
 
   private processedProps = {} as P;
 
-  constructor(config: StyleBuilderConfig<P>, buildHandler: BuildHandler<P>) {
+  constructor(config: StyleBuilderConfig<P>, options?: StyleBuilderOptions<P>) {
     this.config = config;
-    this.buildHandler = buildHandler;
+    this.buildMiddleware = options?.buildMiddleware ?? ((props) => props);
+    this.separatelyInterpolatedArrayProperties_ =
+      options?.separatelyInterpolatedArrayProperties ?? [];
+  }
+
+  isSeparatelyInterpolatedArrayProperty(property: keyof P): boolean {
+    return this.separatelyInterpolatedArrayProperties_.includes(property);
   }
 
   add(property: keyof P, value: P[keyof P]): void {
@@ -43,7 +58,7 @@ class StyleBuilderImpl<P extends AnyRecord> implements StyleBuilder<P> {
   }
 
   build(): P | null {
-    const result = this.buildHandler(this.processedProps);
+    const result = this.buildMiddleware(this.processedProps);
     this.cleanup();
 
     if (Object.keys(result).length === 0) {
@@ -75,7 +90,7 @@ class StyleBuilderImpl<P extends AnyRecord> implements StyleBuilder<P> {
 
 export default function createStyleBuilder<P extends AnyRecord>(
   config: StyleBuilderConfig<P>,
-  buildHandler: BuildHandler<P> = (props) => props
+  options?: StyleBuilderOptions<P>
 ): StyleBuilder<Partial<P>> {
-  return new StyleBuilderImpl(config, buildHandler);
+  return new StyleBuilderImpl(config, options);
 }

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

@@ -0,0 +1,6 @@
+'use strict';
+export * from './config';
+export { default as createStyleBuilder } from './createStyleBuilder';
+export * from './processors';
+export type { StyleBuilder } from './types';
+export type * from './types';

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

@@ -1,11 +1,11 @@
 'use strict';
 import type { ColorValue } from 'react-native';
 
-import type { Maybe } from '../../../../../common';
+import type { Maybe } from '../../../../common';
 import {
   processColor as processColorInternal,
   ReanimatedError,
-} from '../../../../../common';
+} from '../../../../common';
 import type { ValueProcessor } from '../types';
 
 export const ERROR_MESSAGES = {

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

@@ -1,6 +1,6 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import { FONT_WEIGHT_MAPPINGS } from '../../../../constants';
+import { ReanimatedError } from '../../../../common';
+import { FONT_WEIGHT_MAPPINGS } from '../../../constants';
 import type { ValueProcessor } from '../types';
 
 const ERROR_MESSAGES = {

package/src/css/{platform/native → native}/style/processors/others.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../../common';
 import type { ValueProcessor } from '../types';
 
 export const ERROR_MESSAGES = {

package/src/css/{platform/native → native}/style/processors/transform.ts

@@ -1,12 +1,7 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { TransformsArray } from '../../../../types';
-import {
-  isAngleValue,
-  isNumber,
-  isNumberArray,
-  isPercentage,
-} from '../../../../utils';
+import { ReanimatedError } from '../../../../common';
+import type { TransformsArray } from '../../../types';
+import { isAngle, isNumber, isNumberArray, isPercentage } from '../../../utils';
 import type { ValueProcessor } from '../types';
 
 export const ERROR_MESSAGES = {
@@ -111,7 +106,7 @@ function parseRotate(
   key: string,
   values: (string | number)[]
 ): TransformsArray {
-  return values.length === 1 && (isAngleValue(values[0]) || values[0] === 0)
+  return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? ([
         { [key]: values[0] === 0 ? '0deg' : values[0] },
       ] as unknown as TransformsArray)
@@ -129,13 +124,13 @@ function parseSkew(values: (number | string)[]): TransformsArray {
 }
 
 function parseSkewX(values: (number | string)[]): TransformsArray {
-  return values.length === 1 && (isAngleValue(values[0]) || values[0] === 0)
+  return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? [{ skewX: values[0] === 0 ? '0deg' : values[0] }]
     : [];
 }
 
 function parseSkewY(values: (number | string)[]): TransformsArray {
-  return values.length === 1 && (isAngleValue(values[0]) || values[0] === 0)
+  return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? [{ skewY: values[0] === 0 ? '0deg' : values[0] }]
     : [];
 }

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

@@ -1,14 +1,15 @@
 'use strict';
-import type { Maybe } from '../../../../common';
-import type { AnyRecord, ConfigPropertyAlias } from '../../../types';
+import type { Maybe } from '../../../common';
+import type { AnyRecord, ConfigPropertyAlias } from '../../types';
 
 export type ValueProcessor<V, R = V> = (
   value: V
 ) => Maybe<R> | Record<string, R>;
 
-export type BuildHandler<P extends AnyRecord> = (props: P) => P;
+export type StyleBuildMiddleware<P extends AnyRecord> = (props: P) => P;
 
-export type StyleBuilder<P extends AnyRecord> = {
+export type StyleBuilder<P extends AnyRecord = AnyRecord> = {
+  isSeparatelyInterpolatedArrayProperty(property: keyof P): boolean;
   add(property: keyof P, value: P[keyof P]): void;
   buildFrom(props: P): P | null;
 };
@@ -29,6 +30,6 @@ type StyleBuilderPropertyConfig<
       process: ValueProcessor<Required<P>[K], any>; // for custom value processing
     };
 
-export type StyleBuilderConfig<P extends AnyRecord> = {
+export type StyleBuilderConfig<P extends AnyRecord = AnyRecord> = {
   [K in keyof Required<P>]: StyleBuilderPropertyConfig<P, K>;
 };

package/src/css/{platform/native → native}/types/animation.ts

@@ -1,11 +1,11 @@
 'use strict';
-import type { NormalizedCSSTimingFunction } from '../../../easings';
+import type { NormalizedCSSTimingFunction } from '../../easing';
 import type {
   CSSAnimationDirection,
   CSSAnimationFillMode,
   CSSAnimationPlayState,
   PlainStyle,
-} from '../../../types';
+} from '../../types';
 
 type CSSKeyframesStyleValue<V> = {
   offset: number;

package/src/css/{platform/native → native}/types/transition.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { NormalizedCSSTimingFunction } from '../../../easings';
+import type { NormalizedCSSTimingFunction } from '../../easing';
 
 export type NormalizedSingleCSSTransitionSettings = {
   duration: number;

package/src/css/platform.ts

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

package/src/css/platform.web.ts

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

package/src/css/stylesheet/keyframes.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { CSSKeyframesRuleImpl } from '../models';
+import { CSSKeyframesRuleImpl } from '../platform';
 import type {
   CSSAnimationKeyframes,
   CSSKeyframesRule,

package/src/css/stylesheet/stylesheet.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { CSSKeyframesRuleImpl } from '../models';
+import { CSSKeyframesRuleImpl } from '../platform';
 import type { CSSStyle } from '../types';
 import { isCSSKeyframesRule } from '../utils';
 

package/src/css/svg/index.ts

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

package/src/css/svg/init.ts

@@ -0,0 +1,19 @@
+'use strict';
+import { registerComponentStyleBuilder } from '../native';
+import {
+  SVG_CIRCLE_PROPERTIES_CONFIG,
+  SVG_ELLIPSE_PROPERTIES_CONFIG,
+  SVG_LINE_PROPERTIES_CONFIG,
+  SVG_PATH_PROPERTIES_CONFIG,
+  SVG_RECT_PROPERTIES_CONFIG,
+} from './native';
+
+export function initSvgCssSupport() {
+  registerComponentStyleBuilder('RNSVGCircle', SVG_CIRCLE_PROPERTIES_CONFIG);
+  registerComponentStyleBuilder('RNSVGEllipse', SVG_ELLIPSE_PROPERTIES_CONFIG);
+  registerComponentStyleBuilder('RNSVGLine', SVG_LINE_PROPERTIES_CONFIG);
+  registerComponentStyleBuilder('RNSVGPath', SVG_PATH_PROPERTIES_CONFIG);
+  registerComponentStyleBuilder('RNSVGRect', SVG_RECT_PROPERTIES_CONFIG);
+
+  // TODO: Add more SVG components as they are implemented
+}

package/src/css/svg/init.web.ts

@@ -0,0 +1,5 @@
+'use strict';
+
+export function initSvgCssSupport() {
+  // TODO: Add web support for SVG components
+}

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

@@ -0,0 +1,15 @@
+'use strict';
+import type { CircleProps } from 'react-native-svg';
+
+import { processOpacity } from '../processors';
+import type { SvgStyleBuilderConfig } from './common';
+import { commonSvgProps } from './common';
+
+export const SVG_CIRCLE_PROPERTIES_CONFIG: SvgStyleBuilderConfig<CircleProps> =
+  {
+    ...commonSvgProps,
+    cx: true,
+    cy: true,
+    r: true,
+    opacity: { process: processOpacity },
+  };