@symbiote-native/engine 0.1.0

package/build/process-box-shadow/index.js

@@ -0,0 +1,193 @@
+// JS-side port of RN's processBoxShadow (Libraries/StyleSheet/processBoxShadow.js).
+// RN registers `boxShadow` with enableNativeCSSParsing(), which DEFAULTS TO FALSE, so
+// the stock path parses the CSS string / structured array in JS and sends only the
+// processed array to native; Fabric's C++ never sees the raw string. symbiote was
+// forwarding the raw value, which native (CSS parsing off) silently ignores: shadow
+// rendered nothing. This restores the missing JS parse + per-color processColor.
+//
+// processColor is referenced from ./commit at RUNTIME only (inside the function bodies),
+// never at module-init, so the cyclic import (commit -> here -> commit) has no TDZ hazard.
+import { processColor } from '../commit';
+import { isOpaqueColorValue } from '../platform-color';
+import { dlog } from '../debug';
+// RN processBoxShadow.js:16-19: split args only on the delimiters that are NOT inside
+// a parenthesized color like rgba(0,0,0,1).
+const COMMA_SPLIT_REGEX = /,(?![^()]*\))/;
+const WHITESPACE_SPLIT_REGEX = /\s+(?![^(]*\))/;
+const LENGTH_PARSE_REGEX = /^([+-]?\d*\.?\d+)(px)?$/;
+const NEWLINE_REGEX = /\n/g;
+// A length field may be a CSS string ("22px") or a number; resolve to a number or null.
+// Mirrors RN's `typeof x === 'string' ? parseLength(x) : x`, but typed from `unknown`.
+function resolveLength(value) {
+    if (typeof value === 'string')
+        return parseLength(value);
+    if (typeof value === 'number')
+        return value;
+    return null;
+}
+// A shadow color may already be a platform int (number) or undefined; processColor only
+// types CSS strings / opaque PlatformColor objects. A number is passed through (already
+// resolved), anything else (incl. undefined) is null, i.e. unprocessable, like RN.
+function processShadowColor(color) {
+    if (typeof color === 'number')
+        return color;
+    if (typeof color === 'string' || isOpaqueColorValue(color))
+        return processColor(color);
+    return null;
+}
+// RN processBoxShadow.js:30-111. Returns [] on any invalid primitive (matches web: an
+// invalid box-shadow paints nothing rather than a partial shadow).
+export function processBoxShadow(rawBoxShadows) {
+    const result = [];
+    if (rawBoxShadows == null) {
+        return result;
+    }
+    const boxShadowList = typeof rawBoxShadows === 'string'
+        ? parseBoxShadowString(rawBoxShadows.replace(NEWLINE_REGEX, ' '))
+        : rawBoxShadows;
+    for (const rawBoxShadow of boxShadowList) {
+        const parsedBoxShadow = { offsetX: 0, offsetY: 0 };
+        for (const arg of Object.keys(rawBoxShadow)) {
+            switch (arg) {
+                case 'offsetX': {
+                    const value = resolveLength(rawBoxShadow.offsetX);
+                    if (value == null) {
+                        dlog(`processBoxShadow reject: invalid offsetX "${String(rawBoxShadow.offsetX)}"`);
+                        return [];
+                    }
+                    parsedBoxShadow.offsetX = value;
+                    break;
+                }
+                case 'offsetY': {
+                    const value = resolveLength(rawBoxShadow.offsetY);
+                    if (value == null) {
+                        dlog(`processBoxShadow reject: invalid offsetY "${String(rawBoxShadow.offsetY)}"`);
+                        return [];
+                    }
+                    parsedBoxShadow.offsetY = value;
+                    break;
+                }
+                case 'spreadDistance': {
+                    const value = resolveLength(rawBoxShadow.spreadDistance);
+                    if (value == null) {
+                        dlog(`processBoxShadow reject: invalid spreadDistance`);
+                        return [];
+                    }
+                    parsedBoxShadow.spreadDistance = value;
+                    break;
+                }
+                case 'blurRadius': {
+                    const value = resolveLength(rawBoxShadow.blurRadius);
+                    if (value == null || value < 0) {
+                        dlog(`processBoxShadow reject: invalid blurRadius`);
+                        return [];
+                    }
+                    parsedBoxShadow.blurRadius = value;
+                    break;
+                }
+                case 'color': {
+                    const color = processShadowColor(rawBoxShadow.color);
+                    if (color == null) {
+                        dlog(`processBoxShadow reject: unprocessable color`);
+                        return [];
+                    }
+                    parsedBoxShadow.color = color;
+                    break;
+                }
+                case 'inset':
+                    if (typeof rawBoxShadow.inset === 'boolean')
+                        parsedBoxShadow.inset = rawBoxShadow.inset;
+            }
+        }
+        result.push(parsedBoxShadow);
+    }
+    return result;
+}
+// RN processBoxShadow.js:113-197. Walks each comma-separated shadow, classifying each
+// whitespace-separated arg as a color, the `inset` keyword, or a length by position.
+function parseBoxShadowString(rawBoxShadows) {
+    const result = [];
+    for (const rawBoxShadow of rawBoxShadows
+        .split(COMMA_SPLIT_REGEX)
+        .map(bS => bS.trim())
+        .filter(bS => bS !== '')) {
+        const boxShadow = { offsetX: 0, offsetY: 0 };
+        let offsetX;
+        let offsetY;
+        let keywordDetectedAfterLength = false;
+        let lengthCount = 0;
+        const args = rawBoxShadow.split(WHITESPACE_SPLIT_REGEX);
+        for (const arg of args) {
+            const processedColor = processColor(arg);
+            if (processedColor != null) {
+                if (boxShadow.color != null) {
+                    return [];
+                }
+                if (offsetX != null) {
+                    keywordDetectedAfterLength = true;
+                }
+                boxShadow.color = arg;
+                continue;
+            }
+            if (arg === 'inset') {
+                if (boxShadow.inset != null) {
+                    return [];
+                }
+                if (offsetX != null) {
+                    keywordDetectedAfterLength = true;
+                }
+                boxShadow.inset = true;
+                continue;
+            }
+            switch (lengthCount) {
+                case 0:
+                    offsetX = arg;
+                    lengthCount++;
+                    break;
+                case 1:
+                    if (keywordDetectedAfterLength) {
+                        return [];
+                    }
+                    offsetY = arg;
+                    lengthCount++;
+                    break;
+                case 2:
+                    if (keywordDetectedAfterLength) {
+                        return [];
+                    }
+                    boxShadow.blurRadius = arg;
+                    lengthCount++;
+                    break;
+                case 3:
+                    if (keywordDetectedAfterLength) {
+                        return [];
+                    }
+                    boxShadow.spreadDistance = arg;
+                    lengthCount++;
+                    break;
+                default:
+                    return [];
+            }
+        }
+        if (offsetX == null || offsetY == null) {
+            return [];
+        }
+        boxShadow.offsetX = offsetX;
+        boxShadow.offsetY = offsetY;
+        result.push(boxShadow);
+    }
+    return result;
+}
+// RN processBoxShadow.js:199-214. Accepts a unitless 0 or any `<n>px`; rejects a
+// non-zero number with no unit (CSS requires a unit on lengths).
+function parseLength(length) {
+    const match = LENGTH_PARSE_REGEX.exec(length);
+    if (!match) {
+        return null;
+    }
+    const value = parseFloat(match[1]);
+    if (match[2] == null && value !== 0) {
+        return null;
+    }
+    return value;
+}

