Reference · Browser

js_new

signature

js_new(str, any...) -> any

What it does

Makes an object of a class the page's scripts define, by its dotted name, with the arguments given to its constructor: js_new("Chart", el, config) is new Chart(el, config). The object's methods and properties are then fields: chart.update(), chart.destroy(). It runs in the browser, from a component; while the server renders the component it gives null. A name the page does not have is an error value.

A library named on a client line is called the same way, as JavaScript reads it: client "https://.../chart.umd.min.js" use Chart, then Chart.new(el, config) is js_new("Chart", el, config), and the page loads the script itself (see JavaScript libraries).

Examples

in a program

component Sales(points: list) {    state chart = null    <canvas @mount={(el) => {        chart = js_new("Chart", el, { type: "line", data: points })        () => chart.destroy()                   // when the canvas leaves the page    }}></canvas>}route GET / = <html><head><script src="/assets/chart.js"></script></head>                    <body><Sales points={load_points()}/></body></html>

Edge cases

The name is written in the code, as a string: a variable is refused when the program loads (`js_new` needs the name of what it calls written out, like js_new("Chart", ...)), as are Function and the other names js refuses.
A name the page lacks gives the error value js_new: Chart is not defined on this page, so the component can show that the library is missing instead of stopping. A name in another case says the one the page has: (did you mean Chart?).
A name that is on the page but is not a class or function (js_new("document")) is a runtime error in the browser: `js_new`: document is not a class.
The object is kept in state or a local as it is; its fields can be read and set, and a Quillo function given to its methods (marker.on("click", () => ...)) is called with as many arguments as it declares.
Calling it in the component's own code (not only in @mount) makes the component load its bundle as soon as the page is idle.
On the server it gives null, whatever the name.
quillo check refuses a first argument that is not a string: js_new(42) is argument 1 of `js_new` must be str, got int.

print(js_new("Chart", 1, 2))print(js_new("Map") ?? "no page")

output

nullno page

Errors

A first argument that is not a string is a runtime error on the server, with the same message as js.

this one fails

print(js_new(42))

output

line 1: `js` takes the name of what it calls first: js("Chart", ...)

Chaining

The object is what gets chained, through its methods:

in a program

let map = js_new("L.Map", el, { center: [51.5, -0.1], zoom: 12 })map.on("moveend", () => { center = map.getCenter() })

Thread 0 posts

On js_new(): questions, tips, corrections, and code that uses it.

No posts yet. The first one opens the thread.

Edit this page on GitHub · every example's output was made by running it (tools/refcheck.mjs) · questions on Discord or r/quillo