@symbiote-native/engine 0.4.0 → 1.0.0

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

@@ -1,189 +1,25 @@
-// 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.
-import { isOpaqueColorValue, processColor } from '../platform-color/index.js';
-import { dlog } from '../debug.js';
-// 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).
+// RN's own processBoxShadow, imported rather than ported.
+//
+// Why it is needed at all: RN registers `boxShadow` with `nativeCSSParsing ? true : {process:
+// processBoxShadow}`, and enableNativeCSSParsing() defaults to false - so the stock path parses
+// the CSS string / structured array in JS and sends native only the processed array. Symbiote
+// forwarded the raw value, which native silently ignores with CSS parsing off: the shadow simply
+// did not paint.
+//
+// Why no try/catch, unlike processTransform's wrapper: upstream has zero `invariant` and zero
+// `throw` sites here. It answers `[]` for anything it cannot parse - web semantics, where an
+// invalid box-shadow paints nothing rather than a partial shadow. A guard that can never fire is
+// worse than none: it reads as verified and has never run.
+//
+// What changed by importing: colour now goes through RN's own `processColor` (upstream imports it
+// directly at processBoxShadow.js:14) instead of our injected `setColorProcessor` seam. On a real
+// host those are the same function - bootstrapHost injects exactly `processColor` and nothing in
+// the repo passes a custom one. The seam still governs every OTHER colour prop; it simply no
+// longer governs the colours inside a box-shadow.
+//
+// @ts-expect-error - untyped Flow source. Metro compiles it; vitest.config.ts strips the types.
+import processBoxShadowUpstream from 'react-native/Libraries/StyleSheet/processBoxShadow';
 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;
+    const parsed = processBoxShadowUpstream(rawBoxShadows);
+    return Array.isArray(parsed) ? parsed : [];
 }

package/build/process-filter.js

@@ -1,305 +1,32 @@
-// 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.
-import { isOpaqueColorValue, processColor } from './platform-color/index.js';
+// RN's own processFilter, imported rather than ported.
+//
+// Why it is needed at all: RN registers `filter` with `nativeCSSParsing ? true : {process:
+// processFilter}`, and enableNativeCSSParsing() defaults to false - so the stock path parses the
+// CSS string / structured array in JS and native never sees the raw string.
+//
+// Why the try/catch, unlike processBoxShadow's wrapper: upstream throws exactly once
+// (processFilter.js:120, a TypeError for an input that is neither string nor array), and a commit
+// path must never throw. fabric-props narrows before calling, but `processFilter` is on the public
+// barrel, so the guard is reachable rather than ceremonial.
+//
+// What changed by importing: a drop-shadow's colour now goes through RN's own `processColor`
+// (upstream imports it directly at processFilter.js:16) instead of our injected
+// `setColorProcessor` seam. On a real host those are the same function - bootstrapHost injects
+// exactly `processColor` - so the seam simply no longer governs the colour inside a filter.
+//
+// Platform caveat worth keeping in view when demoing this: on iOS RN paints only `brightness` and
+// `opacity` unless enableSwiftUIBasedFilters is on, so grayscale/blur/saturate/contrast/hueRotate
+// parse correctly here and still do nothing on screen.
 import { dlog } from './debug.js';
-import { isRecord } from './type-guards.js';
-// 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;
-// 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).
+// @ts-expect-error - untyped Flow source. Metro compiles it; vitest.config.ts strips the types.
+import processFilterUpstream from 'react-native/Libraries/StyleSheet/processFilter';
 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;
+    try {
+        const parsed = processFilterUpstream(filter);
+        return Array.isArray(parsed) ? parsed : [];
     }
-    if (match[3] == null && match[1] !== '0') {
-        return null;
+    catch (error) {
+        dlog(`processFilter: dropped an invalid filter - ${error instanceof Error ? error.message : String(error)}`);
+        return [];
     }
-    return Number(match[1]);
 }

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

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