The js Feature (top-level)

Syntax

js <js-body> end

Description

Note: This page is about the top-level JS feature. _hyperscript also supports inline JS as a command, say, inside an event listener or function.

Top-level JavaScript can be used in a <script type=text/hyperscript> block, as shown:

js
    function regexFind(re, group, str) {
        return new RegExp(re).exec(str)[group];
    }

    return { regexFind };
end

function declarations inside a JS block will be exposed to the global scope (let, var, const declarations will not be exposed). As a result, this function can then be used in _hyperscript code:

<input type=text _="
    on input call regexFind('(.*)\+.*@.*', 1, my.value" />

If you don't want to expose all the functions, return an object containing those that you do want to expose:

js
    function regexExec(re, str) {
        return new RegExp(re).exec(str);
    }

    function regexFind(re, group, str) {
        return regexExec(re, str)[group];
    }

    return { regexFind };
end

js blocks can also be placed in workers:

worker MyWorker
    js
        function _regexFind(re, group, str) {
            return new RegExp(re).exec(str)[group];
        }
    end
    def regexFind(re, group, str) return _regexFind(re, group, str) end

this inside a js block is the global scope (window, or self in workers).

Note on end

end cannot appear inside JS code as an identifier. However, it can appear in string literals ("end", 'end', not `end`).

Here are workarounds for some cases where you might need end in your JavaScript code:

// Don't:
var end = getTheEnd()
// Do:
var theEnd = getTheEnd()

// Don't:
getEndable().end()
// Do:
getEndable()["end"]()

// Don't:
var template = `this can only end ${good ? 'well' : 'badly'}`
// Do:
var template = `this can only ${"end"} ${good ? 'well' : 'badly'}`

// Don't:
var regex = /end (.*)/
// Do:
var regex = new RegExp("end (.*)")