motion-start 0.0.1

package/src/motion/features/use-features.ts

@@ -0,0 +1,16 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../..";
+export type isForcedMotionValue = (key: string, { layout, layoutId }: MotionProps) => boolean;
+
+
+/**
+ * Load features via renderless components based on the provided MotionProps.
+ * TODO: Look into porting this to a component-less appraoch.
+ */
+
+
+export { default as UseFeatures } from './UseFeatures.svelte';
+

package/src/motion/index.ts

@@ -0,0 +1,64 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { CreateVisualElement } from "../render/types";
+import type { FeatureBundle, RenderComponent } from "./features/types";
+import type { UseVisualState } from "./utils/use-visual-state";
+export type { MotionProps } from "./types";
+
+export interface MotionComponentConfig<Instance, RenderState> {
+    preloadedFeatures?: FeatureBundle;
+    createVisualElement?: CreateVisualElement<Instance>;
+    useRender: RenderComponent<Instance, RenderState>;
+    useVisualState: UseVisualState<Instance, RenderState>;
+    Component: string | React.ComponentType;
+}
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import Motion from './Motion.svelte';
+import { loadFeatures } from "./features/definitions";
+import type { MotionProps } from "./types";
+
+/**
+ * Create a `motion` component.
+ *
+ * This function accepts a Component argument, which can be either a string (ie "div"
+ * for `MotionDiv`), or an actual React component.
+ *
+ * Alongside this is a config option which provides a way of rendering the provided
+ * component "offline", or outside the React render cycle.
+ *
+ * @internal
+ */
+export const createMotionComponent = <Props extends {}, Instance, RenderState>(
+    {
+        preloadedFeatures,
+        createVisualElement,
+        useRender: forwardMotionProps,
+        useVisualState: visualStateConfig,
+        Component,
+
+    }: MotionComponentConfig<Instance, RenderState>
+): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<Instance>> => {
+    preloadedFeatures && loadFeatures(preloadedFeatures);
+
+    return class MotionComponent extends Motion {
+        constructor(options) {
+            const props = options.props;
+            options.props = {
+                props: props,
+                defaultFeatures: preloadedFeatures,
+                createVisualElement: createVisualElement,
+                forwardMotionProps: forwardMotionProps,
+                Component: Component,
+                visualStateConfig
+            }
+            super(options)
+        }
+    }
+}

package/src/motion/types.ts

