Refactor: monorepo

.npmignore

@@ -1,3 +1,4 @@
-src
 playgrounds
 .vscode
+.zed
+.github

README.md

@@ -4,19 +4,19 @@
 
 🌊 A shared layout animations for [vue](https://vuejs.org/) like [framer motion](https://www.framer.com/motion/), use `layoutId` prop and components will animate from one to another.
 
-- [Demo](https://stackblitz.com/~/github.com/tmg0/hero-motion)
-
 ## Features
 
 🏎 Smooth animations based on [@vueuse/motion](https://motion.vueuse.org/)
 
-✨ Written in TypeScript
+✨ Written with TypeScript
 
 🙌 Easy to use
 
 ✅ Support most of the `@vueuse/motion`'s props
 
-🚀 Support auto-import feature through `nuxt-module`
+🚀 Support auto-import by `nuxt-module`
+
+🖥️ Live example [here](https://stackblitz.com/~/github.com/tmg0/hero-motion)
 
 ## Installation
 
@@ -107,11 +107,27 @@ export default defineNuxtConfig({
 ```
 
 `hero-motion/nuxt` will auto import the `Hero` component for you, eliminating the need to manually import it in each file where you want to use it.
-Additionally, this module automatically wraps your Nuxt application with the `HeroProvider`, saving you the step of explicitly wrapping your root component. This streamlined setup process not only reduces boilerplate code but also ensures that the Hero motion functionality is available throughout your entire Nuxt application with minimal configuration effort on your part.
+
+```vue
+<template>
+  <Hero as="div" layout-id="ID" />
+</template>
+```
 
 ## Playground
 
-See [playground](./playground/vite/README.md).
+- [vite](./playgrounds/vite)
+- [nuxt](./playgrounds/nuxt)
+
+### Live Vite Example
+
+[Here!](https://stackblitz.com/~/github.com/tmg0/hero-motion)
+
+### Run Locally
+
+```sh
+pnpm play
+```
 
 ## Props
 

package.json

@@ -22,26 +22,26 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./packages/core/dist/index.d.ts",
+      "import": "./packages/core/dist/index.js",
+      "require": "./packages/core/dist/index.cjs"
     },
     "./nuxt": {
-      "types": "./dist/nuxt/types.d.ts",
-      "import": "./dist/nuxt/module.mjs",
-      "require": "./dist/nuxt/module.cjs"
+      "types": "./packages/nuxt/dist/types.d.ts",
+      "import": "./packages/nuxt/dist/module.mjs",
+      "require": "./packages/nuxt/dist/module.cjs"
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "files": [
+    "packages/core/dist",
+    "packages/nuxt/dist"
+  ],
   "scripts": {
-    "dev": "tsup --watch",
+    "dev": "pnpm --filter @hero-motion/* dev",
     "play": "pnpm play:vite",
     "play:vite": "cd playgrounds/vite && pnpm dev",
     "play:nuxt": "cd playgrounds/nuxt && pnpm dev",
-    "build": "pnpm build:nuxt || tsup",
-    "build:nuxt": "nuxt-module-build build --outDir ./dist/nuxt",
+    "build": "pnpm --filter @hero-motion/* build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest"
@@ -56,15 +56,10 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.6.2",
-    "@nuxt/kit": "^3.13.2",
-    "@nuxt/module-builder": "^0.8.4",
-    "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@vue/tsconfig": "^0.5.1",
-    "@vueuse/motion": "^2.2.5",
     "eslint": "^9.10.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.2",
-    "unplugin-vue-jsx": "^0.4.0",
     "vitest": "^2.1.1",
     "vue": "^3.5.6"
   }

packages/core/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@hero-motion/core",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "tsup-node --watch",
+    "build": "tsup-node"
+  },
+  "devDependencies": {
+    "@vueuse/motion": "^2.2.5",
+    "unplugin-vue-jsx": "^0.4.0"
+  }
+}

src/index.ts → packages/core/src/index.ts

@@ -1,4 +1,4 @@
 export { Hero } from './components/hero'
-export { HeroProvider } from './components/hero-provider'
+export { HeroProvider, type HeroProviderProps } from './components/hero-provider'
 export { useHero } from './composables/use-hero'
 export { directive } from './directive'

packages/core/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

tsup.config.ts → packages/core/tsup.config.ts

@@ -1,14 +1,15 @@
-import { defineConfig } from 'tsup'
-import VueJSX from 'unplugin-vue-jsx/esbuild'
-
-export default defineConfig(options => ({
-  entry: ['./src/index.ts'],
-  splitting: true,
-  treeshake: true,
-  dts: true,
-  format: ['esm', 'cjs'],
-  minify: !options.watch,
-  esbuildPlugins: [
-    VueJSX({}),
-  ],
-}))
+import { defineConfig } from 'tsup'
+import VueJSX from 'unplugin-vue-jsx/esbuild'
+
+export default defineConfig(options => ({
+  entry: ['./src/index.ts'],
+  splitting: true,
+  treeshake: true,
+  clean: true,
+  dts: true,
+  format: ['esm', 'cjs'],
+  minify: !options.watch,
+  esbuildPlugins: [
+    VueJSX({}),
+  ],
+}))

packages/nuxt/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@hero-motion/nuxt",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "nuxt-module-build build --watch",
+    "build": "nuxt-module-build build"
+  },
+  "dependencies": {
+    "defu": "^6.1.4"
+  },
+  "devDependencies": {
+    "@hero-motion/core": "workspace:*",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxt/module-builder": "^0.8.4"
+  }
+}

src/module.ts → packages/nuxt/src/module.ts

@@ -1,12 +1,9 @@
-import type { HeroProviderProps } from './components/hero-provider'
 import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { defu } from 'defu'
 
-export interface ModuleOptions extends Omit<HeroProviderProps, 'as'> {}
+export type NuxtModule = ReturnType<typeof defineNuxtModule<any>>
 
-export type NuxtModule = ReturnType<typeof defineNuxtModule<ModuleOptions>>
-
-const module: any = defineNuxtModule<ModuleOptions>({
+const module: any = defineNuxtModule<any>({
   meta: {
     name: 'hero-motion/nuxt',
     configKey: 'hero',

src/runtime/components/Hero.vue → packages/nuxt/src/runtime/components/Hero.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import type { Transition } from '../../types'
+import type { Transition as MotionTransition } from '@vueuse/motion'
 import { useRuntimeConfig } from '#app'
 import { computed } from '#imports'
 import { Hero } from 'hero-motion'
 
+export type Transition = MotionTransition
+
 defineProps<{
   as?: string
   layoutId: string | number

packages/nuxt/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

playgrounds/nuxt/README.md

@@ -0,0 +1 @@
+# @hero-motion-playground/nuxt

playgrounds/nuxt/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: false },
-  modules: ['../../src/module'],
+  modules: ['../../packages/nuxt/src/module'],
 
   hero: {
     transition: {

playgrounds/nuxt/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@hero-motion/nuxt",
+  "name": "@hero-motion-playground/nuxt",
   "type": "module",
   "private": true,
   "scripts": {

playgrounds/vite/README.md

@@ -1,4 +1,4 @@
-# @hero-motion/playground-vite
+# @hero-motion-playground/vite
 
 [![NPM version](https://img.shields.io/npm/v/hero-motion)](https://www.npmjs.com/package/hero-motion)
 

playgrounds/vite/package.json

@@ -1,7 +1,6 @@
 {
-  "name": "@hero-motion/vite",
+  "name": "@hero-motion-playground/vite",
   "type": "module",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",