Skip to main content

Lit 2.1 Release

New directives, new decorator, new observers package, and task/SSR updates

Photo of Justin Fagnani
Justin Fagnani
Photo of Arthur Evans
Arthur Evans

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.
  • New @queryAssignedElements decorator, related to the existing @queryAssignedNodes decorator.

Plus we have some Lit Labs updates to make your season bright:

  • The new @lit-labs/observers package provides reactive controllers for working with web platform observers like MutationObserver and ResizeObserver.
  • Updates to the @lit-labs/task package.
  • Updates to the @lit-labs/ssr package.

For more details, read on.

New directives

Lit brings a handful of new convenience directives that make working with conditionals and looping a bit more declarative. Mostly wrappers around plain JavaScript expressions, we've found that many users appreciate the way these helpers reduce clutter in their templates.

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 slot.assignedNodes(). @queryAssignedNodes() has been updated to take an options object as an alternative to the positional argument API.

Easy to use observers with @lit-labs/observer

In Lit Labs we've introduced a new package called @lit-labs/observer 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.

Task updates

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 run() method.

SSR updates

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 Slack 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.

Read more posts