From a7e54577b5e94c77930e7dce02bb930643f3eb0d Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:50:31 +0000
Subject: [PATCH] fix(deps): uses defineSlots macro over useSlots (#3444)

Required for https://github.com/kumahq/kuma-gui/pull/3336

I got a bit more time to look at
https://github.com/kumahq/kuma-gui/pull/3336 and it looks like Vue folks
are moving more and more to macro-based `defineSlots` for defining
slots.

Moving everything to use defineSlots worked in most areas and I only had
to define the types also for areas where we actually need the type
information, otherwise defineSlots is a `Record<string, any>` (see
https://vuejs-language-tools.vercel.app/features/slots#how-to-handle-indeterminate-slot-types)

There 'may' be some other places where it would be advantageous to
define our slots as more than `Record<string, any>` but for the moment
this is enough to unblock the upgrade. We can add any more type
information if required in later PRs.

Also see https://vuejs.org/api/sfc-script-setup#defineslots

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 .../app-collection/AppCollection.vue          | 11 +++---
 .../components/app-view/AppView.vue           | 17 ++++++----
 .../components/data-source/DataLoader.vue     | 34 ++++++++++++++++---
 .../kuma-gui/src/app/common/ErrorBlock.vue    | 10 +++---
 .../src/app/common/ResourceStatus.vue         |  3 +-
 .../app/kuma/components/ApplicationShell.vue  |  8 +++--
 .../x/components/x-about-card/XAboutCard.vue  | 11 ++++--
 .../x-action-group/XActionGroup.vue           |  3 +-
 .../src/app/x/components/x-alert/XAlert.vue   |  8 ++---
 .../components/x-breadcrumbs/XBreadcrumbs.vue |  3 +-
 .../x/components/x-code-block/XCodeBlock.vue  |  5 +--
 .../components/x-empty-state/XEmptyState.vue  |  6 ++--
 .../src/app/x/components/x-i18n/XI18n.vue     |  4 +--
 .../src/app/x/components/x-modal/XModal.vue   |  3 +-
 .../src/app/x/components/x-select/XSelect.vue |  4 +--
 .../src/app/x/components/x-tabs/XTabs.vue     | 12 +++----
 16 files changed, 93 insertions(+), 49 deletions(-)

diff --git a/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue b/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
index ae418654a..1816c3ec9 100644
--- a/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
+++ b/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
@@ -29,13 +29,12 @@
     <template
       v-for="key in Object.keys(slots)"
       :key="key"
-      #[key]="{ row, rowValue }"
+      #[key]="{ row }"
     >
       <slot
         v-if="(props.items ?? []).length > 0"
         :name="key"
         :row="row as Row"
-        :row-value="rowValue"
       />
     </template>
   </KTable>
@@ -43,7 +42,7 @@
 
 <script lang="ts" setup generic="Row extends {}">
 import { KTable } from '@kong/kongponents'
-import { useSlots, ref, watch, Ref, inject } from 'vue'
+import { ref, watch, Ref, inject } from 'vue'
 
 import { runInDebug } from '../../'
 import type { TableHeader as KTableHeader, TablePreferences } from '@kong/kongponents'
@@ -85,7 +84,11 @@ const emit = defineEmits<{
   (e: 'resize', value: ResizeValue): void
 }>()
 
-const slots = useSlots()
+const slots = defineSlots<{
+  [key: string]: (props: {
+    row: Row
+  }) => any
+}>()
 
 const items = ref(props.items) as Ref<typeof props.items>
 const cacheKey = ref<number>(0)
diff --git a/packages/kuma-gui/src/app/application/components/app-view/AppView.vue b/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
index ae626d097..5b8ff8ae7 100644
--- a/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
+++ b/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
@@ -17,7 +17,7 @@
       }"
     >
       <header
-        v-if="$slots.title || $slots.actions"
+        v-if="slots.title || slots.actions"
         class="app-view-title-bar"
       >
         <KongIcon v-if="props.fullscreen" />
@@ -41,7 +41,7 @@
           class="actions"
         >
           <XTeleportSlot
-            v-if="$slots.title"
+            v-if="slots.title"
             name="app-view-docs"
           />
           <slot name="actions">
@@ -50,7 +50,9 @@
         </div>
       </header>
 
-      <aside v-if="$slots.notifications">
+      <aside
+        v-if="slots.notifications"
+      >
         <XAlert
           class="mb-4"
           variant="warning"
@@ -96,10 +98,6 @@ type AppView = {
 }
 type Breadcrumbs = Map<symbol, BreadcrumbItem[]>
 
-const routeView = inject<RouteView>(ROUTE_VIEW_PARENT)!
-
-const summary: string = inject('app-summary-view', '')
-provide('app-summary-view', '')
 
 const props = withDefaults(defineProps<{
   breadcrumbs?: BreadcrumbItem[] | null
@@ -110,7 +108,12 @@ const props = withDefaults(defineProps<{
   fullscreen: false,
   docs: '',
 })
+const slots = defineSlots()
 
+const routeView = inject<RouteView>(ROUTE_VIEW_PARENT)!
+
+const summary: string = inject('app-summary-view', '')
+provide('app-summary-view', '')
 const map: Breadcrumbs = new Map()
 const _breadcrumbs = ref<BreadcrumbItem[]>([])
 const symbol = Symbol('app-view')
diff --git a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
index c6d2ddc7e..b9b03e5c1 100644
--- a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
+++ b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
@@ -41,7 +41,7 @@
     >
       <slot
         name="error"
-        :data="srcData"
+        :data="srcData as TypeOf<T>"
         :error="allErrors[0]"
         :refresh="props.src !== '' ? refresh : () => {}"
       >
@@ -61,7 +61,7 @@
       <slot
         v-if="props.loader && typeof slots.loadable === 'undefined'"
         name="connecting"
-        :data="srcData"
+        :data="undefined"
         :error="srcError"
         :refresh="props.src !== '' ? refresh : () => {}"
       >
@@ -86,7 +86,7 @@
   typeOf(): any
 }" setup
 >
-import { computed, ref, useSlots, provide } from 'vue'
+import { computed, ref, provide } from 'vue'
 
 import type { TypeOf } from '@/app/application'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
@@ -103,12 +103,38 @@ const props = withDefaults(defineProps<{
   loader: true,
   variant: 'default',
 })
+const slots = defineSlots<{
+  default(props: {
+    data: NonNullable<TypeOf<T>>
+    error: Error | undefined
+    refresh: () => void
+  }): any
+  connecting(props: {
+    data: undefined
+    error: Error | undefined
+    refresh: () => void
+  }): any
+  error(props: {
+    data: NonNullable<TypeOf<T>>
+    error: Error | undefined
+    refresh: () => void
+  }): any
+  disconnected(props: {
+    data: NonNullable<TypeOf<T>>
+    error: Error | undefined
+    refresh: () => void
+  }): any
+  loadable(props: {
+    data: NonNullable<TypeOf<T>>
+    error: Error | undefined
+    refresh: () => void
+  }): any
+}>()
 
 provide('data-loader', {
   props,
 })
 
-const slots = useSlots()
 
 const srcData = ref<unknown>(undefined)
 const srcError = ref<Error | undefined>(undefined)
diff --git a/packages/kuma-gui/src/app/common/ErrorBlock.vue b/packages/kuma-gui/src/app/common/ErrorBlock.vue
index 0781d6ce2..2eb5131ff 100644
--- a/packages/kuma-gui/src/app/common/ErrorBlock.vue
+++ b/packages/kuma-gui/src/app/common/ErrorBlock.vue
@@ -54,7 +54,7 @@
       </div>
 
       <div class="error-block-message mt-4">
-        <slot v-if="$slots.default" />
+        <slot v-if="slots.default" />
         <template
           v-else-if="props.error instanceof ApiError"
         >
@@ -87,7 +87,7 @@
         <div
           class="error-block-message"
         >
-          <slot v-if="$slots.default" />
+          <slot v-if="slots.default" />
           <template
             v-else-if="props.error instanceof ApiError"
           >
@@ -123,8 +123,6 @@ import { inject } from 'vue'
 import { useI18n } from '@/app/application'
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
 
-const { t } = useI18n()
-const prompt = inject('x-prompt', undefined)
 
 const props = withDefaults(defineProps<{
   error: Error
@@ -132,6 +130,10 @@ const props = withDefaults(defineProps<{
 }>(), {
   appearance: 'warning',
 })
+const slots = defineSlots()
+
+const { t } = useI18n()
+const prompt = inject('x-prompt', undefined)
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/kuma-gui/src/app/common/ResourceStatus.vue b/packages/kuma-gui/src/app/common/ResourceStatus.vue
index fa94b2701..fcc079ba8 100644
--- a/packages/kuma-gui/src/app/common/ResourceStatus.vue
+++ b/packages/kuma-gui/src/app/common/ResourceStatus.vue
@@ -1,7 +1,7 @@
 <template>
   <DefinitionCard>
     <template
-      v-if="$slots.icon"
+      v-if="slots.icon"
       #icon
     >
       <slot name="icon" />
@@ -38,6 +38,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   online: undefined,
 })
+const slots = defineSlots()
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue b/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
index d69abbc6d..a5b92bc78 100644
--- a/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
+++ b/packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue
@@ -127,17 +127,17 @@
         <nav
           aria-label="Main"
         >
-          <ul v-if="$slots.navigation">
+          <ul v-if="slots.navigation">
             <slot name="navigation" />
           </ul>
 
           <div
-            v-if="$slots.navigation && $slots.bottomNavigation"
+            v-if="slots.navigation && slots.bottomNavigation"
             role="separator"
             class="navigation-separator"
           />
 
-          <ul v-if="$slots.bottomNavigation">
+          <ul v-if="slots.bottomNavigation">
             <slot name="bottomNavigation" />
           </ul>
         </nav>
@@ -170,6 +170,8 @@ import GithubButton from 'vue-github-button'
 
 import { useEnv, useI18n, useCan } from '@/app/application'
 
+const slots = defineSlots()
+
 const env = useEnv()
 const can = useCan()
 const { t } = useI18n()
diff --git a/packages/kuma-gui/src/app/x/components/x-about-card/XAboutCard.vue b/packages/kuma-gui/src/app/x/components/x-about-card/XAboutCard.vue
index 81cb2673c..45c9760a5 100644
--- a/packages/kuma-gui/src/app/x/components/x-about-card/XAboutCard.vue
+++ b/packages/kuma-gui/src/app/x/components/x-about-card/XAboutCard.vue
@@ -4,7 +4,7 @@
     :modified="props.modified ? t('common.formats.datetime', { value: Date.parse(props.modified)}) : undefined"
   >
     <template
-      v-for="(_, slotName) in $slots"
+      v-for="(_, slotName) in slots"
       :key="slotName"
       #[slotName]="slotProps"
     >
@@ -20,9 +20,14 @@
 import { AppAboutSection } from '@kong-ui-public/app-layout'
 import { useI18n } from '@kong-ui-public/i18n'
 
-const { t } = useI18n()
 
-const props = defineProps<{ created?: string, modified?: string}>()
+const props = defineProps<{
+  created?: string
+  modified?: string
+}>()
+const slots = defineSlots()
+
+const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/kuma-gui/src/app/x/components/x-action-group/XActionGroup.vue b/packages/kuma-gui/src/app/x/components/x-action-group/XActionGroup.vue
index eeb6d57e2..d49f9747e 100644
--- a/packages/kuma-gui/src/app/x/components/x-action-group/XActionGroup.vue
+++ b/packages/kuma-gui/src/app/x/components/x-action-group/XActionGroup.vue
@@ -17,7 +17,7 @@
       >
         <template #default>
           <slot
-            v-if="$slots.control"
+            v-if="slots.control"
             name="control"
           />
           <XAction
@@ -54,6 +54,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   expanded: false,
 })
