Fix for 2022.3 breaking change

.vscode/tasks.json

@@ -1,13 +1,23 @@
 {
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "build",
-      "group": "build",
-      "problemMatcher": [],
-      "label": "npm: build",
-      "detail": "npm run lint && npm run rollup"
-    }
-  ]
-}
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "start",
+			"problemMatcher": [],
+			"label": "npm: start",
+			"detail": "rollup -c --watch"
+		},
+		{
+			"type": "npm",
+			"script": "build",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [],
+			"label": "npm: build",
+			"detail": "npm run lint && npm run rollup"
+		}
+	]
+}

elements/formfield.js

@@ -0,0 +1,10 @@
+import { FormfieldBase } from '@material/mwc-formfield/mwc-formfield-base.js';
+import { styles as formfieldStyles } from '@material/mwc-formfield/mwc-formfield.css.js';
+
+export const formfieldDefinition = {
+  'mwc-formfield': class extends FormfieldBase {
+    static get styles() {
+      return formfieldStyles;
+    }
+  },
+};

elements/ignore/select.js

@@ -0,0 +1,8 @@
+export const ignoreSelectFiles = [
+  '@material/mwc-ripple/mwc-ripple.js',
+  '@material/mwc-menu/mwc-menu.js',
+  '@material/mwc-menu/mwc-menu-surface.js',
+  '@material/mwc-list/mwc-list.js',
+  '@material/mwc-list/mwc-list-item.js',
+  '@material/mwc-icon/mwc-icon.js',
+];

elements/ignore/switch.js

@@ -0,0 +1 @@
+export const ignoreSwitchFiles = ['@material/mwc-ripple/mwc-ripple.js'];

elements/ignore/textfield.js

@@ -0,0 +1 @@
+export const ignoreTextfieldFiles = ['@material/mwc-notched-outline/mwc-notched-outline.js'];

elements/select.js

