Add support for QR code context in configuration

[yfre]

add support for context "QRCode" to binding configuration view.
it can be used for example for HomeKit pairing.

it looks like this

Signed-off-by: Eugen Freiter [email protected]

[ghys]

Interesting and clever use case for a config parameter!

Normally those are user-editable (and they are, in the code view) so you'd want to be careful, but I can see the clear benefit for the HomeKit users, and you did the implementation, so thanks!

I made 2 changes:

• use the webpack code splitting trick (https://webpack.js.org/guides/lazy-loading/) to put the vue-qrcode component (and the qrcode library in its separate bundle so that it's only loaded when needed (qrcode is 29kb minified, it's not that much but it doesn't hurt either!).
• there are some light linting rules in place, when you develop the UI make sure to use for instance the ESLint VSCode extension to see and fix those errors (it doesn't break the build but still):
  

[yfre]

Interesting and clever use case for a config parameter!

Normally those are user-editable (and they are, in the code view) so you'd want to be careful, but I can see the clear benefit for the HomeKit users, and you did the implementation, so thanks!

I made 2 changes:

• use the webpack code splitting trick (https://webpack.js.org/guides/lazy-loading/) to put the vue-qrcode component (and the qrcode library in its separate bundle so that it's only loaded when needed (qrcode is 29kb minified, it's not that much but it doesn't hurt either!).
• there are some light linting rules in place, when you develop the UI make sure to use for instance the ESLint VSCode extension to see and fix those errors (it doesn't break the build but still):
  

@ghys thank you for the review and feedback with explanation. i learned something. it was my first UI PR, im more the backend guy :)

[ghys]

No problem 👍
This should go into the CONTRIBUTING.md file...

These are the VSCode extensions that are most useful:

• Vetur (so useful it's almost required!)
• ESLint (probably required too)
• language-stylus (if you work on stylus)
• Nearley (if you work on the nearley grammars)