Merge branch 'dev' into dev

2023-01-10 12:25:10 +02:00 · 2023-01-10 12:25:10 +02:00 · f474e9da24
commit f474e9da24
parent 079c5d77e9 899a89cb3b
25 changed files with 1325 additions and 7860 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,5 +1,2 @@
-webpack.common.js
-webpack.dev.js
-webpack.prod.js
 experiment
 node_modules
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -4,25 +4,56 @@ module.exports = {
    es2021: true,
  },
  extends: [
-    'plugin:react/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
    'airbnb',
+    'prettier',
  ],
+  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
-    ecmaVersion: 12,
+    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
+    '@typescript-eslint'
  ],
  rules: {
    'linebreak-style': 0,
    'no-underscore-dangle': 0,
+
+    "import/prefer-default-export": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+      },
+    ],
+
    'react/no-unstable-nested-components': [
      'error',
      { allowAsProps: true },
    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        extensions: [".tsx", ".jsx"],
+      },
+    ],
+
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+
+    "@typescript-eslint/no-unused-vars": "error",
  },
 };
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@ -1,4 +1,4 @@
-name: 'Build pull request'
+name: Build pull request

 on:
  pull_request:
@ -6,18 +6,18 @@ on:

 jobs:
  build-pull-request:
-    name: 'Build pull request'
+    name: Build pull request
    runs-on: ubuntu-latest
    env:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
-          cache: 'npm'
+          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@ -1,11 +1,13 @@
 name: Deploy PR to Netlify
+
 on:
  workflow_run:
      workflows: ["Build pull request"]
      types: [completed]
+
 jobs:
  deploy-pull-request:
-    name: 'Deploy pull request'
+    name: Deploy pull request
    runs-on: ubuntu-latest
    permissions:
      contents: read
@ -30,7 +32,7 @@ jobs:
          path: dist
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@ac1cb16858bada08a9c71a81240a85cfc3f72913
+        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        with:
          publish-dir: dist
          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@ -40,14 +42,15 @@ jobs:
          enable-commit-comment: false
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
-      - name: Edit PR Description
-        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
+      - name: Comment preview on PR
+        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
-          pull-request-number: ${{ steps.pr.outputs.id }}
-          description-message: |
+          pr_number: ${{ steps.pr.outputs.id }}
+          comment_tag: ${{ steps.pr.outputs.id }}
+          message: |
              Preview: ${{ steps.netlify.outputs.deploy-url }}
              ⚠️ Exercise caution. Use test accounts. ⚠️
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: Build Docker image
        uses: docker/build-push-action@v3.2.0
        with:
--- a/.github/workflows/lockfile.yml
+++ b/.github/workflows/lockfile.yml
@ -14,7 +14,7 @@ jobs:
      pull-requests: write
    steps:
      - name: Checkout
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: NPM Lockfile Changes
        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
        with:
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@ -1,4 +1,4 @@
-name: 'Deploy to Netlify (dev)'
+name: Deploy to Netlify (dev)

 on:
  push:
@ -7,22 +7,22 @@ on:

 jobs:
  deploy-to-netlify:
-    name: 'Deploy to Netlify'
+    name: Deploy to Netlify
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
-          cache: 'npm'
+          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
        run: npm run build
      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@ac1cb16858bada08a9c71a81240a85cfc3f72913
+        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        with:
          publish-dir: dist
          deploy-message: "Dev deploy ${{ github.sha }}"
@ -33,5 +33,5 @@ jobs:
          github-deployment-description: 'Nightly deployment on each commit to dev branch'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
        timeout-minutes: 1
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@ -1,4 +1,4 @@
-name: 'Production deploy'
+name: Production deploy

 on:
  release:
@ -6,22 +6,22 @@ on:

 jobs:
  deploy-and-tarball:
-    name: 'Netlify deploy and tarball'
+    name: Netlify deploy and tarball
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
-          cache: 'npm'
+          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
        run: npm run build
      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@ac1cb16858bada08a9c71a81240a85cfc3f72913
