Component Render Rules Engine

The rules engine is a general utility for rendering qwik components or HTML structures based on a set of JSON rules evaluated against a context object. The component itself is very generic, so individual implementations of it are dependent on router components that are specific to the use case.

Context

The context object is the data that the rules engine evaluates against. It should contain all the data needed to render the components. In the example on this page, the context object contains a clinician object, and a department object.

Rules

Rules are JSON objects that contain a match object and a display object. The match object is evaluated against the context that is passed to the component router. If the match object evaluates to true, the display object is returned and rendered by JsonTree. Display objects specify either a component (mapped to the component library) or an HTML structure to render. Display objects can also contain attributes that are spread onto the component. This is how we handle passing props to the matched component. This implies that any props needed by the matched component must exist in the context object, and if we wish to pass something from the context to an attribute, you must specify an object path as the attribute value. Finally, display objects can have a position property, in the case that a template has multiple instances of the component router. This allows us to only render the matched component in the correct position.

Component Routers

Routers should accept the specific use-case's context object and act as a type safety layer, as the inputs of the engine are generic by default. Routers should also import the rules and components they need to render and should handle any additional render logic or data formatting that is specific to the use case.

Component Libraries

A router's component library is simply an object where each key/value pair is a component name and the component itself. This allows for the dynamic rendering of components based on the rules engine's output.

Rulesets

Rulesets are arrays of rules that are evaluated in order. The first rule that matches the context is the one that is rendered, this allows for the prioritization of rules. Rulesets should be ordered by most specific to least specific.

Caveats

It's important to note that the rules engine child component rendering does not support qwik slots due to how they are rendered by the framework. To work around this, the value of the component in the component library should be a wrapper component that includes all necessary slots. The example below demonstrates this with the various configurations of the offer tile.

Example

Context:

Virtual care available

For COVID-19 symptoms/testing, fever, cough, colds, UTI, allergies and more.

Self-pay or Insurance

Make a reservation

Book a visit with Prof. Ford’s Care Team

Andrea Ford image

Prof. Andrea Price Ford IV, MD

Family Medicine
4.8 out of 5 – 2,089 ratings
New patient visits
Virtual visits
View all providers

This is an example of a generic HTML structure rendered by the <JsonTree />

We can also nest components from the component library in an HTML structure, this is useful for creating wrappers around components.

Virtual care available

For COVID-19 symptoms/testing, fever, cough, colds, UTI, allergies and more.

Self-pay or Insurance

Make a reservation