api.md

API

Table of Contents

• API
  • Introduction
  • Structure
  • createComponent
    • Description
    • Syntax
    • Parameters
    • Return Value
    • Reference
  • $create
  • Component
  • $C
  • render
    • Description
    • Syntax
    • Parameters
    • Return Value
    • Reference
  • replaceNode
    • Description
    • Syntax
    • Parameters
    • Return Value
    • Reference
  • assetManager
    • Description
    • Structure
    • Reference
  • importComponent
    • Description
    • Syntax
    • Parameters
    • Return Value
    • importComponent Options
      • Structure
      • Properties

Introduction

Odom provides a number of utilities for creating and manipulating components. We are going to look at how each one of these utilities works.

Structure

{
  createComponent: Function,
  $create: Function,
  Component: Object,
  $C: class,
  render: Function,
  replaceNode: Function,
  assetManager: Object
}

createComponent

Description

Used to create and transform a component. The function executes processes using values of options to transform a component.

Syntax

createComponent(options);

Parameters

• options
  • Type: Object
  • Required: Yes.
  • Usage: Contains utilities for manipulating a component
  • Reference: options

Note: If you create a component directly using Component, you have to manipulate the component on your own using the API.

Return Value

A promise that resolves to an instance of Component.

Reference

createComponent.

$create

An alias for crateComponent.

Component

The component class. Refer to Component for more information.

$C

An alias for Component;

render

Description

Used for inserting components into the DOM or component.

Syntax

render([options]);

Parameters

• options
  • Type: Object
  • Required: No.
  • Usage: Contains options for rendering assets

Return Value

A promise that resolves to undefined.

Reference

render

replaceNode

Description

Used to replace a DOM node with another node.

Syntax

replaceNode(target, node[, replacer])

Parameters

• target:

  • Type: Node
  • Required: Yes.
  • Usage: Replaced by another node.

• node:

  • Type: Node
  • Required: Yes.
  • Usage: Replaces another node.

• replacer:

  • Type: Function
  • Required: No.
  • Usage: Replaces target with node.

Return Value

undefined

Reference

replaceNode

assetManager

Description

Contains utilities used to manage assets. It handles importing, fetching and prefetching of assets.

Structure

{
  fetchAsset: Function,
  importModule: Function,
  prefetch: Function,
  limitAwait: Function
}

Reference

assetManager;

importComponent

Description

Used to import components. It can be used to import either HTML or JS components.

Syntax

importComponent(options);

Parameters

• options
  • Type: Object
  • Required: Yes.
  • Usage: Contains options for importing a component.
  • Reference: importComponentOptions.

Return Value

A promise that resolves to a function.

importComponent Options

Structure

{
  file: string,
  id: string,
  src: string
}

Properties

• file:
  • Type: string
  • Required: No.
  • Usage: Contains text for an HTML file that contains an HTML component.
• id:
  • Type: string,
  • Required: No.
  • Usage: Contains the ID of the component. This is used for caching and retrieving the component. If not provided, the ID is gotten from one the meta element (if provided) of the head of the HTML file.
  • src:
    • Type: string
    • Required: No.
    • Usage: Specifies the location of the component to be imported. It is also used for caching and resolving relative URLs in HTML file components. It must either an absolute URL or root-relative URL (i.e. starts with /).