Package @framework/ui

@framework/ui est un package interne qui regroupe des composants Vue et des utilitaires partagés entre toutes les applications dépendant du framework Frappe/Dodock (Studio, Builder, HRMS, etc.). Il s'agit d'une extension de frappe-ui dédiée aux composants spécifiques au framework que toutes les applications ont besoin de partager.

Principe de fonctionnement

@framework/ui est un package local — il n'est jamais publié sur npm. Le code est livré sous forme de sources brutes (.vue et .ts) sans étape de compilation préalable : c'est le bundler de l'application hôte (Vite) qui le compile au moment du build. Ce fonctionnement est identique à celui de frappe-ui.

      
graph LR
    A["Votre application\n(Studio, HRMS, custom…)"] -->|"importe"| B["@framework/ui\n(sources .vue/.ts)"]
    B -->|"peer dep"| C["frappe-ui"]
    B -->|"peer dep"| D["Vue 3"]
    B -->|"peer dep"| E["vue-router"]
    A -->|"compile via"| F["Vite / bundler"]

    

Les dépendances vue, vue-router et frappe-ui sont déclarées en peer dependencies : elles ne sont pas dupliquées dans le package, mais réutilisées depuis l'application hôte. Cela évite les instances Vue multiples et les conflits de contexte de routeur.

Emplacement dans le dépôt

Le package se trouve dans le dossier ui/ du dépôt dodock (ou frappe en amont) :

dodock/
└── ui/
    ├── package.json          # Manifeste du package (@framework/ui)
    ├── README.md             # Documentation développeur
    └── src/
        ├── index.ts          # Point d'entrée — exporte tous les composants
        └── components/
            └── Link/
                ├── Link.vue  # Composant <Link>
                ├── index.ts  # Export du composant
                └── types.ts  # Types TypeScript associés

Intégration dans une application

1. Déclarer la dépendance locale

Dans le package.json de votre application, ajoutez @framework/ui comme dépendance locale en pointant vers le dossier ui/ de Dodock :

{
  "dependencies": {
    "@framework/ui": "file:../../../apps/dodock/ui"
  }
}

Adaptez le chemin relatif selon l'emplacement de votre application dans le bench.

2. Configurer Vite pour compiler les sources

Comme le package est livré en sources brutes, Vite doit être configuré pour ne pas l'exclure de la compilation. Dans votre vite.config.js :

export default {
  optimizeDeps: {
    // Ne pas pré-bundler @framework/ui — il doit être compilé avec l'app
    exclude: ['@framework/ui']
  }
}

3. Importer les composants

Une fois la dépendance installée, importez les composants directement depuis @framework/ui :

import { Link } from '@framework/ui'

Ou globalement dans votre main.ts pour un enregistrement sur toute l'application :

import { createApp } from 'vue'
import { Link } from '@framework/ui'
import App from './App.vue'

const app = createApp(App)
app.component('Link', Link)
app.mount('#app')

Composants disponibles

<Link>

Composant de lien intelligent qui s'adapte au contexte de navigation de l'application Frappe/Dodock.

<template>
  <Link :doctype="'Client'" :name="'Maison Verte SARL'">
    Voir la fiche client
  </Link>
</template>

<script setup lang="ts">
import { Link } from '@framework/ui'
</script>

Props principales (voir src/components/Link/types.ts pour la liste complète) :

Créer un nouveau composant partagé

Pour contribuer un nouveau composant à @framework/ui :

1. Créez un dossier ui/src/components/MonComposant/ avec au minimum :
   • MonComposant.vue — le composant Vue
   • index.ts — l'export nommé
   • types.ts — les interfaces TypeScript
2. Exportez-le depuis ui/src/index.ts :

export { default as MonComposant } from './components/MonComposant'
export type { MonComposantProps } from './components/MonComposant/types'

3. Documentez son usage dans ui/README.md.

Pourquoi pas npm ?

Le choix de ne pas publier ce package sur npm est délibéré :

• Cohérence des versions : le package évolue en même temps que le framework, sans gestion de versions séparée.
• Pas de build step : les sources brutes permettent au bundler de l'application hôte de tree-shaker et d'optimiser le code.
• Instance unique de Vue : en tant que peer dependency, Vue n'est instancié qu'une seule fois, ce qui évite les bugs liés aux instances multiples (store partagé, directives, plugins).

Références

• Code source : dodock/ui/ dans le dépôt Dodock
• frappe-ui — la bibliothèque de composants de base
• MR Dodock : !9091