Breaking changes между версиями

Библиотека Slim.js развивается стремительно, и с каждой новой версией появляются изменения, которые могут нарушить работу существующего кода. Понимание этих breaking changes критично для корректного обновления приложений и предотвращения неожиданных ошибок.

Изменения в жизненном цикле компонентов

С переходом с версии 3.x на 4.x были полностью переработаны хуки жизненного цикла компонентов.

onCreated → connectedCallback В Slim.js 4.x хук onCreated больше не вызывается. Вместо него используется стандартный Web Component метод connectedCallback. Это означает, что все операции инициализации должны выполняться внутри него.
```
// 3.x
class MyComponent extends Slim {
  onCreated() {
    this.message = 'Hello';
  }
}

// 4.x
class MyComponent extends Slim {
  connectedCallback() {
    super.connectedCallback();
    this.message = 'Hello';
  }
}
```
Удаление onRender Ранее onRender использовался для управления перерисовкой. В новых версиях рекомендуется использовать реактивные свойства и метод UPDATE() для явного обновления DOM.

Работа с реактивными свойствами

Реактивная система в Slim.js претерпела значительные изменения:

Свойства, объявленные через get/set, теперь требуют явного указания observedAttributes, если они должны реагировать на изменения атрибутов.
Автоматическое связывание данных с DOM стало более строгим: любые изменения свойств должны вызывать this.update() для обновления шаблона.

// 3.x
class MyComponent extends Slim {
  myProp = 'initial';
}

// 4.x
class MyComponent extends Slim {
  static get observedAttributes() { return ['my-prop']; }

  se t myProp(value) {
    this._myProp = value;
    this.update();
  }

  get myProp() { return this._myProp; }
}

Изменения в шаблонизации

Синтаксис выражений Slim.js 4.x отказался от некоторых устаревших синтаксических конструкций внутри шаблонов, таких как двоеточие для привязки событий (onclick:). Теперь используются стандартные директивы:
```
// 3.x
<button onclick:click="handleClick">Click</button>

// 4.x
<button @click="handleClick">Click</button>
```
Удаление поддержки строковых шаблонов с интерполяцией Ранее можно было вставлять переменные напрямую в строки HTML. Сейчас требуется использование функций шаблонов и реактивного связывания через this.update().

Работа с событиями

В версии 4.x были внесены корректировки в обработку событий:

dispatchEvent теперь строго проверяет тип события. Использование простых объектов вместо экземпляров Event вызывает ошибку.
Методы on и off для событий компонентов больше не поддерживаются. Необходимо использовать стандартный addEventListener и removeEventListener.

// 3.x
this.on('customEvent', this.handleEvent);

// 4.x
this.addEventListener('customEvent', this.handleEvent);

Изменения в подключении стилей

Ранее Slim.js позволял использовать встроенные стили через строковые свойства styles. В новых версиях рекомендуется применять Shadow DOM и стандартные CSS Custom Properties для изоляции стилей.

// 4.x
class MyComponent extends Slim {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; }
      </style>
      <p>Hello</p>
    `;
  }
}

Отказ от некоторых утилит

Некоторые вспомогательные методы, такие как Slim.bind, Slim.inject, и Slim.extend, были удалены. Их функциональность теперь реализуется через стандартные возможности JavaScript и Web Components.

Для связывания данных рекомендуется использовать реактивные свойства и update().
Для расширения компонентов следует применять классы и наследование.