refactor: reorganize modules

This commit is contained in:
Anthony Fu 2022-12-13 15:03:30 +01:00
parent fd29c379dc
commit 0ef44cdf50
11 changed files with 130 additions and 116 deletions

View file

@ -3,7 +3,7 @@ import type { CreateStatusParams, StatusVisibility } from 'masto'
import { fileOpen } from 'browser-fs-access' import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core' import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
import type { Draft } from '~/composables/statusDrafts' import type { Draft } from '~/types'
const { const {
draftKey, draftKey,

View file

@ -1,47 +1,6 @@
import type { Emoji } from 'masto' import type { Emoji } from 'masto'
import type { Node } from 'ultrahtml' import type { Node } from 'ultrahtml'
import { TEXT_NODE, parse, render, walkSync } 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') const decoder = document.createElement('textarea')
function decode(text: string) { function decode(text: string) {
@ -103,58 +62,6 @@ export async function convertMastodonHTML(html: string, customEmojis: Record<str
return await render(tree) 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) { export function htmlToText(html: string) {
const tree = parse(html) const tree = parse(html)
return (tree.children as Node[]).map(n => treeToText(n)).join('').trim() return (tree.children as Node[]).map(n => treeToText(n)).join('').trim()

View file

@ -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
}

View file

@ -1,5 +1,5 @@
import type { Attachment, StatusEdit } from 'masto' 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' import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
export const mediaPreviewList = ref<Attachment[]>([]) export const mediaPreviewList = ref<Attachment[]>([])

View file

@ -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 { STORAGE_KEY_DRAFTS } from '~/constants'
import type { Mutable } from '~/types/utils' import type { Draft, DraftMap } from '~/types'
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>
export const currentUserDrafts = useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({})) export const currentUserDrafts = useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({}))

View file

@ -147,7 +147,11 @@ export const useNotifications = () => {
watch(currentUser, disconnect) watch(currentUser, disconnect)
connect() 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() { export function checkLogin() {
@ -188,7 +192,8 @@ export function clearUserLocalStorage(account?: Account) {
return return
const id = `${account.acct}@${currentUser.value?.server}` 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]) if (storage.value[id])
delete storage.value[id] delete storage.value[id]
}) })

View file

@ -10,6 +10,7 @@
"dev:mocked": "nuxi dev --port 5314 --dotenv .env.mock", "dev:mocked": "nuxi dev --port 5314 --dotenv .env.mock",
"start": "PORT=5314 node .output/server/index.mjs", "start": "PORT=5314 node .output/server/index.mjs",
"lint": "eslint .", "lint": "eslint .",
"typecheck": "nuxi typecheck",
"prepare": "esno scripts/prepare.ts", "prepare": "esno scripts/prepare.ts",
"generate": "nuxi generate", "generate": "nuxi generate",
"test:unit": "vitest", "test:unit": "vitest",

View file

@ -6,7 +6,7 @@ import type { Emoji } from 'masto'
import { describe, expect, it, vi } from 'vitest' import { describe, expect, it, vi } from 'vitest'
import { renderToString } from 'vue/server-renderer' import { renderToString } from 'vue/server-renderer'
import { format } from 'prettier' import { format } from 'prettier'
import { contentToVNode } from '~/composables/content' import { contentToVNode } from '~/composables/content-render'
describe('content-rich', () => { describe('content-rich', () => {
it('empty', async () => { it('empty', async () => {
@ -85,7 +85,11 @@ vi.mock('vue-router', () => {
} }
}) })
vi.mock('../components/content/ContentCode.vue', () => { vi.mock('~/composables/dialog.ts', () => {
return {}
})
vi.mock('~/components/content/ContentCode.vue', () => {
return { return {
default: defineComponent({ default: defineComponent({
props: { props: {
@ -95,7 +99,6 @@ vi.mock('../components/content/ContentCode.vue', () => {
}, },
lang: { lang: {
type: String, type: String,
required: true,
}, },
}, },
setup(props) { setup(props) {
@ -106,9 +109,10 @@ vi.mock('../components/content/ContentCode.vue', () => {
} }
}) })
vi.mock('../components/account/AccountHoverWrapper.vue', () => { vi.mock('~/components/account/AccountHoverWrapper.vue', () => {
return { return {
default: defineComponent({ default: defineComponent({
props: ['handle', 'class'],
setup(_, { slots }) { setup(_, { slots }) {
return () => slots?.default?.() return () => slots?.default?.()
}, },

View file

@ -5,7 +5,7 @@ import type { Emoji } from 'masto'
import { describe, expect, it } from 'vitest' import { describe, expect, it } from 'vitest'
import { format } from 'prettier' import { format } from 'prettier'
import { render as renderTree } from 'ultrahtml' import { render as renderTree } from 'ultrahtml'
import { parseMastodonHTML, treeToText } from '~/composables/content' import { parseMastodonHTML, treeToText } from '~/composables/content-parse'
describe('html-parse', () => { describe('html-parse', () => {
it('empty', async () => { it('empty', async () => {

View file

@ -2,7 +2,7 @@
* @vitest-environment jsdom * @vitest-environment jsdom
*/ */
import { describe, expect, it } from 'vitest' import { describe, expect, it } from 'vitest'
import { htmlToText } from '../composables/content' import { htmlToText } from '~/composables/content-parse'
describe('html-to-text', () => { describe('html-to-text', () => {
it('inline code', () => { it('inline code', () => {

View file

@ -1,4 +1,5 @@
import type { Account, AccountCredentials, Emoji, Instance, Notification, Status } from 'masto' import type { Account, AccountCredentials, Attachment, CreateStatusParams, Emoji, Instance, Notification, Status } from 'masto'
import type { Mutable } from './utils'
export interface AppInfo { export interface AppInfo {
id: string id: string
@ -46,3 +47,13 @@ export interface GroupedLikeNotifications {
export type NotificationSlot = GroupedNotifications | GroupedLikeNotifications | Notification export type NotificationSlot = GroupedNotifications | GroupedLikeNotifications | Notification
export type TranslateFn = ReturnType<typeof useI18n>['t'] export type TranslateFn = ReturnType<typeof useI18n>['t']
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>