refactor(mobx): move to new mobx 6 and update build process

fix(style): fix selection border build(dpes): update all dependencies
ph1p · Oct 19, 2020 · d00e677 · d00e677
1 parent 8ae6f28
commit d00e677
Show file tree

Hide file tree

Showing 11 changed files with 1,960 additions and 1,738 deletions.
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -32,6 +32,6 @@ jobs:
       uses: github/codeql-action/init@v1
       with:
         languages: ${{ matrix.language }}
-        
+
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v1
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,22 +22,32 @@
   },
   "license": "ISC",
   "devDependencies": {
-    "@types/react": "^16.9.44",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-html": "^0.2.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-url": "^5.0.1",
+    "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "@types/socket.io-client": "^1.4.33",
+    "@types/socket.io-client": "^1.4.34",
     "create-file-webpack": "^1.0.2",
-    "css-loader": "^4.2.0",
+    "css-loader": "^5.0.0",
     "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^3.2.0",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.0.0",
-    "ts-loader": "^8.0.2",
+    "html-webpack-plugin": "^4.5.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.28.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.0",
+    "ts-loader": "^8.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.9.7",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "typescript": "^4.0.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.1.0"
   },
   "figmaPlugin": {
     "name": "Figma Chat",
@@ -59,25 +69,28 @@
     ]
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.15.0",
-    "@popperjs/core": "^2.4.4",
+    "@figma/plugin-typings": "^1.17.1",
+    "@popperjs/core": "^2.5.3",
     "@types/react-transition-group": "^4.4.0",
+    "buffer": "^5.6.0",
+    "crypto-browserify": "^3.12.0",
     "linkifyjs": "^2.1.9",
-    "mobx": "^5.15.4",
-    "mobx-react": "^6.2.5",
-    "mobx-react-lite": "^2.0.7",
+    "mobx": "^6.0.1",
+    "mobx-react": "^7.0.0",
+    "mobx-react-lite": "^3.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-popper": "^2.2.3",
     "react-router-dom": "^5.2.0",
-    "react-timeago": "^4.4.0",
-    "react-tooltip": "^4.2.7",
+    "react-timeago": "^5.2.0",
+    "react-tooltip": "^4.2.10",
     "react-transition-group": "^4.4.1",
     "simple-encryptor": "^4.0.0",
-    "socket.io-client": "^2.3.0",
-    "styled-components": "^5.1.1",
-    "type-fest": "^0.16.0",
+    "socket.io-client": "^2.3.1",
+    "stream-browserify": "^3.0.0",
+    "styled-components": "^5.2.0",
+    "type-fest": "^0.18.0",
     "uniqid": "^5.2.0"
   }
 }
diff --git a/src/Ui.tsx b/src/Ui.tsx
@@ -1,5 +1,4 @@
 import { observer } from 'mobx-react';
