HopScript Modules

Hop.js supports Nodejs Modules. The import/exports mechanism, the file name resolution, the caching, the module object, and the variable scoping are compatible in Hop.js and Node.js. Hop.js adds several extensions to Nodejs Modules.

require( id [, language ] )

The arguments are as follows:

id is a string that designates the source file containing the module.
language is an optional string denoting the implementation language of the module. The supported languages are:
- javascript;
- html;
- hopscript.

When a language is specified and when this language is not hopscript, all the syntactic extensions of Hop.js are disabled (service, HTML syntax, ${, and ~{ mark). Requiring a module specifying the javascript language is then useful to require a module that uses the extra HopScript keywords as normal identifiers.

Modules are loaded differently depending on their source file suffix.

.js, the module is source file module. It is loaded as plain source code. The value returned by require is the exports module property.
.json, the module is a JSON file. The JSON object is parsed and returned as the result of the require call.
.html, the module is a HopScript HTML expression, which is the result of the require call.

When idis a directory, the loader looks in the directory for a file named package.json to tell how to load the module.

When id is an http url, Hop.js assumes that the file is to be retrieved from a remote Hop.js server, and issues http requests to the given server to get the file contents. Modules required within the retrieved file are downloaded from the same location, except for system modules which are assumed to be available locally.

Example

The module htmlr.js requires the file htmlr.html. This second file is parsed, the Hop expressions it contains are evaluated, and the constructed HTML Dom tree is returned as the result of the require call.

htmlr/htmlr.js

service htmlr() {
   return require( "./htmlr.html" );
}
         
console.log( "Go to \"http://%s:%d/hop/htmlr\"", hop.hostname, hop.port );

htmlr/htmlr.html

<html>
  <head css=${module.filename.replace(".html",".hss")}/>
  <div class="div1" onclick=~{alert( "you have clicked 1" )}>1</div>
  <div class="div2" onclick=~{alert( "you have clicked 2" )}>2</div>
</html>

Client Side modules

Modules can be imported from either server-side or client-side code. However, a module can be imported from a client-side only if it has been cited in the require attribute of the <head> element of the HTML document that is loaded on the client. The require attribute can either be a string or an array of strings. See API HTML for details.

Example

Modules can be required by either server-side source code and client-side source code. This example shows this latter possibility. The module mod1.js and mod2.js are used by document constructued by the service requirec but only the module mod1.js is explicitly required by the HTML document. The module mod1.js requires the module mod2.js. In this cases, both modules have to be mentionned in the require attribute of the head element of the main document.

requirec/requirec.js

service requirec() {
   return <html> 
     <head module= ${[ "./mod1.js", "./mod2.js" ]}>
       ~{
          var mod1;

          window.onload = function() {
             mod1 = require( "./mod1.js" );
          }
       }
     </head>
     <button onclick=~{ document.body.appendChild( mod1.hello() ) }>
       click me
     </button>
   </html>;
}

console.log( "Go to \"http://%s:%d/hop/requirec\"", hop.hostname, hop.port );

requirec/mod1.js

var mod2 = require( "./mod2.js" );

var s = "";

s += "hello";

exports.hello = function( x ) {
   return mod2.hello( s );
}

requirec/mod2.js

exports.hello = function( s ) {
   return <div onclick=~{ alert( "s=" + s ) }>${s}</div>;
}

Hop.js / module

Table of Contents

HopScript Modules

require( id [, language ] )

Example

Client Side modules

Example