renderers are implemented using typescript

1import { MOVE } from "@tracking/event-names";
2import { SimpleCarousel } from "@dx/react-carousel-tile";
3import { tile, ViewTracker } from "@if/rendering-engine/api";
4import * as React from "react";
5import * as query from "./query.graphql";
6
7export default tile()
8  .withQueries(({ entity: { id } }) => ({
9    carousel: { query, variables: { id } },
10  }))
11  .withProcessDependencies(({ data }) => {
12    if (data === null) {
13      return { action: "error", message: "No collection data found." };
14    }
15    return {
16      action: "render",
17      data,
18      tiles: { entities: getCollectionEntities(data) },
19    };
20  })
21  .withRender((props) => {
22    const {
23      data: { collection },
24      tiles: { entities },
25      tools,
26    } = props;
27    return (
28      <ViewTracker>
29        <SimpleCarousel
30          {...collection}
31          onNextClickCarousel={() => {
32            tools.tracking.track({ name: MOVE });
33          }}
34        >
35          {entities}
36        </SimpleCarousel>
37      </ViewTracker>
38    );
39  });
40