Web-components: Support lit 2 with back-compat

.circleci/config.yml

@@ -220,7 +220,8 @@ jobs:
       - run:
           name: Run E2E tests
           # Do not test CRA here because it's done in PnP part
-          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript
+          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
+          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/storybook/cypress

addons/docs/package.json

@@ -122,8 +122,8 @@
     "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "jest-specific-snapshot": "^4.0.0",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
+    "lit-element": "^3.0.0-rc.2",
+    "lit-html": "^2.0.0-rc.3",
     "require-from-string": "^2.0.2",
     "rxjs": "^6.6.3",
     "styled-components": "^5.2.1",
@@ -142,7 +142,7 @@
     "@storybook/vue3": "6.3.0-alpha.42",
     "@storybook/web-components": "6.3.0-alpha.42",
     "lit": "^2.0.0-rc.1",
-    "lit-html": "^1.0.0",
+    "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "svelte": "^3.31.2",

addons/docs/src/frameworks/web-components/web-components-properties.test.ts

@@ -28,6 +28,7 @@ describe('web-components component properties', () => {
   // because lit-html is distributed as ESM not CJS
   // https://github.com/Polymer/lit-html/issues/516
   jest.mock('lit-html', () => {});
+  jest.mock('lit-html/directive-helpers.js', () => {});
   // eslint-disable-next-line global-require
   const { extractArgTypesFromElements } = require('./custom-elements');
 

addons/essentials/package.json

@@ -63,7 +63,7 @@
     "@storybook/vue": "6.3.0-alpha.42",
     "@storybook/web-components": "6.3.0-alpha.42",
     "babel-loader": "^8.0.0",
-    "lit-html": "^1.0.0",
+    "lit-html": "^1.4.1 || ^2.0.0-rc.3",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "webpack": "*"

app/web-components/package.json

@@ -65,12 +65,12 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "lit-html": "^1.3.0"
+    "lit-html": "^2.0.0-rc.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
     "babel-loader": "^7.0.0 || ^8.0.0",
-    "lit-html": "^1.0.0"
+    "lit-html": "^1.4.1 || ^2.0.0-rc.3"
   },
   "engines": {
     "node": ">=10.13.0"

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

@@ -1,6 +1,9 @@
 import { document, Node } from 'global';
 import dedent from 'ts-dedent';
-import { render, TemplateResult } from 'lit-html';
+import { render } from 'lit-html';
+// Keep `.js` extension to avoid issue with Webpack (related to export map?)
+// eslint-disable-next-line import/extensions
+import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/client-api';
 import { RenderContext } from './types';
 
@@ -17,7 +20,7 @@ export default function renderMain({
   const element = storyFn();
 
   showMain();
-  if (element instanceof TemplateResult) {
+  if (isTemplateResult(element)) {
     // `render` stores the TemplateInstance in the Node and tries to update based on that.
     // Since we reuse `rootElement` for all stories, remove the stored instance first.
     // But forceRender means that it's the same story, so we want too keep the state in that case.

examples/web-components-kitchen-sink/package.json

@@ -32,7 +32,7 @@
     "eventemitter3": "^4.0.7",
     "format-json": "^1.0.3",
     "global": "^4.4.0",
-    "lit-element": "^2.4.0"
+    "lit-element": "^3.0.0-rc.2"
   },
   "storybook": {
     "chromatic": {

lib/cli/src/detect.test.ts

@@ -164,7 +164,27 @@ const MOCK_FRAMEWORK_FILES = [
     files: {
       'package.json': {
         dependencies: {
-          'lit-html': '1.0.0',
+          'lit-html': '1.4.1',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.WEB_COMPONENTS,
+    files: {
+      'package.json': {
+        dependencies: {
+          'lit-html': '2.0.0-rc.3',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.WEB_COMPONENTS,
+    files: {
+      'package.json': {
+        dependencies: {
+          lit: '2.0.0-rc.2',
         },
       },
     },

lib/cli/src/generators/WEB-COMPONENTS/index.ts

@@ -2,9 +2,7 @@ import { baseGenerator, Generator } from '../baseGenerator';
 import { copyTemplate } from '../../helpers';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  baseGenerator(packageManager, npmOptions, options, 'web-components', {
-    extraPackages: ['lit-html'],
-  });
+  await baseGenerator(packageManager, npmOptions, options, 'web-components');
   copyTemplate(__dirname, options.storyFormat);
 };
 

lib/cli/src/project_types.ts

@@ -211,7 +211,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
   },
   {
     preset: ProjectType.WEB_COMPONENTS,
-    dependencies: ['lit-element', 'lit-html'],
+    dependencies: ['lit-element', 'lit-html', 'lit'],
     matcherFunction: ({ dependencies }) => {
       return dependencies.some(Boolean);
     },

lib/cli/src/repro-generators/configs.ts

@@ -116,7 +116,7 @@ export const angular: Parameters = baseAngular;
 export const web_components: Parameters = {
   framework: 'web-components',
   name: 'web_components',
-  version: 'latest',
+  version: '2',
   generator: fromDeps('lit-element'),
 };
 
@@ -126,6 +126,14 @@ export const web_components_typescript: Parameters = {
   typescript: true,
 };
 
+export const web_components_lit2: Parameters = {
+  ...web_components,
+  version: 'next',
+  name: 'web_components_lit2',
+  generator: fromDeps('lit'),
+  typescript: true,
+};
+
 // #endregion
 
 // #region  vue

yarn.lock

@@ -4525,6 +4525,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit/reactive-element@npm:^1.0.0-rc.2":
+  version: 1.0.0-rc.2
+  resolution: "@lit/reactive-element@npm:1.0.0-rc.2"
+  checksum: b04c5550c9eb8f45f6012bed1ee009da18a94c26869e9e96b63793005f63527846a22db43208cba4c5105eca787cf3b91a95cc1b53a50240808e2e76f61d66b4
+  languageName: node
+  linkType: hard
+
 "@mdx-js/loader@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/loader@npm:1.6.22"
@@ -5702,8 +5709,8 @@ __metadata:
     jest: ^26.6.3
     jest-specific-snapshot: ^4.0.0
     js-string-escape: ^1.0.1
-    lit-element: ^2.4.0
-    lit-html: ^1.3.0
+    lit-element: ^3.0.0-rc.2
+    lit-html: ^2.0.0-rc.3
     loader-utils: ^2.0.0
     lodash: ^4.17.20
     prettier: ~2.2.1
@@ -5731,7 +5738,7 @@ __metadata:
     "@storybook/vue3": 6.3.0-alpha.42
     "@storybook/web-components": 6.3.0-alpha.42
     lit: ^2.0.0-rc.1
-    lit-html: ^1.0.0
+    lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
     svelte: ^3.31.2
@@ -5793,7 +5800,7 @@ __metadata:
     "@storybook/vue": 6.3.0-alpha.42
     "@storybook/web-components": 6.3.0-alpha.42
     babel-loader: ^8.0.0
-    lit-html: ^1.0.0
+    lit-html: ^1.4.1 || ^2.0.0-rc.3
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
     webpack: "*"
@@ -7651,7 +7658,7 @@ __metadata:
     babel-plugin-bundled-import-meta: ^0.3.1
     core-js: ^3.8.2
     global: ^4.4.0
-    lit-html: ^1.3.0
+    lit-html: ^2.0.0-rc.3
     react: 16.14.0
     react-dom: 16.14.0
     read-pkg-up: ^7.0.1
@@ -7660,7 +7667,7 @@ __metadata:
   peerDependencies:
     "@babel/core": "*"
     babel-loader: ^7.0.0 || ^8.0.0
-    lit-html: ^1.0.0
+    lit-html: ^1.4.1 || ^2.0.0-rc.3
   bin:
     build-storybook: ./bin/build.js
     start-storybook: ./bin/index.js
@@ -28022,15 +28029,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit-element@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "lit-element@npm:2.4.0"
-  dependencies:
-    lit-html: ^1.1.1
-  checksum: d1f9e28f7e5fc9f23c7d5973608310dfc905d52a0bed36d0dc2dbdf5d5cbee636f60fb8a280d1e92ba3c6e5a8ce2173923bfd5056fb528837e67ab7a3f485953
-  languageName: node
-  linkType: hard
-
 "lit-element@npm:^3.0.0-rc.1":
   version: 3.0.0-rc.1
   resolution: "lit-element@npm:3.0.0-rc.1"
@@ -28041,10 +28039,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit-html@npm:^1.1.1, lit-html@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "lit-html@npm:1.3.0"
-  checksum: 2b9fe3140d8f48a013f2b1a6e8cb2504b56bbad1b849bc61687b47c6dc158e69381e9f289030a9712f33b8c8ed49b0126a8cc801087c61464e132cce4b0e7fa4
+"lit-element@npm:^3.0.0-rc.2":
+  version: 3.0.0-rc.2
+  resolution: "lit-element@npm:3.0.0-rc.2"
+  dependencies:
+    "@lit/reactive-element": ^1.0.0-rc.2
+    lit-html: ^2.0.0-rc.3
+  checksum: 1493246171b64123602558e4adce4e6231cfd484312ab5bb51803079592332070b932f49f0531951a5af4cd5f111cd91066936a99aa059397e61c0b081aa6059
   languageName: node
   linkType: hard
 
@@ -28057,6 +28058,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lit-html@npm:^2.0.0-rc.3":
+  version: 2.0.0-rc.3
+  resolution: "lit-html@npm:2.0.0-rc.3"
+  dependencies:
+    "@types/trusted-types": ^1.0.1
+  checksum: 26120f0bfdd65c2f32fb15ea4e554cdf2072289fae5d1f6820b6110a42da069c6062ec19ff26734f4fff3be77cd3c61a1d0146cd9c257c64b199cb52eebc756f
+  languageName: node
+  linkType: hard
+
 "lit@npm:^2.0.0-rc.1":
   version: 2.0.0-rc.1
   resolution: "lit@npm:2.0.0-rc.1"
@@ -42994,7 +43004,7 @@ [email protected]:
     eventemitter3: ^4.0.7
     format-json: ^1.0.3
     global: ^4.4.0
-    lit-element: ^2.4.0
+    lit-element: ^3.0.0-rc.2
   languageName: unknown
   linkType: soft