Reimplement frontend in Svelte (#18)

* Switch from React+CRA to Svelte

* Add routing, queries, and Bulma

* Update API client for the ZeroTier One service

* Style the navbar and implement dark mode toggle

* Configure fonts

* Improve dark mode colors and theme decomposition, and add toggle icon

* Improve layout and scroll behavior for the navbar

* Improve scrollbar visibility in dark mode

* Tweak theme grayscale colors

* Improve navbar height responsiveness

* Reimplement home page in Svelte

* Reimplement peers page in Svelte, add animations

* Reimplement smart display of network names in Svelte

* Reimplement network lists & info in Svelte

* Don't use the tauri helper/os-check module, since it's an internal API

* Svelte components with transitions shouldn't retry queries on mount

* Hide empty sections of the Networks page, with animations

* Improve contrast/readability of success & danger tags

* Implement modal drawers with animations

* Fix build configuration

* Implement join form in Svelte, stop spurious clicks for modal background

* Fix problems with freezing on Jetson Nano (aarch64, Ubuntu 18.04)

* Make transitions in the Jetson Nano fix be local

* Add rollup processing config to disable animations by env var

* Fix shift-tab focus cycling behavior in the modals

* Reimplement joining network by id in Svelte

* Reimplement joining network by domain name in Svelte

* Bump the version number

* Reorganize stylesheets for reusability

* Resolve linter complaints bout unused imports/variables

* Resolve eslint issues

Author: ethanjli

.eslintrc.js

@@ -1,42 +1,44 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   extends: [
-    'airbnb',
-    'airbnb-typescript',
-    'airbnb/hooks',
+    'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:jest/recommended',
-    'plugin:prettier/recommended'
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
   ],
-  plugins: ['react', '@typescript-eslint', 'jest'],
-  env: {
-    browser: true,
-    es6: true,
-    jest: true,
-  },
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-  },
-  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
     project: './tsconfig.json',
+    extraFileExtensions: ['.svelte']
+  },
+  env: {
+    browser: true,
+    es6: true
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3',
+      rules: {
+        // For some reason, eslint generates false positives wherever I use svelte-query,
+        // even though svelte-query has all the type annotations and they make sense to me.
+        // We'll just rely on svelte-check to warn us about `any` values.
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/restrict-template-expressions': 'off',
+      },
+    }
+  ],
+  plugins: ['svelte3', '@typescript-eslint'],
+  settings: {
+    'svelte3/typescript': require('typescript')
+    // ignore style tags in Svelte because of Tailwind CSS
+    // See https://github.com/sveltejs/eslint-plugin-svelte3/issues/70
+    //'svelte3/ignore-styles': () => true
   },
   rules: {
     'linebreak-style': 'off',
-    'prettier/prettier': [
-      'warn',
-      {
-        endOfLine: 'auto',
-        singleQuote: true,
-        semi: true,
-        trailingCommas: 'all'
-      },
-    ],
-    'react/jsx-props-no-spreading': 'off'
   },
+  ignorePatterns: ['node_modules']
 };

.github/workflows/build-tauri-app.yml

@@ -26,8 +26,12 @@ jobs:
           ${{ runner.os }}-yarn-
     - name: Install app dependencies
       run: yarn --prefer-offline
+    - name: Run format checker
+      run: yarn formatted
     - name: Run linter
       run: yarn lint
+    - name: Run svelte checker
+      run: yarn svelte-check
     - name: Run frontend build
       run: yarn build
 
@@ -145,7 +149,7 @@ jobs:
           echo "Run bundle build"
           # Note: right now tauri's appimage.sh is hardcoded to build AppImages
           # against x86_64, so we can't build AppImage bundles for ARM.
-          cargo tauri build --bundle deb
+          REMOVE_TRANSFORM_ANIMATIONS=1 cargo tauri build --bundle deb
     - name: Upload the build artifacts
       uses: actions/upload-artifact@v2
       with:

.gitignore

@@ -5,8 +5,8 @@
 /.pnp
 .pnp.js
 
-# testing
-/coverage
+# build
+/public/build/
 
 # production
 /build
@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 
+# package managers
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSameLine: true,
+  plugins: ['prettier-plugin-svelte'],
+  svelteSortOrder: 'options-scripts-markup-styles',
+  svelteStrictMode: false,
+  svelteBracketNewLine: true,
+  svelteIndentScriptAndStyle: true,
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

config-overrides.js

@@ -1,80 +1,60 @@
 {
   "name": "latreutes",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
-  "dependencies": {
-    "@chakra-ui/icons": "^1.0.15",
-    "@chakra-ui/react": "^1.6.7",
-    "@chakra-ui/theme-tools": "^1.2.0",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@fontsource/atkinson-hyperlegible": "^4.5.1",
-    "@fontsource/oxygen-mono": "^4.5.0",
-    "@tauri-apps/api": "^1.0.0-beta.6",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.19",
-    "@types/react": "^17.0.18",
-    "@types/react-dom": "^17.0.9",
-    "formik": "^2.2.9",
-    "framer-motion": "^4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-query": "^3.21.0",
-    "react-router-dom": "^5.2.1",
-    "react-scripts": "^4.0.3",
-    "react-tabs": "^3.2.2",
-    "typescript": "^4.3.5",
-    "validator": "^13.6.0",
-    "web-vitals": "^1.1.2"
-  },
   "scripts": {
-    "start": "BROWSER=none react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject",
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "tauri": "tauri",
-    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
-    "lint:fix": "tsc --noEmit && eslint src/**/*.ts{,x} --fix"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "formatted": "prettier --check ./src/**/*.{js,svelte,html,ts}",
+    "format": "prettier --write ./src/**/*.{js,svelte,html,ts}",
+    "lint": "tsc --noEmit && prettier --write ./src/**/*.{js,svelte,html,ts} && eslint src/**/*.{js,ts,svelte}",
+    "lint:fix": "tsc --noEmit && prettier --write ./src/**/*.{js,svelte,html,ts} && eslint --fix src/**/*.{js,ts,svelte}"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.0.0-beta.8",
-    "@types/react-router-dom": "^5.1.8",
-    "@types/react-tabs": "^2.3.3",
+    "@mdi/js": "^6.1.95",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@tauri-apps/cli": "^1.0.0-beta.10",
+    "@tsconfig/svelte": "^2.0.0",
     "@types/validator": "^13.6.3",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "bulma": "^0.9.3",
+    "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "prettier": "^2.3.2",
-    "react-app-rewired": "^2.1.8"
+    "eslint-plugin-svelte3": "^3.2.1",
+    "mdi-svelte": "^1.1.2",
+    "node-sass": "^6.0.1",
+    "prettier": "^2.4.1",
+    "prettier-plugin-svelte": "^2.4.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-re": "^1.0.7",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-accessible-accordion": "^2.0.0",
+    "svelte-check": "^2.2.7",
+    "svelte-dark-mode": "^2.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
+  },
+  "dependencies": {
+    "@felte/reporter-svelte": "^0.3.16",
+    "@fontsource/atkinson-hyperlegible": "^4.5.1",
+    "@fontsource/oxygen-mono": "^4.5.0",
+    "@sveltestack/svelte-query": "^1.4.1",
+    "@tauri-apps/api": "^1.0.0-beta.8",
+    "felte": "^0.8.3",
+    "sirv-cli": "^1.0.0",
+    "svelte-routing": "^1.6.0",
+    "validator": "^13.6.0"
   }
 }

package.json

@@ -1,43 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+	<title>Svelte app</title>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
 </html>