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:
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 byrequire
is theexports
module property..json
, the module is a JSON file. The JSON object is parsed and returned as the result of therequire
call..html
, the module is a HopScript HTML expression, which is the result of therequire
call.
When id
is 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. 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.
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 a script
tag
of the head
element of the main document.
requirec/requirec.js
const mod1 = require( "./mod1.js" );
service requirec() {
return <html>
<head>
<script src="./mod1.js" module="hopscript"/>
<script src="./mod2.js" module="hopscript"/>
<script defer>
var mod1 = require( "./mod1.js" );
</script>
</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 <button onclick=~{ alert( "s=" + s ) }>${s}</button>;
}