Merge pull request #332 from antoine92190/vite

Web component migration

Author: antoine92190

.eslintrc.js

@@ -1,9 +1,10 @@
 module.exports = {
 	root: true,
 	env: {
-		node: true
+		es2021: true
 	},
-	extends: ['standard', 'plugin:vue/recommended', '@vue/typescript'],
+	extends: ['standard', 'plugin:vue/vue3-recommended', '@vue/typescript'],
+	ignorePatterns: ['src/utils/lamejs/*.js'],
 	rules: {
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -23,6 +24,8 @@ module.exports = {
 		'vue/html-indent': 'off',
 		'space-before-function-paren': 'off',
 		'vue/max-attributes-per-line': 'off',
+		'vue/singleline-html-element-content-newline': 'off',
+		'vue/no-v-html': 'off',
 		'vue/html-self-closing': [
 			'error',
 			{

.github/workflows/build.yml

@@ -29,4 +29,3 @@ jobs:
         with:
           node-version: '16.x'
       - run: npm install
-      - run: npm test

README.md

@@ -1,9 +1,9 @@
 module.exports = {
 	root: true,
 	env: {
-		node: true
+		es2021: true
 	},
-	extends: ['standard', 'plugin:vue/recommended'],
+	extends: ['standard', 'plugin:vue/vue3-recommended'],
 	rules: {
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -22,6 +22,8 @@ module.exports = {
 		'vue/html-indent': 'off',
 		'space-before-function-paren': 'off',
 		'vue/max-attributes-per-line': 'off',
+		'vue/singleline-html-element-content-newline': 'off',
+		'vue/no-deprecated-slot-attribute': 'off',
 		'vue/html-self-closing': [
 			'error',
 			{
@@ -32,8 +34,5 @@ module.exports = {
 				}
 			}
 		]
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
 	}
 }

babel.config.js

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
     <title>vue-advanced-chat</title>
     <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
   </head>
@@ -13,6 +13,6 @@
       <strong>We're sorry but vue-advanced-chat doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

demo/.eslintrc.js

@@ -1,34 +1,35 @@
 {
 	"name": "demo",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"license": "MIT",
 	"description": "A beautiful chat rooms component made with Vue.js",
 	"author": "Antoine Dupont <antoindupontdev@gmail.com>",
 	"scripts": {
-		"serve": "vue-cli-service serve",
-		"s": "npm run serve",
-		"build": "vue-cli-service build",
-		"lint": "vue-cli-service lint",
+		"dev": "vite",
+		"build": "vite build",
+		"serve": "vite preview",
+		"s": "npm run dev",
+		"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
 		"reset": "rm -rf node_modules && rm -rf package-lock.json && npm i",
 		"reset-all": "npm run reset && cd .. && npm run reset",
 		"gpages": "sh deploy.sh",
 		"latest": "npm i https://github.com/antoine92190/vue-advanced-chat/tarball/master"
 	},
 	"dependencies": {
-		"firebase": "^9.4.0",
-		"vue": "^2.6.14",
-		"vue-advanced-chat": "latest"
+		"firebase": "9.4.0",
+		"vue": "3.2.37",
+		"vue-advanced-chat": "https://github.com/antoine92190/vue-advanced-chat/tarball/vite"
 	},
 	"devDependencies": {
-		"@vue/cli-plugin-babel": "^4.5.13",
-		"@vue/cli-plugin-eslint": "^4.5.13",
-		"@vue/cli-service": "^4.5.13",
-		"@vue/eslint-config-standard": "^4.0.0",
-		"babel-eslint": "^10.0.3",
-		"eslint": "^6.8.0",
-		"eslint-plugin-vue": "^7.14.0",
-		"node-sass": "^6.0.1",
-		"sass-loader": "^10.1.1",
-		"vue-template-compiler": "^2.6.14"
+		"@babel/core": "7.12.16",
+		"@vitejs/plugin-vue": "1.10.2",
+		"@vue/compiler-sfc": "3.2.22",
+		"@vue/eslint-config-standard": "4.0.0",
+		"babel-eslint": "10.0.3",
+		"eslint": "7.32.0",
+		"eslint-plugin-vue": "8.0.3",
+		"node-sass": "6.0.1",
+		"vite": "2.9.14",
+		"vue-loader": "16.8.3"
 	}
 }

demo/babel.config.js

@@ -5,75 +5,72 @@
 			<button type="submit" :disabled="disableForm || !addRoomUsername">
 				Create Room
 			</button>
-			<button class="button-cancel" @click="addNewRoom = false">
-				Cancel
-			</button>
+			<button class="button-cancel" @click="addNewRoom = false">Cancel</button>
 		</form>
 
 		<form v-if="inviteRoomId" @submit.prevent="addRoomUser">
 			<input v-model="invitedUsername" type="text" placeholder="Add username" />
 			<button type="submit" :disabled="disableForm || !invitedUsername">
 				Add User
 			</button>
-			<button class="button-cancel" @click="inviteRoomId = null">
-				Cancel
-			</button>
+			<button class="button-cancel" @click="inviteRoomId = null">Cancel</button>
 		</form>
 
 		<form v-if="removeRoomId" @submit.prevent="deleteRoomUser">
 			<select v-model="removeUserId">
-				<option default value="">
-					Select User
-				</option>
+				<option default value="">Select User</option>
 				<option v-for="user in removeUsers" :key="user._id" :value="user._id">
 					{{ user.username }}
 				</option>
 			</select>
 			<button type="submit" :disabled="disableForm || !removeUserId">
 				Remove User
 			</button>
-			<button class="button-cancel" @click="removeRoomId = null">
-				Cancel
-			</button>
+			<button class="button-cancel" @click="removeRoomId = null">Cancel</button>
 		</form>
 
-		<chat-window
+		<vue-advanced-chat
+			ref="chatWindow"
 			:height="screenHeight"
 			:theme="theme"
-			:styles="styles"
+			:styles="JSON.stringify(styles)"
 			:current-user-id="currentUserId"
 			:room-id="roomId"
-			:rooms="loadedRooms"
+			:rooms="JSON.stringify(loadedRooms)"
 			:loading-rooms="loadingRooms"
-			:messages="messages"
-			:messages-loaded="messagesLoaded"
 			:rooms-loaded="roomsLoaded"
-			:room-actions="roomActions"
-			:menu-actions="menuActions"
-			:message-selection-actions="messageSelectionActions"
+			:messages="JSON.stringify(messages)"
+			:messages-loaded="messagesLoaded"
 			:room-message="roomMessage"
-			:templates-text="templatesText"
+			:room-actions="JSON.stringify(roomActions)"
+			:menu-actions="JSON.stringify(menuActions)"
+			:message-selection-actions="JSON.stringify(messageSelectionActions)"
+			:templates-text="JSON.stringify(templatesText)"
 			@fetch-more-rooms="fetchMoreRooms"
-			@fetch-messages="fetchMessages"
-			@send-message="sendMessage"
-			@edit-message="editMessage"
-			@delete-message="deleteMessage"
-			@open-file="openFile"
-			@open-user-tag="openUserTag"
-			@add-room="addRoom"
-			@room-action-handler="menuActionHandler"
-			@menu-action-handler="menuActionHandler"
-			@message-selection-action-handler="messageSelectionActionHandler"
-			@send-message-reaction="sendMessageReaction"
-			@typing-message="typingMessage"
-			@toggle-rooms-list="$emit('show-demo-options', $event.opened)"
+			@fetch-messages="fetchMessages($event.detail[0])"
+			@send-message="sendMessage($event.detail[0])"
+			@edit-message="editMessage($event.detail[0])"
+			@delete-message="deleteMessage($event.detail[0])"
+			@open-file="openFile($event.detail[0])"
+			@open-user-tag="openUserTag($event.detail[0])"
+			@add-room="addRoom($event.detail[0])"
+			@room-action-handler="menuActionHandler($event.detail[0])"
+			@menu-action-handler="menuActionHandler($event.detail[0])"
+			@message-selection-action-handler="
+				messageSelectionActionHandler($event.detail[0])
+			"
+			@send-message-reaction="sendMessageReaction($event.detail[0])"
+			@typing-message="typingMessage($event.detail[0])"
+			@toggle-rooms-list="$emit('show-demo-options', $event.detail[0].opened)"
 		>
-			<!-- <template #emoji-picker="{ emojiOpened, addEmoji }">
-				<button @click="addEmoji({ unicode: '😁' })">
-					{{ emojiOpened }}
-				</button>
-			</template> -->
-		</chat-window>
+			<!-- <div
+				v-for="message in messages"
+				:slot="'message_' + message._id"
+				:key="message._id"
+			>
+				New message container
+			</div> -->
+		</vue-advanced-chat>
 	</div>
 </template>
 
@@ -82,18 +79,14 @@ import * as firestoreService from '@/database/firestore'
 import * as firebaseService from '@/database/firebase'
 import * as storageService from '@/database/storage'
 import { parseTimestamp, formatTimestamp } from '@/utils/dates'
+import logoAvatar from '@/assets/logo.png'
 
-import ChatWindow from './../../src/lib/ChatWindow'
-// import ChatWindow, { Rooms } from 'vue-advanced-chat'
-// import ChatWindow from 'vue-advanced-chat'
-// import 'vue-advanced-chat/dist/vue-advanced-chat.css'
-// import ChatWindow from './../../dist/vue-advanced-chat.umd.min.js'
+import { register } from 'vue-advanced-chat'
+// import { register } from './../../dist/vue-advanced-chat.es.js'
+// import { register } from './../../src/lib/index.js'
+register()
 
 export default {
-	components: {
-		ChatWindow
-	},
-
 	props: {
 		currentUserId: { type: String, required: true },
 		theme: { type: String, required: true },
@@ -143,6 +136,7 @@ export default {
 				{ name: 'deleteRoom', title: 'Delete Room' }
 			],
 			messageSelectionActions: [{ name: 'deleteMessages', title: 'Delete' }],
+			// eslint-disable-next-line vue/no-unused-properties
 			styles: { container: { borderRadius: '4px' } },
 			templatesText: [
 				{
@@ -172,11 +166,21 @@ export default {
 	},
 
 	mounted() {
+		this.addCss()
+
 		this.fetchRooms()
 		firebaseService.updateUserOnlineStatus(this.currentUserId)
 	},
 
 	methods: {
+		async addCss() {
+			if (import.meta.env.MODE === 'development') {
+				const styles = await import('./../../src/styles/index.scss')
+				const style = document.createElement('style')
+				style.innerHTML = styles.default
+				this.$refs.chatWindow.shadowRoot.appendChild(style)
+			}
+		},
 		resetRooms() {
 			this.loadingRooms = true
 			this.loadingLastMessageByRoom = 0
@@ -268,7 +272,7 @@ export default {
 				const roomAvatar =
 					roomContacts.length === 1 && roomContacts[0].avatar
 						? roomContacts[0].avatar
-						: require('@/assets/logo.png')
+						: logoAvatar
 
 				formattedRooms.push({
 					...room,
@@ -342,6 +346,7 @@ export default {
 			return {
 				...message,
 				...{
+					_id: message.id,
 					content,
 					senderId: message.sender_id,
 					timestamp: formatTimestamp(
@@ -354,7 +359,11 @@ export default {
 					new:
 						message.sender_id !== this.currentUserId &&
 						(!message.seen || !message.seen[this.currentUserId]),
-					lastMessage: { ...message.lastMessage, senderId: message.sender_id }
+					lastMessage: {
+						...message.lastMessage,
+						_id: message.id,
+						senderId: message.sender_id
+					}
 				}
 			}
 		},
@@ -364,7 +373,6 @@ export default {
 
 			if (options.reset) {
 				this.resetMessages()
-				this.roomId = room.roomId
 			}
 
 			if (this.previousLastLoadedMessage && !this.lastLoadedMessage) {
@@ -381,7 +389,9 @@ export default {
 					if (this.selectedRoom !== room.roomId) return
 
 					if (data.length === 0 || data.length < this.messagesPerPage) {
-						setTimeout(() => (this.messagesLoaded = true), 0)
+						setTimeout(() => {
+							this.messagesLoaded = true
+						}, 0)
 					}
 
 					if (options.reset) this.messages = []