Merge branch 'vue3-again' into shigusegubu-vue3

* vue3-again:
  fix misc warnings
  properly implement resettableAsyncComponent
  fix opacity control again
  rename some binding hooks according to new names
  fix warnings
  fix some more warnings
  remove some warnings

src/boot/after_store.js

@@ -17,6 +17,7 @@ import FaviconService from '../services/favicon_service/favicon_service.js'
 
 // disable compat for certain features
 configureCompat({
+  ATTR_FALSE_VALUE: false,
   COMPONENT_V_MODEL: false,
   INSTANCE_SET: false,
   RENDER_FUNCTION: false

src/components/async_component_error/async_component_error.vue

@@ -19,6 +19,7 @@
 
 <script>
 export default {
+  emits: ['resetAsyncComponent'],
   methods: {
     retry () {
       this.$emit('resetAsyncComponent')

src/components/notification/notification.vue

@@ -112,7 +112,7 @@
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
               <small>
-                <i18n-t keypath="notifications.reacted_with">
+                <i18n-t scope="global" keypath="notifications.reacted_with">
                   <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
                 </i18n-t>
               </small>

src/components/opacity_input/opacity_input.vue

@@ -20,7 +20,7 @@
       :id="name"
       class="input-number"
       type="number"
-      :value="value || fallback"
+      :value="modelValue || fallback"
       :disabled="!present || disabled"
       max="1"
       min="0"

src/components/poll/poll.vue

@@ -71,7 +71,7 @@
           {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} · 
         </template>
       </div>
-      <i18n-t :keypath="expired ? 'polls.expired' : 'polls.expires_in'">
+      <i18n-t scope="global" :keypath="expired ? 'polls.expired' : 'polls.expires_in'">
         <Timeago
           :time="expiresAt"
           :auto-update="60"

src/components/settings_modal/helpers/integer_setting.js

@@ -8,7 +8,7 @@ export default {
     path: String,
     disabled: Boolean,
     min: Number,
-    expert: Number
+    expert: [Number, String]
   },
   computed: {
     pathDefault () {

src/components/settings_modal/settings_modal.js

@@ -56,8 +56,8 @@ const SettingsModal = {
     SettingsModalContent: getResettableAsyncComponent(
       () => import('./settings_modal_content.vue'),
       {
-        loading: PanelLoading,
+        loadingComponent: PanelLoading,
-        error: AsyncComponentError,
+        errorComponent: AsyncComponentError,
         delay: 0
       }
     )

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -951,14 +951,14 @@
             :fallback="currentShadowFallback"
           />
           <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n-t
+            <i18n-t scope="global"
               keypath="settings.style.shadows.filter_hint.always_drop_shadow"
               tag="p"
             >
               <code>filter: drop-shadow()</code>
             </i18n-t>
             <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n-t
+            <i18n-t scope="global"
               keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
               tag="p"
             >
@@ -966,7 +966,7 @@
               <code>spread-radius</code>
               <code>inset</code>
             </i18n-t>
-            <i18n-t
+            <i18n-t scope="global"
               keypath="settings.style.shadows.filter_hint.inset_classic"
               tag="p"
             >

src/components/shadow_control/shadow_control.vue

@@ -204,7 +204,7 @@
         v-model="selected.alpha"
         :disabled="!present"
       />
-      <i18n-t
+      <i18n-t scope="global"
         keypath="settings.style.shadows.hintV3"
         tag="p"
       >

src/components/status/status.js

@@ -69,7 +69,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+    return (Object.getOwnPropertyDescriptor(this, toggle) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})
@@ -311,7 +311,7 @@ const Status = {
       return this.mergedConfig.hideWordFilteredPosts
     },
     hideStatus () {
-      return (this.virtualHidden || !this.shouldNotMute) && (
+      return (!this.shouldNotMute) && (
         (this.muted && this.hideFilteredStatuses) ||
         (this.userIsMuted && this.hideMutedUsers) ||
         (this.status.thread_muted && this.hideMutedThreads) ||

src/components/status_content/status_content.js

@@ -31,7 +31,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+    return (Object.getOwnPropertyDescriptor(this, toggle) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})

src/components/thread_tree/thread_tree.vue

@@ -74,7 +74,7 @@
       v-if="currentReplies.length && !threadShowing"
       class="thread-tree-replies thread-tree-replies-hidden"
     >
-      <i18n-t
+      <i18n-t scope="global"
         v-if="simple"
         tag="button"
         keypath="status.thread_follow_with_icon"
@@ -92,7 +92,7 @@
           </span>
         </template>
       </i18n-t>
-      <i18n-t
+      <i18n-t scope="global"
         v-else
         tag="button"
         keypath="status.thread_show_full_with_icon"

src/components/timeline/timeline.js

@@ -43,8 +43,8 @@ const Timeline = {
     filteredVisibleStatuses () {
       return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' || (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
     },
-    filteredPinnedStatusesId () {
+    filteredPinnedStatusIds () {
-      return this.pinnedStatusIds.filter(statusId => this.timeline.statusesObject[statusId])
+      return (this.pinnedStatusIds || []).filter(statusId => this.timeline.statusesObject[statusId])
     },
     newStatusCount () {
       return this.timeline.newStatusCount

src/directives/body_scroll_lock.js

@@ -50,12 +50,12 @@ const enableBodyScroll = (el) => {
 }
 
 const directive = {
-  inserted: (el, binding) => {
+  mounted: (el, binding) => {
     if (binding.value) {
       disableBodyScroll(el)
     }
   },
-  componentUpdated: (el, binding) => {
+  updated: (el, binding) => {
     if (binding.oldValue === binding.value) {
       return
     }
@@ -66,7 +66,7 @@ const directive = {
       enableBodyScroll(el)
     }
   },
-  unbind: (el) => {
+  unmounted: (el) => {
     enableBodyScroll(el)
   }
 }

src/services/resettable_async_component.js

@@ -1,5 +1,4 @@
-// TODO investigate if even necessary since VUE3
+import { defineAsyncComponent, shallowReactive, h } from 'vue'
-import { reactive } from 'vue'
 
 /* By default async components don't have any way to recover, if component is
  * failed, it is failed forever. This helper tries to remedy that by recreating
@@ -9,23 +8,21 @@ import { reactive } from 'vue'
  * actual target component itself if needs to be.
  */
 function getResettableAsyncComponent (asyncComponent, options) {
-  const asyncComponentFactory = () => () => ({
+  const asyncComponentFactory = () => () => defineAsyncComponent({
-    component: asyncComponent(),
+    loader: asyncComponent,
     ...options
   })
 
-  const observe = reactive({ c: asyncComponentFactory() })
+  const observe = shallowReactive({ c: asyncComponentFactory() })
 
   return {
-    functional: true,
+    render () {
-    render (createElement, { data, children }) {
       //  emit event resetAsyncComponent to reloading
-      data.on = {}
+      return h(observe.c(), {
-      data.on.resetAsyncComponent = () => {
+        onResetAsyncComponent () {
-        observe.c = asyncComponentFactory()
+          observe.c = asyncComponentFactory()
-        // parent.$forceUpdate()
+        }
-      }
+      })
-      return createElement(observe.c, data, children)
     }
   }
 }