Rewrite UI in Svelte

Author: Seeker14491

README.md

@@ -30,7 +30,7 @@ Once the plugin is installed you can run the app which will show data once you'r
 
 ## Architecture
 
-The game plugin continually collects telemetry from the running game and sends it over UDP as JSON to the GUI application. The GUI is implemented with [React](https://reactjs.org/) + [Tauri](https://tauri.studio/).
+The game plugin continually collects telemetry from the running game and sends it over UDP as JSON to the GUI application. The GUI is implemented with [SvelteKit](https://kit.svelte.dev/) + [Tauri](https://tauri.studio/).
 
 ## Building the plugin
 
@@ -55,6 +55,8 @@ yarn tauri build
 
 The build output will be in the `peekr-ui/src-tauri/target/release` directory.
 
+Alternatively, the script `windows_tiny_build.ps1` in the `peekr-ui` folder can be used to build for windows, making use of a few extra tricks to get a smaller binary size. It requires [UPX](https://upx.github.io/) being available on the command line.
+
 ## Credits
 
 The layout was inspired by the [Distplay](https://github.com/Californ1a/distplay) input viewer.

peekr-ui/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["svelte3", "@typescript-eslint"],
+  ignorePatterns: ["*.cjs"],
+  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+  settings: {
+    "svelte3/typescript": () => require("typescript"),
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2019,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+};

peekr-ui/.gitignore

@@ -1,23 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules
+/build
+/.svelte-kit
+/package

peekr-ui/.prettierignore

@@ -0,0 +1,5 @@
+.svelte-kit/
+build/
+node_modules/
+src-tauri/target/
+src-tauri/WixTools/

peekr-ui/.prettierrc.json peekr-ui/.prettierrcpeekr-ui/.prettierrc.json renamed to peekr-ui/.prettierrc

@@ -1,63 +1,40 @@
 {
   "name": "telemetry-ui",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@chakra-ui/react": "^1.0.0",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@tauri-apps/api": "^1.0.0-beta.1",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/user-event": "^12.0.2",
-    "@types/jest": "^25.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "framer-motion": "^4.0.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^3.0.0",
-    "react-scripts": "4.0.3",
-    "runtypes": "^6.3.0",
-    "typescript": "^4.3.4",
-    "web-vitals": "^0.2.2"
-  },
+  "version": "0.0.1",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write"
-    ]
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+    "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.0.0-beta.2"
+    "@sveltejs/adapter-static": "^1.0.0-next.18",
+    "@sveltejs/kit": "next",
+    "@tauri-apps/cli": "^1.0.0-beta.10",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
+    "autoprefixer": "^10.3.1",
+    "cssnano": "^5.0.6",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-svelte3": "^3.2.0",
+    "postcss": "^8.3.5",
+    "postcss-load-config": "^3.1.0",
+    "prettier": "~2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
+    "svelte": "^3.34.0",
+    "svelte-check": "^2.0.0",
+    "svelte-preprocess": "^4.7.4",
+    "tailwindcss": "^2.2.4",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@tauri-apps/api": "^1.0.0-beta.8",
+    "purify-ts": "^1.0.0"
   }
 }

peekr-ui/package.json

@@ -0,0 +1,21 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer(),
+    !dev &&
+      cssnano({
+        preset: "default",
+      }),
+  ],
+};
+
+module.exports = config;

peekr-ui/postcss.config.cjs

@@ -1,2 +1,4 @@
-target/
-WixTools/
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+WixTools