From c20c724db0b3537132e2ea6156156b5c2ad6d53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 6 Feb 2025 13:08:39 +0100
Subject: [PATCH] feat: add directives page (#740)

Co-authored-by: Anthony Fu <github@antfu.me>
---
 .../client/components/ComposableItem.vue      | 29 ++++++++---
 .../client/components/ComposableTree.vue      |  1 +
 .../client/components/docs/imports.md         |  6 +++
 .../devtools/client/pages/modules/imports.vue | 51 ++++++++++++++++---
 .../devtools/src/integrations/vue-devtools.ts |  6 +--
 playgrounds/tab-pinia/directives/focus.ts     | 23 +++++++++
 playgrounds/tab-pinia/nuxt.config.ts          | 18 +++++++
 playgrounds/tab-pinia/pages/index.vue         |  2 +-
 pnpm-lock.yaml                                | 15 ++----
 9 files changed, 121 insertions(+), 30 deletions(-)
 create mode 100644 playgrounds/tab-pinia/directives/focus.ts

diff --git a/packages/devtools/client/components/ComposableItem.vue b/packages/devtools/client/components/ComposableItem.vue
index 3494ff6f6b..ad1ba1f2c3 100644
--- a/packages/devtools/client/components/ComposableItem.vue
+++ b/packages/devtools/client/components/ComposableItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Import, UnimportMeta } from 'unimport'
+import { kebabCase } from 'scule'
 import { computed } from 'vue'
 import { ComposablesDocs } from '~/composables/constants'
 import { useCopy, useOpenInEditor } from '~/composables/editor'
