motion-start 0.0.1

package/src/render/html/UseInitialMotionValues.svelte

@@ -0,0 +1,27 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { buildHTMLStyles } from "./utils/build-styles.js";
+
+  import { createHtmlRenderState } from "./utils/create-render-state.js";
+  export let visualState, isStatic, props;
+  const memo = () => {
+    let state = createHtmlRenderState();
+
+    buildHTMLStyles(
+      state,
+      visualState,
+      undefined,
+      undefined,
+      { enableHardwareAcceleration: !isStatic },
+      props.transformTemplate
+    );
+
+    const { vars, style } = state;
+    return { ...vars, ...style };
+  };
+  $: styles = memo(visualState);
+</script>
+
+<slot {styles} />

package/src/render/html/UseStyle.svelte

@@ -0,0 +1,47 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" module>
+  export function copyRawValuesOnly(
+    target: ResolvedValues,
+    source: {
+      [key: string]: string | number | MotionValue;
+    },
+    props: MotionProps
+  ) {
+    for (const key in source) {
+      if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+        target[key] = source[key];
+      }
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { MotionProps, MotionValue } from "../../index.js";
+  import { isForcedMotionValue } from "../../motion/utils/is-forced-motion-value.js";
+  import { isMotionValue } from "../../value/utils/is-motion-value.js";
+  import type { ResolvedValues } from "../types.js";
+  import UseInitialMotionValues from "./UseInitialMotionValues.svelte";
+  export let visualState, props, isStatic;
+  $: styleProp = props.style || {};
+  let style = {};
+  /**
+   * Copy non-Motion Values straight into style
+   */
+  const cRVO = copyRawValuesOnly;
+  $: cRVO(style, styleProp, props);
+
+  const toStyle = (s1) => {
+    Object.assign(style, s1);
+    if (props.transformValues) {
+      style = props.transformValues(style);
+    }
+
+    return style;
+  };
+</script>
+
+<UseInitialMotionValues {props} {visualState} {isStatic} let:styles={s1}>
+  <slot styles={toStyle({ s1, props, style })} />
+</UseInitialMotionValues>

package/src/render/html/config-motion.ts

@@ -0,0 +1,23 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionComponentConfig } from "../../motion";
+import type { HTMLRenderState } from "./types";
+// export declare const htmlMotionConfig: ;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { createHtmlRenderState } from './utils/create-render-state.js';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
+
+var htmlMotionConfig = {
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        createRenderState: createHtmlRenderState,   
+} satisfies Partial<MotionComponentConfig<HTMLElement, HTMLRenderState>>;
+
+export { htmlMotionConfig };
+

package/src/render/html/supported-elements.ts

@@ -0,0 +1,10 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+type UnionStringArray<T extends Readonly<string[]>> = T[number];
+/**
+ * @internal
+ */
+export const htmlElements = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"] as const;
+export type HTMLElements = UnionStringArray<typeof htmlElements>;

package/src/render/html/types.ts