@@ -0,0 +1,53 @@
+import { SelectBase } from '@material/mwc-select/mwc-select-base.js';
+import { ListBase } from '@material/mwc-list/mwc-list-base.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+import { MenuSurfaceBase } from '@material/mwc-menu/mwc-menu-surface-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as selectStyles } from '@material/mwc-select/mwc-select.css';
+import { styles as listStyles } from '@material/mwc-list/mwc-list.css';
+import { styles as listItemStyles } from '@material/mwc-list//mwc-list-item.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+import { styles as menuStyles } from '@material/mwc-menu/mwc-menu.css';
+import { styles as menuSurfaceStyles } from '@material/mwc-menu/mwc-menu-surface.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const selectDefinition = {
+  'mwc-select': class extends SelectBase {
+    static get styles() {
+      return selectStyles;
+    }
+  },
+  'mwc-list': class extends ListBase {
+    static get styles() {
+      return listStyles;
+    }
+  },
+  'mwc-list-item': class extends ListItemBase {
+    static get styles() {
+      return listItemStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+  'mwc-menu': class extends MenuBase {
+    static get styles() {
+      return menuStyles;
+    }
+  },
+  'mwc-menu-surface': class extends MenuSurfaceBase {
+    static get styles() {
+      return menuSurfaceStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

elements/switch.js

@@ -0,0 +1,17 @@
+import { SwitchBase } from '@material/mwc-switch/deprecated/mwc-switch-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { styles as switchStyles } from '@material/mwc-switch/deprecated/mwc-switch.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+
+export const switchDefinition = {
+  'mwc-switch': class extends SwitchBase {
+    static get styles() {
+      return switchStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+};

elements/textfield.js

@@ -0,0 +1,18 @@
+import { TextFieldBase } from '@material/mwc-textfield/mwc-textfield-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as textfieldStyles } from '@material/mwc-textfield/mwc-textfield.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const textfieldDefinition = {
+  'mwc-textfield': class extends TextFieldBase {
+    static get styles() {
+      return textfieldStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bom-radar-card",
-  "version": "v1.4.5",
+  "version": "1.5.0",
   "description": "A rain radar card using the new tiled images from the Australian BOM",
   "keywords": [
     "home-assistant",
@@ -15,27 +15,35 @@
   "author": "Simon Ratcliffe <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.6.6",
+    "@lit-labs/scoped-registry-mixin": "^1.0.0",
+    "@material/mwc-formfield": "^0.25.3",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-menu": "^0.25.3",
+    "@material/mwc-notched-outline": "^0.25.3",
+    "@material/mwc-ripple": "^0.25.3",
+    "@material/mwc-select": "^0.25.3",
+    "@material/mwc-switch": "^0.25.3",
+    "@material/mwc-textfield": "^0.25.3",
+    "custom-card-helpers": "^1.9.0",
     "home-assistant-js-websocket": "^5.11.1",
-    "lit": "^2.0.2",
+    "lit": "^2.0.0",
     "randombytes": "^2.1.0",
     "safe-buffer": "^5.2.1",
     "serialize-javascript": "^6.0.0",
-    "tslib": "^2.0.3",
-    "tsutils": "^3.17.1"
+    "tslib": "^2.3.1",
+    "tsutils": "^3.21.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
     "@rollup/plugin-json": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "check-dependencies": "^1.1.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.4.1",
     "rollup": "^2.58.0",
@@ -47,8 +55,14 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.4.3"
   },
+  "resolutions": {
+    "lit": "^2.1.2",
+    "lit-html": "2.1.2",
+    "lit-element": "3.1.2",
+    "@lit/reactive-element": "1.2.1"
+  },
   "scripts": {
-    "start": "rollup -c --watch",
+    "start": "rollup -c rollup.config.dev.js --watch",
     "build": "npm run lint && npm run rollup",
     "lint": "eslint src/*.ts",
     "rollup": "rollup -c"

rollup-plugins/ignore.js

@@ -0,0 +1,24 @@
+export default function (userOptions = {}) {
+  // Files need to be absolute paths.
+  // This only works if the file has no exports
+  // and only is imported for its side effects
+  const files = userOptions.files || [];
+
+  if (files.length === 0) {
+    return {
+      name: 'ignore',
+    };
+  }
+
+  return {
+    name: 'ignore',
+
+    load(id) {
+      return files.some((toIgnorePath) => id.startsWith(toIgnorePath))
+        ? {
+            code: '',
+          }
+        : null;
+    },
+  };
+}

rollup.config.dev.js

@@ -0,0 +1,40 @@
+
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import serve from 'rollup-plugin-serve';
+import { terser } from 'rollup-plugin-terser';
+import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield';
+import { ignoreSelectFiles } from './elements/ignore/select';
+import { ignoreSwitchFiles } from './elements/ignore/switch';
+
+export default {
+  input: 'src/bom-radar-card.ts',
+  output: {
+    dir: './dist',
+    format: 'es',
+  },
+  plugins: [
+    resolve(),
+    typescript(),
+    json(),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    terser(),
+    serve({
+      contentBase: './dist',
+      host: '0.0.0.0',
+      port: 5000,
+      allowCrossOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+    }),
+    ignore({
+      files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+    }),
+  ],
+};

rollup.config.js

@@ -5,7 +5,10 @@ import babel from 'rollup-plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
 import json from '@rollup/plugin-json';
-
+import ignore from './rollup-plugins/ignore';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield';
+import { ignoreSelectFiles } from './elements/ignore/select';
+import { ignoreSwitchFiles } from './elements/ignore/switch';
 const dev = process.env.ROLLUP_WATCH;
 
 const serveopts = {
@@ -28,6 +31,9 @@ const plugins = [
   }),
   dev && serve(serveopts),
   !dev && terser(),
+  ignore({
+    files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+  }),
 ];
 
 export default [

src/bom-radar-card.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, customElement } from 'lit/decorators';
 import { HomeAssistant, LovelaceCardEditor, LovelaceCard } from 'custom-card-helpers';
 
 import './editor';
@@ -40,9 +40,9 @@ export class BomRadarCard extends LitElement implements LovelaceCard {
   public isPanel = false;
 
   // TODO Add any properities that should cause your element to re-render here
-  @property() public hass!: HomeAssistant;
-  @property() private _config!: BomRadarCardConfig;
-  @property() public editMode?: boolean;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) private _config!: BomRadarCardConfig;
+  @property({ attribute: false }) public editMode?: boolean;
 
   public setConfig(config: BomRadarCardConfig): void {
     // TODO Check for required fields and that they are of the proper format

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.4.5';
+export const CARD_VERSION = '1.5.0';