Fix parameter type of useTransform

[kena0ki]

Fixes #840

I added MotionValue<number>[] and MotionValue<string>[] to the type of the first parameter of the third useTransform function using union type.

* Changes about FramerTreeLayoutContext are resulted from previous commit.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 14b860c:

Sandbox	Source
Framer Motion: Simple animation	Configuration
App Store UI using React and Framer Motion	Configuration
Framer Motion: Reorder animation	Configuration
Framer Motion: growing item positionTransition issue	Configuration
Framer Motion: Image lightbox	Configuration
Framer Motion 2: AnimateSharedLayout animate between different components (forked)	Issue #840

[o-alexandrov]

Instead of union of three different options:

• MotionValue<string>[]
• MotionValue<number>[]
• MotionValue<string | number>[]

You can just define only

• (MotionValue<string> | MotionValue<number>)[]

[kena0ki]

@o-alexandrov
Thanks for the review. But for your definition, following code results in error,

  const str = useMotionValue("0px");
  const num = useMotionValue(0);
  useTransform([str, num], () => 0); // should be OK

and similar test case already exists.

motion/src/value/__tests__/use-transform.test.tsx

Lines 39 to 50 in dc571a6

	describe("as function with multiple values", () => {
	test("sets initial value", async () => {
	const Component = () => {
	const x = useMotionValue(4)
	const y = useMotionValue("5px")
	const z = useTransform(
	[x, y],
	([latestX, latestY]: [number, string]) =>
	latestX * parseFloat(latestY)
	)
	return <motion.div style={{ x, y, z }} />
	}

[o-alexandrov]

@kena0ki hello, thank you for the reply.
Are you sure you made the proposed adjustments?

I admit I typed the first message above from a phone not checking anything :D
But I just tested and have no issues, after making modifications to your code.

Typings work:

And if we try to cause an expected error, it throws:

[kena0ki]

@o-alexandrov
Are you sure strict or strictFunctionTypes in your tsconfig is true?
The issue only happens in strict mode.

[o-alexandrov]

Yeap, let me please share a screen recording as well.
Notes:

• did a window reload so there's no possibility of VSCode using old tsconfig settings
• showed .git changes to prevent a possibility of making it up

I don't have a permission to push to your branch, so I demonstrated via screenshots above and a video below.
Screen Recording 2020-11-15 at 2.36.30 AM.mov.zip

[kena0ki]

@o-alexandrov
Sorry, you are right. The above code doesn't cause error.
The code results in error (and I tested) is following.

  const strOrNum = useMotionValue(true?"0px":0); // MotionValue<string | number>
  useTransform([strOrNum, strOrNum], () => 0); // should be OK (at least current definition)

If this case is ignorable, I agree your suggestion is better.

[o-alexandrov]

Thank you for the clarification @kena0ki
I also checked this case, for some reason under strict the case you highlighted in the last message doesn't pass.
Of course, I'm just a random fan of framer-motion, so it's not my decision to make, but I suggest:

• to accept the proposed solution in this MR for the typings

There are two options of defining those types then, either:

| MotionValue<string>[]
| MotionValue<number>[]
| MotionValue<string | number>[]

or:

(
| MotionValue<string>
| MotionValue<number>
| MotionValue<string | number>
)[]

[o-alexandrov]

you might consider assigning this typings to a type variable and reuse it in the next function below

[o-alexandrov]

here

[kena0ki]

Thank you for the suggestions.
I think it depends on preference, so I want to leave the decision to maintainers. Until then, I'll leave the code as it is.
(Moreover another solution might be suggested, like just replacing to generics.)