@@ -0,0 +1,64 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes } from "react";
+import type { MotionProps } from "../../motion/types";
+import type { ResolvedValues } from "../types";
+import type { HTMLElements } from "./supported-elements";
+export interface TransformOrigin {
+    originX?: number | string;
+    originY?: number | string;
+    originZ?: number | string;
+}
+export interface HTMLRenderState {
+    /**
+     * A mutable record of transforms we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    transform: ResolvedValues;
+    /**
+     * A mutable record of transform keys we want to apply to the rendered Element. We order
+     * this to order transforms in the desired order. We use a mutable data structure to reduce GC during animations.
+     */
+    transformKeys: string[];
+    /**
+     * A mutable record of transform origins we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    transformOrigin: TransformOrigin;
+    /**
+     * A mutable record of styles we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    style: ResolvedValues;
+    /**
+     * A mutable record of CSS variables we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    vars: ResolvedValues;
+}
+/**
+ * @public
+ */
+export type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+/**
+ * Support for React component props
+ */
+type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
+type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
+type HTMLAttributesWithoutMotionProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
+    [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
+};
+/**
+ * @public
+ */
+export type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
+/**
+ * Motion-optimised versions of React's HTML components.
+ *
+ * @public
+ */
+export type HTMLMotionComponents = {
+    [K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, HTMLMotionProps<K>>;
+};

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

@@ -0,0 +1,14 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion/types";
+import type { ResolvedValues } from "../types";
+
+export type useStyle = (props: MotionProps, visualState: ResolvedValues, isStatic: boolean) => ResolvedValues;
+export type useHTMLProps = (props: MotionProps, visualState: ResolvedValues, isStatic: boolean) => any;
+
+
+export { default as UseHTMLProps } from './UseHTMLProps.svelte';
+export { default as UseStyle, copyRawValuesOnly } from './UseStyle.svelte';
+

package/src/render/html/utils/build-projection-transform.ts

@@ -0,0 +1,53 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { BoxDelta, Point2D } from "../../../types/geometry";
+import type { ResolvedValues } from "../../types";
+import type { LayoutState } from "../../utils/state";
+export type BuildProjectionTransform = (box: BoxDelta, treeScale: Point2D, transform?: ResolvedValues) => string;
+export type BuildProjectionTransformOrigin = (layout: LayoutState) => string;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { zeroLayout } from '../../utils/state.js';
+
+/**
+ * Build a transform style that takes a calculated delta between the element's current
+ * space on screen and projects it into the desired space.
+ */
+function buildLayoutProjectionTransform({ x, y }: BoxDelta, treeScale: Point2D, latestTransform?: ResolvedValues): string {
+    /**
+     * The translations we use to calculate are always relative to the viewport coordinate space.
+     * But when we apply scales, we also scale the coordinate space of an element and its children.
+     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
+     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
+     */
+    var xTranslate = x.translate / treeScale.x;
+    var yTranslate = y.translate / treeScale.y;
+    var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+    if (latestTransform) {
+        var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
+        if (rotate)
+            transform += "rotate(" + rotate + ") ";
+        if (rotateX)
+            transform += "rotateX(" + rotateX + ") ";
+        if (rotateY)
+            transform += "rotateY(" + rotateY + ") ";
+    }
+    transform += "scale(" + x.scale + ", " + y.scale + ")";
+    return !latestTransform && transform === identityProjection ? "" : transform;
+}
+/**
+ * Take the calculated delta origin and apply it as a transform string.
+ */
+function buildLayoutProjectionTransformOrigin({ deltaFinal, }: LayoutState) {
+    return deltaFinal.x.origin * 100 + "% " + deltaFinal.y.origin * 100 + "% 0";
+}
+var identityProjection = buildLayoutProjectionTransform(zeroLayout.delta, zeroLayout.treeScale, { x: 1, y: 1 });
+
+export { buildLayoutProjectionTransform, buildLayoutProjectionTransformOrigin, identityProjection };
+

package/src/render/html/utils/build-styles.ts

@@ -0,0 +1,121 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../../motion/types";
+import type { HTMLRenderState } from "../types";
+import type { ResolvedValues } from "../../types";
+import type { LayoutState, TargetProjection } from "../../utils/state";
+import type { DOMVisualElementOptions } from "../../dom/types";
+import type { BuildProjectionTransform, BuildProjectionTransformOrigin } from "./build-projection-transform";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { valueScaleCorrection } from '../../dom/projection/scale-correction.js';
+import { buildTransform, buildTransformOrigin } from './build-transform.js';
+import { isCSSVariable } from '../../dom/utils/is-css-variable.js';
+import { isTransformProp, isTransformOriginProp } from './transform.js';
+import { getValueAsType } from '../../dom/value-types/get-as-type.js';
+import { numberValueTypes } from '../../dom/value-types/number.js';
+
+function buildHTMLStyles(state: HTMLRenderState, latestValues: ResolvedValues, projection: TargetProjection | undefined, layoutState: LayoutState | undefined, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"], buildProjectionTransform?: BuildProjectionTransform, buildProjectionTransformOrigin?: BuildProjectionTransformOrigin) {
+    var _a;
+    var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;
+    // Empty the transformKeys array. As we're throwing out refs to its items
+    // this might not be as cheap as suspected. Maybe using the array as a buffer
+    // with a manual incrementation would be better.
+    transformKeys.length = 0;
+    // Track whether we encounter any transform or transformOrigin values.
+    var hasTransform = false;
+    var hasTransformOrigin = false;
+    // Does the calculated transform essentially equal "none"?
+    var transformIsNone = true;
+    /**
+     * Loop over all our latest animated values and decide whether to handle them
+     * as a style or CSS variable.
+     *
+     * Transforms and transform origins are kept seperately for further processing.
+     */
+    for (var key in latestValues) {
+        var value = latestValues[key];
+        /**
+         * If this is a CSS variable we don't do any further processing.
+         */
+        if (isCSSVariable(key)) {
+            vars[key] = value;
+            continue;
+        }
+        // Convert the value to its default value type, ie 0 -> "0px"
+        var valueType = numberValueTypes[key];
+        var valueAsType = getValueAsType(value, valueType);
+        if (isTransformProp(key)) {
+            // If this is a transform, flag to enable further transform processing
+            hasTransform = true;
+            transform[key] = valueAsType;
+            transformKeys.push(key);
+            // If we already know we have a non-default transform, early return
+            if (!transformIsNone)
+                continue;
+            // Otherwise check to see if this is a default transform
+            if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))
+                transformIsNone = false;
+        }
+        else if (isTransformOriginProp(key)) {
+            transformOrigin[key] = valueAsType;
+            // If this is a transform origin, flag and enable further transform-origin processing
+            hasTransformOrigin = true;
+        }
+        else {
+            /**
+             * If layout projection is on, and we need to perform scale correction for this
+             * value type, perform it.
+             */
+            if (layoutState &&
+                projection &&
+                layoutState.isHydrated &&
+                valueScaleCorrection[key]) {
+                var correctedValue = valueScaleCorrection[key].process(value, layoutState, projection);
+                /**
+                 * Scale-correctable values can define a number of other values to break
+                 * down into. For instance borderRadius needs applying to borderBottomLeftRadius etc
+                 */
+                var applyTo = valueScaleCorrection[key].applyTo;
+                if (applyTo) {
+                    var num = applyTo.length;
+                    for (var i = 0; i < num; i++) {
+                        style[applyTo[i]] = correctedValue;
+                    }
+                }
+                else {
+                    style[key] = correctedValue;
+                }
+            }
+            else {
+                style[key] = valueAsType;
+            }
+        }
+    }
+    if (layoutState &&
+        projection &&
+        buildProjectionTransform &&
+        buildProjectionTransformOrigin) {
+        style.transform = buildProjectionTransform(layoutState.deltaFinal, layoutState.treeScale, hasTransform ? transform : undefined);
+        if (transformTemplate) {
+            style.transform = transformTemplate(transform, style.transform);
+        }
+        style.transformOrigin = buildProjectionTransformOrigin(layoutState);
+    }
+    else {
+        if (hasTransform) {
+            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+        }
+        if (hasTransformOrigin) {
+            style.transformOrigin = buildTransformOrigin(transformOrigin);
+        }
+    }
+}
+
+export { buildHTMLStyles };