@@ -7,12 +8,14 @@ import { useCopy, useOpenInEditor } from '~/composables/editor'
 const props = withDefaults(
   defineProps<{
     item: Import
+    isDirective?: boolean
     metadata?: UnimportMeta
     filepath?: string
     counter?: boolean
     classes?: string
   }>(),
   {
+    isDirective: false,
     counter: true,
     classes: 'px2 py1 text-sm bg-gray:5 ',
   },
@@ -22,6 +25,16 @@ const copy = useCopy()
 const openInEditor = useOpenInEditor()
 
 const name = computed(() => props.item.as || props.item.name)
+const copyName = computed(() => {
+  let n = name.value
+  if (props.isDirective) {
+    if (n[0] !== 'v') {
+      n = `v${n}`
+    }
+    n = kebabCase(n)
+  }
+  return n
+})
 const usageCount = computed(() => props.metadata?.injectionUsage?.[name.value]?.count || 0)
 const modules = computed(() =>
   (props.metadata?.injectionUsage?.[name.value]?.moduleIds || [])
@@ -40,14 +53,18 @@ const docsUrl = computed(() => {
 
 <template>
   <VDropdown :disabled="!props.metadata">
-    <button hover:text-primary>
-      <code
-        rounded font-mono
-        :class="[metadata && !usageCount ? 'op30 hover:op100' : '', classes]"
-      >
+    <button hover:text-primary :class="[metadata && !usageCount ? 'op30 hover:op100' : '', classes]">
+      <code rounded font-mono>
         {{ name }}
         <sup v-if="usageCount && counter" text-primary>x{{ usageCount }}</sup>
       </code>
+      <sup v-if="isDirective">
+        <abbr title="Vue Directive">
+          <NIcon
+            icon="tabler:hexagon-letter-d"
+          />
+        </abbr>
+      </sup>
     </button>
     <template #popper>
       <div max-w-100>
@@ -59,7 +76,7 @@ const docsUrl = computed(() => {
             :markdown="item.meta.description"
           />
           <div flex="~ gap2" n="primary xs">
-            <NButton icon="carbon-copy" @click="copy(name, 'imports-name')">
+            <NButton icon="carbon-copy" @click="copy(copyName, 'imports-name')">
               Copy
             </NButton>
             <NButton v-if="filepath" icon="carbon-code" @click="filepath && openInEditor(filepath)">
diff --git a/packages/devtools/client/components/ComposableTree.vue b/packages/devtools/client/components/ComposableTree.vue
index d11c270f2e..8ff60c6e9a 100644
--- a/packages/devtools/client/components/ComposableTree.vue
+++ b/packages/devtools/client/components/ComposableTree.vue
@@ -17,6 +17,7 @@ defineProps<{
           v-for="i of value" :key="i.as"
           :item="i"
           :metadata="metadata"
+          :is-directive="i.meta?.vueDirective === true"
           :filepath="key.match(/^[\w@]/) ? undefined : key"
         />
       </div>
diff --git a/packages/devtools/client/components/docs/imports.md b/packages/devtools/client/components/docs/imports.md
index b4d3bceb77..440fec0e7b 100644
--- a/packages/devtools/client/components/docs/imports.md
+++ b/packages/devtools/client/components/docs/imports.md
@@ -15,3 +15,9 @@ Meanwhile, modules could also provide auto-imports for their own components. You
 <hr>
 
 [Learn more in the documentation](https://nuxt.com/docs/guide/concepts/auto-imports)
+
+## Directives
+
+Directives placed in the directives/ directory are automatically registered by Nuxt. They can be used in your templates without importing them.
+
+[Learn more in the documentation](https://nuxt.com/docs/guide/directory-structure/directives)
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index 6cae6d92d6..cc4275c25e 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -15,6 +15,7 @@ definePageMeta({
 
 const config = useServerConfig()
 const filterMode = ref<'all' | 'using' | 'not-used'>('all')
+const filterEntries = ref<'all' | 'composables' | 'directives'>('all')
 
 const search = ref('')
 const autoImports = useAutoImports()
@@ -39,6 +40,15 @@ const filtered = computed(() => {
     ? fuse.value.search(search.value).map(i => i.item)
     : functions.value
 
+  const filter = filterEntries.value
+
+  if (filter === 'composables') {
+    result = result.filter(i => !(i.meta?.vueDirective === true))
+  }
+  else if (filter === 'directives') {
+    result = result.filter(i => i.meta?.vueDirective === true)
+  }
+
   if (filterMode.value === 'using' && importsMetadata.value) {
     result = result
       .filter(i => (i.as || i.name) in importsMetadata.value!.injectionUsage)
@@ -74,12 +84,28 @@ const filtered = computed(() => {
     count,
   }
 })
+
+const filteredUserCountTitle = computed(() => {
+  return filterEntries.value === 'directives'
+    ? `${filtered.value.count.user} directives from ${filtered.value.user.size} modules`
+    : `${filtered.value.count.user} composables from ${filtered.value.user.size} modules`
+})
+const filteredBuiltinTitle = computed(() => {
+  return filterEntries.value === 'directives'
+    ? `${filtered.value.count.builtin} directives`
+    : `${filtered.value.count.builtin} composables`
+})
+const filteredLibTitle = computed(() => {
+  return filterEntries.value === 'directives'
+    ? `${filtered.value.count.lib} directives from ${filtered.value.lib.size} packages`
+    : `${filtered.value.count.lib} composables from ${filtered.value.lib.size} packages`
+})
 </script>
 
 <template>
   <div v-if="config" relative h-full of-auto>
     <NNavbar v-model:search="search" pb3>
-      <div v-if="importsMetadata" flex="~ gap-2 items-center">
+      <div v-if="importsMetadata" flex="~ gap-2 items-center lt-sm:col lt-sm:items-start">
         <NIcon icon="carbon-filter" op50 />
         <NSelectTabs
           v-model="filterMode"
@@ -90,14 +116,23 @@ const filtered = computed(() => {
             { label: 'Not used', value: 'not-used' },
           ]"
         />
+        <NSelectTabs
+          v-model="filterEntries"
+          n="primary sm"
+          :options="[
+            { label: 'All', value: 'all' },
+            { label: 'Composables', value: 'composables' },
+            { label: 'Directives', value: 'directives' },
+          ]"
+        />
       </div>
     </NNavbar>
     <NSectionBlock
       v-if="filtered.user.size"
       :open="filtered.count.user <= DETAILS_MAX_ITEMS"
-      icon="carbon-function"
-      text="User composables"
-      :description="`${filtered.count.user} composables from ${filtered.user.size} modules`"
+      :icon="filterEntries === 'directives' ? 'tabler:hexagon-letter-d' : 'carbon-function'"
+      :text="`User ${filterEntries === 'directives' ? 'directives' : 'composables'}`"
+      :description="filteredUserCountTitle"
     >
       <ComposableTree :map="filtered.user" :root="config.rootDir" :metadata="importsMetadata" />
     </NSectionBlock>
@@ -105,8 +140,8 @@ const filtered = computed(() => {
       v-if="filtered.builtin.size"
       :open="filtered.count.builtin <= DETAILS_MAX_ITEMS"
       icon="simple-icons-nuxtdotjs"
-      text="Built-in composables"
-      :description="`${filtered.count.builtin} composables`"
+      :text="`Built-in ${filterEntries === 'directives' ? 'directives' : 'composables'}`"
+      :description="filteredBuiltinTitle"
     >
       <ComposableTree :map="filtered.builtin" :root="config.rootDir" :metadata="importsMetadata" />
     </NSectionBlock>
@@ -114,8 +149,8 @@ const filtered = computed(() => {
       v-if="filtered.lib.size"
       :open="filtered.count.lib <= DETAILS_MAX_ITEMS"
       icon="carbon-3d-mpr-toggle"
-      text="Composables from libraries"
-      :description="`${filtered.count.lib} composables from ${filtered.lib.size} packages`"
+      :text="`${filterEntries === 'directives' ? 'Directives' : 'Composables'} from libraries`"
+      :description="filteredLibTitle"
     >
       <ComposableTree :map="filtered.lib" :root="config.rootDir" :metadata="importsMetadata" />
     </NSectionBlock>
diff --git a/packages/devtools/src/integrations/vue-devtools.ts b/packages/devtools/src/integrations/vue-devtools.ts
index ada1fc7275..9e0fe5e730 100644
--- a/packages/devtools/src/integrations/vue-devtools.ts
+++ b/packages/devtools/src/integrations/vue-devtools.ts
@@ -1,15 +1,15 @@
 import type { NuxtDevtoolsServerContext } from '../types'
-import { addPluginTemplate } from '@nuxt/kit'
+import { addPluginTemplate, resolvePath } from '@nuxt/kit'
 import { join } from 'pathe'
 import { runtimeDir } from '../dirs'
 
-export function setup({ nuxt }: NuxtDevtoolsServerContext) {
+export async function setup({ nuxt }: NuxtDevtoolsServerContext) {
   if (!nuxt.options.dev || nuxt.options.test)
     return
 
   addPluginTemplate({
     name: 'vue-devtools-client',
     mode: 'client',
-    src: join(runtimeDir, 'vue-devtools-client.js'),
+    src: await resolvePath(join(runtimeDir, 'vue-devtools-client')),
   })
 }
diff --git a/playgrounds/tab-pinia/directives/focus.ts b/playgrounds/tab-pinia/directives/focus.ts
new file mode 100644
index 0000000000..c12b2bd00c
--- /dev/null
+++ b/playgrounds/tab-pinia/directives/focus.ts
@@ -0,0 +1,23 @@
+// todo: remove this once nuxt with directives folder here
+import type { DirectiveBinding } from 'vue'
+
+function mounted(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('mounted', el, binding)
+}
+
+function unmounted(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('unmounted', el, binding)
+}
+
+function updated(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('updated', el, binding)
+}
+
+export const Focus = {
+  mounted,
+  unmounted,
+  updated,
+}
diff --git a/playgrounds/tab-pinia/nuxt.config.ts b/playgrounds/tab-pinia/nuxt.config.ts
index 1106f8c86f..24f3b21d81 100644
--- a/playgrounds/tab-pinia/nuxt.config.ts
+++ b/playgrounds/tab-pinia/nuxt.config.ts
@@ -1,3 +1,7 @@
+import { createResolver } from '@nuxt/kit'
+
+const resolver = createResolver(import.meta.url)
+
 export default defineNuxtConfig({
   css: ['~/assets/main.css'],
 
@@ -9,6 +13,20 @@ export default defineNuxtConfig({
 
   imports: {
     dirs: ['./stores'],
+    presets: [{
+      from: resolver.resolve('directives/focus.ts'),
+      imports: [{
+        name: 'Focus',
+        meta: {
+          vueDirective: true,
+          docsUrl: 'https://vuetifyjs.com/en/directives/click-outside/#usage',
+          description: 'The v-focus directive focus the element once mounted.',
+        },
+      }],
+    }],
+    addons: {
+      vueDirectives: true,
+    },
   },
 
   pinia: {
diff --git a/playgrounds/tab-pinia/pages/index.vue b/playgrounds/tab-pinia/pages/index.vue
index 38647b3bca..0c6f83f786 100644
--- a/playgrounds/tab-pinia/pages/index.vue
+++ b/playgrounds/tab-pinia/pages/index.vue
@@ -10,7 +10,7 @@ const counter = useCounter()
 
 <template>
   <div>
-    <div style="margin: 1rem 0">
+    <div v-focus style="margin: 1rem 0">
       <PiniaLogo />
     </div>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de4914a2d8..7348b9718a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -275,7 +275,7 @@ catalogs:
       version: 2.3.1
     pkg-types:
       specifier: ^1.3.1
-      version: 1.3.0
+      version: 1.3.1
     prompts:
       specifier: ^2.4.2
       version: 2.4.2
@@ -551,7 +551,7 @@ importers:
         version: 1.0.0
       pkg-types:
         specifier: 'catalog:'
-        version: 1.3.0
+        version: 1.3.1
       semver:
         specifier: 'catalog:'
         version: 7.7.1
@@ -857,7 +857,7 @@ importers:
         version: 2.0.2
       pkg-types:
         specifier: 'catalog:'
-        version: 1.3.0
+        version: 1.3.1
       prompts:
         specifier: 'catalog:'
         version: 2.4.2
@@ -5853,9 +5853,6 @@ packages:
       typescript:
         optional: true
 
-  pkg-types@1.3.0:
-    resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -14235,12 +14232,6 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  pkg-types@1.3.0:
-    dependencies:
-      confbox: 0.1.8
-      mlly: 1.7.4
-      pathe: 1.1.2
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8