semajs v1.0.1

SemaJS

library/structure for single page applications.

Removes the need to used large libraries like React, angular or VUE.

Tiny but powerful library as alternative for JavaScript framework.

Approx. 10k uncompiled.

(SemaJs doesn't support routing, for routing library please check SemaFeJS)

View Model

All content of the page comes in a form of view/model.

A model can have one or more views.

When a model is loaded it will automatically update all his views.

When a view is loaded it will get be added the model to create a view/component.

{
   "models": [{
      "key": "HW",
      "value": "Hello World"
   }],
   "views": [{
      "modelKey": "HW",
      "containerId": "content",
      "component": "TextDisplay"
   }]
}

Core

The core include the following

Model

Model repository for loaded models

View

View Repository, creates and manage components.

Event

Dispatch/subscribe events, one central points for all dom events. No need to add/remove most of the event listeners, they will be auto delegated to the view.

Bindings

View to Model bindings created when the views are loaded, removed when the views removed. The bindings are string key based, no elements is used as reference.

Non-Core

App

initial code to include the code

Request

Send/load data, will dispatch event back to the app when load complete.

Components

The components are bounded the same interface:

module.exports = {
   create,
   init,
   render,
   onEvent.
   onDocumentEvent,
   onWindowsEvent,
   distroy
};

The only mandatory method is create.

Structure

All components has the same structure

<foder-name>.js
<foder-name>.scss
<foder-name>.html

Once the build is run, template.generated will be added, the template can use ES6 string literals that will be auto replaces with the model. See below for example in the Build section.

When running Jest in Webpack the following files can be used

<foder-name>.spec.js
<foder-name>.json

Test could be comparing the template result

const main = require('./main');
const stub =  require('./stub');

describe("Hello world test", () => {
  test("html template", () => {
    const result = main.create(stub.view, stub.model);
    const expected ="<div>Hello World</div>";
    
    expect(result).toEqual(expected);
  });
});

Build

Before a project is compiles, a node build runs and does the following.

Components

Find all the components create under the 'components' folder and builds component factory

components.generated.js

module.exports = {
   get: get
};

const components = {
    HelloWorld: require('../components/HelloWorld/main.js'),
};

function get(type) {
   if (components[type] == null) {
      console.log('component not found for ', type);
   }

   return components[type];
}

Style

compile all the scss files into one and creates

style.generated.scss
style.generated.css

Templates

Convert all the html template files into generated js files

template.html -> template.generated.js

<div id="${view.id}">${model.value}</div>

to 

module.exports = {
   create
};

function create(view, model) {
   return `<div id="${view.id}">${model.value}</div>`;
}

Preview

All components are displayed in an html table generated from the html template and the stub.js for quick preview.