<!--  компонент - контейнер форма с двумя свойствами input c типом свойства "inputvalue" и  click с типом "click" -->
<form data-form="container" class="card col-12">
   <div class="form-group">
       <label for="">Введите имя</label>
      <textarea data-form-input="inputvalue" class="form-control" rows="1"></textarea>
    </div>
    <button data-form-click="click" type="submit">Submit</button>
</form>
<!-- компонент - контейнер приветствие и свойство user_name с типом - "text" -->
<div data-greeting="container" class="col-6 card">
    <p>Привет: <span  data-greeting-user_name="text">guest</span></p>
</div>
<!-- компонент - контейнер кнопка выхода и свойство user_name с типом - "text" -->
<div data-logout="container" class="col-6 card">
      <a href="#"> Выйти из профиля: ( <span  data-logout-user_name="text"></span>  )
      </a>
</div>
<!-- компонент - массив пользователей, изначально с двумя контейнерами, в каждом контейнере свойство user_name - "text", и свойством массива  message с типом "text" для отображения сообщений -->
<div data-users_array="array">
     <p  data-users_array-message="text" > </p>
  <div  class="row">
            <div data-user="container" class="col-4 card">
    <p>пользователь - <span data-user-user_name="text">user_name_1</span>
                </p>
       </div>
             <div data-user="container" class="col-4 card">
    <p>пользователь - <span data-user-user_name="text">user_name_2</span>
                 </p>
        </div>
        </div>
</div>

var StateMap = {
    form: {//форма входа
        container: "form",
        props: ["input", "click"],
        methods: {
            click: function(){
                event.preventDefault(); //отменяем перезагрузку страницы
                //this - указывает на свойство, в обработчике события которого мы находимся, parent - доступ к контейнеру из свойства
                //получаем данные свойства input
                var text = this.parent.props.input.getProp();
                console.log(text);
            }
        },
    },
    greeting: {//приветствие
        container: "greeting",
        props: [ "user_name", ],
        methods: {
            }
    },
    logout: { //кнопка выхода
        container: "logout",
        props: [ "user_name", ],
        methods: {
        },
    },
    users_array: { //массив с пользователями
        selector: "div.row", //уточняющий селектор
  arrayProps: [ "message"], //свойство массива
        container: "user",  //контейнер массива
        props: [ "user_name", ], //свойство контейнера
        methods: {
        },
    },
}
window.onload = function(){//создаем экземпляр приложения htmlix
    var HM = new HTMLixState(StateMap);
    console.log(HM);
}

eventEmiters: {  //добавляем объект со всеми пользовательскими событиями в описание приложения
   ["emiter-set-name"]: {prop: ""}, //событие с начальными данными
},
///вызываем событие в свойстве click компонента form и передаем в него полученные данные
click: function(){
        event.preventDefault();
        var text = this.parent.props.input.getProp();
        this.rootLink.eventProps["emiter-set-name"].setEventProp(text);
         //сохраняем имя пользователя в localStorage
         window.localStorage.setItem('user_name', name);
}
//слушаем событие во всех остальных компонентах и обновляем их свойства
greeting: {
     container: "greeting",
     props: [ "user_name", ['listen_set_name', "emiter-set-name", "" ],], //создали свойство слушатель события в компоненте
     methods: {
          listen_set_name: function(){
    //получили данные из события и обновили свойство user_name
    this.parent.props.user_name.setProp( this.emiter.getEventProp() );
    }
       },
},
logout: {
   container: "logout",
   props: [ "user_name",  ['listen_set_name', "emiter-set-name", "" ] ],
   methods: {
  listen_set_name: function(){//слушаем событие и обновляем свойство user_name
      this.parent.props.user_name.setProp( this.emiter.getEventProp() );
  },
    },
},
users_array: {
  selector: "div.row",
  arrayProps: [    "message",  ['listen_set_name', "emiter-set-name", ""],  ],
  arrayMethods: {
     listen_set_name: function(){//слушаем событие в свойстве массива и создаем новый контейнер с полученными данными
              this.parent.add( {user_name: this.emiter.getEventProp()} );
                   //выводим сообщение о новом посетителе
                    this.parent.props.message.setProp("новый посетитель - "+this.emiter.getEventProp());
      },
  container: "user",
  props: [ "user_name", ],
  methods: {
  },
},
window.onload = function(){
  var HM = new HTMLixState(StateMap);
        //проверяем есть ли переменная  user_name в  localStorage и при ее наличии вызываем событие
  var name = window.localStorage.getItem('user_name');
  if(name != null)HM.eventProps["emiter-set-name"].setEventProp(name);
  console.log(HM);
}

eventEmiters: {
    /*      ...        */
    ["emiter-exit-user"]: {prop: ""},
  }
  //вызываем событие в компоненте logout и передаем в него имя пользователя
logout: {
    container: "logout",
    props: [ /* ...  */,  ["exit", "click", "a:first-of-type"],], //создали новое свойство - слушатель события "click" и указали его вторым способом с помощью массива
     methods: {
           /* ... */
     exit: function(){
        //получаем имя пользователя
       var user_name = this.parent.props.user_name;
       //вызываем событие
       this.rootLink.eventProps["emiter-exit-user"].setEventProp( user_name.getProp() );
             //удаляем пользователя из localStorage
       window.localStorage.removeItem('user_name');
              //очищаем свойство компонента
        user_name.setProp("");
      }
  },
},
users_array: {
  selector: "div.row",
  arrayProps: [ /* .. */,   ['listen_exit_user', "emiter-exit-user", ""], ], //добавили свойство - слушатель события  "emiter-exit-user"
  arrayMethods: {
    /* ... */
    listen_exit_user: function(){
      //data - доступ ко всем контейнерам из массива
      this.parent.data.forEach(container=>{
        if(container.props.user_name.getProp() == this.emiter.getEventProp()){
                 container.remove(true); //удалили контейнер
        }
      });
                 //добавили сообщение
                 this.parent.props.message.setProp( this.emiter.getEventProp()+" - покинул сайт");
      },
    },
    container: "user",
    props: [ "user_name", ],
    methods: {
    },
},
greeting: {
    container: "greeting",
    props: [/* ... */, ['listen_exit_user', "emiter-exit-user", ""] ],
    methods: {
      listen_exit_user: function(){
             //удалили имя пользователя из свойства
        this.parent.props.user_name.setProp("");
      }
    },
  },