motion-start 0.0.1

package/src/render/dom/projection/relative-set.ts

@@ -0,0 +1,27 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../types";
+
+
+/** 
+based on framer-motion@4.1.11,
+Copyright (c) 2018 Framer B.V.
+*/
+import { calcRelativeOffset } from '../../../motion/features/layout/utils.js';
+import { eachAxis } from '../../../utils/each-axis.js';
+
+function setCurrentViewportBox(visualElement: VisualElement) {
+    var projectionParent = visualElement.getProjectionParent();
+    if (!projectionParent) {
+        visualElement.rebaseProjectionTarget();
+        return;
+    }
+    var relativeOffset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement.getLayoutState().layout);
+    eachAxis(function (axis) {
+        visualElement.setProjectionTargetAxis(axis, relativeOffset[axis].min, relativeOffset[axis].max, true);
+    });
+}
+
+export { setCurrentViewportBox };

package/src/render/dom/projection/scale-correction.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ScaleCorrectionDefinitionMap } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+var valueScaleCorrection: ScaleCorrectionDefinitionMap = {};
+/**
+ * @internal
+ */
+function addScaleCorrection(correctors: ScaleCorrectionDefinitionMap) {
+    for (var key in correctors) {
+        valueScaleCorrection[key] = correctors[key];
+    }
+}
+
+export { addScaleCorrection, valueScaleCorrection };

package/src/render/dom/projection/types.ts

@@ -0,0 +1,13 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { LayoutState, TargetProjection } from "../../utils/state";
+export type ScaleCorrection = (latest: string | number, layoutState: LayoutState, projection: TargetProjection) => string | number;
+export interface ScaleCorrectionDefinition {
+    process: ScaleCorrection;
+    applyTo?: string[];
+}
+export type ScaleCorrectionDefinitionMap = {
+    [key: string]: ScaleCorrectionDefinition;
+};

package/src/render/dom/projection/utils.ts

@@ -0,0 +1,69 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../types";
+
+
+/** 
+based on framer-motion@4.1.11,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import sync from 'framesync';
+import { copyAxisBox } from '../../../utils/geometry/index.js';
+import { compareByDepth } from '../../utils/compare-by-depth.js';
+
+function isProjecting(visualElement: VisualElement) {
+    var isEnabled = visualElement.projection.isEnabled;
+    return isEnabled || visualElement.shouldResetTransform();
+}
+function collectProjectingAncestors(visualElement: VisualElement, ancestors?: VisualElement[]) {
+    if (ancestors === void 0) { ancestors = []; }
+    var parent = visualElement.parent;
+    if (parent)
+        collectProjectingAncestors(parent, ancestors);
+    if (isProjecting(visualElement))
+        ancestors.push(visualElement);
+    return ancestors;
+}
+function collectProjectingChildren(visualElement: VisualElement) {
+    var children = <VisualElement[]>[];
+    var addChild = function (child) {
+        if (isProjecting(child))
+            children.push(child);
+        child.children.forEach(addChild);
+    };
+    visualElement.children.forEach(addChild);
+    return children.sort(compareByDepth);
+}
+/**
+ * Update the layoutState by measuring the DOM layout. This
+ * should be called after resetting any layout-affecting transforms.
+ */
+function updateLayoutMeasurement(visualElement: VisualElement) {
+    if (visualElement.shouldResetTransform())
+        return;
+    var layoutState = visualElement.getLayoutState();
+    visualElement.notifyBeforeLayoutMeasure(layoutState.layout);
+    layoutState.isHydrated = true;
+    layoutState.layout = visualElement.measureViewportBox();
+    layoutState.layoutCorrected = copyAxisBox(layoutState.layout);
+    visualElement.notifyLayoutMeasure(layoutState.layout, visualElement.prevViewportBox || layoutState.layout);
+    sync.update(function () { return visualElement.rebaseProjectionTarget(); });
+}
+/**
+ * Record the viewport box as it was before an expected mutation/re-render
+ */
+function snapshotViewportBox(visualElement: VisualElement, nc?: any) {
+    if (visualElement.shouldResetTransform())
+        return;
+    if (!nc) visualElement.prevViewportBox = visualElement.measureViewportBox(false);
+    /**
+     * Update targetBox to match the prevViewportBox. This is just to ensure
+     * that targetBox is affected by scroll in the same way as the measured box
+     */
+    visualElement.rebaseProjectionTarget(false, visualElement.prevViewportBox);
+}
+
+export { collectProjectingAncestors, collectProjectingChildren, snapshotViewportBox, updateLayoutMeasurement };

