@kitlangton/solid-motion 0.1.0

package/dist/source/motion/features/feature-bundle.js

@@ -0,0 +1,6 @@
+import { animations } from "./animations";
+import { gestures } from "./gestures";
+export const featureBundle = {
+    ...animations,
+    ...gestures,
+};

package/dist/source/motion/features/gestures.js

@@ -0,0 +1,20 @@
+import { DragGesture as UpstreamDragGesture } from "../../gestures/drag";
+import { PanGesture } from "../../gestures/pan";
+import { HoverGesture } from "../../gestures/hover";
+import { PressGesture } from "../../gestures/press";
+import { FocusGesture } from "../../gestures/focus";
+class DragGesture extends UpstreamDragGesture {
+    unmount() {
+        // Solid disposal is final. Always release the window listeners and global
+        // drag lock, including when an element is removed in the middle of a drag.
+        this.controls.dispose();
+        super.unmount();
+    }
+}
+export const gestures = {
+    drag: { Feature: DragGesture },
+    pan: { Feature: PanGesture },
+    hover: { Feature: HoverGesture },
+    tap: { Feature: PressGesture },
+    focus: { Feature: FocusGesture },
+};

package/dist/source/motion/features/load-features.js

@@ -0,0 +1,12 @@
+import { setFeatureDefinitions } from "motion-dom";
+import { getInitializedFeatureDefinitions } from "./definitions";
+export function loadFeatures(features) {
+    const featureDefinitions = getInitializedFeatureDefinitions();
+    for (const key in features) {
+        featureDefinitions[key] = {
+            ...featureDefinitions[key],
+            ...features[key],
+        };
+    }
+    setFeatureDefinitions(featureDefinitions);
+}

package/dist/source/motion/index.jsx

