/ Check-in [3075eee92e]
DEMO | DOWNLOAD | DEPLOY | SEARCH
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Doc
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1:3075eee92ed21a5dc6bf6e7bf0d60817d7894d28
User & Date: pmacdona 2019-12-01 20:00:17
Context
2019-12-02
02:02
Sqlite: set dbname on open. Htmlpp: change echo to output. check-in: 64a6b822fd user: pmacdona tags: trunk
2019-12-01
20:00
Doc check-in: 3075eee92e user: pmacdona tags: trunk
17:59
Fix ws url check-in: 26279a33d5 user: pmacdona tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Added md/Web.md.









































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<title>Web</title>

Jsi provides server-side web services built upon the [WebSockets](./js-websocket.md) extension.

Preprocessors
=============
Three pre-processing facilities are provided, depending upon file extension:


Extension | Type       | Description
----------|------------|---------------------------------------------------------------------
.htmli    | HTML       | Evaluate javascript between tags **&lt;?** and **?&gt;**.
.cssi     | CSS        | Preprocess **$defined** symbols.
.jsi      | Javascript | Translate [typed-functions](./functions.wiki) (for use within browsers)



Pre-processors are enabled via **handlers**:

    var ws = new WebSocket({callback:ws_input});
    ws.handler('.htmli', 'Jsi_Htmlpp',  null);
    ws.handler('.jsi',   'Jsi_Jspp', null);
    ws.handler('.cssi',  'Jsi_Csspp',  null);


The specifics are described below.

HTML Preprocessing
------------------
The HTML preprocessor is triggered by the extension <b>.htmli</b>.

It evaluates javascript contained in <b>&lt;?</b> and <b>?&gt;</b> tags.

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

    <table border='1' class=cmdstbl>
<tr><th>Command</th> <th>Prototype</th> <th>Description</th> </tr>
<tr><td>echo | echo(str:string) | Output a string |
<tr><td>include | include(files:string|array, debug=false) | Include and evaluate files, recusively. |
</table>

Here is an example:

    <nowiki><pre class=verbatim>
<!DOCTYPE html>    <i><!-- File: main.htmli --></i>
<html>
<b><?</b>
    <b>echo</b>(<i>'&lt;title>My App&lt;/title>'</i>);
    var files = [<i>'head.html'</i>, <i>'body.html'</i>, <i>'dialogs.html'</i>];
    for (var i in files)
        <b>include</b>(files[i]);
<b>?></b>
</html>
</pre></nowiki>

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

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

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

    <nowiki><pre class=verbatim>
<head>
    <b>include</b>([<i>'main.jsi'</i>, <i>'main.cssi'</i>, <i>'common.cssi'</i>], <b>true</b>);
</head>
</pre></nowiki>

<hr>
<h3 id=csspp>CSS Preprocessing</h3>
The CSS preprocessor is triggered by the <b>.cssi</b> extension, and provides symbolic substitution via defines prefixed with <b>$</b>:

    <nowiki><pre class=verbatim>
<b>$mycolor =</b> { blue }    <i>/* File: styles.cssi */</i>
<b>$mysize =</b> { 14pt }
<b>$mydefn =</b> {
    color:<b>$mycolor</b>;
    font-size:<b>$mysize</b>;
}
  
#mybut1 { color:<b>$mycolor</b>; font-size:<b>$mysize</b>}
.eclass { <b>$mydefn</b>; margin:1px }

<b><?</b>
    <b>echo</b>(<i>'#mylist { color: $mycolor; }\n'</i>);
    <b>include</b>(<i>'common.cssi'</i>);
<b>?></b>
</pre></nowiki>

Note  after <b>$define</b> expansion, <b>&lt;?</b> and <b>?&gt;</b> evaluation is also applied.


<hr>
<h3 id=typepp>Javascript Preprocessing</h3>

The type pre-processor is triggered by the <b>.jsi</b> extension.

It converts typed-[./functions.wiki|function] code into standard web browser javascript, ie.

    <nowiki><pre class=verbatim>
function notifyUser(m:string, n:number=1) {
    alert('NOTICE: '+m+': '+n);
}
</pre></nowiki>

which gets converted to:

    <nowiki><pre class=verbatim>
function notifyUser(m, n) { m=Jsi.ArgCheck(...); n=Jsi.ArgCheck(...);
    alert('NOTICE: '+m+': '+n);
}
</pre></nowiki>


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: <b>/jsi/lib/jsi.js</b>

<hr>
<h2 id=utilities>Utilities</h2>

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

  *  [../lib/web/jsi.js|jsi.js]: Support code for type-checking.
  *  [https://github.com/remy/bind.js|bind.js]: Two way binding between data and elements.
  *  [http://zeptojs.com/|zepto.js]: Lite subset of JQuery.