motion-start 0.0.1

package/src/render/dom/utils/is-svg-component.ts

@@ -0,0 +1,41 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ComponentType } from "react";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { lowercaseSVGElements } from '../../svg/lowercase-elements.js';
+
+function isSVGComponent(Component: string | ComponentType) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
+export { isSVGComponent };

package/src/render/dom/utils/parse-dom-variant.ts

@@ -0,0 +1,26 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MakeTargetAnimatable } from "../../utils/animation";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { resolveCSSVariables } from './css-variables-conversion.js';
+import { unitConversion } from './unit-conversion.js';
+
+/**
+ * Parse a DOM variant to make it animatable. This involves resolving CSS variables
+ * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
+ */
+var parseDomVariant: MakeTargetAnimatable = function (visualElement, target, origin, transitionEnd) {
+    var resolved = resolveCSSVariables(visualElement, target, transitionEnd);
+    target = resolved.target;
+    transitionEnd = resolved.transitionEnd;
+    return unitConversion(visualElement, target, origin, transitionEnd);
+};
+
+export { parseDomVariant };

package/src/render/dom/utils/unit-conversion.ts

@@ -0,0 +1,258 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Target, TargetWithKeyframes } from "../../../types";
+import type { VisualElement } from "../../types";
+enum BoundingBoxDimension {
+    width = "width",
+    height = "height",
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom"
+}
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { __assign, __read } from 'tslib';
+import { number, px } from 'style-value-types';
+import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.js';
+// import { invariant } from '../../../utils/errors.js';
+import { transformProps } from '../../html/utils/transform.js';
+import { findDimensionValueType } from '../value-types/dimensions.js';
+
+var positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "x",
+    "y",
+]);
+var isPositionalKey = function (key) { return positionalKeys.has(key); };
+var hasPositionalKey = function (target) {
+    return Object.keys(target).some(isPositionalKey);
+};
+var setAndResetVelocity = function (value, to) {
+    // Looks odd but setting it twice doesn't render, it'll just
+    // set both prev and current to the latest value
+    value.set(to, false);
+    value.set(to);
+};
+var isNumOrPxType = function (v) {
+    return v === number || v === px;
+};
+var getPosFromMatrix = function (matrix, pos) {
+    return parseFloat(matrix.split(", ")[pos]);
+};
+var getTranslateFromMatrix = function (pos2, pos3) { return function (_bbox, _a) {
+    var transform = _a.transform;
+    if (transform === "none" || !transform)
+        return 0;
+    var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+    if (matrix3d) {
+        return getPosFromMatrix(matrix3d[1], pos3);
+    }
+    else {
+        var matrix = transform.match(/^matrix\((.+)\)$/);
+        if (matrix) {
+            return getPosFromMatrix(matrix[1], pos2);
+        }
+        else {
+            return 0;
+        }
+    }
+}; };
+var transformKeys = new Set(["x", "y", "z"]);
+var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
+function removeNonTranslationalTransform(visualElement) {
+    var removedTransforms = [];
+    nonTranslationalTransformKeys.forEach(function (key) {
+        var value = visualElement.getValue(key);
+        if (value !== undefined) {
+            removedTransforms.push([key, value.get()]);
+            value.set(key.startsWith("scale") ? 1 : 0);
+        }
+    });
+    // Apply changes to element before measurement
+    if (removedTransforms.length)
+        visualElement.syncRender();
+    return removedTransforms;
+}
+var positionalValues = {
+    // Dimensions
+    width: function (_a) {
+        var x = _a.x;
+        return x.max - x.min;
+    },
+    height: function (_a) {
+        var y = _a.y;
+        return y.max - y.min;
+    },
+    top: function (_bbox, _a) {
+        var top = _a.top;
+        return parseFloat(top);
+    },
+    left: function (_bbox, _a) {
+        var left = _a.left;
+        return parseFloat(left);
+    },
+    bottom: function (_a, _b) {
+        var y = _a.y;
+        var top = _b.top;
+        return parseFloat(top) + (y.max - y.min);
+    },
+    right: function (_a, _b) {
+        var x = _a.x;
+        var left = _b.left;
+        return parseFloat(left) + (x.max - x.min);
+    },
+    // Transform
+    x: getTranslateFromMatrix(4, 13),
+    y: getTranslateFromMatrix(5, 14),
+};
+var convertChangedValueTypes = function (target, visualElement, changedKeys) {
+    var originBbox = visualElement.measureViewportBox();
+    var element = visualElement.getInstance();
+    var elementComputedStyle = getComputedStyle(element);
+    var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
+    var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
+    // If the element is currently set to display: "none", make it visible before
+    // measuring the target bounding box
+    if (display === "none") {
+        visualElement.setStaticValue("display", target.display || "block");
+    }
+    // Apply the latest values (as set in checkAndConvertChangedValueTypes)
+    visualElement.syncRender();
+    var targetBbox = visualElement.measureViewportBox();
+    changedKeys.forEach(function (key) {
+        // Restore styles to their **calculated computed style**, not their actual
+        // originally set style. This allows us to animate between equivalent pixel units.
+        var value = visualElement.getValue(key);
+        setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
+        target[key] = positionalValues[key](targetBbox, elementComputedStyle);
+    });
+    return target;
+};
+var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) {
+    if (origin === void 0) { origin = {}; }
+    if (transitionEnd === void 0) { transitionEnd = {}; }
+    target = __assign({}, target);
+    transitionEnd = __assign({}, transitionEnd);
+    var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+    // We want to remove any transform values that could affect the element's bounding box before
+    // it's measured. We'll reapply these later.
+    var removedTransformValues = [];
+    var hasAttemptedToRemoveTransformValues = false;
+    var changedValueTypeKeys = [];
+    targetPositionalKeys.forEach(function (key) {
+        var value = visualElement.getValue(key);
+        if (!visualElement.hasValue(key))
+            return;
+        var from = origin[key];
+        var to = target[key];
+        var fromType = findDimensionValueType(from);
+        var toType;
+        // TODO: The current implementation of this basically throws an error
+        // if you try and do value conversion via keyframes. There's probably
+        // a way of doing this but the performance implications would need greater scrutiny,
+        // as it'd be doing multiple resize-remeasure operations.
+        if (isKeyframesTarget(to)) {
+            var numKeyframes = to.length;
+            for (var i = to[0] === null ? 1 : 0; i < numKeyframes; i++) {
+                if (!toType) {
+                    toType = findDimensionValueType(to[i]);
+                    //invariant(toType === fromType ||
+                    //    (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
+                }
+                //else {
+                ///    invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                //}
+            }
+        }
+        else {
+            toType = findDimensionValueType(to);
+        }
+        if (fromType !== toType) {
+            // If they're both just number or px, convert them both to numbers rather than
+            // relying on resize/remeasure to convert (which is wasteful in this situation)
+            if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
+                var current = value.get();
+                if (typeof current === "string") {
+                    value.set(parseFloat(current));
+                }
+                if (typeof to === "string") {
+                    target[key] = parseFloat(to);
+                }
+                else if (Array.isArray(to) && toType === px) {
+                    target[key] = to.map(parseFloat);
+                }
+            }
+            else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
+                (toType === null || toType === void 0 ? void 0 : toType.transform) &&
+                (from === 0 || to === 0)) {
+                // If one or the other value is 0, it's safe to coerce it to the
+                // type of the other without measurement
+                if (from === 0) {
+                    value.set(toType.transform(from));
+                }
+                else {
+                    target[key] = fromType.transform(to);
+                }
+            }
+            else {
+                // If we're going to do value conversion via DOM measurements, we first
+                // need to remove non-positional transform values that could affect the bbox measurements.
+                if (!hasAttemptedToRemoveTransformValues) {
+                    removedTransformValues = removeNonTranslationalTransform(visualElement);
+                    hasAttemptedToRemoveTransformValues = true;
+                }
+                changedValueTypeKeys.push(key);
+                transitionEnd[key] =
+                    transitionEnd[key] !== undefined
+                        ? transitionEnd[key]
+                        : target[key];
+                setAndResetVelocity(value, to);
+            }
+        }
+    });
+    if (changedValueTypeKeys.length) {
+        var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+        // If we removed transform values, reapply them before the next render
+        if (removedTransformValues.length) {
+            removedTransformValues.forEach(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                visualElement.getValue(key).set(value);
+            });
+        }
+        // Reapply original values
+        visualElement.syncRender();
+        return { target: convertedTarget, transitionEnd: transitionEnd };
+    }
+    else {
+        return { target: target, transitionEnd: transitionEnd };
+    }
+};
+/**
+ * Convert value types for x/y/width/height/top/left/bottom/right
+ *
+ * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
+ *
+ * @internal
+ */
+function unitConversion(visualElement: VisualElement, target: TargetWithKeyframes, origin?: Target, transitionEnd?: Target): {
+    target: TargetWithKeyframes;
+    transitionEnd?: Target;
+} {
+    return hasPositionalKey(target)
+        ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
+        : { target: target, transitionEnd: transitionEnd };
+}
+
+export { BoundingBoxDimension, unitConversion };

