Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @berslucas/liljs with all npm packages installed. Try it out:

var liljs = require("@berslucas/liljs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@berslucas/liljs v4.0.2

A DOM-driven micro-framework for Javascript applications

liljs logo

File Size version David Dependency Status David devDependencyStatus PRs Welcome travis CI Gitter

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:

NameTypeDescription
nameStringName of a property to add
typeStringBind type (style, text, list, ect...)
elemListArrayArray of element(s) to apply this property to
valueAnyName of the property to render

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free