View

An entity that accepts a collection of properties and returns an element.

Definition

Although similar in syntax to a Function, the property order for views doesn't matter as it always produces the same type signature. The only valid return types for a view are the Primitives. You can render a view the same way you might render a built-in element such as <div> in a browser environment.

view SimpleView(age: number, name: string) -> <div />;

// is equivalent to

view AlternateView(name: string, age: number) -> <div />;

const ELEMENT =
  <>
    <SimpleView age=4 name="first" />
    <SimpleView name="second" age=3 />
    <AlternateView age=2 name="third" />
    <AlternateView name="fourth" age=1 />
  </>;

Empty Properties

If your view does not have any properties you can drop the parentheses as well.

view SimpleView -> <div />;

const ELEMENT = <SimpleView />;

Default Properties

You can make your properties optional by passing default values. Unlike a Function, there are no restrictions about which properties can have default values.

view PartialView(first: integer, second = 10, third: integer) ->
  <div>{first + second + third}</div>;

const PARTIAL_RENDER = <PartialView first=1 third=3 />;        // 14
const FULL_RENDER = <PartialView first=1 second=2 third=3 />;  // 6