motion 12.9.7 → 12.10.1

package/dist/es/motion-dom/dist/es/effects/MotionValueState.mjs

@@ -0,0 +1,41 @@
+import { frame, cancelFrame } from '../frameloop/frame.mjs';
+import { numberValueTypes } from '../value/types/maps/number.mjs';
+import { getValueAsType } from '../value/types/utils/get-as-type.mjs';
+
+class MotionValueState {
+    constructor() {
+        this.latest = {};
+        this.values = new Map();
+    }
+    set(name, value, render, computed) {
+        const existingValue = this.values.get(name);
+        if (existingValue) {
+            existingValue.onRemove();
+        }
+        const onChange = () => {
+            this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
+            render && frame.render(render);
+        };
+        onChange();
+        const cancelOnChange = value.on("change", onChange);
+        computed && value.addDependent(computed);
+        const remove = () => {
+            cancelOnChange();
+            render && cancelFrame(render);
+            this.values.delete(name);
+            computed && value.removeDependent(computed);
+        };
+        this.values.set(name, { value, onRemove: remove });
+        return remove;
+    }
+    get(name) {
+        return this.values.get(name)?.value;
+    }
+    destroy() {
+        for (const value of this.values.values()) {
+            value.onRemove();
+        }
+    }
+}
+
+export { MotionValueState };

package/dist/es/motion-dom/dist/es/effects/style/index.mjs

@@ -0,0 +1,51 @@
+import { isCSSVar } from '../../render/dom/is-css-var.mjs';
+import { transformProps } from '../../render/utils/keys-transform.mjs';
+import { resolveElements } from '../../utils/resolve-elements.mjs';
+import { MotionValue } from '../../value/index.mjs';
+import { MotionValueState } from '../MotionValueState.mjs';
+import { buildTransform } from './transform.mjs';
+
+const stateMap = new WeakMap();
+function styleEffect(subject, values) {
+    const elements = resolveElements(subject);
+    const subscriptions = [];
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        const state = stateMap.get(element) ?? new MotionValueState();
+        stateMap.set(element, state);
+        for (const key in values) {
+            const value = values[key];
+            const remove = addValue(element, state, key, value);
+            subscriptions.push(remove);
+        }
+    }
+    return () => {
+        for (const cancel of subscriptions)
+            cancel();
+    };
+}
+function addValue(element, state, key, value) {
+    let render = undefined;
+    let computed = undefined;
+    if (transformProps.has(key)) {
+        if (!state.get("transform")) {
+            state.set("transform", new MotionValue("none"), () => {
+                element.style.transform = buildTransform(state);
+            });
+        }
+        computed = state.get("transform");
+    }
+    else if (isCSSVar(key)) {
+        render = () => {
+            element.style.setProperty(key, state.latest[key]);
+        };
+    }
+    else {
+        render = () => {
+            element.style[key] = state.latest[key];
+        };
+    }
+    return state.set(key, value, render, computed);
+}
+
+export { styleEffect };

package/dist/es/motion-dom/dist/es/effects/style/transform.mjs

@@ -0,0 +1,38 @@
+import { transformPropOrder } from '../../render/utils/keys-transform.mjs';
+
+const translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+function buildTransform(state) {
+    let transform = "";
+    let transformIsDefault = true;
+    /**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */
+    for (let i = 0; i < transformPropOrder.length; i++) {
+        const key = transformPropOrder[i];
+        const value = state.latest[key];
+        if (value === undefined)
+            continue;
+        let valueIsDefault = true;
+        if (typeof value === "number") {
+            valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+        }
+        else {
+            valueIsDefault = parseFloat(value) === 0;
+        }
+        if (!valueIsDefault) {
+            transformIsDefault = false;
+            const transformName = translateAlias[key] || key;
+            const valueToRender = state.latest[key];
+            transform += `${transformName}(${valueToRender}) `;
+        }
+    }
+    return transformIsDefault ? "none" : transform.trim();
+}
+
+export { buildTransform };

package/dist/es/motion-dom/dist/es/gestures/press/index.mjs

@@ -43,10 +43,12 @@ function press(targetOrSelector, onPressStart, options = {}) {
         const onPointerEnd = (endEvent, success) => {
             window.removeEventListener("pointerup", onPointerUp);
             window.removeEventListener("pointercancel", onPointerCancel);
-            if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
+            if (isPressing.has(target)) {
+                isPressing.delete(target);
+            }
+            if (!isValidPressEvent(endEvent)) {
                 return;
             }
-            isPressing.delete(target);
             if (typeof onPressEnd === "function") {
                 onPressEnd(endEvent, { success });
             }

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -60,6 +60,11 @@ class MotionValue {
             // Update update subscribers
             if (this.current !== this.prev) {
                 this.events.change?.notify(this.current);
+                if (this.dependents) {
+                    for (const dependent of this.dependents) {
+                        dependent.dirty();
+                    }
+                }
             }
             // Update render subscribers
             if (render) {
@@ -201,6 +206,20 @@ class MotionValue {
         if (this.stopPassiveEffect)
             this.stopPassiveEffect();
     }
+    dirty() {
+        this.events.change?.notify(this.current);
+    }
+    addDependent(dependent) {
+        if (!this.dependents) {
+            this.dependents = new Set();
+        }
+        this.dependents.add(dependent);
+    }
+    removeDependent(dependent) {
+        if (this.dependents) {
+            this.dependents.delete(dependent);
+        }
+    }
     /**
      * Returns the latest state of `MotionValue`
      *
@@ -299,6 +318,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.dependents?.clear();
         this.events.destroy?.notify();
         this.clearListeners();
         this.stop();