How to use the @glimmer/component.tracked function in @glimmer/component

To help you get started, we’ve selected a few @glimmer/component examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jimenglish81 / glimmer-synth / src / ui / components / synth-volume / component.ts View on Github external
import Component, { tracked } from '@glimmer/component';

export const ANGLE: number = 30;

export default class SynthVolume extends Component {
  public ticks: number[] = [...Array(11).keys()];

  @tracked('args')
  public get angle(): number {
    const max = ANGLE * (this.ticks.length - 1);
    return Math.min(this.args.volume * ANGLE, max);
  }
}
github jimenglish81 / glimmer-synth / src / ui / components / synth-key / component.ts View on Github external
public didInsertElement(): void {
    const { args: { key: { shortcut } }, keyService: { keypress } } = this;
    this.keySub = keypress
      .filter(({ key }) => key === shortcut)
      .subscribe(() => (this.isActive ? this.stop() : this.start()));
  }

  public willDestroy(): void {
    this.keySub.unsubscribe();
  }

  get audioService(): AudioService {
    return audioService;
  }

  @tracked('args')
  get keyName(): string {
    return this.args.key.name.toUpperCase();
  }

  get keyService(): KeyService {
    return keyService;
  }

  get note(): Note {
    if (!this._note) {
      const { key: { name, octave } } = this.args;
      this._note = this.audioService.createNote(name, octave);
    }
    return this._note;
  }
}

@glimmer/component

Glimmer component library

MIT
Latest version published 24 days ago

Package Health Score

89 / 100
Full package analysis