refactor: bouncer

Author: Barbapapazes

eslint.config.mjs

@@ -1,12 +1,9 @@
 // @ts-check
 import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
 
-// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
 export default createConfigForNuxt({
   features: {
-    // Rules for module authors
     tooling: true,
-    // Rules for formatting
     stylistic: true,
   },
   dirs: {
@@ -15,6 +12,7 @@ export default createConfigForNuxt({
     ],
   },
 }).overrideRules({
+  '@typescript-eslint/no-empty-object-type': 'off',
   '@typescript-eslint/no-explicit-any': 'off',
   'vue/multi-word-component-names': ['error', {
     ignores: ['Can', 'Cannot', 'Bouncer'],

src/runtime/components/Bouncer.vue

@@ -1,14 +1,26 @@
-<script lang="ts" setup generic="Ability extends BouncerAbility<any>">
+<script lang="ts">
 import type { Component } from 'vue'
 import type { BouncerAbility, BouncerArgs } from '../../utils'
 import { Primitive } from './Primitive'
 import { allows, ref, watchEffect } from '#imports'
 
-const props = defineProps<{
+export interface BouncerProps {
   ability: Ability | Ability[]
   args?: BouncerArgs<Ability> | BouncerArgs<Ability>[]
   as?: string | Component
-}>()
+}
+export interface BouncerEmits {}
+export interface BouncerSlots {
+  default?: (props?: { can: boolean }) => any
+  can?: (props?: object) => any
+  cannot?: (props?: object) => any
+}
+</script>
+
+<script lang="ts" setup generic="Ability extends BouncerAbility<any>">
+const props = defineProps<BouncerProps>()
+defineEmits<BouncerEmits>()
+const slots = defineSlots<BouncerSlots>()
 
 const can = ref(await resolve())
 
@@ -31,10 +43,11 @@ async function resolve() {
   <Primitive
     :as="props.as"
   >
-    <slot
-      v-if="$slots.default"
-      :can
-    />
+    <template v-if="slots.default">
+      <slot
+        :can
+      />
+    </template>
     <template v-else>
       <slot
         v-if="can"

src/types/module.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ModuleOptions {}

test/fixtures/components/app/app.vue

@@ -84,6 +84,22 @@ const cannot = defineAbility(() => {
       </div>
     </Cannot>
 
+    <Bouncer :ability="can">
+      <div data-testid="bouncer-default-visible">
+        Bouncer Default Visible
+      </div>
+      <template #can>
+        <div data-testid="bouncer-default-can-invisible">
+          Bouncer Can Invisible
+        </div>
+      </template>
+      <template #cannot>
+        <div data-testid="bouncer-default-cannot-invisible">
+          Bouncer Cannot Invisible
+        </div>
+      </template>
+    </Bouncer>
+
     <Bouncer
       :ability="can"
     >