zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: no reactivity transform (#2600)

Browse source
This commit is contained in:
patak 2024-02-21 16:20:08 +01:00 • committed by GitHub
parent b9394c2fa5
commit ccfa7a8d10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
102 changed files with 649 additions and 652 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/publish/PublishAttachment.vue
View file

@ -19,10 +19,10 @@ const emit = defineEmits<{
const maxDescriptionLength = 1500
const isEditDialogOpen = ref(false)
const description = ref(props.attachment.description ?? '')
const description = computed(() => props.attachment.description ?? '')
function toggleApply() {
isEditDialogOpen.value = false
emit('setDescription', unref(description))
emit('setDescription', description.value)
}
</script>

20
components/publish/PublishEmojiPicker.client.vue
View file

@ -9,16 +9,16 @@ const emit = defineEmits<{
const { locale } = useI18n()
const el = $ref<HTMLElement>()
let picker = $ref<Picker>()
const el = ref<HTMLElement>()
const picker = ref<Picker>()
const colorMode = useColorMode()
async function openEmojiPicker() {
await updateCustomEmojis()
if (picker) {
picker.update({
theme: colorMode.value,
if (picker.value) {
picker.value.update({
theme: colorMode,
custom: customEmojisData.value,
})
}
@ -29,7 +29,7 @@ async function openEmojiPicker() {
importEmojiLang(locale.value.split('-')[0]),
])
picker = new Picker({
picker.value = new Picker({
data: () => dataPromise,
onEmojiSelect({ native, src, alt, name }: any) {
native
@ -37,19 +37,19 @@ async function openEmojiPicker() {
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
},
set: 'twitter',
theme: colorMode.value,
theme: colorMode,
custom: customEmojisData.value,
i18n,
})
}
await nextTick()
// TODO: custom picker
el?.appendChild(picker as any as HTMLElement)
el.value?.appendChild(picker.value as any as HTMLElement)
}
function hideEmojiPicker() {
if (picker)
el?.removeChild(picker as any as HTMLElement)
if (picker.value)
el.value?.removeChild(picker.value as any as HTMLElement)
}
</script>

8
components/publish/PublishLanguagePicker.vue
View file

@ -6,16 +6,16 @@ const modelValue = defineModel<string>({ required: true })
const { t } = useI18n()
const userSettings = useUserSettings()
const languageKeyword = $ref('')
const languageKeyword = ref('')
const fuse = new Fuse(languagesNameList, {
keys: ['code', 'nativeName', 'name'],
shouldSort: true,
})
const languages = $computed(() =>
languageKeyword.trim()
? fuse.search(languageKeyword).map(r => r.item)
const languages = computed(() =>
languageKeyword.value.trim()
? fuse.search(languageKeyword.value).map(r => r.item)
: [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
.sort(({ code: a }, { code: b }) => {
// Put English on the top

2
components/publish/PublishVisibilityPicker.vue
View file

@ -7,7 +7,7 @@ const modelValue = defineModel<string>({
required: true,
})
const currentVisibility = $computed(() =>
const currentVisibility = computed(() =>
statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
)

56
components/publish/PublishWidget.vue
View file

@ -27,61 +27,61 @@ const emit = defineEmits<{
const { t } = useI18n()
const draftState = useDraft(draftKey, initial)
const { draft } = $(draftState)
const { draft } = draftState
const {
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
uploadAttachments, pickAttachments, setDescription, removeAttachment,
dropZoneRef,
} = $(useUploadMediaAttachment($$(draft)))
} = useUploadMediaAttachment(draft)
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
{
draftState,
...$$({ expanded, isUploading, initialDraft: initial }),
...{ expanded: toRef(() => expanded), isUploading, initialDraft: toRef(() => initial) },
},
))
)
const { editor } = useTiptap({
content: computed({
get: () => draft.params.status,
get: () => draft.value.params.status,
set: (newVal) => {
draft.params.status = newVal
draft.lastUpdated = Date.now()
draft.value.params.status = newVal
draft.value.lastUpdated = Date.now()
},
}),
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
autofocus: shouldExpanded,
placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
autofocus: shouldExpanded.value,
onSubmit: publish,
onFocus() {
if (!isExpanded && draft.initialText) {
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
draft.initialText = ''
if (!isExpanded && draft.value.initialText) {
editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
draft.value.initialText = ''
}
isExpanded = true
isExpanded.value = true
},
onPaste: handlePaste,
})
function trimPollOptions() {
const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0)
const trimmedOptions = draft.params.poll!.options.slice(0, indexLastNonEmpty + 1)
const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
if (currentInstance.value?.configuration
&& trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
draft.params.poll!.options = trimmedOptions
draft.value.params.poll!.options = trimmedOptions
else
draft.params.poll!.options = [...trimmedOptions, '']
draft.value.params.poll!.options = [...trimmedOptions, '']
}
function editPollOptionDraft(event: Event, index: number) {
draft.params.poll!.options = Object.assign(draft.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
trimPollOptions()
}
function deletePollOption(index: number) {
draft.params.poll!.options = draft.params.poll!.options.slice().splice(index, 1)
draft.value.params.poll!.options = draft.value.params.poll!.options.slice().splice(index, 1)
trimPollOptions()
}
@ -110,7 +110,7 @@ const expiresInOptions = computed(() => [
const expiresInDefaultOptionIndex = 2
const characterCount = $computed(() => {
const characterCount = computed(() => {
const text = htmlToText(editor.value?.getHTML() || '')
let length = stringLength(text)
@ -131,24 +131,24 @@ const characterCount = $computed(() => {
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
if (draft.mentions) {
if (draft.value.mentions) {
// + 1 is needed as mentions always need a space seperator at the end
length += draft.mentions.map((mention) => {
length += draft.value.mentions.map((mention) => {
const [handle] = mention.split('@')
return `@${handle}`
}).join(' ').length + 1
}
length += stringLength(publishSpoilerText)
length += stringLength(publishSpoilerText.value)
return length
})
const isExceedingCharacterLimit = $computed(() => {
return characterCount > characterLimit.value
const isExceedingCharacterLimit = computed(() => {
return characterCount.value > characterLimit.value
})
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
async function handlePaste(evt: ClipboardEvent) {
const files = evt.clipboardData?.files
@ -167,7 +167,7 @@ function insertCustomEmoji(image: any) {
}
async function toggleSensitive() {
draft.params.sensitive = !draft.params.sensitive
draft.value.params.sensitive = !draft.value.params.sensitive
}
async function publish() {

10
components/publish/PublishWidgetFull.client.vue
View file

@ -5,16 +5,16 @@ const route = useRoute()
const { formatNumber } = useHumanReadableNumber()
const timeAgoOptions = useTimeAgoOptions()
let draftKey = $ref('home')
const draftKey = ref('home')
const draftKeys = $computed(() => Object.keys(currentUserDrafts.value))
const nonEmptyDrafts = $computed(() => draftKeys
.filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i]))
const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
const nonEmptyDrafts = computed(() => draftKeys.value
.filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
.map(i => [i, currentUserDrafts.value[i]] as const),
)
watchEffect(() => {
draftKey = route.query.draft?.toString() || 'home'
draftKey.value = route.query.draft?.toString() || 'home'
})
onDeactivated(() => {