Table of Contents

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.

Local URL

URL are used inside HTML documents to refer to external resources. For instance, the src attribute of the img tag refers to the URL of the image to be displayed or the src attribute of the audio tag refers to the URL of the music to be played. These URL might be located on another server, in which case, the http:// schema is used. They might also be located on the same server as the one delivering the page. In that particular case, the URL designate a file and the URL might either be absolute, that is the filename starts with the / character or relative, that is relative to the URL of the current document. In the following, we propose two ways for constructing URLS.

The easiest way to build an absolute URL is to rely on the require.resolve function to produce an absolute path. This function constructs an absolute path name of a file whose actual path is relative to the JavaScript source code that disignates it. Using require.resolve ensures that if the whole source code of the application is moved into another directory, the absolute path of the HTML resource will remains correct.

Using an absolute URL has the drawback of exposing the directory hierarchy of the server disk. This is generally unaccaptable for production servers. Unfortunately, relative URL can generaly not be used because the URL forged to represent services that are prefixed with /hop do not correspond to actual disk directories. The easiest workaround consists in defining another service whose only purpose is to serve local file and then to create the URL by invoking that service.

Example:

service resource() {
   return <html>
     <ul>
       <li> An image accessed via an absolute path:
          <img src=${require.resolve( "./hop.png" )}/>
       </li>
       <li> An image accessed via a service:
          <img src=${getResource( "./hop.png" )}/>
       </li>
     </ul>  
   </html>
}

service getResource( path ) {
   return hop.HTTPResponseFile( require.resolve( path ) );
}
   
console.log( "Go to \"http://%s:%d/hop/resource\"", hop.hostname, hop.port );

In this example, the first image URL is absolute. It will refer to the actual path on the server disk of the image to be rendered. The second image URL uses the service getResource. The expression getResource( "./hop.png" ) builds the URL corresponding to the invocation of the service with a relative file name. The implementation of that service merely consists in building the absolute path an returning that very file.

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:

Example

A basic 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:

<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.

Hop.js tags

In addition to standard HTML5 tags, Hop.js supports the following tags.

<SVG:IMG [attributes]>

An SVG image. The attributes are:

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.