+const slots = defineSlots()
 
 </script>
 <style lang="scss" scoped>
diff --git a/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue b/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue
index 94905ae9c..6d51be6ef 100644
--- a/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue
+++ b/packages/kuma-gui/src/app/x/components/x-alert/XAlert.vue
@@ -14,18 +14,18 @@
 </template>
 <script lang="ts" setup>
 import { KAlert } from '@kong/kongponents'
-import { useSlots, useAttrs } from 'vue'
+import { useAttrs } from 'vue'
 
 import type { AlertAppearance } from '@kong/kongponents'
 
-const slots = useSlots()
-const attrs = useAttrs()
-
 const props = withDefaults(defineProps<{
   variant?: AlertAppearance
 }>(), {
   variant: 'warning',
 })
+const slots = defineSlots()
+
+const attrs = useAttrs()
 </script>
 <style lang="scss" scoped>
 :deep(.k-button.primary) {
diff --git a/packages/kuma-gui/src/app/x/components/x-breadcrumbs/XBreadcrumbs.vue b/packages/kuma-gui/src/app/x/components/x-breadcrumbs/XBreadcrumbs.vue
index 7da2eb32a..73df8e9ef 100644
--- a/packages/kuma-gui/src/app/x/components/x-breadcrumbs/XBreadcrumbs.vue
+++ b/packages/kuma-gui/src/app/x/components/x-breadcrumbs/XBreadcrumbs.vue
@@ -16,12 +16,11 @@
 </template>
 <script lang="ts" setup>
 import { KBreadcrumbs } from '@kong/kongponents'
-import { useSlots } from 'vue'
 
 import type { BreadcrumbItem } from '@kong/kongponents'
 
-const slots = useSlots()
 const props = defineProps<{
   items: BreadcrumbItem[]
 }>()
+const slots = defineSlots()
 </script>
diff --git a/packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue b/packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue
index f243fa0d5..7a2949797 100644
--- a/packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue
+++ b/packages/kuma-gui/src/app/x/components/x-code-block/XCodeBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <template
-      v-if="$slots['primary-actions']"
+      v-if="slots['primary-actions']"
     >
       <div
         class="toolbar"
@@ -27,7 +27,7 @@
       @reg-exp-mode-change="emit('reg-exp-mode-change', $event)"
     >
       <template
-        v-if="$slots['secondary-actions']"
+        v-if="slots['secondary-actions']"
         #secondary-actions
       >
         <slot name="secondary-actions" />
@@ -62,6 +62,7 @@ const props = withDefaults(defineProps<{
   isFilterMode: false,
   isRegExpMode: false,
 })
+const slots = defineSlots()
 
 const emit = defineEmits<{
   (event: 'query-change', query: string): void
diff --git a/packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue b/packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue
index 45cffb6b5..ecf227eb3 100644
--- a/packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue
+++ b/packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue
@@ -41,7 +41,7 @@
         </template>
 
         <template
-          v-if="$slots.default"
+          v-if="slots.default"
         >
           <slot name="default" />
         </template>
@@ -80,10 +80,12 @@ import { KEmptyState } from '@kong/kongponents'
 
 import { useI18n } from '@/app/application'
 
-const { t } = useI18n()
 const props = withDefaults(defineProps<{
   type?: string
 }>(), {
   type: '',
 })
+const slots = defineSlots()
+
+const { t } = useI18n()
 </script>
diff --git a/packages/kuma-gui/src/app/x/components/x-i18n/XI18n.vue b/packages/kuma-gui/src/app/x/components/x-i18n/XI18n.vue
index e574cbc86..a5fd2f34a 100644
--- a/packages/kuma-gui/src/app/x/components/x-i18n/XI18n.vue
+++ b/packages/kuma-gui/src/app/x/components/x-i18n/XI18n.vue
@@ -16,14 +16,14 @@
   </template>
 </template>
 <script lang="ts" setup>
-import { useSlots, computed } from 'vue'
+import { computed } from 'vue'
 
 import { useI18n, uniqueId } from '@/app/application'
 const { t: _t } = useI18n()
 const props = defineProps<{
   t: string
 }>()
-const slots = useSlots()
+const slots = defineSlots()
 const id = uniqueId('x-i18n')
 
 const params = computed(() => {
diff --git a/packages/kuma-gui/src/app/x/components/x-modal/XModal.vue b/packages/kuma-gui/src/app/x/components/x-modal/XModal.vue
index 23d9f7a55..e81e60d29 100644
--- a/packages/kuma-gui/src/app/x/components/x-modal/XModal.vue
+++ b/packages/kuma-gui/src/app/x/components/x-modal/XModal.vue
@@ -13,6 +13,5 @@
 </template>
 <script lang="ts" setup>
 import { KModal } from '@kong/kongponents'
-import { useSlots } from 'vue'
-const slots = useSlots()
+const slots = defineSlots()
 </script>
diff --git a/packages/kuma-gui/src/app/x/components/x-select/XSelect.vue b/packages/kuma-gui/src/app/x/components/x-select/XSelect.vue
index 8b8af048e..4433076ce 100644
--- a/packages/kuma-gui/src/app/x/components/x-select/XSelect.vue
+++ b/packages/kuma-gui/src/app/x/components/x-select/XSelect.vue
@@ -25,7 +25,7 @@
 </template>
 <script lang="ts" setup>
 import { KSelect } from '@kong/kongponents'
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 
 const emit = defineEmits<{
   (event: 'change', value: string): void
@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
   selected: '',
 })
 
-const slots = useSlots()
+const slots = defineSlots()
 
 const items = computed(() => {
   const items = Object.keys(slots).reduce<
diff --git a/packages/kuma-gui/src/app/x/components/x-tabs/XTabs.vue b/packages/kuma-gui/src/app/x/components/x-tabs/XTabs.vue
index e342b6632..71c32509d 100644
--- a/packages/kuma-gui/src/app/x/components/x-tabs/XTabs.vue
+++ b/packages/kuma-gui/src/app/x/components/x-tabs/XTabs.vue
@@ -24,19 +24,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { useSlots, useAttrs, computed, onMounted, ref, watch } from 'vue'
+import { useAttrs, computed, onMounted, ref, watch } from 'vue'
 
 import type { Tab } from '@kong/kongponents'
 
-const $ref = ref<HTMLDivElement | null>(null)
-
 defineOptions({
   inheritAttrs: false,
 })
-const attrs = useAttrs()
-const $attrs = Object.fromEntries(Object.entries(attrs).filter(([key, _value]) => !['aria-label'].includes(key)))
 
-const slots = useSlots()
+const slots = defineSlots()
 
 const props = withDefaults(defineProps<{
   selected?: string
@@ -44,6 +40,10 @@ const props = withDefaults(defineProps<{
   selected: '',
 })
 
+const attrs = useAttrs()
+const $attrs = Object.fromEntries(Object.entries(attrs).filter(([key, _value]) => !['aria-label'].includes(key)))
+const $ref = ref<HTMLDivElement | null>(null)
+
 const items = computed(() => {
   return Object.keys(slots).reduce<Tab[]>((prev, key) => {
     const pos = key.lastIndexOf('-tab')