Documentation

April 19, 2019 · View on GitHub

This documentation should give you knowledge of Litespeed.js framework basic concepts and how to get started building you first app.

Get Started

The first step to get started with Litespeed.js is to init the framework in your web project HTML layout.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <main data-ls-router>Loading your router matching state in this element</main>

        <script>
            (function (window) {
                "use strict";

                document.addEventListener("DOMContentLoaded", function() {
                    let head      = document.getElementsByTagName('head')[0];
                    let script    = document.createElement('script');
                    script.async  = true;
                    script.src    = 'scripts/litespeed.js';

                    script.onload = function() {

                        window.ls.router // Add some basic routing rules
                            .add('/', {
                                template: '/pages/index.html'
                            })
                            .add('/pages/page-1', {
                                template: '/pages/page-1.html'
                            })
                        ;

                        window.ls.run(window); // Watch the magic happens
                    };

                    head.appendChild(script);
                });

            }(window));

        </script>
    </body>
</html>

This is a basic example that shows how to init a Litespeed.js JS library asynchronously and set 3 different views for our main router scope with their respective URL paths.

Create a New Service

Services are where you handle your app logic. A service is any Javascript object, whether a native object, object you create or a 3rd party library, we really don't mind.

Any service you register using the container service is automatically available to auto-discovery available using Litespeed dependency injection algorithm.

Example

window.Litespeed.container.set('timezone', function () {
        return {
            convert: function (unixTime) {
                var timezoneMinutes = new Date().getTimezoneOffset();
                timezoneMinutes = (timezoneMinutes === 0) ? 0 : -timezoneMinutes;

                // Timezone difference in minutes such as 330 or -360 or 0
                return parseInt(unixTime) + (timezoneMinutes * 60);
            }
        };
    }, true);

APIs & Examples

Service	Description	API & Examples
container	Manage service registration, data binding and dependency injection internally.	API Refs & Examples
cookie	Manages user cookie, retrieve and set cookies.	API Refs & Examples
expression	Parse template syntax expressions and execute them as JS code.	API Refs & Examples
filter	Use predefined string filters or add custom filters.	API Refs & Examples
http	Manage HTTP interactions with server side APIs.	API Refs & Examples
router	Manage state registration and routing.	API Refs & Examples
view	Handles views registration and rendering	API Refs & Examples

Create a New View Component

// TODO

APIs & Examples

Service	Description	API & Examples
ls-router	Listen for app URL changes and renders the matching route on the DOM.	API Refs & Examples
ls-bind	Binds data between your services to the DOM.	API Refs & Examples
ls-attrs	Binds data between your services to your element attributes.	API Refs & Examples
ls-if	Hides element according to given expression evaluation	API Refs & Examples
ls-loop	Iterate over a service or array and renders element for each iteration.	API Refs & Examples
ls-template	Render HTTP remote or inline script template to given element.	API Refs & Examples

window.Litespeed.conatiner.set('user1', { // Creating our first service
    'name': 'first member',
    'email': 'one@example.com'
}, true, true);

window.Litespeed.conatiner.set('user2', { // Creating our second service
    'name': 'second member',
    'email': 'two@example.com'
}, true, true);

window.Litespeed.conatiner.set('team', function(user1, user2) {
  // Hurray! both user1 and user2 services are magically available for us! 
  return {
      'user1': user1,
      'user2': user2,
  }
}, true, true);

// And the same works with a view controller:

window.Litespeed.conatiner.get('view')
    .add({
        selector: 'data-test',
        repeat: true,
        controller: function(element, user1, user2, document) {
            // Hurray! both element, user1 and user2 and document services are all magically available for us!
        }
    })

Documentation

Get Started

Create a New Service

Example

APIs & Examples

Create a New View Component

APIs & Examples

Create a New Filter

Dependency Injection

Examples