Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall. New linting.

2 files changed, 193 insertions, 96 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c65c27e2..82ca850d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -6,13 +6,13 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
 
-const buildMentionsString = ({user, attentions}, currentUser) => {
+const buildMentionsString = ({ user, attentions }, currentUser) => {
   let allAttentions = [...attentions]
 
   allAttentions.unshift(user)
 
   allAttentions = uniqBy(allAttentions, 'id')
-  allAttentions = reject(allAttentions, {id: currentUser.id})
+  allAttentions = reject(allAttentions, { id: currentUser.id })
 
   let mentions = map(allAttentions, (attention) => {
     return `@${attention.screen_name}`
@@ -48,17 +48,17 @@ const PostStatusForm = {
     let statusText = preset || ''
 
     const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
-          ? this.$store.state.instance.scopeCopy
-          : this.$store.state.config.scopeCopy
+      ? this.$store.state.instance.scopeCopy
+      : this.$store.state.config.scopeCopy
 
     if (this.replyTo) {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct')
-          ? this.copyMessageScope
-          : this.$store.state.users.currentUser.default_scope
+    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
+      ? this.copyMessageScope
+      : this.$store.state.users.currentUser.default_scope
 
     const contentType = typeof this.$store.state.config.postContentType === 'undefined'
       ? this.$store.state.instance.postContentType
@@ -88,13 +88,13 @@ const PostStatusForm = {
         const query = this.textAtCaret.slice(1).toUpperCase()
         const matchedUsers = filter(this.users, (user) => {
           return user.screen_name.toUpperCase().startsWith(query) ||
-            user.name && user.name.toUpperCase().startsWith(query)
+            (user.name && user.name.toUpperCase().startsWith(query))
         })
         if (matchedUsers.length <= 0) {
           return false
         }
         // eslint-disable-next-line camelcase
-        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
+        return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({
           // eslint-disable-next-line camelcase
           screen_name: `@${screen_name}`,
           name: name,
@@ -107,7 +107,8 @@ const PostStatusForm = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+        // eslint-disable-next-line camelcase
+        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
           screen_name: `:${shortcode}:`,
           name: '',
           utf: utf || '',
@@ -134,8 +135,8 @@ const PostStatusForm = {
     },
     showAllScopes () {
       const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
-            ? this.$store.state.instance.minimalScopesMode
-            : this.$store.state.config.minimalScopesMode
+        ? this.$store.state.instance.minimalScopesMode
+        : this.$store.state.config.minimalScopesMode
       return !minimalScopesMode
     },
     emoji () {
@@ -233,7 +234,7 @@ const PostStatusForm = {
     onKeydown (e) {
       e.stopPropagation()
     },
-    setCaret ({target: {selectionStart}}) {
+    setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
@@ -314,7 +315,7 @@ const PostStatusForm = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault()  // allow dropping text like before
+        e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
     },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 1ce2b647..b37ec5c7 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,107 +1,204 @@
 <template>
-<div class="post-status-form">
-  <form @submit.prevent="postStatus(newStatus)">
-    <div class="form-group" >
-      <i18n
-        v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
-        path="post_status.account_not_locked_warning"
-        tag="p"
-        class="visibility-notice">
-        <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
-      </i18n>
-      <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
-        <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
-        <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
-      </p>
-      <EmojiInput
-        v-if="newStatus.spoilerText || alwaysShowSubject"
-        type="text"
-        :placeholder="$t('post_status.content_warning')"
-        v-model="newStatus.spoilerText"
-        classname="form-control"
-      />
-      <textarea
-        ref="textarea"
-        @click="setCaret"
-        @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
-        @keydown="onKeydown"
-        @keydown.down="cycleForward"
-        @keydown.up="cycleBackward"
-        @keydown.shift.tab="cycleBackward"
-        @keydown.tab="cycleForward"
-        @keydown.enter="replaceCandidate"
-        @keydown.meta.enter="postStatus(newStatus)"
-        @keyup.ctrl.enter="postStatus(newStatus)"
-        @drop="fileDrop"
-        @dragover.prevent="fileDrag"
-        @input="resize"
-        @paste="paste"
-        :disabled="posting"
-      >
-      </textarea>
-      <div class="visibility-tray">
-        <span class="text-format" v-if="formattingOptionsEnabled">
-          <label for="post-content-type" class="select">
-            <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
-              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
-                {{$t(`post_status.content_type["${postFormat}"]`)}}
-              </option>
-            </select>
-            <i class="icon-down-open"></i>
-          </label>
-        </span>
+  <div class="post-status-form">
+    <form @submit.prevent="postStatus(newStatus)">
+      <div class="form-group">
+        <i18n
+          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
+          path="post_status.account_not_locked_warning"
+          tag="p"
+          class="visibility-notice"
+        >
+          <router-link :to="{ name: 'user-settings' }">
+            {{ $t('post_status.account_not_locked_warning_link') }}
+          </router-link>
+        </i18n>
+        <p
+          v-if="newStatus.visibility === 'direct'"
+          class="visibility-notice"
+        >
+          <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+          <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+        </p>
+        <EmojiInput
+          v-if="newStatus.spoilerText || alwaysShowSubject"
+          v-model="newStatus.spoilerText"
+          type="text"
+          :placeholder="$t('post_status.content_warning')"
+          classname="form-control"
+        />
+        <textarea
+          ref="textarea"
+          v-model="newStatus.status"
+          :placeholder="$t('post_status.default')"
+          rows="1"
+          class="form-control"
+          :disabled="posting"
+          @click="setCaret"
+          @keyup.exact="setCaret"
+          @keydown.exact="onKeydown"
+          @keydown.exact.down="cycleForward"
+          @keydown.exact.up="cycleBackward"
+          @keydown.exact.shift.tab="cycleBackward"
+          @keydown.exact.tab="cycleForward"
+          @keydown.exact.enter="replaceCandidate"
+          @keydown.exact.meta.enter="postStatus(newStatus)"
+          @keyup.exact.ctrl.enter="postStatus(newStatus)"
+          @drop="fileDrop"
+          @dragover.prevent="fileDrag"
+          @input="resize"
+          @paste="paste"
+        />
+        <div class="visibility-tray">
+          <span
+            v-if="formattingOptionsEnabled"
+            class="text-format"
+          >
+            <label
+              for="post-content-type"
+              class="select"
+            >
+              <select
+                id="post-content-type"
+                v-model="newStatus.contentType"
+                class="form-control"
+              >
+                <option
+                  v-for="postFormat in postFormats"
+                  :key="postFormat"
+                  :value="postFormat"
+                >
+                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </span>
 
-        <scope-selector
-          :showAll="showAllScopes"
-          :userDefault="userDefaultScope"
-          :originalScope="copyMessageScope"
-          :initialScope="newStatus.visibility"
-          :onScopeChange="changeVis"/>
+          <scope-selector
+            :show-all="showAllScopes"
+            :user-default="userDefaultScope"
+            :original-scope="copyMessageScope"
+            :initial-scope="newStatus.visibility"
+            :on-scope-change="changeVis"
+          />
+        </div>
       </div>
-    </div>
-    <div class="autocomplete-panel" v-if="candidates">
+      <div
+        v-if="candidates"
+        class="autocomplete-panel"
+      >
         <div class="autocomplete-panel-body">
           <div
             v-for="(candidate, index) in candidates"
             :key="index"
-            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
             class="autocomplete-item"
             :class="{ highlighted: candidate.highlighted }"
+            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
           >
-            <span v-if="candidate.img"><img :src="candidate.img" /></span>
-            <span v-else>{{candidate.utf}}</span>
-            <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
+            <span v-if="candidate.img"><img :src="candidate.img"></span>
+            <span v-else>{{ candidate.utf }}</span>
+            <span>{{ candidate.screen_name }}<small>{{ candidate.name }}</small></span>
           </div>
         </div>
       </div>
-      <div class='form-bottom'>
-        <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
+      <div class="form-bottom">
+        <media-upload
+          ref="mediaUpload"
+          :drop-files="dropFiles"
+          @uploading="disableSubmit"
+          @uploaded="addMediaFile"
+          @upload-failed="uploadFailed"
+        />
 
-        <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
-        <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
+        <p
+          v-if="isOverLengthLimit"
+          class="error"
+        >
+          {{ charactersLeft }}
+        </p>
+        <p
+          v-else-if="hasStatusLengthLimit"
+          class="faint"
+        >
+          {{ charactersLeft }}
+        </p>
 
-        <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
-        <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
-        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
+        <button
+          v-if="posting"
+          disabled
+          class="btn btn-default"
+        >
+          {{ $t('post_status.posting') }}
+        </button>
+        <button
+          v-else-if="isOverLengthLimit"
+          disabled
+          class="btn btn-default"
+        >
+          {{ $t('general.submit') }}
+        </button>
+        <button
+          v-else
+          :disabled="submitDisabled"
+          type="submit"
+          class="btn btn-default"
+        >
+          {{ $t('general.submit') }}
+        </button>
       </div>
-      <div class='alert error' v-if="error">
+      <div
+        v-if="error"
+        class="alert error"
+      >
         Error: {{ error }}
-        <i class="button-icon icon-cancel" @click="clearError"></i>
+        <i
+          class="button-icon icon-cancel"
+          @click="clearError"
+        />
       </div>
       <div class="attachments">
-        <div class="media-upload-wrapper" v-for="file in newStatus.files">
-          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
+        <div
+          v-for="file in newStatus.files"
+          :key="file.url"
+          class="media-upload-wrapper"
+        >
+          <i
+            class="fa button-icon icon-cancel"
+            @click="removeMediaFile(file)"
+          />
           <div class="media-upload-container attachment">
-            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
-            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
-            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
-            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
+            <img
+              v-if="type(file) === 'image'"
+              class="thumbnail media-upload"
+              :src="file.url"
+            >
+            <video
+              v-if="type(file) === 'video'"
+              :src="file.url"
+              controls
+            />
+            <audio
+              v-if="type(file) === 'audio'"
+              :src="file.url"
+              controls
+            />
+            <a
+              v-if="type(file) === 'unknown'"
+              :href="file.url"
+            >{{ file.url }}</a>
           </div>
         </div>
       </div>
-      <div class="upload_settings" v-if="newStatus.files.length > 0">
-        <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
-        <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
+      <div
+        v-if="newStatus.files.length > 0"
+        class="upload_settings"
+      >
+        <input
+          id="filesSensitive"
+          v-model="newStatus.nsfw"
+          type="checkbox"
+        >
+        <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
       </div>
     </form>
   </div>
@@ -214,7 +311,6 @@
     }
   }
 
-
   .btn {
     cursor: pointer;
   }