@symbiote-native/svelte 3.0.4 → 3.0.5

package/build/dom-shim/animation.d.ts

@@ -0,0 +1,10 @@
+import type { ShimElement } from './element';
+export type IKeyframe = Readonly<Record<string, string>>;
+export type IShimAnimation = {
+    onfinish: (() => void) | null;
+    effect: unknown;
+    readonly playState: 'idle' | 'running' | 'finished';
+    readonly currentTime: number;
+    cancel(): void;
+};
+export declare function animateShimElement(element: ShimElement, keyframes: readonly IKeyframe[], duration: number): IShimAnimation;

package/build/dom-shim/animation.js

@@ -0,0 +1,80 @@
+// `Element.animate()`, the subset `svelte/transition`/`svelte/animate` call: Svelte's own tick
+// loop already bakes each frame's `css(t, u)` into the keyframe array, so this only replays them
+// over real time (`.currentTime`/`.playState`/`.onfinish`/`.effect`/`.cancel()` contract).
+import { isSymbioteNode, requestCommitFor, routeProp, } from '@symbiote-native/engine';
+import { areShimAnimationsEnabled } from './animations-gate.js';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+// `opacity` parses to a number, matching a real CSSStyleDeclaration read back; every other key
+// (transform, filter, ...) passes through as the authored string.
+function applyKeyframe(node, style, frame) {
+    const next = isRecord(style) ? { ...style } : {};
+    for (const [key, value] of Object.entries(frame)) {
+        next[key] = key === 'opacity' ? Number(value) : value;
+    }
+    routeProp(node, 'style', next);
+    // Our own rAF loop, not a framework render - nothing else publishes this write per frame.
+    requestCommitFor(node);
+}
+class ShimAnimation {
+    node;
+    currentStyle;
+    keyframes;
+    duration;
+    onfinish = null;
+    effect = null;
+    playState = 'idle';
+    startTime = undefined;
+    rafId = undefined;
+    cancelled = false;
+    constructor(node, currentStyle, keyframes, duration) {
+        this.node = node;
+        this.currentStyle = currentStyle;
+        this.keyframes = keyframes;
+        this.duration = duration;
+        if (node === undefined || keyframes.length === 0 || duration <= 0) {
+            this.playState = 'finished';
+            // Guarded like `tick`: a same-tick `cancel()` (Svelte replacing this animation before the
+            // microtask runs) must not fire a handler for a transition that never got to play.
+            void Promise.resolve().then(() => {
+                if (!this.cancelled)
+                    this.onfinish?.();
+            });
+            return;
+        }
+        this.playState = 'running';
+        this.rafId = requestAnimationFrame(this.tick);
+    }
+    get currentTime() {
+        return this.startTime === undefined ? 0 : Date.now() - this.startTime;
+    }
+    tick = (now) => {
+        if (this.cancelled || this.node === undefined)
+            return;
+        this.startTime ??= now;
+        const progress = Math.min((now - this.startTime) / this.duration, 1);
+        const index = Math.round(progress * (this.keyframes.length - 1));
+        const frame = this.keyframes[index];
+        if (frame !== undefined)
+            applyKeyframe(this.node, this.currentStyle, frame);
+        if (progress >= 1) {
+            this.playState = 'finished';
+            this.onfinish?.();
+            return;
+        }
+        this.rafId = requestAnimationFrame(this.tick);
+    };
+    cancel() {
+        this.cancelled = true;
+        this.playState = 'idle';
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+    }
+}
+// A node not yet live plays no animation - the same shape Svelte's own dummy zero-duration
+// animation already takes, so a caller sees a normal, already-finished Animation.
+export function animateShimElement(element, keyframes, duration) {
+    const node = element.engineNode;
+    return new ShimAnimation(areShimAnimationsEnabled() && isSymbioteNode(node) ? node : undefined, element.p.style, keyframes, duration);
+}

package/build/dom-shim/animations-gate.d.ts

@@ -0,0 +1,2 @@
+export declare function setShimAnimationsEnabled(value: boolean): void;
+export declare function areShimAnimationsEnabled(): boolean;

package/build/dom-shim/animations-gate.js

