Views

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.

Knot

knot
view SimpleView(age: integer, name: string) -> <div />;
view AlternateView(name: string, age: integer) -> <div />;
const element =
  <>
    <SimpleView age=4 name="first" />
    <SimpleView name="second" age=3 />
    <AlternateView age=2 name="third" />
    <AlternateView name="fourth" age=1 />
  </>;

knot
view SimpleView(age: integer, name: string) -> <div />;
view AlternateView(name: string, age: integer) -> <div />;
const element =
  <>
    <SimpleView age=4 name="first" />
    <SimpleView name="second" age=3 />
    <AlternateView age=2 name="third" />
    <AlternateView name="fourth" age=1 />
  </>;

TypeScript

tsx
function SimpleView({ age, name }: { age: number; name: string }) {
  return <div />;
}
function AlternateView({ age, name }: { name: string; age: number }) {
  return <div />;
}
const element = (
  <>
    <SimpleView age={4} name="first" />
    <SimpleView name="second" age={3} />
    <AlternateView age={2} name="third" />
    <AlternateView name="fourth" age={1} />
  </>
);

tsx
function SimpleView({ age, name }: { age: number; name: string }) {
  return <div />;
}
function AlternateView({ age, name }: { name: string; age: number }) {
  return <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.

Knot

knot
view SimpleView -> <div />;
const element = <SimpleView />;

knot
view SimpleView -> <div />;
const element = <SimpleView />;

TypeScript

tsx
function SimpleView() {
  return <div />;
}
const element = <SimpleView />;

tsx
function SimpleView() {
  return <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.

Knot

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

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

TypeScript

tsx
function PartialView({
  first,
  second = 10,
  third,
}: {
  first: number;
  second?: number;
  third: number;
}) {
  return <div>{first + second + third}</div>;
}
const element = <PartialView first={1} third={3} />;

tsx
function PartialView({
  first,
  second = 10,
  third,
}: {
  first: number;
  second?: number;
  third: number;
}) {
  return <div>{first + second + third}</div>;
}
const element = <PartialView first={1} third={3} />;