motion-start 0.0.1

package/src/motion/Motion.svelte

@@ -0,0 +1,246 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext, onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+  import {
+    MotionConfigContext,
+    type MotionConfigContextObject,
+  } from "../context/MotionConfigContext";
+  import MotionContextProvider from "../context/MotionContext/MotionContextProvider.svelte";
+  import { UseCreateMotionContext } from "../context/MotionContext/create";
+  import ScaleCorrectionProvider from "../context/ScaleCorrectionProvider.svelte";
+  import { createDomVisualElement } from "../render/dom/create-visual-element.js";
+  import { UseRender } from "../render/dom/use-render.js";
+  import { htmlMotionConfig } from "../render/html/config-motion.js";
+  import { svgMotionConfig } from "../render/svg/config-motion.js";
+  import { UseFeatures } from "./features/use-features";
+  import type { MotionProps } from "./index.js";
+  import { useMotionRef } from "./utils/use-motion-ref.js";
+  import { UseVisualElement } from "./utils/use-visual-element";
+  import { UseVisualState } from "./utils/use-visual-state.js";
+
+  type $$Props = MotionProps & {
+    isSVG?: boolean;
+    update?: any;
+    forwardMotionProps?: boolean;
+    externalRef?: any;
+    targetEl?: any;
+  };
+
+  // component props
+  export let initial: $$Props["initial"] = undefined,
+    style: $$Props["style"] = undefined,
+    transformTemplate: $$Props["transformTemplate"] = undefined,
+    transformValues = undefined,
+    //AnimationProps
+    animate: $$Props["animate"] = undefined,
+    exit: $$Props["exit"] = undefined,
+    variants: $$Props["variants"] = undefined,
+    transition: $$Props["transition"] = undefined,
+    //VisualElementLifecycles
+    onViewportBoxUpdate: $$Props["onViewportBoxUpdate"] = undefined,
+    onBeforeLayoutMeasure: $$Props["onBeforeLayoutMeasure"] = undefined,
+    onLayoutMeasure: $$Props["onLayoutMeasure"] = undefined,
+    onUpdate: $$Props["onUpdate"] = undefined,
+    onAnimationStart: $$Props["onAnimationStart"] = undefined,
+    onAnimationComplete: $$Props["onAnimationComplete"] = undefined,
+    onLayoutAnimationComplete: $$Props["onLayoutAnimationComplete"] = undefined,
+    //GestureHandlers
+    // PanHandlers
+    onPan: $$Props["onPan"] = undefined,
+    onPanStart: $$Props["onPanStart"] = undefined,
+    onPanSessionStart: $$Props["onPanSessionStart"] = undefined,
+    onPanEnd: $$Props["onPanEnd"] = undefined,
+    // TapHandlers
+    onTap: $$Props["onTap"] = undefined,
+    onTapStart: $$Props["onTapStart"] = undefined,
+    onTapCancel: $$Props["onTapCancel"] = undefined,
+    whileTap: $$Props["whileTap"] = undefined,
+    //HoverHandlers
+    whileHover: $$Props["whileHover"] = undefined,
+    onHoverStart: $$Props["onHoverStart"] = undefined,
+    onHoverEnd: $$Props["onHoverEnd"] = undefined,
+    //FocusHandlers
+    whileFocus: $$Props["whileFocus"] = undefined,
+    //DraggableProps
+    drag: $$Props["drag"] = undefined,
+    whileDrag: $$Props["whileDrag"] = undefined,
+    dragDirectionLock: $$Props["dragDirectionLock"] = undefined,
+    dragPropagation: $$Props["dragPropagation"] = undefined,
+    dragConstraints: $$Props["dragConstraints"] = undefined,
+    dragElastic: $$Props["dragElastic"] = undefined,
+    dragMomentum: $$Props["dragMomentum"] = undefined,
+    dragTransition: $$Props["dragTransition"] = undefined,
+    dragControls: $$Props["dragControls"] = undefined,
+    dragListener: $$Props["dragListener"] = undefined,
+    onMeasureDragConstraints: $$Props["onMeasureDragConstraints"] = undefined,
+    _dragX: $$Props["_dragX"] = undefined,
+    _dragY: $$Props["_dragY"] = undefined,
+    //DragHandlers
+    onDragStart: $$Props["onDragStart"] = undefined,
+    onDragEnd: $$Props["onDragEnd"] = undefined,
+    onDrag: $$Props["onDrag"] = undefined,
+    onDirectionLock: $$Props["onDirectionLock"] = undefined,
+    onDragTransitionEnd: $$Props["onDragTransitionEnd"] = undefined,
+    // LayoutProps
+    layout: $$Props["layout"] = undefined,
+    layoutId: $$Props["layoutId"] = undefined,
+    //MotionAdvancedProps
+    custom: $$Props["custom"] = undefined,
+    inherit: $$Props["inherit"] = undefined,
+    // **internal***
+    isSVG: $$Props["isSVG"] = false,
+    update: $$Props["update"] = undefined,
+    forwardMotionProps: $$Props["forwardMotionProps"] = false,
+    externalRef: $$Props["externalRef"] = undefined,
+    targetEl: $$Props["targetEl"] = undefined;
+
+  $: motionProps = $$restProps; /*{
+        initial,
+        style,
+        transformTemplate,
+        transformValues,
+        //AnimationProps
+        animate,
+        exit,
+        variants,
+        transition,
+        //VisualElementLifecycles
+        onViewportBoxUpdate,
+        onBeforeLayoutMeasure,
+        onLayoutMeasure,
+        onUpdate,
+        onAnimationStart,
+        onAnimationComplete,
+        onLayoutAnimationComplete,
+        //GestureHandlers
+        // PanHandlers
+        onPan,
+        onPanStart,
+        onPanSessionStart,
+        onPanEnd,
+        // TapHandlers
+        onTap,
+        onTapStart,
+        onTapCancel,
+        whileTap,
+        //HoverHandlers
+        whileHover,
+        onHoverStart,
+        onHoverEnd,
+        //FocusHandlers
+        whileFocus,
+        //DraggableProps
+        drag,
+        whileDrag,
+        dragDirectionLock,
+        dragPropagation,
+        dragConstraints,
+        dragElastic,
+        dragMomentum,
+        dragTransition,
+        dragControls,
+        dragListener,
+        onMeasureDragConstraints,
+        _dragX,
+        _dragY,
+        //DragHandlers
+        onDragStart,
+        onDragEnd,
+        onDrag,
+        onDirectionLock,
+        onDragTransitionEnd,
+        // LayoutProps
+        layout,
+        layoutId,
+        //MotionAdvancedProps
+        custom,
+        inherit,
+        ...(isSVG ? $$restProps : {}),
+    };*/
+  const isCustom = targetEl;
+  let Component = isSVG ? "SVG" : "DOM";
+  let createVisualElement = createDomVisualElement;
+  let visualStateConfig = isSVG ? svgMotionConfig : htmlMotionConfig;
+
+  /**
+   * If a component is static, we only visually update it as a
+   * result of a React re-render, rather than any interactions or animations.
+   * If this component or any ancestor is static, we disable hardware acceleration
+   * and don't load any additional functionality.
+   */
+  const a: Writable<MotionConfigContextObject> =
+    getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+  $: ({ isStatic } = $a || {});
+
+  let mounted = false;
+  const setContext = (c, v) => {
+    c.visualElement = v;
+    return v;
+  };
+  onMount(() => (mounted = true));
+</script>
+
+<ScaleCorrectionProvider {isCustom}>
+  <UseCreateMotionContext
+    props={motionProps}
+    {isStatic}
+    let:value={context}
+    {isCustom}
+  >
+    <UseVisualState
+      config={visualStateConfig}
+      props={motionProps}
+      {isStatic}
+      {isCustom}
+      let:state={visualState}
+    >
+      <UseVisualElement
+        {Component}
+        {visualState}
+        {createVisualElement}
+        props={motionProps}
+        {isCustom}
+        let:visualElement
+      >
+        <UseFeatures
+          visualElement={setContext(context, visualElement)}
+          props={motionProps}
+          let:features={_features}
+        >
+          <MotionContextProvider value={context} {isCustom}>
+            <UseRender
+              {Component}
+              props={motionProps}
+              ref={useMotionRef(
+                visualState,
+                context.visualElement,
+                externalRef
+              )}
+              {visualState}
+              {isStatic}
+              {forwardMotionProps}
+              let:motion
+              let:props={renderProps}
+            >
+              <slot {motion} props={renderProps} />
+            </UseRender>
+          </MotionContextProvider>
+
+          {#if mounted}
+            {#each _features as feat (feat.key)}
+              <svelte:component
+                this={feat.Component}
+                props={feat.props}
+                visualElement={feat.visualElement}
+                {isCustom}
+              />
+            {/each}
+          {/if}
+        </UseFeatures>
+      </UseVisualElement>
+    </UseVisualState>
+  </UseCreateMotionContext>
+</ScaleCorrectionProvider>

package/src/motion/MotionSSR.svelte

@@ -0,0 +1,244 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+    import type { MotionProps } from "./index.js";
+    import { MotionConfigContext, type MotionConfigContextObject } from "../context/MotionConfigContext";
+    import { UseVisualElement } from "./utils/use-visual-element";
+    import { UseFeatures } from "./features/use-features";
+    import MotionContextProvider from "../context/MotionContext/MotionContextProvider.svelte";
+    import { getContext, onMount } from "svelte";
+    import { UseRender } from "../render/dom/use-render.js";
+    import { createDomVisualElement } from "../render/dom/create-visual-element.js";
+    import { svgMotionConfig } from "../render/svg/config-motion.js";
+    import { htmlMotionConfig } from "../render/html/config-motion.js";
+    import { UseCreateMotionContext } from "../context/MotionContext/create";
+    import { UseVisualState } from "./utils/use-visual-state.js";
+    import { useMotionRef } from "./utils/use-motion-ref.js";
+    import ScaleCorrectionProvider from "../context/ScaleCorrectionProvider.svelte";
+    import { featureBundle } from "../render/dom/featureBundle.js";
+    import { loadFeatures } from "./features/definitions";
+    import type { Writable } from "svelte/store";
+    import type { VisualElement } from "../index.js";
+
+    type $$Props = MotionProps;
+
+    // component props
+    export let initial: $$Props['initial'] = undefined,
+        style: $$Props['style'] = undefined,
+        transformTemplate: $$Props['transformTemplate'] = undefined,
+        transformValues = undefined,
+        //AnimationProps
+        animate: $$Props['animate'] = undefined,
+        exit: $$Props['exit'] = undefined,
+        variants: $$Props['variants'] = undefined,
+        transition: $$Props['transition'] = undefined,
+        //VisualElementLifecycles
+        onViewportBoxUpdate: $$Props['onViewportBoxUpdate'] = undefined,
+        onBeforeLayoutMeasure: $$Props['onBeforeLayoutMeasure'] = undefined,
+        onLayoutMeasure: $$Props['onLayoutMeasure'] = undefined,
+        onUpdate: $$Props['onUpdate'] = undefined,
+        onAnimationStart: $$Props['onAnimationStart'] = undefined,
+        onAnimationComplete: $$Props['onAnimationComplete'] = undefined,
+        onLayoutAnimationComplete: $$Props['onLayoutAnimationComplete'] = undefined,
+        //GestureHandlers
+        // PanHandlers
+        onPan: $$Props['onPan'] = undefined,
+        onPanStart: $$Props['onPanStart'] = undefined,
+        onPanSessionStart: $$Props['onPanSessionStart'] = undefined,
+        onPanEnd: $$Props['onPanEnd'] = undefined,
+        // TapHandlers
+        onTap: $$Props['onTap'] = undefined,
+        onTapStart: $$Props['onTapStart'] = undefined,
+        onTapCancel: $$Props['onTapCancel'] = undefined,
+        whileTap: $$Props['whileTap'] = undefined,
+        //HoverHandlers
+        whileHover: $$Props['whileHover'] = undefined,
+        onHoverStart: $$Props['onHoverStart'] = undefined,
+        onHoverEnd: $$Props['onHoverEnd'] = undefined,
+        //FocusHandlers
+        whileFocus: $$Props['whileFocus'] = undefined,
+        //DraggableProps
+        drag: $$Props['drag'] = undefined,
+        whileDrag: $$Props['whileDrag']  = undefined,
+        dragDirectionLock: $$Props['dragDirectionLock'] = undefined,
+        dragPropagation: $$Props['dragPropagation'] = undefined,
+        dragConstraints: $$Props['dragConstraints'] = undefined,
+        dragElastic: $$Props['dragElastic'] = undefined,
+        dragMomentum: $$Props['dragMomentum'] = undefined,
+        dragTransition: $$Props['dragTransition'] = undefined,
+        dragControls: $$Props['dragControls'] = undefined,
+        dragListener: $$Props['dragListener'] = undefined,
+        onMeasureDragConstraints: $$Props['onMeasureDragConstraints'] = undefined,
+        _dragX: $$Props['_dragX'] = undefined,
+        _dragY: $$Props['_dragY'] = undefined,
+        //DragHandlers
+        onDragStart: $$Props['onDragStart'] = undefined,
+        onDragEnd: $$Props['onDragEnd'] = undefined,
+        onDrag: $$Props['onDrag'] = undefined,
+        onDirectionLock: $$Props['onDirectionLock'] = undefined,
+        onDragTransitionEnd: $$Props['onDragTransitionEnd'] = undefined,
+        // LayoutProps
+        layout: $$Props['layout'] = undefined,
+        layoutId: $$Props['layoutId'] = undefined,
+        //MotionAdvancedProps
+        custom: $$Props['custom'] = undefined,
+        inherit: $$Props['inherit'] = undefined,
+
+        // **internal***
+        isSVG = false,
+        update = undefined,
+        forwardMotionProps = false,
+        externalRef = undefined,
+        targetEl = undefined;
+    
+    $: motionProps = $$restProps; /*{
+        initial,
+        style,
+        transformTemplate,
+        transformValues,
+        //AnimationProps
+        animate,
+        exit,
+        variants,
+        transition,
+        //VisualElementLifecycles
+        onViewportBoxUpdate,
+        onBeforeLayoutMeasure,
+        onLayoutMeasure,
+        onUpdate,
+        onAnimationStart,
+        onAnimationComplete,
+        onLayoutAnimationComplete,
+        //GestureHandlers
+        // PanHandlers
+        onPan,
+        onPanStart,
+        onPanSessionStart,
+        onPanEnd,
+        // TapHandlers
+        onTap,
+        onTapStart,
+        onTapCancel,
+        whileTap,
+        //HoverHandlers
+        whileHover,
+        onHoverStart,
+        onHoverEnd,
+        //FocusHandlers
+        whileFocus,
+        //DraggableProps
+        drag,
+        whileDrag,
+        dragDirectionLock,
+        dragPropagation,
+        dragConstraints,
+        dragElastic,
+        dragMomentum,
+        dragTransition,
+        dragControls,
+        dragListener,
+        onMeasureDragConstraints,
+        _dragX,
+        _dragY,
+        //DragHandlers
+        onDragStart,
+        onDragEnd,
+        onDrag,
+        onDirectionLock,
+        onDragTransitionEnd,
+        // LayoutProps
+        layout,
+        layoutId,
+        //MotionAdvancedProps
+        custom,
+        inherit,
+        ...(isSVG ? $$restProps : {}),
+    };*/
+    //$: (allProps = {...motionProps,$$restProps});
+
+    // The SSR component needs to load this here
+    loadFeatures(featureBundle);
+
+    let Component = isSVG ? "SVG" : "DOM";
+    let isCustom = targetEl || false;
+    let createVisualElement = createDomVisualElement;
+    let visualStateConfig = isSVG ? svgMotionConfig : htmlMotionConfig;
+
+    /**
+     * If a component is static, we only visually update it as a
+     * result of a React re-render, rather than any interactions or animations.
+     * If this component or any ancestor is static, we disable hardware acceleration
+     * and don't load any additional functionality.
+     */
+    const a: Writable<MotionConfigContextObject> = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+
+    $: ({ isStatic } = $a || {});
+    let mounted = false;
+    const setContext = (c: any, v: VisualElement<any, any>) => {
+        c.visualElement = v;
+        return v;
+    };
+
+    onMount(() => {
+        mounted = true;
+    });
+</script>
+
+<ScaleCorrectionProvider {isCustom}>
+    <UseCreateMotionContext props={motionProps} {isStatic} let:value={context}>
+        <UseVisualState
+            config={visualStateConfig}
+            props={motionProps}
+            {isStatic}
+            {isCustom}
+            let:state={visualState}
+        >
+            <UseVisualElement
+                {Component}
+                {visualState}
+                {createVisualElement}
+                props={motionProps}
+                {isCustom}
+                let:visualElement
+            >
+                <UseFeatures
+                    visualElement={setContext(context, visualElement)}
+                    props={motionProps}
+                    let:features={_features}
+                >
+                    <MotionContextProvider value={context} {isCustom}>
+                        <UseRender
+                            {Component}
+                            props={motionProps}
+                            ref={useMotionRef(
+                                visualState,
+                                context.visualElement,
+                                externalRef
+                            )}
+                            {visualState}
+                            {isStatic}
+                            {forwardMotionProps}
+                            let:motion
+                            let:props={renderProps}
+                            {targetEl}
+                        >
+                            <slot {motion} props={renderProps} />
+                        </UseRender>
+                    </MotionContextProvider>
+
+                    {#if mounted}
+                        {#each _features as feat (feat.key)}
+                            <svelte:component
+                                this={feat.Component}
+                                props={feat.props}
+                                visualElement={feat.visualElement}
+                                {isCustom}
+                            />
+                        {/each}
+                    {/if}
+                </UseFeatures>
+            </UseVisualElement>
+        </UseVisualState>
+    </UseCreateMotionContext>
+</ScaleCorrectionProvider>

package/src/motion/features/AnimationState.svelte

@@ -0,0 +1,29 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { tick } from "svelte";
+
+  import { isAnimationControls } from "../../animation/utils/is-animation-controls.js";
+  import { createAnimationState } from "../../render/utils/animation-state.js";
+  export let visualElement, props;
+
+  let { animate } = props;
+  $: ({ animate } = props);
+  /**
+   * We dynamically generate the AnimationState manager as it contains a reference
+   * to the underlying animation library. We only want to load that if we load this,
+   * so people can optionally code split it out using the `m` component.
+   */
+  $: {
+    visualElement.animationState =
+      visualElement.animationState || createAnimationState(visualElement);
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+
+  $: if (isAnimationControls(animate)) {
+    tick().then(() => animate.subscribe(visualElement) /*, [animate]*/);
+  }
+</script>

package/src/motion/features/Exit.svelte

@@ -0,0 +1,32 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { usePresence } from "../../components/AnimatePresence/use-presence.js";
+  import { PresenceContext } from "../../context/PresenceContext.js";
+  import { AnimationType } from "../../render/utils/types.js";
+
+  export let props, visualElement, isCustom;
+  $: ({ custom } = props);
+
+  const presenceContext =
+    getContext(PresenceContext) || PresenceContext(isCustom);
+  const presence = usePresence(isCustom);
+
+  const effect = (pres) => {
+    const [isPresent, onExitComplete] = pres;
+
+    const animation = visualElement.animationState?.setActive(
+      AnimationType.Exit,
+      !isPresent,
+      { custom: $presenceContext?.custom ?? custom }
+    );
+
+    !isPresent && animation?.then(onExitComplete);
+    return "";
+  };
+  $: effect($presence);
+</script>
+
+<slot />

package/src/motion/features/UseFeatures.svelte

@@ -0,0 +1,39 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { featureDefinitions } from "./definitions";
+  const featureNames = Object.keys(featureDefinitions);
+  const numFeatures = featureNames.length;
+  export let visualElement, props;
+
+  let features = [];
+
+  // If this is a static component, or we're rendering on the server, we don't load
+  // any feature components
+  // Decide which features we should render and add them to the returned array
+  $: {
+    features = [];
+    for (let i = 0; i < numFeatures; i++) {
+      const name = featureNames[i];
+      const { isEnabled, Component } = featureDefinitions[name];
+      /**
+       * It might be possible in the future to use this moment to
+       * dynamically request functionality. In initial tests this
+       * was producing a lot of duplication amongst bundles.
+       */
+      if (isEnabled(props) && Component) {
+        features.push({
+          Component: Component,
+          key: name,
+          props,
+          visualElement,
+        });
+      }
+    }
+  }
+</script>
+
+{#if visualElement}
+  <slot {features} />
+{/if}

package/src/motion/features/animations.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureComponents } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import AnimationState from './AnimationState.svelte';
+import Exit from './Exit.svelte';
+/**
+ * @public
+ */
+const animations = {
+    animation: AnimationState,
+    exit:Exit
+} satisfies FeatureComponents
+export { animations };

package/src/motion/features/definitions.ts

@@ -0,0 +1,49 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureComponents, FeatureDefinitions } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+var createDefinition = function (propNames) { return ({
+    isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
+}); };
+var featureDefinitions = {
+    measureLayout: createDefinition(["layout", "layoutId", "drag"]),
+    animation: createDefinition([
+        "animate",
+        "exit",
+        "variants",
+        "whileHover",
+        "whileTap",
+        "whileFocus",
+        "whileDrag",
+    ]),
+    exit: createDefinition(["exit"]),
+    drag: createDefinition(["drag", "dragControls"]),
+    focus: createDefinition(["whileFocus"]),
+    hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
+    tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
+    pan: createDefinition([
+        "onPan",
+        "onPanStart",
+        "onPanSessionStart",
+        "onPanEnd",
+    ]),
+    layoutAnimation: createDefinition(["layout", "layoutId"]),
+} satisfies FeatureDefinitions;
+function loadFeatures(features: FeatureComponents): void {
+    for (var key in features) {
+        var Component = (features as any)[key];
+        if (Component !== null){
+            (featureDefinitions as any)[key].Component = Component;
+        }
+    }
+}
+
+export { featureDefinitions, loadFeatures };

package/src/motion/features/drag.ts

@@ -0,0 +1,24 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureComponents } from "./types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { UsePanGesture } from '../../gestures/use-pan-gesture.js';
+import { UseDrag } from '../../gestures/drag/use-drag.js';
+
+/**
+ * @public
+ */
+const drag = {
+    pan: UsePanGesture,
+    drag: UseDrag
+} satisfies FeatureComponents
+
+export { drag };