Îles (Islands)

Une île est une interface Vue montée dans un shadow root. Cette page explique comment une page du bureau devient une île. Pour construire une île dans une application et la monter vous-même, voir Îlot d'application.

Registre des îles

Le fichier assets.json est le registre des îles. Chaque île y a deux clés : <nom>.island.js et <nom>.island.css. Le nom de l'entrée de build est le nom de l'île : l'entrée insights.dashboard donne la clé insights.dashboard.island.js.

frappe.utils.island.get_ui_islands() renvoie les îles du site : celles dont l'application est installée. Aucun hook n'est nécessaire.

Créer une page dessinée par une île

1. Créez une Page standard dans votre application, en mode développeur.
2. Mettez le champ Type à Frappe UI. Laissez le champ Island vide. Une telle page doit être standard (Standard = « Yes »).
3. Enregistrez. Dodock écrit un point de départ à côté du fichier JSON de la page :

mon_app/mon_module/page/tableau_ventes/
├── tableau_ventes.json          type : "Frappe UI"
├── tableau_ventes.island.js     le point d'entrée, déjà écrit
└── tableau_ventes.vue           le composant, à modifier

4. Lancez bench build. La page s'ouvre à l'adresse /desk/tableau-ventes. bench watch reconstruit et remonte l'île à chaque enregistrement, sans recharger la page.

Exemple fictif : mon_app et tableau_ventes sont des noms inventés.

Le composant reçoit la fin de l'adresse et signale son titre et ses actions :

<script setup>
defineProps({ route: Array, query: Object });
const emit = defineEmits(["title", "actions"]);
emit("title", "Tableau des ventes");
</script>

route contient les segments après le nom de la page, query les paramètres. Ils se mettent à jour sans remonter l'île. L'île s'appelle <app>.page.<nom de la page>, par exemple mon_app.page.tableau-ventes.

Le framework construit toutes les îles de page du bench en un seul build, depuis apps/frappe/island-toolchain/. Une île de page peut importer vue, frappe-ui et @framework/ui, mais aucun module propre à l'application. Au premier build, bench build lance yarn install dans ce dossier.

Nommer une île de l'application

Une page qui a besoin des composants de l'application nomme une île construite par l'application, dans le champ Island :

{ "doctype": "Page", "name": "insights-dashboard", "type": "Frappe UI", "island": "insights.dashboard" }

L'île doit exister sur le site, sinon l'enregistrement de la page est refusé. Dans ce cas, le framework ne construit rien et n'écrit aucun fichier à côté de la page. La page n'a pas besoin d'être standard. Le bureau monte l'île nommée et lui passe route et query, comme pour une île de page.

Si l'île est absente

Si l'île n'est pas trouvée, la page affiche un message d'erreur traduit à la place de l'île.

Décisions de conception

Les décisions sont dans ui/island/decisions/ du dépôt Dodock, notamment :