package/src/render/dom/svg-visual-element.ts

@@ -0,0 +1,114 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { visualElement } from ".."
+import { isMotionValue } from "../../value/utils/is-motion-value"
+import { htmlConfig } from "../html/visual-element"
+import { buildSVGAttrs } from "../svg/utils/build-attrs"
+import { camelToDash } from "./utils/camel-to-dash"
+import { camelCaseAttributes } from "../svg/utils/camel-case-attrs"
+import { isTransformProp } from "../html/utils/transform"
+import { getDefaultValueType } from "./value-types/defaults";
+
+const zeroDimensions = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+}
+
+export const svgMutableState = () => ({
+    ...htmlConfig.createRenderState(),
+    attrs: {},
+    dimensions: zeroDimensions,
+})
+
+export const svgVisualElement = visualElement({
+    ...(htmlConfig),
+    createRenderState: svgMutableState,
+    onMount(element, instance, mutableState) {
+        try {
+            mutableState.dimensions =
+                typeof (instance).getBBox === "function"
+                    ? (instance).getBBox()
+                    : (instance.getBoundingClientRect())
+        } catch (e) {
+            // Most likely trying to measure an unrendered element under Firefox
+            mutableState.dimensions = zeroDimensions
+        }
+
+        if (isPath(instance)) {
+            mutableState.totalPathLength = instance.getTotalLength()
+        }
+
+        /**
+         * Ensure we render the element as soon as possible to reflect the measured dimensions.
+         * Preferably this would happen synchronously but we put it in rAF to prevent layout thrashing.
+         */
+        element.scheduleRender()
+    },
+
+    getBaseTarget(props, key) {
+        return props[key]
+    },
+
+    readValueFromInstance(domElement, key) {
+        if (isTransformProp(key)) {
+            return getDefaultValueType(key)?.default || 0
+        }
+        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key
+        return domElement.getAttribute(key)
+    },
+
+    scrapeMotionValuesFromProps(props) {
+        const newValues = htmlConfig.scrapeMotionValuesFromProps(props)
+
+        for (let key in props) {
+            if (isMotionValue(props[key])) {
+                if (key === "x" || key === "y") {
+                    key = "attr" + key.toUpperCase()
+                }
+                newValues[key] = props[key]
+            }
+        }
+
+        return newValues
+    },
+
+    build(
+        _element,
+        renderState,
+        latestValues,
+        projection,
+        layoutState,
+        options,
+        props
+    ) {
+        buildSVGAttrs(
+            renderState,
+            latestValues,
+            projection,
+            layoutState,
+            options,
+            props.transformTemplate
+        )
+    },
+
+    render(element, mutableState) {
+        htmlConfig.render(element, mutableState)
+
+        for (const key in mutableState.attrs) {
+            element.setAttribute(
+                !camelCaseAttributes.has(key) ? camelToDash(key) : key,
+                mutableState.attrs[key]
+            )
+        }
+    },
+})
+
+function isPath(
+    element
+){
+    return element.tagName === "path"
+}

package/src/render/dom/types.ts

@@ -0,0 +1,32 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { TransformPoint2D } from "../../types/geometry";
+import type { HTMLMotionComponents } from "../html/types";
+import type { SVGMotionComponents } from "../svg/types";
+export interface DOMVisualElementOptions {
+    /**
+     * A function that can map a page point between spaces. Used by Framer
+     * to support dragging and layout animations within scaled space.
+     *
+     * @public
+     */
+    transformPagePoint?: TransformPoint2D;
+    /**
+     * Allow `transform` to be set as `"none"` if all transforms are their default
+     * values. Switching to this removes the element as a GPU layer which can lead to subtle
+     * graphical shifts.
+     *
+     * @public
+     */
+    allowTransformNone?: boolean;
+    /**
+     * Allow this element to be GPU-accelerated. We currently enable this by
+     * adding a `translateZ(0)`.
+     *
+     * @public
+     */
+    enableHardwareAcceleration?: boolean;
+}
+export type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;

package/src/render/dom/use-render.ts

