motion-start 0.0.1

package/src/components/MotionConfig/MotionConfig.svelte

@@ -0,0 +1,56 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+  import { get, writable, type Writable } from "svelte/store";
+  import { setDomContext } from "../../context/DOMcontext.js";
+  import {
+    MotionConfigContext,
+    type MotionConfigContextObject,
+  } from "../../context/MotionConfigContext.js";
+  import { provideScaleCorrection } from "../../context/ScaleCorrectionProvider.svelte";
+  import { scaleCorrection } from "./MotionConfigScaleCorrection.js";
+  import type { MotionConfigProps } from "./index.js";
+
+  type $$Props = MotionConfigProps;
+
+  export let transformPagePoint: $$Props["transformPagePoint"] = undefined,
+    isStatic: $$Props["isStatic"] = undefined,
+    transition: $$Props["transition"] = undefined,
+    isCustom = false;
+  const mcc: Writable<MotionConfigContextObject> =
+    getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+  /**
+   * Inherit props from any parent MotionConfig components
+   */
+  let config = { ...get(mcc), ...{ transformPagePoint, isStatic, transition } };
+  $: config = { ...$mcc, ...{ transformPagePoint, isStatic, transition } };
+
+  // need to inform child layouts, or problems with scroll occur
+  provideScaleCorrection();
+  /**
+   * Don't allow isStatic to change between renders as it affects how many hooks
+   * motion components fire.
+   */
+  //config.isStatic = useConstant(() => config.isStatic)
+
+  /**
+   * Creating a new config context object will re-render every `motion` component
+   * every time it renders. So we only want to create a new one sparingly.
+   */
+  $: transitionDependency =
+    typeof config.transition === "object" ? config.transition.toString() : "";
+
+  let context = writable(config);
+  setContext(MotionConfigContext, context);
+  setDomContext("Motion", isCustom, context);
+  const memo = () => config;
+  const scaleCorrector = scaleCorrection();
+  $: {
+    context.set(memo(transitionDependency, config.transformPagePoint));
+    scaleCorrector.update();
+  }
+</script>
+
+<slot />

package/src/components/MotionConfig/MotionConfigScaleCorrection.ts

@@ -0,0 +1,47 @@
+import { getContext } from "svelte";
+import { get } from "svelte/store";
+import {
+    ScaleCorrectionContext,
+    ScaleCorrectionParentContext,
+} from "../../context/ScaleCorrectionProvider.svelte";
+
+
+export const scaleCorrection = () => {
+
+    const scaleCorrectionContext = getContext(ScaleCorrectionContext);
+    const scaleCorrectionParentContext = getContext(
+        ScaleCorrectionParentContext
+    );
+    const afterU = (nc = false) => {
+        /* Second part of the updater calling in child layouts first.*/
+        const scc = get(scaleCorrectionContext);
+
+        
+        scc.forEach((v, i) => {
+            v.afterU?.(true);
+        });
+    };
+
+    const updater = () => {
+        // in React the updater function is called on children first, in Svelte the child does not call it.
+        get(scaleCorrectionContext).forEach((v) => {
+            v.updater?.(true);
+        })
+    }
+
+    scaleCorrectionParentContext.update((v) =>
+        v.concat([
+            {
+                updater,
+                afterU,
+            },
+        ])
+    );
+    
+    return {
+        update: updater
+        }
+    }
+
+
+

package/src/components/MotionConfig/index.ts

@@ -0,0 +1,20 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionConfigContextObject } from "../../context/MotionConfigContext.js";
+export type MotionConfigProps = Partial<MotionConfigContextObject>;
+/**
+ * `MotionConfig` is used to set configuration options for all children `motion` components.
+ *
+ * ```jsx
+ * import { MotionDiv, MotionConfig } from "svelte-motion"
+ *
+ * <MotionConfig transition={{ type: "spring" }}>
+ *   <MotionDiv animate={{ x: 100 }} />
+ * </MotionConfig>
+ * ```
+ *
+ * @public
+ */
+export {default as MotionConfig} from './MotionConfig.svelte';