@@ -0,0 +1,278 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { CSSProperties } from "react";
+import type { AnimationControls } from "../animation/types";
+import type { DraggableProps } from "../gestures/drag/types";
+import type { FocusHandlers, HoverHandlers, PanHandlers, TapHandlers } from "../gestures/types";
+import type { VisualElementLifecycles } from "../render/utils/lifecycles";
+import type { MakeCustomValueType, Omit, Target, TargetAndTransition, Transition, Variants } from "../types";
+import { MotionValue } from "../value";
+import type { LayoutProps } from "./features/layout/types";
+
+export type MotionStyleProp = string | number | MotionValue;
+/**
+ * Either a string, or array of strings, that reference variants defined via the `variants` prop.
+ * @public
+ */
+export type VariantLabels = string | string[];
+export interface TransformProperties {
+    x?: string | number;
+    y?: string | number;
+    z?: string | number;
+    translateX?: string | number;
+    translateY?: string | number;
+    translateZ?: string | number;
+    rotate?: string | number;
+    rotateX?: string | number;
+    rotateY?: string | number;
+    rotateZ?: string | number;
+    scale?: string | number;
+    scaleX?: string | number;
+    scaleY?: string | number;
+    scaleZ?: string | number;
+    skew?: string | number;
+    skewX?: string | number;
+    skewY?: string | number;
+    originX?: string | number;
+    originY?: string | number;
+    originZ?: string | number;
+    perspective?: string | number;
+    transformPerspective?: string | number;
+}
+/**
+ * @public
+ */
+export interface SVGPathProperties {
+    pathLength?: number;
+    pathOffset?: number;
+    pathSpacing?: number;
+}
+export interface CustomStyles {
+    /**
+     * Framer Library custom prop types. These are not actually supported in Motion - preferably
+     * we'd have a way of external consumers injecting supported styles into this library.
+     */
+    size?: string | number;
+    radius?: string | number;
+    shadow?: string;
+    image?: string;
+}
+export type MakeMotion<T> = MakeCustomValueType<{
+    [K in keyof T]: T[K] | MotionValue<number> | MotionValue<string> | MotionValue<any>;
+}>;
+export type MotionCSS = MakeMotion<Omit<CSSProperties, "rotate" | "scale" | "perspective">>;
+/**
+ * @public
+ */
+export type MotionTransform = MakeMotion<TransformProperties>;
+
+/**
+ * @public
+ */
+export type MotionStyle = MotionCSS & MotionTransform & MakeMotion<SVGPathProperties> /* & MakeCustomValueType<CustomStyles>*/;
+export type OnUpdate = (v: Target) => void;
+/**
+ * @public
+ */
+export interface RelayoutInfo {
+    delta: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/**
+ * @public
+ */
+export type ResolveLayoutTransition = (info: RelayoutInfo) => Transition | boolean;
+/**
+ * @public
+ */
+export interface AnimationProps {
+    /**
+     * Values to animate to, variant label(s), or `AnimationControls`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * // As values
+     * <MotionDiv animate={{ opacity: 1 }} />
+     *
+     * // As variant
+     * <MotionDiv animate="visible" variants={variants} />
+     *
+     * // Multiple variants
+     * <MotionDiv animate={["visible", "active"]} variants={variants} />
+     *
+     * // AnimationControls
+     * <MotionDiv animate={animation} />
+     * ```
+     */
+    animate?: AnimationControls | TargetAndTransition | VariantLabels | boolean;
+    /**
+     * A target to animate to when this component is removed from the tree.
+     *
+     * This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation.
+     *
+     * This limitation exists because React doesn't allow components to defer unmounting until after
+     * an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
+     *
+     * @motion
+     *
+     * ```jsx
+     * import { AnimatePresence, motion } from 'svelte-motion'
+     *
+     *
+     * <AnimatePresence show={isVisible}>
+     *      <MotionDiv
+     *        initial={{ opacity: 0 }}
+     *        animate={{ opacity: 1 }}
+     *        exit={{ opacity: 0 }}
+     *      />
+     * </AnimatePresence>
+     * ```
+     */
+    exit?: TargetAndTransition | VariantLabels;
+    /**
+     * Variants allow you to define animation states and organise them by name. They allow
+     * you to control animations throughout a component tree by switching a single `animate` prop.
+     *
+     * Using `transition` options like `delayChildren` and `staggerChildren`, you can orchestrate
+     * when children animations play relative to their parent.
+     *
+     * @motion
+     *
+     * After passing variants to one or more `motion` component's `variants` prop, these variants
+     * can be used in place of values on the `animate`, `initial`, `whileFocus`, `whileTap` and `whileHover` props.
+     *
+     * ```jsx
+     * const variants = {
+     *   active: {
+     *       backgroundColor: "#f00"
+     *   },
+     *   inactive: {
+     *     backgroundColor: "#fff",
+     *     transition: { duration: 2 }
+     *   }
+     * }
+     *
+     * <MotionDiv variants={variants} animate="active" />
+     * ```
+     */
+    variants?: Variants;
+    /**
+     * Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const spring = {
+     *   type: "spring",
+     *   damping: 10,
+     *   stiffness: 100
+     * }
+     *
+     * <MotionDiv transition={spring} animate={{ scale: 1.2 }} />
+     * ```
+     */
+    transition?: Transition;
+}
+/**
+ * @public
+ */
+export interface MotionAdvancedProps {
+    /**
+     * Custom data to use to resolve dynamic variants differently for each animating component.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const variants = {
+     *   visible: (custom) => ({
+     *     opacity: 1,
+     *     transition: { delay: custom * 0.2 }
+     *   })
+     * }
+     *
+     * <MotionDiv custom={0} animate="visible" variants={variants} />
+     * <MotionDiv custom={1} animate="visible" variants={variants} />
+     * <MotionDiv custom={2} animate="visible" variants={variants} />
+     * ```
+     *
+     * @public
+     */
+    custom?: any;
+    /**
+     * @public
+     * Set to `false` to prevent inheriting variant changes from its parent.
+     */
+    inherit?: boolean;
+}
+/**
+ * Props for `motion` components.
+ *
+ * @public
+ */
+export interface MotionProps extends AnimationProps, VisualElementLifecycles, PanHandlers, TapHandlers, HoverHandlers, FocusHandlers, DraggableProps, LayoutProps, MotionAdvancedProps {
+    /**
+     * Properties, variant label or array of variant labels to start in.
+     *
+     * Set to `false` to initialise with the values in `animate` (disabling the mount animation)
+     *
+     * @motion
+     *
+     * ```jsx
+     * // As values
+     * <MotionDiv initial={{ opacity: 1 }} />
+     *
+     * // As variant
+     * <MotionDiv initial="visible" variants={variants} />
+     *
+     * // Multiple variants
+     * <MotionDiv initial={["visible", "active"]} variants={variants} />
+     *
+     * // As false (disable mount animation)
+     * <MotionDiv initial={false} animate={{ opacity: 0 }} />
+     * ```
+     */
+    initial?: boolean | Target | VariantLabels;
+    /**
+     * @motion
+     *
+     * The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values.
+     *
+     * ```jsx
+     * <script>
+     *   const x = useMotionValue(0)
+     * </script>
+     * 
+     * <MotionDiv style={{ x, opacity: 1, scale: 0.5 }} />
+     * ```
+     */
+    style?: MotionStyle;
+    /**
+     * By default, Svelte Motion generates a `transform` property with a sensible transform order. `transformTemplate`
+     * can be used to create a different order, or to append/preprend the automatically generated `transform` property.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   style={{ x: 0, rotate: 180 }}
+     *   transformTemplate={
+     *     ({ x, rotate }) => `rotate(${rotate}deg) translateX(${x}px)`
+     *   }
+     * />
+     * ```
+     *
+     * @param transform - The latest animated transform props.
+     * @param generatedTransform - The transform string as automatically generated by Framer Motion
+     *
+     * @public
+     */
+    transformTemplate?(transform: TransformProperties, generatedTransform: string): string;
+}
+export type TransformTemplate = (transform: TransformProperties, generatedTransform: string) => string;

package/src/motion/utils/UseLayoutId.svelte

@@ -0,0 +1,18 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { LayoutGroupContext } from "../../context/LayoutGroupContext.js";
+  export let props, isCustom;
+  $: ({ layoutId } = props);
+  const layoutGroupId: Writable<string | null> =
+    getContext(LayoutGroupContext) || LayoutGroupContext(isCustom);
+</script>
+
+<slot
+  layoutId={$layoutGroupId && layoutId !== undefined
+    ? $layoutGroupId + "-" + layoutId
+    : layoutId}
+/>

package/src/motion/utils/UseVisualElement.svelte

@@ -0,0 +1,104 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module lang="ts">
+  export const ssr = false;
+</script>
+
+<script lang="ts">
+  import { afterUpdate, getContext, onDestroy, tick } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { isPresent } from "../../components/AnimatePresence/use-presence.js";
+  import { LayoutGroupContext } from "../../context/LayoutGroupContext.js";
+  import {
+    LazyContext,
+    type LazyContextProps,
+  } from "../../context/LazyContext.js";
+  import {
+    MotionConfigContext,
+    type MotionConfigContextObject,
+  } from "../../context/MotionConfigContext.js";
+  import {
+    MotionContext,
+    type MotionContextProps,
+  } from "../../context/MotionContext/index.js";
+  import {
+    PresenceContext,
+    type PresenceContextProps,
+  } from "../../context/PresenceContext.js";
+
+  export let createVisualElement = undefined,
+    props,
+    Component,
+    visualState,
+    isCustom;
+
+  const config: Writable<MotionConfigContextObject> =
+    getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+  const presenceContext: Writable<PresenceContextProps> =
+    getContext(PresenceContext) || PresenceContext(isCustom);
+  const lazyContext: Writable<LazyContextProps> =
+    getContext(LazyContext) || LazyContext(isCustom);
+  const mc: Writable<MotionContextProps> =
+    getContext(MotionContext) || MotionContext(isCustom);
+  let parent = get(mc).visualElement;
+  $: parent = $mc.visualElement;
+  const layoutGroupId: Writable<string | null> =
+    getContext(LayoutGroupContext) || LayoutGroupContext(isCustom);
+  let layoutId =
+    $layoutGroupId && props.layoutId !== undefined
+      ? $layoutGroupId + "-" + props.layoutId
+      : props.layoutId;
+  $: layoutId =
+    $layoutGroupId && props.layoutId !== undefined
+      ? $layoutGroupId + "-" + props.layoutId
+      : props.layoutId;
+
+  let visualElementRef: any = undefined;
+  /**
+   * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
+   */
+  if (!createVisualElement) {
+    createVisualElement = $lazyContext.renderer;
+  }
+
+  $: if (!visualElementRef && createVisualElement) {
+    visualElementRef = createVisualElement(Component, {
+      visualState,
+      parent: parent,
+      props: { ...props, layoutId },
+      presenceId: $presenceContext?.id,
+      blockInitialAnimation: $presenceContext?.initial === false,
+    });
+  }
+  let visualElement = visualElementRef;
+  $: visualElement = visualElementRef;
+
+  $: if (visualElement) {
+    visualElement.setProps({
+      ...$config,
+      ...props,
+      layoutId,
+    });
+    visualElement.isPresent = isPresent($presenceContext);
+    visualElement.isPresenceRoot =
+      !parent || parent.presenceId !== $presenceContext?.id;
+
+    /**
+     * Fire a render to ensure the latest state is reflected on-screen.
+     */
+    visualElement.syncRender();
+  }
+
+  afterUpdate(() => {
+    tick().then(() => {
+      visualElement.animationState?.animateChanges();
+    });
+  });
+
+  onDestroy(() => {
+    visualElement?.notifyUnmount();
+  });
+</script>
+
+<slot {visualElement} />

package/src/motion/utils/UseVisualState.svelte

@@ -0,0 +1,137 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module lang="ts">
+  import { isAnimationControls } from "../../animation/utils/is-animation-controls.js";
+  import {
+    checkIfControllingVariants,
+    checkIfVariantNode,
+    resolveVariantFromProps,
+  } from "../../render/utils/variants.js";
+  import { resolveMotionValue } from "../../value/utils/resolve-motion-value.js";
+
+  type Instance = any;
+  type RenderState = any;
+
+  const makeState = (
+    {
+      scrapeMotionValuesFromProps,
+      createRenderState,
+      onMount,
+    }: UseVisualStateConfig<Instance, RenderState>,
+    props,
+    context,
+    presenceContext
+  ) => {
+    const state: any = {
+      latestValues: makeLatestValues(
+        props,
+        context,
+        presenceContext,
+        scrapeMotionValuesFromProps
+      ),
+      renderState: createRenderState(),
+    };
+
+    if (onMount) {
+      state.mount = (instance) => onMount(props, instance, state);
+    }
+
+    return state;
+  };
+  function makeLatestValues(
+    props,
+    context,
+    presenceContext,
+    scrapeMotionValues
+  ) {
+    const values: any = {};
+    const blockInitialAnimation = presenceContext?.initial === false;
+
+    const motionValues = scrapeMotionValues(props);
+    for (const key in motionValues) {
+      values[key] = resolveMotionValue(motionValues[key]);
+    }
+
+    let { initial, animate } = props;
+    const isControllingVariants = checkIfControllingVariants(props);
+    const isVariantNode = checkIfVariantNode(props);
+
+    if (
+      context &&
+      isVariantNode &&
+      !isControllingVariants &&
+      props.inherit !== false
+    ) {
+      initial !== null && initial !== void 0
+        ? initial
+        : (initial = context.initial);
+      animate !== null && animate !== void 0
+        ? animate
+        : (animate = context.animate);
+    }
+
+    const variantToSet =
+      blockInitialAnimation || initial === false ? animate : initial;
+
+    if (
+      variantToSet &&
+      typeof variantToSet !== "boolean" &&
+      !isAnimationControls(variantToSet)
+    ) {
+      const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+      list.forEach((definition) => {
+        const resolved = resolveVariantFromProps(props, definition);
+        if (!resolved) return;
+
+        const { transitionEnd, transition, ...target } = resolved;
+
+        for (const key in target) values[key] = target[key];
+        for (const key in transitionEnd) values[key] = transitionEnd[key];
+      });
+    }
+
+    return values;
+  }
+</script>
+
+<script lang="ts" generics="Instance, RenderState">
+  import type { UseVisualStateConfig } from "./use-visual-state.js";
+
+  import type { MotionProps } from "..";
+
+  import { getContext } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import {
+    MotionContext,
+    type MotionContextProps,
+  } from "../../context/MotionContext/index.js";
+  import {
+    PresenceContext,
+    type PresenceContextProps,
+  } from "../../context/PresenceContext.js";
+
+  type $$Props = {
+    config: UseVisualStateConfig<Instance, RenderState>;
+    props: MotionProps;
+    isStatic: boolean;
+    isCustom?: any;
+  };
+
+  export let config: $$Props["config"],
+    props: $$Props["props"],
+    isStatic: $$Props["isStatic"],
+    isCustom;
+
+  const context: Writable<MotionContextProps> =
+    getContext(MotionContext) || MotionContext(isCustom);
+  const presenceContext: Writable<PresenceContextProps> =
+    getContext(PresenceContext) || PresenceContext(isCustom);
+  let state = makeState(config, props, get(context), get(presenceContext));
+  const ms = makeState;
+  $: if (isStatic) {
+    state = ms(config, props, $context, $presenceContext);
+  }
+</script>
+
+<slot {state} />

package/src/motion/utils/is-forced-motion-value.ts

@@ -0,0 +1,23 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../..";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { valueScaleCorrection } from '../../render/dom/projection/scale-correction.js';
+import { isTransformOriginProp, isTransformProp } from '../../render/html/utils/transform.js';
+
+function isForcedMotionValue(key: string, _a: { layout?: MotionProps['layout'], layoutId?: MotionProps['layoutId'] }): boolean {
+    var layout = _a.layout, layoutId = _a.layoutId;
+    return (isTransformProp(key) ||
+        isTransformOriginProp(key) ||
+        ((layout || layoutId !== undefined) && !!valueScaleCorrection[key]));
+}
+
+export { isForcedMotionValue };
+

package/src/motion/utils/make-renderless-component.ts

@@ -0,0 +1,17 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../features/types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+var makeRenderlessComponent = function <P = FeatureProps>(hook: Function) { return function (props: P) {
+    hook(props);
+    return null;
+}; };
+
+export { makeRenderlessComponent };

package/src/motion/utils/should-inhert-variant.ts

@@ -0,0 +1,6 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../types";
+export type checkShouldInheritVariant = ({ animate, variants, inherit, }: MotionProps) => boolean;