Can vanilla JS/TS in a Quarto doc be monitored (reacted to) in OJS like an OJS value?

[jimjam-slam]

Description

Hey folks! Got a bit of an OJS deep dive that I wanted to throw to the community and team before I went too deep on it. @andrewpbray and I are working on a Quarto extension in which we have an injected JS dependency (which is available as a global in the doc). That extension includes an initialiser function that we'd like to wrap.

What I would love is if that initialiser returned an object with fields that could be reacted to in OJS.

For example, say my regular JS function returned an object like this:

let extensionState = {
  x: 2
}

I would like to be able to then have a user write an OJS cell like:

// generate x random numbers between 0 and 1 whenever extensionState.x changes
myArray = [...Array(extensionState.x).keys()].map(x => Math.random())

And have myArray react whenever extensionState.x changes.

In short, I suppose I want to create an object in JS (or TS maybe?) whose fields can act like Observable cells, having a value that can be monitored. I've seen and done examples of writing your own viewofs inside Observable (eg. writing a cell that yields and then updates its .value using a callback), but I'm not sure if something can be written outside the OJS framework and be injected like that. I can clearly access regular JS globals inside OJS, so I'm hoping there's a way to rig up something that acts like an Observable cell. Would anyone have any thoughts on that?

[jimjam-slam]

I'm hoping that something of the OJS runtime might be available for me to register an OJS value outside OJS!

[mcanouil]

Unfortunately I am not that familiar with Observable and how it can interact with pure JavaScript.
Hopefully, @cscheid can shed some light here.

[jimjam-slam]

No worries at all, @mcanouil! I'm hoping to do some tests in the next few days to see if I can mount a variable to the OJS notebook module. I can see that window._ojs exists, and that .window._ojs.ojsConnector has a mainModule that appears to (further down) contain variables being declared in my OJS blocks. I might start there to see if I can declare a variable of my own after the doc loads!

[jimjam-slam]

Experiment progress: https://jimjam-slam.github.io/quarto-experiments/inject-variable

[cscheid]

@jimjam-slam I was OOO last week and missed this. Are you still blocked? You know how to find me over email if needed!

[jimjam-slam]

No stress at all! I'm keen to have a bit of a poke around at this myself tomorrow when I have some free time, bit I'll def shoot you an email if I can't work it out! 😊

[jimjam-slam]

Got this to a state where I think it works for my use case! 🥳

Code: https://jimjam-slam.github.io/quarto-experiments/inject-variable/
Rendered: https://jimjam-slam.github.io/quarto-experiments/inject-variable/

✅ Was able to define a variable as a constant, then repeatedly redefine it as a new constant (eg. here, using Promises.delay to set it to a new random constant every second)
❌ Didn't work out how to set a variable to a generator function (as I would if I was writing directly in OJS), but given I need to give a callback to a JS framework and have that callback update the variable, I don't think this approach makes too much sense anyway.

Here's essentially what I did in an {=html} block:

```{=html}
<script>

  // wait 'til dom content is loaded before trying to touch the ojs module
  addEventListener("DOMContentLoaded", (event) => {

    // check for the ojs connector's presence first
    const ojsModule = window._ojs?.ojsConnector?.mainModule
    if (ojsModule === undefined) {
      console.error("Quarto OJS module not found")
    } else {
      console.log("Quarto OJS module found!")
    }

    // let's try calling variable.define() on the timer instead
    const anotherVar = ojsModule.variable();
    anotherVar.define("anotherVar", 23);

    // every second, redefine the variable to be a new random number
    setInterval(() => {
      anotherVar.define("anotherVar", Math.random());
    }, 1000);

  });


</script>
```

Then, in OJS (wither a chunk or inline):

And the value of `anotherVar` is ${anotherVar}.

[cscheid]

Yes, you found the long way to do it! 🚀 That makes an actual new OJS Observable, so it should play nicely with the rest of OJS as well.

We'd like to be able to wrap this stuff in a cleaner API in the future, so do let us know about your general experience with the feature. (And be careful about redefining existing built-ins! It's probably entirely possible to trounce over important bits of the OJS standard library)

[jimjam-slam]

Mmmm, yeah, thanks for the warning! I was thinking that we'd need to alert extension users that we were injecting a variable into their OJS, but I hadn't considered that we'd also need to watch out for the standard library too. I'll do some checks as we implement this! 😊