@@ -0,0 +1,11 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { RenderComponent } from "../../motion/features/types";
+import type { HTMLRenderState } from "../html/types";
+import type { SVGRenderState } from "../svg/types";
+export type createUseRender = (forwardMotionProps?: boolean) => RenderComponent<SVGElement | HTMLElement, HTMLRenderState | SVGRenderState>;
+
+export { default as UseRender } from './UseRender.svelte';
+

package/src/render/dom/utils/UseInitialMotionProps.svelte

@@ -0,0 +1,26 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { isMotionValue } from "../../../value/utils/is-motion-value.js";
+
+  export let visualElement, props;
+  const createAttrs = (visualElement, props) => {
+    const { attrs } = visualElement.build();
+    const resolvedMotionValueProps = {};
+
+    for (const key in props) {
+      if (isMotionValue(props[key])) {
+        resolvedMotionValueProps[key] = props[key].get();
+      }
+    }
+
+    return { ...attrs, ...resolvedMotionValueProps };
+  };
+  let svgProps = createAttrs(visualElement, props);
+  $: if (visualElement.isStatic) {
+    svgProps = createAttrs(visualElement, props);
+  }
+</script>
+
+<slot {svgProps} />

package/src/render/dom/utils/batch-layout.ts

@@ -0,0 +1,77 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+type Job = () => void;
+type JobSetter = (job: Job) => void;
+type ReadWrites = (read: JobSetter, write: JobSetter) => void;
+
+/** 
+based on framer-motion@4.1.15,
+Copyright (c) 2018 Framer B.V.
+*/
+import sync from 'framesync';
+
+var unresolvedJobs = new Set();
+var layoutState = {
+    isMeasuringLayout: false,
+};
+function pushJob(stack, job, pointer) {
+    if (!stack[pointer])
+        stack[pointer] = [];
+    stack[pointer].push(job);
+}
+function batchLayout(callback: ReadWrites) {
+    unresolvedJobs.add(callback);
+    return function () { return unresolvedJobs.delete(callback); };
+}
+function flushLayout() {
+    if (!unresolvedJobs.size)
+        return;
+    var pointer = 0;
+    var reads = [[]];
+    var writes = [];
+    var setRead = function (job) { return pushJob(reads, job, pointer); };
+    var setWrite = function (job) {
+        pushJob(writes, job, pointer);
+        pointer++;
+    };
+    /**
+     * Resolve jobs into their array stacks
+     */
+    unresolvedJobs.forEach(function (callback) {
+        callback(setRead, setWrite);
+        pointer = 0;
+    });
+    unresolvedJobs.clear();
+    /**
+     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
+     * hover events that might be triggered as a result of resetting transforms.
+     *
+     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
+     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
+     * next frame completely will result in missed, valid hover events. But events seem to
+     * be fired async from their actual action, so setting this to false too soon can still
+     * trigger events from layout measurements.
+     *
+     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
+     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
+     * but neither seem to work as expected.
+     */
+    layoutState.isMeasuringLayout = true;
+    sync.postRender(function () {
+        setTimeout(function () { return (layoutState.isMeasuringLayout = false); }, 10);
+    });
+    /**
+     * Execute jobs
+     */
+    var numStacks = writes.length;
+    for (var i = 0; i <= numStacks; i++) {
+        reads[i] && reads[i].forEach(executeJob);
+        writes[i] && writes[i].forEach(executeJob);
+    }
+}
+var executeJob = function (job) { return job(); };
+
+export { batchLayout, flushLayout, layoutState };
+

package/src/render/dom/utils/camel-to-dash.ts

@@ -0,0 +1,20 @@
+/** 
+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.
+*/
+var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+var REPLACE_TEMPLATE = "$1-$2";
+/**
+ * Convert camelCase to dash-case properties.
+ */
+var camelToDash = function (str: string) {
+    return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+};
+
+export { camelToDash };

package/src/render/dom/utils/create-config.ts

