Merge pull request #213 from motiondivision/fix/unmount-loop

fix: infinite loop in unmount causing browser crash

Author: rick-hup

packages/motion/README.md

@@ -0,0 +1,131 @@
+<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://twitter.com/motiondotdev" target="_blank">
+  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
+  </a>
+</p>
+
+<br>
+<hr>
+<br>
+
+Motion for Vue is an open source, production-ready library that’s designed for all creative developers.
+
+It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
+
+It looks like this:
+
+```jsx
+<motion.div :animate="{ x: 100 }" />
+```
+
+It does all this:
+
+- Springs
+- Keyframes
+- Layout animations
+- Shared layout animations
+- Gestures (drag/tap/hover)
+- Scroll animations
+- SVG paths
+- Exit animations
+- Server-side rendering
+- Independent transforms
+- Orchestrate animations across components
+- CSS variables
+
+...and a whole lot more.
+
+## Get started
+
+### 🐇 Quick start
+
+Install `motion-v` via your package manager:
+
+```
+npm install motion-v
+```
+
+Then import the `motion` component:
+
+```vue
+<script setup>
+import { motion } from 'motion-v'
+</script>
+
+<template>
+  <motion.div :animate="{ x: 100 }" />
+</template>
+```
+
+## ⚡️ Motion+
+
+Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
+- 160+ premium Motion Examples
+- Motion UI features like Cursor and Ticker
+- Motion Studio animation editing for VS Code `alpha`
+- Early access content
+- Private Discord
+
+[Get Motion+](https://motion.dev/plus)
+
+## 🎨 Studio
+
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+
+Motion Studio is a versatile suite of developer tools allowing you to:
+
+-   Visually edit CSS and Motion easing curves in VS Code
+-   Generate CSS springs with LLMs
+-   Load Motion docs into your LLM
+
+Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+
+### 💎 Contribute
+
+- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
+- [Join our discord ](https://discord.com/invite/dCBuRgdNDG)
+
+### 👩🏻‍⚖️ License
+
+- Motion for Vue is MIT licensed.
+
+## ✨ Sponsors
+
+Motion is sustainable thanks to the kind support of its sponsors.
+
+### Partners
+
+#### Framer
+
+Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+
+<a href="https://www.framer.com?utm_source=motion-readme">
+  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
+</a>
+
+### Platinum
+
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+
+### Gold
+
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a>
+
+### Silver
+
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
+
+### Personal sponsors
+
+-   [OlegWock](https://sinja.io)
+-   [Lambert Weller](https://github.com/l-mbert)
+-   [Jake LeBoeuf](https://jklb.wf)
+-   [Han Lee](https://github.com/hahnlee)

packages/motion/README.md

@@ -169,21 +169,25 @@ export class MotionState {
 
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && this.visualElement.projection?.getStack().lead === this.visualElement.projection && this.visualElement.projection.isProjecting()
+    const unmountState = () => {
+      if (unMountChildren) {
+        Array.from(this.children).reverse().forEach(this.unmountChild)
+      }
+      this.parent?.children?.delete(this)
+      mountedStates.delete(this.element)
+      this.featureManager.unmount()
+      this.visualElement?.unmount()
+      // clear animation
+      this.clearAnimation()
+    }
     if (shouldDelay) {
       Promise.resolve().then(() => {
-        this.unmount(unMountChildren)
+        unmountState()
       })
-      return
     }
-    if (unMountChildren) {
-      Array.from(this.children).reverse().forEach(this.unmountChild)
+    else {
+      unmountState()
     }
-    this.parent?.children?.delete(this)
-    mountedStates.delete(this.element)
-    this.featureManager.unmount()
-    this.visualElement?.unmount()
-    // clear animation
-    this.clearAnimation()
   }
 
   private unmountChild(child: MotionState) {