Reorganize development environment

[AmoebeLabs]

The Problem To Be Solved

Development is currently done in the most simple way: a single source file that is part of my Home Assistant configuration and edited directly.

If the source file is split up into multiple files, a build environment is required to create the distribution.

It also makes it important to have a remote docker development environment, so the card can be active at all times and used in my HA environment.

(Optional): Suggested Solution

As mentioned on Discord by one of the developers: visual studio code remote containers now enable a fully remote environment: source files are also stored in the docker container, and vs code can still access these files:

• git can be managed from the container
• building can be managed from the container (and GitHub using GitHub actions)
• testing can be managed from the container: the custom card is available using the IP address and port number.

This was previously also possible, but with a lot of work. I could never get it to work, or had constant issues. Now it should work out of the box!

That will hopefully help me with more code quality issues, like issue #76. I would be nice to solve that problem...

[AmoebeLabs]

Progress devcontainer

Date: @2023.04.05

Testing with container in host mode. No portmapping yet. This DOES work!!!!

  dev-sak:
    container_name: dev-sak
    network_mode: host
    image: mcr.microsoft.com/devcontainers/javascript-node:20
    command: /bin/sh -c "while sleep 60000; do :; done"
    volumes:
      - $DOCKERDIR/dev/sak/workspaces:/workspaces
      - $DOCKERDIR/dev/sak/vscode:/vscode
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

Use vscode to

• connect to server via remote SSH
• attach to container 'dev-sak' once connected via SSH
• define workspaces and everything seems right

[AmoebeLabs]

Progress Package

Status @2023.04.05

Package

Define the overall package with fixed dependencies for the imports, ie 1:1 to make sure things work

{
  "name": "swiss-army-knife",
  "version": "2.4.2",
  "description": "Swiss Army Knife for Lovelace",
  "main": "srcjs/swiss-army-knife-card.js",
  "type": "module",
  "scripts": {
    "build": "npm run lint && npm run rollup",
    "rollup": "rollup -c",
    "lint": "eslint srcjs/*.js",
    "watch": "rollup -c --watch",
    "postversion": "npm run build",
    "audit-fix": "npx yarn-audit-fix"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.1.0",
    "@rollup/plugin-json": "^6.0.0",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "@rollup/plugin-terser": "0.4.1",
    "eslint": "8.39.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "rollup": "^3.21.4",
    "rollup-plugin-serve": "^2.0.2"
  },
  "dependencies": {
    "@formatjs/intl-utils": "^3.8.4",
    "custom-card-helpers": "^1.8.0",
    "home-assistannpt-js-websocket": "^5.7.0",
    "lit-element": "^2.5.1",
    "lit-html": "^1.4.1"
  }
}

Installation

Install all these packages from within a terminal window in vscode with:

npm install

[AmoebeLabs]

Progress Linting

Status @2023.04.05

eslint

This is a big one. As I never used lint with very strict rules, every misplaced space or brace is an error. So I got a lot of them, and disabled (for now) most errors:

extends: airbnb-base
parserOptions:
  ecmaVersion: 2020
  sourceType: module
rules:
  no-else-return: 0
  no-underscore-dangle: 0
  nonblock-statement-body-position: 0
  curly: 0
  no-return-assign: 0
  consistent-return: 0
  no-mixed-operators: 0
  class-methods-use-this: 0
  no-nested-ternary: 0
  camelcase: 0
  # Added for convenience to check eslint...
  max-len: 0
  no-console: 0
  no-plusplus: 0
  eqeqeq: 0
  no-irregular-whitespace: 0
  no-restricted-globals: 0
  no-undef: 0
  no-unused-vars: 0
  no-use-before-define: 0
  no-multi-assign: 0
  no-case-declarations: 0
  no-inner-declarations: 0
  array-callback-return: 0
  block-scoped-var: 0
  max-classes-per-file: 0
  no-new-func: 0
  no-bitwise: 0
  no-prototype-builtins: 0
  no-var: 0
  vars-on-top: 0
  no-constant-condition: 0
  no-empty: 0
  default-case: 0
  default-case-last: 0
  prefer-const: 0
  no-redeclare: 0
  no-setter-return: 0
  brace-style: 0
  no-lonely-if: 0
  operator-assignment: 0
  no-shadow: 0
  func-names: 0
  no-sequences: 0
  prefer-destructuring: 0
  no-restricted-syntax: 0
  no-unused-expressions: 0
  no-loop-func: 0
  no-useless-escape: 0
  import/no-unresolved: 0
  no-template-curly-in-string: 0
  import/extensions: 0
globals:
  window: true
  Event: true
  customElements: true

[AmoebeLabs]

Progress Rollup

Status @2023.04.05

Rollup

Rolling up to a .js file with all the imports in it, so no need for loading external packages anymore. Me happy!! No more cors problems and loading problems/time-outs.

For now, the directories srcjs and distjs are used to prevent overwriting existing javascript files.

Use export ROLLUP_WATCH=true to enable de dev environment with debugging, and keeping the js files readable.

Use unset ROLLUP_WATCH to enable release environment with terser and more.

The custom-card is available from Home Assistant using the following resource definition in resources.yaml:
For now, the name -bundle is used to define a different resource.

- url: http://bfs:5050/swiss-army-knife-card-bundle.js
  type: module

Rollup definition file rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

const dev = process.env.ROLLUP_WATCH;
const serveopts = {
  contentBase: ['distjs'],
  host: '0.0.0.0',
  port: 5050,
  open: true,
  allowCrossOrigin: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  // execute function after server has begun listening
  onListening: function (server) {
    const address = server.address()
    const host = address.address === '::' ? 'localhost' : address.address
    // by using a bound function, we can access options as `this`
    const protocol = this.https ? 'https' : 'http'
    console.log(`Server listening at ${protocol}://${host}:${address.port}/`)
  }
};

export default {
  input: 'srcjs/swiss-army-knife-card.js',
  output: {
    file: 'distjs/swiss-army-knife-card-bundle.js',
    format: 'es',
    name: 'SwissArmyKnifeCard',
    sourcemap: dev ? true : false,
  },
  watch: {
    exclude: 'node_modules/**',
  },
  plugins: [
    commonjs(),
    json({
      include: 'package.json',
      preferConst: true,
    }),
    resolve(),
    dev && serve(serveopts),
    !dev && terser({
      mangle: {
        safari10: true,
      },
    }),
  ],
};

Usage, building

npm run build

npm run watch