@exmg/lit-controllers v3.0.3

Exmg Lit Utils @exmg/lit-controllers

Content

• Links
• Features
• Setup
• Development
• Usage

Links

Repository

NPM Page

Features

The LitControllers package provide Lit Controllers to integrate in Lit Component to enhance them with neat features

• Interval Controller
• Mouse Controller

Setup

git clone the project, then simply run npm i

💡 Your NPM CLI must be connected to an authorized NPM account on @exmg namespace in NPM. To do so, please follow the instructions.

Development

The development process takes place on dedicated feature or fix branches. Each branch is then merged into master branch.

Please refer to the naming conventions for branches in the good practices section.

Usage

Interval Controller

The Interval Controller provides functions to execute code on a regular interval. Two modes are available; AUTO and MANUAL, the first will start once the component is initialized, the second will wait for startInterval function to be called.

At any moment, the execution can be stopped by running stopInterval function.

By default the mode is set to AUTO, you can specify the interval using the timer property on the config object.

interface IntervalControllerConfig {
  callback?: () => void;
  mode?: IntervalModeType;
  timer?: number;
}

@customElement('my-component')
export class MyComponent extends LitElement {
  intervalController = new IntervalController(this, {
    timer: 1000,
    callback: () => this.updateContent(),
  });

  @property({type: Number})
  now = new Date();

  updateContent() {
    this.now = new Date();
  }

  render() {
    return html` <div class="main">The time is ${this.now.toLocaleTimeString()}</div> `;
  }
}

Mouse Controller

The Mouse Controller returns the x and y position of the mouse once implemented. Those properties are accessibe through this.mouseController.x and this.mouseController.y

@customElement('my-component')
export class MyComponent extends LitElement {
  mouseController = new MouseController(this);

  render() {
    return html`
      <div class="main">Your mouse position : X: ${this.mouseController.pos.x} Y: ${this.mouseController.pos.y}</div>
    `;
  }
}