Skip to content

Latest commit

 

History

History
91 lines (58 loc) · 2.67 KB

render.md

File metadata and controls

91 lines (58 loc) · 2.67 KB

render

Introduction

The render function is one of the methods of the API. It is used to render assets to the DOM. An asset can be a component, DOM node, markup or text. For a component, the Component.scope of the component will be rendered. For markup, the markup is converted to an Element. For text, the text is converted to a TextNode.

Syntax

render([options]);

Parameters

options

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

Return Value

A promise that resolves to undefined.

options

Structure

{
  assetType: string,
  fileType: string,
  target: Node | string,
  asset: Node | string | Function | Object,
  assets: Object,
  placeholder: Element,
  scope: Element,
  props: Object,
  replacer: Function
}

assetType

The type of asset to be rendered. All assets that are not DOM nodes will be converted to DOM nodes before they are rendered. It can have any of the following values:

  • "component": A Component.
  • "node": A DOM Node.
  • "markup": HTML or XML markup.
  • "text": Any text content.

fileType

The type of file containing the asset. This property is considered only when asset is a URL. It can be set to any of the following values:

  • "module": a JavaScript module (ESM).
  • "text": HTML, XML or regular text file.

target

The Node that the asset is going to replace when rendered. A CSS selector can be used. Using a CSS selector requires scope to be included in options.

asset

The asset to be rendered. It can be any of the following:

  • Component: A Component or a Function that returns a promise that resolves to a Component.
  • Node: A DOM Node.
  • Markup: HTML or XML.
  • Text: Regular text.

assets

Contains assets which can be referred to by property name using asset.

placeholder

Used as a placeholder for the Node (asset) that is supposed to be rendered. This can be used to show a temporary UI component like a loader before the Node is rendered. The placeholder gets rendered immediately. When the asset gets fetched and/or gets constructed, the asset is rendered.

scope

The Element that is used as the scope for a CSS selector (if target is a string).

props

The props to be used in case the asset is a function and takes props.

replacer

A function used to replace the target with the asset. Refer to replacer for more.