update to lit 2 and webpack 5

Author: herberthobregon

package.json

@@ -5,38 +5,39 @@
     "main": "index.html",
     "scripts": {
         "build": "webpack --mode production",
-        "dev": "webpack-dev-server --mode development"
+        "dev": "webpack serve --mode development"
     },
     "dependencies": {
-        "@conectate/ct-lit": "^1.1.1",
-        "@conectate/ct-router": "^2.2.0",
-        "@webcomponents/webcomponentsjs": "^2.4.4",
-        "lit-element": "^2.4.0"
+        "@babel/plugin-proposal-export-default-from": "^7.12.13",
+        "@conectate/ct-lit": "^3.1.0",
+        "@conectate/ct-router": "^3.1.0",
+        "@webcomponents/webcomponentsjs": "^2.5.0",
+        "lit": "^2.0.0-rc.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.10.0",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+        "@babel/core": "^7.14.0",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
-        "@babel/plugin-transform-async-to-generator": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.10.0",
-        "@babel/preset-env": "^7.10.0",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-async-to-generator": "^7.13.0",
+        "@babel/plugin-transform-runtime": "^7.13.15",
+        "@babel/preset-env": "^7.14.1",
         "@firebase/app-types": "^0.6.1",
-        "babel-loader": "^8.0.5",
+        "babel-loader": "^8.2.2",
         "babel-plugin-bundled-import-meta": "^0.3.2",
         "babel-plugin-template-html-minifier": "^4.1.0",
-        "clean-webpack-plugin": "^3.0.0",
+        "clean-webpack-plugin": "^4.0.0-alpha.0",
         "copy-webpack-plugin": "5.0.3",
-        "html-webpack-plugin": "^4.3.0",
-        "prettier": "^2.0.5",
+        "html-webpack-plugin": "^5.3.1",
+        "prettier": "^2.2.1",
         "svg-inline-loader": "^0.8.0",
-        "ts-loader": "^6.2.1",
-        "typescript": "^4.0.0-dev.20200718",
-        "webpack": "^4.41.2",
-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-cli": "^3.3.5",
-        "webpack-dev-server": "^3.9.0"
+        "ts-loader": "^9.1.2",
+        "typescript": "^4.2.4",
+        "webpack": "^5.36.2",
+        "webpack-bundle-analyzer": "^4.4.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^3.11.2"
     }
 }

src/base/styles/default-theme.ts

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 // Define your Theme
 let defaultTheme = css`

src/base/styles/lit-shared-styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 // You Shared Styles
 export const litStyles = css`

src/lit-app.ts

@@ -1,7 +1,8 @@
 import './base/app-router';
 import AppLocalStorage from './base/app-localstorage';
 import { loadLang } from '../res/values/strings';
-import { css, CtLit, customElement, html, property } from '@conectate/ct-lit';
+import { css, CtLit, customElement, html } from '@conectate/ct-lit';
+import { property, query, queryAll, queryAssignedNodes, queryAsync, state, state as internalProperty } from 'lit/decorators.js';
 import { injectTheme, Theme } from './base/styles/default-theme';
 
 @customElement('lit-app')

webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env, options) => {
 				'@babel/plugin-proposal-logical-assignment-operators',
 				'@babel/plugin-transform-runtime',
 				'@babel/plugin-transform-async-to-generator',
+				'@babel/plugin-proposal-export-default-from',
 				[
 					'template-html-minifier',
 					{
@@ -60,11 +61,14 @@ module.exports = (env, options) => {
 		devtool: development ? 'source-map' : undefined,
 		resolve: {
 			// Add '.ts' and '.tsx' as resolvable extensions.
-			extensions: ['.ts', '.js', '.json']
+			extensions: ['.ts', '.js', '.json'],
+			alias: {
+				'lit/decorators': 'lit/decorators.js'
+			}
 		},
 		plugins: [
 			new webpack.DefinePlugin({
-				'process.env.NODE_ENV': JSON.stringify(development ? 'dev' : 'production')
+				'process.env.NODE_EN': JSON.stringify(development ? 'dev' : 'production')
 			}),
 			new CleanWebpackPlugin(),
 			new HtmlWebpackPlugin({
@@ -91,8 +95,7 @@ module.exports = (env, options) => {
 								comments: false
 							}
 						},
-						parallel: true,
-						sourceMap: true
+						parallel: true
 					})
 			].filter(_ => !!_)
 		},
@@ -116,7 +119,13 @@ module.exports = (env, options) => {
 				{
 					test: /\.svg$/,
 					loader: 'svg-inline-loader'
-				}
+				},
+				{
+					test: /\.m?js/,
+					resolve: {
+						fullySpecified: false
+					}
+				},
 			]
 		},
 		devServer: {