## SipaComponent
Easy but powerful component class implementation to create your reusable components
* [SipaComponent](#SipaComponent)
* [new SipaComponent(data, options)](#new_SipaComponent_new)
* _instance_
* [._data](#SipaComponent+_data) : Object
* [._meta](#SipaComponent+_meta) : [Meta](#SipaComponent.Meta)
* [._component_id_incrementer](#SipaComponent+_component_id_incrementer) : number
* [._component_instances](#SipaComponent+_component_instances) : function
* [._registered_components](#SipaComponent+_registered_components) : function
* [.initTemplate()](#SipaComponent+initTemplate)
* [.html(options)](#SipaComponent+html) → string
* [.node(options)](#SipaComponent+node) → Element
* [.append(query_selector)](#SipaComponent+append) → [SipaComponent](#SipaComponent)
* [.prepend(query_selector)](#SipaComponent+prepend) → [SipaComponent](#SipaComponent)
* [.replaceWith(query_selector)](#SipaComponent+replaceWith) → [SipaComponent](#SipaComponent)
* [.alias()](#SipaComponent+alias) → string
* [.cloneData()](#SipaComponent+cloneData) → Object
* [.resetToData(data, options)](#SipaComponent+resetToData) → [SipaComponent](#SipaComponent)
* [.value()](#SipaComponent+value) → \*
* [.element()](#SipaComponent+element) → Element \| undefined
* [.elements()](#SipaComponent+elements) → Array.<Element>
* [.selector()](#SipaComponent+selector) → string
* [.destroy()](#SipaComponent+destroy) → [SipaComponent](#SipaComponent)
* [.isDestroyed()](#SipaComponent+isDestroyed) → boolean
* [.remove(options)](#SipaComponent+remove) → [SipaComponent](#SipaComponent)
* [.update(data, options)](#SipaComponent+update) → [SipaComponent](#SipaComponent)
* [.render(options)](#SipaComponent+render) → [SipaComponent](#SipaComponent)
* [.addClass(class_name, options)](#SipaComponent+addClass) → [SipaComponent](#SipaComponent)
* [.hasClass(class_name)](#SipaComponent+hasClass) → boolean
* [.removeClass(class_name, options)](#SipaComponent+removeClass) → [SipaComponent](#SipaComponent)
* [.show(options)](#SipaComponent+show) → [SipaComponent](#SipaComponent)
* [.hide(options)](#SipaComponent+hide) → [SipaComponent](#SipaComponent)
* [.isHidden()](#SipaComponent+isHidden) → boolean
* [.isVisible()](#SipaComponent+isVisible) → boolean
* [.children()](#SipaComponent+children) → Object.<string, SipaComponent>
* [.childrenAliases()](#SipaComponent+childrenAliases) → Array.<string>
* [.childrenValues()](#SipaComponent+childrenValues) → [Array.<SipaComponent>](#SipaComponent)
* [.hasChildren()](#SipaComponent+hasChildren) → boolean
* [.slots()](#SipaComponent+slots) → Object.<string, Element>
* [.parent()](#SipaComponent+parent) → undefined \| [SipaComponent](#SipaComponent)
* [.hasParent()](#SipaComponent+hasParent) → boolean
* [.parentTop(options)](#SipaComponent+parentTop) → [SipaComponent](#SipaComponent)
* [.syncNestedReferences(options)](#SipaComponent+syncNestedReferences)
* [.events()](#SipaComponent+events) → SipaEvents
* _static_
* [.all(options)](#SipaComponent.all) → \* \| function
* [.bySipaId(sipa_id)](#SipaComponent.bySipaId) → undefined \| [SipaComponent](#SipaComponent)
* [.byId(id, options)](#SipaComponent.byId) → undefined \| [SipaComponent](#SipaComponent)
* [.destroyAll()](#SipaComponent.destroyAll)
* [.init(css_selector)](#SipaComponent.init) → [Array.<SipaComponent>](#SipaComponent)
* [.initElement(element, options)](#SipaComponent.initElement) → [SipaComponent](#SipaComponent)
* [.initChildComponents(component)](#SipaComponent.initChildComponents) → Element
* [.tagName()](#SipaComponent.tagName) → string
* [.registerComponent(component)](#SipaComponent.registerComponent)
* [.template()](#SipaComponent.template) → string
* [.Meta](#SipaComponent.Meta) : Object
* [.Data](#SipaComponent.Data) : Object
* [.Options](#SipaComponent.Options) : Object
### new SipaComponent(data, options)
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| data | Object.<String, \*> | | object of properties |
| options | Object | | |
| options.sipa_hidden | boolean | false | initial visibility state |
| options.sipa_cache | boolean | true | use node caching for templates |
| options.sipa_classes | string | | additional classes for component tag |
| options.sipa_alias | string | | alias to access from parent by uniq accessor name |
| options.sipa_render_period | number | 100 | max once per period (ms), a component is rerendered again on data changed. Set to 0 for unlimited renderings at the same time. |
| options.sipa_custom_attributes | Object.<string, string> | | additional custom attributes on the component tag |
| options.content | string | | HTML content inside the component element, available for slots |
**Example**
```js
const component = new SipaComponent({
name: "Foo",
age: 45,
}, {
sipa_hidden: true,
sipa_classes: "dark-style",
sipa_custom_attributes: {
id: "special-instance",
disabled: "disabled",
onclick: "alert('hello world!')",
style: "color: red;"
}
});
```
### sipaComponent.\_data : Object
The components data representation
### sipaComponent.\_meta : [Meta](#SipaComponent.Meta)
The components meta data for internal management
### sipaComponent.\_component\_id\_incrementer : number
**Kind**: instance property of [SipaComponent](#SipaComponent)
### sipaComponent.\_component\_instances : function
class
### sipaComponent.\_registered\_components : function
class
### sipaComponent.initTemplate()
Ensure that the template is initialized, so that all nested children are available.
You may for example call this method, before subscribing to children events, to ensure that the children are available.
If the component has already been appended or rendered to the DOM, the template is of course already initialized implicitly.
But in some cases you don't know if it already happened, or you know, that it couldn't have happened. E.g. in the constructor of your component.
### sipaComponent.html(options) → string
Render the HTML template with current data.
**Returns**: string - rendered HTML template() with current values of data
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | | |
| options.cache | boolean | true | use node cache |
### sipaComponent.node(options) → Element
Create a DOM node of the instances html() representation.
**Returns**: Element - element representation of html()
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | | |
| options.cache | boolean | true | use node cache |
### sipaComponent.append(query_selector) → [SipaComponent](#SipaComponent)
Create a DOM node of the instance and append it to the given css query selector.
| Param | Type |
| --- | --- |
| query_selector | string |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
```
### sipaComponent.prepend(query_selector) → [SipaComponent](#SipaComponent)
Create a DOM node of the instance and prepend it to the given css query selector.
| Param | Type |
| --- | --- |
| query_selector | string |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.prepend("#some-element-id");
```
### sipaComponent.replaceWith(query_selector) → [SipaComponent](#SipaComponent)
Create a DOM node of the instance and replace it to the given css query selector.
| Param | Type |
| --- | --- |
| query_selector | string |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.replaceWith("#some-element-id");
```
### sipaComponent.alias() → string
Get the sipa alias of the current instance.
If no alias is defined, undefined is returned.
Please note: The alias is only relevant, if the instance is a child component of another component.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.children().my_nest.alias(); // => "my_nest_alias"
my_instance.children().other.alias(); // => "other_alias"
```
### sipaComponent.cloneData() → Object
Get cloned data of the current instance.
Please note: Because the data is cloned, there are no longer any references to the original data.
This means that this data can be changed without risk. However, it also means that the instance data of
the component cannot be changed by modifying the cloned data.
So you may use this, if you want to do some independent data processing while keeping the original data state of the component instance.
If you want to modify the instance data, use the update() method!
### sipaComponent.resetToData(data, options) → [SipaComponent](#SipaComponent)
Set cloned data of the current instance.
This will reset the current instance data to the given data objects copy,
so no references to the original data object are kept.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| data | Object | | |
| options | Object | | |
| options.render | boolean | true | render component after data update |
**Example**
```js
const my_instance = new ExampleComponent({
name: "Foo",
age: 45,
});
const new_data = {
name: "Bar",
age: 30,
};
my_instance.resetToData(new_data);
new_data.name = "Togo";
console.log(my_instance.cloneData().name);
// => "Bar", because the instance data is a copy of new_data and not a reference
```
### sipaComponent.value() → \*
Value representation of the component. Should be usually overwritten by the inherited component class.
**Returns**: \* - value of the component
### sipaComponent.element() → Element \| undefined
Get the (first) element of the current instance that is in the DOM.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
const instance = my_instance.element();
// =>
```
### sipaComponent.elements() → Array.<Element>
Get all elements of the current instance that is in the DOM.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
my_instance.append("#some-other-element-id");
const instances = my_instance.elements();
// => [, ]
```
### sipaComponent.selector() → string
Get the unique css selector of the current instance(s) element(s).
**Returns**: string - css selector
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
const selector = my_instance.selector();
// => '[sipa-id="1"]'
```
### sipaComponent.destroy() → [SipaComponent](#SipaComponent)
Destroy the components DOM representation and class data representation.
This will also destroy all children components recursively.
Please note: After calling this method, the instance is no longer usable!
**Throws**:
- SipaComponent.InstanceAlreadyDestroyedError if instance is already destroyed
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
my_instance.destroy();
my_instance.isDestroyed(); // => true
my_instance.update({name: "Foo"}); // => throws SipaComponent.InstanceAlreadyDestroyedError
```
### sipaComponent.isDestroyed() → boolean
Check if the current instance is destroyed.
**Returns**: boolean - true if destroyed
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
my_instance.isDestroyed(); // => false
my_instance.destroy();
my_instance.isDestroyed(); // => true
```
### sipaComponent.remove(options) → [SipaComponent](#SipaComponent)
Remove the DOM representation(s), but keep the class data representation (instance).
Please note: After calling this method, the instance is still usable!
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | | |
| options.console_warn_if_not_found | boolean | true | warning on console if no element is found |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.append("#some-element-id");
my_instance.remove();
my_instance.isDestroyed(); // => false
my_instance.update({name: "Foo"}); // => works fine
my_instance.append("#some-element-id"); // => works fine
```
### sipaComponent.update(data, options) → [SipaComponent](#SipaComponent)
Update the data of the instance and its children by alias if available. Then rerender its view.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| data | [Data](#SipaComponent.Data) | | |
| options | Object | | |
| options.render | boolean | true | rerender DOM elements after data update |
| options.reset | boolean | false | if false, merge given data with existing, otherwise reset component data to given data |
| options.cache | boolean | true | use node cache or not on component and all(!) children and their children |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.update({
enabled: true,
my_nest: {
name: "bar",
},
other: {
age: 111,
}
});
This will update the data of the current instance and also the nested children by their alias.
The update is merged with the existing data, so only the given properties are updated.
If you want to reset the data instead of merging, use the reset option.
```
### sipaComponent.render(options) → [SipaComponent](#SipaComponent)
Render component again.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | | |
| options.cache | boolean | true | use node cache or not on component and all(!) children and their children |
| options.render_period | boolean | | overwrite default render period (_meta.sipa._render_period) only once |
### sipaComponent.addClass(class_name, options) → [SipaComponent](#SipaComponent)
Add given class to the current instance tag element and store its state.
Using this method, the state is also stored in the instance automatically, so that it is persistent on rerendering.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| class_name | string | | one or more classes separated by space |
| options | Object | | |
| options.update | boolean | true | rerender current instance DOM with new class |
**Example**
```js
const my_instance = new ExampleComponent(
{
name: "Foo",
age: 45,
},
{
sipa_classes: "dark-style",
}
);
my_instance.addClass("active highlight");
my_instance.element().className;
// => "dark-style active highlight"
```
### sipaComponent.hasClass(class_name) → boolean
Check if current component instance has given class(es) in its class state.
**Returns**: boolean - true if class is set
| Param | Description |
| --- | --- |
| class_name | one or more classes that must be included |
**Example**
```js
Example
const my_instance = new ExampleComponent();
my_instance.hasClass("test");
// => true
my_instance.hasClass("bingo test");
// => true
my_instance.hasClass("test togo");
// => false
```
### sipaComponent.removeClass(class_name, options) → [SipaComponent](#SipaComponent)
Remove given class from the current instance tag element and its state.
Using this method, the state is also stored in the instance automatically, so that it is persistent on rerendering.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| class_name | string | | one or more classes separated by space |
| options | Object | | |
| options.update | boolean | true | rerender current instance DOM without removed class |
**Example**
```js
const my_instance = new ExampleComponent(
{
name: "Foo",
age: 45,
},
{
sipa_classes: "dark-style active highlight",
}
);
my_instance.element().className;
// => "dark-style active highlight"
my_instance.removeClass("active highlight");
my_instance.element().className;
// => "dark-style"
```
### sipaComponent.show(options) → [SipaComponent](#SipaComponent)
Show current instance.
Makes the component visible again, if it was hidden before.
This is an integrated feature, so that the hidden state is persistent on rerendering.
| Param | Type | Default |
| --- | --- | --- |
| options | Object | |
| options.update | boolean | true |
**Example**
```js
const my_instance = new ExampleComponent(
{
name: "Foo",
age: 45,
},
{
sipa_hidden: true,
}
);
my_instance.isHidden(); // => true
my_instance.show();
my_instance.isVisible(); // => true
my_instance.element().style.display; // => "block" (or original display style of template)
```
### sipaComponent.hide(options) → [SipaComponent](#SipaComponent)
Hide current instance.
Hides the component, but keeps it in the DOM.
This is an integrated feature, so that the hidden state is persistent on rerendering.
| Param | Type | Default |
| --- | --- | --- |
| options | Object | |
| options.update | boolean | true |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.isVisible(); // => true
my_instance.hide();
my_instance.isHidden(); // => true
my_instance.element().style.display; // => "none"
```
### sipaComponent.isHidden() → boolean
Check if current instance is hidden.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.isHidden(); // => false
my_instance.hide();
my_instance.isHidden(); // => true
```
### sipaComponent.isVisible() → boolean
Check if current instance is visible.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.isVisible(); // => true
my_instance.hide();
my_instance.isVisible(); // => false
```
### sipaComponent.children() → Object.<string, SipaComponent>
Return children components of the current component with its sipa-aliases as their keys.
To work, the instance must already have been rendered at least once. To ensure explicitly, call initTemplate() before, e.g. when accessing children() in the instances constructor.
**Returns**: Object.<string, SipaComponent> - Object
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.children();
// => { my_nest: NestedComponent, other: OtherNestedComponent }
```
### sipaComponent.childrenAliases() → Array.<string>
Return all keys for children aliases.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.childrenAliases();
// => ["my_nest", "other"]
```
### sipaComponent.childrenValues() → [Array.<SipaComponent>](#SipaComponent)
Return all values of children.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.childrenValues();
// => [NestedComponent, OtherNestedComponent]
```
### sipaComponent.hasChildren() → boolean
Check if the component has any children or not.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.hasChildren(); // => true
```
**Example**
```js
const another_instance = new AnotherComponent();
another_instance.hasChildren(); // => false
```
### sipaComponent.slots() → Object.<string, Element>
Return all instantiated slot elements of the current instance by name.
To work, the instance must already have been rendered at least once. To ensure explicitly, call initTemplate() before, e.g. when accessing slots() in the instances' constructor.
**Example**
```js
Header Content
Footer Content
Inside Nest Content
Inside Nest Content 2
No Slot Content
No Slot Content
Footer Content 2
const my_instance = new ExampleComponent();
my_instance.slots();
// => { header: Header Content
, footer: Footer Content 2
}
my_instance.children().my_nest.slots();
// => { inside_nest: Inside Nest Content
, inside_nest_2: Inside Nest Content 2
}
```
### sipaComponent.parent() → undefined \| [SipaComponent](#SipaComponent)
Get parent component, if current component is a child component.
If no parent exists, undefined is returned.
**Returns**: undefined \| [SipaComponent](#SipaComponent) - component
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.children().my_nest.children().other.parent();
// => NestedComponent
my_instance.children().my_nest.parent();
// => ExampleComponent
my_instance.parent();
// => undefined
my_instance.children().my_nest.children().other.parent().parent();
// => ExampleComponent
```
### sipaComponent.hasParent() → boolean
Check if the component has a parent or not.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.hasParent(); // => false
my_instance.children().my_nest.hasParent(); // => true
```
### sipaComponent.parentTop(options) → [SipaComponent](#SipaComponent)
Get the top level parent component, that has no parent component.
Will return the current component, if no parent exists.
**Returns**: [SipaComponent](#SipaComponent) - component
| Param | Type | Description |
| --- | --- | --- |
| options | Object | |
| options.target_component | [SipaComponent](#SipaComponent) \| null | if given, will return the first parent that matches the given component instance, otherwise the top parent without parent is returned |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.children().my_nest.children().other.parentTop();
// => ExampleComponent
my_instance.children().my_nest.parentTop();
// => ExampleComponent
my_instance.parentTop();
// => ExampleComponent
```
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.children().my_nest.children().other.children().micro.parentTop({ target_component: NestedComponent });
// => NestedComponent
my_instance.children().my_nest.children().other.children().micro.parentTop({ target_component: NotIncludedComponent });
// => ExampleComponent, because NotIncludedComponent is not in the parent chain
```
### sipaComponent.syncNestedReferences(options)
Refresh all data references from top parent to all nested children and children below.
This is used after the first rendering of the component for example.
After that, the update() will manage refreshing to direct children and parent components.
You may want to call this method, if you have a special case and modify the _data attribute manually.
| Param | Type | Description |
| --- | --- | --- |
| options | Object | |
| options.update_data | Object | update data if given |
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.update({ some_data: 123 });
my_instance.children().my_nest.update({ other_data: 456 });
// now my_instance._data is { some_data: 123, my_nest: { other_data: 456 } }
// but if you modify the data manually, e.g.:
my_instance._data = { some_data: 789, my_nest: { other_data: 101 } };
// then the nested component data is not updated automatically
my_instance.children().my_nest.cloneData();
// => { other_data: 456 }
// so you need to call syncNestedReferences() to refresh all references
my_instance.syncNestedReferences();
// now the nested component data is updated
my_instance.children().my_nest.cloneData();
// => { other_data: 101 }
```
### sipaComponent.events() → SipaEvents
Events of the component to subscribe, unsubscribe or trigger.
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.events().on("before_update", (component, data, options) => {
console.log("Component is about to be updated:", component, data, options);
});
my_instance.update({ name: "Foo" });
// => Console: Component is about to be updated: ExampleComponent { ... } { name: "Foo" } { render: true, reset: false, cache: true }
my_instance.events().off("before_update");
```
**Example**
```js
const my_instance = new ExampleComponent();
my_instance.events().on("after_destroy", (component) => {
console.log("Component was destroyed:", component);
});
my_instance.destroy();
// => Console: Component was destroyed: ExampleComponent { ... }
```
### SipaComponent.all(options) → \* \| function
Return all instances of the component.
To get all instances of all components, call SipaComponent.all().
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | | |
| options.include_children | boolean | false | include embedded children components |
**Example**
```js
const instance1 = new ExampleComponent();
const instance2 = new ExampleComponent();
const instance3 = new AnotherComponent();
ExampleComponent.all();
// => [ExampleComponent, ExampleComponent]
```
### SipaComponent.bySipaId(sipa_id) → undefined \| [SipaComponent](#SipaComponent)
Get instance of current component class by sipa-id.
| Param | Type |
| --- | --- |
| sipa_id | number |
**Example**
```js
Initialized component
SipaComponent.bySipaId(1);
// => ExampleComponent
```
### SipaComponent.byId(id, options) → undefined \| [SipaComponent](#SipaComponent)
Get instance of current component class by id attribute.
| Param | Type | Default |
| --- | --- | --- |
| id | number | |
| options | Object | |
| options.console_error_if_not_found | boolean | true |
**Example**
```js
Component declaration in body
SipaComponent.byId("my-unique-id");
// => ExampleComponent
```
### SipaComponent.destroyAll()
Destroy all instances of current component class.
To destroy all instances of all components, call SipaComponent.destroyAll().
**Example**
```js
const instance1 = new ExampleComponent();
const instance2 = new ExampleComponent();
const instance3 = new AnotherComponent();
ExampleComponent.destroyAll();
// => destroys instance1 and instance2
```
### SipaComponent.init(css_selector) → [Array.<SipaComponent>](#SipaComponent)
Initialize all uninitialized components of the current component class in the DOM inside
the given css selector automatically.
If called by the base component SipaComponent, all uninitialized components of all registered component classes are initialized.
| Param | Type | Default |
| --- | --- | --- |
| css_selector | string | "'body'" |
**Example**
```js
// Initialize all uninitialized components of all registered component classes in the whole body
SipaComponent.init();
// Initialize all uninitialized components of all registered component classes inside the element with id "main-content"
SipaComponent.init("#main-content");
// Initialize all uninitialized components of the ExampleComponent class in the whole body
ExampleComponent.init();
// Initialize all uninitialized components of the ExampleComponent class inside the element with id "main-content"
ExampleComponent.init("#main-content");
```
**Example**
```js
// HTML body
Initialized component
Uninitialized component
Uninitialized component in main content
Uninitialized another component in main content
// JavaScript
SipaComponent.init();
// => Initializes the three uninitialized components in the body
SipaComponent.all();
// => [ExampleComponent, ExampleComponent, ExampleComponent, AnotherComponent]
```
### SipaComponent.initElement(element, options) → [SipaComponent](#SipaComponent)
Init given element as the current component class.
If called by the base component SipaComponent, the element is initialized as the according registered component class by its tag name.
**Returns**: [SipaComponent](#SipaComponent) - component instance
| Param | Type | Description |
| --- | --- | --- |
| element | Element | |
| options | Object | |
| options.sipa_component | [SipaComponent](#SipaComponent) | if given, reinit given component instance |
| options.parent_data | Object | data of parent element, if this is a child |
**Example**
```js
// HTML body
Uninitialized component
Uninitialized another component
// JavaScript
const el = document.querySelector("example-component");
SipaComponent.initElement(el);
// => Initializes the uninitialized example-component as ExampleComponent
SipaComponent.all();
// => [ExampleComponent]
const el2 = document.querySelector("another-component");
AnotherComponent.initElement(el2);
// => Initializes the uninitialized another-component as AnotherComponent
SipaComponent.all();
// => [ExampleComponent, AnotherComponent]
```
### SipaComponent.initChildComponents(component) → Element
Init child components of the given component if available.
**Throws**:
- Error when no registered components are found inside the component
| Param | Type |
| --- | --- |
| component | [SipaComponent](#SipaComponent) |
**Example**
```js
const my_instance = new ExampleComponent();
SipaComponent.initChildComponents(my_instance);
// => initializes nested-component and another-nested-component as child components of my_instance
```
### SipaComponent.tagName() → string
Get tag name of current component class.
**Example**
```js
blub
const my_instance = new ExampleComponent();
my_instance.tagName();
// => "example-component"
```
### SipaComponent.registerComponent(component)
Register given component class.
You need to register every new component that extends by SipaComponent to make it available.
Otherwise, it is not known to the base class and cannot be initialized automatically.
| Param | Type |
| --- | --- |
| component | [SipaComponent](#SipaComponent) |
**Example**
```js
class MyComponent extends SipaComponent {
...
}
SipaComponent.registerComponent(MyComponent);
```
### SipaComponent.template() → string
Returns the template. Can be with embedded with EJS.
**Example**
```js
class MyComponent extends SipaComponent {
...
}
MyComponent.template = () => {
return `
Hello <%= name %>!
<% if(age > 77) { %>
You are very old!
<% } %>
`;
}
```
### SipaComponent.Meta : Object
**Kind**: static typedef of [SipaComponent](#SipaComponent)
**Properties**
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| sipa | Object | | all sipa meta info |
| sipa.id | number | | auto increment |
| sipa.classes | string | | internal state representation for classes managed by components methods addClass() and removeClass() |
| sipa.hidden | boolean | false | state representation of hide() and show() methods |
| sipa.cache | boolean | true | use node caching for templates |
| sipa.alias | string | | alias to access children by uniq accessor name |
| sipa.children | [Array.<SipaComponent>](#SipaComponent) | | array of children sipa components |
| sipa.parent | [SipaComponent](#SipaComponent) | | parent sipa component when using nested components |
| sipa.list | string | | parent sipa components _data reference, if the component has been initialized by using sipa-list |
| sipa.original_display | string | | store original display style when using hide() to restore on show() |
| sipa.changed_visibility | boolean | | info if visibility has been changed at least once |
| sipa.custom_attributes | Object.<string, string> | | state representation of declarative custom attributes defined with attr- prefix |
| sipa.body_nodes | NodeList | | body as childNodes of original declarative element |
| sipa._destroyed | boolean | false | Flag to determine if object has been destroyed |
| sipa._data_changed | boolean | true | Flag for caching rendered nodes |
| sipa._cached_node | Element | boolean | true | Sync nested references automatically after every render update. May be disabled on performance cases. Then overwrite to 'false' at the inherited classes constructor after calling super(). |
| sipa._render_period | number | 100 | Only one rendering per period in milliseconds for performance reasons. Disabled when option is 0. Caution: when rendering several times in this period, only the first and last rendering will happen at 0ms and 100ms |
### SipaComponent.Data : Object
**Kind**: static typedef of [SipaComponent](#SipaComponent)
### SipaComponent.Options : Object
**Kind**: static typedef of [SipaComponent](#SipaComponent)
**Properties**
| Name | Type | Default |
| --- | --- | --- |
| update_view_only_when_visible | boolean | false |
## instance(element, options) → [SipaComponent](#SipaComponent)
Get instance of current component. For usage in component templates
Handy shortcut alias for SipaComponent.instanceOfElement().
| Param | Type | Default |
| --- | --- | --- |
| element | Element | |
| options | Object | |
| options.console_error_if_not_found | boolean | true |
**Example**
```js
class MyComponent extends SipaComponent {
dance() {
}
}
class SuperComponent extends SipaComponent {
superMan() {
}
}
MyComponent.template = () => {
return `
Hello <%= name %>!
`;
}
```