package/src/render/dom/utils/use-html-props.ts

@@ -0,0 +1,2 @@
+export {default as UseStyle} from '../../html/UseStyle.svelte';
+// export { default as UseHTMLProps} from "./UseHTMLProps.svelte";

package/src/render/dom/utils/use-svg-props.ts

@@ -0,0 +1 @@
+export {default as UseSVGProps} from '../../svg/UseSVGProps.svelte';

package/src/render/dom/value-types/animatable-none.ts

@@ -0,0 +1,24 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { filter, complex } from 'style-value-types';
+import { getDefaultValueType } from './defaults.js';
+
+function getAnimatableNone(key:string, value:string) {
+    var _a;
+    var defaultValueType = getDefaultValueType(key);
+    if (defaultValueType !== filter)
+        defaultValueType = complex;
+    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
+}
+
+export { getAnimatableNone };

package/src/render/dom/value-types/defaults.ts

@@ -0,0 +1,30 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueTypeMap } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { __assign } from 'tslib';
+import { color, filter } from 'style-value-types';
+import { numberValueTypes } from './number.js';
+
+/**
+ * A map of default value types for common values
+ */
+var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
+    // Color props
+    color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+    // Border props
+    borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter }) as ValueTypeMap;
+/**
+ * Gets the default ValueType for the provided value key
+ */
+var getDefaultValueType = function (key:string) { return defaultValueTypes[key]; };
+
+export { defaultValueTypes, getDefaultValueType };

