feat: separate component logic, add <MotionGroup> and tests (#187)

Author: BobbieGoede

docs/components/content/Illustration.vue

@@ -40,7 +40,7 @@ refs.forEach((ref, index) => {
       y: 20,
       transition: {
         duration: 1500,
-        repeat: Infinity,
+        repeat: Number.POSITIVE_INFINITY,
         ease: 'easeInOut',
         repeatType: 'mirror',
       },

docs/components/content/Person.vue

@@ -38,7 +38,7 @@ refs.forEach((ref, index) => {
       y: 15,
       transition: {
         duration: 1500,
-        repeat: Infinity,
+        repeat: Number.POSITIVE_INFINITY,
         ease: 'easeInOut',
         repeatType: 'mirror',
       },

docs/package.json

@@ -10,7 +10,7 @@
     "@vueuse/motion": "workspace:~"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.12.0",
-    "nuxt": "^3.5.1"
+    "@nuxt-themes/docus": "^1.15.0",
+    "nuxt": "^3.11.2"
   }
 }

package.json

@@ -75,21 +75,22 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/shared": "^10.1.2",
-    "csstype": "^3.1.2",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/shared": "^10.9.0",
+    "csstype": "^3.1.3",
     "framesync": "^6.1.2",
     "popmotion": "^11.0.5",
     "style-value-types": "^5.1.2"
   },
   "optionalDependencies": {
-    "@nuxt/kit": "^3.5.1"
+    "@nuxt/kit": "^3.11.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.3",
-    "@nuxt/kit": "^3.5.1",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxt/schema": "^3.11.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@vitest/coverage-c8": "^0.31.1",
+    "@vitest/coverage-v8": "^1.5.0",
     "@vue/test-utils": "^2.3.2",
     "chokidar": "^3.5.3",
     "eslint": "^8.41.0",
@@ -99,11 +100,11 @@
     "happy-dom": "^9.20.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
-    "typescript": "^5.0.4",
+    "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
     "vite": "4.3.8",
-    "vitest": "^0.31.1",
-    "vue": "^3.3.4",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.23",
     "yorkie": "^2.0.0"
   },
   "gitHooks": {

playgrounds/nuxt/.npmrc

@@ -1,3 +1,5 @@
 <template>
-  <NuxtPage />
+  <div>
+    <NuxtPage />
+  </div>
 </template>

playgrounds/nuxt/app.vue

@@ -1,6 +1,9 @@
 import { resolve } from 'node:path'
 
 export default defineNuxtConfig({
+  features: {
+    devLogs: false,
+  },
   css: ['~/assets/pico.css'],
   alias: {
     '@vueuse/motion': resolve(__dirname, '../../src/index.ts'),

playgrounds/nuxt/nuxt.config.ts

@@ -10,7 +10,7 @@
     "@vueuse/motion": "workspace:~"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.6.0",
-    "nuxt": "^3.5.1"
+    "@nuxt/content": "^2.12.1",
+    "nuxt": "^3.11.2"
   }
 }

playgrounds/nuxt/package.json

@@ -13,7 +13,7 @@ const codeText = computed(() => basic(input.value))
 watch(input, (newVal) => {
   if (motions.editor) {
     motions.editor.apply({
-      rotate: parseInt(newVal),
+      rotate: Number.parseInt(newVal),
     })
   }
 })