Using JavaScript in PixieBrix

You might use JavaScript in PixieBrix to transform data for your custom needs.

To do this, you'll use the Run Javascript Function brick.

This brick will replace the JQ brick for data transformation.

Writing Functions

To write a function, first add the Run Javascript Function brick to your mod.

Inside the Brick Configuration Panel, you can define a function, and pass arguments.

Currently, the JavaScript brick only supports the native web API methods in Chrome. To check if a method will work, reference Mozilla's Web APIs docs.

Supplying Arguments

Most functions will require arguments to process data.

Specify the arguments in the Arguments field below the function. Click Add Property to create an item. You can reference variables and outputs from other bricks, arrays of data, strings, other objects, numbers, or boolean values.

Referencing Arguments

You can reference defined arguments to the function in multiple ways (choose one):

Use args, like function(args) and set a const below the function like this: const { arg1, arg2 } = args;

If you'd like, you can also reference them directly via the params, like function({arg1, arg2}) or you can avoid setting a const and reference arguments as args.arg1 and args.arg2

Converting JQ Filters to JavaScript with ChatGPT

If you've been using JQ in existing mods, you'll find ChatGPT is helpful in suggesting a JavaScript function for your JQ filter.

JQ filters are used to transform input JSON data based on the user-defined script. JQ users create a filter to be performed on data. Whereas with JavaScript, you'll create a function and pass it arguments of data. If you're migrating from JQ bricks to JavaScript bricks, your data object will become your argument object, and you'll replace your filter with a function.

Here's an example of how you could use ChatGPT to help you create a function from a JQ filter.

Original JQ filter

map({const: .Prompt, title: .Title})

Prompt

You can use a prompt like this:

i have this jq filter: map({const: .Prompt, title: .Title})

write a javascript function for it

Output from ChatGPT

function jqFilterEquivalent(data) {
    return data.map(item => ({
        const: item.Prompt,
        title: item.Title
    }));
}

You might have to tweak it slightly, but ChatGPT is pretty good at giving you the JavaScript version.

Activate this mod and use the Quick Bar to post a JQ filter and the sidebar will return its JavaScript equivalent!

Troubleshooting/FAQs

My function isn't working. How can I tell if the error is in my JavaScript?

If you're experiencing any issues with your function, try running the function in a JavaScript playground to confirm there are no issues with the function.

Can I call multiple functions in one brick?

You can nest functions within the function, but you cannot have multiple top level functions in the same brick.

For example, this works: ✅

function ({x, y}) {
    function getSquared(z) {
        return z ** 2;
    }
    return getSquared(x) + getSquared(y);
}

This does not: 🛑

function getSquared(z) {
    return z ** 2;
}

function ({x, y}) {
    return getSquared(x) + getSquared(y);
}

I see Error running user-defined JavaScript Error in the brick run

Head to Logs tab, just above Brick Actions to see the specific error. The Page Editor don't expose this in the brick itself, but you'll be able to see details expanding the row with the error.