fix(deps): uses defineSlots macro over useSlots (#3444)

Required for #3336

I got a bit more time to look at
#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 <[email protected]>

packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue

@@ -29,21 +29,20 @@
     <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>
 </template>
 
 <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)

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')

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)

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,15 +123,17 @@ 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
   appearance?: 'warning' | 'danger'
 }>(), {
   appearance: 'warning',
 })
+const slots = defineSlots()
+
+const { t } = useI18n()
+const prompt = inject('x-prompt', undefined)
 </script>
 
 <style lang="scss" scoped>

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>

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()

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>

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>

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) {

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>

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

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>

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(() => {

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>