package/src/render/html/utils/build-transform.ts

@@ -0,0 +1,79 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { DOMVisualElementOptions } from "../../dom/types";
+import type { MotionProps } from "../../../motion/types";
+import type { HTMLRenderState, TransformOrigin } from "../types";
+/**
+ * Build a CSS transform style from individual x/y/scale etc properties.
+ *
+ * This outputs with a default order of transforms/scales/rotations, this can be customised by
+ * providing a transformTemplate function.
+ */
+// export declare function buildTransform(): string;
+/**
+ * Build a transformOrigin style. Uses the same defaults as the browser for
+ * undefined origins.
+ */
+// export declare function buildTransformOrigin(): string;
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { sortTransformProps } from './transform.js';
+
+var translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+/**
+ * Build a CSS transform style from individual x/y/scale etc properties.
+ *
+ * This outputs with a default order of transforms/scales/rotations, this can be customised by
+ * providing a transformTemplate function.
+ */
+function buildTransform({ transform, transformKeys }: HTMLRenderState, { enableHardwareAcceleration, allowTransformNone, }: DOMVisualElementOptions, transformIsDefault: boolean, transformTemplate?: MotionProps["transformTemplate"]) {
+    // The transform string we're going to build into.
+    var transformString = "";
+    // Transform keys into their default order - this will determine the output order.
+    transformKeys.sort(sortTransformProps);
+    // Track whether the defined transform has a defined z so we don't add a
+    // second to enable hardware acceleration
+    var transformHasZ = false;
+    // Loop over each transform and build them into transformString
+    var numTransformKeys = transformKeys.length;
+    for (var i = 0; i < numTransformKeys; i++) {
+        var key = transformKeys[i];
+        transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+        if (key === "z")
+            transformHasZ = true;
+    }
+    if (!transformHasZ && enableHardwareAcceleration) {
+        transformString += "translateZ(0)";
+    }
+    else {
+        transformString = transformString.trim();
+    }
+    // If we have a custom `transform` template, pass our transform values and
+    // generated transformString to that before returning
+    if (transformTemplate) {
+        transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
+    }
+    else if (allowTransformNone && transformIsDefault) {
+        transformString = "none";
+    }
+    return transformString;
+}
+/**
+ * Build a transformOrigin style. Uses the same defaults as the browser for
+ * undefined origins.
+ */
+function buildTransformOrigin({ originX = "50%", originY = "50%", originZ = 0, }: TransformOrigin) {
+    return originX + " " + originY + " " + originZ;
+}
+
+export { buildTransform, buildTransformOrigin };

