Class: Component

Component

Class representing a component, which is an object whose responsibilities are:
  • Render the HTML results of a provided renderer function inside a specified element of the showing document, making as less DOM changes as possible.
  • Manage nested child components. Child components are components which render in an element inside this component. When this Component re-renders, it restores its child's subtrees on their places. Child Components can be added manually (See Component#addChildComponent) or created dynamically by this Component via "fronty-component" attribute or via custom tag elements (See Component#createChildComponent and Component#childTags).
  • Manage event listeners, by placing a global listener at the root of this component's root element, which redirects events on inner targets to the proper listener.

Components render when you call start(), and update each time you call the render() function.

Constructor

new Component(renderer, htmlNodeId, childTagsopt)

Creates a new Component.
Parameters:
Name Type Attributes Description
renderer function A non-parameter function that returns HTML.
htmlNodeId String The id of the HTML element where this Component should render to.
childTags Array.<String> <optional>
 An optional Array of strings of custom-tags for dynamically created child Components (See Component#createChildComponent).
Source:
Examples
<!-- html page -->
<body>
 <div id="mycomponent"></div>
</body>
//Javascript
var counter = 1;
var component = new Component(
 () => '<div>Counter: <span>'+counter+'</span></div>', // renderer function
 'mycomponent' // HTML element id
 );
component.start(); // first render
setInterval(() => {
   counter++;
   component.render(); // component re-render
}, 1000);

Members

childComponentIds :Object.<string, Component>

The child components, arranged by their HTML element id.
Type:
Source:

childComponents :Array.<Component>

The array of child components.
Type:
Source:

childTags :Array.<String>

The optional name of custom element tags where child Components will be created dynamically.
During render, if in the HTML provided by the renderer function one of these tags is found, the createChildComponent() function is called.
Type:
  • Array.<String>
Default Value:
  • empty array
Source:

eventListeners :Object.<string, {callback: function(), eventType: String}>

The event listeners that this Component is managing. See addEventListener().
Type:
  • Object.<string, {callback: function(), eventType: String}>
Source:

htmlNodeId :String

The HTML element id where it renders into.
Type:
  • String
Default Value:
  • null
Source:

stopped :Boolean

Whether this Component is stopped.
Stopped Components do not render.
Type:
  • Boolean
Default Value:
  • true
Source:

Methods

addChildComponent(component)

Adds a child Component to this Component.

The HTML element where the child Component will render will not be re-rendered when this Component (the parent) is re-rendered.

The child component will be started (and thus immediately rendered) or stopped if this Component is currently started or stopped, respectively.

Parameters:
Name Type Description
component Component The child Component.
Source:

addEventListener(eventType, nodesQuery, callback)

Adds an event listener to HTML element(s) inside this Component.
Listeners added to elements controlled by this Component should be added via this method, not directly to the HTML elements, because they can be removed during re-render. Listeners added with this method are always restored to the elements matching the selector query after rendering.
Parameters:
Name Type Description
eventType String The event type to be added to the elements.
nodesQuery String A HTML selector query to find elements to attach the listener to.
callback function The callback function to dispatch the event.
Source:

afterRender()

Hook function called by this Component after rendering. As a hook, it is intended to be overriden by subclasses.
Source:

beforeRender()

Hook function called by this Component before rendering. As a hook, it is intended to be overriden by subclasses.
Source:

createChildComponent(className, element, id) → {Component}

Creates a new child Component for a specified class name to be placed in a given HTML element. This method is intended to be overrided by subclasses.

Parent components define where to create new children via their rendered HTML in two ways:

  • Via fronty-component attribute. An element like <div fronty-component="ChildComponent"></div> indicates that ChildComponent instances should be created and rendered on that element.
  • Via custom HTML tag. These tags must be indicated in the constructor of the component. For example: new Component(renderer, 'parentId', ['ChildComponent']), indicates that ChildComponent should be created and rendered into when elements with this tag name are found. Note: Remember that custom HTML tags do not work at any place. For example, as child of a <table> element.

Everytime a new element indicating that a child should be created, this method is called to create the real instance.

Note: By default, this function uses eval(''+className) to create the instance. If you are packing your application and this library in different modules, eval may fail in finding the className. You must override the method to create the child.

Parameters:
Name Type Description
className String The class name found in the HTML element
element Node The HTML element where the new child will be placed
id String The HTML id found in the tag.
Source:
See:
Returns:
The new created child component.
Type
Component

getChildComponent(id) → {Component}

Gets a child Component given its HTML element id.
Parameters:
Name Type Description
id String The HTML element id.
Source:
Returns:
The child Component.
Type
Component

getChildComponents() → {Array.<Component>}

Gets the child Components of this Component.
Source:
Returns:
The child Components.
Type
Array.<Component>

getChildComponentsById() → {Array.<String, Component>}

Gets the child Components arranged by id.
Source:
Returns:
The child Components arranged by id.
Type
Array.<String, Component>

getHtmlNodeId() → {String}

Gets the HTML element's id where this Component should render.

This element will be replaced with the contents of this component renderer function.

Source:
Returns:
The HTML node id where this Component is rendered.
Type
String

onStart()

Hook function called by this Component just after start. As a hook, it is intended to be overriden by subclasses.
Source:

onStop()

Hook function called by this Component just after stop. As a hook, it is intended to be overriden by subclasses.
Source:

removeChildComponent(component)

Removes a child Component from this Component.

After the child removal, this component will re-render.

Parameters:
Name Type Description
component Component The child Component.
Source:

render()

Render this Component, which consists in:
  1. Call the renderer function.
  2. Calculate the differences between the previous "virtual" DOM of this Component and the new "virtual" DOM provided by the renderer function, skipping those elements where child nodes are rendering.
  3. Patch the previous "virtual" DOM with the previously computed differences, and save it as the next previous "virtual" DOM.
  4. Patch the real DOM with the previously computed differences.
  5. Restore the child Components in their new places if they where moved to another part in the DOM.
  6. Create child nodes if new elements with tag name in Component#childTags or with fronty-component attribute are found in the HTML.
Source:

setHtmlNodeId(htmlNodeId)

Sets the HTML element id where this Component should render in the next rendering.

The element will be replaced with the contents of this component renderer function.

Parameters:
Name Type Description
htmlNodeId String The HTML node id where this Component will be rendered.
Source:

start()

Starts this Component and all of its children.
A Component need to be started in order to render. If this Component was stopped, it will render. Once this Component has been started and rendered, the onStart() hook is called.
Source:

stop()

Stops this Component and all of its children.
Stopped Components do not render. Once this Component
Source:

updateChildComponent()

Called when the parent ir rendered. This method does nothing. It is intended to be overriden
Source:

Type Definitions

renderer() → {String}

The renderer function.
Default Value:
  • null
Source:
Returns:
HTML content. It must return a single root element.
Type
String