@pixodesk/svg-animator-rn 1.0.35 → 1.0.40

package/src/PxRnRender.tsx

@@ -3,20 +3,13 @@
  * Licensed under the MIT License. See the LICENSE file in the project root for details.
  *---------------------------------------------------------------------------------------*/
 
-import {
-    getNormalizedProps,
-    resolveStyle,
-    sanitiseAttributeValue,
-    DISALLOWED_SVG_TAGS_LOWER,
-    TEXT_ATTR,
-    TEXT_CONTENT_ATTR,
-    type PxDefs,
-    type PxNode,
-} from '@pixodesk/svg-animator-core';
+import { getNormalizedProps, type PxDefs, type PxNode } from '@pixodesk/svg-animator-core';
+import { sanitizeAttributeValue, DISALLOWED_SVG_TAGS_LOWER, TEXT_CONTENT_ATTR } from '@pixodesk/svg-animator-core/internal';
 import { createElement, type ComponentType, type ReactElement, type ReactNode } from 'react';
 import { RN_SVG_COMPONENTS } from './PxRnTypeMap';
 import { toRnPropName, toRnPropValue } from './PxRnPropNames';
 
+/** @internal */
 export interface RenderRnNodeOptions {
     /** Collects non-fatal issues (unsupported tags, dropped attrs). */
     warnings?: Array<string>;
@@ -42,27 +35,29 @@ export interface RenderRnNodeOptions {
 }
 
 /**
- * Converts core-normalised wire props into react-native-svg props: RN prop
- * naming, sanitisation (same security rules as the web renderer), numeric
+ * Converts core-normalized wire props into react-native-svg props: RN prop
+ * naming, sanitization (same security rules as the web renderer), numeric
  * coercion where possible.
+ * @internal
  */
 export function toRnProps(props: Record<string, any>, warnings?: Array<string>, tag?: string): Record<string, any> {
-    const normalised = getNormalizedProps(props);
+    const normalized = getNormalizedProps(props);
     const out: Record<string, any> = {};
-    for (const key of Object.keys(normalised)) {
-        const sanitised = sanitiseAttributeValue(key, normalised[key]);
-        if (sanitised === undefined) continue;
+    for (const key of Object.keys(normalized)) {
+        const sanitized = sanitizeAttributeValue(key, normalized[key]);
+        if (sanitized === undefined) continue;
         const rnKey = toRnPropName(key);
         if (!rnKey) continue;
-        out[rnKey] = toRnPropValue(rnKey, String(sanitised), tag);
+        out[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
     }
     return out;
 }
 
 /**
- * Renders a (materialised) PxNode tree to react-native-svg elements.
+ * Renders a (materialized) PxNode tree to react-native-svg elements.
  * Mirrors the web `renderNode` contract: unsupported/dangerous tags are
  * skipped with a warning, never a crash.
+ * @internal
  */
 export function renderRnNode(node: PxNode, opts: RenderRnNodeOptions = {}, key?: string | number): ReactElement | null {
     if (!node) return null;
@@ -92,23 +87,22 @@ export function renderRnNode(node: PxNode, opts: RenderRnNodeOptions = {}, key?:
     const rnProps = toRnProps(props, opts.warnings, tag);
     if (domType !== undefined) rnProps.type = domType;
 
-    // `node.style` — a named preset from `definitions.styles`, or an inline
-    // record. react-native-svg has no CSS, so the resolved declarations are
-    // applied as ordinary props (the same names, e.g. `fill`, `strokeWidth`).
+    // `node.style` — an inline record of declarations. react-native-svg has no CSS, so
+    // they are applied as ordinary props (the same names, e.g. `fill`, `strokeWidth`).
     // Explicit attributes on the node win over the style block.
-    const resolved = resolveStyle(style, opts.defs);
+    const resolved = style;
     if (resolved) {
         for (const [k, v] of Object.entries(resolved)) {
             const rnKey = toRnPropName(k);
             if (!rnKey || rnKey in rnProps) continue;
-            const sanitised = sanitiseAttributeValue(rnKey, v);
-            if (sanitised === undefined) continue;
-            rnProps[rnKey] = toRnPropValue(rnKey, String(sanitised), tag);
+            const sanitized = sanitizeAttributeValue(rnKey, v);
+            if (sanitized === undefined) continue;
+            rnProps[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
         }
     }
 
-    // Text content: wire nodes carry it as `text` / `textContent` attr.
-    const textContent: string | undefined = props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR];
+    // Text content: wire nodes carry it in `textContent` — the one key.
+    const textContent: string | undefined = props[TEXT_CONTENT_ATTR];
 
     let childElements: ReactNode = undefined;
     if (Array.isArray(children) && children.length > 0) {

package/src/PxRnSafety.ts

@@ -3,7 +3,8 @@
  * Licensed under the MIT License. See the LICENSE file in the project root for details.
  *---------------------------------------------------------------------------------------*/
 
-import { deepClone, generateUniqueId, type PxNode } from '@pixodesk/svg-animator-core';
+import { type PxNode } from '@pixodesk/svg-animator-core';
+import { deepClone, generateUniqueId } from '@pixodesk/svg-animator-core/internal';
 
 /**
  * Workarounds for defects in react-native-svg's NATIVE renderer that would
@@ -57,6 +58,7 @@ function forEachNode(node: PxNode | undefined, visit: (n: PxNode, parent?: PxNod
  * has zero length and nothing changes visually at all.
  *
  * Returns the document unchanged — the same object — when nothing matches.
+ * @internal
  */
 export function openClosedTextPathTargets(doc: PxNode, warnings?: Array<string>): PxNode {
     // Cheap pre-check: the overwhelming majority of documents have no textPath.

package/src/PxRnTracks.test.ts

@@ -4,7 +4,7 @@
  *---------------------------------------------------------------------------------------*/
 
 import { describe, expect, it } from 'vitest';
-import { generateNewIds, materialiseAllInTree, PxTimelineEngine, type PxAnimatedSvgDocument } from '@pixodesk/svg-animator-core';
+import { generateNewIds, materializeAllInTree, PxTimelineEngine, type PxAnimatedSvgDocument } from '@pixodesk/svg-animator-core';
 import { compileTracks, sampleProps } from './PxRnTracks';
 import { toRnPropName } from './PxRnPropNames';
 
@@ -37,8 +37,8 @@ function makeDoc(): PxAnimatedSvgDocument {
 }
 
 function compile(doc = makeDoc(), opts?: Parameters<typeof compileTracks>[1]) {
-    const materialised = generateNewIds(materialiseAllInTree(doc, PxTimelineEngine.js));
-    return compileTracks(materialised, opts);
+    const materialized = generateNewIds(materializeAllInTree(doc, PxTimelineEngine.js));
+    return compileTracks(materialized, opts);
 }
 
 describe('compileTracks', () => {
@@ -76,7 +76,7 @@ describe('compileTracks', () => {
         expect(+rect.props.strokeWidth[rect.props.strokeWidth.length - 1]).toBe(5);
     });
 
-    it('samples colour props as rgba strings', () => {
+    it('samples color props as rgba strings', () => {
         const tracks = compile();
         const rect = tracks.elements.find(e => 'fill' in e.props)!;
         expect(String(rect.props.fill[0])).toMatch(/^rgba\(/);
@@ -156,8 +156,8 @@ describe('length-list props (stroke-dasharray)', () => {
                 effects: { strokeTrim: { range: { keyframes: [{ time: 0, value: [0, 0.1] }, { time: 1000, value: [0, 1] }] } } },
             }],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxTimelineEngine.native));
-        const tracks = compileTracks(materialised);
+        const materialized = generateNewIds(materializeAllInTree(doc, PxTimelineEngine.native));
+        const tracks = compileTracks(materialized);
         const el = tracks.elements.find(e => 'strokeDasharray' in e.props)!;
         expect(el).toBeDefined();
         const first = el.props.strokeDasharray[0];
@@ -167,7 +167,7 @@ describe('length-list props (stroke-dasharray)', () => {
     });
 });
 
-describe('animated <use> flattening (waapi materialisation)', () => {
+describe('animated <use> flattening (waapi materialization)', () => {
     it('inlines animated <use> clones so no live references remain', () => {
         const doc: PxAnimatedSvgDocument = {
             type: 'svg', viewBox: '0 0 300 200',
@@ -181,12 +181,12 @@ describe('animated <use> flattening (waapi materialisation)', () => {
                 { type: 'use', id: 'u2', href: '#sym', x: 80, effects: { clone: { source: '#sym', retime: { start: -600 } } } },
             ],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxTimelineEngine.native));
+        const materialized = generateNewIds(materializeAllInTree(doc, PxTimelineEngine.native));
         const countUse = (n: any): number =>
             (n.type === 'use' ? 1 : 0) + (n.children || []).reduce((s: number, c: any) => s + countUse(c), 0);
-        expect(countUse(materialised)).toBe(0);
+        expect(countUse(materialized)).toBe(0);
 
-        const tracks = compileTracks(materialised);
+        const tracks = compileTracks(materialized);
         const cyTracks = tracks.elements.filter(e => 'cy' in e.props);
         expect(cyTracks.length).toBe(2);
         expect(cyTracks[0].props.cy[0]).not.toBe(cyTracks[1].props.cy[0]);
@@ -195,9 +195,9 @@ describe('animated <use> flattening (waapi materialisation)', () => {
 
 describe('compileTracks platform gating', () => {
     /** The DEFAULT is the DOM form. react-native-web passes values straight to
-     *  the DOM, where a matrix array serialises to `transform="1,0,0,1,x,y"` —
+     *  the DOM, where a matrix array serializes to `transform="1,0,0,1,x,y"` —
      *  invalid, so the element silently stops moving. Web is the priority
-     *  behaviour; native is the one that has to opt in. */
+     *  behavior; native is the one that has to opt in. */
     it('samples transforms as SVG STRINGS by default', () => {
         const tracks = compile();
         const g = tracks.elements.find(e => 'transform' in e.props)!;

package/src/PxRnTracks.ts

@@ -3,15 +3,8 @@
  * Licensed under the MIT License. See the LICENSE file in the project root for details.
  *---------------------------------------------------------------------------------------*/
 
-import {
-    calcAnimationValues,
-    getAnimatorConfig,
-    getNormalisedBindings,
-    DEFAULT_DURATION_MS,
-    PxTimelineEngine,
-    type PxAnimatedSvgDocument,
-    type PxAnimationDefinition,
-} from '@pixodesk/svg-animator-core';
+import { calcAnimationValues, getAnimatorConfig, getNormalizedBindings, PxTimelineEngine, type PxAnimatedSvgDocument, type PxAnimationDefinition } from '@pixodesk/svg-animator-core';
+import { DEFAULT_DURATION_MS } from '@pixodesk/svg-animator-core/internal';
 import { toRnPropName, toRnPropValue } from './PxRnPropNames';
 
 /**
@@ -20,8 +13,9 @@ import { toRnPropName, toRnPropValue } from './PxRnPropNames';
  * The compiler densely samples every animated property through core's
  * `calcAnimationValues` — the exact function the web frames engine renders
  * with — so RN playback is value-identical to the web player. Easing, loops,
- * transform composition, colour interpolation and path morphing are all baked
+ * transform composition, color interpolation and path morphing are all baked
  * into the samples at compile time; the UI-thread worklet only indexes arrays.
+ * @internal
  */
 export interface PxElementTracks {
     /** Element id (after id regeneration). */
@@ -30,6 +24,7 @@ export interface PxElementTracks {
     props: Record<string, Array<string | number | Array<number>>>;
 }
 
+/** @internal */
 export interface PxCompiledTracks {
     /** Per-iteration duration, ms. */
     duration: number;
@@ -51,6 +46,7 @@ export interface PxCompiledTracks {
     elements: Array<PxElementTracks>;
 }
 
+/** @internal */
 export interface CompileTracksOptions {
     /** Target sample rate, samples/second. Default 60 (one per frame). */
     sampleRate?: number;
@@ -70,8 +66,9 @@ export interface CompileTracksOptions {
 
 
 /**
- * Compiles a MATERIALISED document (run `materialiseAllInTree(doc, 'frames')`
+ * Compiles a MATERIALIZED document (run `materializeAllInTree(doc, 'frames')`
  * + `generateNewIds` first) into densely sampled per-element tracks.
+ * @internal
  */
 export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOptions): PxCompiledTracks {
     const config = getAnimatorConfig(doc) || {};
@@ -99,7 +96,7 @@ export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOp
     };
     indexTags(doc);
 
-    const bindings = getNormalisedBindings(doc, PxTimelineEngine.js) || [];
+    const bindings = getNormalizedBindings(doc, PxTimelineEngine.js) || [];
 
     const elements: Array<PxElementTracks> = [];
     for (const binding of bindings) {
@@ -173,6 +170,7 @@ export const NATIVE_PROP_NAME: Record<string, string> = {
  * reanimated animated-props path of a real device. Props that are applied by
  * re-rendering through React (and therefore still pass through react-native-svg's
  * JS layer), and every value on the web, must keep the wire name.
+ * @internal
  */
 export function sampleProps(
     tracks: PxElementTracks,

package/src/PxRnTypeMap.ts

@@ -63,6 +63,7 @@ import type { ComponentType } from 'react';
  *
  * Keys are the wire-format `node.type` values, which follow SVG's own casing
  * (`clipPath`, `feGaussianBlur`, `linearGradient`, …).
+ * @internal
  */
 export const RN_SVG_COMPONENTS: Record<string, ComponentType<any>> = {
     // Root & containers

package/src/index.ts

@@ -6,12 +6,3 @@
 export { PixodeskSvgAnimator, default } from './PixodeskSvgAnimator';
 export type { PixodeskSvgAnimatorProps, RnAnimatorApi } from './PixodeskSvgAnimator';
 
-export { renderRnNode, toRnProps } from './PxRnRender';
-export { PxRnErrorBoundary, type PxRnErrorBoundaryProps } from './PxRnErrorBoundary';
-export { openClosedTextPathTargets } from './PxRnSafety';
-export type { RenderRnNodeOptions } from './PxRnRender';
-
-export { compileTracks, sampleProps } from './PxRnTracks';
-export type { CompileTracksOptions, PxCompiledTracks, PxElementTracks } from './PxRnTracks';
-
-export { RN_SVG_COMPONENTS, toRnPropName } from './PxRnTypeMap';