Taikonauten component


Lightweight JavaScript and TypeScript component library to handle component lifecycle.

Installation

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

Setup

$3

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

$3

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

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

const configuration = {
namespace: '__MyCustomNamespace'
};

setup(configuration);
`

$3

`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...
}
}
`

$3

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.

$3

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

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

// access components public members and methods
`

$3

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

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

$3

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

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

TypeScript

$3

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

$3

`shell
npm run test
``