@@ -0,0 +1,176 @@
+import { createEffect, createMemo, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { scrapeHTMLMotionValuesFromProps, scrapeSVGMotionValuesFromProps } from "motion-dom";
+import { MotionConfigContext } from "../components/MotionConfig";
+import { MotionContext } from "../context/MotionContext";
+import { PresenceContext } from "../context/PresenceContext";
+import { createMotionContext } from "../context/MotionContext/create";
+import { isSVGComponent } from "../render/dom/is-svg-component";
+import { filterProps } from "../render/dom/filter-props";
+import { createDomVisualElement } from "../render/dom/create-visual-element";
+import { resolveHTMLProps } from "../render/html/use-props";
+import { resolveSVGProps } from "../render/svg/use-props";
+import { createHtmlRenderState } from "../render/html/utils/create-render-state";
+import { createSvgRenderState } from "../render/svg/utils/create-render-state";
+import { makeVisualState } from "./utils/use-visual-state";
+import { loadFeatures } from "./features/load-features";
+import { featureBundle } from "./features/feature-bundle";
+import { prepareDragProjection } from "./utils/drag-projection";
+const isBrowser = typeof window !== "undefined";
+function useVisualState(isSVG, props, context, presenceContext) {
+    const config = isSVG
+        ? {
+            scrapeMotionValuesFromProps: scrapeSVGMotionValuesFromProps,
+            createRenderState: createSvgRenderState,
+        }
+        : {
+            scrapeMotionValuesFromProps: scrapeHTMLMotionValuesFromProps,
+            createRenderState: createHtmlRenderState,
+        };
+    return makeVisualState(config, props, context, presenceContext);
+}
+export function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
+    if (preloadedFeatures) {
+        loadFeatures(preloadedFeatures);
+    }
+    const isSVG = type ? type === "svg" : isSVGComponent(Component);
+    return function MotionDOMComponent(props) {
+        const motionConfig = useContext(MotionConfigContext);
+        const parentContext = useContext(MotionContext);
+        const rawPresenceContext = useContext(PresenceContext);
+        const presenceContext = createMemo(() => {
+            if (!rawPresenceContext)
+                return null;
+            const resolved = {
+                id: rawPresenceContext.id(),
+                isPresent: rawPresenceContext.isPresent(),
+                initial: rawPresenceContext.initial(),
+                custom: rawPresenceContext.custom(),
+                onExitComplete: rawPresenceContext.onExitComplete,
+                register: rawPresenceContext.register ?? (() => () => { }),
+            };
+            return resolved;
+        });
+        const ownProps = createMemo(() => {
+            const nextProps = {};
+            for (const key in props) {
+                // Solid children are lazy factories, not inert React element values.
+                // Reading them here creates a second subtree on each animation update,
+                // overwriting refs with detached nodes. Resolve them only in the provider.
+                if (key === "children")
+                    continue;
+                nextProps[key] = props[key];
+            }
+            return nextProps;
+        });
+        // Config feeds the visual element, but must not render as DOM attributes.
+        const getLatestProps = createMemo(() => ({ ...motionConfig, ...ownProps() }));
+        const isStatic = createMemo(() => Boolean(getLatestProps().isStatic));
+        const context = createMotionContext(props, parentContext);
+        const visualState = useVisualState(isSVG, props, context, presenceContext());
+        let visualElement;
+        const initialPresenceContext = presenceContext();
+        if (!isStatic() && isBrowser) {
+            visualElement = (createVisualElement || createDomVisualElement)(Component, {
+                visualState,
+                parent: parentContext.visualElement,
+                props: getLatestProps(),
+                presenceContext: initialPresenceContext,
+                blockInitialAnimation: initialPresenceContext ? initialPresenceContext.initial === false : false,
+                reducedMotionConfig: motionConfig.reducedMotion,
+                skipAnimations: motionConfig.skipAnimations,
+                isSVG,
+            });
+            if (visualElement)
+                prepareDragProjection(visualElement, getLatestProps());
+        }
+        context.visualElement = visualElement;
+        const [local, rest] = splitProps(props, ["ref", "children"]);
+        const elementProps = createMemo(() => {
+            const latestProps = getLatestProps();
+            const filtered = filterProps(ownProps(), typeof Component === "string", forwardMotionProps);
+            delete filtered.children;
+            delete filtered.ref;
+            const componentTag = typeof Component === "string" ? Component : "svg";
+            const visualProps = isSVG
+                ? resolveSVGProps(latestProps, visualState.latestValues, componentTag)
+                : resolveHTMLProps(latestProps, visualState.latestValues);
+            return { ...filtered, ...visualProps };
+        });
+        onMount(() => {
+            if (!visualElement)
+                return;
+            visualElement.scheduleRenderMicrotask();
+        });
+        createEffect(() => {
+            if (!visualElement)
+                return;
+            const nextProps = getLatestProps();
+            const nextPresenceContext = presenceContext();
+            visualElement.update(nextProps, nextPresenceContext);
+            prepareDragProjection(visualElement, nextProps);
+            visualElement.updateFeatures();
+            if (visualElement.current && visualElement.animationState) {
+                visualElement.animationState.animateChanges();
+            }
+        });
+        onCleanup(() => {
+            visualElement?.unmount();
+        });
+        const setRef = (instance) => {
+            if (!instance)
+                return;
+            visualElement?.mount(instance);
+            if (visualElement && parentContext.visualElement) {
+                const parent = parentContext.visualElement;
+                visualElement.parent = parent;
+                if (typeof parent.depth === "number") {
+                    ;
+                    visualElement.depth = parent.depth + 1;
+                }
+                if (visualElement.isVariantNode && !visualElement.isControllingVariants) {
+                    ;
+                    visualElement.removeFromVariantTree?.();
+                    if (typeof parent.addVariantChild === "function") {
+                        ;
+                        visualElement.removeFromVariantTree = parent.addVariantChild(visualElement);
+                    }
+                }
+            }
+            visualState.onMount?.(instance);
+            const externalRef = local.ref;
+            if (typeof externalRef === "function") {
+                externalRef(instance);
+            }
+            else if (externalRef && typeof externalRef === "object") {
+                ;
+                externalRef.current = instance;
+            }
+        };
+        return (<MotionContext.Provider value={context}>
+        <Dynamic component={Component} {...elementProps()} ref={setRef}>
+          {local.children}
+        </Dynamic>
+      </MotionContext.Provider>);
+    };
+}
+export function createMotionComponentWithFeatures(Component, options) {
+    return createMotionComponent(Component, options, featureBundle, createDomVisualElement);
+}
+const componentCache = new Map();
+const motionProxy = new Proxy(createMotionComponentWithFeatures, {
+    get: (target, key) => {
+        if (key === "create")
+            return createMotionComponentWithFeatures;
+        if (typeof key !== "string")
+            return Reflect.get(target, key);
+        let component = componentCache.get(key);
+        if (!component) {
+            component = createMotionComponentWithFeatures(key);
+            componentCache.set(key, component);
+        }
+        return component;
+    },
+});
+export const motion = motionProxy;
+export const m = motionProxy;

