/ Web
DEMO | DOWNLOAD | DEPLOY | SEARCH
Login

Jsi provides server-side web services built upon the WebSockets extension.

Preprocessors

Pre-processing is determined by file extension:

Extension Type Description
.htmli HTML Evaluate javascript between tags <? and ?>.
.cssi CSS Preprocess $define style symbols.
.jsi Javascript Translate typed-functions (for use within browsers)
.mdi Markdown Render file contents to markdown

These work as described below.

HTML Preprocessing

The HTML preprocessor is triggered by the extension .htmli.

It evaluates javascript contained in <? and ?> tags.

This code is run in a private subinterp to which two new commands have been added:

function include(file:array|string, inline=false); // Include and evaluate files.
function output(str:string, markdown=false); // Append string to output.

Here is an example:

<!DOCTYPE html>
<html>
<?
    output('<title>My App</title>');
    var files = ['head.html','body.html', 'dialogs.html'];
    for (var i in files)
        include(files[i]);
?>
</html>

All include-ed files are also similarly processed recursively, regardless of extension. The only exception are .js .jsi and .css, whose handling is described below.

Files with the .css/.cssi extensions are wrapped in <style> tags and .js/.jsi are wrapped in script tags.

When the include debug flag is true, non-html files are not included inline but rather via link/script tags. This is used to simplify debugging in the browser, eg.

<head>
    include(['main.jsi', 'main.cssi', 'common.cssi'], true);
</head>

CSS Preprocessing

The CSS preprocessor is triggered by the .cssi extension, and provides symbolic substitution via defines prefixed with $:

$mycolor = { blue }    /* File: styles.cssi */
$mysize = { 14pt }
$mydefn = {
    color:$mycolor;
    font-size:$mysize;
}

#mybut1 { color:$mycolor; font-size:$mysize}
.eclass { $mydefn; margin:1px }

used like so:

<?
    include('styles.cssi');
    output('#mylist { color: $mycolor; }\n');
?>

Note after $define expansion, <? and ?> evaluation is also applied.

JS Preprocessing

The type pre-processor is triggered by the .jsi extension.

It converts Typed functions into standard web browser javascript, ie.

function notifyUser(m:string, n:number=1) {
    alert('NOTICE: '+m+': '+n);
}

is converted to:

function notifyUser(m, n) { m=Jsi.ArgCheck(...); n=Jsi.ArgCheck(...);
    alert('NOTICE: '+m+': '+n);
}

This provides runtime type-checking of function calls.

To debug, we set a breakpoint on warnings which are output to the console.

The Jsi support functions are included from: /jsi/lib/jsi.js

Enabling Preprocessors

Pre-processors handlers are enabled in WebSocket via:

var ws = new WebSocket({callback:ws_input, extHandlers:true});

or

var ws = new WebSocket({callback:ws_input});
ws.handler('.htmli', 'Htmlpp',  null);
ws.handler('.jsi',   'Jspp', null);
ws.handler('.cssi',  'Csspp',  null);
ws.handler('.mdi',   'Markdown',  null);

Utilities

The following resources are available to include from /jsi/lib/:

jsi.js Support code for type-checking.
bind.js Two way binding between data and elements.
mustache Web templating.