<

Rapid web components development!

Introduction

What is slim.js?

Slim.js is a lightweight web component library that provides extended capabilities for components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the hassle of dependencies and an overhead of a framework.

Getting started

Please note: Target browsers that do not support web component are required to use a polyfill like web-components

Defining a slim component - as easy as it gets


@tag('my-custom-tagname')
class MyCustomTag extends Slim {}
                        

Instantly you get a custom web-component element with a rich lifecycle that can be used with the following hooks:

  • onBeforeCreated
  • onCreated
  • onBeforeRender
  • onAfterRender
  • onBeforeUpdate
  • onAfterUpdate
  • onBound-property-nameChange (example: onDataChange)

Templates and data-bindings

Slim.js creates a runtime getter/setter function for bound properties, and with every change the component will automatically update itself with the new result.


import {Slim} from "slim-js";
import {tag, template} from "slim-js/Decorators";

@tag('my-app')
@template('<h1 bind>Hello, [[myName]]</h1>')
class MyApp extends Slim {
    onBeforeCreated() {
        this.myName = 'slim.js';
    }
}
                    

Every slim.js component has it's own default template to be rendered upon placed on the DOM tree. This template is accessible via a template getter function.

Usage of the element in another template or in a HTML wrapper:


<body>
    <my-app></my-app>
</body>
                    

Attribute-method-property binding

You could wrap a binding with a parsing method, thus enforcing parser method to run every change in the property


import {Slim} from "slim-js";
import {tag, template} from "slim-js/Decorators";

@tag('my-app')
@template('<my-greeter name="[[person]]"></my-greeter>')
class MyApp extends Slim {
    onBeforeCreated() {
        this.person = 'Bruce Wayne';
    }
}
                    

Conditional Rendering with slim-if


// javascript, no decorators
Slim.tag('my-custom-tag', class extends Slim {
    get template() {
        return '<div slim-if="myBoolean">Now you see me</div>';
    }

    onAfterUpdate() {
        this.myBoolean = false; // now you don't
    }
});
                    

Plenty of more features and capabilities

  • Repeaters
  • Method bindings
  • Dot notation lookup
  • Content injections
  • Interactivity
  • References, context and delegations
  • Dependency Injection

Read all about it in the documentation

Read the docs

Fork me on GitHub