Inflation is a process that combines markup language with data to produce updated static markup that reflects the changes prescribed by the internal definitions of intent within the markup. There are two varieties of markup involved: static and registered. Static markup concerns itself with refreshing the existing user interface (UI) based on the data and intentions outlined. Conversely, registered markup, often simply called inflation, involves associating a template with a data store to generate new UI instances. This method is typically employed for generating collections, while static inflation focuses on interpreting and refreshing already present UI elements.

Static inflation example

Given that we have an element with binding markup:

<div classlist.if="person.age > 20 ? 'green'">First Name</div>
<div>${person.firstName}</div>
<div>Last Name</div>
<div>${person.lastName}</div>
<div>Age</div>

We can inject the intent and data using:

Typically you would create a template that represents a structure to clone.
Once you have cloned the structure, you can inflate the elements with the data as seen below.

await crs.binding.staticInflationManager.inflateElement(elementToUpdate, dataModel);

Registered inflation example

For this we need a template that we can register with the inflation manager.

<template data-ref="template">
    <li data-id="${id}" data-state.if="age < 25 ? 'young' : 'old'">
        <div classlist.if="age < 25 ? 'blue' : 'red'">First Name: ${firstName}</div>
    </li>
</template>

This template can be both registered and unregistered through the inflation manager. Upon registration, you must supply a unique key for future referencing of the template, along with the HTMLTemplate that will be used to create each new instance.

// register template using key "key_name"
await crs.binding.inflation.manager.register("key_name", this.template);

// unregister template when you are done with it
await crs.binding.inflation.manager.register("key_name");

Having registered the template with the inflation manager, you are now able to produce instances corresponding to a data collection, generating a new instance for every individual data entry.

const elements = await crs.binding.inflation.manager.get("key_name", records);

You are now able to attach the generated elements to any user interface of your choosing. Additionally, you have the option to include a collection of existing items. If you opt to do this, the outcome will automatically adjust according to the number of children present. This approach allows for the maximal reuse of elements, which in turn minimizes the need for garbage collection.

const elements = await crs.binding.inflation.manager.get(
  "key_name", 
  data, 
  this.collection.children);
  
this.collection.innerHTML = "";
this.collection.append(...elements);