Refactor remaining client components to SFC Setup + Composition API

norm commented

2022-09-08 08:05:48 +00:00

Owner

This is a tracking issue for any remaining uses of the old Options API or non-setup Composition API in the client codebase.

The following is a list of files that still use either the Options API or the non-setup version of the Composition API using the command find packages/client/src -name '*.vue' | xargs grep '<script' | grep -v 'setup' | cut -d ':' -f 1:

packages/client/src/components/date-separated-list.vue ⚹
packages/client/src/components/form/radios.vue ⚹
packages/client/src/components/form/radio.vue (#129)
packages/client/src/components/gallery-post-preview.vue (#154)
packages/client/src/components/marquee.vue (#187)
packages/client/src/components/number-diff.vue (ebc4daa6c2)
packages/client/src/components/ripple.vue (#181)
packages/client/src/components/sparkle.vue (#138)
packages/client/src/components/tab.vue (#184)
packages/client/src/components/ui/folder.vue (#155)
packages/client/src/components/ui/info.vue (#131)
packages/client/src/components/ui/super-menu.vue (#186)
packages/client/src/components/ui/container.vue (#164)
packages/client/src/components/token-generate-window.vue (#139)
packages/client/src/ui/_common_/sidebar-for-mobile.vue (#137)

Some files listed by that command have been removed as those do have both a setup and a non-setup script section.

Files marked with ⚹ have a custom render function so it is harder (or impossible?) to refactor them to the new style.

This is a tracking issue for any remaining uses of the old Options API or non-setup Composition API in the client codebase. The following is a list of files that still use either the Options API or the non-`setup` version of the Composition API using the command `find packages/client/src -name '*.vue' | xargs grep '<script' | grep -v 'setup' | cut -d ':' -f 1`: - [ ] `packages/client/src/components/date-separated-list.vue` ⚹ - [ ] `packages/client/src/components/form/radios.vue` ⚹ - [x] `packages/client/src/components/form/radio.vue` (#129) - [x] `packages/client/src/components/gallery-post-preview.vue` (#154) - [x] `packages/client/src/components/marquee.vue` (#187) - [x] `packages/client/src/components/number-diff.vue` (ebc4daa6c2d73986fbdb9ac57fd576c4d094832d) - [x] `packages/client/src/components/ripple.vue` (#181) - [x] `packages/client/src/components/sparkle.vue` (#138) - [x] `packages/client/src/components/tab.vue` (#184) - [x] `packages/client/src/components/ui/folder.vue` (#155) - [x] `packages/client/src/components/ui/info.vue` (#131) - [x] `packages/client/src/components/ui/super-menu.vue` (#186) - [x] `packages/client/src/components/ui/container.vue` (#164) - [x] `packages/client/src/components/token-generate-window.vue` (#139) - [x] `packages/client/src/ui/_common_/sidebar-for-mobile.vue` (#137) Some files listed by that command have been removed as those do have both a `setup` and a non-`setup` script section. Files marked with ⚹ have a custom `render` function so it is harder (or impossible?) to refactor them to the new style.

norm added this to the (deleted) project 2022-09-08 08:05:48 +00:00

norm added a new dependency 2022-09-08 08:06:33 +00:00

#129 client: refactor radio.vue to composition api

norm referenced this issue

2022-09-08 08:10:58 +00:00

client: refactor info.vue to composition api #131

norm added a new dependency 2022-09-08 08:11:08 +00:00

#131 client: refactor info.vue to composition api

norm added a new dependency 2022-09-10 04:28:19 +00:00

#137 client: refactor sidebar-for-mobile.vue to composition api

norm added a new dependency 2022-09-10 04:43:25 +00:00

#138 client: refactor sparkle.vue to composition api

norm added a new dependency 2022-09-10 07:25:25 +00:00

#139 refactor: token-generate-window.vue to composition api

Johann150 commented

2022-09-10 18:03:15 +00:00

Owner

I've just had a look at packages/client/src/components/form/radios.vue and since it uses a custom render function and the parameters are passed in as <option> tags and other shenanigans, I'm not sure if or how to refactor it.

I thought maybe it would be possible to pass in an array of objects instead of the option tags, but the text in the options is not just plaintext, sometimes its HTML, e.g. 8d5966c0bc/packages/client/src/pages/settings/general.vue (L65-L71)

I've just had a look at `packages/client/src/components/form/radios.vue` and since it uses a custom render function and the parameters are passed in as `<option>` tags and other shenanigans, I'm not sure if or how to refactor it. I thought maybe it would be possible to pass in an array of objects instead of the option tags, but the text in the options is not just plaintext, sometimes its HTML, e.g. https://akkoma.dev/FoundKeyGang/FoundKey/src/commit/8d5966c0bc718e1a9d73ab3b4ca4721ad0b88739/packages/client/src/pages/settings/general.vue#L65-L71

norm commented

2022-09-10 18:12:42 +00:00

Author

Owner

Yeah I haven't really touched any of the components that use a custom render function since I don't really know how to proceed with those.

norm added a new dependency 2022-09-15 03:52:42 +00:00

#154 client: Refactor gallery-post-preview.vue to composition API

norm added a new dependency 2022-09-15 03:52:45 +00:00

#155 client: refactor folder.vue to composition api

norm added a new dependency 2022-09-22 16:54:56 +00:00

#164 client: refactor container.vue to composition api

Johann150 commented

2022-10-02 11:16:12 +00:00

Owner

So now all remaining components have custom render functions. The marquee one it might be possible to refactor to use <template> and subsequently <script setup>, but the other ones I'm not sure if it is possible to refactor to <script setup> at all.

So now all remaining components have custom render functions. The marquee one it might be possible to refactor to use `<template>` and subsequently `<script setup>`, but the other ones I'm not sure if it is possible to refactor to `<script setup>` at all.

Johann150 added a new dependency 2022-10-04 18:00:27 +00:00

#184 client: refactor components/tab.vue to composition API

Johann150 added a new dependency 2022-10-07 11:34:46 +00:00

#186 client: refactor super-menu component to composition API

Johann150 added a new dependency 2022-10-07 11:34:56 +00:00

#187 client: refactor marquee component to composition API

Johann150 added the

upkeep

label 2022-12-23 10:24:15 +00:00

Johann150 removed this from the (deleted) project 2022-12-23 10:24:22 +00:00

Refactor remaining client components to SFC Setup + Composition API #130