Simple web-application builder with no framework (Vanilla JS). Written in C++. Project intended to help to develop small web application tied to their web service. Literaly if you need a control page to your web service written in C++. It is adapted to be used in CMake
It literally converts a javascript script into an HTML page. However, this script can contain directives to reference other scripts, styles, page fragments, and other resources. The result of the conversion is an HTML page that contains the given script, all referenced scripts and styles. It also places all tagged resources into the appropriate tree structure. The result can be created in the build tree generated by CMake
$ webproject -o <output_page> [<switeches>] input.js
It is recommended to set output_page to different directory tree (for example CMake's build tree)
- -o {path/index.html} - output HTML page. The folder where the page is created is also used as root folder of the web site
- -m s,symlink|h,hardlink|c,copy|p,onepage - some resources can be linked to the page. This defines, how these resources will be linked
- -ms -msymlink - scripts, styles and other resources are symlinked. This allows to directly modify them without need to recompile the page
- -mh -mhardlink - scripts, styles and other resources are hardlinked. The browser (chrome) can have difficulty to access resources through the symlink, so this links resources using hardlinks
- -mc -mcopy - copy linked resources. They cannot be modified directly, every rebuild replaces their copy
- -mp -monepage - create one page application. Scripts, styles are inlined to the page, other resources are copied
- -I {path} - add search path for other scripts, can be used by multiple times -I... -I...
- -C {path} - add search path for styles (css), can be used by multiple times -C... -C...
- -H {path} - add search path for header fragments (html), can be used by multiple times -H... -H...
- -T {path} - add search path for templates (html), can be used by multiple times -T... -T...
- -F {path} - add search path for page fragments (html), can be used by multiple times -F... -F...
- -R {path} - add search path for other resources (png, jpg, svg, etc), can be used by multiple times -F... -F...
- -s {host:port} - server mode. Run tool and server page being built on specified host and port. Reloading the page performs rebuild.
Scripts are represented by javascripts. All javascripts runs in the strict mode. There is no module system, no require command. Instead, directives are used (see below). All referenced scripts are put into result page in order of their reference.
Styles are represented by css files. Styles are referenced from scripts using directive.
Header fragment is HTML file, which's content is put to <head> ... </head> section. You can reference a header fragment anywhere in the project. The fragment is always put to the page's header
The template is fragment of HTML, which is wrap into <template> tag. It is put to the page asi
<template data-name="fragment.html">
... content of file fragment.html
</template>
If these is at-least one template, there is also a function loadTemplate(name) which loads speciifed template and returns a document fragment
Page fragment is just inserted directly to the page
Resources are copied to the target directory tree
Directives are specified in javascript file. It looks like special comment line
//#require ...
//#style ...
//#page ...
//#template ...
//#header ...
//#resource ...
Every line contains directive and reference to the single file.
- require - references existing script. The script is linked before script which is referencing it
- style - references existing style. It is linked together with other styles
- page - references existing page fragme.
- template - references existing template
- header - reference existing header
- resource - reference existing resource
Cyclic references (require cycle) are not possible.
Directive require is not include. It is always inserted before the script where it is referenced
//#require main.js
//#require dialog.js
//#template search_form.html
//#resource icons/favicon.ico
function show_form() {
var f = loadTemplate("search_form.html");
document.body.appendChild(f);
}
During the server mode, the utility stays active and serves the output page on given port. It also rebuilds the page whenever the page is reloaded. The server can be stopped by Ctrl+C
main.js
//#style style.css
//#header header.html
function hello_world() {
document.body.appendChild(document.createTextNode("Hello world"));
}
document.body.onload=hello_world;
header.html
<title>Hello world</title>
style.css
body {
color:blue;
}
webproject -o /tmp/web_example/index.html main.js
webproject -s localhost:10000 -o /tmp/web_example/index.html main.js
webproject -mh -o /tmp/web_example/index.html main.js