Code Reuse

As you build larger Quarto projects (like websites and books) that incorporate OJS, you’ll likely want to re-use code, data, and output across different pages.

Modules

JavaScript modules are directly supported in Quarto’s OJS blocks. For example, if we have the following source file square.js:

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

Then you can import and use the square() function as follows:

import { square } from "./square.js"
square(5)

  import {square as square} from "./square.js"

25

Data

You may be using Python or R to pre-process data that is then provided to OJS via the ojs_define() function (this is described in more depth in the Data Sources article). If you want to share data prepared in this fashion you can import it directly from another .qmd.

For example, here we import the co2data that we read and pre-processed with dplyr in data-sources.qmd:

import { co2data } from "./data-sources.qmd";
Inputs.table(transpose(co2data))

  import {co2data as co2data} from "./data-sources.qmd"

	year	max
	1,958	317.51
	1,959	318.29
	1,960	320.04
	1,961	320.58
	1,962	321.02
	1,963	322.25
	1,964	322.26
	1,965	322.17
	1,966	324.08
	1,967	325
	1,968	325.57
	1,969	327.38
	1,970	328.13
	1,971	328.93
	1,972	330.07
	1,973	332.48
	1,974	333.19
	1,975	333.95
	1,976	334.74
	1,977	336.93
	1,978	338.02
	1,979	339.26
	1,980	341.45

Output

You can import any reactive value from another .qmd file. Here, we’re reusing a chart directly from data-sources.qmd:

import { yearlyChart } from "./data-sources.qmd";
yearlyChart

  import {yearlyChart as yearlyChart} from "./data-sources.qmd"