Update to typescript, rollup, lit

.devcontainer/devcontainer.json

@@ -0,0 +1,34 @@
+{
+    "name": "<NAME> Dev",
+    "image": "thomasloven/hass-custom-devcontainer",
+    "postCreateCommand": "sudo -E container setup-dev && npm add",
+    "containerEnv": {
+      "DEVCONTAINER": "1"
+    },
+    "forwardPorts": [8123],
+    "mounts": [
+      "source=${localWorkspaceFolder},target=/config/www/workspace,type=bind",
+      "source=${localWorkspaceFolder}/test,target=/config/test,type=bind",
+      "source=${localWorkspaceFolder}/test/configuration.yaml,target=/config/configuration.yaml,type=bind"
+    ],
+    "runArgs": ["--env-file", "${localWorkspaceFolder}/test/.env"],
+    "extensions": [
+      "github.vscode-pull-request-github",
+      "esbenp.prettier-vscode",
+      "spmeesseman.vscode-taskexplorer"
+    ],
+    "settings": {
+      "files.eol": "\n",
+      "editor.tabSize": 2,
+      "editor.formatOnPaste": false,
+      "editor.formatOnSave": true,
+      "editor.formatOnType": true,
+      "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "files.trimTrailingWhitespace": true
+    }
+  }

.gitattributes

@@ -1,2 +1,2 @@
-<OUTPUT>.js binary
+<NAME>.js binary
 package-lock.json.binary

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "label": "npm: build",
+        "type": "npm",
+        "script": "build",
+        "problemMatcher": []
+      },
+      {
+        "label": "npm: watch",
+        "type": "npm",
+        "script": "watch",
+        "problemMatcher": [],
+        "presentation": {
+          "panel": "shared",
+          "group": "test"
+        }
+      },
+      {
+        "label": "Run hass",
+        "type": "shell",
+        "command": "sudo container launch",
+        "problemMatcher": [],
+        "presentation": {
+          "panel": "shared",
+          "group": "test"
+        }
+      }
+    ]
+  }
+  

LICENSE.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Thomas Lovén
+Copyright (c) 2021 Thomas Lovén
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,5 +1,4 @@
-<NAME>
-=================
+# <NAME>
 
 [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)
 
@@ -7,14 +6,6 @@
 
 For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
 
-Install `<NAME>` as a `module`.
-
-```yaml
-resources:
-  - url: /local/<NAME>.js
-    type: module
-```
-
 ## Usage
 
 

package.json

@@ -4,22 +4,25 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "webpack",
-    "watch": "webpack --watch --mode=development",
+    "build": "rollup -c",
+    "watch": "rollup -c --watch",
     "update-card-tools": "npm uninstall card-tools && npm install thomasloven/lovelace-card-tools"
   },
-  "repository": {
-    "type": "git",
-    "url": "github.com:thomasloven/lovelace-<NAME>"
-  },
-  "keywords": [],
   "author": "Thomas Lovén",
   "license": "MIT",
   "devDependencies": {
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10"
+    "@babel/core": "^7.13.1",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "rollup": "^2.39.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.1.5"
   },
   "dependencies": {
-    "card-tools": "github:thomasloven/lovelace-card-tools"
+    "card-tools": "github:thomasloven/lovelace-card-tools",
+    "lit": "^2.0.0-rc.2",
+    "tslib": "^2.1.0"
   }
 }

rollup.config.js

@@ -0,0 +1,24 @@
+import nodeResolve from "@rollup/plugin-node-resolve";
+import json from "@rollup/plugin-json";
+import typescript from "rollup-plugin-typescript2";
+import { terser } from "rollup-plugin-terser";
+import babel from "@rollup/plugin-babel";
+
+const dev = process.env.ROLLUP_WATCH;
+
+export default {
+  input: "src/main.ts",
+  output: {
+    file: "<NAME>.js",
+    format: "es",
+  },
+  plugins: [
+    nodeResolve(),
+    json(),
+    typescript(),
+    babel({
+      exclude: "node_modules/**",
+    }),
+    !dev && terser({ format: { comments: false } }),
+  ],
+};

test/.env

@@ -0,0 +1,4 @@
+HASS_USERNAME=dev
+HASS_PASSWORD=dev
+LOVELACE_LOCAL_FILES=<NAME>.js
+LOVELACE_PLUGINS=thomasloven/lovelace-card-mod

test/configuration.yaml

@@ -0,0 +1,11 @@
+default_config:
+
+demo:
+
+lovelace:
+  mode: storage
+  dashboards:
+    lovelace-yaml:
+      mode: yaml
+      title: yaml
+      filename: test/lovelace.yaml

test/docker-compose.yml

@@ -0,0 +1,16 @@
+version: "3.0"
+
+services:
+  test:
+    image: thomasloven/hass-custom-devcontainer
+    environment:
+      - HASS_USERNAME
+      - HASS_PASSWORD
+      - LOVELACE_LOCAL_FILES
+      - LOVELACE_PLUGINS
+    volumes:
+      - ./configuration.yaml:/config/configuration.yaml:ro
+      - .:/config/test:ro
+      - ..:/config/www/workspace
+    ports:
+      - 8125:8123

tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "allowSyntheticDefaultImports": true,
+      "experimentalDecorators": true
+    }
+  }
+  

webpack.config.js

@@ -1,10 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: './src/main.js',
-  mode: 'production',
-  output: {
-    filename: '<NAME>.js',
-    path: path.resolve(__dirname)
-  }
-};