+        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        with:
          publish-dir: dist
          deploy-message: "Prod deploy ${{ github.ref_name }}"
@ -32,7 +32,7 @@ jobs:
          github-deployment-description: 'Stable deployment on each release'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
        timeout-minutes: 1
      - name: Get version from tag
        id: vars
@ -50,7 +50,7 @@ jobs:
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
+        uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
@ -64,7 +64,7 @@ jobs:
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.1.0
+        uses: actions/checkout@v3.2.0
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2.1.0
      - name: Set up Docker Buildx
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,6 @@
+dist
+node_modules
+package.json
+package-lock.json
+LICENSE
+README.md
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
--- a/2
+++ b/2
@ -10,7 +10,7 @@ RUN npm run build


 ## App
-FROM nginx:1.23.2-alpine
+FROM nginx:1.23.3-alpine

 COPY --from=builder /src/dist /app

--- a/index.html
+++ b/index.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cinny</title>
+    <meta name="name" content="Cinny" />
+    <meta name="author" content="Ajay Bura" />
+    <meta
+      name="description"
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+    />
+    <meta
+      name="keywords"
+      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
+    />
+
+    <meta property="og:title" content="Cinny" />
+    <meta property="og:url" content="https://cinny.in" />
+    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+    <meta
+      property="og:description"
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
+
+    <link rel="manifest" href="./manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="./public/res/apple/apple-touch-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="./public/res/apple/apple-touch-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="./public/res/apple/apple-touch-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="./public/res/apple/apple-touch-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="./public/res/apple/apple-touch-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="./public/res/apple/apple-touch-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="./public/res/apple/apple-touch-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="./public/res/apple/apple-touch-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="167x167"
+      href="./public/res/apple/apple-touch-icon-167x167.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./public/res/apple/apple-touch-icon-180x180.png"
+    />
+  </head>
+  <body id="appBody">
+    <script>
+      window.global ||= window;
+    </script>
+    <div id="root"></div>
+    <audio id="notificationSound">
+      <source src="./public/sound/notification.ogg" type="audio/ogg" />
+    </audio>
+    <audio id="inviteSound">
+      <source src="./public/sound/invite.ogg" type="audio/ogg" />
+    </audio>
+    <script type="module" src="./src/index.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,8 +7,13 @@
    "node": ">=16.0.0"
  },
  "scripts": {
-    "start": "webpack serve --config ./webpack.dev.js --open",
-    "build": "webpack --config ./webpack.prod.js"
+    "start": "vite",
+    "build": "vite build",
+    "lint": "yarn check:eslint && yarn check:prettier",
+    "check:eslint": "eslint src/*",
+    "check:prettier": "prettier --check .",
+    "fix:prettier": "prettier --write .",
+    "typecheck": "tsc --noEmit"
  },
  "keywords": [],
  "author": "Ajay Bura",
