Gestion des ressources avec les hooks

Ouvrez le fichier client/src/systems/preloader-system.ts. Ce fichier est un système autonome qui garantit que toutes les ressources du jeu sont préchargées avant le début du jeu. Il possède quelques fonctionnalités astucieuses, comme le lancement du préchargement pendant que l'utilisateur est encore sur l'écran d'authentification, et la détection de nouvelles ressources à charger via des événements serveur.

Mais le système de préchargement dépend également d'une liste de ressources statiques qui est importée depuis /client/src/assets/index.ts. Le système de préchargement est entièrement découplé des composants du jeu eux-mêmes. Il s'agit d'une conception propre qui garantit que les composants de jeu individuels n'ont pas à implémenter manuellement des appels vers le préchargeur.

Cependant, cela introduit un problème potentiel : un développeur pourrait ajouter un nouveau composant de jeu, avec de nouvelles ressources, et oublier de les ajouter à la liste des ressources statiques pour le préchargeur. Ajoutons un hook automatisé qui peut aider à éviter cela, tout en faisant gagner du temps aux développeurs du jeu.

Cliquez sur l'icône de fantôme dans la barre latérale de votre IDE pour ouvrir le panneau Kiro. Repérez la section « Agent Hooks » et cliquez sur l'icône plus pour commencer à rédiger un nouveau hook.

Utilisons une requête personnalisée pour le hook. Vous pouvez saisir en langage naturel pour décrire ce que vous voulez qu'il se passe. Par exemple :

When a file is created in the assets folder, 
ensure that the assets folder index.ts file is
appropriately updated

Chargement de l'image...

Kiro développera votre requête en langage naturel en une configuration de hook d'agent pour le comportement que vous avez décrit. Le hook sera stocké dans votre dossier .kiro/hooks. Il devrait ressembler à ceci :

Chargement de l'image...

{
  "name": "Image Asset Indexer",
  "description": "Automatically adds references to newly added image files in the assets folder to the index.ts file",
  "version": "1",
  "when": {
    "type": "fileCreated",
    "patterns": [
      "client/src/assets/*.png",
      "client/src/assets/*.jpg",
      "client/src/assets/*.jpeg",
      "client/src/assets/*.gif",
      "client/src/assets/*.svg"
    ]
  },
  "then": {
    "type": "askAgent",
    "prompt": "A new image file has been added to the assets folder. Please update the index.ts file in the assets folder to include a reference to this new image. First, check the current structure of the index.ts file to understand how images are referenced. Then add an appropriate export statement for the new image file following the existing pattern. Make sure to maintain alphabetical order if that's the current convention."
  }
}

Maintenant que nous avons un exemple de modèle pour un hook d'agent, vous pouvez également créer de nouveaux hooks manuellement en créant simplement de nouveaux fichiers dans le dossier .kiro/hooks.

Essayons cela en clonant le hook d'indexation des ressources et en le modifiant pour en faire un hook de suppression des ressources. Copiez le hook existant et collez-le sous le nom image-asset-remover.kiro.hook avec un contenu comme celui-ci :

{
  "name": "Image Asset Remover",
  "description": "Automatically removes references to newly deleted image files in the assets folder to the index.ts file",
  "version": "1",
  "when": {
    "type": "fileDeleted",
    "patterns": [
      "client/src/assets/*.png",
      "client/src/assets/*.jpg",
      "client/src/assets/*.jpeg",
      "client/src/assets/*.gif",
      "client/src/assets/*.svg"
    ]
  },
  "then": {
    "type": "askAgent",
    "prompt": "An image file has been removed from the assets folder. Please update the index.ts file in the assets folder to remove any references to this removed image."
  }
}

Chargement de l'image...

Vous devriez maintenant avoir deux configurations de hook, et deux hooks qui apparaissent sous « Agent Hooks » dans le panneau Kiro.