@@ -0,0 +1,33 @@
+
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionComponentConfig } from "../../../motion";
+import type { FeatureComponents } from "../../../motion/features/types";
+import type { HTMLRenderState } from "../../html/types";
+import type { SVGRenderState } from "../../svg/types";
+import type { CreateVisualElement } from "../../types";
+import type { CustomMotionComponentConfig } from "../motion-proxy";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __assign } from 'tslib';
+import { htmlMotionConfig } from '../../html/config-motion.js';
+import { svgMotionConfig } from '../../svg/config-motion.js';
+import { createUseRender } from '../use-render.js';
+import { isSVGComponent } from './is-svg-component.js';
+
+function createDomMotionConfig<Props>(Component: string | React.ComponentType<Props>, { forwardMotionProps }: CustomMotionComponentConfig, preloadedFeatures?: FeatureComponents, createVisualElement?: CreateVisualElement<any>) {
+    var baseConfig = isSVGComponent(Component)
+        ? svgMotionConfig
+        : htmlMotionConfig;
+    return __assign(__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement,
+        Component: Component }) as MotionComponentConfig<SVGElement, SVGRenderState> | MotionComponentConfig<HTMLElement, HTMLRenderState>;
+}
+
+export { createDomMotionConfig };
+

package/src/render/dom/utils/css-variables-conversion.ts

@@ -0,0 +1,121 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Target, TargetWithKeyframes } from "../../../types";
+import type { VisualElement } from "../../types";
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+// export declare const cssVariableRegex: RegExp;
+// export declare function parseCSSVariable(current: string): string[] | undefined[];
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+// export declare function resolveCSSVariables(): ;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __assign, __read } from 'tslib';
+// import { invariant } from '../../../utils/errors.js';
+
+function isCSSVariable(value) {
+    return typeof value === "string" && value.startsWith("var(--");
+}
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+function parseCSSVariable(current: string): string[] | undefined[] {
+    var match = cssVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    var _a = __read(match, 3), token = _a[1], fallback = _a[2];
+    return [token, fallback];
+}
+var maxDepth = 4;
+function getVariableValue(current, element, depth) {
+    if (depth === void 0) { depth = 1; }
+    //invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    var resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        return resolved.trim();
+    }
+    else if (isCSSVariable(fallback)) {
+        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
+        return getVariableValue(fallback, element, depth + 1);
+    }
+    else {
+        return fallback;
+    }
+}
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+function resolveCSSVariables(visualElement: VisualElement, { ...target }: TargetWithKeyframes, transitionEnd: Target | undefined): {
+    target: TargetWithKeyframes;
+    transitionEnd?: Target;
+} {
+    var element = visualElement.getInstance();
+    if (!(element instanceof HTMLElement))
+        return { target: target, transitionEnd: transitionEnd };
+    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
+    // only if they change but I think this reads clearer and this isn't a performance-critical path.
+    if (transitionEnd) {
+        transitionEnd = __assign({}, transitionEnd);
+    }
+    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
+    visualElement.forEachValue(function (value) {
+        var current = value.get();
+        if (!isCSSVariable(current))
+            return;
+        var resolved = getVariableValue(current, element);
+        if (resolved)
+            value.set(resolved);
+    });
+    // Cycle through every target property and resolve CSS variables. Currently
+    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
+    for (var key in target) {
+        var current = target[key];
+        if (!isCSSVariable(current))
+            continue;
+        var resolved = getVariableValue(current, element);
+        if (!resolved)
+            continue;
+        // Clone target if it hasn't already been
+        target[key] = resolved;
+        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
+        // CSS variable. This will ensure that after the animation the component will reflect
+        // changes in the value of the CSS variable.
+        if (transitionEnd)
+            (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
+    }
+    return { target: target, transitionEnd: transitionEnd };
+}
+
+export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };
+

package/src/render/dom/utils/filter-props.ts

@@ -0,0 +1,55 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../../motion/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { isValidMotionProp } from '../../../motion/utils/valid-prop.js';
+
+var shouldForward = function (key) { return !isValidMotionProp(key); };
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(MotionDiv)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
+    shouldForward = function (key) {
+        // Handle events explicitly as Emotion validates them all as true
+        if (key.startsWith("on")) {
+            return !isValidMotionProp(key);
+        }
+        else {
+            return emotionIsPropValid_1(key);
+        }
+    };
+}
+catch (_a) {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean) {
+    var filteredProps = {};
+    for (var key in props) {
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key))) {
+            filteredProps[key] = props[key];
+        }
+    }
+    return filteredProps;
+}
+
+export { filterProps };

package/src/render/dom/utils/is-css-variable.ts

@@ -0,0 +1,18 @@
+/** 
+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.
+*/
+/**
+ * Returns true if the provided key is a CSS variable
+ */
+function isCSSVariable(key: string) {
+    return key.startsWith("--");
+}
+
+export { isCSSVariable };