⚡️ (async component) define as much async components as possible

src/components/FluxNote.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
+<script lang="ts" setup>
-import HeaderNote from '@/components/HeaderNote.vue'
 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({
+const props = withDefaults(
-  name: 'FluxNote',
+  defineProps<{
-  components: {
+    user: string
-    HeaderNote,
+    repo: string
-    StackedNote
+    content?: string | null
-  },
+    parseContent?: boolean
-  props: {
+    withContent?: boolean
-    user: { type: String, required: true },
+    withHeader?: boolean
-    repo: { type: String, required: true },
+  }>(),
-    content: { type: String, required: false, default: null },
+  {
-    parseContent: { type: Boolean, required: false, default: true },
+    content: null,
-    withContent: { type: Boolean, required: false, default: true },
+    parseContent: true,
-    withHeader: { type: Boolean, required: false, default: true }
+    withContent: true,
-  },
+    withHeader: 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 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 renderedContent = computed(() =>
+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 hasContent = computed(() => !!renderedContent.value)
-    const isLoading = computed(() => renderedContent.value === undefined)
+const isLoading = computed(() => renderedContent.value === undefined)
 
-    watch(
+watch(
   renderedContent,
   async () => {
     await nextTick()
     listenToClick()
   },
   { immediate: true }
-    )
+)
 
-    watch(
+watch(
   [refProps.user, refProps.repo],
   () => {
     store.setUserRepo(props.user, props.repo)
   },
   { immediate: true }
-    )
+)
 
-    onMounted(() => visitRepo())
+onMounted(() => visitRepo())
 
-    onUnmounted(() => {
+onUnmounted(() => {
   store.resetFiles()
   resetStackedNotes()
-    })
-
-    return {
-      hasContent,
-      isLoading,
-      renderedContent,
-      stackedNotes,
-      resetStackedNotes,
-      userSettings: computed(() => store.userSettings),
-      focus: () => scrollToFocusedNote(undefined, true),
-      titles
-    }
-  }
 })
+
+const focus = () => scrollToFocusedNote(undefined, true)
 </script>
 
 <template>

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