@sigx/lynx-runtime 0.2.6 → 0.4.1

package/dist/native/gesture-detector.js

@@ -0,0 +1,340 @@
+/**
+ * Native gesture detector — BG-side wrapper around Lynx's
+ * `__SetGestureDetector(dom, id, type, config, relationMap)` PAPI.
+ *
+ * Mirrors the contract from upstream `@lynx-js/react/runtime/lib/gesture/`:
+ *   - GestureType enum values match `GestureTypeInner`.
+ *   - relationMap keys: `waitFor`, `simultaneous`, `continueWith`.
+ *   - COMPOSED gestures are walked client-side and each base is registered
+ *     with `__SetGestureDetector` separately (the platform receives bases).
+ *
+ * Public surface:
+ *   - `Gesture.Pan() / .Tap() / .LongPress() / ...` — chainable builders.
+ *   - `Gesture.Race(...) / .Simultaneous(...) / .Exclusive(...)` — composers.
+ *   - `useGestureDetector(elRef, gesture)` — attaches the gesture to the
+ *     element pointed at by elRef. Op-emit is deferred to `onMounted` so the
+ *     SET_MT_REF op (pushed during the first JSX render) is applied before
+ *     the SET_GESTURE_DETECTOR op tries to resolve the workletRefMap entry.
+ */
+import { onMounted, onUnmounted } from '@sigx/runtime-core';
+import { OP, pushOp, scheduleFlush } from '../op-queue.js';
+import { registerWorkletCtx } from '../run-on-background.js';
+import { sanitizeCaptured } from '../main-thread-ref.js';
+// ---------------------------------------------------------------------------
+// Gesture type enum
+// ---------------------------------------------------------------------------
+export const GestureType = {
+    COMPOSED: -1,
+    PAN: 0,
+    FLING: 1,
+    DEFAULT: 2,
+    TAP: 3,
+    LONGPRESS: 4,
+    ROTATION: 5,
+    PINCH: 6,
+    NATIVE: 7,
+};
+// ---------------------------------------------------------------------------
+// Gesture id allocator (global counter — relations refer across components)
+// ---------------------------------------------------------------------------
+let nextGestureId = 1;
+export function resetGestureIdCounter() {
+    nextGestureId = 1;
+}
+function allocGestureId() {
+    return nextGestureId++;
+}
+// ---------------------------------------------------------------------------
+// Builder base — uses polymorphic `this` so subclass-specific config setters
+// (`PanBuilder.axis`, `LongPressBuilder.duration`, …) chain off shared
+// callback / relation methods without losing the concrete type.
+// ---------------------------------------------------------------------------
+class GestureBuilderBase {
+    gesture;
+    constructor(type) {
+        this.gesture = {
+            __isSerialized: true,
+            type,
+            id: allocGestureId(),
+            callbacks: {},
+            waitFor: [],
+            simultaneousWith: [],
+            continueWith: [],
+        };
+    }
+    setConfigKey(key, value) {
+        if (!this.gesture.config)
+            this.gesture.config = {};
+        this.gesture.config[key] = value;
+        return this;
+    }
+    onBegin(cb) {
+        this.gesture.callbacks['onBegin'] = cb;
+        return this;
+    }
+    onStart(cb) {
+        this.gesture.callbacks['onStart'] = cb;
+        return this;
+    }
+    onUpdate(cb) {
+        this.gesture.callbacks['onUpdate'] = cb;
+        return this;
+    }
+    onEnd(cb) {
+        this.gesture.callbacks['onEnd'] = cb;
+        return this;
+    }
+    onFinalize(cb) {
+        this.gesture.callbacks['onFinalize'] = cb;
+        return this;
+    }
+    waitFor(...gestures) {
+        this.gesture.waitFor.push(...gestures);
+        return this;
+    }
+    simultaneousWith(...gestures) {
+        this.gesture.simultaneousWith.push(...gestures);
+        return this;
+    }
+    continueWith(...gestures) {
+        this.gesture.continueWith.push(...gestures);
+        return this;
+    }
+    build() {
+        return this.gesture;
+    }
+}
+// ---------------------------------------------------------------------------
+// Per-type builders
+// ---------------------------------------------------------------------------
+class PanBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.PAN);
+    }
+    axis(a) {
+        return this.setConfigKey('axis', a);
+    }
+    minDistance(n) {
+        return this.setConfigKey('minDistance', n);
+    }
+}
+class FlingBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.FLING);
+    }
+    minVelocity(n) {
+        return this.setConfigKey('minVelocity', n);
+    }
+    direction(d) {
+        return this.setConfigKey('direction', d);
+    }
+}
+class TapBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.TAP);
+    }
+    numberOfTaps(n) {
+        return this.setConfigKey('numberOfTaps', n);
+    }
+    maxDistance(n) {
+        return this.setConfigKey('maxDistance', n);
+    }
+    maxDuration(ms) {
+        return this.setConfigKey('maxDuration', ms);
+    }
+}
+class LongPressBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.LONGPRESS);
+    }
+    /**
+     * Minimum hold duration in ms before the gesture activates and `onStart`
+     * fires. Native iOS handler (`LynxLongPressGestureHandler`) reads the
+     * `minDuration` config key — defaults to 500 ms if not set.
+     */
+    minDuration(ms) {
+        return this.setConfigKey('minDuration', ms);
+    }
+    /**
+     * @deprecated alias for `minDuration` kept for source compatibility. The
+     * native handler only honours `minDuration`; this method now writes both
+     * keys so older call sites keep working until they migrate.
+     */
+    duration(ms) {
+        this.setConfigKey('duration', ms);
+        return this.setConfigKey('minDuration', ms);
+    }
+    maxDistance(n) {
+        return this.setConfigKey('maxDistance', n);
+    }
+}
+class PinchBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.PINCH);
+    }
+}
+class RotationBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.ROTATION);
+    }
+}
+class NativeBuilder extends GestureBuilderBase {
+    constructor() {
+        super(GestureType.NATIVE);
+    }
+}
+// ---------------------------------------------------------------------------
+// Compose helpers
+// ---------------------------------------------------------------------------
+function asBaseGestures(g) {
+    const resolved = resolveGesture(g);
+    const out = [];
+    collectBases(resolved, out);
+    return out;
+}
+function collectBases(g, out) {
+    if (g.type === GestureType.COMPOSED) {
+        for (const sub of g.gestures)
+            collectBases(sub, out);
+        return;
+    }
+    out.push(g);
+}
+function resolveGesture(g) {
+    if (g && typeof g.build === 'function') {
+        if (g.__isSerialized !== true) {
+            return g.build();
+        }
+    }
+    return g;
+}
+function makeComposed(gestures) {
+    return {
+        __isSerialized: true,
+        type: GestureType.COMPOSED,
+        gestures,
+    };
+}
+// ---------------------------------------------------------------------------
+// Public Gesture namespace
+// ---------------------------------------------------------------------------
+export const Gesture = {
+    Pan: () => new PanBuilder(),
+    Fling: () => new FlingBuilder(),
+    Tap: () => new TapBuilder(),
+    LongPress: () => new LongPressBuilder(),
+    Pinch: () => new PinchBuilder(),
+    Rotation: () => new RotationBuilder(),
+    Native: () => new NativeBuilder(),
+    /**
+     * Race — first recognizer to claim wins. Sibling bases mutually waitFor
+     * each other so the platform's gesture arena resolves the priority.
+     */
+    Race(...gs) {
+        const resolved = gs.map(resolveGesture);
+        const composed = makeComposed(resolved);
+        const bases = asBaseGestures(composed);
+        for (const a of bases) {
+            for (const b of bases) {
+                if (a !== b)
+                    a.waitFor.push(b);
+            }
+        }
+        return composed;
+    },
+    /**
+     * Simultaneous — all recognizers can fire at once. Sibling bases declare
+     * mutual `simultaneousWith`.
+     */
+    Simultaneous(...gs) {
+        const resolved = gs.map(resolveGesture);
+        const composed = makeComposed(resolved);
+        const bases = asBaseGestures(composed);
+        for (const a of bases) {
+            for (const b of bases) {
+                if (a !== b)
+                    a.simultaneousWith.push(b);
+            }
+        }
+        return composed;
+    },
+    /**
+     * Exclusive — sequential. Later items waitFor all earlier items.
+     */
+    Exclusive(...gs) {
+        const resolved = gs.map(resolveGesture);
+        const composed = makeComposed(resolved);
+        for (let i = 1; i < resolved.length; i++) {
+            const laterBases = [];
+            collectBases(resolved[i], laterBases);
+            const earlierBases = [];
+            for (let j = 0; j < i; j++)
+                collectBases(resolved[j], earlierBases);
+            for (const later of laterBases)
+                later.waitFor.push(...earlierBases);
+        }
+        return composed;
+    },
+};
+function appendUniqueBases(g, out, seen) {
+    if (g.type === GestureType.COMPOSED) {
+        for (const sub of g.gestures) {
+            appendUniqueBases(sub, out, seen);
+        }
+        return;
+    }
+    const base = g;
+    if (seen.has(base.id))
+        return;
+    seen.add(base.id);
+    out.push(base);
+}
+function buildSerializedConfig(base) {
+    const callbacks = [];
+    for (const name in base.callbacks) {
+        const cb = base.callbacks[name];
+        // Preserve every field the SWC transform emits — the platform's gesture
+        // arena may rely on `_workletType: 'main-thread'` (and any other markers)
+        // being present at __SetGestureDetector time. We had previously stripped
+        // to `{_wkltId,_c,_jsFn}`; that lost `_workletType`, and the gesture
+        // arena silently ignored the registration on-device. Spread first, then
+        // sanitize `_c` for wire-safety (MainThreadRef instances → wire shape).
+        const wireCtx = { ...cb };
+        if (cb._c)
+            wireCtx._c = sanitizeCaptured(cb._c);
+        // Stamp _execId via registerWorkletCtx so runOnBackground inside the
+        // gesture callback can route MT→BG dispatches back through the same
+        // pipeline used by SET_WORKLET_EVENT.
+        registerWorkletCtx(wireCtx);
+        callbacks.push({ name, callback: wireCtx });
+    }
+    const out = { callbacks };
+    if (base.config)
+        out.config = base.config;
+    return out;
+}
+export function useGestureDetector(elRef, gesture) {
+    const resolved = resolveGesture(gesture);
+    const bases = [];
+    appendUniqueBases(resolved, bases, new Set());
+    if (bases.length === 0)
+        return;
+    onMounted(() => {
+        for (const base of bases) {
+            const config = buildSerializedConfig(base);
+            const relationMap = {
+                waitFor: base.waitFor.map((g) => g.id),
+                simultaneous: base.simultaneousWith.map((g) => g.id),
+                continueWith: base.continueWith.map((g) => g.id),
+            };
+            pushOp(OP.SET_GESTURE_DETECTOR, elRef._wvid, base.id, base.type, config, relationMap);
+        }
+        scheduleFlush();
+    });
+    onUnmounted(() => {
+        for (const base of bases) {
+            pushOp(OP.REMOVE_GESTURE_DETECTOR, elRef._wvid, base.id);
+        }
+        scheduleFlush();
+    });
+}

