Release v2.2.3

* add vite plugin to add svg as inline data

* Add node types package

.eslintignore

@@ -1,5 +1,2 @@
-webpack.common.js
-webpack.dev.js
-webpack.prod.js
 experiment
 node_modules

.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",
   },
 };

.github/workflows/build-pull-request.yml

@@ -1,4 +1,4 @@
-name: 'Build pull request'
+name: Build pull request
 
 on:
   pull_request:
@@ -6,24 +6,24 @@ 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.0.2
+        uses: actions/checkout@v3.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.4.1
+        uses: actions/setup-node@v3.5.1
         with:
-          node-version: 17.9.0
+          node-version: 18.12.1
-          cache: 'npm'
+          cache: "npm"
       - name: Install dependencies
         run: npm ci
       - name: Build app
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v3.1.0
+        uses: actions/upload-artifact@v3.1.1
         with:
           name: preview
           path: dist
@@ -31,8 +31,8 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v3.1.0
+        uses: actions/upload-artifact@v3.1.1
         with:
           name: pr
           path: ./pr.txt
-          retention-days: 1
+          retention-days: 1

.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
@@ -13,16 +15,16 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
+        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: pr
       - name: Output pr number
         id: pr
-        run: echo "::set-output name=id::$(<pr.txt)"
+        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
+        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -30,7 +32,7 @@ jobs:
           path: dist
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        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
+      - name: Comment preview on PR
-        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
+        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pull-request-number: ${{ steps.pr.outputs.id }}
+          pr_number: ${{ steps.pr.outputs.id }}
-          description-message: |
+          comment_tag: ${{ steps.pr.outputs.id }}
+          message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
               ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.0.2
+        uses: actions/checkout@v3.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v3.1.1
+        uses: docker/build-push-action@v3.2.0
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.0.2
+        uses: actions/checkout@v3.2.0
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.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.0.2
+        uses: actions/checkout@v3.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.4.1
+        uses: actions/setup-node@v3.5.1
         with:
-          node-version: 17.9.0
+          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@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        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

.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.0.2
+        uses: actions/checkout@v3.2.0
       - name: Setup node
-        uses: actions/setup-node@v3.4.1
+        uses: actions/setup-node@v3.5.1
         with:
-          node-version: 17.9.0
+          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@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        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,31 +64,31 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.0.2
+        uses: actions/checkout@v3.2.0
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
+        uses: docker/setup-qemu-action@v2.1.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
+        uses: docker/setup-buildx-action@v2.2.1
       - name: Login to Docker Hub
-        uses: docker/login-action@v2.0.0
+        uses: docker/login-action@v2.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v2.0.0
+        uses: docker/login-action@v2.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4.0.1
+        uses: docker/metadata-action@v4.1.1
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v3.1.1
+        uses: docker/build-push-action@v3.2.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.prettierignore

@@ -0,0 +1,6 @@
+dist
+node_modules
+package.json
+package-lock.json
+LICENSE
+README.md

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

Dockerfile

@@ -1,5 +1,5 @@
 ## Builder
-FROM node:17.9.0-alpine3.15 as builder
+FROM node:18.12.1-alpine3.15 as builder
 
 WORKDIR /src
 
@@ -10,7 +10,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.23.1-alpine
+FROM nginx:1.23.3-alpine
 
 COPY --from=builder /src/dist /app
 

README.md

@@ -84,7 +84,7 @@ UeGsouhyuITLwEhScounZDqop+Dx
 
 ## Local development
 > We recommend using a version manager as versions change very quickly. You will likely need to switch 
