restamped elements can be out of sync with the state

christophe-g commented 3 years ago

In a situation where an observed component is removed from the dom (no more _observers) and restamped later on, the binding with state will only be effective if the component updates again. In case state has changed in between, the newly stamped component will be out of sync.

The fix should be as simple as calling requestUpdate in connectedCallback (I'll provide a PR shortly).

I experienced this in this scenario (using lit-state in conjunction with https://github.com/andreasbm/router-slot):

import formState from './state'
import FormCompose from './form/form-edit-compose'
const formCompose = new FormCompose(); // formCompose observe formState

const ROUTES = [
  {
    path: 'compose',
    component: formCompose,
  }, {
    path: 'test',
    component: () => import('./form/form-edit-test') // formTest observe formState
  }
}];

formCompose is cached and not re-created when the active route is compose. Potential state changes are not reflected in the first re-paint.

gitaarik commented 3 years ago

Thanks for your contribution! :smiley:

The PR is merged
I added a page in the docs to demonstrate this use case: https://gitaarik.github.io/lit-state/build/#test-cases/reconnected-components/
I released a new version for this update: https://github.com/gitaarik/lit-state/blob/master/CHANGELOG.md#161---support-reconnecting-components
npm i lit-state@1.6.1

christophe-g commented 3 years ago

https://gitaarik.github.io/lit-state/build/#test-cases/reconnected-components/

That looks good ! lit-state will be used in idata.tools (massive app migration from Polymer 2.0 to lit currently underway)

gitaarik commented 3 years ago

Cool! Nice to see LitState is useful to you. Hope the migration will work out well. Let me know if you run into any problems.

gitaarik / lit-state

restamped elements can be out of sync with the state #5