sleepless-framework v1.0.0

framework

Install

git clone git@github.com:sleeplessinc/framework
cd framework
npm install

Demo

The demo makes use of the Sleepless Inc. prototyping webserver "tlsd" module:

npm run dev

Open a browser to http://localhost:12333

Usage

This is an entirely client-side component system.

You need to include the script framework.js in your HTML somewhere.

<script src="frameworks.js"></script>

This script will make an object on globalThis called framework which contains a function called inject which you should call to inject your components into the page.

<script>

    framework.inject()

</script>

NOTE: framework.js is NOT (currently) an EJS module, just a plain JS file.

Components are injected into HTML element containers that look like this:

<component name='login'></component>

When you call inject() these HTML tags will be searched for in your HTML and the named component will be jammed into it.

A component consists of an HTML file and JS file. They must exist in the directory /components/name/, for example:

document_root/
    components/
        login/
            login.html
            login.js

NOTE: The JS files must be EJS modules with a default export that is a function.

function login( component ) {
    ...
}

export default login;

The HTML for the component is loaded and crammed into the container element. Then the JS is loaded and the default function called with an object that looks like this:

{ element, code, html, name, path, };

The code can then do whatever the hell it wants with the element, like grab sub-elements and attach event handlers, etc.

Example

See the contents of the demo folder for a working example. Note that the demo uses tlsd which has a websocket/rpc component to simulate a login flow, as well as pulling in the Sleepless Inc. JS library.