package/dist/source/motion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/source/motion/utils/drag-projection.js

@@ -0,0 +1,16 @@
+import { HTMLProjectionNode } from "motion-dom";
+export function prepareDragProjection(node, props) {
+    if (node.projection || !(props.drag || props.dragControls))
+        return;
+    // Drag constraints use Motion's geometry measurement, without enabling layout
+    // animation or shared layout IDs. Non-draggable elements pay no projection cost.
+    node.projection = new HTMLProjectionNode(node.latestValues, node.parent?.projection);
+    node.projection.setOptions({
+        visualElement: node,
+        alwaysMeasureLayout: true,
+        layout: false,
+        animationType: "both",
+    });
+    if (node.current)
+        node.projection.mount(node.current);
+}

package/dist/source/motion/utils/use-visual-state.js

@@ -0,0 +1,53 @@
+import { isAnimationControls, isControllingVariants as checkIsControllingVariants, isVariantNode as checkIsVariantNode, resolveVariantFromProps, resolveMotionValue, } from "motion-dom";
+function makeState({ scrapeMotionValuesFromProps, createRenderState }, props, context, presenceContext) {
+    const state = {
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
+        renderState: createRenderState(),
+    };
+    return state;
+}
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
+    const values = {};
+    const motionValues = scrapeMotionValues(props, {});
+    for (const key in motionValues) {
+        values[key] = resolveMotionValue(motionValues[key]);
+    }
+    let { initial, animate } = props;
+    const isControllingVariants = checkIsControllingVariants(props);
+    const isVariantNode = checkIsVariantNode(props);
+    if (context && isVariantNode && !isControllingVariants && props.inherit !== false) {
+        if (initial === undefined)
+            initial = context.initial;
+        if (animate === undefined)
+            animate = context.animate;
+    }
+    let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === false : false;
+    isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
+    const variantToSet = isInitialAnimationBlocked ? animate : initial;
+    if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
+        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        for (let i = 0; i < list.length; i++) {
+            const resolved = resolveVariantFromProps(props, list[i]);
+            if (resolved) {
+                const { transitionEnd, transition, ...target } = resolved;
+                for (const key in target) {
+                    let valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
+                    }
+                }
+                for (const key in transitionEnd) {
+                    values[key] = transitionEnd[key];
+                }
+            }
+        }
+    }
+    return values;
+}
+export function makeVisualState(config, props, context, presenceContext) {
+    return makeState(config, props, context, presenceContext);
+}

package/dist/source/motion/utils/valid-prop.js

