fix: stop using typescript in renderprops API

Babel has a bug where a destructured object does not produce the expected variables, causing a reference error at runtime.

More info: #923

Author: aleclarson

packages/core/src/components/Spring.jsx

@@ -0,0 +1,5 @@
+import { useSpring } from '../hooks'
+
+export function Spring({ children, ...props }) {
+  return children(useSpring(props))
+}

packages/core/src/components/Spring.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { is } from 'shared'
+import { useTrail } from '../hooks'
+
+export function Trail({ items, children, ...props }) {
+  const trails = useTrail(items.length, props)
+  return (
+    <>
+      {items.map((item, index) => {
+        const result = children(item, index)
+        return is.fun(result) ? result(trails[index]) : result
+      })}
+    </>
+  )
+}

packages/core/src/components/Trail.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { useTransition } from '../hooks'
+
+export function Transition({ items, children, ...props }) {
+  return <>{useTransition(items, props)(children)}</>
+}

packages/core/src/components/Trail.tsx

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react'
+import { NoInfer, Falsy, UnknownProps } from 'shared'
+import { Valid } from '../types/common'
+import {
+  PickAnimated,
+  SpringValues,
+  SpringToFn,
+  SpringChain,
+  TransitionComponentProps,
+} from '../types'
+import { UseSpringProps } from '../hooks/useSpring'
+
+//
+// <Spring>
+//
+
+export type SpringComponentProps<
+  State extends object = UnknownProps
+> = unknown &
+  UseSpringProps<State> & {
+    children: (values: SpringValues<State>) => JSX.Element | null
+  }
+
+// This overload infers `State` using the `from` object prop.
+export function Spring<State extends object>(
+  props: {
+    from: State
+    to?: SpringChain<NoInfer<State>> | SpringToFn<NoInfer<State>>
+  } & Omit<SpringComponentProps<NoInfer<State>>, 'from' | 'to'>
+): JSX.Element | null
+
+// This overload infers `State` using the `to` object prop.
+export function Spring<State extends object>(
+  props: { to: State } & Omit<SpringComponentProps<NoInfer<State>>, 'to'>
+): JSX.Element | null
+
+//
+// <Transition>
+//
+
+export function Transition<
+  Item extends any,
+  Props extends TransitionComponentProps<Item>
+>({
+  items,
+  children,
+  ...props
+}:
+  | TransitionComponentProps<Item>
+  | (Props & Valid<Props, TransitionComponentProps<Item, Props>>)): JSX.Element
+
+export type TrailComponentProps<Item, Props extends object = any> = unknown &
+  UseSpringProps<Props> & {
+    items: readonly Item[]
+    children: (
+      item: NoInfer<Item>,
+      index: number
+    ) => ((values: SpringValues<PickAnimated<Props>>) => ReactNode) | Falsy
+  }
+
+//
+// <Trail>
+//
+
+export function Trail<Item, Props extends TrailComponentProps<Item>>({
+  items,
+  children,
+  ...props
+}: Props & Valid<Props, TrailComponentProps<Item, Props>>): JSX.Element

packages/core/src/components/Transition.jsx

@@ -0,0 +1,3 @@
+export { Spring } from './Spring'
+export { Trail } from './Trail'
+export { Transition } from './Transition'

packages/core/src/components/Transition.tsx

@@ -9,7 +9,7 @@ import { terser } from 'rollup-plugin-terser'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = id => !id.startsWith('.') && !id.startsWith(root)
-const extensions = ['.tsx', '.ts', '.js']
+const extensions = ['.tsx', '.ts', '.js', '.jsx']
 const packages = readPackages()
 const packageNames = Object.keys(packages)