Как объявить необходимое свойство в lit-element

Question

В качестве реакции мы можем использовать PropTypes чтобы пометить конкретную опору как обязательную.

      requiredFunc: PropTypes.func.isRequired,

Vue также поддерживает необходимые реквизиты:

          propC: {
      type: String,
      required: true
    },

Как это сделать в lit-element? Это так забавно, что фреймворк утверждает, что он настолько хорош, но не поддерживает такие простые вещи, как обязательные свойства.

Answer 1

Компоненты React и Vue выполняются в контролируемой среде с использованием соответствующей среды выполнения. Веб-компоненты не могут иметь такой же уровень очищенной среды. Цикл рендеринга идеально определен для React / Vue / Angular / и т. Д. Веб-компонент можно инициализировать разными способами:

      // Using custom registered tag
const myComp = document.createElement('my-custom');

// Using constructor
const myComp = new MyCustom();

// Initialization using plain html
<div>
  <my-comp>
</div>

Таким образом, жизненный цикл нелегко контролировать. Представим, что у вас есть веб-компонент с опорой - . И он инициализируется как:

      // Pass prop at the time of initialization
const myComp1 = new MyCustom({ myRequiredProp: 10 });

// Pass prop at a later time.
const myComp2 = new MyCustom();

// ... after some time
myComp2.myRequiredProp = 10;

// And how to pass props if component is being used directly in HTML.
// Is this right way? What if `my-required-prop` should be object and not a primitive like number or string?
<div>
  <my-comp my-required-prop="10" />
</div>

Кроме того, каждая структура, использующая ваш компонент, может иметь собственный способ инициализации свойств. В какой момент должна быть запущена проверка prop. Что делать, если компонент просто инициализирован и никогда не отображается. Это непростые решения для каждого сценария в случае веб-компонентов. Таким образом, лучше оставить такое беспокойство за рамками ядра. В намеренно избегает таких открытых решений.

При этом вы можете создать свою собственную систему валидации для реквизита. Вы можете управлять, когда должна происходить проверка опоры. Например, вы можете проверить опору на время.

      export class MyElement extends LitElement {

  @property({})
  count = 0;

  @property()
  name = 'World';

  validateAllProps() {
    // Your validation logic.
    // Use joi or zod to validation `this`.
    return true;
  }
  
  render() {

    // Trigger validation here
    if (!this.validateAllProps) {
      console.warn('Invalid props');
    }


    return html`
      <h1>Hello, ${this.name}!</h1>
      <button @click=${this._onClick}>
        Click Count: ${this.count}
      </button>
    `;
  }
}

Или вы также можете проверить опору с помощью настраиваемого установщика или функции конвертера.

      export class MyElement extends LitElement {

  #name = 'World';

  set name(name) {
    if (typeof name !== 'string') {
      console.warn('Invalid prop name for MyElement');
    }

    this.#name = name;
  }

  
  render() {
    return html`
      <h1>Hello, ${this.name}!</h1>
    `;
  }
}

Вы должны иметь возможность обобщить поведение проверки, используя общий базовый класс, расширяющий LitElement, или использовать настраиваемый декоратор для управления проверкой свойств.

я согласен что может показаться неудобным по сравнению с React и Vue, но в целом у него слишком много проблем, с которыми React просто не может справиться. Это легко усложняется.