cmd/tsconnect: switch UI to Preact

Reduces the amount of boilerplate to render the UI and makes it easier to
respond to state changes (e.g. machine getting authorized, netmap changing,
etc.)

Preact adds ~13K to our bundle size (5K after Brotli) thus is a neglibible
size contribution. We mitigate the delay in rendering the UI by having a static
placeholder in the HTML.

Required bumping the esbuild version to pick up evanw/esbuild#2349, which
makes it easier to support Preact's JSX code generation.

Fixes #5137
Fixes #5273

Signed-off-by: Mihai Parparita <mihai@tailscale.com>

cmd/tsconnect/src/url-display.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import { useState } from "preact/hooks"
+import * as qrcode from "qrcode"
+
+export function URLDisplay({ url }: { url: string }) {
+  const [dataURL, setDataURL] = useState("")
+  qrcode.toDataURL(url, { width: 512 }, (err, dataURL) => {
+    if (err) {
+      console.error("Error generating QR code", err)
+    } else {
+      setDataURL(dataURL)
+    }
+  })
+
+  return (
+    <div class="flex flex-col items-center justify-items-center">
+      <a href={url} class="link" target="_blank">
+        <img
+          src={dataURL}
+          class="mx-auto"
+          width="256"
+          height="256"
+          alt="QR Code of URL"
+        />
+        {url}
+      </a>
+    </div>
+  )
+}