refactor: no reactivity transform (#2600)

components/common/CommonPaginator.vue

@@ -44,7 +44,7 @@ defineSlots<{
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()

components/common/CommonRouteTabs.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
+const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
+  options: CommonRouteTabOption[]
+  moreOptions?: CommonRouteTabMoreOption
+  command?: boolean
+  replace?: boolean
+  preventScrollTop?: boolean
+}>()
+
 const { t } = useI18n()
 
 export interface CommonRouteTabOption {
@@ -18,14 +26,6 @@ export interface CommonRouteTabMoreOption {
   tooltip?: string
   match?: boolean
 }
-const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
-  options: CommonRouteTabOption[]
-  moreOptions?: CommonRouteTabMoreOption
-  command?: boolean
-  replace?: boolean
-  preventScrollTop?: boolean
-}>()
-
 const router = useRouter()
 
 useCommands(() => command

components/common/CommonTabs.vue

@@ -10,7 +10,7 @@ const { options, command } = defineProps<{
 
 const modelValue = defineModel<string>({ required: true })
 
-const tabs = $computed(() => {
+const tabs = computed(() => {
   return options.map((option) => {
     if (typeof option === 'string')
       return { name: option, display: option }
@@ -24,7 +24,7 @@ function toValidName(otpion: string) {
 }
 
 useCommands(() => command
-  ? tabs.map(tab => ({
+  ? tabs.value.map(tab => ({
     scope: 'Tabs',
 
     name: tab.display,

components/common/CommonTrending.vue

@@ -4,15 +4,15 @@ import type { mastodon } from 'masto'
 const {
   history,
   maxDay = 2,
-} = $defineProps<{
+} = defineProps<{
   history: mastodon.v1.TagHistory[]
   maxDay?: number
 }>()
 
-const ongoingHot = $computed(() => history.slice(0, maxDay))
+const ongoingHot = computed(() => history.slice(0, maxDay))
 
-const people = $computed(() =>
-  ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
+const people = computed(() =>
+  ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
 )
 </script>
 

components/common/CommonTrendingCharts.vue

@@ -6,22 +6,22 @@ const {
   history,
   width = 60,
   height = 40,
-} = $defineProps<{
+} = defineProps<{
   history?: mastodon.v1.TagHistory[]
   width?: number
   height?: number
 }>()
 
-const historyNum = $computed(() => {
+const historyNum = computed(() => {
   if (!history)
     return [1, 1, 1, 1, 1, 1, 1]
   return [...history].reverse().map(item => Number(item.accounts) || 0)
 })
 
-const sparklineEl = $ref<SVGSVGElement>()
+const sparklineEl = ref<SVGSVGElement>()
 const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
 
-watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
+watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
   if (!sparklineEl)
     return
   sparklineFn(sparklineEl, historyNum)

components/common/LocalizedNumber.vue

@@ -10,9 +10,9 @@ const props = defineProps<{
 
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = $computed(() => forSR(props.count))
-const rawNumber = $computed(() => formatNumber(props.count))
-const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
+const useSR = computed(() => forSR(props.count))
+const rawNumber = computed(() => formatNumber(props.count))
+const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
 </script>
 
 <template>

components/common/dropdown/Dropdown.vue

@@ -6,11 +6,11 @@ defineProps<{
   autoBoundaryMaxSize?: boolean
 }>()
 
-const dropdown = $ref<any>()
+const dropdown = ref<any>()
 const colorMode = useColorMode()
 
 function hide() {
-  return dropdown.hide()
+  return dropdown.value.hide()
 }
 provide(InjectionKeyDropdownContext, {
   hide,