fix: 🐛 attempt to fix layout animations and update deps

layout animations fix and update deps also fully remove tslib

BREAKING CHANGE: 🧨 none

✅ Closes: none

.devcontainer/devcontainer.json

@@ -18,7 +18,7 @@
 	},
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [5000],
+	// "forwardPorts": [5173],
 	// "appPort": [5000]
 
 	// Use 'postCreateCommand' to run commands after the container is created.

package.json

@@ -32,41 +32,40 @@
 		"release": "bun --bun run build && bun --bun changeset publish"
 	},
 	"dependencies": {
-		"framesync": "^6.1.2",
-		"popmotion": "^11.0.5",
-		"style-value-types": "5.1.2",
 		"bits-ui": "^0.21.16",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
-		"lucide-svelte": "^0.445.0",
+		"framesync": "^6.1.2",
+		"lucide-svelte": "^0.453.0",
 		"mode-watcher": "^0.4.1",
-		"tailwind-merge": "^2.5.3",
+		"popmotion": "^11.0.5",
+		"style-value-types": "5.1.2",
+		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.27.9",
-		"@biomejs/biome": "1.9.2",
+		"@biomejs/biome": "^1.9.4",
 		"@emotion/is-prop-valid": "^1.3.1",
 		"@sveltejs/package": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.8",
 		"svelte-check": "^4.0.5",
 		"@tsconfig/svelte": "^5.0.4",
-		"@types/node": "^20.16.11",
+		"@types/node": "^20.16.12",
 		"@vitest/ui": "latest",
 		"csstype": "^3.1.3",
 		"publint": "^0.2.11",
-		"svelte": "^5.0.0-next.264",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.8",
+		"vite": "latest",
 		"vitest": "latest",
 		"@sveltejs/adapter-auto": "^3.2.5",
-		"@sveltejs/kit": "^2.7.0",
+		"@sveltejs/kit": "^2.7.1",
 		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0-alpha.26",
-		"tailwindcss": "^4.0.0-alpha.26"
+		"@tailwindcss/vite": "^4.0.0-alpha.28",
+		"tailwindcss": "^4.0.0-alpha.28"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0 || ^5.0.0-next.0"
+		"svelte": "^5.0.0-next.269"
 	},
 	"engines": {
 		"bun": ">=1.0.0",

src/lib/components/motion/AnimateLayout.svelte

@@ -0,0 +1,46 @@
+<script>
+    import { motion } from "$lib/motion-start";
+
+    const spring = {
+        type: "spring",
+        stiffness: 700,
+        damping: 30,
+    };
+
+    let active = false;
+
+    function toggleSwitch() {
+        active = !active;
+    }
+</script>
+
+<button class="switch" data-active={active} onclick={toggleSwitch}>
+    <motion.div layout class="handle" transition={spring} />
+</button>
+
+<p>This should animate on click</p>
+
+<style>
+    .switch {
+        all: unset;
+        width: 8rem;
+        height: 3rem;
+        background-color: gainsboro;
+        display: flex;
+        justify-content: flex-start;
+        border-radius: 50px;
+        padding: 0.5rem;
+        cursor: pointer;
+    }
+
+    .switch[data-active="true"] {
+        justify-content: flex-end;
+    }
+
+    :global(.handle) {
+        width: 3rem;
+        height: 3rem;
+        background-color: white;
+        border-radius: 40px;
+    }
+</style>

src/lib/components/motion/index.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+export { default as AnimateLayout } from './AnimateLayout.svelte';
 export { default as AnimatePresenceStack } from './AnimatePresenceStack.svelte';
 export { default as AnimationSequence } from './AnimationSequence.svelte';
 export { default as ColorInterpolation } from './ColorInterpolation.svelte';

src/lib/motion-start/index.ts

@@ -27,8 +27,8 @@ export { AnimatePresence } from './components/AnimatePresence/index.js';
 export { AnimateSharedLayout } from './components/AnimateSharedLayout/index.js';
 export { LazyMotion } from './components/LazyMotion/index.js';
 export { MotionConfig } from './components/MotionConfig/index.js';
-export { Motion, createDomMotionComponent } from './render/dom/motion.js';
-export { M } from './render/dom/motion-minimal.js';
+export { Motion, createDomMotionComponent, Motion as motion } from './render/dom/motion.js';
+export { M, M as m } from './render/dom/motion-minimal.js';
 /**
  * Features
  */

src/lib/motion-start/render/utils/lifecycles.ts

@@ -141,7 +141,7 @@ var names = [
 	'SetAxisTarget',
 	'Unmount',
 ];
-function createLifecycles(...args: any[]) {
+function createLifecycles(...args: [any]) {
 	var managers = names.map(() => new SubscriptionManager());
 	var propSubscriptions = {};
 	var lifecycles = {
@@ -153,16 +153,16 @@ function createLifecycles(...args: any[]) {
 				(_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
 				var on = 'on' + name;
 				var propListener = props[on];
-				if (propListener) {// @ts-expect-error
+				if (propListener) {
+					// @ts-expect-error
 					propSubscriptions[name] = (lifecycles as any)[on](propListener);
 				}
 			}),
 	} as any;
 	managers.forEach((manager, i) => {
 		lifecycles['on' + names[i]] = (handler: (...args: any) => void) => manager.add(handler);
 		lifecycles['notify' + names[i]] = () => {
-			const [arg1, arg2, arg3] = args;
-			return manager.notify.apply(manager, [arg1, arg2, arg3]);
+			return manager.notify.apply(manager, ...args);
 		};
 	});
 	return lifecycles satisfies LifecycleManager;

src/lib/motion-start/utils/subscription-manager.ts

@@ -11,7 +11,7 @@ class SubscriptionManager<Handler extends GenericHandler> {
 			return removeItem(this.subscriptions, handler);
 		};
 	};
-	notify = (a?: Parameters<Handler>[0], b?: Parameters<Handler>[1], c?: Parameters<Handler>[2]) => {
+	notify = ([a, b, c]: Parameters<Handler>) => {
 		var numSubscriptions = this.subscriptions.length;
 		if (!numSubscriptions) return;
 		if (numSubscriptions === 1) {

src/routes/tests/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import * as Card from "$lib/components/ui/card";
     import {
+        AnimateLayout,
         AnimatePresenceStack,
         AnimationSequence,
         ColorInterpolation,
@@ -376,5 +377,22 @@
             </Card.Footer>
         </Card.Root>
         <!-- End -->
+        <!-- Start -->
+        <Card.Root>
+            <Card.Header>
+                <Card.Title>Animate Layout</Card.Title>
+                <Card.Description>Click switch button</Card.Description>
+            </Card.Header>
+            <Card.Content>
+                <AnimateLayout />
+            </Card.Content>
+            <Card.Footer>
+                <Card.Footer class="grid gap-1">
+                    <h1 class="text-2xl font-semibold">Test Summary</h1>
+                    <p class="text-red-500">Failed test</p>
+                </Card.Footer>
+            </Card.Footer>
+        </Card.Root>
+        <!-- End -->
     </div>
 </div>