Update to Lit v2

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy
 
 on:
   push:
-    branches: [main]
+    branches: [main, lit-next]
 
 jobs:
   deploy:

README.md

@@ -11,7 +11,7 @@
 
 This project helps you to build Progressive Web Applications following the modern web standards, best practices and providing you with tools for that purpose. Out of the box, provides you with the following features:
 
-- Simple way to create Web Components with [LitElement](https://lit-element.polymer-project.org).
+- Simple way to create Web Components with [Lit](https://lit.dev).
 - Small and powerful client-side router for Web Components with [Vaadin Router](https://vaadin.com/router).
 - All the benefits from a PWA (manifest, service worker, offline UI) thanks to [Workbox](https://developers.google.com/web/tools/workbox) and [pwa-helpers](https://github.com/thepassle/pwa-helpers).
 - SEO friendly thanks to the `PageElement` custom element and the `html-meta-manager`.
@@ -96,7 +96,8 @@ Note: If you need to add static files to the build, like the `images` folder or
 1. Create the new page component (extending from `PageElement` helper) in the `pages` folder. For example a `page-explore.ts`.
 
    ```typescript
-   import { html, customElement } from 'lit-element';
+   import { html } from 'lit';
+   import { customElement } from 'lit/decorators.js';
 
    import { PageElement } from '../helpers/page-element.js';
 

package.json

@@ -2,7 +2,7 @@
   "name": "pwa-lit-template",
   "version": "0.1.0",
   "private": true,
-  "description": "A template for building Progressive Web Applications using LitElement and Vaadin Router",
+  "description": "A template for building Progressive Web Applications using Lit and Vaadin Router",
   "license": "MIT",
   "repository": "github:IBM/pwa-lit-template",
   "engines": {
@@ -27,17 +27,17 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "lit-element": "^2.5.1",
+    "lit": "^2.0.0",
     "pwa-helper-components": "~0.2.10",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@open-wc/building-rollup": "^1.10.0",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "@web/dev-server": "~0.1.22",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "@web/dev-server": "~0.1.23",
     "@web/dev-server-esbuild": "~0.2.14",
     "@web/dev-server-rollup": "~0.3.9",
     "@web/rollup-plugin-copy": "~0.3.0",
@@ -55,7 +55,7 @@
     "prettier": "~2.4.1",
     "prettier-plugin-package": "^1.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
+    "rollup": "^2.57.0",
     "stylelint": "^13.13.1",
     "stylelint-config-ibmresearch": "~0.8.1",
     "typescript": "~4.2.4"

rollup.config.js

@@ -40,6 +40,18 @@ const config = merge(
   createSpaConfig({
     outputDir: DIST_PATH,
     legacyBuild: true,
+    polyfillsLoader: {
+      polyfills: {
+        custom: [
+          {
+            name: 'lit-polyfill-support',
+            path: 'node_modules/lit/polyfill-support.js',
+            test: "!('attachShadow' in Element.prototype)",
+            module: false,
+          },
+        ],
+      },
+    },
     developmentMode: process.env.ROLLUP_WATCH === 'true',
     workbox: GENERATE_SERVICE_WORKER && workboxConfig,
     injectServiceWorker: GENERATE_SERVICE_WORKER,

src/components/app-index.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, css, customElement, query } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
 
 import config from '../config.js';
 import { attachRouter, urlForName } from '../router/index.js';

src/helpers/page-element.ts

@@ -6,8 +6,9 @@
  */
 
 import type { RouterLocation } from '@vaadin/router';
-import { LitElement, state } from 'lit-element';
-import type { PropertyValues } from 'lit-element';
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import { state } from 'lit/decorators.js';
 
 import config from '../config.js';
 import { updateMeta } from './html-meta-manager/index.js';

src/helpers/render-page-not-found.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 // TODO: Review this issue https://github.com/vaadin/vaadin-router/issues/408
 

src/pages/page-about.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, customElement } from 'lit-element';
+import { html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
 import { PageElement } from '../helpers/page-element.js';
 

src/pages/page-home.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, customElement } from 'lit-element';
+import { html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
 import config from '../config.js';
 import { PageElement } from '../helpers/page-element.js';

src/pages/page-not-found.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, customElement } from 'lit-element';
+import { html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
 import {
   PageElementNotFound,

web-dev-server.config.mjs

@@ -13,7 +13,9 @@ const NODE_ENV = process.env.NODE_ENV || 'development';
 
 export default {
   appIndex: 'index.html',
-  nodeResolve: true,
+  nodeResolve: {
+    exportConditions: ['development']
+  },
   plugins: [
     esbuildPlugin({ ts: true }),
     ...(NODE_ENV !== 'development'