package/build/process-filter.d.ts

@@ -0,0 +1,31 @@
+export interface IParsedDropShadow {
+    offsetX: number;
+    offsetY: number;
+    standardDeviation?: number;
+    color?: unknown;
+}
+export type IParsedFilter = {
+    brightness: number;
+} | {
+    blur: number;
+} | {
+    contrast: number;
+} | {
+    grayscale: number;
+} | {
+    hueRotate: number;
+} | {
+    invert: number;
+} | {
+    opacity: number;
+} | {
+    saturate: number;
+} | {
+    sepia: number;
+} | {
+    dropShadow: IParsedDropShadow;
+};
+type IRawDropShadow = Record<string, unknown>;
+type IRawFilterFunction = Record<string, unknown>;
+export declare function processFilter(filter: ReadonlyArray<IRawFilterFunction> | string | undefined): IParsedFilter[];
+export type { IRawDropShadow, IRawFilterFunction };

package/build/process-filter.js

@@ -0,0 +1,304 @@
+// JS-side port of RN's processFilter (Libraries/StyleSheet/processFilter.js).
+// Same root cause as boxShadow: `filter` registers with enableNativeCSSParsing()
+// (DEFAULT FALSE), so RN parses the CSS string / array in JS and forwards only the
+// structured result. symbiote forwarded the raw value; the array form already worked
+// (Fabric accepts it raw, `filter:[{brightness:0.5}]` was device-verified), but the
+// CSS-string form and drop-shadow color processing were missing. This restores them.
+//
+// processColor is referenced from ./commit at RUNTIME only (inside function bodies),
+// never at module-init, so the cyclic import (commit -> here -> commit) has no TDZ hazard.
+import { processColor } from './commit';
+import { isOpaqueColorValue } from './platform-color';
+import { dlog } from './debug';
+// RN processFilter.js:19-24: pre-compiled patterns.
+const NEWLINE_REGEX = /\n/g;
+const FILTER_FUNCTION_REGEX = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g;
+const ARGS_WITH_UNITS_REGEX = /([+-]?\d*(\.\d+)?)([a-zA-Z%]+)?/g;
+const WHITESPACE_SPLIT_REGEX = /\s+(?![^(]*\))/;
+const LENGTH_PARSE_REGEX = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
+const RADIANS_TO_DEGREES = 180 / Math.PI;
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+// A length field may be a CSS string or a number; resolve to a number or null.
+function resolveLength(value) {
+    if (typeof value === 'string')
+        return parseLength(value);
+    if (typeof value === 'number')
+        return value;
+    return null;
+}
+// A drop-shadow color may already be a platform int (number) or undefined; processColor
+// only types CSS strings / opaque PlatformColor objects. Number passes through, anything
+// else (incl. undefined) is null: unprocessable, like RN.
+function processShadowColor(color) {
+    if (typeof color === 'number')
+        return color;
+    if (typeof color === 'string' || isOpaqueColorValue(color))
+        return processColor(color);
+    return null;
+}
+// RN processFilter.js:45-124. Returns [] on any invalid primitive (web semantics: an
+// invalid filter applies none of them, so the missing effect is obvious).
+export function processFilter(filter) {
+    const result = [];
+    if (filter == null) {
+        return result;
+    }
+    if (typeof filter === 'string') {
+        const text = filter.replace(NEWLINE_REGEX, ' ');
+        // Matches functions with args and nested functions like
+        // "drop-shadow(10 10 10 rgba(0, 0, 0, 1))".
+        FILTER_FUNCTION_REGEX.lastIndex = 0;
+        let matches;
+        while ((matches = FILTER_FUNCTION_REGEX.exec(text)) !== null) {
+            const filterName = matches[1].toLowerCase();
+            if (filterName === 'drop-shadow') {
+                const dropShadow = parseDropShadow(matches[2]);
+                if (dropShadow != null) {
+                    result.push({ dropShadow });
+                }
+                else {
+                    dlog(`processFilter reject: invalid drop-shadow "${matches[2]}"`);
+                    return [];
+                }
+            }
+            else {
+                const camelizedName = filterName === 'hue-rotate' ? 'hueRotate' : filterName;
+                const amount = getFilterAmount(camelizedName, matches[2]);
+                if (amount != null) {
+                    result.push(filterEntry(camelizedName, amount));
+                }
+                else {
+                    dlog(`processFilter reject: invalid ${camelizedName} "${matches[2]}"`);
+                    return [];
+                }
+            }
+        }
+    }
+    else if (Array.isArray(filter)) {
+        for (const filterFunction of filter) {
+            const [filterName, filterValue] = Object.entries(filterFunction)[0];
+            if (filterName === 'dropShadow') {
+                const dropShadow = isDropShadowValue(filterValue) ? parseDropShadow(filterValue) : null;
+                if (dropShadow == null) {
+                    dlog(`processFilter reject: invalid dropShadow in array`);
+                    return [];
+                }
+                result.push({ dropShadow });
+            }
+            else {
+                const amount = getFilterAmount(filterName, filterValue);
+                if (amount != null) {
+                    result.push(filterEntry(filterName, amount));
+                }
+                else {
+                    dlog(`processFilter reject: invalid ${filterName} in array`);
+                    return [];
+                }
+            }
+        }
+    }
+    else {
+        throw new TypeError(`${typeof filter} filter is not a string or array`);
+    }
+    return result;
+}
+// RN sets `filterFunction[camelizedName] = amount` and pushes the loose object. We
+// build the discriminated union explicitly to keep it typed without an `as` cast.
+function filterEntry(name, amount) {
+    switch (name) {
+        case 'brightness':
+            return { brightness: amount };
+        case 'blur':
+            return { blur: amount };
+        case 'contrast':
+            return { contrast: amount };
+        case 'grayscale':
+            return { grayscale: amount };
+        case 'hueRotate':
+            return { hueRotate: amount };
+        case 'invert':
+            return { invert: amount };
+        case 'opacity':
+            return { opacity: amount };
+        case 'saturate':
+            return { saturate: amount };
+        default:
+            return { sepia: amount };
+    }
+}
+function isDropShadowValue(value) {
+    return typeof value === 'string' || (isRecord(value) && 'offsetX' in value);
+}
+// RN processFilter.js:126-186.
+function getFilterAmount(filterName, filterArgs) {
+    let filterArgAsNumber;
+    let unit;
+    if (typeof filterArgs === 'string') {
+        // Matches args with units like "1.5 5% -80deg".
+        ARGS_WITH_UNITS_REGEX.lastIndex = 0;
+        const match = ARGS_WITH_UNITS_REGEX.exec(filterArgs);
+        if (!match || isNaN(Number(match[1]))) {
+            return undefined;
+        }
+        filterArgAsNumber = Number(match[1]);
+        unit = match[3];
+    }
+    else if (typeof filterArgs === 'number') {
+        filterArgAsNumber = filterArgs;
+    }
+    else {
+        return undefined;
+    }
+    switch (filterName) {
+        // hueRotate takes an angle that can carry a unit and be negative; bare 0 is allowed.
+        case 'hueRotate':
+            if (filterArgAsNumber === 0) {
+                return 0;
+            }
+            if (unit !== 'deg' && unit !== 'rad') {
+                return undefined;
+            }
+            return unit === 'rad' ? RADIANS_TO_DEGREES * filterArgAsNumber : filterArgAsNumber;
+        // blur takes any non-negative CSS length that is not a percent; RN only has DIPs.
+        case 'blur':
+            if ((unit != null && unit !== 'px') || filterArgAsNumber < 0) {
+                return undefined;
+            }
+            return filterArgAsNumber;
+        // The rest take a non-negative number or percentage (50% == 0.5).
+        case 'brightness':
+        case 'contrast':
+        case 'grayscale':
+        case 'invert':
+        case 'opacity':
+        case 'saturate':
+        case 'sepia':
+            if ((unit != null && unit !== '%' && unit !== 'px') || filterArgAsNumber < 0) {
+                return undefined;
+            }
+            return unit === '%' ? filterArgAsNumber / 100 : filterArgAsNumber;
+        default:
+            return undefined;
+    }
+}
+// RN processFilter.js:188-256.
+function parseDropShadow(rawDropShadow) {
+    const dropShadow = typeof rawDropShadow === 'string' ? parseDropShadowString(rawDropShadow) : rawDropShadow;
+    if (dropShadow == null) {
+        return null;
+    }
+    const parsedDropShadow = { offsetX: 0, offsetY: 0 };
+    let offsetX;
+    let offsetY;
+    for (const arg of Object.keys(dropShadow)) {
+        switch (arg) {
+            case 'offsetX': {
+                const value = resolveLength(dropShadow.offsetX);
+                if (value == null) {
+                    return null;
+                }
+                offsetX = value;
+                break;
+            }
+            case 'offsetY': {
+                const value = resolveLength(dropShadow.offsetY);
+                if (value == null) {
+                    return null;
+                }
+                offsetY = value;
+                break;
+            }
+            case 'standardDeviation': {
+                const value = resolveLength(dropShadow.standardDeviation);
+                if (value == null || value < 0) {
+                    return null;
+                }
+                parsedDropShadow.standardDeviation = value;
+                break;
+            }
+            case 'color': {
+                const color = processShadowColor(dropShadow.color);
+                if (color == null) {
+                    return null;
+                }
+                parsedDropShadow.color = color;
+                break;
+            }
+            default:
+                return null;
+        }
+    }
+    if (offsetX == null || offsetY == null) {
+        return null;
+    }
+    parsedDropShadow.offsetX = offsetX;
+    parsedDropShadow.offsetY = offsetY;
+    return parsedDropShadow;
+}
+// RN processFilter.js:258-312.
+function parseDropShadowString(rawDropShadow) {
+    const dropShadow = { offsetX: 0, offsetY: 0 };
+    let offsetX;
+    let offsetY;
+    let lengthCount = 0;
+    let keywordDetectedAfterLength = false;
+    for (const arg of rawDropShadow.split(WHITESPACE_SPLIT_REGEX)) {
+        const processedColor = processColor(arg);
+        if (processedColor != null) {
+            if (dropShadow.color != null) {
+                return null;
+            }
+            if (offsetX != null) {
+                keywordDetectedAfterLength = true;
+            }
+            dropShadow.color = arg;
+            continue;
+        }
+        switch (lengthCount) {
+            case 0:
+                offsetX = arg;
+                lengthCount++;
+                break;
+            case 1:
+                if (keywordDetectedAfterLength) {
+                    return null;
+                }
+                offsetY = arg;
+                lengthCount++;
+                break;
+            case 2:
+                if (keywordDetectedAfterLength) {
+                    return null;
+                }
+                dropShadow.standardDeviation = arg;
+                lengthCount++;
+                break;
+            default:
+                return null;
+        }
+    }
+    if (offsetX == null || offsetY == null) {
+        return null;
+    }
+    dropShadow.offsetX = offsetX;
+    dropShadow.offsetY = offsetY;
+    return dropShadow;
+}
+// RN processFilter.js:314-332. Accepts a unitless 0 or any `<n>px`; rejects a non-zero
+// unitless length or a non-px unit.
+function parseLength(length) {
+    LENGTH_PARSE_REGEX.lastIndex = 0;
+    const match = LENGTH_PARSE_REGEX.exec(length);
+    if (!match || isNaN(Number(match[1]))) {
+        return null;
+    }
+    if (match[3] != null && match[3] !== 'px') {
+        return null;
+    }
+    if (match[3] == null && match[1] !== '0') {
+        return null;
+    }
+    return Number(match[1]);
+}

