feat: useTransition rewrite

CONTRIBUTING.md

@@ -56,6 +56,14 @@ React 16.8+ has global state to support its "hooks" feature, so you need to ensu
 
 # Publishing
 
-Run `yarn bump` to analyze commits and increment the version of any updated packages.
+To publish a new version:
 
-Run `yarn release` to publish any packages with a new version.
+```
+yarn release
+```
+
+To publish a **canary** version:
+
+```
+yarn release --canary
+```

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-beta.34",
+  "version": "9.0.0-canary.809.5.f01ecc2",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
@@ -17,10 +17,8 @@
       "push": false
     },
     "publish": {
-      "bump": "from-package",
       "contents": "dist",
-      "ignoreScripts": true,
-      "preDistTag": "next"
+      "ignoreScripts": true
     }
   }
 }

package.json

@@ -38,10 +38,9 @@
   },
   "scripts": {
     "build": "bic",
-    "bump": "lerna version && yarn --force",
     "clean": "lerna exec --parallel --no-bail -- rimraf node_modules dist .rpt2_cache .bic_cache",
-    "prepare": "node ./scripts/prepare.js && bic",
-    "release": "lerna publish",
+    "prepare": "node ./scripts/prepare.js && bic && yarn test:ts",
+    "release": "node ./scripts/release.js",
     "test": "jest",
     "test:cov": "jest --coverage",
     "test:ts": "cd packages/react-spring && tsc -p . --noEmit"
@@ -66,6 +65,8 @@
     "@types/react": "^16.8.19",
     "build-if-changed": "^1.5.0",
     "chalk": "^2.4.2",
+    "enquirer": "^2.3.2",
+    "execa": "^2.0.4",
     "fs-extra": "7.0.1",
     "husky": "1.3.1",
     "jest": "^24.8.0",
@@ -84,6 +85,7 @@
     "rollup-plugin-node-resolve": "4.0.0",
     "rollup-plugin-terser": "5.0.0",
     "rollup-plugin-typescript2": "0.21.1",
+    "sade": "^1.6.1",
     "sort-package-json": "1.22.1",
     "spec.ts": "1.1.3",
     "ts-jest": "^24.0.2",

packages/addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spring/addons",
-  "version": "next",
+  "version": "9.0.0-canary.809.5.f01ecc2",
   "main": "src/index.ts",
   "dependencies": {
     "@react-spring/animated": "link:../animated",

packages/addons/src/parallax.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   CSSProperties,
 } from 'react'
-import { requestAnimationFrame, defaultElement as View } from 'shared/globals'
+import { frameLoop, defaultElement as View } from 'shared/globals'
 import { Controller, SpringConfig, config as configs } from '@react-spring/core'
 import { withAnimated } from '@react-spring/animated'
 import { useMemoOne } from 'use-memo-one'
@@ -239,7 +239,7 @@ export const Parallax = React.memo(
       if (!state.busy) {
         state.busy = true
         state.current = event.target[getScrollType(horizontal)]
-        requestAnimationFrame(() => {
+        frameLoop.onFrame(() => {
           state.layers.forEach(layer =>
             layer.setPosition(state.space, state.current)
           )
@@ -254,7 +254,7 @@ export const Parallax = React.memo(
 
       const onResize = () => {
         const update = () => state.update()
-        requestAnimationFrame(update)
+        frameLoop.onFrame(update)
         setTimeout(update, 150) // Some browsers don't fire on maximize!
       }
 

packages/animated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spring/animated",
-  "version": "next",
+  "version": "9.0.0-canary.809.5.f01ecc2",
   "description": "Animated component props for React",
   "main": "src/index.ts",
   "scripts": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spring/core",
-  "version": "next",
+  "version": "9.0.0-canary.809.5.f01ecc2",
   "main": "src/index.ts",
   "scripts": {
     "build": "rollup -c",

packages/core/src/helpers.ts

@@ -109,88 +109,6 @@ export function interpolateTo<T extends object>(props: T): InterpolateTo<T> {
   return out
 }
 
-type ItemKey = number | string
-
-interface Item {
-  key: ItemKey
-  originalKey: ItemKey
-  phase: string
-  item: any
-  props: object
-  destroyed?: boolean
-}
-
-interface DeletedItem extends Item {
-  left?: ItemKey
-  right?: ItemKey
-}
-
-/**
- * This tries to put deleted items back into the given `out` list in correct
- * order. Deleted items must have a `left` and `right` property with key of
- * their sibling which is used to find the correct placement.
- */
-export function reconcileDeleted(
-  deleted: DeletedItem[],
-  current: Item[]
-): any[] {
-  // Copy as we will be mutating the arrays
-  deleted = [...deleted]
-  current = [...current]
-
-  // Used to detect deadlock (when a pass finds 0 siblings)
-  let failedTries = 0
-
-  // Track where the current pass start/ends
-  let passIndex = 0
-  let nextPassIndex = deleted.length
-
-  // Insert all deleted items into `current`
-  for (let i = 0; i < deleted.length; i++) {
-    if (i === nextPassIndex) {
-      // Sanity test: Push to end if somehow no siblings were found
-      if (passIndex + failedTries === nextPassIndex) {
-        for (let j = i; j < deleted.length; j++) {
-          const { left, right, ...deletedItem } = deleted[j]
-          current.push(deletedItem)
-        }
-        break
-      }
-      // Update local state at the end of each pass
-      passIndex = nextPassIndex
-      nextPassIndex = deleted.length
-      failedTries = 0
-    }
-
-    // The index of the deleted item in `current`
-    let index = -1
-
-    // Look for the left or right sibling in `current`
-    const { left, right, ...deletedItem } = deleted[i]
-    for (let j = current.length; --j >= 0; ) {
-      const { originalKey: key } = current[j]
-      if (key === right) {
-        index = j
-        break
-      }
-      if (key === left) {
-        index = j + 1
-        break
-      }
-    }
-
-    // Items with no index are revisited in the next pass
-    if (index < 0) {
-      failedTries++
-      deleted.push(deleted[i])
-    } else {
-      current.splice(index, 0, deletedItem)
-    }
-  }
-
-  return current
-}
-
 export function freeze<T extends object>(obj: T): T {
   if (
     typeof process !== 'undefined' &&

packages/core/src/legacy.js

@@ -16,15 +16,6 @@ export function Trail({ items, children, ...props }) {
   })
 }
 
-export function Transition({ items, keys = null, children, ...props }) {
-  const transitions = useTransition(items, keys, props)
-  return transitions.map(({ item, key, props, phase }, index) => {
-    const result = children(item, phase, index)
-    const element = is.fun(result) ? result(props) : result
-    return element && element.type ? (
-      <element.type {...element.props} key={key} ref={element.ref} />
-    ) : (
-      element
-    )
-  })
+export function Transition({ items, children, ...props }) {
+  return useTransition(items, props)(children)
 }