@pixodesk/svg-animator-rn 1.0.34 → 1.0.39

package/src/PxRnRender.tsx

@@ -6,9 +6,8 @@
 import {
     getNormalizedProps,
     resolveStyle,
-    sanitiseAttributeValue,
+    sanitizeAttributeValue,
     DISALLOWED_SVG_TAGS_LOWER,
-    TEXT_ATTR,
     TEXT_CONTENT_ATTR,
     type PxDefs,
     type PxNode,
@@ -42,25 +41,25 @@ 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.
  */
 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.
  */
@@ -101,14 +100,14 @@ export function renderRnNode(node: PxNode, opts: RenderRnNodeOptions = {}, key?:
         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/PxRnTracks.test.ts

@@ -4,7 +4,7 @@
  *---------------------------------------------------------------------------------------*/
 
 import { describe, expect, it } from 'vitest';
-import { generateNewIds, materialiseAllInTree, PxAnimatorEngine, 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';
 
@@ -12,7 +12,7 @@ function makeDoc(): PxAnimatedSvgDocument {
     return {
         type: 'svg',
         viewBox: '0 0 200 200',
-        animator: { mode: 'frames', duration: 1000, iterations: 2, direction: 'alternate' },
+        animator: { timeline: { engine: 'js', duration: 1000, iterations: 2, direction: 'alternate' } },
         children: [
             {
                 type: 'rect',
@@ -37,8 +37,8 @@ function makeDoc(): PxAnimatedSvgDocument {
 }
 
 function compile(doc = makeDoc(), opts?: Parameters<typeof compileTracks>[1]) {
-    const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.frames));
-    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\(/);
@@ -150,14 +150,14 @@ describe('length-list props (stroke-dasharray)', () => {
     it('compiles stroke-dasharray into number arrays (rn-svg native shape)', () => {
         const doc: PxAnimatedSvgDocument = {
             type: 'svg', viewBox: '0 0 100 100',
-            animator: { mode: 'frames', duration: 1000 },
+            animator: { timeline: { engine: 'js', duration: 1000 } },
             children: [{
                 type: 'path', id: 'p', d: 'M 0 50 L 100 50', stroke: '#000', fill: 'none',
                 effects: { strokeTrim: { range: { keyframes: [{ time: 0, value: [0, 0.1] }, { time: 1000, value: [0, 1] }] } } },
             }],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.waapi));
-        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,26 +167,26 @@ 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',
-            animator: { mode: 'frames', duration: 2000 },
+            animator: { timeline: { engine: 'js', duration: 2000 } },
             children: [
                 { type: 'defs', children: [{ type: 'g', id: 'sym', children: [{
                     type: 'circle', id: 'c', cx: 30, cy: 40, r: 16, fill: '#f59e0b',
                     animate: { cy: { keyframes: [{ time: 0, value: 40 }, { time: 2000, value: 160 }] } },
                 }] }] },
                 { type: 'use', id: 'u1', href: '#sym' },
-                { type: 'use', id: 'u2', href: '#sym', x: 80, effects: { clone: { sourceId: '#sym', retime: { start: -600 } } } },
+                { type: 'use', id: 'u2', href: '#sym', x: 80, effects: { clone: { source: '#sym', retime: { start: -600 } } } },
             ],
         };
-        const materialised = generateNewIds(materialiseAllInTree(doc, PxAnimatorEngine.waapi));
+        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

@@ -6,9 +6,9 @@
 import {
     calcAnimationValues,
     getAnimatorConfig,
-    getNormalisedBindings,
+    getNormalizedBindings,
     DEFAULT_DURATION_MS,
-    PxAnimatorEngine,
+    PxTimelineEngine,
     type PxAnimatedSvgDocument,
     type PxAnimationDefinition,
 } from '@pixodesk/svg-animator-core';
@@ -20,7 +20,7 @@ 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.
  */
 export interface PxElementTracks {
@@ -70,7 +70,7 @@ 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.
  */
 export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOptions): PxCompiledTracks {
@@ -99,7 +99,7 @@ export function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOp
     };
     indexTags(doc);
 
-    const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames) || [];
+    const bindings = getNormalizedBindings(doc, PxTimelineEngine.js) || [];
 
     const elements: Array<PxElementTracks> = [];
     for (const binding of bindings) {