package/build/process-font-variant.d.ts

@@ -0,0 +1 @@
+export declare function processFontVariant(fontVariant: ReadonlyArray<string> | string): ReadonlyArray<string>;

package/build/process-font-variant.js

@@ -0,0 +1,17 @@
+// JS-side port of RN's processFontVariant (Libraries/StyleSheet/processFontVariant.js).
+// Same root cause family as boxShadow/filter: RN registers `fontVariant` with a JS
+// `process` because enableNativeCSSParsing() defaults to false, so a space-separated CSS
+// string ('small-caps tabular-nums') is split into the array native expects IN JS. An
+// array (the common, already-working form) passes through untouched; this is a no-op
+// for it.
+// RN processFontVariant.js:15-28. Array → array; space-separated string → array of variants.
+export function processFontVariant(fontVariant) {
+    if (Array.isArray(fontVariant)) {
+        return fontVariant;
+    }
+    if (typeof fontVariant === 'string') {
+        return fontVariant.split(' ').filter(Boolean);
+    }
+    // Neither an array nor a string: nothing to split, hand back an empty variant list.
+    return [];
+}

package/build/process-transform/index.d.ts

@@ -0,0 +1,5 @@
+type ITransformEntry = Record<string, ITransformValue>;
+type ITransformValue = number | string | Array<number | string> | undefined;
+type IRawTransform = Record<string, unknown>;
+export declare function processTransform(transform: ReadonlyArray<IRawTransform> | string | undefined): ReadonlyArray<IRawTransform>;
+export type { ITransformEntry, IRawTransform };

