v9 canary

.npmignore

@@ -0,0 +1 @@
+*.log

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
+```

babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    '@babel/typescript',
+    '@babel/react',
+    [
+      '@babel/env',
+      {
+        exclude: [
+          'transform-async-to-generator',
+          'transform-classes',
+          'transform-regenerator',
+        ],
+      },
+    ],
+  ],
+}

jest.config.js

@@ -36,35 +36,28 @@ function createConfig(rootDir) {
   const { compilerOptions } = fs.readJsonSync(
     path.join(rootDir, 'tsconfig.json')
   )
-  compilerOptions.allowJs = true
-  compilerOptions.noEmitOnError = false
   return {
     rootDir,
-    transform: {
-      '.+\\.(js|ts|tsx)$': 'ts-jest',
-    },
+    setupFilesAfterEnv:
+      rootDir.indexOf('shared') < 0
+        ? [path.join(__dirname, 'packages/core/test/setup.ts')]
+        : [],
     testMatch,
     testEnvironment: 'jsdom',
     testPathIgnorePatterns: ['.+/(types|__snapshots__)/.+'],
     modulePathIgnorePatterns: ['dist'],
-    moduleFileExtensions: ['ts', 'tsx', 'js'],
     moduleNameMapper: {
-      ...getModuleNameMapper(compilerOptions),
+      ...getModuleNameMapper(compilerOptions.paths),
       '^react$': '<rootDir>/../../node_modules/react',
     },
     collectCoverageFrom: ['src/**/*'],
     coverageDirectory: './coverage',
     coverageReporters: ['json', 'html', 'text'],
-    globals: {
-      'ts-jest': {
-        diagnostics: false,
-        tsConfig: compilerOptions,
-      },
-    },
+    timers: 'fake',
   }
 }
 
-function getModuleNameMapper({ paths }) {
+function getModuleNameMapper(paths) {
   if (!paths) return
   const map = pathsToModuleNameMapper(paths)
   for (const key in map) {

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-beta.34",
+  "version": "9.0.0-canary.808.17.55c5691",
   "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

@@ -1,7 +1,7 @@
 {
   "name": "@react-spring/lerna",
   "private": true,
-  "description": "Cross-platform animation engine",
+  "description": "Cross-platform animation engine for React",
   "keywords": [
     "animated",
     "animation",
@@ -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"
@@ -55,39 +54,43 @@
     "@babel/runtime": "^7.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.2.2",
-    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "7.3.2",
-    "@babel/plugin-transform-modules-commonjs": "7.4.4",
-    "@babel/plugin-transform-runtime": "7.4.4",
-    "@babel/preset-env": "7.3.1",
-    "@babel/preset-react": "7.0.0",
+    "@babel/core": "~7.9.0",
+    "@babel/plugin-proposal-class-properties": "~7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "~7.9.5",
+    "@babel/plugin-transform-modules-commonjs": "~7.9.0",
+    "@babel/plugin-transform-runtime": "~7.9.0",
+    "@babel/preset-env": "~7.9.5",
+    "@babel/preset-react": "~7.9.4",
+    "@babel/preset-typescript": "~7.9.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/jest": "^24.0.13",
     "@types/react": "^16.8.19",
     "build-if-changed": "^1.5.0",
     "chalk": "^2.4.2",
+    "enquirer": "^2.3.2",
+    "execa": "^2.0.4",
+    "flush-microtasks": "^1.0.1",
     "fs-extra": "7.0.1",
     "husky": "1.3.1",
-    "jest": "^24.8.0",
+    "jest": "^25.1.0",
     "jest-watch-typeahead": "^0.3.1",
     "lerna": "3.15.0",
     "meta": "^1.2.19",
     "mock-raf": "npm:@react-spring/mock-raf",
-    "prettier": "^1.18.2",
+    "prettier": "1.19.1",
     "pretty-quick": "1.10.0",
     "react": "~16.9.0",
     "recrawl-sync": "^1.2.2",
     "rimraf": "2.6.3",
-    "rollup": "^1.14.4",
-    "rollup-plugin-babel": "4.3.2",
-    "rollup-plugin-dts": "^1.1.0",
-    "rollup-plugin-node-resolve": "4.0.0",
+    "rollup": "^2.6.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-dts": "^1.4.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",
-    "typescript": "3.6.2",
+    "ts-jest": "24.2.0",
+    "typescript": "3.8.3",
     "typescript-rewrite-paths": "^1.2.0"
   },
   "publishConfig": {

packages/animated/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@react-spring/animated",
-  "version": "9.0.0-beta.33",
+  "version": "9.0.0-canary.808.17.55c5691",
   "description": "Animated component props for React",
   "main": "src/index.ts",
   "scripts": {
     "build": "rollup -c"
   },
   "dependencies": {
-    "@react-spring/shared": "link:../shared",
-    "tiny-invariant": "^1.0.4"
+    "react-layout-effect": "^1.0.1",
+    "shared": "link:../shared"
   },
   "publishConfig": {
     "directory": "dist"

packages/animated/src/Animated.ts

@@ -1,43 +1,52 @@
+import { FluidValue, defineHidden } from 'shared'
 import { AnimatedValue } from './AnimatedValue'
-export const animatedTag = Symbol.for('isAnimated')
 
-export const isAnimated = (val: any): val is Animated =>
-  !!(val && val[animatedTag])
+const $node: any = Symbol.for('Animated:node')
 
-export abstract class Animated {
-  protected [animatedTag] = true
-  protected children = new Set<Animated>()
-  protected payload?: Set<AnimatedValue>
+export const isAnimated = <T = any>(value: any): value is Animated<T> =>
+  !!value && value[$node] === value
 
-  /** Returns all values contained by this node. Pass true for only the animated values. */
-  abstract getValue(animated?: boolean): any
+/** Get the owner's `Animated` node. */
+export const getAnimated = <T = any>(owner: any): Animated<T> | undefined =>
+  owner && owner[$node]
 
-  /** Returns the set of `AnimatedValue` nodes contained by this node. */
-  getPayload(): ReadonlySet<AnimatedValue> {
-    return this.payload!
-  }
+/** Set the owner's `Animated` node. */
+export const setAnimated = (owner: any, node: Animated) =>
+  defineHidden(owner, $node, node)
 
-  /** Replace an `AnimatedValue` node in the payload. */
-  abstract updatePayload(prev: Animated, next: Animated): void
+/** Get every `AnimatedValue` in the owner's `Animated` node. */
+export const getPayload = (owner: any): AnimatedValue[] | undefined =>
+  owner && owner[$node] && owner[$node].getPayload()
 
-  /** Returns the set of animated nodes that depend on this node. */
-  getChildren(): ReadonlySet<Animated> {
-    return this.children
-  }
+export abstract class Animated<T = any> {
+  /** The cache of animated values */
+  protected payload?: Payload
 
-  addChild(child: Animated) {
-    this.children.size || this._attach()
-    this.children.add(child)
+  constructor() {
+    // This makes "isAnimated" return true.
+    setAnimated(this, this)
   }
 
-  removeChild(child: Animated) {
-    this.children.delete(child)
-    this.children.size || this._detach()
+  /** Get the current value. Pass `true` for only animated values. */
+  abstract getValue(animated?: boolean): T
+
+  /** Set the current value. */
+  abstract setValue(value: T): void
+
+  /** Reset any animation state. */
+  abstract reset(goal?: T): void
+
+  /** Get every `AnimatedValue` used by this node. */
+  getPayload(): Payload {
+    return this.payload || []
   }
 
-  /** Called when this node goes from 0 children to 1+ children. */
-  abstract _attach(): void
+  /** The `AnimatedProps` class sets this before initializing */
+  static context: TreeContext | null = null
+}
+
+export type Payload = readonly AnimatedValue[]
 
-  /** Called when this node goes from 1+ children to 0 children. */
-  abstract _detach(): void
+export type TreeContext = {
+  dependencies: Set<FluidValue>
 }

packages/animated/src/AnimatedArray.ts

@@ -1,52 +1,50 @@
-import { is, Animatable, SpringValue, InterpolatorArgs, each } from 'shared'
-import { deprecateInterpolate } from 'shared/deprecations'
-import { Animated } from './Animated'
-import { AnimatedObject, toPayload } from './AnimatedObject'
-import { to } from './interpolate'
-import invariant from 'tiny-invariant'
+import { isAnimatedString, each } from 'shared'
+import { AnimatedObject } from './AnimatedObject'
+import { AnimatedString } from './AnimatedString'
+import { AnimatedValue } from './AnimatedValue'
+
+type Value = number | string
+type Source = AnimatedValue<Value>[]
 
 /** An array of animated nodes */
-export class AnimatedArray extends AnimatedObject
-  implements SpringValue<any[]> {
-  protected source!: Animated[]
-  constructor(source: Animated[]) {
-    super(source)
+export class AnimatedArray<
+  T extends ReadonlyArray<Value> = Value[]
+> extends AnimatedObject {
+  protected source!: Source
+  constructor(from: T, to?: T) {
+    super(null)
+    super.setValue(this._makeAnimated(from, to))
   }
 
-  getValue(animated?: boolean) {
-    return this.source.map(node => node.getValue(animated))
+  static create<T extends ReadonlyArray<Value>>(from: T, to?: T) {
+    return new AnimatedArray(from, to)
   }
 
-  setValue(value: any, flush?: boolean) {
-    const nodes = this.payload
-    if (is.arr(value)) {
-      invariant(value.length == nodes.size)
-      let i = 0
-      each(nodes, node => node.setValue(value[i++], flush))
-    } else {
-      each(nodes, node => node.setValue(value, flush))
-    }
+  getValue(): T {
+    return this.source.map(node => node.getValue()) as any
   }
 
-  to<Out extends Animatable>(
-    ...args: InterpolatorArgs<any[], Out>
-  ): SpringValue<Out> {
-    return (to as any)(this, ...args)
-  }
-
-  interpolate<Out extends Animatable>(
-    ...args: InterpolatorArgs<any[], Out>
-  ): SpringValue<Out> {
-    deprecateInterpolate()
-    return this.to(...args)
+  setValue(newValue: T | null) {
+    const payload = this.getPayload()
+    // Reuse the payload when lengths are equal.
+    if (newValue && newValue.length == payload.length) {
+      each(payload, (node, i) => node.setValue(newValue[i]))
+    } else {
+      // Remake the payload when length changes.
+      this.source = this._makeAnimated(newValue)
+      this.payload = this._makePayload(this.source)
+    }
   }
 
-  updatePayload(prev: Animated, next: Animated) {
-    const source = [...this.source]
-    each(source, (val, index) => {
-      if (val === prev) source[index] = next
-    })
-    this.source = source
-    this.payload = toPayload(source)
+  /** Convert the `from` and `to` values to an array of `Animated` nodes */
+  protected _makeAnimated(from: T | null, to: T = from!) {
+    return from
+      ? from.map((from, i) =>
+          (isAnimatedString(from) ? AnimatedString : AnimatedValue).create(
+            from,
+            to[i]
+          )
+        )
+      : []
   }
 }