feat: add directive transformer runtime

playground/app.vue

@@ -1,8 +1,41 @@
 <template>
-  <div>
-    Nuxt module playground!
+  <button v-if="true" id="btn-view" v-can="true">
+    Voir le dossier 2
+  </button>
+  <div v-cannot>
+    v-else
   </div>
+
+  <button v-if="isReady && can.employee.edit" id="btn-edit" v-can="true">
+    Modifier le dossier
+  </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
+const isReady = true
+const can = {
+  employee: {
+    view: 'view_employee',
+    edit: 'edit_employee',
+  },
+}
 </script>
+
+<style scoped>
+.page {
+  padding: 2rem;
+  font-family: system-ui, sans-serif;
+}
+
+section {
+  margin-top: 1.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background: #fff;
+}
+
+button {
+  margin-right: 0.75rem;
+}
+</style>

playground/nuxt.config.ts

@@ -1,5 +1,12 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
   devtools: { enabled: true },
-  myModule: {},
+  nuxtCan: {
+    reporter: true
+    // permissions: {
+    //   employee: ['view', 'edit'],
+    //   contract: ['create'],
+    // },
+    // canFunctionImport: '~/permissions/__can__',
+  },
 })

playground/permissions/__can__.ts

@@ -0,0 +1,12 @@
+export function __can__(path: string[]) {
+  const key = path.join('.')
+  const allowed = new Set([
+    'employee.view',
+    'employee.edit',
+    'contract.create',
+  ])
+
+  // return allowed.has(key)
+  console.log('Checking permission:', key)
+  return false
+}