Lit 2.1 Release
New directives, new decorator, new observers package, and task/SSR updates
Happy New Year from the Lit team! This week we're excited to share a few updates with our fantastic community in the form of the Lit 2.1 release and some Lit Labs updates.
Lit 2.1 consists of:
- New directives that help with looping and conditionals in your templates.
@queryAssignedElementsdecorator, related to the existing
Plus we have some Lit Labs updates to make your season bright:
- The new
@lit-labs/observerspackage provides reactive controllers for working with web platform observers like
- Updates to the
- Updates to the
For more details, read on.
Like all of the directives included with Lit, these new directives are pay-as-you-go: they're shipped as separate modules, so you only bundle the directives that you choose to import.
when(cond, t, f) is like a ternary where the else clause is optional. It renders the first template if the condition is true, and the second if present and the condition is false.
map(iter, fn) is like
Array.map, but also works on iterators. It's similar to
repeat() without the key function, but much smaller in code size.
join(iter, t) interleaves items in an iterable with a joiner value or function. Useful for adding separators between items, like
Array.join() but instead of returning a string returns an iterable of renderable values.
range(start, end, step) is useful for iterating a specific number of times in a template.
choose(v, cases, defaultCase) chooses one template to render among a set of cases. It's like an inline switch statement.
New @queryAssignedElements() decorator
@queryAssignedElements() returns the slotted or assigned elements for a given slot. It's similar to the existing
@queryAssignedNodes() but uses the
slot.assignedElements() method rather than
@queryAssignedNodes() has been updated to take an options object as an alternative to the positional argument API.
Easy to use observers with @lit-labs/observers
In Lit Labs we've introduced a new package called
@lit-labs/observers which contains reactive controllers that let you easily use the web platform observer APIs: MutationObserver, IntersectionObserver, ResizeObserver, and PerformanceObserver. The controllers automatically drive the host element's update lifecycle when they observe changes.
We've landed some changes to
@lit-labs/task that allow for manually run tasks and automatic tasks with no dependencies. Tasks with no dependencies will run once when the host is connected, and all tasks can be run manually with the new
We've also landed some bug fixes to
@lit-labs/ssr, reduced its NPM dependencies footprint, and refactored the
importModule function into a new
ImportModule class as some groundwork for upcoming changes.
Keep in touch
We hope your 2022 is off to a good start. If you've tried the new releases, we'd love to hear from you. For questions and discussions, please join us on Discord or on GitHub Discussions. As always you can check out our documentation and code playground at lit.dev and report issues on our GitHub issue tracker.