@berslucas/liljs

Getting Started

For demos and examples, please visit lucasbersier.com/liljs

To start a liljs instance, you must call the function liljs with an html element to bootstrap to and an optional object with data for the first render cycle.

<div id="app">
  <!-- Elements using lil-* attributes -->
</div>

<script>
  liljs(document.querySelector('#app'), {
    propertyName: propertyValue,
    propertyName: propertyValue,
    ...
  }).then((app) => {
    
  });
</script>

The liljs promise will initialize and render your app, and the returned value, app will be a proxy containing all properties you have defined. To change a value, use app.propertyName and that value will be update both in your proxy and in the DOM.

Properties

A Property is a value attached to the liljs proxy that will update the proxy once the value is updated. Properties are created by adding attributes to the child elements of the element defined in the first parameter of liljs() when you initialize your instance.

Properties can be updated by changing their value. This will also re-render the element that the property is attached to.

addProp

Sometimes you'd like to add a property after the app has been rendered. This is possible by calling app.addProp on your proxy object.

liljs(document.querySelector('#app'), {
    propertyName: propertyValue,
    ...
}).then((app) => {
  app.addProp(
    name, type, elemList, value
  )
});

This function takes the following parameters:

Name	Type	Description
name	String	Name of a property to add
type	String	Bind type (style, text, list, ect...)
elemList	Array	Array of element(s) to apply this property to
value	Any	Name of the property to render