package/dist/native/index.js

@@ -0,0 +1 @@
+export { Gesture, GestureType, useGestureDetector, resetGestureIdCounter, } from './gesture-detector.js';

package/dist/nodeOps.js

@@ -0,0 +1,319 @@
+import { OP, pushOp, scheduleFlush } from './op-queue.js';
+import { register, unregister } from './event-registry.js';
+import { ShadowElement } from './shadow-element.js';
+import { registerWorkletCtx } from './run-on-background.js';
+function parseEventProp(key) {
+    // Main-thread event prefixes: main-thread-bind*, main-thread-catch*
+    if (key.startsWith('main-thread-bind')) {
+        return { type: 'bindEvent', name: key.slice('main-thread-bind'.length), mainThread: true };
+    }
+    if (key.startsWith('main-thread-catch')) {
+        return { type: 'catchEvent', name: key.slice('main-thread-catch'.length), mainThread: true };
+    }
+    // Alternative syntax: main-thread:bind*, main-thread:catch*
+    if (key.startsWith('main-thread:bind')) {
+        return { type: 'bindEvent', name: key.slice('main-thread:bind'.length), mainThread: true };
+    }
+    if (key.startsWith('main-thread:catch')) {
+        return { type: 'catchEvent', name: key.slice('main-thread:catch'.length), mainThread: true };
+    }
+    if (key.startsWith('global-bind')) {
+        return { type: 'bindGlobalEvent', name: key.slice('global-bind'.length) };
+    }
+    if (key.startsWith('global-catch')) {
+        return { type: 'catchGlobalEvent', name: key.slice('global-catch'.length) };
+    }
+    if (key.startsWith('catch')) {
+        return { type: 'catchEvent', name: key.slice('catch'.length) };
+    }
+    if (/^bind(?!ingx)/.test(key)) {
+        return { type: 'bindEvent', name: key.slice('bind'.length) };
+    }
+    if (/^on[A-Z]/.test(key)) {
+        // onTap → { type: 'bindEvent', name: 'tap' }
+        const name = key.slice(2, 3).toLowerCase() + key.slice(3);
+        return { type: 'bindEvent', name };
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Worklet placeholder detection — @lynx-js/react/transform replaces
+// 'main thread' functions with { _wkltId, _c? } placeholders in the BG bundle.
+// ---------------------------------------------------------------------------
+import { sanitizeCaptured } from './main-thread-ref.js';
+function isWorkletPlaceholder(v) {
+    return typeof v === 'object' && v !== null && '_wkltId' in v;
+}
+// Track sent worklet ids per (elementId, propKey) to skip redundant ops on re-render.
+const sentWorklets = new Map();
+// Track the sign registered for each (element, propKey) so we can unregister
+// on prop removal / update.
+const elementEventSigns = new Map();
+// Track which sign owns the native event slot per (elementId, 'eventType:eventName').
+// Lynx only supports one __AddEvent per (element, eventType, eventName). When multiple
+// props resolve to the same native event (e.g. main-thread-bindtap + bindtap both map
+// to bindEvent:tap), we keep one sign in __AddEvent and dispatch to all handlers from
+// a multi-handler wrapper in the BG registry.
+const nativeEventSlots = new Map();
+// ---------------------------------------------------------------------------
+// Style normalisation — numeric values → 'Npx' (Lynx requires units)
+// ---------------------------------------------------------------------------
+const DIMENSIONLESS = new Set([
+    'flex',
+    'flexGrow',
+    'flexShrink',
+    'flexOrder',
+    'order',
+    'opacity',
+    'zIndex',
+    'aspectRatio',
+    'fontWeight',
+    'lineClamp',
+]);
+function normalizeStyle(style) {
+    const out = {};
+    for (const key of Object.keys(style)) {
+        const val = style[key];
+        if (typeof val === 'number' && !DIMENSIONLESS.has(key) && val !== 0) {
+            out[key] = `${val}px`;
+        }
+        else {
+            out[key] = val;
+        }
+    }
+    return out;
+}
+function shallowEqual(a, b) {
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    for (const k of ka) {
+        if (a[k] !== b[k])
+            return false;
+    }
+    return true;
+}
+// ---------------------------------------------------------------------------
+// Class resolution — merges user :class with transition classes
+// ---------------------------------------------------------------------------
+export function resolveClass(el) {
+    if (el._transitionClasses.size === 0)
+        return el._baseClass;
+    const parts = [];
+    if (el._baseClass)
+        parts.push(el._baseClass);
+    for (const cls of el._transitionClasses)
+        parts.push(cls);
+    return parts.join(' ');
+}
+// ---------------------------------------------------------------------------
+// RendererOptions implementation
+// ---------------------------------------------------------------------------
+export const nodeOps = {
+    createElement(type) {
+        const el = new ShadowElement(type);
+        pushOp(OP.CREATE, el.id, type);
+        scheduleFlush();
+        return el;
+    },
+    createText(text) {
+        const el = new ShadowElement('#text');
+        pushOp(OP.CREATE_TEXT, el.id);
+        if (text)
+            pushOp(OP.SET_TEXT, el.id, text);
+        scheduleFlush();
+        return el;
+    },
+    // Comment nodes are used as position anchors for conditionals / Fragment.
+    // Materialised as invisible placeholder elements on the Main Thread.
+    createComment(_text) {
+        const el = new ShadowElement('#comment');
+        pushOp(OP.CREATE, el.id, '__comment');
+        scheduleFlush();
+        return el;
+    },
+    setText(node, text) {
+        pushOp(OP.SET_TEXT, node.id, text);
+        scheduleFlush();
+    },
+    setElementText(el, text) {
+        // Remove all children from shadow tree
+        while (el.firstChild) {
+            const child = el.firstChild;
+            el.removeChild(child);
+            pushOp(OP.REMOVE, el.id, child.id);
+        }
+        // Set text content directly on the element
+        pushOp(OP.SET_TEXT, el.id, text);
+        scheduleFlush();
+    },
+    insert(child, parent, anchor) {
+        // Always update the shadow tree (the core renderer needs sync tree queries).
+        parent.insertBefore(child, anchor ?? null);
+        // Lynx's native <list> only accepts <list-item> children.
+        // Skip comment/text anchors to avoid NSInvalidArgumentException.
+        if (parent.type === 'list'
+            && (child.type === '#comment' || child.type === '#text')) {
+            return;
+        }
+        // If the anchor is a comment node inside a <list>, walk forward to find
+        // the next real sibling so the MT __InsertElementBefore has a valid ref.
+        let resolvedAnchor = anchor ?? null;
+        if (parent.type === 'list') {
+            while (resolvedAnchor
+                && (resolvedAnchor.type === '#comment'
+                    || resolvedAnchor.type === '#text')) {
+                resolvedAnchor = resolvedAnchor.next;
+            }
+        }
+        const anchorId = resolvedAnchor ? resolvedAnchor.id : -1;
+        pushOp(OP.INSERT, parent.id, child.id, anchorId);
+        scheduleFlush();
+    },
+    remove(child) {
+        if (child.parent) {
+            const parentId = child.parent.id;
+            child.parent.removeChild(child);
+            pushOp(OP.REMOVE, parentId, child.id);
+            scheduleFlush();
+        }
+    },
+    patchProp(el, key, _prevValue, nextValue) {
+        // Handle main-thread:ref — bind a MainThreadRef to this element
+        if (key === 'main-thread:ref') {
+            if (nextValue != null) {
+                const mtRef = nextValue;
+                pushOp(OP.SET_MT_REF, el.id, mtRef._wvid);
+            }
+            scheduleFlush();
+            return;
+        }
+        const event = parseEventProp(key);
+        if (event) {
+            // Worklet placeholders ({ _wkltId, _c? }) emitted by @lynx-js/react/transform
+            // bypass the BG event-registry path entirely — the MT side dispatches.
+            if (event.mainThread && nextValue != null && isWorkletPlaceholder(nextValue)) {
+                let elWorklets = sentWorklets.get(el.id);
+                const prevId = elWorklets?.get(key);
+                if (prevId !== nextValue._wkltId) {
+                    if (!elWorklets) {
+                        elWorklets = new Map();
+                        sentWorklets.set(el.id, elWorklets);
+                    }
+                    elWorklets.set(key, nextValue._wkltId);
+                    const wireCtx = {
+                        _wkltId: nextValue._wkltId,
+                    };
+                    if (nextValue._c)
+                        wireCtx._c = sanitizeCaptured(nextValue._c);
+                    if (nextValue._jsFn)
+                        wireCtx._jsFn = nextValue._jsFn;
+                    // Stamp _execId so MT can route runOnBackground dispatches back
+                    // to the JsFnHandles inside _jsFn / _c.
+                    registerWorkletCtx(wireCtx);
+                    pushOp(OP.SET_WORKLET_EVENT, el.id, event.type, event.name, wireCtx);
+                    scheduleFlush();
+                }
+                return;
+            }
+            let propSigns = elementEventSigns.get(el.id);
+            const nativeKey = `${event.type}:${event.name}`;
+            if (nextValue != null) {
+                const handler = nextValue;
+                // Get or create the native event slot for this (element, eventType, eventName).
+                let elSlots = nativeEventSlots.get(el.id);
+                if (!elSlots) {
+                    elSlots = new Map();
+                    nativeEventSlots.set(el.id, elSlots);
+                }
+                let slot = elSlots.get(nativeKey);
+                if (!slot) {
+                    // First handler for this native event — register with Lynx.
+                    const sign = register((data) => {
+                        // Dispatch to all handlers registered for this slot.
+                        const s = elSlots.get(nativeKey);
+                        if (s) {
+                            for (const h of s.handlers.values())
+                                h(data);
+                        }
+                    });
+                    slot = { sign, handlers: new Map() };
+                    elSlots.set(nativeKey, slot);
+                    pushOp(OP.SET_EVENT, el.id, event.type, event.name, sign);
+                }
+                // Add/update this prop's handler in the slot.
+                slot.handlers.set(key, handler);
+                // Track prop→sign for re-render updates.
+                if (!propSigns) {
+                    propSigns = new Map();
+                    elementEventSigns.set(el.id, propSigns);
+                }
+                propSigns.set(key, slot.sign);
+            }
+            else {
+                // Handler removed.
+                const elSlots = nativeEventSlots.get(el.id);
+                const slot = elSlots?.get(nativeKey);
+                if (slot) {
+                    slot.handlers.delete(key);
+                    if (slot.handlers.size === 0) {
+                        // No more handlers — unregister from Lynx.
+                        unregister(slot.sign);
+                        elSlots.delete(nativeKey);
+                        pushOp(OP.REMOVE_EVENT, el.id, event.type, event.name);
+                    }
+                }
+                propSigns?.delete(key);
+            }
+        }
+        else if (key === 'style') {
+            const style = nextValue != null && typeof nextValue === 'object'
+                ? normalizeStyle(nextValue)
+                : {};
+            const effective = el._vShowHidden ? { ...style, display: 'none' } : style;
+            // Skip SET_STYLE when structurally unchanged. JSX inline `style={{...}}`
+            // creates a fresh object every render but its keys/values typically don't
+            // change between renders. Re-emitting SET_STYLE would overwrite any MT
+            // worklet's setStyleProperties calls (pink/scale on tap, etc.) on every
+            // unrelated signal change. Shallow-equal previous _style suffices since
+            // sigx normalises everything to a flat string→string|number map.
+            const prev = el._style;
+            const sameStyle = prev != null && shallowEqual(prev, effective);
+            el._style = style;
+            if (!sameStyle) {
+                pushOp(OP.SET_STYLE, el.id, effective);
+            }
+        }
+        else if (key === 'class') {
+            el._baseClass = nextValue ?? '';
+            const finalClass = resolveClass(el);
+            pushOp(OP.SET_CLASS, el.id, finalClass);
+        }
+        else if (key === 'id') {
+            pushOp(OP.SET_ID, el.id, nextValue);
+        }
+        else {
+            pushOp(OP.SET_PROP, el.id, key, nextValue);
+        }
+        scheduleFlush();
+    },
+    parentNode(node) {
+        return node.parent;
+    },
+    nextSibling(node) {
+        return node.next;
+    },
+    cloneNode(node) {
+        // Lynx has no native clone — create a new shadow element of the same type
+        const el = new ShadowElement(node.type);
+        if (node.type === '#text') {
+            pushOp(OP.CREATE_TEXT, el.id);
+        }
+        else {
+            pushOp(OP.CREATE, el.id, node.type);
+        }
+        scheduleFlush();
+        return el;
+    },
+};