package/build/process-transform/index.js

@@ -0,0 +1,120 @@
+// JS-side port of RN's processTransform (Libraries/StyleSheet/processTransform.js).
+// Same root cause as transformOrigin/boxShadow: ReactNativeStyleAttributes registers
+// `transform` with `nativeCSSParsing ? true : {process: processTransform}`, and
+// enableNativeCSSParsing() DEFAULTS TO FALSE, so RN's stock path runs processTransform
+// IN JS. It only does work for a STRING input (parses the CSS string into the entry
+// array); an ARRAY input is returned UNCHANGED. symbiote forwarded a raw string, which
+// Android native cast to ReadableArray and crashed with
+// `java.lang.String cannot be cast to com.facebook.react.bridge.ReadableArray`. This
+// restores the missing JS parse so native always receives the entry array.
+//
+// CRITICAL: the animated / sticky-header hot path produces transform ARRAYS and flows
+// through commit's processValue on every flush, so the array branch MUST return the
+// byte-identical reference (no decompose, no clone). RN's only array-path work is
+// _validateTransforms, which is __DEV__-only and THROWS via invariant; we never throw
+// into the commit path, so we run a non-throwing check that dlogs and still returns the
+// array unchanged (matching the boxShadow/transformOrigin idiom).
+import { dlog } from '../debug';
+// RN processTransform.js:28: matches each `name(args)` in the CSS string.
+const TRANSFORM_REGEX = /(\w+)\(([^)]+)\)/g;
+// RN processTransform.js:59: splits one arg into [, number, , unit?].
+const ARG_WITH_UNITS_REGEX = /([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g;
+// RN processTransform.js:63: pulls every signed/decimal number out of a matrix arg list.
+const MATRIX_NUMBER_REGEX = /[+-]?\d+(\.\d+)?/g;
+// RN processTransform.js:52-139. Mirrors _getKeyAndValueFromCSSTransform: turns one
+// `key(args)` pair into the entry value native expects.
+function getKeyAndValueFromCSSTransform(key, args) {
+    switch (key) {
+        case 'matrix': {
+            // RN processTransform.js:62-63.
+            const numbers = args.match(MATRIX_NUMBER_REGEX);
+            return { key, value: numbers == null ? undefined : numbers.map(Number) };
+        }
+        case 'translate':
+        case 'translate3d': {
+            // RN processTransform.js:64-113.
+            const parsedArgs = [];
+            ARG_WITH_UNITS_REGEX.lastIndex = 0;
+            let matches;
+            while ((matches = ARG_WITH_UNITS_REGEX.exec(args))) {
+                const value = Number(matches[1]);
+                const unitOfMeasurement = matches[3];
+                if (value !== 0 && !unitOfMeasurement) {
+                    dlog(`processTransform: ${key}(${args}) length must have a unit unless 0`);
+                }
+                if (unitOfMeasurement === '%') {
+                    parsedArgs.push(`${value}%`);
+                }
+                else {
+                    parsedArgs.push(value);
+                }
+            }
+            // RN processTransform.js:109-111: a single-axis translate gets an implicit y of 0.
+            if (parsedArgs.length === 1) {
+                parsedArgs.push(0);
+            }
+            // RN normalizes translate3d down to the `translate` key.
+            return { key: 'translate', value: parsedArgs };
+        }
+        case 'translateX':
+        case 'translateY':
+        case 'perspective': {
+            // RN processTransform.js:114-134.
+            ARG_WITH_UNITS_REGEX.lastIndex = 0;
+            const argMatches = ARG_WITH_UNITS_REGEX.exec(args);
+            if (argMatches == null || argMatches.length === 0) {
+                return { key, value: undefined };
+            }
+            const value = Number(argMatches[1]);
+            const unitOfMeasurement = argMatches[3];
+            if (value !== 0 && !unitOfMeasurement) {
+                dlog(`processTransform: ${key}(${args}) must have a unit unless 0`);
+            }
+            return { key, value };
+        }
+        default:
+            // RN processTransform.js:136-137: a numeric arg (scale, rotate '10' would be NaN)
+            // becomes a number; an angle string ('6deg', '1.16rad') stays a string.
+            return { key, value: isNaN(Number(args)) ? args : Number(args) };
+    }
+}
+// RN processTransform.js:24-50. STRING input is parsed into the entry array; ARRAY input
+// is returned UNCHANGED (RN's only array work, _validateTransforms, is __DEV__-only and
+// throws; we never throw, so we skip it and run a non-throwing dlog sanity check).
+export function processTransform(transform) {
+    if (transform == null) {
+        return [];
+    }
+    if (typeof transform !== 'string') {
+        // Hot path: animated / sticky-header transforms arrive here as arrays. Return the
+        // same reference (no decompose, no clone) so the flush is a no-op.
+        warnInvalidTransforms(transform);
+        return transform;
+    }
+    TRANSFORM_REGEX.lastIndex = 0;
+    const transformArray = [];
+    let matches;
+    while ((matches = TRANSFORM_REGEX.exec(transform))) {
+        const { key, value } = getKeyAndValueFromCSSTransform(matches[1], matches[2]);
+        if (value !== undefined) {
+            transformArray.push({ [key]: value });
+        }
+    }
+    return transformArray;
+}
+// RN processTransform.js:141-159 (_validateTransforms) rewritten to NEVER throw: it only
+// dlogs the same conditions RN's invariant would have flagged, then returns. The commit
+// path keeps the array regardless: an invalid transform is the caller's bug, not ours to
+// abort a frame over.
+function warnInvalidTransforms(transform) {
+    for (const transformation of transform) {
+        const keys = Object.keys(transformation);
+        if (keys.length !== 1) {
+            dlog(`processTransform: each transform object must have exactly one key, got ${keys.length}`);
+            continue;
+        }
+        if (keys[0] === 'matrix' && transform.length > 1) {
+            dlog('processTransform: a matrix transform must be the only transform in the list');
+        }
+    }
+}

package/build/process-transform-origin/index.d.ts

@@ -0,0 +1,3 @@
+type ITransformOriginValue = string | number;
+export declare function processTransformOrigin(transformOrigin: Array<ITransformOriginValue> | string | undefined): Array<ITransformOriginValue>;
+export {};