Table of Contents
- HTML
- Hop.js tags
- SVG tags
- <SVG [attributes]>
- <SVG:DEFS [attributes]>
- <SVG:RECT [attributes]>
- <SVG:CIRCLE [attributes]>
- <SVG:ELLIPSE [attributes]>
- <SVG:FILTER [attributes]>
- <SVG:FEGAUSSIANBLUR [attributes]>
- <SVG:FECOLORMATRIX [attributes]>
- <SVG:FOREIGNOBJECT [attributes]>
- <SVG:G [attributes]>
- <SVG:IMG [attributes]>
- <SVG:LINE [attributes]>
- <SVG:PATH [attributes]>
- <SVG:POLYLINE [attributes]>
- <SVG:POLYGON [attributes]>
- <SVG:TEXT [attributes]>
- <SVG:TEXTPATH [attributes]>
- <SVG:TREF [attributes]>
- <SVG:TSPAN [attributes]>
- MathML tags
- <MATH [attributes]>
- <MATH:MSTYLE [attributes]>
- <MATH:MI [attributes]>
- <MATH:MN [attributes]>
- <MATH:MO [attributes]>
- <MATH:MROW [attributes]>
- <MATH:MUNDER [attributes]>
- <MATH:MOVER [attributes]>
- <MATH:MUNDEROVER [attributes]>
- <MATH:MSUP [attributes]>
- <MATH:MSUB [attributes]>
- <MATH:MSUBSUP [attributes]>
- <MATH:MFRAC [attributes]>
- <MATH:MROOT [attributes]>
- <MATH:MSQRT [attributes]>
- <MATH:MTEXT [attributes]>
- <MATH:MTABLE [attributes]>
- <MATH:MTR [attributes]>
- <MATH:MTD [attributes]>
- <MATH:MPADDED [attributes]>
HTML
HTML tags are implemented as builtin HopScript functions. When using
the HTML syntax, identifiers are case-insensitive. For instance,
<DIV>
, <div>
, and <Div>
are equivalent.
HTML5 tags
HTML tags have the orginal HTML5 meaning. Some tags have additional attributes that are for Hop.js use only. These are described in this document.
<HEAD>
Hop.js extends the HTML5 <head>
attributes with the following list:
script
: a string or an array of strings. The list of client-side scripts that are used by the document. This attribute is automatically expanded into the correspondant list of<SCRIPT>
nodes.css
: a string or an array of strings. The list of Hop.js Cascading Style sheets that are used by the document. This attribute is automatically expanded into the correspond list of<LINK>
nodes.rts
: a boolean. Whenfalse
disables the automatic inclusion of the Hop.js client-side runtime in the document. Ifrts
istrue
or not mentionned the runtime is included.favicon
: a string. The URL of the document favicon, a shorthand for<link>
favicon.title
: a string. The title of the document, equivalent to a<title>
node.inline
: a boolean. Whentrue
all resources are inlined in the generated document, which is then standlone.
Example
function foo( title ) {
return <head title=${title} css=${PATH + "/my-css.hss"} inline=${true}>;
}
<SCRIPT>
Hop.js extends the HTML5 <script>
with two attributes:
module
: When used in conjunction with asrc
attrbute, this tells Hop.js that this module is to be used as a client-side module. The string used in thesrc
attribute, can then be used, in client-side code, to require client-side modules. See LANG Modules for details.inline
: a boolean. Whentrue
the script is inlined in the generated document.
<IMG>
Hop.js can automatically inline images, which might be used to generate
self-contained HTML documents. For that is supports the extra inline
property.
inline
: a boolean, Whentrue
the content of the image is inline in the node using a base64 representation of the image bytes.
Hop.js tags
In addition to standard HTML5 tags, Hop.js supports the following tags.
<SVG:IMG [attributes]>
An SVG image. The attributes are:
src
: the URL of the SVG image.width
: the width of the image.height
: the height of the image.
The tag <svg:img>
may be used everywhere in HTML documents. It should not
be used inside a <svg>
section.
This example illustrate basic SVG in Hop.js. It uses standard SVG tags and
the svg:img
which is a convenient facility exclusively provided by Hop.
This new tag automatically reads the svg image and creates the appropriate
SVG nodes.
The example also uses basic SVG tags to draw some shapes in the Web page.
svg/svg.js
var cfg = require( hop.config );
service svgServerDate() {
return Date.now();
}
service svg() {
var path = cfg.shareDir + "/icons/hop/hop.svg";
return <html>
<table>
<tr>
<td>
<svg:img width="1em" height="1ex" src=${path}/>
</td>
<td>
<svg:img width="5em" height="5ex" src=${path}/>
</td>
<td>
<svg:img width="10em" height="10ex" src=${path}/>
</td>
</tr>
</table>
<svg width="400" height="430">
<svg:polygon style="stroke:blue; stroke-width:1.5;fill:silver"
points="10,10 180,10 10,250 50,50 10,10"/>
<svg:circle style="stroke:red; stroke-width:2; fill: yellow; opacity: 0.5"
cx="100" cy="80" r="75"/>
<svg:rect style="stroke:green; stroke-width:3; fill: #ded; opacity:.8"
x="30" y="80" height="120" width="220"/>
<svg:path style="fill:red;fill-rule:evenodd;stroke:none"
d="M 230,250 C 360,30 10,255 110,140 z"/>
</svg>
</html>;
}
console.log( "Go to \"http://%s:%d/hop/svg\"", hop.hostname, hop.port );
<MATH:TEX>
Parse a math formula expressed in the TeX syntax and build the corresponding MathML DOM tree.
SVG tags
Hop.js supports the following SVG tags.
<SVG [attributes]>
<SVG:DEFS [attributes]>
<SVG:RECT [attributes]>
<SVG:CIRCLE [attributes]>
<SVG:ELLIPSE [attributes]>
<SVG:FILTER [attributes]>
<SVG:FEGAUSSIANBLUR [attributes]>
<SVG:FECOLORMATRIX [attributes]>
<SVG:FOREIGNOBJECT [attributes]>
<SVG:G [attributes]>
<SVG:IMG [attributes]>
<SVG:LINE [attributes]>
<SVG:PATH [attributes]>
<SVG:POLYLINE [attributes]>
<SVG:POLYGON [attributes]>
<SVG:TEXT [attributes]>
<SVG:TEXTPATH [attributes]>
<SVG:TREF [attributes]>
<SVG:TSPAN [attributes]>
MathML tags
Hop.js supports the following MathML tags.
<MATH [attributes]>
<MATH:MSTYLE [attributes]>
<MATH:MI [attributes]>
<MATH:MN [attributes]>
<MATH:MO [attributes]>
<MATH:MROW [attributes]>
<MATH:MUNDER [attributes]>
<MATH:MOVER [attributes]>
<MATH:MUNDEROVER [attributes]>
<MATH:MSUP [attributes]>
<MATH:MSUB [attributes]>
<MATH:MSUBSUP [attributes]>
<MATH:MFRAC [attributes]>
<MATH:MROOT [attributes]>
<MATH:MSQRT [attributes]>
<MATH:MTEXT [attributes]>
<MATH:MTABLE [attributes]>
<MATH:MTR [attributes]>
<MATH:MTD [attributes]>
<MATH:MPADDED [attributes]>
Tilde
new Tilde( string )
Constructs a new client-side program. This constructor is to used to
generate client-side programs whose contained are obtained by a
computation. In most situations, one should normaly prefer using
the ~
syntax.