package/src/render/html/utils/create-render-state.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.
+*/
+var createHtmlRenderState = function () { return ({
+    style: {},
+    transform: {},
+    transformKeys: [],
+    transformOrigin: {},
+    vars: {},
+}); };
+
+export { createHtmlRenderState };

package/src/render/html/utils/render.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { HTMLRenderState } from "../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+function renderHTML (element: HTMLElement, { style, vars }: HTMLRenderState) {
+    // Directly assign style into the Element's style prop. In tests Object.assign is the
+    // fastest way to assign styles.
+    Object.assign(element.style, style);
+    // Loop over any CSS variables and assign those.
+    for (var key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
+export { renderHTML };

package/src/render/html/utils/scrape-motion-values.ts

@@ -0,0 +1,26 @@
+/** 
+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 { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.js';
+import { isMotionValue } from '../../../value/utils/is-motion-value.js';
+
+function scrapeMotionValuesFromProps(props: MotionProps) {
+    var style = props.style;
+    var newValues = {};
+    for (var key in style) {
+        if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
+            newValues[key] = style[key];
+        }
+    }
+    return newValues;
+}
+
+export { scrapeMotionValuesFromProps };

package/src/render/html/utils/transform.ts

@@ -0,0 +1,51 @@
+/** 
+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.
+*/
+
+/**
+ * A list of all transformable axes. We'll use this list to generated a version
+ * of each axes for each transform.
+ */
+var transformAxes = ["", "X", "Y", "Z"];
+/**
+ * An ordered array of each transformable value. By default, transform values
+ * will be sorted to this order.
+ */
+var order = ["translate", "scale", "rotate", "skew"];
+/**
+ * Generate a list of every possible transform key.
+ */
+var transformProps = ["transformPerspective", "x", "y", "z"];
+order.forEach(function (operationKey) {
+    return transformAxes.forEach(function (axesKey) {
+        return transformProps.push(operationKey + axesKey);
+    });
+});
+/**
+ * A function to use with Array.sort to sort transform keys by their default order.
+ */
+function sortTransformProps(a: string, b: string) {
+    return transformProps.indexOf(a) - transformProps.indexOf(b);
+}
+/**
+ * A quick lookup for transform props.
+ */
+var transformPropSet = new Set(transformProps);
+function isTransformProp(key: string) {
+    return transformPropSet.has(key);
+}
+/**
+ * A quick lookup for transform origin props
+ */
+var transformOriginProps = new Set(["originX", "originY", "originZ"]);
+function isTransformOriginProp(key: string) {
+    return transformOriginProps.has(key);
+}
+
+export { isTransformOriginProp, isTransformProp, sortTransformProps, transformAxes, transformProps };