From 0cbbfd72733cbfbd876005a4182acc2abf535456 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 18 Jul 2023 00:13:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20(async=20component)=20defi?=
 =?UTF-8?q?ne=20as=20much=20async=20components=20as=20possible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FluxNote.vue    | 141 ++++++++++++++++-----------------
 src/components/StackedNote.vue |   7 +-
 2 files changed, 72 insertions(+), 76 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index a49386b..9edd194 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -1,5 +1,4 @@
-<script lang="ts">
-import HeaderNote from '@/components/HeaderNote.vue'
+<script lang="ts" setup>
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
@@ -11,7 +10,6 @@ import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 import {
   computed,
   defineAsyncComponent,
-  defineComponent,
   nextTick,
   onMounted,
   onUnmounted,
@@ -19,83 +17,78 @@ import {
   watch
 } from 'vue'
 
+const HeaderNote = defineAsyncComponent(
+  () => import('@/components/HeaderNote.vue')
+)
+
 const StackedNote = defineAsyncComponent(
   () => import('@/components/StackedNote.vue')
 )
 
-export default defineComponent({
-  name: 'FluxNote',
-  components: {
-    HeaderNote,
-    StackedNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true },
-    content: { type: String, required: false, default: null },
-    parseContent: { type: Boolean, required: false, default: true },
-    withContent: { type: Boolean, required: false, default: true },
-    withHeader: { type: Boolean, required: false, default: true }
-  },
-  setup(props) {
-    const refProps = toRefs(props)
-    const store = useUserRepoStore()
-    useUserSettings()
-    const { visitRepo } = useVisitRepo({ user: props.user, repo: props.repo })
-    const { toHTML } = useMarkdown(props.repo)
-    const { listenToClick } = useLinks('note-display')
-    const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
-    const { scrollToFocusedNote } = useQueryStackedNotes()
-
-    const { titles } = useNote('note-container')
-
-    const renderedContent = computed(() =>
-      props.content !== null
-        ? props.parseContent
-          ? toHTML(props.content)
-          : props.content
-        : store.readme
-    )
-
-    const hasContent = computed(() => !!renderedContent.value)
-    const isLoading = computed(() => renderedContent.value === undefined)
-
-    watch(
-      renderedContent,
-      async () => {
-        await nextTick()
-        listenToClick()
-      },
-      { immediate: true }
-    )
-
-    watch(
-      [refProps.user, refProps.repo],
-      () => {
-        store.setUserRepo(props.user, props.repo)
-      },
-      { immediate: true }
-    )
-
-    onMounted(() => visitRepo())
-
-    onUnmounted(() => {
-      store.resetFiles()
-      resetStackedNotes()
-    })
-
-    return {
-      hasContent,
-      isLoading,
-      renderedContent,
-      stackedNotes,
-      resetStackedNotes,
-      userSettings: computed(() => store.userSettings),
-      focus: () => scrollToFocusedNote(undefined, true),
-      titles
-    }
+const props = withDefaults(
+  defineProps<{
+    user: string
+    repo: string
+    content?: string | null
+    parseContent?: boolean
+    withContent?: boolean
+    withHeader?: boolean
+  }>(),
+  {
+    content: null,
+    parseContent: true,
+    withContent: true,
+    withHeader: true
   }
+)
+
+const refProps = toRefs(props)
+const store = useUserRepoStore()
+useUserSettings()
+const { visitRepo } = useVisitRepo({ user: props.user, repo: props.repo })
+const { toHTML } = useMarkdown(props.repo)
+const { listenToClick } = useLinks('note-display')
+const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
+const { scrollToFocusedNote } = useQueryStackedNotes()
+
+const { titles } = useNote('note-container')
+
+const renderedContent = computed(() =>
+  props.content !== null
+    ? props.parseContent
+      ? toHTML(props.content)
+      : props.content
+    : store.readme
+)
+
+const hasContent = computed(() => !!renderedContent.value)
+const isLoading = computed(() => renderedContent.value === undefined)
+
+watch(
+  renderedContent,
+  async () => {
+    await nextTick()
+    listenToClick()
+  },
+  { immediate: true }
+)
+
+watch(
+  [refProps.user, refProps.repo],
+  () => {
+    store.setUserRepo(props.user, props.repo)
+  },
+  { immediate: true }
+)
+
+onMounted(() => visitRepo())
+
+onUnmounted(() => {
+  store.resetFiles()
+  resetStackedNotes()
 })
+
+const focus = () => scrollToFocusedNote(undefined, true)
 </script>
 
 <template>
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index add686d..92beb7b 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import LinkedNotes from '@/components/LinkedNotes.vue'
 import { useFile } from '@/hooks/useFile.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
@@ -9,7 +8,11 @@ import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { generateTweets } from '@/utils/twitter'
-import { computed, nextTick, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, watch } from 'vue'
+
+const LinkedNotes = defineAsyncComponent(
+  () => import('@/components/LinkedNotes.vue')
+)
 
 const props = defineProps<{
   user: string