# Chaining API

Since the glass-easel component framework is currently only available for the Skyline rendering engine , these features are also limited by this.

# Chaining API Interface Form

The Chaining API is a new form of page and custom component definition.

For a traditional custom component definition:

Component({
  properties: {
    myProperty: String,
    myAnotherProperty: String,
  },
  data: {
    myDataField: 'someValue',
  },
})

It can be written equivalently in the following Chaining API form:

Component()
  .property('myProperty', String)
  .property('myAnotherProperty', String)
  .data(() => ({
    myDataField: 'someValue',
  }))
  .register()

The main benefit of using the Chaining API is that it has better TypeScript support, is more user-friendly for complex components, and works with init function .But it also makes the definition of simple components seem slightly cumbersome.

Therefore, each component can be defined in the traditional way or the Chaining API, and each component can be defined in a more suitable way.

# Frequently used chain call items

The following are some commonly used chain call items.

.Propertyis used to define a single property, equivalent to a single item in the traditionalpropertiesdefinition segment.For example:

Component()
  .property('myProperty', {
    type: String
  })
  .register()

.Datais used to define a table of data fields, which is equivalent to a traditionaldatadefinition segment, but it accepts a function.This function is executed once every time a component is created, and its return value is used as a data field. For example:

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .register()

.Externalclassesare used to define external style classes, equivalent to the traditionalexternalClassesdefinition segment.For example:

Component()
  .externalClasses(['my-class'])
  .register()

..Optionsare used to specify component options, equivalent to the traditionaloptionsdefinition section.(Note that if multiple calls are made, only the last call is valid.) ) For example:

Component()
  .options({
    multipleSlots: true,
  })
  .register()

..Optionsare used to specify component options, equivalent to the traditionaloptionsdefinition section.(Note that if multiple calls are made, only the last call is valid.) ) For example:

Component()
  .options({
    multipleSlots: true,
  })
  .register()

The following chained invocation items are also available, but it is usually more friendly to invoke them through the init function .

..Methodsare used to define a set of methods, equivalent to the traditionalmethodsdefinition section.For example:

Component()
  .methods({
    myMethod() { /* ... */ }
  })
  .register()

.Lifetimeand.pageLifetimeare used to define a single lifecycle method and a lifecycle method on the page where components reside, respectively,Equivalent to a single item in the traditionallifetimeandpageLifetimedefinition paragraph.For example:

Component()
  .lifetime('attached', function () { /* ... */ })
  .pageLifetime('show', function () { /* ... */ })
  .register()

..Observeris used to define a single data listener, similar to the traditionalobserversdefines a single item in a segment, but should be written as an array when listening to multiple data fields at the same time.For example:

Component()
  .data(() => ({
    a: 1,
    b: 2,
  }))
  .observer(['a', 'b'], function () { /* ... */ })
  .register()

.Relationis used to define a single item of relationship between components, equivalent to a single item in a traditional form ofrelationsdefinition section.For example:

Component()
  .relation('another-component', {
    type: 'parent',
  })
  .register()

# Using behavior in a chained invocation item

Similarly,Behavioralso supports the Chaining API.For example:

const beh = Behavior()
  .property('myProperty', String)
  .register()

This way, in a component, it can be introduced using.behavior:

Component()
  .behavior(beh)
  .register()

Note that TypeScript will report a type error when the introduction of behavior results in duplicate properties or data fields of the same name.

# Reuse chain call items

In addition tooptionsandexport,Other chain call items can be repeated many times, and the result of the call is combined.

This allows complex components to be broken down into several parts to be defined, which is helpful for very complex component definitions.

Component()
  // 定义 myDataField 字段和相关的处理逻辑
  .data(() => ({
    myDataField: 'someValue',
  }))
  .lifetime('attached', function () {
    this.setData({ myDataField: updatedValue })
  })
  // 定义 anotherField 字段和相关的处理逻辑
  .data(() => ({
    anotherField: 1,
  }))
  .lifetime('attached', function () {
    this.setData({ anotherField: updatedValue })
  })
  .register()

# Non-continuous chain calls

Chain call items can also be written separately. For example:

const componentDefinition = Component()
componentDefinition.property('myProperty', String)
componentDefinition.data(() => ({
  myDataField: 'someValue',
}))
componentDefinition.register()

However, writing this will lose some of the TypeScript type information.This approach is more appropriate when making middleware and wrappingComponent ()into other forms of invocation.This is not recommended when writing code by hand.