middleware.md

Middleware

Table of Contents

• Middleware
  • Introduction
  • Structure
  • markup
    • Description
    • Structure
    • parser
      • Syntax
      • Parameters
      • Return Value
    • converter
      • Description
      • Syntax
      • Parameters
      • Return Value
    • custom
  • styles
    • Structure
    • preprocessor
      • Syntax
      • Parameters
      • Return Value
    • postprocessor
      • Syntax
      • Parameters
      • Return Value
    • custom

Introduction

middleware are either user defined or third-party utilities used to supplement or override the Component API. The middleware are used for manipulating markup and styles of a component.

Structure

{
  markup: Object,
  styles: Object
}

markup

Description

Used to manipulate markup.

Structure

{
  parser: Function,
  converter: Function,
  custom: Array
}

parser

Used to parse markup. This will override the default markup parser for a component.

Syntax

parser(markup)

Parameters

• markup
  • Type: string
  • Required: Yes
  • Usage: Contains markup to be parsed

Return Value

A promise that resolves to a Node.

converter

Description

Used to convert an XML based document to HTML document. This is used when the markup used is not HTML. This overrides the default converter for a component.

Syntax

converter(element)

Parameters

• element
  • Type: Element
  • Required: Yes
  • Usage: Converted to HTMLElement

Return Value

A promise that resolves to an HTMLElement.

custom

Array of functions used to process markup. The functions are invoked in the order they are in the array. The result of one function is passed to the next function. After processing, the end result is assigned to Component.scope. This overrides all the component utilities used to process markup.

styles

Used to manipulate styles.

Structure

{
  preprocessor: Function,
  postprocessor: Function,
  custom: Array,
  process: Boolean,
  scope: Boolean
}

preprocessor

Used to preprocess styles. This can be used for languages that can be converted to CSS.

Syntax

preprocessor(styles)

Parameters

• styles
  • Type: string
  • Required: Yes
  • Usage: Converted to CSS

Return Value

A promise that resolves to a string containg CSS.

postprocessor

Used to post-process CSS. This can be used to add vendor prefixes and the like.

Syntax

postprocessor(css)

Parameters

• css
  • Type: String
  • Required: Yes
  • Usage: Converted to post-precessed CSS

Return Value

A promise that resolves to a string containing post-processed CSS.

custom

Array of functions used to process styles. The functions are invoked in the order they are put in the array. The result of one function is passed to the next function. The end result is used to style the component. These utilities override all the default styling utilities of a component.

process

Specifies whether the styles should be processed or not. You can set this to false if the styles are already processed. The default value is true.

scope

Specifies whether or not the styles should be scoped. The default value is true.