Update card to work with 2024.4.0+ (#5)

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Prettify files
+de88fc6b1f563a1359d4a81b6d5a1de9295d9502

eslint.config.js

@@ -0,0 +1,29 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import lisPlugin from 'eslint-plugin-lit';
+import litA11yPlugin from 'eslint-plugin-lit-a11y';
+
+export default tseslint.config(
+  {
+    ignores: ['dist/**/*'],
+  },
+  eslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.stylistic,
+  {
+    plugins: { lit: lisPlugin },
+    rules: {
+      ...lisPlugin.configs.all.rules,
+    },
+  },
+  {
+    plugins: { 'lit-a11y': litA11yPlugin },
+    rules: {
+      ...litA11yPlugin.configs.recommended.rules,
+    },
+  },
+);

hacs.json

@@ -1,4 +1,8 @@
 {
     "name": "Lovelace animated weather card",
-    "filename": "weather-card.js"
+    "filename": "weather-card.js",
+    "hacs": "1.2.0",
+    "homeassistant": " 2024.4.0",
+    "render_readme": true,
+    "hide_default_branch": true
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weather-card",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "Lovelace animated weather card",
   "keywords": [
     "home-assistant",
@@ -14,41 +14,48 @@
   "repository": "[email protected]:MarcHagen/weather-card.git",
   "author": "Marc Hagen <[email protected]>",
   "license": "MIT",
+  "type": "module",
   "dependencies": {
-    "custom-card-helpers": "^1.7.0",
-    "home-assistant-js-websocket": "^5.10.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1"
+    "custom-card-helpers": "1.9.0",
+    "home-assistant-js-websocket": "9.3.0",
+    "lit": "2.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-json": "^3.0.0",
-    "prettier": "^1.19.1",
-    "rollup": "^1.32.1",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-proposal-decorators": "^7.24.7",
+    "@babel/plugin-transform-class-properties": "^7.24.7",
+    "@eslint/js": "^9.4.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": ">=20",
+    "eslint": "^9.4.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-json": "^4.0.0",
+    "eslint-plugin-lit": "^1.14.0",
+    "eslint-plugin-lit-a11y": "^4.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "node": ">=20",
+    "prettier": "^3.3.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-terser": "^5.3.1",
-    "rollup-plugin-typescript2": "^0.24.3",
+    "rollup-plugin-serve": "^1.1.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "rollup-plugin-json": "^4.0.0",
-    "typescript": "^3.9.7"
+    "ts-node": "^10.9.2",
+    "ts-lit-plugin": "^2.0.2",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.12.0"
   },
   "scripts": {
     "start": "rollup -c --watch",
     "build": "npm run lint && npm run rollup",
-    "lint": "eslint src/*.ts",
+    "lint": "eslint",
     "rollup": "rollup -c"
   }
 }

prettier.config.js

@@ -0,0 +1,9 @@
+const config = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};
+
+export default config;

rollup.config.js

@@ -6,6 +6,7 @@ import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
 import json from '@rollup/plugin-json';
 
+// eslint-disable-next-line no-undef
 const dev = process.env.ROLLUP_WATCH;
 
 const serveopts = {
@@ -25,6 +26,7 @@ const plugins = [
   json(),
   babel({
     exclude: 'node_modules/**',
+    babelHelpers: 'bundled',
   }),
   dev && serve(serveopts),
   !dev && terser(),
@@ -34,8 +36,9 @@ export default [
   {
     input: 'src/weather-card.ts',
     output: {
-      dir: 'dist',
+      file: 'dist/weather-card.js',
       format: 'es',
+      inlineDynamicImports: true,
     },
     plugins: [...plugins],
   },

src/const.ts

@@ -1,35 +1,40 @@
-export const DAY_IN_MILLISECONDS = 86400000;
-export const UPDATE_PROPS = ['entity', 'config'];
-
 export const cardinalDirectionsIcon = [
-    'mdi:arrow-down', 'mdi:arrow-bottom-left', 'mdi:arrow-left',
-    'mdi:arrow-top-left', 'mdi:arrow-up', 'mdi:arrow-top-right',
-    'mdi:arrow-right', 'mdi:arrow-bottom-right', 'mdi:arrow-down'
+  'mdi:arrow-down',
+  'mdi:arrow-bottom-left',
+  'mdi:arrow-left',
+  'mdi:arrow-top-left',
+  'mdi:arrow-up',
+  'mdi:arrow-top-right',
+  'mdi:arrow-right',
+  'mdi:arrow-bottom-right',
+  'mdi:arrow-down',
 ];
 
 export const weatherIconsDay = {
-    clear: "day",
-    "clear-night": "night",
-    cloudy: "cloudy",
-    fog: "cloudy",
-    hail: "rainy-7",
-    lightning: "thunder",
-    "lightning-rainy": "thunder",
-    partlycloudy: "cloudy-day-3",
-    pouring: "rainy-6",
-    rainy: "rainy-5",
-    snowy: "snowy-6",
-    "snowy-rainy": "rainy-7",
-    sunny: "day",
-    windy: "cloudy",
-    "windy-variant": "cloudy-day-3",
-    exceptional: "!!"
+  clear: 'day',
+  'clear-night': 'night',
+  cloudy: 'cloudy',
+  fog: 'cloudy',
+  hail: 'rainy-7',
+  lightning: 'thunder',
+  'lightning-rainy': 'thunder',
+  partlycloudy: 'cloudy-day-3',
+  pouring: 'rainy-6',
+  rainy: 'rainy-5',
+  snowy: 'snowy-6',
+  'snowy-rainy': 'rainy-7',
+  sunny: 'day',
+  windy: 'cloudy',
+  'windy-variant': 'cloudy-day-3',
+  exceptional: '!!',
 };
 
 export const weatherIconsNight = {
-    ...weatherIconsDay,
-    clear: "night",
-    sunny: "night",
-    partlycloudy: "cloudy-night-3",
-    "windy-variant": "cloudy-night-3"
+  ...weatherIconsDay,
+  clear: 'night',
+  sunny: 'night',
+  partlycloudy: 'cloudy-night-3',
+  'windy-variant': 'cloudy-night-3',
 };
+
+export const stopPropagation = (ev: { stopPropagation: () => unknown }) => ev.stopPropagation();