Skip to content

fix: add disconnectedCallback() lifecycle method to unmount map#97

Merged
jessicamcinchak merged 3 commits intomainfrom
jess/unmount
Dec 14, 2021
Merged

fix: add disconnectedCallback() lifecycle method to unmount map#97
jessicamcinchak merged 3 commits intomainfrom
jess/unmount

Conversation

@jessicamcinchak
Copy link
Member

@jessicamcinchak jessicamcinchak commented Dec 11, 2021

fixes #96

🤞 this might/should fix planx bugs described here theopensystemslab/planx-new#704

https://lit.dev/docs/components/lifecycle/#content

@netlify
Copy link

netlify bot commented Dec 11, 2021

✔️ Deploy Preview for oslmap ready!

🔨 Explore the source changes: 7c277e5

🔍 Inspect the deploy log: https://app.netlify.com/sites/oslmap/deploys/61b870acb6649f0007950e4d

😎 Browse the preview: https://deploy-preview-97--oslmap.netlify.app

src/my-map.ts Outdated
});

this.map = map;
super.performUpdate();
Copy link
Member Author

@jessicamcinchak jessicamcinchak Dec 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

calling performUpdate() here feels a bit odd, but clears up this Lit console warning introduced when setting this.map - any ideas for better approach?

Screenshot from 2021-12-11 12-05-02

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it help to just put this.map on the class instance as opposed to setting it as a reactive internal state with the @state decorator? The lit docs seem to not mention this as an option but I have a feeling the way this.map is used does not need any kind of reactivity (more like a useRef than a useState to borrow from React lingo).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh that's clever - i had definitely been following doc patterns and assuming every property should use a decorator, but this works (meaning, I can remove performUpdate() without prompting any lifecycle warnings)

@jessicamcinchak jessicamcinchak requested review from a team and peterszerzo December 14, 2021 08:19
@jessicamcinchak jessicamcinchak marked this pull request as ready for review December 14, 2021 08:19
@jessicamcinchak
Copy link
Member Author

@jessicamcinchak jessicamcinchak changed the title wip: add disconnectedCallback() lifecycle method to unmount map fix: add disconnectedCallback() lifecycle method to unmount map Dec 14, 2021
@jessicamcinchak
Copy link
Member Author

@jessicamcinchak
Copy link
Member Author

};

// this is an internal event listener, so doesn't need to be removed later
// ref https://lit.dev/docs/components/lifecycle/#disconnectedcallback

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure you get away with not having to clean this up if you didn't use their render() method with the html tagged template literal?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mostly sure 🙃 the button & it's attached listener seem to be fully encapsulated in the map's shadow DOM on inspection, and the docs say "By default, a bubbling custom event fired inside shadow DOM will stop bubbling when it reaches the shadow root." so I think that means it can be considered "internal" & shouldn't prevent the map from unmounting?

https://lit.dev/docs/v1/components/events/#add-event-listeners-after-first-paint

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right, that makes sense!

Copy link
Contributor

@DafyddLlyr DafyddLlyr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jessicamcinchak jessicamcinchak merged commit 9529c70 into main Dec 14, 2021
@jessicamcinchak jessicamcinchak deleted the jess/unmount branch December 14, 2021 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unmount map

3 participants