The basic building block of the HCJ framework is the component. Components can be rendered as web pages, or combined together to create new components.
A component is any function taking a context and returning an instance. To render a component is to pass it a context.
Additionally, in HCJ terminology, a layout is a function that takes one or more components, and returns a new component. A style is a function that takes exactly one component and returns a component. Therefore, all styles are layouts.
Specifically, a context has all of the following properties:
• nbsp;el nbsp; nbsp; nbsp; nbsp; :: Node nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Parent element of the instance.
• nbsp;width nbsp; :: Stream Number
nbsp; nbsp;
Width of the instance.
• nbsp;height :: Stream Number
nbsp; nbsp;
Height of the instance.
• nbsp;left nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Left position of the instance relative to the page.
• nbsp;top nbsp; nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Top position of the instance relative to the page.
An instance is an object with all of the following properties:
• nbsp;el nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Node nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Root element of the instance, appended to the el node of the context.
• nbsp;minWidth nbsp; :: Stream Number nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Minimum width of the instance.
• nbsp;minHeight :: Stream (Number - gt; Number)
nbsp; nbsp;
Minimum height of the instance.
• nbsp;remove nbsp; nbsp; nbsp; :: Function nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Removes the instance from the page.
A component must create a DOM node, append it to the el node of the passed-in context, and return it as the el property of the instance, each time it is rendered.
Whenever you render a component, you must inform it of its width, height, page-relative top, and page-relative left positions via the context it is passed. This way, it can display itself in a mobile- (and more generally container-) responsive way.
To position the instance, you may set its node's width, height, top, left, and position styles; the instance itself owns all other styles. The position style may not be set to static: it must be set to absolute, relative, or fixed, so that the instance can reliably position its own children.
The instance's minWidth property is a stream of numbers giving the minimum width that the instance reports it needs to display sanely. This is used by its rendering code to give it as much space as it needs. Likewise, minHeight is a stream of functions that, given a hypothetical width, return the height required by the instance at that width.
The remove property of the instance is a function that removes its el node from the DOM and performs any other cleanup required by the instance, such as closing open connections.
