prateekbh / liquid-route

Animated routing FTW

Hello!

I work with Coinbase on their web and javaScript infrastructure. We focus on shipping better quality code and enabling our engineers to ship better and robust features faster to our consumers. I am also pretty focused on the performance of our client code that we ship via our web products and react antive apps. Previously I contributed to next.js and Preact

If you wanna discuss stuff around web or ask me anything use this link.

liquid-route's Issues

Animation is reversed the second time it runs

I'm curious why you added the reversed animation on exit animation finish: https://github.com/prateekbh/liquid-route/blob/master/Components/LiquidRoute/LiquidAnimator.jsx#L37

It is causing a bug for me where my route transition is messed up/reversed every other time it runs. I removed the reverse animation logic in componentWillLeave and it fixes the issue. Curious if anyone else is seeing this as it seems to be a pretty big bug. I'll go ahead and submit a PR.

Preact X support?

I am having problems using liquid-route with project upgraded from Preact 8 to Preact X;

When visiting /login, nothing is rendered with this:
<LiquidRoute animator={PopAnimation} path="/login" component={Login}/>
but changing it to not use liquid-route, like this, works:
Route path="/login" component={Login} /> or <Login path="/login"/>

liquid-route worked perfectly in Preact 8, but not in Preact X.
I have seen that you have deprecated AsyncRoute, so what is the fate of LiquidRoute?

Undefined vnode?

Hi.

I'm trying to wrap <LiquidRoute> in a custom component to handle authorisation:

  <Router>
    <AuthRoute>
      <LiquidRoute animator={FadeAnimation} path="/test" component={Test} />
    </AuthRoute>
  </Router>

AuthRoute looks like this:

import { h, Component } from "preact"
import { route } from "preact-router"
import { STORAGE_USER } from "../conf.js"

class AuthRoute extends Component {
  constructor() {
    super()
  }

  componentWillMount() {
    if (! localStorage.getItem(STORAGE_USER)) {
      route("/")
    }
  }

  render(props) {
    return (
        <div>{props.children}</div>
    )
  }
}

export default AuthRoute

This results in the following error in Firefox:

TypeError: vnode.attributes is undefined
rankChild
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:86:2
prepareVNodeForRanking
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:69:15
filter self-hosted:318:17 getMatchingChildren
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:315:10
render
webpack-internal:///./node_modules/preact-router/dist/preact-router.es.js:335:16
renderComponent
webpack-internal:///./node_modules/preact/dist/preact.mjs:526:14
renderComponent
webpack-internal:///./node_modules/preact/dist/preact.mjs:554:5
setComponentProps
webpack-internal:///./node_modules/preact/dist/preact.mjs:475:4
buildComponentFromVNode
webpack-internal:///./node_modules/preact/dist/preact.mjs:641:3
idiff
webpack-internal:///./node_modules/preact/dist/preact.mjs:252:10
diff
webpack-internal:///./node_modules/preact/dist/preact.mjs:213:12
render
webpack-internal:///./node_modules/preact/dist/preact.mjs:708:10
<anonymous>
webpack-internal:///./src/index.js:123:2
./src/index.js
<snipped>

`LiquidRoute` breaks the normal scrolling behavior

When routing, the scroll position of the new route seems to be the one from the previous route.
For example if I have a List of 500 articles and I scroll to the #300 and route to the article details the scroll position is a the bottom of the page.

Note
I'm using preact-mdl LayoutContent, this bug may only be present in this case.

Workaround for now:

  handleRouting = event => {
    this.currentUrl = event.url
    const content = document.querySelector('.mdl-layout__content')
    if (content) content.scrollTop = 0
  }

Readme typo

Hello,

Firstly, thank you for providing this package !

The readme contain a typo.

This mainly consist of the following animation objects

1. FaderAnimation: Next route will fade in and current will fade out.

Should be FadeAnimation

Browser compatibility

According to https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Browser_compatibility The element.animate is not yet supported by most browsers.. does that imply this module also might not work cross different browsers..? (if so maybe it's worth mentioning it in the readme)