package/src/components/MotionDiv.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Motion from "../motion/MotionSSR.svelte";
+  export let div = {};
+</script>
+
+<Motion {...$$restProps} let:motion={m} let:props>
+  <div {...props} {...div} use:m><slot /></div>
+</Motion>

package/src/context/DOMcontext.ts

@@ -0,0 +1,21 @@
+export const getDomContext = (name: string, el: any) => {
+    if (!el || !window){
+        return undefined;
+    }
+    let par = el;
+    while(par = par.parentNode){
+        if (par.motionDomContext && par.motionDomContext.has(name)){
+            return par.motionDomContext.get(name)
+        }
+    }
+    return undefined;
+}
+
+export const setDomContext = (name: string, el: any, value: any) => {
+    if (el && window){
+        if (!el.motionDomContext){
+            el.motionDomContext = new Map();
+        }
+        el.motionDomContext.set(name,value);
+    }
+}

package/src/context/LayoutGroupContext.ts

@@ -0,0 +1,13 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Writable } from 'svelte/store'
+
+import { writable } from "svelte/store";
+import { getDomContext } from "./DOMcontext";
+
+/**
+ * @internal
+ */
+export const LayoutGroupContext = (c?: any): Writable<string | null> => getDomContext("LayoutGroup",c)||writable(null);

package/src/context/LazyContext.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { CreateVisualElement } from "../render/types";
+export interface LazyContextProps {
+    renderer?: CreateVisualElement<any>;
+    strict: boolean;
+}
+
+import { writable, type Writable } from "svelte/store";
+import { getDomContext } from "./DOMcontext";
+
+
+const LazyContext = (c?: any): Writable<LazyContextProps> => getDomContext("Lazy",c) || writable({ strict: false });
+
+export { LazyContext };

package/src/context/MotionConfigContext.ts

@@ -0,0 +1,48 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Writable } from "svelte/store";
+import type { Transition } from "../types";
+import type { TransformPoint2D } from "../types/geometry";
+/**
+ * @public
+ */
+export interface MotionConfigContextObject {
+    /**
+     * @internal
+     */
+    transformPagePoint: TransformPoint2D;
+    /**
+     * Determines whether this is a static context ie the Framer canvas. If so,
+     * it'll disable all dynamic functionality.
+     *
+     * @internal
+     */
+    isStatic: boolean;
+    /**
+     * Defines a new default transition for the entire tree.
+     *
+     * @public
+     */
+    transition?: Transition;
+}
+/**
+ * @public
+ */
+// export declare const MotionConfigContext: () => Writable<MotionConfigContextObject>
+
+
+import { writable } from "svelte/store";
+import { getDomContext } from "./DOMcontext";
+
+
+/**
+ * @public
+ */
+var MotionConfigContext = (c?: any): Writable<MotionConfigContextObject> => getDomContext("MotionConfig",c)||writable({
+    transformPagePoint: function (p) { return p; },
+    isStatic: false,
+});
+
+export { MotionConfigContext };

package/src/context/MotionContext/MotionContext.svelte