package/src/render/dom/value-types/dimensions.ts

@@ -0,0 +1,27 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { number, px, percent, degrees, vw, vh } from 'style-value-types';
+import { testValueType } from './test.js';
+import { auto } from './type-auto.js';
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+var findDimensionValueType = function (v) {
+    return dimensionValueTypes.find(testValueType(v));
+};
+
+export { dimensionValueTypes, findDimensionValueType };

package/src/render/dom/value-types/find.ts

@@ -0,0 +1,31 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { __spreadArray, __read } from 'tslib';
+import { color, complex } from 'style-value-types';
+import { dimensionValueTypes } from './dimensions.js';
+import { testValueType } from './test.js';
+
+/**
+ * A list of all ValueTypes
+ */
+var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes)), [color, complex]);
+/**
+ * Tests a value against the list of ValueTypes
+ */
+var findValueType = function (v: any) { return valueTypes.find(testValueType(v)) as import("style-value-types").ValueType | {
+    test: (v: any) => boolean;
+    parse: (v: string) => (number | import("style-value-types").RGBA | import("style-value-types").HSLA)[];
+    createTransformer: (v: string) => (v: (string | number | import("style-value-types").Color)[]) => string;
+    getAnimatableNone: (v: string) => string;
+} | undefined; };
+
+export { findValueType };

package/src/render/dom/value-types/get-as-type.ts

@@ -0,0 +1,21 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueType } from "style-value-types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */
+var getValueAsType = function (value: any, type?: ValueType | undefined) {
+    return type && typeof value === "number"
+        ? type.transform(value)
+        : value;
+};
+
+export { getValueAsType };

package/src/render/dom/value-types/number.ts

@@ -0,0 +1,83 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueTypeMap } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';
+import { int } from './type-int.js';
+
+var numberValueTypes = {
+    // Border props
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
+    // Positioning props
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    size: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Transform props
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale: scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
+    // Misc
+    zIndex: int,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+} as ValueTypeMap;
+
+export { numberValueTypes };

package/src/render/dom/value-types/test.ts

@@ -0,0 +1,17 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueType } from "style-value-types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Tests a provided value against a ValueType
+ */
+var testValueType = function (v: any) { return function (type: ValueType) { return type.test(v); }; };
+
+export { testValueType };

package/src/render/dom/value-types/type-auto.ts

@@ -0,0 +1,21 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueType } from "style-value-types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+/**
+ * ValueType for "auto"
+ */
+var auto = {
+    test: function (v) { return v === "auto"; },
+    parse: function (v) { return v; },
+} as ValueType;
+
+export { auto };

package/src/render/dom/value-types/type-int.ts

@@ -0,0 +1,23 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env';
+import { __assign } from 'tslib';
+import { number } from 'style-value-types';
+
+var int = __assign(__assign({}, number), { transform: Math.round }) as {
+    transform: (x: number) => number;
+    test: (v: any) => boolean;
+    parse: (v: any) => any;
+    createTransformer?: ((template: string) => import("style-value-types").Transformer) | undefined;
+    default?: any;
+    getAnimatableNone?: ((v: any) => any) | undefined;
+};
+
+export { int };

package/src/render/dom/value-types/types.ts

@@ -0,0 +1,8 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueType } from "style-value-types";
+export interface ValueTypeMap {
+    [key: string]: ValueType;
+}

package/src/render/html/UseHTMLProps.svelte

@@ -0,0 +1,33 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import UseStyle from "./UseStyle.svelte";
+
+  export let props, visualState, isStatic;
+
+  const getHTMLProps = (style, props) => {
+    let htmlProps = {};
+    if (Boolean(props.drag)) {
+      // Disable the ghost element when a user drags
+      htmlProps.draggable = false;
+
+      // Disable text selection
+      style.userSelect =
+        style.WebkitUserSelect =
+        style.WebkitTouchCallout =
+          "none";
+
+      // Disable scrolling on the draggable direction
+      style.touchAction =
+        props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`;
+    }
+
+    htmlProps.style = style;
+    return htmlProps;
+  };
+</script>
+
+<UseStyle let:styles {visualState} {props} {isStatic}>
+  <slot visualProps={getHTMLProps(styles, props)} />
+</UseStyle>