Target refactor (#44)

* deps update

* allow animate api animate({ el, ...to })

* Refactor

* increase size

* animate({el, ...config}, to) rather than animate (to, {el, ...config})

* rename useAnimini into useAnimate

* handle rotate

* chore: internal rename of variables

* ts: fix api.start type

* chore: invert two elements in array

* ts: fix three types

* ci

Author: dbismut

Diff for: .changeset/pink-fishes-walk.md

@@ -0,0 +1,11 @@
+---
+'@animini/core': minor
+'@animini/core-react': minor
+'@animini/react-dom': minor
+'@animini/react-three': minor
+'@animini/three': minor
+'@animini/target-dom': minor
+'@animini/target-three': minor
+---
+
+Package refactor, introducing vanilla api

Diff for: README.md

@@ -22,12 +22,12 @@ yarn add @animini/react-three
 
 ```js
 import { useDrag } from '@use-gesture/react'
-import { useAnimini, spring } from '@animini/react-dom'
+import { useAnimate, spring } from '@animini/react-dom'
 
 const easing = spring()
 
 export default function App() {
-  const [ref, api] = useAnimini()
+  const [ref, api] = useAnimate()
 
   useDrag(
     ({ active, movement: [x, y] }) => {
@@ -50,7 +50,7 @@ export default function App() {
 Lerp is the lightest, fastest and default easing algorithm for Animini. It supports a `factor` attribute that will change the momentum of the lerp.
 
 ```js
-import { useAnimini, lerp } from '@animini/react-dom'
+import { useAnimate, lerp } from '@animini/react-dom'
 
 const easing = lerp({ factor: 0.05 })
 api.start({ x: 100 }, { easing })
@@ -59,7 +59,7 @@ api.start({ x: 100 }, { easing })
 ### Spring
 
 ```js
-import { useAnimini, spring } from '@animini/react-dom'
+import { useAnimate, spring } from '@animini/react-dom'
 
 const easing = spring({
   tension: 170, // spring tension
@@ -74,7 +74,7 @@ api.start({ x: 100 }, { easing })
 ### Ease (Bezier)
 
 ```js
-import { useAnimini, ease } from '@animini/react-dom'
+import { useAnimate, ease } from '@animini/react-dom'
 
 const easing = ease(
   300, // duration of the ease in ms
@@ -91,7 +91,7 @@ Inertia aims at emulating a thrown object. Inertia will not reach its destinatio
 Inertia supports `min` and `max` bounds which the element will bounce against as a rubberband bouncing on a wall.
 
 ```js
-import { useAnimini, inertia } from '@animini/react-dom'
+import { useAnimate, inertia } from '@animini/react-dom'
 
 const easing = inertia({
   momentum: 0.998,     // momentum of the inertia

Diff for: demo/package.json

@@ -14,11 +14,11 @@
     "@leva-ui/plugin-bezier": "*",
     "@leva-ui/plugin-spring": "*",
     "@react-spring/web": "^9.4.5",
-    "@react-three/drei": "9.11.3",
-    "@react-three/fiber": "^8.0.19",
+    "@react-three/drei": "9.13.0",
+    "@react-three/fiber": "^8.0.24",
     "@use-gesture/react": "*",
     "animejs": "^3.2.1",
-    "framer-motion": "^6.3.4",
+    "framer-motion": "^6.3.11",
     "gsap": "^3.10.4",
     "leva": "*",
     "motion": "^10.10.0",
@@ -29,10 +29,10 @@
     "wouter": "^2.8.0-alpha.2"
   },
   "devDependencies": {
-    "@types/three": "^0.140.0",
+    "@types/three": "^0.141.0",
     "@vitejs/plugin-react": "^1.3.2",
-    "typescript": "^4.7.2",
+    "typescript": "^4.7.3",
     "typescript-plugin-css-modules": "^3.4.0",
-    "vite": "2.9.9"
+    "vite": "2.9.12"
   }
 }

Diff for: demo/src/sandboxes/animini-config/src/App.tsx

@@ -1,7 +1,7 @@
 import { useControls, button } from 'leva'
 import { spring as levaSpring } from '@leva-ui/plugin-spring'
 import { bezier } from '@leva-ui/plugin-bezier'
-import { useAnimini, spring, lerp, ease } from '@animini/react-dom'
+import { useAnimate, spring, lerp, ease } from '@animini/react-dom'
 
 import styles from './styles.module.css'
 
@@ -26,15 +26,15 @@ export default function App() {
           easing = method(get('duration'), get('easeConfig'))
       }
       try {
-        await api.start({ clipPath: 'rect(0, 0px, 0px, 0px)' }, { easing })
-        await api.start({ x: '50%', position: 'fixed' }, { easing })
-        await api.start({ scale: 0.5 }, { easing })
+        await api.start({ scale: 1.5, rotate: 75 }, { easing })
+        await api.start({ scale: 1, rotate: 0, x: '50%' }, { easing })
+        await api.start({ clipPath: 'rect(0, 0px, 0px, 0px)', x: 0 }, { easing })
       } catch {}
     }),
     stop: button(() => api.stop())
   })
 
-  const [ref, api] = useAnimini<HTMLDivElement>()
+  const [ref, api] = useAnimate<HTMLDivElement>()
 
   return (
     <div className="flex fill center">

Diff for: demo/src/sandboxes/animini-config/src/styles.module.css

@@ -4,6 +4,7 @@
   border-radius: 4px;
   background-color: #ec625c;
   touch-action: none;
-  transform: translate(10%);
+  transform: translate(10%) rotate(45deg);
+  transform-origin: top;
   clip-path: inset(10px 20px 30px 40px);
 }

Diff for: demo/src/sandboxes/animini-drag/package.json

@@ -4,6 +4,7 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@leva-ui/plugin-spring": "*",
+    "@animini/dom": "*",
     "@animini/react-dom": "*",
     "@use-gesture/react": "*",
     "leva": "*",

Diff for: demo/src/sandboxes/animini-drag/src/App.tsx

@@ -1,7 +1,7 @@
 import { useDrag } from '@use-gesture/react'
 import { useControls } from 'leva'
 import { spring as levaSpring } from '@leva-ui/plugin-spring'
-import { useAnimini, spring, lerp } from '@animini/react-dom'
+import { useAnimate, spring, lerp } from '@animini/react-dom'
 import styles from './styles.module.css'
 
 export default function App() {
@@ -12,7 +12,7 @@ export default function App() {
     springConfig: levaSpring({ render: (get) => get('easeMethod') === spring })
   })
 
-  const [ref, api] = useAnimini<HTMLDivElement>()
+  const [ref, api] = useAnimate<HTMLDivElement>()
   const easing = easeMethod(easeMethod === lerp ? { factor } : springConfig)
 
   useDrag(

Diff for: demo/src/sandboxes/animini-inertia/src/App.tsx

@@ -1,10 +1,10 @@
 import { useDrag } from '@use-gesture/react'
-import { useAnimini, inertia } from '@animini/react-dom'
+import { useAnimate, inertia } from '@animini/react-dom'
 import { useControls } from 'leva'
 import styles from './styles.module.css'
 
 export default function App() {
-  const [ref, api] = useAnimini<HTMLDivElement>()
+  const [ref, api] = useAnimate<HTMLDivElement>()
   const { limitXY } = useControls({
     limitXY: {
       value: { x: 200, y: 200 },

Diff for: demo/src/sandboxes/animini-perf/package.json

@@ -7,10 +7,10 @@
     "@animini/react-dom": "*",
     "@react-spring/web": "^9.4.5",
     "animejs": "^3.2.1",
-    "framer-motion": "^6.3.3",
+    "framer-motion": "^6.3.11",
     "gsap": "^3.10.4",
     "leva": "0.9.25",
-    "motion": "^10.8.1",
+    "motion": "^10.10.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "tinycolor2": "^1.4.2",

Diff for: demo/src/sandboxes/animini-perf/src/App.jsx

@@ -1,14 +1,14 @@
 import { useState } from 'react'
 import { useControls, button } from 'leva'
 import tinycolor from 'tinycolor2'
-import AniminiBox from './Boxes/AniminiBox'
-import AniminiVanillaBox from './Boxes/AniminiVanillaBox'
-import SpringBox from './Boxes/SpringBox'
-import MotionBox from './Boxes/MotionBox'
-import GsapBox from './Boxes/GsapBox'
-import FramerMotionBox from './Boxes/FramerMotionBox'
-import FatBox from './Boxes/FatBox'
-import AnimeBox from './Boxes/AnimeBox'
+import Animini from './Boxes/AniminiBox'
+import AniminiVanilla from './Boxes/AniminiVanillaBox'
+import ReactSpring from './Boxes/SpringBox'
+import Motion from './Boxes/MotionBox'
+import Gsap from './Boxes/GsapBox'
+import FramerMotion from './Boxes/FramerMotionBox'
+import FatJS from './Boxes/FatBox'
+import AnimeJS from './Boxes/AnimeBox'
 
 const COUNT = 4000
 
@@ -42,7 +42,7 @@ export default function Perf() {
   const { count, Model: Box } = useControls({
     count: { value: 1000, min: 100, max: 4000 },
     Model: {
-      options: { AniminiBox, AniminiVanillaBox, AnimeBox, SpringBox, MotionBox, FramerMotionBox, GsapBox, FatBox }
+      options: { Animini, AniminiVanilla, AnimeJS, ReactSpring, Motion, FramerMotion, Gsap, FatJS }
     },
     Shuffle: button(() => {
       const ts = performance.now()

Diff for: demo/src/sandboxes/animini-perf/src/Boxes/AniminiBox.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { useAnimini, spring } from '@animini/react-dom'
+import { useAnimate, spring } from '@animini/react-dom'
 
 const config = { easing: spring() }
 
 export default function Box({ x, y, backgroundColor, scale, style }) {
-  const [ref, api] = useAnimini()
+  const [ref, api] = useAnimate()
 
   useEffect(() => {
     api.start({ x, y, backgroundColor, scale }, config)

Diff for: demo/src/sandboxes/animini-perf/src/Boxes/AniminiVanillaBox.jsx

@@ -5,11 +5,9 @@ const config = { easing: spring() }
 
 export default function Box({ x, y, backgroundColor, scale, style }) {
   const ref = useRef()
-  const apiRef = useRef()
 
   useEffect(() => {
-    apiRef.current = apiRef.current || animate(ref.current)
-    apiRef.current.start({ x, y, backgroundColor, scale }, config)
+    animate({ el: ref.current, ...config }, { x, y, backgroundColor, scale })
   }, [x, y, backgroundColor, scale])
 
   return <div ref={ref} style={style} />

Diff for: demo/src/sandboxes/animini-scroll/src/App.tsx

@@ -1,5 +1,5 @@
 import { useControls, button } from 'leva'
-import { useAnimini } from '@animini/react-dom'
+import { useAnimate } from '@animini/react-dom'
 
 import styles from './styles.module.css'
 
@@ -10,11 +10,11 @@ export default function App() {
     'scroll to top': button(() => api.start({ scrollTop: 0 }))
   })
 
-  const [ref, api] = useAnimini<HTMLDivElement>()
+  const api = useAnimate({ el: window })
 
   return (
-    <div className="flex fill center">
-      <div className={styles.scroller} ref={ref}>
+    <div className="flex center">
+      <div className={styles.scroller}>
         <div>
           <div>
             Introduction Any Fraoch Heather Ale can find lice on some sudsy dude, but it takes a real Full Sail IPA to

Diff for: demo/src/sandboxes/animini-scroll/src/styles.module.css

@@ -1,7 +1,7 @@
 .scroller {
   width: 100vw;
-  height: 100vh;
-  overflow: scroll;
+  /* height: 100vh; */
+  /* overflow: scroll; */
   line-height: 1.6;
   font-size: 2.2em;
   font-weight: 600;

Diff for: demo/src/sandboxes/animini-three-perf/src/App.jsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react'
 import * as THREE from 'three'
 import { Canvas } from '@react-three/fiber'
-import { useAnimini, spring } from '@animini/react-three'
+import { useAnimate, spring } from '@animini/react-three'
 import { useControls } from 'leva'
 import { spring as levaSpring } from '@leva-ui/plugin-spring'
 
 const colors = ['#A2CCB6', '#FCEEB5', '#EE786E', '#e0feff']
 
 function Box({ position, scale, rotation, color }) {
-  const [mesh, setMesh] = useAnimini()
-  const [material, setMaterial] = useAnimini()
+  const [mesh, setMesh] = useAnimate()
+  const [material, setMaterial] = useAnimate()
   const { springConfig } = useControls({ springConfig: levaSpring() })
 
   useLayoutEffect(() => {

Diff for: demo/src/sandboxes/animini-three/src/App.tsx

@@ -1,4 +1,4 @@
-import { useAnimini } from '@animini/react-three'
+import { useAnimate } from '@animini/react-three'
 import { useControls, button } from 'leva'
 import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
@@ -7,9 +7,9 @@ import * as THREE from 'three'
 const torusknot = new THREE.TorusKnotBufferGeometry(3, 0.8, 256, 16)
 
 const Mesh = () => {
-  const [mat, apiMat] = useAnimini<THREE.MeshPhysicalMaterial>()
+  const [mat, apiMat] = useAnimate<THREE.MeshPhysicalMaterial>()
 
-  const [ref, api] = useAnimini<THREE.Mesh>()
+  const [ref, api] = useAnimate<THREE.Mesh>()
   useControls({
     changeColor: button(() => apiMat.start({ color: 'rgb(255,0,0)' })),
     changeScale: button(() => api.start({ scale: { x: 2, y: 1, z: 2 } })),

Diff for: package.json

@@ -31,13 +31,13 @@
   "size-limit": [
     {
       "name": "react-dom",
-      "import": "{ useAnimini }",
-      "limit": "3 KB",
+      "import": "{ useAnimate }",
+      "limit": "5 KB",
       "path": "packages/react-dom/dist/*.esm.js"
     },
     {
       "name": "react-three",
-      "import": "{ useAnimini }",
+      "import": "{ useAnimate }",
       "limit": "3 KB",
       "path": "packages/react-three/dist/*.esm.js",
       "ignore": [
@@ -56,35 +56,35 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@changesets/cli": "^2.22.0",
+    "@changesets/cli": "^2.23.0",
     "@preconstruct/cli": "^2.1.5",
-    "@react-three/fiber": "^8.0.19",
+    "@react-three/fiber": "^8.0.24",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.4",
-    "@types/three": "^0.140.0",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
+    "@types/three": "^0.141.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "all-contributors-cli": "^6.20.0",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.1",
-    "jest": "^28.1.0",
-    "pnpm": "^7.1.7",
-    "prettier": "^2.6.2",
+    "jest": "^28.1.1",
+    "pnpm": "^7.2.1",
+    "prettier": "^2.7.0",
     "pretty-quick": "^3.1.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "size-limit": "^7.0.8",
-    "ts-jest": "^28.0.3",
-    "tsd": "^0.20.0",
     "three": "^0.141.0",
-    "typescript": "^4.7.2"
+    "ts-jest": "^28.0.5",
+    "tsd": "^0.21.0",
+    "typescript": "^4.7.3"
   },
   "prettier": {
     "printWidth": 120,