@@ -0,0 +1,40 @@
+const validMotionProps = new Set([
+    "animate",
+    "exit",
+    "variants",
+    "initial",
+    "style",
+    "values",
+    "transition",
+    "transformTemplate",
+    "custom",
+    "inherit",
+    "onBeforeLayoutMeasure",
+    "onAnimationStart",
+    "onAnimationComplete",
+    "onUpdate",
+    "onDragStart",
+    "onDrag",
+    "onDragEnd",
+    "onMeasureDragConstraints",
+    "onDirectionLock",
+    "onDragTransitionEnd",
+    "_dragX",
+    "_dragY",
+    "onHoverStart",
+    "onHoverEnd",
+    "onViewportEnter",
+    "onViewportLeave",
+    "globalTapTarget",
+    "ignoreStrict",
+    "viewport",
+]);
+export function isValidMotionProp(key) {
+    return (key.startsWith("while") ||
+        (key.startsWith("drag") && key !== "draggable") ||
+        key.startsWith("layout") ||
+        key.startsWith("onTap") ||
+        key.startsWith("onPan") ||
+        key.startsWith("onLayout") ||
+        validMotionProps.has(key));
+}

package/dist/source/render/dom/create-visual-element.js

@@ -0,0 +1,10 @@
+import { HTMLVisualElement, SVGVisualElement } from "motion-dom";
+import { isSVGComponent } from "./is-svg-component";
+export const createDomVisualElement = (Component, options) => {
+    const isSVG = options.isSVG ?? isSVGComponent(Component);
+    return isSVG
+        ? new SVGVisualElement(options)
+        : new HTMLVisualElement(options, {
+            allowProjection: Component !== "svg",
+        });
+};

package/dist/source/render/dom/filter-props.js

@@ -0,0 +1,15 @@
+import { isValidMotionProp } from "../../motion/utils/valid-prop";
+export function filterProps(props, isDom, forwardMotionProps) {
+    const filteredProps = {};
+    for (const key in props) {
+        if (key === "values" && typeof props.values === "object")
+            continue;
+        if (!isValidMotionProp(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key)) ||
+            (props.draggable && key.startsWith("onDrag"))) {
+            filteredProps[key] = props[key];
+        }
+    }
+    return filteredProps;
+}

package/dist/source/render/dom/is-svg-component.js

@@ -0,0 +1,10 @@
+import { lowercaseSVGElements } from "../svg/lowercase-elements";
+export function isSVGComponent(Component) {
+    if (typeof Component !== "string" || Component.includes("-")) {
+        return false;
+    }
+    if (lowercaseSVGElements.indexOf(Component) > -1 || /[A-Z]/u.test(Component)) {
+        return true;
+    }
+    return false;
+}

package/dist/source/render/dom/style.js

@@ -0,0 +1,12 @@
+// Motion builds CSSStyleDeclaration-shaped objects. Solid applies style objects
+// with setProperty(), which requires CSS property names (including vendor prefixes).
+export function toSolidStyle(style) {
+    const result = {};
+    for (const key in style) {
+        const name = key.startsWith("--")
+            ? key
+            : key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^ms-/, "-ms-");
+        result[name] = style[key];
+    }
+    return result;
+}

package/dist/source/render/html/use-props.js

