Way to make a js function accessible in Idyll?

Question

Title says it all. I'd like to be able to transform data using the derived variable syntax, but be able to write the transforming function in a different file for syntax help and legibilitiy

Answer 1

You can inject functions into Idyll by using a custom context as per the "runtime context" documentation

If you want to write custom code that reads or writes to Idyll's internal state, you can use the context API. This API provides events that fire whenever an Idyll variable is changed, and provides a function to push variable updates.

module.exports = (ctx) => {

  // The context has loaded,   // initial data is available   ctx.onInitialize(() => {
    const initialState = ctx.data();

    // Once the context has been initialized,
    // you can use the ctx.update() method
    // to modify data
    ctx.update({
       key: value
    })

  })

  // The application has mounted in the browser,   // the window object is available   ctx.onMount(() => {

  })

  // An update has been triggered,   // arguments contain only modified data   ctx.onUpdate((newData) => {

  })

}

To configure a custom context locally, you can point Idyll to the file where you've implemented this logic, in the package.json config.

"idyll": {   "context": "./my-context-file.js" }

Essentially you'll want to write your function, then add it to the context during the onInitialize event. Once you've done that, then your custom function should be usable from inside any idyll expression.