Skip to content

fix(animation): add stronger types to Animation interface - #28334

Merged
liamdebeasi merged 2 commits into
feature-7.6from
2832-anim-interface
Oct 19, 2023
Merged

fix(animation): add stronger types to Animation interface#28334
liamdebeasi merged 2 commits into
feature-7.6from
2832-anim-interface

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Oct 11, 2023

Copy link
Copy Markdown
Contributor

Issue number: Internal


What is the current behavior?

As part of FW-2832, the team would like to swap out usages of the any type for stronger types.

What is the new behavior?

  • getWebAnimations now has the proper global Animation type
  • from, to, and fromTo now have stricter types. One thing to note about this is the Web Animation types technically allow null or undefined values in addition to string and number. However, this will cause the animation to not run with a warning logged in the console. Developers can currently pass null or undefined (or any other primitive) to the Ionic animation methods, but that will also cause the animation to not run. Given that the animation does not run, I don't see the point in allowing the types in the first place.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Note: This PR was separated from other type updates associated with the FW-3832 work because I had to modify the implementation of a feature in Ionic. While I don't expect there to be any functional differences, I have opted to pull this work out into a separate branch and target a feature branch to a) reduce the impact of any unintended bugs and b) make it easier to do a git bisect if a bug is introduced.

@github-actions github-actions Bot added the package: core @ionic/core package label Oct 11, 2023
@liamdebeasi liamdebeasi changed the title add types to Animation interface fix(animation): add stronger types to Animation interface Oct 12, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review October 18, 2023 13:29
@liamdebeasi
liamdebeasi requested review from a team and brandyscarney and removed request for a team October 18, 2023 13:30
@liamdebeasi
liamdebeasi merged commit 4a088d5 into feature-7.6 Oct 19, 2023
@liamdebeasi
liamdebeasi deleted the 2832-anim-interface branch October 19, 2023 15:55
github-merge-queue Bot pushed a commit that referenced this pull request Oct 23, 2023
Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

As part of FW-2832, the team would like to swap out usages of the any
type for stronger types.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->


c529bc2
- `scrollToTop` doesn't return anything, so I added the `void` return
type


a96971a
- `animation.effect` is a type of
[AnimationEffect](https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect).
One of the more common types of effects is a `KeyframeEffect`. However,
TypeScript doesn't know which specific type of AnimationEffect we are
using, so I cast `animation.effect` as KeyframeEffect where appropriate.
- I also added `!` to places where we know the effect and other
properties are always defined (since they run after the web animation
has been constructed)
- Added stronger types to the internal to/from/fromTo functions (the
public facing type improvements are in
#28334)


fdaf550
- `getRootNode` can return multiple types of objects, so I cast it to
the specific types that we work with in `isFocused`.


46a6efa
- Added the "Animation" type and resolved related errors once we had
stronger types


a7cb9a5
- Made heavier use of the `T` generic
- Once we know `node` is an Element (`nodeType === 1`) we manually cast
the element as `T`


6a9d1f0
- The focus visible utility is an internal utility, but it was lacking
an interface, so I added one.


90b64c2
- Removed unneeded HTMLElement casting
- Added `!` since we can assume the selected elements are defined with
the refresher
- Added documentation as to why casting `referencEl.style` as `any` is
something we need to keep.


3a084ca
- Avoided the Event naming collision by using globalThis

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Note: This PR contains only type changes. Changes the required updates
to the implementation of Ionic are pulled out into separate PRs and
target a minor release branch to minimize risk.

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
sean-perkins pushed a commit that referenced this pull request Oct 27, 2023
Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

As part of FW-2832, the team would like to swap out usages of the any
type for stronger types.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->


c529bc2
- `scrollToTop` doesn't return anything, so I added the `void` return
type


a96971a
- `animation.effect` is a type of
[AnimationEffect](https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect).
One of the more common types of effects is a `KeyframeEffect`. However,
TypeScript doesn't know which specific type of AnimationEffect we are
using, so I cast `animation.effect` as KeyframeEffect where appropriate.
- I also added `!` to places where we know the effect and other
properties are always defined (since they run after the web animation
has been constructed)
- Added stronger types to the internal to/from/fromTo functions (the
public facing type improvements are in
#28334)


fdaf550
- `getRootNode` can return multiple types of objects, so I cast it to
the specific types that we work with in `isFocused`.


46a6efa
- Added the "Animation" type and resolved related errors once we had
stronger types


a7cb9a5
- Made heavier use of the `T` generic
- Once we know `node` is an Element (`nodeType === 1`) we manually cast
the element as `T`


6a9d1f0
- The focus visible utility is an internal utility, but it was lacking
an interface, so I added one.


90b64c2
- Removed unneeded HTMLElement casting
- Added `!` since we can assume the selected elements are defined with
the refresher
- Added documentation as to why casting `referencEl.style` as `any` is
something we need to keep.


3a084ca
- Avoided the Event naming collision by using globalThis

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Note: This PR contains only type changes. Changes the required updates
to the implementation of Ionic are pulled out into separate PRs and
target a minor release branch to minimize risk.

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants