Table of Contents

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:

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.

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.


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.


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


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

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. For that, it must be first mentionned in a script tag of the head of the web page, using the special attribute module. Then, it can be required using the same syntax as any regular server-side module. The src attribute of the script tag must exactly match the path mentioned in the require call. See API HTML for details.


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 a script tag of the head element of the main document.


const mod1 = require( "./mod1.js" );

service requirec() {
   return <html> 
       <script src="./mod1.js" module="hopscript"/>
       <script src="./mod2.js" module="hopscript"/>
       <script defer>
          var mod1 = require( "./mod1.js" );
     <button onclick=~{ document.body.appendChild( mod1.hello() ) }>
       click me

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


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

var s = "";

s += "hello";

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


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