# Chaining API

Due to the current glass-easel The component framework is available only for Skyline Rendering engineThese features are also limited.

# Chaining API Interface Form

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 as follows Chaining API Form:

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

use Chaining API The main benefit is that it has better TypeScript Support, and is more friendly to complex components, but also works with init function To use. But it also makes the definition of simple components look a little cumbersome.

Thus, each component can be defined in a traditional way or Chaining API Each component can be defined in a way that is more appropriate for it.

# Commonly Used Chain Call Items

Here are some common chained invocation items.

.property Used to define a single property, equivalent to the traditional form of properties Define a single item in the paragraph. For example:

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

.data Used to define a data field table, which acts as a traditional form of Data Defines the segment, but it accepts a function. This function is executed once each time the component is created, and its return value is used as a data field. For example:

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

.externalClasses Used to define an external style class, equivalent to the traditional form of externalClasses Definition paragraph. For example:

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

.options Used to specify component options, equivalent to the traditional form of options Definition paragraph. (Note that if called multiple times, only the last call is valid.) ) For example:

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

.options Used to specify component options, equivalent to the traditional form of options Definition paragraph. (Note that if called multiple times, only the last call is valid.) ) For example:

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

The following chained invocation items are also available, but by init function Calling is usually more friendly.

.methods Used to define a set of methods that are equivalent to the traditional form of methods Definition paragraph. For example:

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

.lifetime and .pageLifetime Used to define a single lifecycle method and a lifecycle method for the page where the component resides, respectively, equivalent to the traditional form of Lifetime and PageLifetime Define a single item in the paragraph. For example:

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

.observer Used to define a single data listener, similar to the traditional form of observers Defines a single item in a segment, but when listening on multiple data fields at the same time, it should be written as an array. For example:

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

.relation Used to define the relationship between individual components, equivalent to the traditional form of relations Define a single item in the paragraph. For example:

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

# Used in a chain call item behavior

Similarly, Behavior Also supported Chaining API . For example:

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

This way, in the component, you can use the .behavior Bring it in:

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

It is important to note that the introduction of behavior Causes duplicate namesake attributes or data fields, TypeScript A type error will be reported.

# Reuse chained invocation items

except options and export , the other chained invocations can be repeated multiple times, and the results are combined.

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

Component()
  // definition myDataField Fields and associated processing logic
  .data(() => ({
    myDataField: 'someValue',
  }))
  .lifetime('attached', () => {
    this.setData({ myDataField: updatedValue })
  })
  // definition anotherField Fields and associated processing logic
  .data(() => ({
    anotherField: 1,
  }))
  .lifetime('attached', () => {
    this.setData({ anotherField: updatedValue })
  })
  .register()

# Discontinuous chain call

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

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

But writing like this loses some of it. TypeScript Type information. This approach is more suitable for the production of middleware, will Component() Encapsulated in some other form. This is not recommended when writing code by hand.