-between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
+between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version Hydrogen LTS (v18).
 
 Execute the following commands to start a development server:
 ```sh

config.json

@@ -1,9 +1,9 @@
 {
   "defaultHomeserver": 3,
   "homeserverList": [
+    "converser.eu",
     "envs.net",
     "halogen.city",
-    "kde.org",
     "matrix.org",
     "mozilla.org"
   ],

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>

package.json

@@ -1,27 +1,30 @@
 {
   "name": "cinny",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": ">=6.14.8",
+    "node": ">=16.0.0"
-    "node": ">=14.15.0"
   },
   "scripts": {
-    "start": "webpack serve --config ./webpack.dev.js --open",
+    "start": "vite",
-    "build": "webpack --config ./webpack.prod.js"
+    "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",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "4.5.12",
+    "@fontsource/inter": "4.5.14",
     "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.4",
+    "@khanacademy/simple-markdown": "0.8.6",
-    "@matrix-org/olm": "3.2.12",
+    "@matrix-org/olm": "3.2.14",
     "@tippyjs/react": "4.2.6",
-    "babel-polyfill": "6.26.0",
+    "blurhash": "2.0.4",
-    "blurhash": "2.0.0",
     "browser-encrypt-attachment": "0.3.0",
     "dateformat": "5.0.3",
     "emojibase-data": "7.0.1",
@@ -29,55 +32,43 @@
     "flux": "4.0.3",
     "formik": "2.2.9",
     "html-react-parser": "3.0.4",
-    "katex": "0.16.2",
+    "katex": "0.16.4",
-    "linkify-html": "4.0.0",
+    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.0",
+    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "20.0.0",
+    "matrix-js-sdk": "22.0.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.1.3",
+    "react-blurhash": "0.2.0",
     "react-dnd": "15.1.2",
     "react-dnd-html5-backend": "15.1.3",
     "react-dom": "17.0.2",
     "react-google-recaptcha": "2.1.0",
-    "react-modal": "3.15.1",
+    "react-modal": "3.16.1",
-    "sanitize-html": "2.7.2",
+    "sanitize-html": "2.8.0",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.19.1",
+    "@rollup/plugin-wasm": "6.1.1",
-    "@babel/preset-env": "7.19.1",
+    "@types/node": "18.11.18",
-    "@babel/preset-react": "7.18.6",
+    "@types/react": "18.0.26",
-    "assert": "2.0.0",
+    "@types/react-dom": "18.0.9",
-    "babel-loader": "8.2.5",
+    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "browserify-fs": "1.0.0",
+    "@typescript-eslint/parser": "5.46.1",
-    "buffer": "6.0.3",
+    "@vitejs/plugin-react": "3.0.0",
-    "clean-webpack-plugin": "4.0.0",
+    "eslint": "8.29.0",
-    "copy-webpack-plugin": "11.0.0",
-    "crypto-browserify": "3.12.0",
-    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "4.1.0",
-    "eslint": "8.24.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.8",
+    "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "html-loader": "4.2.0",
+    "mini-svg-data-uri": "1.4.4",
-    "html-webpack-plugin": "5.5.0",
+    "prettier": "2.8.1",
-    "mini-css-extract-plugin": "2.6.1",
+    "sass": "1.56.2",
-    "path-browserify": "1.0.1",
+    "typescript": "4.9.4",
-    "sass": "1.55.0",
+    "vite": "4.0.1",
-    "sass-loader": "13.0.2",
+    "vite-plugin-static-copy": "0.13.0"
-    "stream-browserify": "3.0.0",
-    "style-loader": "3.3.1",
-    "url": "0.11.0",
-    "util": "0.12.4",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0"
   }
 }

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>

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"
     }
   ]
-}
+}

src/app/atoms/system-icons/RawIcon.jsx

@@ -2,20 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({
+function RawIcon({ color, size, src, isImage }) {
-  color, size, src, isImage,
-}) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
     style.backgroundColor = 'transparent';
-    style.backgroundImage = `url(${src})`;
+    style.backgroundImage = `url("${src}")`;
   } else {
-    style.WebkitMaskImage = `url(${src})`;
+    style.WebkitMaskImage = `url("${src}")`;
-    style.maskImage = `url(${src})`;
+    style.maskImage = `url("${src}")`;
   }
 
-  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
+  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
 }
 
 RawIcon.defaultProps = {

src/app/molecules/image-pack/ImagePackUpload.jsx

@@ -27,9 +27,7 @@ function ImagePackUpload({ onUpload }) {
 
     setProgress(true);
     const image = await scaleDownImage(imgFile, 512, 512);
-    const url = await mx.uploadContent(image, {
+    const { content_uri: url } = await mx.uploadContent(image);
-      onlyContentUri: true,
-    });
 
     onUpload(shortcode, url);
     setProgress(false);

src/app/molecules/image-upload/ImageUpload.jsx

@@ -22,7 +22,7 @@ function ImageUpload({
     const file = e.target.files.item(0);
     if (file === null) return;
     try {
-      const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
+      const uPromise = initMatrix.matrixClient.uploadContent(file);
       setUploadPromise(uPromise);
 
       const res = await uPromise;
@@ -74,7 +74,7 @@ function ImageUpload({
           <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
         </button>
       )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
     </div>
   );
 }

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -13,6 +13,7 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import AsyncSearch from '../../../util/AsyncSearch';
 import { addRecentEmoji, getRecentEmojis } from './recent';
+import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -46,45 +47,49 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
         const emoji = groupEmojis[emojiIndex];
         emojiRow.push(
           <span key={emojiIndex}>
-            {
+            {emoji.hexcode ? (
-              emoji.hexcode
+              // This is a unicode emoji, and should be rendered with twemoji
-                // This is a unicode emoji, and should be rendered with twemoji
+              parse(
-                ? parse(twemoji.parse(
+                twemoji.parse(emoji.unicode, {
-                  emoji.unicode,
+                  attributes: () => ({
-                  {
+                    unicode: emoji.unicode,
-                    attributes: () => ({
+                    shortcodes: emoji.shortcodes?.toString(),
-                      unicode: emoji.unicode,
+                    hexcode: emoji.hexcode,
-                      shortcodes: emoji.shortcodes?.toString(),
+                    loading: 'lazy',
-                      hexcode: emoji.hexcode,
+                  }),
-                      loading: 'lazy',
+                  base: TWEMOJI_BASE_URL,
-                    }),
+                })
-                  },
+              )
-                ))
+            ) : (
-                // This is a custom emoji, and should be render as an mxc
+              // This is a custom emoji, and should be render as an mxc
-                : (
+              <img
-                  <img
+                className="emoji"
-                    className="emoji"
+                draggable="false"
-                    draggable="false"
+                loading="lazy"
-                    loading="lazy"
+                alt={emoji.shortcode}
-                    alt={emoji.shortcode}
+                unicode={`:${emoji.shortcode}:`}
-                    unicode={`:${emoji.shortcode}:`}
+                shortcodes={emoji.shortcode}
-                    shortcodes={emoji.shortcode}
+                src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
-                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                data-mx-emoticon={emoji.mxc}
-                    data-mx-emoticon={emoji.mxc}
+              />
-                  />
+            )}
-                )
+          </span>
-            }
-          </span>,
         );
       }
-      emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>);
+      emojiBoard.push(
+        <div key={r} className="emoji-row">
+          {emojiRow}
+        </div>
+      );
     }
     return emojiBoard;
   }
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">
+        {name}
+      </Text>
       {groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>}
     </div>
   );
@@ -92,17 +97,16 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
 
 EmojiGroup.propTypes = {
   name: PropTypes.string.isRequired,
-  groupEmojis: PropTypes.arrayOf(PropTypes.shape({
+  groupEmojis: PropTypes.arrayOf(
-    length: PropTypes.number,
+    PropTypes.shape({
-    unicode: PropTypes.string,
+      length: PropTypes.number,
-    hexcode: PropTypes.string,
+      unicode: PropTypes.string,
-    mxc: PropTypes.string,
+      hexcode: PropTypes.string,
-    shortcode: PropTypes.string,
+      mxc: PropTypes.string,
-    shortcodes: PropTypes.oneOfType([
+      shortcode: PropTypes.string,
-      PropTypes.string,
+      shortcodes: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-      PropTypes.arrayOf(PropTypes.string),
+    })
-    ]),
+  ).isRequired,
-  })).isRequired,
 };
 
 const asyncSearch = new AsyncSearch();
@@ -128,7 +132,13 @@ function SearchedEmoji() {
 
   if (searchedEmojis === null) return false;
 
-  return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />;
+  return (
+    <EmojiGroup
+      key="-1"
+      name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'}
+      groupEmojis={searchedEmojis.emojis}
+    />
+  );
 }
 
 function EmojiBoard({ onSelect, searchRef }) {
@@ -146,7 +156,10 @@ function EmojiBoard({ onSelect, searchRef }) {
     if (typeof shortcodes === 'undefined') shortcodes = undefined;
     else shortcodes = shortcodes.split(',');
     return {
-      unicode, hexcode, shortcodes, mxc,
+      unicode,
+      hexcode,
+      shortcodes,
+      mxc,
     };
   }
 
@@ -211,10 +224,9 @@ function EmojiBoard({ onSelect, searchRef }) {
       const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
       const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
       if (room) {
-        const packs = getRelevantPacks(
+        const packs = getRelevantPacks(room.client, [room, ...parentRooms]).filter(
-          room.client,
+          (pack) => pack.getEmojis().length !== 0
-          [room, ...parentRooms],
+        );
-        ).filter((pack) => pack.getEmojis().length !== 0);
 
         // Set an index for each pack so that we know where to jump when the user uses the nav
         for (let i = 0; i < packs.length; i += 1) {
@@ -263,44 +275,41 @@ function EmojiBoard({ onSelect, searchRef }) {
             />
           )}
           <div className="emoji-board__nav-custom">
-            {
+            {availableEmojis.map((pack) => {
-              availableEmojis.map((pack) => {
+              const src = initMatrix.matrixClient.mxcUrlToHttp(
-                const src = initMatrix.matrixClient
+                pack.avatarUrl ?? pack.getEmojis()[0].mxc
-                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
+              );
-                return (
+              return (
-                  <IconButton
+                <IconButton
-                    onClick={() => openGroup(recentOffset + pack.packIndex)}
+                  onClick={() => openGroup(recentOffset + pack.packIndex)}
-                    src={src}
+                  src={src}
-                    key={pack.packIndex}
+                  key={pack.packIndex}
-                    tooltip={pack.displayName ?? 'Unknown'}
+                  tooltip={pack.displayName ?? 'Unknown'}
-                    tooltipPlacement="left"
+                  tooltipPlacement="left"
-                    isImage
+                  isImage
-                  />
+                />
-                );
+              );
-              })
+            })}
-            }
           </div>
           <div className="emoji-board__nav-twemoji">
-            {
+            {[
-              [
+              [0, EmojiIC, 'Smilies'],
-                [0, EmojiIC, 'Smilies'],
+              [1, DogIC, 'Animals'],
-                [1, DogIC, 'Animals'],
+              [2, CupIC, 'Food'],
-                [2, CupIC, 'Food'],
+              [3, BallIC, 'Activities'],
-                [3, BallIC, 'Activities'],
+              [4, PhotoIC, 'Travel'],
-                [4, PhotoIC, 'Travel'],
+              [5, BulbIC, 'Objects'],
-                [5, BulbIC, 'Objects'],
+              [6, PeaceIC, 'Symbols'],
-                [6, PeaceIC, 'Symbols'],
+              [7, FlagIC, 'Flags'],
-                [7, FlagIC, 'Flags'],
+            ].map(([indx, ico, name]) => (
-              ].map(([indx, ico, name]) => (
+              <IconButton
-                <IconButton
+                onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
-                  onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
+                key={indx}
-                  key={indx}
+                src={ico}
-                  src={ico}
+                tooltip={name}
-                  tooltip={name}
+                tooltipPlacement="left"
-                  tooltipPlacement="left"
+              />
-                />
+            ))}
-              ))
-            }
           </div>
         </div>
       </ScrollView>
@@ -313,27 +322,25 @@ function EmojiBoard({ onSelect, searchRef }) {
           <ScrollView ref={scrollEmojisRef} autoHide>
             <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
               <SearchedEmoji />
-              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
+              {recentEmojis.length > 0 && (
-              {
+                <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />
-                availableEmojis.map((pack) => (
+              )}
-                  <EmojiGroup
+              {availableEmojis.map((pack) => (
-                    name={pack.displayName ?? 'Unknown'}
+                <EmojiGroup
-                    key={pack.packIndex}
+                  name={pack.displayName ?? 'Unknown'}
-                    groupEmojis={pack.getEmojis()}
+                  key={pack.packIndex}
-                    className="custom-emoji-group"
+                  groupEmojis={pack.getEmojis()}
-                  />
+                  className="custom-emoji-group"
-                ))
+                />
-              }
+              ))}
-              {
+              {emojiGroups.map((group) => (
-                emojiGroups.map((group) => (
+                <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
-                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+              ))}
-                ))
-              }
             </div>
           </ScrollView>
         </div>
         <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{ parse(twemoji.parse('🙂')) }</div>
+          <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
           <Text>:slight_smile:</Text>
         </div>
       </div>

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -5,7 +5,7 @@ import './RoomViewCmdBar.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
@@ -31,7 +31,7 @@ CmdItem.propTypes = {
 
 function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   function renderCmdSuggestions(cmdPrefix, cmds) {
-    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
+    const cmdOptString = typeof option === 'string' ? `/${option}` : '/?';
     return cmds.map((cmd) => (
       <CmdItem
         key={cmd}
@@ -53,15 +53,15 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
 
     // Renders a small Twemoji
     function renderTwemoji(emoji) {
-      return parse(twemoji.parse(
+      return parse(
-        emoji.unicode,
+        twemoji.parse(emoji.unicode, {
-        {
           attributes: () => ({
             unicode: emoji.unicode,
             shortcodes: emoji.shortcodes?.toString(),
           }),
-        },
+          base: TWEMOJI_BASE_URL,
-      ));
+        })
+      );
     }
 
     // Render a custom emoji
@@ -87,10 +87,12 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     return emos.map((emoji) => (
       <CmdItem
         key={emoji.shortcode}
-        onClick={() => fireCmd({
+        onClick={() =>
-          prefix: emPrefix,
+          fireCmd({
-          result: emoji,
+            prefix: emPrefix,
-        })}
+            result: emoji,
+          })
+        }
       >
         <Text variant="b1">{renderEmoji(emoji)}</Text>
         <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
@@ -187,10 +189,13 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
         });
       },
       '@': () => {
-        const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({
+        const members = mx
-          name: member.name,
+          .getRoom(roomId)
-          userId: member.userId.slice(1),
+          .getJoinedMembers()
-        }));
+          .map((member) => ({
+            name: member.name,
+            userId: member.userId.slice(1),
+          }));
         asyncSearch.setup(members, { keys: ['name', 'userId'], limit: 20 });
         const endIndex = members.length > 20 ? 20 : members.length;
         setCmd({ prefix, suggestions: members.slice(0, endIndex) });
@@ -277,9 +282,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
       </div>
       <div className="cmd-bar__content">
         <ScrollView horizontal vertical={false} invisible>
-          <div className="cmd-bar__content-suggestions">
+          <div className="cmd-bar__content-suggestions">{renderSuggestions(cmd, fireCmd)}</div>
-            { renderSuggestions(cmd, fireCmd) }
-          </div>
         </ScrollView>
       </div>
     </div>

src/client/action/room.js

@@ -236,16 +236,12 @@ async function createRoom(opts) {
     });
   }
   if (parentId && joinRule === 'restricted') {
-    try {
+    const caps = await mx.getCapabilities();
-      const caps = await mx.getCapabilities();
+    if (caps['m.room_versions'].available?.['9'] !== 'stable') {
-      options.room_version = caps
+      throw new Error("ERROR: The server doesn't support restricted rooms");
-        ?.['m.room_versions']
+    }
-        ?.['org.matrix.msc3244.room_capabilities']
+    if (Number(caps['m.room_versions'].default) < 9) {
-        ?.restricted
+      options.room_version = '9';
-        ?.preferred
-        || undefined;
-    } catch {
-      console.error('Can\'t find room version for restricted.');
     }
     options.initial_state.push({
       type: 'm.room.join_rules',

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: () => {

src/client/state/RoomsInput.js

@@ -395,7 +395,7 @@ class RoomsInput extends EventEmitter {
     input.attachment.uploadingPromise = uploadingPromise;
     this.roomIdToInput.set(roomId, input);
 
-    const url = await uploadingPromise;
+    const { content_uri: url } = await uploadingPromise;
 
     delete input.attachment.uploadingPromise;
     this.roomIdToInput.set(roomId, input);

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.2.2',
+  version: '2.2.3',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
@@ -12,7 +12,13 @@ const cons = {
     HOME: 'home',
     DIRECTS: 'dm',
   },
-  supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'],
+  supportEventTypes: [
+    'm.room.create',
+    'm.room.message',
+    'm.room.encrypted',
+    'm.room.member',
+    'm.sticker',
+  ],
   notifs: {
     DEFAULT: 'default',
     ALL_MESSAGES: 'all_messages',

src/index.jsx

@@ -9,7 +9,4 @@ import App from './app/pages/App';
 
 settings.applyTheme();
 
-ReactDom.render(
+ReactDom.render(<App />, document.getElementById('root'));
-  <App />,
-  document.getElementById('root'),
-);

src/util/twemojify.jsx

@@ -6,6 +6,8 @@ import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { sanitizeText } from './sanitize';
 
+export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
+
 const Math = lazy(() => import('../app/atoms/math/Math'));
 
 const mathOptions = {
@@ -38,11 +40,16 @@ const mathOptions = {
 export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
   if (typeof text !== 'string') return text;
   let content = text;
+  const options = opts ?? { base: TWEMOJI_BASE_URL };
+  if (!options.base) {
+    options.base = TWEMOJI_BASE_URL;
+  }
 
   if (sanitize) {
     content = sanitizeText(content);
   }
-  content = twemoji.parse(content, opts);
+
+  content = twemoji.parse(content, options);
   if (linkify) {
     content = linkifyHtml(content, {
       target: '_blank',

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"]
+}

vite.config.js

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { wasm } from '@rollup/plugin-wasm';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { svgLoader } from './viteSvgLoader';
+
+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),
+    svgLoader(),
+    wasm(),
+    react(),
+  ],
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    copyPublicDir: false,
+  },
+});

viteSvgLoader.ts

@@ -0,0 +1,16 @@
+import svgToMiniDataURI from 'mini-svg-data-uri';
+import type { Plugin } from 'rollup';
+import fs from 'fs';
+
+// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
+export const svgLoader = (): Plugin => ({
+  name: 'vite-svg-patch-plugin',
+  transform: (code, id) => {
+    if (id.endsWith('.svg')) {
+      const extractedSvg = fs.readFileSync(id, 'utf8');
+      const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
+      return `export default "${datauri}"`;
+    }
+    return code;
+  },
+});

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'],
-    }),
-  ],
-};

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',
-        ],
-      },
-    ],
-  },
-});

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',
-    }),
-  ],
-});