Третий в серии об использовании @relax.js/core с агентом кодирования. Это модель, которую агент должен держать в голове. Коротко намеренно. Каждый блок кода ниже взят из небольшого примера приложения, работающего под управлением vitest; здесь нет ничего эскизного...
Третий в серии об использовании @relax.js/core с агентом кодирования. Это модель, которую агент должен держать в голове. Коротко намеренно. Каждый блок кода ниже взят из небольшого примера приложения, работающего под управлением vitest; здесь ничего не нарисовано.
1. Компонент — это простой пользовательский элемент.
Нет базового класса. Нет декоратора, который его регистрирует. расширяет HTMLElement, собственный жизненный цикл customElements.define в нижней части файла.
класс экспорта ProfileHeader расширяет HTMLElement {
частное имя!: HTMLElement;
ConnectedCallback () {
this.innerHTML = '';
this.name = this.querySelector('.display-name')!;
document.addEventListener(ProfileSavedEvent.type, this.onProfileSaved);
}
отключенный вызов() {
document.removeEventListener(ProfileSavedEvent.type, this.onProfileSaved);
}
частный onProfileSaved = (e: ProfileSavedEvent) => {
this.name.textContent = e.displayName;
};
}
customElements.define('заголовок профиля', ProfileHeader);
Почему это важно для агента: жизненный цикл документирован в MDN, о котором агент прочитал больше, чем о документации любого фреймворка. А customElements.define('profile-header', ...) представляет собой буквальную строку, поэтому