Load functions from external js files in a quarto doc

[boshek]

Description

This is probably such a noob question but...

How can we load functions in an external file so that they are available at render-time for a quarto doc?

Say I have this functions.js file:

sayGoodbye = function(x) {
    return 1 - x;
  }

And then I have this quarto doc:

---
format: 
 html:
   self-contained: true
---

## Working function
```{ojs}
sayHello = function(x) {
 return 1 +  x;
}

sayHello(3);
sayHello(13);
```

## Attempts to load it
```{ojs}
import { sayGoodbye } from './functions.js';

sayGoodbye(3);
```

```{ojs}
import { sayGoodbye } from 'functions.js';

sayGoodbye(3);
```

```{ojs}
require('functions.js');

sayGoodbye(3);
```

These all failed at the import/require stages. Any suggestions? It is so nice both from a code modularity perspective and also from a readability to have those tucked away in a separate file. I feel like i must be missing something obvious.

[mcanouil]

To note this is unrelated to Quarto.
You should take a look on https://observablehq.com/ and related resources.

This being said, here is an example:

Quarto document	JavaScript
--- title: "Quarto Playground" format: html --- This is a playground for Quarto. ```{ojs} import { myFunction } from "./myModule.js"; myFunction(); ```	function myFunction() { // function body return 1; } export { myFunction };

Edit: from the documentation https://quarto.org/docs/interactive/ojs/code-reuse.html#modules

[cscheid]

@mcanouil Sorry, but @boshek is right here; our support for OJS goes beyond what ObservableHQ does. We explain a bit of that https://quarto.org/docs/interactive/ojs/

(@boshek, sorry about this; Quarto is a big system, and this part is not very widely advertised.)

[mcanouil]

@cscheid so the import for JavaScript is not an Observable feature?
No needs to be sorry, as I said, I am no Observable expert so I double checked and found the same thing without any link to Quarto, so I just assumed it was Observable feature.

I have to admit that now I am a bit confused about what Quarto adds or not to Observable ...

Should a new section in https://quarto.org/docs/interactive/ojs/libraries.html be added to show the example I shared then?

[cscheid]

@boshek one issue here is that OJS doesn't work well withself-contained: true, exactly because of javascript imports.

You'll find that the following works:

---
title: ojs import test
---


```{ojs}
import {myFunction} from "./myModule.js";

myFunction(3);
```

myModule.js:

export function myFunction(x)
{
    return x * x;
}

However, you will need to serve this page from a http or https server (instead of the local file:// scheme), because javascript module imports are only supported in the http and https protocols.

[cscheid]

@cscheid so the import for JavaScript is not an Observable feature?

It's not only an observable feature. We enrich it by allowing users to import directly from .js files, from .ts files, and from other .qmd files, in addition to importing it from other observablehq notebooks.

[mcanouil]

With what you explained about importing local files.
I definitely think this should be part of https://quarto.org/docs/interactive/ojs/libraries.html.

[cscheid]

We do document it here: https://quarto.org/docs/interactive/ojs/code-reuse.html

[mcanouil]

So I completely missed this from the documentation even in search as the actual answer to the main question is https://quarto.org/docs/interactive/ojs/code-reuse.html#modules.