npm:zombrex | Skypack

README

Zombrex, is a controversial framework that greatly slows the process of frontend zombification.

Note:

Not production ready

preload

Preloads data from GET and POST requests. This happens before the application starts to render or store anything.

zombrex.preload([{
    name: 'DATA',
    url: '/app',
}, {
    name: 'ACCS',
    url: '/accs',
    data: { method: 'getUser' }
}]);

preload with components

If you need to access components use a function and return an array.

zombrex.preload(function ({ CONSTANT }) {
    return [{
        name: 'DATA',
        url: `/app/${CONSTANT}`,
    }, {
        name: 'ACCS',
        url: '/accs',
        data: { method: 'getUser' }
    }];
});

render

Render dynamic html before executing the view. Also replaces all linebreaks.

zombrex.render('#calendar', ({ BROWSER, DATA }) => {    
    return `<div>
        <h1>${DATA.title}</h1>
    </div>`; 
});

views

Add views to zombrex. A view is similar to an angular controller. It wraps a part of the dom and allows you to interacte with this part.

<html>
<head></head>
<body>
    <div id="dashboard">
        <p id="board"></p>
    </div>
    
    <!-- scope of calendar view -->
    <div id="calendar">
        <p id="name"></p>
    </div>
</body>
</html>

zombrex.view('#calendar', (scope, { BROWSER, DATA }) => {    
    const name = scope.querySelector('#name');
    
    name.innerText = DATA.name; 
});

constants

Adds constants to the zombrex scope. All types are allowed.

zombrex.constant(Name String, Data Everything);

zombrex.constant('BROWSER', {
    language: (window.navigator.userLanguage || window.navigator.language).substring(0, 2),
    agent: navigator.userAgent,
    timeFormat: new Date().getTimezoneOffset()
});

before

Executes before components are added, or executing the view. Useful for pre compunting things. Has access to constants and build in zombrex components.

zombrex.before(({ BROWSER }) => {
    moment.updateLocale(BROWSER.language, { week: { dow: 1 } });
});

after

Is executed after views. Has access to everything.

zombrex.before(({ DATA, output }) => {
    console.log(DATA);
});

components

Components are similar to angular factorys. The are used to generate reusable components over all views and after.

zombrex.component('output', ({ BROWSER }) => { 
    function browser () {
        return `Language is ${BROWSER.language} and useragent is ${BROWSER.agent}`;
    }
    
    return {
        browser: browser
    };
});

zombrex.view('#dashboard', (scope, { output }) => {    
    output.browser();
});

lambda

Executes functions after the views are executed and before after is executed.

zombrex.lambda(() => {
    if (localStorage.getItem('dev')) { 
        console.log('dev version is activate');
    }
});

zSHARE

Adds shareable mutable variables over the zombrex scopes.

zombrex.view('#dashboard', (scope, { zSHARE }) => {    
    const board = scope.querySelector('board');
    
    zSHARE.dashboard = function (text) {
        board.innerText = text; 
    };
});

zombrex.view('#calendar', (scope, { zSHARE }) => {     
    zSHARE.dashboard('invoked from calendar view');
});

zombrex cycle

Build in Tools

zURLPARAM an object handling url params

zURLPARAM.set('id', '34234324324');
zURLPARAM.get('id');
zURLPARAM.removeAll();

noop a noop function

tabReload a function to reload your tab

Debug

zombrex.view('#dashboard', (scope, { debug }) => {    
    const log = debug('dashboard');
    
    log.log('start'); // outputs dashboard -> start
});

If you want to stop stdout just pass log as string in an array to deactivate.

zombrex.view('#dashboard', (scope, { debug }) => {    
    const log = debug('dashboard');
    
    log.deactivate(['log']); 
});

Usage no npm install needed!