@@ -0,0 +1,27 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" module>
+  import { getContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+  import type { VisualElement } from "../../render/types";
+  import { getDomContext } from "../DOMcontext";
+  import type { MotionContextProps } from "./index.js";
+  export const MotionContext = (c?: any): Writable<MotionContextProps> =>
+    getDomContext("Motion", c) || writable({});
+
+  export const useVisualElementContext = (c?: any) => {
+    return (getContext(MotionContext) || MotionContext(c)) as
+      | VisualElement<any, any>
+      | undefined;
+  };
+</script>
+
+<script lang="ts">
+  export let isCustom;
+  const motionContext =
+    getContext<Writable<MotionContextProps>>(MotionContext) ||
+    MotionContext(isCustom);
+</script>
+
+<slot parent={$motionContext.visualElement} />

package/src/context/MotionContext/MotionContextProvider.svelte

@@ -0,0 +1,22 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { onDestroy, setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { setDomContext } from "../DOMcontext.js";
+  import { MotionContext } from "./index.js";
+
+  export let value, isCustom;
+  let store = writable(value);
+  $: store.set(value);
+  setContext(MotionContext, store);
+  setDomContext("Motion", isCustom, store);
+
+  // Since useMotionRef is not called on destroy, the visual element is unmounted here
+  onDestroy(() => {
+    value?.visualElement?.unmount();
+  });
+</script>
+
+<slot />

package/src/context/MotionContext/UseCreateMotionContext.svelte

@@ -0,0 +1,34 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+    import { getContext } from "svelte";
+    import { get, type Writable } from 'svelte/store';
+    import { MotionContext, type MotionContextProps } from './index.js';
+    import { getCurrentTreeVariants } from './utils.js';
+
+    export let props: any, 
+        isStatic: any,
+        isCustom: any = undefined;
+
+    let mc: Writable<MotionContextProps> = getContext(MotionContext)||MotionContext(isCustom);
+    let {initial, animate} = getCurrentTreeVariants(props, get(mc));
+    $: ({initial,animate} = getCurrentTreeVariants(props, $mc));
+
+    const variantLabelsAsDependency = (prop) => {
+        return Array.isArray(prop) ? prop.join(" ") : prop;
+    }
+
+    const memo = () => { return (
+        { initial: initial, animate: animate }
+        ); 
+    } 
+    /**
+     * Only break memoisation in static mode
+     */
+     let value = memo();
+     $: if (isStatic){
+         value = memo(variantLabelsAsDependency(initial),variantLabelsAsDependency(animate))
+     }
+</script>
+<slot {value}/>

package/src/context/MotionContext/create.ts

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

package/src/context/MotionContext/index.ts

@@ -0,0 +1,14 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../render/types";
+export interface MotionContextProps {
+    visualElement?: VisualElement;
+    initial?: false | string | string[];
+    animate?: string | string[];
+}
+
+
+export { MotionContext, useVisualElementContext, default as UseVisualElementContext } from "./MotionContext.svelte";
+

package/src/context/MotionContext/utils.ts

@@ -0,0 +1,29 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionContextProps } from ".";
+import type { MotionProps } from "../../motion/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.js';
+
+function getCurrentTreeVariants(props: MotionProps, context: MotionContextProps) {
+    if (checkIfControllingVariants(props)) {
+        var initial = props.initial, animate = props.animate;
+        return {
+            initial: initial === false || isVariantLabel(initial)
+                ? initial
+                : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? (context||{}) : {};
+}
+
+export { getCurrentTreeVariants };

package/src/context/PresenceContext.ts

@@ -0,0 +1,26 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VariantLabels } from "../motion/types";
+import type { Writable } from 'svelte/store'
+/**
+ * @public
+ */
+export interface PresenceContextProps {
+    id: number;
+    isPresent: boolean;
+    register: (id: number) => () => void;
+    onExitComplete?: (id: number) => void;
+    initial?: false | VariantLabels;
+    custom?: any;
+}
+
+import { writable } from "svelte/store";
+import { getDomContext } from "./DOMcontext";
+
+
+/**
+ * @public
+ */
+export const PresenceContext = (c?: any): Writable<PresenceContextProps | null> => getDomContext("Presence",c)||writable(null);

package/src/context/ScaleCorrectionProvider.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Writable } from "svelte/store";
+  import { getContext, setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { getDomContext, setDomContext } from "./DOMcontext.js";
+  export const ScaleCorrectionContext = (isCustom?: any) =>
+    getDomContext("ScaleCorrection", isCustom) || writable([]);
+  export const ScaleCorrectionParentContext = () => writable([] as unknown[]);
+
+  export const provideScaleCorrection = (isCustom: any) => {
+    const fromParent =
+      getContext(ScaleCorrectionContext) || ScaleCorrectionContext(isCustom);
+
+    const ctx = ScaleCorrectionContext();
+    setContext(ScaleCorrectionContext, ctx);
+    setDomContext("ScaleCorrection", isCustom, ctx);
+
+    setContext(ScaleCorrectionParentContext, fromParent);
+  };
+</script>
+
+<script lang="ts">
+  export let isCustom;
+  provideScaleCorrection(isCustom);
+</script>
+
+<slot />

package/src/context/SharedLayoutContext.ts

@@ -0,0 +1,29 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Writable } from 'svelte/store'
+import type { SharedLayoutSyncMethods, SyncLayoutBatcher } from "../components/AnimateSharedLayout/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { writable } from 'svelte/store';
+import { createBatcher } from '../components/AnimateSharedLayout/utils/batcher.js';
+import { getDomContext } from './DOMcontext.js';
+
+var SharedLayoutContext = (custom?: any): Writable<SyncLayoutBatcher | SharedLayoutSyncMethods> => getDomContext("SharedLayout",custom)||writable(createBatcher());
+
+/**
+ * @internal
+ */
+var FramerTreeLayoutContext = ()=> writable(createBatcher());
+
+function isSharedLayout(context: SyncLayoutBatcher | SharedLayoutSyncMethods): context is SharedLayoutSyncMethods {
+    return !!context.forceUpdate;
+}
+
+export { FramerTreeLayoutContext, SharedLayoutContext, isSharedLayout };

package/src/events/UseDomEvent.svelte

@@ -0,0 +1,67 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" module>
+  export function addDomEvent(
+    target: EventTarget,
+    eventName: string,
+    handler: EventListener,
+    options?: AddEventListenerOptions
+  ) {
+    target.addEventListener(eventName, handler, options);
+    return function () {
+      return target.removeEventListener(eventName, handler, options);
+    };
+  }
+</script>
+
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import type { UseDomEventProps } from "./use-dom-event.js";
+
+  type $$Props = UseDomEventProps;
+
+  /**
+   * Attaches an event listener directly to the provided DOM element.
+   *
+   * Bypassing React's event system can be desirable, for instance when attaching non-passive
+   * event handlers.
+   *
+   * ```jsx
+   * const ref = useRef(null)
+   *
+   * useDomEvent(ref, 'wheel', onWheel, { passive: false })
+   *
+   * return <div ref={ref} />
+   * ```
+   *
+   * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
+   * @param eventName - Name of the event you want listen for.
+   * @param handler - Function to fire when receiving the event.
+   * @param options - Options to pass to `Event.addEventListener`.
+   *
+   * @public
+   */
+  export let ref: $$Props["ref"],
+    eventName: $$Props["eventName"],
+    handler: $$Props["handler"] = undefined,
+    options: $$Props["options"] = undefined;
+  let cleanup = () => {};
+  const effect = () => {
+    cleanup();
+    if (!ref) {
+      return () => {};
+    }
+    const element = ref.current;
+
+    if (handler && element) {
+      return addDomEvent(element, eventName, handler, options);
+    }
+    return () => {};
+  };
+
+  $: cleanup = effect(ref, eventName, handler, options);
+  onDestroy(cleanup);
+</script>
+
+<slot />

package/src/events/UsePointerEvent.svelte

@@ -0,0 +1,76 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" module>
+  import type { EventListenerWithPointInfo } from "./event-info.js";
+  import { UseDomEvent } from "./use-dom-event.js";
+  import {
+    supportsMouseEvents,
+    supportsPointerEvents,
+    supportsTouchEvents,
+  } from "./utils.js";
+
+  const mouseEventNames = {
+    pointerdown: "mousedown",
+    pointermove: "mousemove",
+    pointerup: "mouseup",
+    pointercancel: "mousecancel",
+    pointerover: "mouseover",
+    pointerout: "mouseout",
+    pointerenter: "mouseenter",
+    pointerleave: "mouseleave",
+  };
+
+  const touchEventNames = {
+    pointerdown: "touchstart",
+    pointermove: "touchmove",
+    pointerup: "touchend",
+    pointercancel: "touchcancel",
+  };
+  function getPointerEventName(name: string) {
+    if (supportsPointerEvents()) {
+      return name;
+    } else if (supportsTouchEvents()) {
+      return (touchEventNames as any)[name];
+    } else if (supportsMouseEvents()) {
+      return (mouseEventNames as any)[name];
+    }
+
+    return name;
+  }
+  export function addPointerEvent(
+    target: EventTarget,
+    eventName: string,
+    handler: EventListenerWithPointInfo,
+    options?: AddEventListenerOptions
+  ) {
+    return addDomEvent(
+      target,
+      getPointerEventName(eventName),
+      wrapHandler(handler, eventName === "pointerdown"),
+      options
+    );
+  }
+</script>
+
+<script lang="ts">
+  import { wrapHandler } from "./event-info.js";
+  import { addDomEvent } from "./use-dom-event.js";
+  import type { UsePointerEventProps } from "./use-pointer-event.js";
+
+  type $$Props = UsePointerEventProps;
+
+  export let ref: $$Props["ref"],
+    eventName: $$Props["eventName"],
+    handler: $$Props["handler"] = undefined,
+    options: $$Props["options"] = undefined;
+</script>
+
+<UseDomEvent
+  {ref}
+  eventName={getPointerEventName(eventName)}
+  handler={handler && wrapHandler(handler, eventName === "pointerdown")}
+  {options}
+>
+  <slot />
+</UseDomEvent>

package/src/events/event-info.ts

@@ -0,0 +1,69 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { EventInfo } from "./types";
+export type EventListenerWithPointInfo = (e: PointerEvent, info: EventInfo) => void;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { isTouchEvent } from '../gestures/utils/event-type.js';
+
+/**
+ * Filters out events not attached to the primary pointer (currently left mouse button)
+ * @param eventHandler
+ */
+function filterPrimaryPointer(eventHandler) {
+    return function (event) {
+        var isMouseEvent = event instanceof MouseEvent;
+        var isPrimaryPointer = !isMouseEvent ||
+            (isMouseEvent && event.button === 0);
+        if (isPrimaryPointer) {
+            eventHandler(event);
+        }
+    };
+}
+var defaultPagePoint = { pageX: 0, pageY: 0 };
+function pointFromTouch(e: TouchEvent, pointType?: "page" | "client") {
+    if (pointType === void 0) { pointType = "page"; }
+    var primaryTouch = e.touches[0] || e.changedTouches[0];
+    var point = primaryTouch as any || defaultPagePoint as any;
+    return {
+        x: point[pointType + "X"],
+        y: point[pointType + "Y"],
+    };
+}
+function pointFromMouse(point: any, pointType?: "page" | "client") {
+    if (pointType === void 0) { pointType = "page"; }
+    return {
+        x: point[pointType + "X"],
+        y: point[pointType + "Y"],
+    };
+}
+function extractEventInfo(event: MouseEvent | TouchEvent | PointerEvent, pointType?: "page" | "client"): EventInfo {
+    if (pointType === void 0) { pointType = "page"; }
+    return {
+        point: isTouchEvent(event)
+            ? pointFromTouch(event, pointType)
+            : pointFromMouse(event, pointType),
+    };
+}
+function getViewportPointFromEvent(event: MouseEvent | TouchEvent | PointerEvent) {
+    return extractEventInfo(event, "client");
+}
+var wrapHandler = function (handler: EventListenerWithPointInfo, shouldFilterPrimaryPointer?: boolean): EventListener {
+    if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }
+    var listener = function (event) {
+        return handler(event, extractEventInfo(event));
+    };
+    return shouldFilterPrimaryPointer
+        ? filterPrimaryPointer(listener)
+        : listener;
+};
+
+export { extractEventInfo, getViewportPointFromEvent, wrapHandler };
+