-import 'mobx-react-lite/batchingForReactDom';
 import React, { useEffect, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import {
@@ -130,7 +129,7 @@ const init = () => {
     }
 
     function initSocketConnection(url: string) {
-      store.status = ConnectionEnum.NONE;
+      store.setStatus(ConnectionEnum.NONE);
 
       if (socket) {
         socket.removeAllListeners();
@@ -151,7 +150,7 @@ const init = () => {
         sendMainMessage('get-root-data');
 
         socket.on('connected', () => {
-          store.status = ConnectionEnum.CONNECTED;
+          store.setStatus(ConnectionEnum.CONNECTED);
 
           socket.emit('set user', store.settings);
           socket.emit('join room', {
@@ -163,11 +162,11 @@ const init = () => {
         });
 
         socket.on('connect_error', () => {
-          store.status = ConnectionEnum.ERROR;
+          store.setStatus(ConnectionEnum.ERROR);
         });
 
         socket.on('reconnect_error', () => {
-          store.status = ConnectionEnum.ERROR;
+          store.setStatus(ConnectionEnum.ERROR);
         });
 
         socket.on('chat message', (data) => {
@@ -184,7 +183,7 @@ const init = () => {
           store.addNotification(`${username} ${message}`);
         });
 
-        socket.on('online', (data) => (store.online = data));
+        socket.on('online', (data) => store.setOnline(data));
       }
 
       return () => {

diff --git a/src/code.ts b/src/code.ts
@@ -1,4 +1,3 @@
-import uniqid from 'uniqid';
 import { generateString } from './shared/utils';
 
 let isMinimized = false;
@@ -19,6 +18,7 @@ figma.root.setRelaunchData({
 });
 
 async function main() {
+  const timestamp = +new Date();
   // random user id for current user
   let instanceId = await figma.clientStorage.getAsync('id');
   // figma.root.setPluginData('history', '');
@@ -34,7 +34,7 @@ async function main() {
   }
 
   if (!instanceId) {
-    instanceId = 'user-' + uniqid() + '-' + generateString(15);
+    instanceId = 'user-' + timestamp + '-' + generateString(15);
     await figma.clientStorage.setAsync('id', instanceId);
   }
 
@@ -43,7 +43,7 @@ async function main() {
   }
 
   if (!roomName) {
-    const randomRoomName = uniqid() + '-' + generateString(15);
+    const randomRoomName = timestamp + '-' + generateString(15);
     figma.root.setPluginData('roomName', randomRoomName);
     roomName = randomRoomName;
   }

diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -153,6 +153,7 @@ const SelectionButton = styled.button`
   border-color: ${(p) =>
     p.isSelf ? p.theme.fontColor : 'rgba(255, 255, 255, 0.4)'};
   color: ${(p) => (p.isSelf ? p.theme.fontColor : '#fff')};
+  border-style: solid;
   border-radius: 9px;
   padding: 5px 10px;
   display: flex;

diff --git a/src/store/index.tsx b/src/store/index.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable, toJS } from 'mobx';
+import { makeAutoObservable, toJS } from 'mobx';
 import React, { createRef } from 'react';
 
 import { createEncryptor } from 'simple-encryptor';
@@ -9,39 +9,56 @@ import { sendMainMessage } from '../shared/utils';
 import MessageSound from '../assets/sound.mp3';
 
 class RootStore {
-  @computed
+  constructor() {
+    makeAutoObservable(this);
+  }
+
   get encryptor() {
     return createEncryptor(this.secret);
   }
 
-  @observable
   status = ConnectionEnum.NONE;
-  // ---
-  @observable
   secret = '';
-
-  @observable
   roomName = '';
-
-  @observable
   instanceId = '';
-  // ---
-  @observable
   online = [];
-  // ---
-  @observable
   messages = [];
-
-  @observable
   messagesRef = createRef<HTMLDivElement>();
+  autoScrollDisabled = false;
+  selection = undefined;
 
-  @observable
-  disableAutoScroll = false;
+  setStatus(status) {
+    this.status = status;
+  }
+  setSecret(secret) {
+    this.secret = secret;
+  }
+  setRoomName(roomName) {
+    this.roomName = roomName;
+  }
+  setInstanceId(instanceId) {
+    this.instanceId = instanceId;
+  }
+  setOnline(online) {
+    this.online = online;
+  }
+  setMessages(messages) {
+    this.messages = messages;
+  }
+  setMessagesRef(messagesRef) {
+    this.messagesRef = messagesRef;
+  }
+  setAutoScrollDisabled(autoScrollDisabled) {
+    this.autoScrollDisabled = autoScrollDisabled;
+  }
+  setSelection(selection) {
+    this.selection = selection;
+  }
 
-  @observable
-  selection = undefined;
+  disableAutoScroll(disable) {
+    this.autoScrollDisabled = disable;
+  }
 
-  @computed
   get selectionCount() {
     // fallback
     if (this.selection?.length) {
@@ -51,9 +68,8 @@ class RootStore {
     return this.selection?.nodes?.length || 0;
   }
 
-  @action
   scrollToBottom() {
-    if (!this.disableAutoScroll) {
+    if (!this.autoScrollDisabled) {
       const ref = toJS(this.messagesRef);
       // scroll to bottom
       if (ref?.current) {
@@ -63,13 +79,10 @@ class RootStore {
   }
 
   // ---
-  @observable
   isFocused = true;
 
-  @observable
   isMinimized = false;
 
-  @observable
   settings = {
     name: '',
     avatar: '',
@@ -80,10 +93,12 @@ class RootStore {
     isDarkTheme: false,
   };
 
-  @observable
   notifications = [];
 
-  @action
+  setDarkTheme(isDarkTheme) {
+    this.settings.isDarkTheme = isDarkTheme;
+  }
+
   addNotification(text: string, type?: string) {
     this.notifications.push({
       id: Math.random(),
@@ -92,13 +107,11 @@ class RootStore {
     });
   }
   // ---
-  @action
   toggleMinimizeChat() {
     this.isMinimized = !this.isMinimized;
     sendMainMessage('minimize', this.isMinimized);
   }
 
-  @action
   clearChatHistory(cb: () => void) {
     if (
       (window as any).confirm(
@@ -112,7 +125,6 @@ class RootStore {
     }
   }
 
-  @action
   persistSettings(settings, socket, isInit = false) {
     const oldUrl = this.settings.url;
     this.settings = {
@@ -136,7 +148,6 @@ class RootStore {
     }
   }
 
-  @action
   addMessage(messageData) {
     const isLocal = !messageData.user;
     const decryptedMessage = this.encryptor.decrypt(

diff --git a/src/ui.html b/src/ui.html