@@ -0,0 +1,10 @@
+// TODO: включить, когда API стабилизируется: `animate:flip` работает, shuffle-реордер нет
+// Экран `TransitionAnimateDemo` снят с Canary, вернуть вместе с включением
+// Пока выключено для потребителя, тесты включают через `setShimAnimationsEnabled`
+let enabled = false;
+export function setShimAnimationsEnabled(value) {
+    enabled = value;
+}
+export function areShimAnimationsEnabled() {
+    return enabled;
+}

package/build/dom-shim/computed-style.d.ts

@@ -0,0 +1,3 @@
+import type { ShimElement } from './element';
+export type IComputedStyle = Readonly<Record<string, string>>;
+export declare function computedStyleOf(element: ShimElement): IComputedStyle;

package/build/dom-shim/computed-style.js

@@ -0,0 +1,34 @@
+// The bare global `getComputedStyle`, which svelte/transition's fade/fly/scale/slide/blur call
+// directly, not `document.getComputedStyle`. A Proxy, since a caller reads an arbitrary key built
+// at runtime (slide derives `paddingTop`/`marginBottom` from its `axis` option).
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+const DEFAULTS = {
+    opacity: '1',
+    transform: 'none',
+    filter: 'none',
+    display: 'flex',
+    strokeLinecap: 'butt',
+    strokeWidth: '0',
+};
+function styleValueOf(element, key) {
+    const style = element.p.style;
+    const raw = isRecord(style) ? style[key] : undefined;
+    if (raw !== undefined)
+        return typeof raw === 'number' ? `${raw}px` : String(raw);
+    // Two tokens, not `DEFAULTS`' single `'0px'` - `flip()` destructures this into [ox, oy] and
+    // divides by clientWidth/Height, so a lone token leaves oy as NaN (real default is `50% 50%`).
+    if (key === 'transformOrigin') {
+        const { width, height } = element.getBoundingClientRect();
+        return `${width / 2}px ${height / 2}px`;
+    }
+    return DEFAULTS[key] ?? '0px';
+}
+export function computedStyleOf(element) {
+    return new Proxy({}, {
+        get(_target, key) {
+            return typeof key === 'string' ? styleValueOf(element, key) : undefined;
+        },
+    });
+}

package/build/dom-shim/document.d.ts

@@ -2,6 +2,7 @@ import { ShimElement } from './element';
 import { ShimText } from './text';
 import { ShimComment } from './comment';
 import { ShimDocumentFragment } from './document-fragment';