@@ -0,0 +1,39 @@
+import { buildHTMLStyles, isForcedMotionValue, isMotionValue } from "motion-dom";
+import { createHtmlRenderState } from "./utils/create-render-state";
+import { toSolidStyle } from "../dom/style";
+export function copyRawValuesOnly(target, source, props) {
+    for (const key in source) {
+        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+            target[key] = source[key];
+        }
+    }
+}
+function resolveInitialMotionValues({ transformTemplate }, visualState) {
+    const state = createHtmlRenderState();
+    buildHTMLStyles(state, visualState, transformTemplate);
+    return { ...state.vars, ...state.style };
+}
+function resolveStyle(props, visualState) {
+    const styleProp = props.style || {};
+    const style = {};
+    copyRawValuesOnly(style, styleProp, props);
+    Object.assign(style, resolveInitialMotionValues(props, visualState));
+    return style;
+}
+export function resolveHTMLProps(props, visualState) {
+    const htmlProps = {};
+    const style = resolveStyle(props, visualState);
+    if (props.drag && props.dragListener !== false) {
+        ;
+        htmlProps.draggable = false;
+        style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = "none";
+        style.touchAction = props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`;
+    }
+    if (props.tabIndex === undefined && (props.onTap || props.onTapStart || props.whileTap)) {
+        ;
+        htmlProps.tabIndex = 0;
+    }
+    ;
+    htmlProps.style = toSolidStyle(style);
+    return htmlProps;
+}

package/dist/source/render/html/utils/create-render-state.js

@@ -0,0 +1,6 @@
+export const createHtmlRenderState = () => ({
+    style: {},
+    transform: {},
+    transformOrigin: {},
+    vars: {},
+});

package/dist/source/render/svg/lowercase-elements.js

@@ -0,0 +1,27 @@
+export const lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "switch",
+    "symbol",
+    "svg",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];

package/dist/source/render/svg/use-props.js

@@ -0,0 +1,28 @@
+import { buildSVGAttrs, isSVGTag } from "motion-dom";
+import { copyRawValuesOnly } from "../html/use-props";
+import { createSvgRenderState } from "./utils/create-render-state";
+import { toSolidStyle } from "../dom/style";
+export function resolveSVGProps(props, visualState, Component) {
+    const state = createSvgRenderState();
+    buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+    const visualProps = {
+        ...state.attrs,
+        style: { ...state.style },
+    };
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    const pathLength = visualState.pathLength;
+    const pathSpacing = visualState.pathSpacing;
+    const pathOffset = visualState.pathOffset;
+    if (pathLength !== undefined) {
+        const spacing = pathSpacing ?? 1 - Number(pathLength);
+        visualProps.pathLength = 1;
+        visualProps["stroke-dasharray"] = `${pathLength} ${spacing}`;
+        visualProps["stroke-dashoffset"] = `${-Number(pathOffset ?? 0)}`;
+    }
+    visualProps.style = toSolidStyle(visualProps.style);
+    return visualProps;
+}

package/dist/source/render/svg/utils/create-render-state.js

@@ -0,0 +1,5 @@
+import { createHtmlRenderState } from "../../html/utils/create-render-state";
+export const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});

package/dist/source/render/types.js

@@ -0,0 +1 @@
+export {};

package/dist/source/utils/distance.js

@@ -0,0 +1,7 @@
+export const distance = (a, b) => Math.abs(a - b);
+export function distance2D(a, b) {
+    // Multi-dimensional
+    const xDelta = distance(a.x, b.x);
+    const yDelta = distance(a.y, b.y);
+    return Math.sqrt(xDelta ** 2 + yDelta ** 2);
+}

package/dist/source/utils/get-context-window.js

@@ -0,0 +1,4 @@
+// Fixes https://github.com/motiondivision/motion/issues/2270
+export const getContextWindow = ({ current }) => {
+    return current ? current.ownerDocument.defaultView : null;
+};

package/dist/source/utils/is-ref-object.js

@@ -0,0 +1,5 @@
+export function isRefObject(ref) {
+    return (ref &&
+        typeof ref === "object" &&
+        Object.prototype.hasOwnProperty.call(ref, "current"));
+}

package/dist/source/utils/safe-react-types.js

@@ -0,0 +1 @@
+export {};

package/dist/source/utils/use-reduced-motion.js

@@ -0,0 +1,15 @@
+import { createSignal, onCleanup } from "solid-js";
+/**
+ * Reactive device preference. Read as `shouldReduceMotion()` in tracked code.
+ * Returns null on the server or when matchMedia is unavailable.
+ */
+export function useReducedMotion() {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => null;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const [reduced, setReduced] = createSignal(media.matches);
+    const update = () => setReduced(media.matches);
+    media.addEventListener("change", update);
+    onCleanup(() => media.removeEventListener("change", update));
+    return reduced;
+}

package/dist/source/value/use-motion-value-event.js

@@ -0,0 +1,5 @@
+import { onCleanup } from "solid-js";
+/** Subscribe during setup and unsubscribe when the Solid owner is disposed. */
+export function useMotionValueEvent(value, event, callback) {
+    onCleanup(value.on(event, callback));
+}

package/dist/source/value/use-motion-value.js

@@ -0,0 +1,16 @@
+import { motionValue } from "motion-dom";
+import { onCleanup, useContext } from "solid-js";
+import { MotionConfigContext } from "../components/MotionConfig";
+/**
+ * Creates a MotionValue to track state and velocity.
+ */
+export function useMotionValue(initial) {
+    const value = motionValue(initial);
+    const { isStatic } = useContext(MotionConfigContext);
+    if (isStatic) {
+        const unsubscribe = value.on("change", () => { });
+        onCleanup(() => unsubscribe());
+    }
+    onCleanup(() => value.destroy());
+    return value;
+}

package/dist/source/value/use-spring.js

@@ -0,0 +1,59 @@
+import { isMotionValue, cancelFrame, frame, JSAnimation, motionValue, } from "motion-dom";
+import { useContext } from "solid-js";
+import { MotionConfigContext } from "../components/MotionConfig";
+import { useTransform } from "./use-transform";
+import { onCleanup } from "solid-js";
+export function useSpring(source, options = {}) {
+    const { isStatic } = useContext(MotionConfigContext);
+    const getFromSource = () => (isMotionValue(source) ? source.get() : source);
+    if (isStatic) {
+        return useTransform(getFromSource);
+    }
+    const initial = getFromSource();
+    const value = motionValue(initial);
+    const unit = typeof initial === "string" ? initial.replace(/[\d.-]/g, "") : "";
+    const parse = (latest) => unit ? `${parseFloat(String(latest))}${unit}` : parseFloat(String(latest));
+    let target = initial;
+    let setter;
+    let disposed = false;
+    const stop = () => {
+        cancelFrame(start);
+        value.stop();
+    };
+    // motion-dom 12.30's springValue queues an anonymous callback that survives
+    // destroy(). Keep the scheduled work owned and cancellable by this Solid scope.
+    const start = () => {
+        if (disposed)
+            return;
+        value.stop();
+        const from = parseFloat(String(value.get()));
+        const to = parseFloat(String(target));
+        if (from === to)
+            return;
+        value.start((onComplete) => new JSAnimation({
+            keyframes: [from, to],
+            velocity: value.getVelocity(),
+            type: "spring",
+            restDelta: 0.001,
+            restSpeed: 0.01,
+            ...options,
+            onUpdate: (latest) => setter(parse(latest)),
+            onComplete,
+        }));
+    };
+    value.attach((latest, set) => {
+        target = latest;
+        setter = set;
+        frame.postRender(start);
+    }, stop);
+    const unsubscribe = isMotionValue(source)
+        ? source.on("change", (latest) => value.set(parse(latest)))
+        : undefined;
+    value.on("destroy", () => {
+        disposed = true;
+        unsubscribe?.();
+        stop();
+    });
+    onCleanup(() => value.destroy());
+    return value;
+}

package/dist/source/value/use-transform.js

@@ -0,0 +1,25 @@
+import { mapValue, transform, transformValue, } from "motion-dom";
+import { onCleanup } from "solid-js";
+export function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    if (typeof input === "function") {
+        const value = transformValue(input);
+        onCleanup(() => value.destroy());
+        return value;
+    }
+    let value;
+    if (Array.isArray(input)) {
+        const transformer = typeof inputRangeOrTransformer === "function"
+            ? inputRangeOrTransformer
+            : transform(inputRangeOrTransformer, outputRange, options);
+        value = transformValue(() => transformer(input.map((item) => item.get())));
+    }
+    else if (typeof inputRangeOrTransformer === "function") {
+        const transformer = inputRangeOrTransformer;
+        value = transformValue(() => transformer(input.get()));
+    }
+    else {
+        value = mapValue(input, inputRangeOrTransformer, outputRange, options);
+    }
+    onCleanup(() => value.destroy());
+    return value;
+}