Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor/Image.ts

@@ -1,10 +1,9 @@
 import { UPLOAD_MEDIA } from "@/graphql/upload";
-import apolloProvider from "@/vue-apollo";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
+import { apolloClient } from "@/vue-apollo";
 import { Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import Image from "@tiptap/extension-image";
-import { NormalizedCacheObject } from "@apollo/client/cache";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
 
 /* eslint-disable class-methods-use-this */
 
@@ -60,21 +59,25 @@ const CustomImage = Image.extend({
                 top: realEvent.clientY,
               });
               if (!coordinates) return false;
-              const client =
-                apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
 
-              try {
-                images.forEach(async (image) => {
-                  const { data } = await client.mutate({
-                    mutation: UPLOAD_MEDIA,
-                    variables: {
-                      file: image,
-                      name: image.name,
-                    },
-                  });
+              images.forEach((image) => {
+                const { onDone, onError } = provideApolloClient(apolloClient)(
+                  () =>
+                    useMutation<{ uploadMedia: { url: string; id: string } }>(
+                      UPLOAD_MEDIA,
+                      () => ({
+                        variables: {
+                          file: image,
+                          name: image.name,
+                        },
+                      })
+                    )
+                );
+
+                onDone(({ data }) => {
                   const node = schema.nodes.image.create({
-                    src: data.uploadMedia.url,
-                    "data-media-id": data.uploadMedia.id,
+                    src: data?.uploadMedia.url,
+                    "data-media-id": data?.uploadMedia.id,
                   });
                   const transaction = view.state.tr.insert(
                     coordinates.pos,
@@ -82,11 +85,13 @@ const CustomImage = Image.extend({
                   );
                   view.dispatch(transaction);
                 });
-                return true;
-              } catch (error) {
-                console.error(error);
-                return false;
-              }
+
+                onError((error) => {
+                  console.error(error);
+                  return false;
+                });
+              });
+              return true;
             },
           },
         },

js/src/components/Editor/Mention.ts

@@ -1,27 +1,38 @@
 import { SEARCH_PERSONS } from "@/graphql/search";
-import { VueRenderer } from "@tiptap/vue-2";
+import { VueRenderer } from "@tiptap/vue-3";
 import tippy from "tippy.js";
 import MentionList from "./MentionList.vue";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
-import apolloProvider from "@/vue-apollo";
+import { apolloClient } from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
-import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
 import { MentionOptions } from "@tiptap/extension-mention";
 import { Editor } from "@tiptap/core";
+import { provideApolloClient, useQuery } from "@vue/apollo-composable";
+import { Paginate } from "@/types/paginate";
+import { onError } from "@apollo/client/link/error";
 
-const client =
-  apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+const fetchItems = (query: string): Promise<IPerson[]> => {
+  return new Promise((resolve, reject) => {
+    const { onResult } = provideApolloClient(apolloClient)(() => {
+      return useQuery<{ searchPersons: Paginate<IPerson> }>(
+        SEARCH_PERSONS,
+        () => ({
+          variables: {
+            searchText: query,
+          },
+        })
+      );
+    });
 
-const fetchItems = async (query: string): Promise<IPerson[]> => {
-  const result = await client.query({
-    query: SEARCH_PERSONS,
-    variables: {
-      searchText: query,
-    },
+    onResult(({ data }) => {
+      resolve(data.searchPersons.elements);
+    });
+
+    onError(reject);
   });
-  // TipTap doesn't handle async for onFilter, hence the following line.
-  return result.data.searchPersons.elements;
+
+  // // TipTap doesn't handle async for onFilter, hence the following line.
+  // return result.data.searchPersons.elements;
 };
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
@@ -53,7 +64,6 @@ const mentionOptions: MentionOptions = {
       return {
         onStart: (props: any) => {
           component = new VueRenderer(MentionList, {
-            parent: this,
             propsData: props,
           });
 

js/src/components/Editor/MentionList.vue

@@ -12,70 +12,64 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
+<script lang="ts" setup>
+import { usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
 import ActorInline from "../../components/Account/ActorInline.vue";
+import { ref, watch } from "vue";
 
-@Component({
-  components: {
-    ActorInline,
-  },
-})
-export default class MentionList extends Vue {
-  @Prop({ type: Array, required: true }) items!: Array<IPerson>;
-  @Prop({ type: Function, required: true }) command!: any;
+const props = defineProps<{
+  items: IPerson[];
+  command: ({ id }: { id: string }) => {};
+}>();
 
-  selectedIndex = 0;
+// @Prop({ type: Function, required: true }) command!: any;
 
-  displayName = displayName;
+const selectedIndex = ref(0);
 
-  @Watch("items")
-  watchItems(): void {
-    this.selectedIndex = 0;
+watch(props.items, () => {
+  selectedIndex.value = 0;
+});
+
+const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
+  if (event.key === "ArrowUp") {
+    upHandler();
+    return true;
   }
 
-  onKeyDown({ event }: { event: KeyboardEvent }): boolean {
-    if (event.key === "ArrowUp") {
-      this.upHandler();
-      return true;
-    }
-
-    if (event.key === "ArrowDown") {
-      this.downHandler();
-      return true;
-    }
-
-    if (event.key === "Enter") {
-      this.enterHandler();
-      return true;
-    }
-
-    return false;
+  if (event.key === "ArrowDown") {
+    downHandler();
+    return true;
   }
 
-  upHandler(): void {
-    this.selectedIndex =
-      (this.selectedIndex + this.items.length - 1) % this.items.length;
+  if (event.key === "Enter") {
+    enterHandler();
+    return true;
   }
 
-  downHandler(): void {
-    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
-  }
+  return false;
+};
 
-  enterHandler(): void {
-    this.selectItem(this.selectedIndex);
-  }
+const upHandler = (): void => {
+  selectedIndex.value =
+    (selectedIndex.value + props.items.length - 1) % props.items.length;
+};
 
-  selectItem(index: number): void {
-    const item = this.items[index];
+const downHandler = (): void => {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+};
 
-    if (item) {
-      this.command({ id: usernameWithDomain(item) });
-    }
+const enterHandler = (): void => {
+  selectItem(selectedIndex.value);
+};
+
+const selectItem = (index: number): void => {
+  const item = props.items[index];
+
+  if (item) {
+    props.command({ id: usernameWithDomain(item) });
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>