@johnjenkins any plans also to support mixins pattern?

@danielleroux can you give an example? 🙂

@danielleroux can you give an example? 🙂

import { Component, h, Host, Prop, State } from '@stencil/core';

type StencilElement = HTMLElement & ....;
type Constructor<T> = new (...args: any[]) => T;

declare class ValidationInterface {
  isValid: boolean;
  errorMessage: string;
  handleValidation(value: string): void;
  renderValidationFeedback(): unknown;
}

declare class LoadingInterface {
  isLoading: boolean;
  setLoading(loading: boolean): void;
  renderLoading(container: unknown): unknown;
}

const Validation = <T extends Constructor<StencilElement>>(superClass: T) => {
  class ValidationElement extends superClass {
    @Prop({ mutable: true }) isValid: boolean = true;
    @Prop({ mutable: true }) errorMessage: string = '';

    handleValidation(value: string): void {
      if (value.trim() === '') {
        this.isValid = false;
        this.errorMessage = 'This field cannot be empty.';
      } else {
        this.isValid = true;
        this.errorMessage = '';
      }
    }

    renderValidationFeedback(): unknown {
      if (!this.isValid && this.errorMessage) {
        return <div class="error-message">{this.errorMessage}</div>;
      }
      return null;
    }
  }
  return ValidationElement as Constructor<ValidationInterface> & T;
};

const Loading = <T extends Constructor<StencilElement>>(superClass: T) => {
  class LoadingElement extends superClass {
    @State() isLoading: boolean = false;

    setLoading(loading: boolean) {
      this.isLoading = loading;
    }

    renderLoading(container: unknown): unknown {
      if (this.isLoading) {
        return <div class="loading-spinner">Loading...</div>;
      }
      return container;
    }
  }
  return LoadingElement as Constructor<LoadingInterface> & T;
};

@Component({
  tag: 'example-component',
  styleUrl: 'example.css',
  shadow: true,
})
export class ExampleComponent extends Loading(Validation(HTMLElement)) {
  onValueChange(event: Event) {
    const input = event.target as HTMLInputElement;
    this.setLoading(true);
    this.handleValidation(input.value);
    this.setLoading(false);
  }

  render() {
    return (
      <Host>
        {this.renderLoading(
          <input
            type="text"
            placeholder="Type something..."
            onChange={this.onValueChange.bind(this)}
          />
        )}
        {this.renderValidationFeedback()}
      </Host>
    );
  }
}

@Component({
  tag: 'example-component',
  styleUrl: 'example.css',
  shadow: true,
})
export class MyComponent extends Loading(HTMLElement) {

  componentDidLoad() {
     setLoading(true);
     setTimeout(() => {
         {this.renderValidationFeedback()}
     }, 1000);
  }

  render() {
    return (
      <Host>
        {this.renderLoading(
          <input
            type="text"
            placeholder="Type something..."
            onChange={this.onValueChange.bind(this)}
          />
        )}
      </Host>
    );
  }
}

Source: https://lit.dev/docs/composition/mixins/

@danielleroux can you give an example? 🙂

import { Component, h, Host, Prop, State } from '@stencil/core';

type StencilElement = HTMLElement & ....;
type Constructor<T> = new (...args: any[]) => T;

declare class ValidationInterface {
  isValid: boolean;
  errorMessage: string;
  handleValidation(value: string): void;
  renderValidationFeedback(): unknown;
}

declare class LoadingInterface {
  isLoading: boolean;
  setLoading(loading: boolean): void;
  renderLoading(container: unknown): unknown;
}

const Validation = <T extends Constructor<StencilElement>>(superClass: T) => {
  class ValidationElement extends superClass {
    @Prop({ mutable: true }) isValid: boolean = true;
    @Prop({ mutable: true }) errorMessage: string = '';

    handleValidation(value: string): void {
      if (value.trim() === '') {
        this.isValid = false;
        this.errorMessage = 'This field cannot be empty.';
      } else {
        this.isValid = true;
        this.errorMessage = '';
      }
    }

    renderValidationFeedback(): unknown {
      if (!this.isValid && this.errorMessage) {
        return <div class="error-message">{this.errorMessage}</div>;
      }
      return null;
    }
  }
  return ValidationElement as Constructor<ValidationInterface> & T;
};

const Loading = <T extends Constructor<StencilElement>>(superClass: T) => {
  class LoadingElement extends superClass {
    @State() isLoading: boolean = false;

    setLoading(loading: boolean) {
      this.isLoading = loading;
    }

    renderLoading(container: unknown): unknown {
      if (this.isLoading) {
        return <div class="loading-spinner">Loading...</div>;
      }
      return container;
    }
  }
  return LoadingElement as Constructor<LoadingInterface> & T;
};

@Component({
  tag: 'example-component',
  styleUrl: 'example.css',
  shadow: true,
})
export class ExampleComponent extends Loading(Validation(HTMLElement)) {
  onValueChange(event: Event) {
    const input = event.target as HTMLInputElement;
    this.setLoading(true);
    this.handleValidation(input.value);
    this.setLoading(false);
  }

  render() {
    return (
      <Host>
        {this.renderLoading(
          <input
            type="text"
            placeholder="Type something..."
            onChange={this.onValueChange.bind(this)}
          />
        )}
        {this.renderValidationFeedback()}
      </Host>
    );
  }
}

@Component({
  tag: 'example-component',
  styleUrl: 'example.css',
  shadow: true,
})
export class MyComponent extends Loading(HTMLElement) {

  componentDidLoad() {
     setLoading(true);
     setTimeout(() => {
         {this.renderValidationFeedback()}
     }, 1000);
  }

  render() {
    return (
      <Host>
        {this.renderLoading(
          <input
            type="text"
            placeholder="Type something..."
            onChange={this.onValueChange.bind(this)}
          />
        )}
      </Host>
    );
  }
}

Source: https://lit.dev/docs/composition/mixins/

I see - thanks!
I can’t imagine this kind of pattern would be easy to get working.
The nature of static analysis means we need reliable, repeatable rules we can pick apart to get what we need. The nature of something like

const Loading = <T extends Constructor<StencilElement>>(superClass: T) => { class LoadingElement extends superClass

is just too dynamic to pick apart in a reliable way.

if we can standardise around an api to do essentially do this for devs (eg an `@Mixin(class1, class2)’ then it would be fine