[PhotonClient] Vite and Typescript complete refactor (#884)

.github/workflows/main.yml

@@ -14,9 +14,7 @@ on:
   merge_group:
 
 jobs:
-  # This job builds the client (web view).
   photonclient-build:
-
     # Let all steps run within the photon-client dir.
     defaults:
       run:
@@ -33,19 +31,44 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 17
 
     # Run npm
-    - run: npm update -g npm
-    - run: npm ci
-    - run: npm run build --if-present
+    - name: Install Dependencies
+      run: npm ci
+
+    - name: Build Production Client
+      run: npm run build
 
     # Upload client artifact.
     - uses: actions/upload-artifact@master
       with:
         name: built-client
         path: photon-client/dist/
+  photonclient-check-lint:
+    # Let all steps run within the photon-client dir.
+    defaults:
+      run:
+        working-directory: photon-client
+
+    # The type of runner that the job will run on.
+    runs-on: ubuntu-22.04
+
+    steps:
+    # Checkout code.
+    - uses: actions/checkout@v3
+
+    # Setup Node.js
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 17
+
+    - name: Install Dependencies
+      run: npm ci
 
+    - name: Check Formatting
+      run: npm run lint
   photon-build-examples:
     runs-on: ubuntu-22.04
     name: "Build Examples"
@@ -88,7 +111,6 @@ jobs:
           chmod +x gradlew
           ./gradlew copyPhotonlib -x check
           ./gradlew buildAllExamples -x check --max-workers 2
-
   photon-build-all:
     # The type of runner that the job will run on.
     runs-on: ubuntu-22.04
@@ -135,7 +157,6 @@ jobs:
         uses: codecov/codecov-action@v3
         with:
           file: ./photon-core/build/reports/jacoco/test/jacocoTestReport.xml
-
   photonserver-build-offline-docs:
     runs-on: ubuntu-22.04
 
@@ -172,7 +193,6 @@ jobs:
         with:
           name: built-docs
           path: build/html
-
   photonserver-check-lint:
     # The type of runner that the job will run on.
     runs-on: ubuntu-22.04
@@ -193,8 +213,6 @@ jobs:
       - run: |
           chmod +x gradlew
           ./gradlew spotlessCheck
-
-  #  Building photonlib
   photonlib-build-host:
     env:
       MACOSX_DEPLOYMENT_TARGET: 10.14
@@ -229,7 +247,6 @@ jobs:
         env:
           ARTIFACTORY_API_KEY: ${{ secrets.ARTIFACTORY_API_KEY }}
         if: github.event_name == 'push'
-
   photonlib-build-docker:
     strategy:
       fail-fast: false
@@ -263,7 +280,6 @@ jobs:
         env:
           ARTIFACTORY_API_KEY: ${{ secrets.ARTIFACTORY_API_KEY }}
         if: github.event_name == 'push'
-
   photonlib-wpiformat:
     name: "wpiformat"
     runs-on: ubuntu-22.04
@@ -292,7 +308,6 @@ jobs:
           name: wpiformat fixes
           path: wpiformat-fixes.patch
         if: ${{ failure() }}
-
   photon-build-package:
     needs: [photonclient-build, photon-build-all, photonserver-build-offline-docs]
 
@@ -378,8 +393,6 @@ jobs:
         with:
           name: jar-${{ matrix.artifact-name }}
           path: photon-server/build/libs
-
-
   photon-image-generator:
     needs: [photon-build-package]
     if: ${{ github.event_name != 'pull_request' }}
@@ -420,8 +433,6 @@ jobs:
         with:
           name: image-${{ matrix.image_suffix }}
           path: photonvision*.xz
-
-
   photon-release:
     needs: [photon-build-package, photon-image-generator]
     runs-on: ubuntu-22.04

.styleguide

@@ -17,6 +17,7 @@ modifiableFileExclude {
   \.so$
   \.dll$
   \.webp$
+  \.ico$
   gradlew
 }
 

photon-client/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:vue/recommended",
+    "@vue/eslint-config-typescript/recommended"
+  ],
+  "rules": {
+    "quotes": ["error", "double"],
+    "comma-dangle": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "semi": ["error", "always"],
+    "eol-last": "error",
+    "object-curly-spacing": ["error", "always"],
+    "quote-props": ["error", "as-needed"],
+    "no-case-declarations": "off",
+    "vue/require-default-prop": "off"
+  }
+}

photon-client/.gitignore

@@ -1,21 +1,28 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# 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
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
-.idea
 .vscode
+!.vscode/extensions.json
+.idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+components.d.ts

photon-client/env.d.ts

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

photon-client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Photon Client</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>