+import { type IComputedStyle } from './computed-style';
 export declare class ShimDocument {
     readonly body: ShimElement;
     createElement(tag: string, options?: {
@@ -17,7 +18,7 @@ export declare class ShimDocument {
     importNode(node: ShimText, deep: boolean): ShimText;
     importNode(node: ShimComment, deep: boolean): ShimComment;
     importNode(node: ShimDocumentFragment, deep: boolean): ShimDocumentFragment;
-    getComputedStyle(): Record<string, never>;
+    getComputedStyle(element: ShimElement): IComputedStyle;
 }
 export declare function getShimDocument(): ShimDocument;
 export declare function resetShimDocumentForTests(): void;

package/build/dom-shim/document.js

@@ -1,14 +1,12 @@
-// The shim's `document` singleton — the six factories `init_operations()` and `from_tree`
-// require (svelte-adapter-dom-shim skill §3b), plus the two cheap stubs §4 calls for
-// explicitly (`document.body`, `getComputedStyle`) so a forbidden/dead path degrades to a
-// harmless no-op instead of a hard crash. No `<svelte:head|window|body|document>` support
-// beyond that stub — those tags are rejected at build time by the preprocessor (§7), not
-// handled here.
+// The shim's `document` singleton - the six factories `init_operations()`/`from_tree` require,
+// plus `document.body` (a minimal unattached node) and `getComputedStyle` (computed-style.ts).
+// No `<svelte:head|window|body|document>` - rejected at build time by the preprocessor.
 import { ShimElement } from './element.js';
 import { ShimText } from './text.js';
 import { ShimComment } from './comment.js';
 import { ShimDocumentFragment } from './document-fragment.js';
 import { registerShimDocumentFactory } from './shim-node.js';
+import { computedStyleOf } from './computed-style.js';
 export class ShimDocument {
     // The delegation root real Svelte events bubble toward (`dom/elements/events.js:122`).
     // Our own event names never delegate (§5c: no camelCase name matches Svelte's 23-name
@@ -39,11 +37,10 @@ export class ShimDocument {
     importNode(node, deep) {
         return node.cloneNode(deep);
     }
-    // §4: not read by any mandatory path; stubbed so a forbidden transition (which we reject
-    // at build time anyway, §7) degrades to an inert value rather than a hard crash if it is
-    // ever reached some other way.
-    getComputedStyle() {
-        return {};
+    // Kept in step with the bare global patch-globals.ts installs (computed-style.ts is the one
+    // implementation both call).
+    getComputedStyle(element) {
+        return computedStyleOf(element);
     }
 }
 let singleton;

package/build/dom-shim/element.d.ts

@@ -1,4 +1,5 @@
-import { type ISymbioteNode } from '@symbiote-native/engine';
+import { type IDomRect, type ISymbioteNode } from '@symbiote-native/engine';
+import { type IKeyframe, type IShimAnimation } from './animation';
 import { ShimNode } from './shim-node';
 export type IShimPropBag = Record<string, unknown>;
 export declare abstract class ShimElementBase extends ShimNode {
@@ -30,6 +31,19 @@ export declare class ShimElement extends ShimElementBase {
     addEventListener(name: string, handler: (event: unknown) => void): void;
     removeEventListener(name: string): void;
     cloneNode(deep?: boolean): ShimElement;
+    get parentElement(): ShimElement | null;
+    get clientWidth(): number;
+    get clientHeight(): number;
+    getBoundingClientRect(): IDomRect & {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    dispatchEvent(): boolean;
+    animate(keyframes: readonly IKeyframe[], options: {
+        duration: number;
+    }): IShimAnimation;
     createEngineNode(): ISymbioteNode;
     onMadeLive(): void;
 }

package/build/dom-shim/element.js

@@ -22,9 +22,11 @@
 // A per-key diff in the setter is MANDATORY (§3g(c)), not an optimization: Svelte's
 // `set_custom_element_data` has no early-out guard and runs on every effect re-fire, so
 // without the diff every prop gets rewritten whenever any one of them changes.
-import { createElement, dlog, routeProp, toPublicInstance, } from '@symbiote-native/engine';
+import { createElement, dlog, getBoundingClientRect, isSymbioteNode, routeProp, toPublicInstance, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import { normalizeSvelteClass } from '../class-value.js';
+import { animateShimElement, } from './animation.js';
+import { areShimAnimationsEnabled } from './animations-gate.js';
 import { BOOLEAN_PROP_NAMES, CANONICAL_BY_LOWER, CANONICAL_PROP_NAMES, } from './canonical-prop-names.js';
 import { ShimNode } from './shim-node.js';
 import { discoverStyleCacheKey } from './style-cache.js';
@@ -251,6 +253,48 @@ export class ShimElement extends ShimElementBase {
         }
         return clone;
     }
+    // `flip`'s `get_zoom()` walks this until `null`; without it the walk hit `undefined` and threw
+    // `Cannot read properties of undefined ('parentElement')`, aborting the whole reorder.
+    get parentElement() {
+        const result = this.parent instanceof ShimElement ? this.parent : null;
+        dlog(`parentElement tag=${this.tagName} -> ${result === null ? 'null' : result.tagName}`);
+        return result;
+    }
+    // `flip` divides by these for its scale factor; unset they read as `NaN`, not zero.
+    get clientWidth() {
+        return this.getBoundingClientRect().width;
+    }
+    get clientHeight() {
+        return this.getBoundingClientRect().height;
+    }
+    // Real DOM shape (top/left/right/bottom derived), for svelte/animate's `flip` and
+    // svelte/transition's `crossfade`, both of which measure before and after a reorder.
+    getBoundingClientRect() {
+        const node = this.engineNode;
+        const rect = areShimAnimationsEnabled() && isSymbioteNode(node)
+            ? getBoundingClientRect(node, false)
+            : undefined;
+        dlog(`getBoundingClientRect tag=${this.tagName} hasNode=${isSymbioteNode(node)} rect=${JSON.stringify(rect)}`);
+        const { x, y, width, height } = rect ?? { x: 0, y: 0, width: 0, height: 0 };
+        return {
+            x,
+            y,
+            width,
+            height,
+            top: y,
+            left: x,
+            right: x + width,
+            bottom: y + height,
+        };
+    }
+    // `transitions.js`'s `dispatch_event` fires introstart/introend/outrostart/outroend at this;
+    // nothing in this adapter listens, so a no-op is the correct answer, not a missing method.
+    dispatchEvent() {
+        return true;
+    }
+    animate(keyframes, options) {
+        return animateShimElement(this, keyframes, options.duration);
+    }
     // measure/measureInWindow/measureLayout/setNativeProps/focus/blur — the imperative API a
     // `bind:this` host ref hands back — ride on the engine node's prototype, so toPublicInstance is
     // the identity and this reads the same as Vue's renderer (renderer/index.ts) and React's

package/build/dom-shim/patch-globals.js

@@ -29,6 +29,7 @@ import { ShimComment } from './comment.js';
 import { ShimDocumentFragment } from './document-fragment.js';
 import { ShimNode } from './shim-node.js';
 import { getShimDocument } from './document.js';
+import { computedStyleOf } from './computed-style.js';
 const PATCHED_KEYS = [
     'Node',
     'Element',
@@ -40,7 +41,36 @@ const PATCHED_KEYS = [
     'document',
     'customElements',
     'HTMLMediaElement',
+    'getComputedStyle',
+    'CustomEvent',
 ];
+// `svelte/transition`'s fade/fly/scale/slide/blur call this BARE global, not
+// `document.getComputedStyle`, so it must be a real assigned property too.
+function getComputedStyleGlobal(element) {
+    return element instanceof ShimElement
+        ? computedStyleOf(element)
+        : computedStyleOf(new ShimElement('view'));
+}
+// `createEventDispatcher`'s own event object; `svelte/events`'s `on()` also constructs one.
+// RN installs no CustomEvent of its own, so this must be a real assigned property, matching the
+// same class of trap as `customElements`/`HTMLMediaElement` below.
+class FakeCustomEvent {
+    type;
+    detail;
+    bubbles;
+    cancelable;
+    defaultPrevented = false;
+    constructor(type, options) {
+        this.type = type;
+        this.detail = options?.detail;
+        this.bubbles = options?.bubbles ?? false;
+        this.cancelable = options?.cancelable ?? false;
+    }
+    preventDefault() {
+        if (this.cancelable)
+            this.defaultPrevented = true;
+    }
+}
 // Real DOM's `CustomElementRegistry`. `set_custom_element_data` (svelte's
 // dom/elements/attributes.js) reads the BARE global `customElements` unconditionally, with no
 // `typeof` guard — an undeclared global throws ReferenceError, not just `undefined`, so this
@@ -81,6 +111,8 @@ export function patchGlobals() {
         document: g.document,
         customElements: g.customElements,
         HTMLMediaElement: g.HTMLMediaElement,
+        getComputedStyle: g.getComputedStyle,
+        CustomEvent: g.CustomEvent,
     };
     g.Node = ShimNode;
     // ShimElementBase, NOT ShimElement: `get_setters` stops AT `Element.prototype`, so pointing this
@@ -97,6 +129,8 @@ export function patchGlobals() {
     g.document = getShimDocument();
     g.customElements = FAKE_CUSTOM_ELEMENT_REGISTRY;
     g.HTMLMediaElement = FakeHTMLMediaElement;
+    g.getComputedStyle = getComputedStyleGlobal;
+    g.CustomEvent = FakeCustomEvent;
     dlog('svelte dom-shim: patchGlobals installed');
 }
 export function restoreGlobals() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
   "keywords": [
     "react-native",
@@ -73,22 +73,22 @@
   },
   "dependencies": {
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "3.1.2",
+    "@symbiote-native/components": "3.1.3",
     "@symbiote-native/css-parser": "0.5.2"
   },
   "peerDependencies": {
     "svelte": ">=5.56.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.3.1"
+    "@symbiote-native/engine": "^1.4.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/engine": "1.3.1",
-    "@symbiote-native/react": "3.0.4",
-    "@symbiote-native/test-utils": "0.4.4",
-    "@symbiote-native/vue": "3.0.4"
+    "@symbiote-native/engine": "1.4.0",
+    "@symbiote-native/test-utils": "0.4.5",
+    "@symbiote-native/react": "3.1.0",
+    "@symbiote-native/vue": "3.1.0"
   },
   "scripts": {
     "typecheck": "tsc --build",