# @taikonauten/component

> Lightweight JavaScript and TypeScript component library to handle component lifecycle.

Latest version **2.3.11** (published 2022-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @taikonauten/component
pnpm add @taikonauten/component
yarn add @taikonauten/component
bun add @taikonauten/component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.11 |
| Published | 2022-11-03 |
| First published | 2021-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Tobias Schubert |
| Maintainers | sf-taiko, taiko-org, nicolaisteinel, schllng, lempa, tststststststs |

## Links

- npm: https://www.npmjs.com/package/@taikonauten/component
- Repository: https://github.com/taikonauten/component
- Issues: https://github.com/taikonauten/component/issues
- npm.io page: https://npm.io/package/@taikonauten/component

## Recent versions

- 2.3.11 (latest) — 2022-11-03
- 2.3.10 — 2022-07-14
- 2.3.9 — 2022-06-20
- 2.3.8 — 2022-06-06
- 2.3.7 — 2022-05-18
- 2.3.6 — 2022-05-04
- 2.3.5 — 2022-03-28
- 2.3.4 — 2022-02-08
- 2.3.3 — 2021-12-09
- 2.3.2 — 2021-12-09
- 2.3.1 — 2021-12-09
- 2.3.0 — 2021-12-09

## README

<p align="center">
  <img src="https://i.imgur.com/dV1aZjJ.png" title="Taikonauten">
</p>

<h1 align="center">Taikonauten component</h1>

[![Tests](https://github.com/taikonauten/component/actions/workflows/test.yml/badge.svg)](https://github.com/taikonauten/component/actions/workflows/test.yml)

Lightweight JavaScript and TypeScript component library to handle component lifecycle.

## Installation

```shell
npm install --save @taikonauten/component
```

## Setup

### Webpack

To enable or disable debugging messages the library depends on a global variable `__DEBUG__`.
For a Webpack environment use:

```js
new webpack.DefinePlugin({
  __DEBUG__: true
})
```

## Usage

### Configure namespace

You can override the default namespace (`__Taikonauten`) by using the setup function:

```js
import {setup} from '@taikonauten/component';

const configuration = {
  namespace: '__MyCustomNamespace'
};

setup(configuration);
```

### Create a component

```js
import {Component} from '@taikonauten/component';

class YourComponent extends Component {
  constructor(el: Element) {
    super(el);
  }

  /**
   * Initialize the component
   * Init is automatically called by registerComponent
   */
  init() {
    // your custom implementation to initialize the component...
  }

  /**
   * Destroy the component
   */
  destroy() {
    // your custom implementation to destroy the component...
    // Remove event handlers, free memory...
  }

  /**
   * Reload the component
   * This method only needs to be implemented if you need to change
   * the default logic which calls destroy and then init
   */
  reload() {
    // your custom implementation to reload the component...
  }
}
```

### Register a component

For simplicity you can only pass a single selector.

```js
import {registerComponent} from '@taikonauten/component';
import YourComponent from './components/your-component';

registerComponent('[data-your-component]', YourComponent);
```

`registerComponent` returns a NodeList including all affected elements.

### Get instance of a registered component

```js
import {getInstance} from '@taikonauten/component';

const element = document.querySelector('[my-component-element]');
const instance = getInstance(element, 'YourComponent');

// access components public members and methods
```

### Reload instance of a registered component

```js
import {reloadInstance} from '@taikonauten/component';

const element = document.querySelector('[my-component-element]');
reloadInstance(element, 'YourComponent');
```

### Destroy instance of a registered component

```js
import {destroyInstance} from '@taikonauten/component';

const element = document.querySelector('[my-component-element]');
destroyInstance(element, 'YourComponent');
```

## TypeScript

### Types

Create a `@types` folder in your src folder and add the following files:

#### environment.d.ts

```js
/** enables debug if true */
declare const __DEBUG__: boolean;
```

#### namespace.d.ts

```js
export declare global {
  interface Window {
    [index: string]: {
      component?: ComponentLib,
      __component: {
        classes: CachedClasses,
      },
    };
  }
  interface Element {
    [index: string]: {
      __component: {
        ref: CachedRefs,
      },
    };
  }
}
```

## Tests

### Run tests

```shell
npm run test
```

---
_Source: https://npm.io/package/@taikonauten/component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._