[Storybook Web Components] Changes in next major release of lit-html

[Westbrook]

Currently the web components version of Storybook depends on lit-html in it's rendering of stories using the following instanceof checking across a couple of different locations:

storybook/app/web-components/src/client/preview/render.ts

Line 20 in 8232c4c

if (element instanceof TemplateResult) {

The upcoming release of [email protected] (currently available as 2.0.0-pre.5) will be removing the ability to leverage this in favor of a isTemplateResult() helper method.

import { isTemplateResult } from "lit-html/directive-helpers.js";
// ...
if (isTemplateResult(element) {}

I don't know if there is any bundler magic that would allow a non-breaking change to this Storybook package to support both of these release version, or if we could start seeing a beta release of a 7.0 of this package, but I wanted to open the conversation as to what options might be available to see support for this.

I'd be happy to submit a PR with the discrete update to the updated technique, if that was appropriate.

Please advise.

[shilman]

Thanks so much for the heads up @Westbrook 🙏 Any rough ETA on the lit-html release?

Currently @storybook/web-components has lit-html as a peer dependency. If we expanded the range to include 2.x, did a dynamic require, and did some trickery, would that allow us to support both 1.x and 2.x simultaneously in the next minor release?

Something like:

let isTemplateResult = (element) => (element instanceof TemplateResult);
try {
  // if 2.0 is installed
  { isTemplateResult } = require('lit-html/directive-helpers.js');
} catch() {}
...

I've also created an issue #13491 to aggregate some of the possibly breaking changes that are piling up. I'd consider doing a prerelease with a breaking change, but that's a ton of work so I'd prefer a less disruptive solution if we can swing that. WDYT?

[Westbrook]

First, the good news, I also brought this up with the lit-html team and they are interested in back porting the isTemplateResult() helper to smooth transitions like this. No guarantees on timing there, because holidays, but hopefully there's not too much blocking a release with that addition early in the new year. 🤞🏼

This last week lit-html made a "preview" release of 2.0 which is supposed to be the beginning of the path towards a stable release in the first quarter of the year, but finding and addressing backwards/forward compatibility situations like this and addressing them is just one small part of that process... 😅

Thanks for being interested in addressing this @shilman! In that there may be a number of small or large breaks up coming, I also submitted #13493 which should prepare the web components build for even more future capabilities.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.43 containing PR #14898 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.