open-index/open-npm huggingface dataset:
npm package: @simulacron/decorators
Description: Some useful decorators.
Author: Andy Chentsov
Latest version: 1.0.2


# Decorators

A set of handy JavaScript decorators.


## autobind

Binds a class context to a method.

Allows you to use class methods as an event handler, without the additional `bind`:
```js
connectedCallback() {
  // ...
  this.addEventListener('click', this.toggle);
}

disconnectedCallback() {
  this.removeEventListener('click', this.toggle);
  // ...
}

@autobind()
toggle(event) {

}
```

Such methods can be used in `removeEventListener` since they are pointers to the same instance used in `addEventListener`.


## debounce

Debounce the execution of the method.

You can specify the value in milliseconds as a number or in string format with the suffix `'<delay>ms'`, supported suffixes: ms - milliseconds, s - seconds, m - minutes.

This can be handy for events such as key presses or "input" in input fields.

```js
@debounce('300ms')
inputChanged(event) {
  // ...
}
```


## throttle

Throttle the execution of the method.

You can specify the value in milliseconds as a number or in string format with the suffix `'<delay>ms'`, supported suffixes: ms - milliseconds, s - seconds, m - minutes.

This can be handy for "resize" or "scroll" events.

```js
@throttle('500ms')
resizeChanged(event) {
  // ...
}
```
npm package: @simulacron/events
Description: Helper functions for LitWidget events.
Author: Andy Chentsov
Latest version: 1.0.0


# LitWidget conditional events helpers

Helper functions for LitWidget [conditional events](https://github.com/andyduke/lit-widget/blob/master/packages/lit-widget/DOCUMENTATION.md#conditional-events).

* `keydown()` - **keydown** event helper;
* `keyup()` - **keyup** event helper;
* `keypress()` - **keypress** event helper.

You can specify one or more keyboard shortcuts:
```js
class SampleWidget extends LitWidget {

  @onEvent('search-field', keydown('esc'))
  cancel(event) {
    ...
  }

  // or

  @onEvent('search-field', keydown(['esc', 'ctrl+k']))
  cancel(event) {
    ...
  }

}
```

For the keyboard shortcut format, see
[KeyboardShortcuts](https://github.com/andyduke/lit-widget/tree/master/packages/keyboard).
npm package: @simulacron/keyboard
Description: Helper classes and functions for working with the keyboard
Author: Andy Chentsov
Latest version: 1.0.1


# Keyboard helpers

Helper classes and functions for working with the keyboard.


## KeyboardShortcut

Class for handling keyboard shortcut. Typically used in browser keyboard event handlers.

You must instantiate the class with the keyboard shortcut,
and then use the `isMatchEvent()` method to test for the keyboard event:
```js
const shortcut = new KeyboardShortcut('mod+s');

element.addEventListener('keydown', function(event) {
  if (shortcut.isMatchEvent(event)) {
    // Do action...
  }
});
```

### Keyboard shortcuts format

Keyboard shortcuts are specified using a simple format such as `'modifier+key'`,
`'modifier+modifier+key'`, or simply `'key'`.

`Modifiers` can be:
- `mod` - cross-platform modifier, Ctrl on Windows and Cmd on Mac;
- `ctrl`, `ctl` - Control on Windows;
- `alt`, `opt`, `option` - Alt;
- `shift` - Shift;
- `meta` - cross-platform modifier, Win on Windows, Cmd on Mac;
- `win`, `windows` - Win on Windows;
- `cmd`, `command` - Cmd on Mac.

`Key` is any value from the predefined `KeyboardEvent.key` keys, specified in any case.

The class provides some aliases for the keys from the `KeyboardEvent`, such as:
- `esc` - 'Escape' key;
- `return` - 'Enter' key;
- `space`, `spacebar` - 'spacebar' key;
- `add` - '+' key;
- `break` - 'Pause' key;
- `ins` - 'Insert' key;
- `del` - 'Delete' key;
- `up` - 'ArrowUp' key;
- `down` - 'ArrowDown' key;
- `left` - 'ArrowLeft' key;
- `right` - 'ArrowRight' key.

> This class is inspired by the `is-hotkey` package from Ian Storm Taylor <https://github.com/ianstormtaylor>


## KeyboardShortcuts

A class for handling *multiple* keyboard shortcuts.

It is used when it is necessary to use one handler
for several keyboard shortcuts.

```js
const shortcuts = new KeyboardShortcuts([
  'mod+s',
  'ctrl+k',
]);

element.addEventListener('keydown', function(event) {
  if (shortcuts.isMatchEvent(event)) {
    // Do action...
  }
});
```

See [KeyboardShortcut](#keyboardshortcut) for details.
npm package: @simulacron/lit-widget
Description: Declarative binding to child elements for LitElement.
Author: Andy Chentsov
Latest version: 1.0.0-beta.3


# LitWidget

[ ENGLISH | [RUSSIAN](./README.ru.md) ]

The **LitWidget** widget extends [**LitElement**](https://lit.dev/docs/components/overview/) and gives you the ability to declaratively bind component class properties to the component's html child elements, as well as add event handlers to them. This binding greatly simplifies working with the **Light DOM**. A similar pattern is implemented in [Github/Catalyst](https://catalyst.rocks/) and [Stimulus.js](https://stimulus.hotwired.dev/).

<table>
<tr>
  <th>JavaScript</th>
  <th>HTML</th>
</tr>
<tr>
  <td valign="top">

```js
import { LitWidget, target, onEvent } from '@simulacron/lit-widget';

@customElement('w-hello')
class HelloWidget extends LitWidget {

  @target input

  @target output

  @onEvent('button', 'click')
  greet() {
    this.output.textContent = `Hello, ${this.input.value}!`;
  }

}
```
  </td>
  <td valign="top">

```html
<w-hello>
  <input data-target="w-hello.input" type="text" />

  <button data-target="w-hello.button">
    Greet
  </button>

  <span data-target="w-hello.output"></span>
</w-hello>
```
  </td>
</tr>
</table>

# Documentation

See [DOCUMENTATION.md](DOCUMENTATION.md)

# License

This project is licensed under the terms of the BSD 3-Clause license.
npm package: @simulacron/tools
Description: Helper functions.
Author: Andy Chentsov
Latest version: 1.0.2


# A set of helper functions.

## debounce & throttle

### debounce

Debounce the execution of the function.

You can specify the value in milliseconds as a number or in string format with the suffix `'<delay>ms'`, supported suffixes: ms - milliseconds, s - seconds, m - minutes.

This can be handy for events such as key presses or "input" in input fields.

```js
debounce(
  inputChanged(event) {
  // ...
  },
  '300ms'
);
```

### throttle

Throttle the execution of the function.

You can specify the value in milliseconds as a number or in string format with the suffix `'<delay>ms'`, supported suffixes: ms - milliseconds, s - seconds, m - minutes.

This can be handy for "resize" or "scroll" events.

```js
throttle(
  resizeChanged(event) {
    // ...
  },
  '500ms'
);
```

### duration

Duration converter from human-readable form to milliseconds.

Converts a string like `'<delay>ms'` to milliseconds.
Supported suffixes: ms - milliseconds, s - seconds, m - minutes.

If a numeric value is passed, it is returned unchanged.

```js
const delayInMilliseconds = duration('500ms');
```