Add View Traits and transitions

[carson-katri]

This adds _ViewTraitKey and related internal modifiers. Then transition builds on top of these traits.

Here's the transition demo:
https://user-images.githubusercontent.com/13581484/126044318-b2856cbb-56ed-4196-a0fd-6ea5c6c606c7.mov

It works by applying the transition's modifier to the a View on mount/update/unmount.

[MaxDesiatov]

Would it be possible to split the body of this function into multiple functions or some helper types to resolve the linter warning?

[MaxDesiatov]

Are these traits somehow different from SwiftUI accessibility traits? I can't find anything else about SwiftUI traits, just wondering what's used as a reference here.

[carson-katri]

SwiftUI has _ViewTraitKey internally, and uses them for transition, onDelete, onMove and some other modifiers (I think drag & drop?). From what I can tell, a trait is data attached to a single view, and in many cases seems to be a way to get the trait out of SwiftUI and into the host platform (for instance, for UITableView swipe actions or NSItemProvider-based drag & drop).

Although I'm really just speculating as to how SwiftUI uses them by looking at the swiftinterface. In Tokamak they are meant to be passed to the nearest host element so renderers can access them.

[filip-sakel]

Traits are also used for zIndex(_:) and layoutPriority(_:). I haven't look into whether Tokamak has implemented these modifiers. If they're not implemented, traits would be really helpful.

[ezraberch]

1. If you remove all but one of the items in the demo (leaving Text(".slide").transition(AnyTransition.slide), for example), the text will fade in and out instead of showing the proper transition.
2. For the following, the SwiftUI behavior is the first line slides while the second and third lines fade. With your code, the second and third lines both slide and fade.

Text(".slide")
  .transition(AnyTransition.slide)
VStack {
  Text(".slide").transition(AnyTransition.slide)
  Text(".slide").transition(AnyTransition.slide)
}

3. For the following, all 3 lines slide. However, unlike in SwiftUI, line 1 and lines 2-3 do not slide together when sliding out.

Text(".slide")
  .transition(AnyTransition.slide)
VStack {
  Text(".slide")
  Text(".slide")
}.transition(AnyTransition.slide)

4. If you click fast enough, you can see the same element multiple times.

[MaxDesiatov]

I realize these linter warnings are a bit annoying, but is it still possible to get it a bit slimmer and under 50 lines? Maybe would work better from code readability perspective too.

[carson-katri]

1-3 should be fixed.

[carson-katri]

My idea to fix 4 atm is to keep a list of unmountingViews (Views that haven't called the callback after unmounting yet), and keep those available for reconciliation, then cancel their removal if they are required to mount again.

[ezraberch]

1-3 should be fixed.

1 and 2 look good.

For 3, the slide-out looks good. However, for the slide-in, lines 2-3 just appear rather than sliding.

[ezraberch]

onDisappear is triggering before the animation rather than after. With the following additions/changes to the Demo:

@State private var showText = "Show"
...
Button(isVisible ? "Hide" : showText) {
...
Text(".opacity")
  .transition(AnyTransition.opacity)
  .onDisappear(perform: {
    showText = "Show Again"
})

In SwiftUI, the button text changes to "Show" when you click "Hide", then changes to "Show Again" when the animation is complete. With your code, it changes from "Hide" to "Show Again" immediately upon clicking "Hide".

[carson-katri]

For 3, the slide-out looks good. However, for the slide-in, lines 2-3 just appear rather than sliding.

Seems like it only affects .move (.slide)...

[carson-katri]

4 should be fixed now too.

[carson-katri]

onDisappear is triggering before the animation rather than after.

There's already a FIXME for both onAppear and onDisappear to be renderer-specific, so maybe we could defer that to a separate PR (#175 using something like the Intersection Observer API to check if the element is visible in the viewport)?

[ezraberch]

For 3, the slide-in is still behaving incorrectly.

For 4, the fix is causing another problem. If you switch from Transition to a different section of the demo while a transition is happening, the animating HTML will appear in the new section for the remaining duration of the transition animation.

[ezraberch]

Also, I'm now getting an error when rapidly pressing the inner button:

Fatal error: Attempted to read an unowned reference but object 0x733ee0 was already deallocated
Uncaught RuntimeError: unreachable

[carson-katri]

The slide-in bug should be fixed. Seems like the getComputedStyle function returns the transformation matrix in pixel values instead of percentages, which are incorrect because the children haven't been mounted yet. That's probably why it worked for single elements but not VStack. I disabled computing the start keyframe when the element is mounting to work around this.

[ezraberch]

Looks good!

You are getting a couple of linter warnings now, so you may want to refactor a bit before merge.

[MaxDesiatov]

👏