motion-v 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/es/components/animate-presence/AnimatePresence.vue_vue_type_script_setup_true_lang.mjs

@@ -25,6 +25,7 @@ var AnimatePresence_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(_ctx.mode === "wait" ? Transition : TransitionGroup), mergeProps(transitionProps.value, {
 				appear: "",
+				css: false,
 				onLeave: unref(exit),
 				onEnter: unref(enter)
 			}), {

package/dist/es/components/motion/use-motion-state.mjs

@@ -44,7 +44,10 @@ function useMotionState(props, renderer) {
 		if (bundle.features?.length) updateLazyFeatures(bundle.features);
 		if (bundle.renderer) state.initVisualElement(bundle.renderer);
 		state.updateFeatures();
-	}, { immediate: true });
+	}, {
+		immediate: true,
+		flush: "pre"
+	});
 	function getAttrs() {
 		const isSVG = state.type === "svg";
 		const attrsProps = { ...attrs };

package/dist/es/directive/index.mjs

@@ -22,10 +22,7 @@ function cleanVNodeProps(el, vnodeProps) {
 	for (const key in vnodeProps) {
 		const value = vnodeProps[key];
 		if (typeof value !== "function" && key in Element.prototype) delete el[key];
-		if (value != null && typeof value === "object") {
-			el.removeAttribute(key);
-			el.removeAttribute(key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`));
-		}
+		if (value != null && typeof value === "object" && key !== "style") el.removeAttribute(key);
 	}
 }
 function resolveTag(source) {
@@ -114,6 +111,7 @@ function createMotionDirective(featureBundle, defaultOptions) {
 		created(el, binding, vnode) {
 			const provides = resolveProvides(vnode, binding);
 			const { options, parentState } = buildMotionOptions(mergeMotionProps(vnode, binding.value), provides, resolveTag(el));
+			console.log("options", options);
 			const state = new MotionState(options, parentState);
 			state.initVisualElement(renderer);
 			mountedStates.set(el, state);
@@ -134,6 +132,7 @@ function createMotionDirective(featureBundle, defaultOptions) {
 		updated(el, binding, vnode) {
 			const state = mountedStates.get(el);
 			if (!state) return;
+			cleanVNodeProps(el, vnode.props);
 			const provides = resolveProvides(vnode, binding);
 			const { options } = buildMotionOptions(mergeMotionProps(vnode, binding.value), provides, resolveTag(el));
 			state.update(options);

package/dist/es/features/layout/layout.d.ts

@@ -3,6 +3,7 @@ import { MotionState } from '../../state/motion-state';
 import { Options } from '../../types';
 export declare class LayoutFeature extends Feature {
     static key: "layout";
+    private hasMountSettled;
     constructor(state: MotionState);
     private updatePrevLead;
     didUpdate(): void;

package/dist/es/features/layout/layout.mjs

@@ -1,13 +1,14 @@
 import { Feature } from "../feature.mjs";
 import { isHidden } from "../../utils/is-hidden.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
-import { addScaleCorrector, globalProjectionState } from "motion-dom";
+import { addScaleCorrector, frame, globalProjectionState } from "motion-dom";
 import { isDef } from "@vueuse/core";
 var hasLayoutUpdate = false;
 var LayoutFeature = class extends Feature {
 	static #_ = this.key = "layout";
 	constructor(state) {
 		super(state);
+		this.hasMountSettled = false;
 		addScaleCorrector(defaultScaleCorrector);
 		state.getSnapshot = this.getSnapshot.bind(this);
 		state.didUpdate = this.didUpdate.bind(this);
@@ -31,16 +32,19 @@ var LayoutFeature = class extends Feature {
 		const layoutGroup = this.state.options.layoutGroup;
 		if (options.layout || options.layoutId) {
 			const projection = this.state.visualElement.projection;
-			if (projection) {
+			if (options.layoutId) {
 				const isPresent = !isHidden(this.state.element);
 				projection.isPresent = isPresent;
 				isPresent ? projection.promote() : projection.relegate();
 				this.updatePrevLead(projection);
-				layoutGroup?.group?.add(projection);
 			}
+			layoutGroup?.group?.add(projection);
 			globalProjectionState.hasEverUpdated = true;
 		}
 		this.didUpdate();
+		frame.postRender(() => {
+			this.hasMountSettled = true;
+		});
 	}
 	unmount() {
 		const layoutGroup = this.state.options.layoutGroup;
@@ -55,6 +59,7 @@ var LayoutFeature = class extends Feature {
 		const projection = this.state.visualElement.projection;
 		const { drag, layoutDependency, layout, layoutId } = newOptions;
 		if (!projection || !layout && !layoutId && !drag) return;
+		if (!this.hasMountSettled) return;
 		hasLayoutUpdate = true;
 		const prevProps = this.state.options;
 		if (drag || prevProps.layoutDependency !== layoutDependency || layoutDependency === void 0 || isDef(isPresent) && projection.isPresent !== isPresent) projection.willUpdate();

package/dist/es/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './framer-motion';
 export * from './motion-values';
 export * from './state';
 export * from './common';
+export * from './instance';

package/dist/es/types/instance.d.ts

@@ -0,0 +1,5 @@
+import { Options } from './state';
+declare module '@vue/runtime-dom' {
+    interface HTMLAttributes extends Omit<Options, 'motionConfig' | 'layoutGroup'> {
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "motion-v",
   "type": "module",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "",
   "author": "",
   "license": "MIT",