Migrate front-end from vue2+js to vue3+ts

Author: g3force

.circleci/config.yml

@@ -2,25 +2,25 @@ version: 2
 jobs:
   frontend:
     docker:
-      - image: circleci/node:16.13.1
+      - image: cimg/node:lts
     steps:
       - checkout
       - run:
           name: "Install dependencies"
-          command: yarn install
+          working_directory: frontend
+          command: npm install
       - run:
           name: "Build"
-          command: yarn build
+          working_directory: frontend
+          command: npm run build
       - persist_to_workspace:
           root: .
           paths:
-            - dist/*
+            - frontend/dist/*
 
   backend:
     docker:
-      - image: circleci/golang:1.17
-
-    working_directory: /go/src/github.com/RoboCup-SSL/ssl-vision-client
+      - image: cimg/go:1.20
     steps:
       - checkout
       - attach_workspace:
@@ -30,10 +30,9 @@ jobs:
       - run:
           working_directory: cmd/ssl-vision-client
           command: |
-            go get -v github.com/gobuffalo/packr/packr
-            GOOS=linux GOARCH=amd64 packr build -o ../../release/ssl-vision-client_linux_amd64
-            GOOS=darwin GOARCH=amd64 packr build -o ../../release/ssl-vision-client_darwin_amd64
-            GOOS=windows GOARCH=amd64 packr build -o ../../release/ssl-vision-client_windows_amd64.exe
+            GOOS=linux GOARCH=amd64 go build -o ../../release/ssl-vision-client_linux_amd64
+            GOOS=darwin GOARCH=amd64 go build -o ../../release/ssl-vision-client_darwin_amd64
+            GOOS=windows GOARCH=amd64 go build -o ../../release/ssl-vision-client_windows_amd64.exe
       - run:
           working_directory: cmd/ssl-vision-cli
           command: |
@@ -47,25 +46,43 @@ jobs:
 
   publish-github-release:
     docker:
-      - image: circleci/golang:1.17
+      - image: cimg/go:1.20
     steps:
       - attach_workspace:
           at: .
       - run:
           name: "Prepare artifacts"
           working_directory: release
           command: |
-            mv ssl-vision-client_linux_amd64 ssl-vision-client_${CIRCLE_TAG}_linux_amd64
-            mv ssl-vision-client_darwin_amd64 ssl-vision-client_${CIRCLE_TAG}_darwin_amd64
-            mv ssl-vision-client_windows_amd64.exe ssl-vision-client_${CIRCLE_TAG}_windows_amd64.exe
-            mv ssl-vision-cli_linux_amd64 ssl-vision-cli_${CIRCLE_TAG}_linux_amd64
-            mv ssl-vision-cli_darwin_amd64 ssl-vision-cli_${CIRCLE_TAG}_darwin_amd64
-            mv ssl-vision-cli_windows_amd64.exe ssl-vision-cli_${CIRCLE_TAG}_windows_amd64.exe
+            mkdir gh
+            mv ssl-vision-client_linux_amd64 gh/ssl-vision-client_${CIRCLE_TAG}_linux_amd64
+            mv ssl-vision-client_darwin_amd64 gh/ssl-vision-client_${CIRCLE_TAG}_darwin_amd64
+            mv ssl-vision-client_windows_amd64.exe gh/ssl-vision-client_${CIRCLE_TAG}_windows_amd64.exe
+            mv ssl-vision-cli_linux_amd64 gh/ssl-vision-cli_${CIRCLE_TAG}_linux_amd64
+            mv ssl-vision-cli_darwin_amd64 gh/ssl-vision-cli_${CIRCLE_TAG}_darwin_amd64
+            mv ssl-vision-cli_windows_amd64.exe gh/ssl-vision-cli_${CIRCLE_TAG}_windows_amd64.exe
       - run:
           name: "Publish Release on GitHub"
           command: |
-            go get github.com/tcnksm/ghr
-            ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -delete ${CIRCLE_TAG} ./release/
+            go install github.com/tcnksm/[email protected]
+            ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -delete ${CIRCLE_TAG} ./release/gh/
+
+  docker:
+    docker:
+      - image: cimg/base:2023.02
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 20.10.18
+      - run: |
+          TAG=${CIRCLE_TAG:1}
+          TAG=${TAG:-latest}
+          docker build -t robocupssl/ssl-vision-client:$TAG .
+          docker login -u "${DOCKER_HUB_USERNAME}" -p "${DOCKER_HUB_PASSWORD}"
+          docker push robocupssl/ssl-vision-client:$TAG
+          docker build -t robocupssl/ssl-vision-cli:$TAG .
+          docker login -u "${DOCKER_HUB_USERNAME}" -p "${DOCKER_HUB_PASSWORD}"
+          docker push robocupssl/ssl-vision-cli:$TAG
 
 workflows:
   version: 2
@@ -82,10 +99,18 @@ workflows:
             tags:
               only: /.*/
       - publish-github-release:
+          context: github
           requires:
             - backend
           filters:
             branches:
               ignore: /.*/
             tags:
               only: /^v.*/
+      - docker:
+          context: docker hub
+          filters:
+            branches:
+              only: master
+            tags:
+              only: /^v.*/

.github/renovate.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "config:base",
+    "schedule:monthly"
+  ]
+}

README.md

@@ -22,50 +22,27 @@ By default, the UI is available at http://localhost:8082
 
 ## Development
 
-### Requirements
-You need to install following dependencies first: 
- * Go >= 1.17
- * Node >= 10
- * Yarn
-
-### Prepare
-Download and install to [GOPATH](https://github.com/golang/go/wiki/GOPATH):
-```bash
-go get -u github.com/RoboCup-SSL/ssl-vision-client/...
-```
-Switch to project root directory
-```bash
-cd $GOPATH/src/github.com/RoboCup-SSL/ssl-vision-client/
-```
-Download dependencies for frontend
-```bash
-yarn install
-```
+You need to install following dependencies first:
+
+* Go
+* Node
+
+See [.circleci/config.yml](.circleci/config.yml) for required versions.
+
+### Frontend
+
+See [frontend/README.md](frontend/README.md)
 
 ### Run
+
 Run the backend:
-```bash
-go run cmd/ssl-vision-client/main.go
-```
 
-Run the UI:
 ```bash
-# compile and hot-reload
-yarn serve
+go run cmd/ssl-vision-client/main.go
 ```
-Or use the provided IntelliJ run configurations.
 
 ### Build self-contained release binary
-First, build the UI resources
-```bash
-# compile and minify UI
-yarn build
-```
-Then build the backend with `packr`
+
 ```bash
-# get packr
-go get github.com/gobuffalo/packr/packr
-# install the binary
-cd cmd/ssl-vision-client
-packr install
+./install.sh
 ```

babel.config.js

@@ -2,11 +2,11 @@ package main
 
 import (
 	"flag"
+	"github.com/RoboCup-SSL/ssl-vision-client/frontend"
 	"github.com/RoboCup-SSL/ssl-vision-client/pkg/client"
 	"github.com/RoboCup-SSL/ssl-vision-client/pkg/tracked"
 	"github.com/RoboCup-SSL/ssl-vision-client/pkg/vision"
 	"github.com/RoboCup-SSL/ssl-vision-client/pkg/visualization"
-	"github.com/gobuffalo/packr"
 	"log"
 	"net/http"
 	"strings"
@@ -23,7 +23,10 @@ func main() {
 	flag.Parse()
 
 	setupVisionClient()
-	setupUi()
+	frontend.HandleUi()
+
+	log.Printf("UI is available at %v", formattedAddress())
+
 	err := http.ListenAndServe(*address, nil)
 	if err != nil {
 		log.Fatal(err)
@@ -85,22 +88,9 @@ func parseSkipInterfaces() []string {
 	return strings.Split(*skipInterfaces, ",")
 }
 
-func setupUi() {
-	box := packr.NewBox("../../dist")
-
-	withResponseHeaders := func(h http.Handler) http.HandlerFunc {
-		return func(w http.ResponseWriter, r *http.Request) {
-			// Set some header.
-			w.Header().Add("Access-Control-Allow-Origin", "*")
-			// Serve with the actual handler.
-			h.ServeHTTP(w, r)
-		}
-	}
-
-	http.Handle("/", withResponseHeaders(http.FileServer(box)))
-	if box.Has("index.html") {
-		log.Printf("UI is available at http://%v", *address)
-	} else {
-		log.Print("Backend-only version started. Run the UI separately or get a binary that has the UI included")
+func formattedAddress() string {
+	if strings.HasPrefix(*address, ":") {
+		return "http://localhost" + *address
 	}
+	return "http://" + *address
 }

cmd/ssl-vision-client/main.go

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

frontend/.eslintrc.cjs

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.gitignore

@@ -0,0 +1,25 @@
+# frontend
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

frontend/README.md

@@ -0,0 +1,28 @@
+package frontend
+
+import (
+	"embed"
+	"io/fs"
+	"net/http"
+)
+
+//go:embed dist/*
+var content embed.FS
+
+func HandleUi() {
+	dist, err := fs.Sub(content, "dist")
+	if err != nil {
+		panic(err)
+	}
+
+	withResponseHeaders := func(h http.Handler) http.HandlerFunc {
+		return func(w http.ResponseWriter, r *http.Request) {
+			// Set some header.
+			w.Header().Add("Access-Control-Allow-Origin", "*")
+			// Serve with the actual handler.
+			h.ServeHTTP(w, r)
+		}
+	}
+
+	http.Handle("/", withResponseHeaders(http.FileServer(http.FS(dist))))
+}

frontend/embed.go

@@ -0,0 +1 @@
+/// <reference types="vite/client" />