Update to Lit2

Author: jbuckner

demo/app-root.ts

@@ -1,4 +1,5 @@
-import { html, css, LitElement, customElement } from 'lit-element';
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import '../src/your-webcomponent';
 
 @customElement('app-root')

package.json

@@ -1,15 +1,11 @@
 {
   "name": "@internetarchive/your-webcomponent",
-  "version": "0.0.0",
   "description": "The Internet Archive Typescript WebComponent template. It is based on the @open-wc template.",
-  "author": "Internet Archive",
   "license": "AGPL-3.0-only",
+  "author": "Internet Archive",
+  "version": "0.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc",
@@ -20,33 +16,37 @@
     "test": "tsc && yarn run lint && yarn run circular && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
+  "types": "dist/index.d.ts",
   "dependencies": {
-    "lit-element": "^2.2.1",
-    "lit-html": "^1.1.2"
+    "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@open-wc/eslint-config": "^4.2.0",
-    "@open-wc/testing": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@open-wc/eslint-config": "^6.0.0",
+    "@open-wc/testing": "next",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
     "@web/dev-server": "^0.1.1",
-    "@web/test-runner": "^0.13.15",
+    "@web/test-runner": "next",
     "concurrently": "^5.3.0",
-    "eslint": "^7.21.0",
-    "eslint-config-prettier": "^6.11.0",
-    "husky": "^1.0.0",
-    "lint-staged": "^10.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-wc": "^1.3.2",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
     "madge": "^4.0.1",
-    "prettier": "^2.0.4",
+    "prettier": "^2.3.2",
     "sinon": "^9.2.4",
     "tslib": "^2.0.3",
     "typescript": "^4.2.3"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
     "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
+      "@open-wc",
+      "prettier"
     ],
     "plugins": [
       "@typescript-eslint"
@@ -63,7 +63,8 @@
       "class-methods-use-this": "off",
       "import/no-unresolved": "off",
       "import/extensions": [
-        "warn",
+        "off",
+        "ignorePackages",
         {
           "js": "never",
           "ts": "never"

src/your-webcomponent.ts

@@ -1,4 +1,5 @@
-import { html, css, LitElement, property, customElement } from 'lit-element';
+import { html, css, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
 @customElement('your-webcomponent')
 export class YourWebComponent extends LitElement {

web-test-runner.config.mjs

@@ -1,17 +1,29 @@
 // import { playwrightLauncher } from '@web/test-runner-playwright';
 
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
   files: 'dist/test/**/*.test.js',
-  nodeResolve: true,
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto',
 
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
   /** Amount of browsers to run concurrently */
   // concurrentBrowsers: 2,