@ -16,10 +21,9 @@
  "dependencies": {
    "@fontsource/inter": "4.5.14",
    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.5",
-    "@matrix-org/olm": "3.2.13",
+    "@khanacademy/simple-markdown": "0.8.6",
+    "@matrix-org/olm": "3.2.14",
    "@tippyjs/react": "4.2.6",
-    "babel-polyfill": "6.26.0",
    "blurhash": "2.0.4",
    "browser-encrypt-attachment": "0.3.0",
    "dateformat": "5.0.3",
@ -28,10 +32,10 @@
    "flux": "4.0.3",
    "formik": "2.2.9",
    "html-react-parser": "3.0.4",
-    "katex": "0.16.3",
+    "katex": "0.16.4",
    "linkify-html": "4.0.2",
    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "21.1.0",
+    "matrix-js-sdk": "22.0.0",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-autosize-textarea": "7.1.0",
@ -41,42 +45,28 @@
    "react-dom": "17.0.2",
    "react-google-recaptcha": "2.1.0",
    "react-modal": "3.16.1",
-    "sanitize-html": "2.7.3",
+    "sanitize-html": "2.8.0",
    "tippy.js": "6.3.7",
    "twemoji": "14.0.2"
  },
  "devDependencies": {
-    "@babel/core": "7.20.2",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "assert": "2.0.0",
-    "babel-loader": "8.3.0",
-    "browserify-fs": "1.0.0",
-    "buffer": "6.0.3",
-    "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "11.0.0",
-    "crypto-browserify": "3.12.0",
-    "css-loader": "6.7.2",
-    "css-minimizer-webpack-plugin": "4.2.2",
-    "eslint": "8.27.0",
+    "@rollup/plugin-wasm": "6.1.1",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "@typescript-eslint/parser": "5.46.1",
+    "@vitejs/plugin-react": "3.0.0",
+    "eslint": "8.29.0",
    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.10",
+    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
-    "html-loader": "4.2.0",
-    "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.6.1",
-    "path-browserify": "1.0.1",
-    "sass": "1.56.1",
-    "sass-loader": "13.2.0",
-    "stream-browserify": "3.0.0",
-    "style-loader": "3.3.1",
-    "url": "0.11.0",
-    "util": "0.12.5",
-    "webpack": "5.75.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0"
+    "prettier": "2.8.1",
+    "sass": "1.56.2",
+    "typescript": "4.9.4",
+    "vite": "4.0.1",
+    "vite-plugin-static-copy": "0.13.0"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cinny</title>
-    <meta name="name"        content="Cinny">
-    <meta name="author"      content="Ajay Bura">
-    <meta name="description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
-    <meta name="keywords"    content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element">
-  
-    <meta property="og:title"       content="Cinny">
-    <meta property="og:url"         content="https://cinny.in">
-    <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
-    <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
-    <meta name="theme-color" content="#000000">
-
-
-    <link id="favicon" rel="shortcut icon" href="./favicon.ico" />
-
-    <link rel="manifest" href="./manifest.json" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-    <link rel="apple-touch-icon" sizes="57x57" href="./res/apple/apple-touch-icon-57x57.png"/>
-    <link rel="apple-touch-icon" sizes="60x60" href="./res/apple/apple-touch-icon-60x60.png"/>
-    <link rel="apple-touch-icon" sizes="72x72" href="./res/apple/apple-touch-icon-72x72.png"/>
-    <link rel="apple-touch-icon" sizes="76x76" href="./res/apple/apple-touch-icon-76x76.png"/>
-    <link rel="apple-touch-icon" sizes="114x114" href="./res/apple/apple-touch-icon-114x114.png"/>
-    <link rel="apple-touch-icon" sizes="120x120" href="./res/apple/apple-touch-icon-120x120.png"/>
-    <link rel="apple-touch-icon" sizes="144x144" href="./res/apple/apple-touch-icon-144x144.png"/>
-    <link rel="apple-touch-icon" sizes="152x152" href="./res/apple/apple-touch-icon-152x152.png"/>
-    <link rel="apple-touch-icon" sizes="167x167" href="./res/apple/apple-touch-icon-167x167.png"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="./res/apple/apple-touch-icon-180x180.png"/>
-
-</head>
-<body id="appBody">
-    <div id="root"></div>
-    <audio id="notificationSound">
-        <source src="./sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-        <source src="./sound/invite.ogg" type="audio/ogg" />
-    </audio>
-</body>
-</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -11,49 +11,49 @@
  "theme_color": "#fff",
  "icons": [
    {
-      "src": "android-chrome-36x36.png",
+      "src": "/public/android/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-48x48.png",
+      "src": "/public/android/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-72x72.png",
+      "src": "/public/android/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-96x96.png",
+      "src": "/public/android/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-144x144.png",
+      "src": "/public/android/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-192x192.png",
+      "src": "/public/android/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-256x256.png",
+      "src": "/public/android/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-384x384.png",
+      "src": "/public/android/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
-      "src": "android-chrome-512x512.png",
+      "src": "/public/android/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
-}
+}
--- a/src/client/initMatrix.js
+++ b/src/client/initMatrix.js
@ -1,5 +1,6 @@
 import EventEmitter from 'events';
 import * as sdk from 'matrix-js-sdk';
+import Olm from '@matrix-org/olm';
 // import { logger } from 'matrix-js-sdk/lib/logger';

 import { secret } from './state/auth';
@ -10,7 +11,7 @@ import Notifications from './state/Notifications';
 import { cryptoCallbacks } from './state/secretStorageKeys';
 import navigation from './state/navigation';

-global.Olm = require('@matrix-org/olm');
+global.Olm = Olm;

 // logger.disableAll();

@ -78,7 +79,7 @@ class InitMatrix extends EventEmitter {
          this.emit('init_loading_finished');
          this.notifications._initNoti();
        } else {
-          this.notifications._initNoti();
+          this.notifications?._initNoti();
        }
      },
      RECONNECTING: () => {
--- a/src/index.jsx
+++ b/src/index.jsx
@ -9,7 +9,4 @@ import App from './app/pages/App';

 settings.applyTheme();

-ReactDom.render(
-  <App />,
-  document.getElementById('root'),
-);
+ReactDom.render(<App />, document.getElementById('root'));
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "jsx": "react",
+    "target": "ES6",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "outDir": "dist",
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src"]
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { wasm } from '@rollup/plugin-wasm';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const copyFiles = {
+  targets: [
+    {
+      src: 'node_modules/@matrix-org/olm/olm.wasm',
+      dest: '',
+    },
+    {
+      src: '_redirects',
+      dest: '',
+    },
+    {
+      src: 'config.json',
+      dest: '',
+    },
+    {
+      src: 'public/res/android',
+      dest: 'public/',
+    }
+  ],
+}
+
+export default defineConfig({
+  appType: 'spa',
+  publicDir: false,
+  server: {
+    port: 8080,
+    host: true,
+  },
+  plugins: [
+    viteStaticCopy(copyFiles),
+    wasm(),
+    react(),
+  ],
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    copyPublicDir: false,
+  },
+});
--- a/webpack.common.js
+++ b/webpack.common.js
@ -1,66 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require("copy-webpack-plugin");
-const webpack = require('webpack');
-
-module.exports = {
-  entry: {
-    polyfill: 'babel-polyfill',
-    main: './src/index.jsx'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-    fallback: {
-      'crypto': require.resolve('crypto-browserify'),
-      'path': require.resolve('path-browserify'),
-      'fs': require.resolve('browserify-fs'),
-      'stream': require.resolve('stream-browserify'),
-      'util': require.resolve('util/'),
-      'assert': require.resolve('assert/'),
-      'url': require.resolve('url/'),
-      'buffer': require.resolve('buffer'),
-    }
-  },
-  node: {
-    global: true,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
-          },
-        },
-      },
-      {
-        test: /\.html$/,
-        use: ['html-loader'],
-      },
-      {
-        test: /\.(png|jpe?g|gif|otf|ttf|woff|woff2|ogg)$/,
-        type: 'asset/resource',
-      },
-      {
-        test: /\.svg$/,
-        type: 'asset/inline',
-      }
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({ template: './public/index.html' }),
-    new CopyPlugin({
-      patterns: [
-        { from: 'node_modules/@matrix-org/olm/olm.wasm' },
-        { from: '_redirects' },
-        { from: 'config.json' },
-        { from: 'public/res/android'}
-      ],
-    }),
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer'],
-    }),
-  ],
-};
--- a/webpack.dev.js
+++ b/webpack.dev.js
@ -1,27 +0,0 @@
-const path = require('path');
-const common = require('./webpack.common');
-const { merge } = require('webpack-merge');
-
-module.exports = merge(common, {
-  mode: 'development',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].bundle.js',
-    publicPath: '/',
-  },
-  devServer: {
-    historyApiFallback: true,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.s?css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-});
--- a/webpack.prod.js
+++ b/webpack.prod.js
@ -1,39 +0,0 @@
-const path = require('path');
-const common = require('./webpack.common');
-const { merge } = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
-module.exports = merge(common, {
-  mode: 'production',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].[contenthash].bundle.js',
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      '...',
-      new CssMinimizerPlugin(),
-    ],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.s?css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].bundle.css',
-    }),
-  ],
-});