Lua
Last updated
Last updated
Luau is a typed scripting language derived from Lua. Instead of JavaScript, we use Luau to power Web X.
Note: We say "Luau" as it is what we use in our backend, but you do not need to install it. You can write regular Lua and your code will work fine.
The Luau API is as simple as learning two things: you can SET and you can GET. You can GET to access elements from your page's HTML++, and you can SET to modify them.
In fact, the function to get an element is just called "get".
Much shorter compared to JS
Note that we use the same function to get items by their tag name or by their class.
Remember the end of the HTML++ page, where we told you to avoid setting a class name with the same name as a tag? It's because of this, get("a") will get an anchor, so you should not give an item a class name of class="a".
What about "
querySelectorAll()?
Just add "true" to the get function to get all the elements of the same class / tag name.
When you don't pass true, if you select a tag or a class name that is repeated, the first one in the HTML++ will be taken.
Now, to interact with the element, you can use get_{prop} and set_{prop} functions. Here's an example:
It's that easy! Scroll to the bottom for a list of available SET and GET directives.
The Luau API has also support for detecting events. Similar to JS's onclick. To use them, create a function that's called on an event, just like you would do in JS. Example:
on_input is only supported by <input> and <textarea>
Output from the print() function will be logged by Napture Logs. As we told you before, you can open them with CONTROL + SHIFT + P
If you need to make an HTTP request to interact with an API, you can use the fetch function. It should look like this:
Variable names are self explanatory, you give the function the URL you want to fetch, the HTTP method you want to use, which can be "GET", "POST", "DELETE", etc..., the headers of the HTTP request, and the body, which would be the content itself of your request.
All the get_{x}, set_{x} and on_{x} available functions.
On every function, whenever x is expected to be a string or a number, it can always be passed both as a string/number directly or as a Lua variable.
Function
x
y
Return
Explanation
get(x, y)
x must be the tag name or class name of the target item. It should be a string.
Can be true or can just not be passed at all.
A "Tag" class (or more, if true), functions below.
Allows to get HTML tags to interact with. Gets an element using it's tag name or class name. If you pass true as the second argument, every instance with the same class / every instance of the tag will be selected at once. If not, the first match will be chosen.
Function
Return
Explanation
get_contents()
If there is any kind of string contents (like text) inside of the target item, it returns it as a string. If not, returns an empty string ("").
Gets the text content of any item.
get_href()
If href exists in the target item, returns it as a string. If not, returns an empty string ("").
Gets the href value of an anchor.
get_source()
If src exists in the target item, returns it as a string. If not, returns an empty string ("").
Gets the src value of an image.
get_opacity()
If opacity exists, returns it as a number. Keep in mind if you don't give an opacity value to an item, it defaults to 1, so it can't be null nor an empty string.
Gets the opacity value of any item.
Example usage of GET and GETTING FUNCTIONS
set_contents(x)
x should be a string.
Gets the text content of any item.
set_href(x)
x must be the URL you want to set the href property to. It should be a string.
Sets the href value of an anchor.
set_source(x)
x must be the URL or base64 that you want to set the src property to. It should be a string.
Sets the src value of an image.
set_opacity(x)
x must be the value you want to set the opacity property to. It should be a float between 0 and 1.
Sets the opacity value of any item.
set_visible(x)
x must be the value you want to set the visible property to. It should be a boolean value, true or false.
Example usage of SET
Event functions do not have a return. As showed before, put them inside of a function. Every time they get triggered the code of the functions will be executed.
on_click(function)
A mouse click.
Supported by all tags. Each click over the item triggers it once. NO ARGUMENTS GIVEN.
on_input(function)
Editing the content of a field.
Supported by <input> and <textarea> tags. Each change triggers it once. This means, if I type 2 letters and remove 1 (3 changes), it should be called three times. STRING ARGUMENT (#1) GIVEN.
on_submit(function)
Submitting the content of a field. Basically hitting ENTER key with the field focused.
Supported by <input> and <textarea> tags. Each hit triggers it once. NO ARGUMENTS GIVEN.
Example usage of EVENTS
print(x)
x can be any type.
No return.
Will print x to Napture Logs.
fetch(x)
x must be an array with the contents of the HTTP request.
Returns the response of the HTTP request as a string.
Allows to make HTTP requests to fetch APIs.
And that's it! You're ready to write fully functional WebX code! However, we're not done yet. Your beautiful code must be published to the WebX somehow, right? Let's find out about that.
Upcoming feature - Not released yet (as of B9 1.2.2) - Changes if the item is visible or not. It's just visual, elements never get removed from the code and are always accessible from there.