refactor: reorganize modules

composables/content-parse.ts

@@ -1,47 +1,6 @@
 import type { Emoji } from 'masto'
 import type { Node } from 'ultrahtml'
 import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
-import type { VNode } from 'vue'
-import { Fragment, h, isVNode } from 'vue'
-import { RouterLink } from 'vue-router'
-import ContentCode from '~/components/content/ContentCode.vue'
-import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
-
-function handleMention(el: Node) {
-  // Redirect mentions to the user page
-  if (el.name === 'a' && el.attributes.class?.includes('mention')) {
-    const href = el.attributes.href
-    if (href) {
-      const matchUser = href.match(UserLinkRE)
-      if (matchUser) {
-        const [, server, username] = matchUser
-        const handle = `@${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
-        el.attributes.href = `/${server}/@${username}`
-        return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
-      }
-      const matchTag = href.match(TagLinkRE)
-      if (matchTag) {
-        const [, , name] = matchTag
-        el.attributes.href = `/${currentServer.value}/tags/${name}`
-      }
-    }
-  }
-  return undefined
-}
-
-function handleCodeBlock(el: Node) {
-  if (el.name === 'pre' && el.children[0]?.name === 'code') {
-    const codeEl = el.children[0] as Node
-    const classes = codeEl.attributes.class as string
-    const lang = classes?.split(/\s/g).find(i => i.startsWith('language-'))?.replace('language-', '')
-    const code = codeEl.children[0] ? treeToText(codeEl.children[0]) : ''
-    return h(ContentCode, { lang, code: encodeURIComponent(code) })
-  }
-}
-
-function handleNode(el: Node) {
-  return handleCodeBlock(el) || handleMention(el) || el
-}
 
 const decoder = document.createElement('textarea')
 function decode(text: string) {
@@ -103,58 +62,6 @@ export async function convertMastodonHTML(html: string, customEmojis: Record<str
   return await render(tree)
 }
 
-/**
- * Raw HTML to VNodes
- */
-export function contentToVNode(
-  content: string,
-  customEmojis: Record<string, Emoji> = {},
-): VNode {
-  const tree = parseMastodonHTML(content, customEmojis)
-  return h(Fragment, (tree.children as Node[]).map(n => treeToVNode(n)))
-}
-
-function nodeToVNode(node: Node): VNode | string | null {
-  if (node.type === TEXT_NODE)
-    return node.value
-
-  if ('children' in node) {
-    if (node.name === 'a' && (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.'))) {
-      node.attributes.to = node.attributes.href
-      delete node.attributes.href
-      delete node.attributes.target
-      return h(
-        RouterLink as any,
-        node.attributes,
-        () => node.children.map(treeToVNode),
-      )
-    }
-    return h(
-      node.name,
-      node.attributes,
-      node.children.map(treeToVNode),
-    )
-  }
-  return null
-}
-
-function treeToVNode(
-  input: Node,
-): VNode | string | null {
-  if (input.type === TEXT_NODE)
-    return input.value as string
-
-  if ('children' in input) {
-    const node = handleNode(input)
-    if (node == null)
-      return null
-    if (isVNode(node))
-      return node
-    return nodeToVNode(node)
-  }
-  return null
-}
-
 export function htmlToText(html: string) {
   const tree = parse(html)
   return (tree.children as Node[]).map(n => treeToText(n)).join('').trim()

composables/content-render.ts

@@ -0,0 +1,96 @@
+import type { Emoji } from 'masto'
+import { TEXT_NODE } from 'ultrahtml'
+import type { Node } from 'ultrahtml'
+import { Fragment, h, isVNode } from 'vue'
+import type { VNode } from 'vue'
+import { RouterLink } from 'vue-router'
+import { parseMastodonHTML } from './content-parse'
+import ContentCode from '~/components/content/ContentCode.vue'
+import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
+
+/**
+* Raw HTML to VNodes
+*/
+export function contentToVNode(
+  content: string,
+  customEmojis: Record<string, Emoji> = {},
+): VNode {
+  const tree = parseMastodonHTML(content, customEmojis)
+  return h(Fragment, (tree.children as Node[]).map(n => treeToVNode(n)))
+}
+
+export function nodeToVNode(node: Node): VNode | string | null {
+  if (node.type === TEXT_NODE)
+    return node.value
+
+  if ('children' in node) {
+    if (node.name === 'a' && (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.'))) {
+      node.attributes.to = node.attributes.href
+      delete node.attributes.href
+      delete node.attributes.target
+      return h(
+        RouterLink as any,
+        node.attributes,
+        () => node.children.map(treeToVNode),
+      )
+    }
+    return h(
+      node.name,
+      node.attributes,
+      node.children.map(treeToVNode),
+    )
+  }
+  return null
+}
+function treeToVNode(
+  input: Node,
+): VNode | string | null {
+  if (input.type === TEXT_NODE)
+    return input.value as string
+
+  if ('children' in input) {
+    const node = handleNode(input)
+    if (node == null)
+      return null
+    if (isVNode(node))
+      return node
+    return nodeToVNode(node)
+  }
+  return null
+}
+
+function handleMention(el: Node) {
+  // Redirect mentions to the user page
+  if (el.name === 'a' && el.attributes.class?.includes('mention')) {
+    const href = el.attributes.href
+    if (href) {
+      const matchUser = href.match(UserLinkRE)
+      if (matchUser) {
+        const [, server, username] = matchUser
+        const handle = `@${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
+        el.attributes.href = `/${server}/@${username}`
+        return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
+      }
+      const matchTag = href.match(TagLinkRE)
+      if (matchTag) {
+        const [, , name] = matchTag
+        el.attributes.href = `/${currentServer.value}/tags/${name}`
+      }
+    }
+  }
+  return undefined
+}
+
+function handleCodeBlock(el: Node) {
+  if (el.name === 'pre' && el.children[0]?.name === 'code') {
+    const codeEl = el.children[0] as Node
+    const classes = codeEl.attributes.class as string
+    const lang = classes?.split(/\s/g).find(i => i.startsWith('language-'))?.replace('language-', '')
+    const code = codeEl.children[0] ? treeToText(codeEl.children[0]) : ''
+    return h(ContentCode, { lang, code: encodeURIComponent(code) })
+  }
+}
+
+function handleNode(el: Node) {
+  return handleCodeBlock(el) || handleMention(el) || el
+}

composables/dialog.ts

@@ -1,5 +1,5 @@
 import type { Attachment, StatusEdit } from 'masto'
-import type { Draft } from './statusDrafts'
+import type { Draft } from '~/types'
 import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
 export const mediaPreviewList = ref<Attachment[]>([])

composables/statusDrafts.ts

@@ -1,16 +1,6 @@
-import type { Account, Attachment, CreateStatusParams, Status } from 'masto'
+import type { Account, Status } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
-import type { Mutable } from '~/types/utils'
-
-export interface Draft {
-  editingStatus?: Status
-  initialText?: string
-  params: Omit<Mutable<CreateStatusParams>, 'status'> & {
-    status?: Exclude<CreateStatusParams['status'], null>
-  }
-  attachments: Attachment[]
-}
-export type DraftMap = Record<string, Draft>
+import type { Draft, DraftMap } from '~/types'
 
 export const currentUserDrafts = useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({}))
 

composables/users.ts

@@ -147,7 +147,11 @@ export const useNotifications = () => {
   watch(currentUser, disconnect)
   connect()
 
-  return { notifications: computed(() => id ? notifications[id]?.[1] ?? 0 : 0), disconnect, clearNotifications }
+  return {
+    notifications: computed(() => id ? notifications[id]?.[1] ?? 0 : 0),
+    disconnect,
+    clearNotifications,
+  }
 }
 
 export function checkLogin() {
@@ -188,7 +192,8 @@ export function clearUserLocalStorage(account?: Account) {
     return
 
   const id = `${account.acct}@${currentUser.value?.server}`
-  userLocalStorages.forEach((storage) => {
+  // @ts-expect-error bind value to the function
+  ;(useUserLocalStorage._ as Map<string, Ref<Record<string, any>>>).forEach((storage) => {
     if (storage.value[id])
       delete storage.value[id]
   })