JavaScript template docs don’t discuss exporting a data object and render function directly

[darthmall]

I can’t find anywhere in the documentation for JavaScript templates information about exporting a data object and a render function, like this:

export const data = {
  // ...
};

export function render () {
  // ...
}

I only discovered that it was possible to construct JavaScript templates this way when looking at the pagination docs, where the 11ty.js and 11ty.cjs examples show how you can export these directly without wrapping them in a class.

[Snapstromegon]

Hey @darthmall,
the data part is described here (right above the Raw Values part): https://www.11ty.dev/docs/languages/javascript/#:~:text=Use%20a%20data%20export%20instead.

And the render method is not recommended outside of class exports like here:
https://www.11ty.dev/docs/languages/javascript/#classes

I think the recommended way for the render function is to just export a function as the default export right now. Exporting a render function does the same thing though (I'm not sure why this version was used in the pagination docs though).

[darthmall]

I think there needs to be an example showing how to export the data object along with the function. For one thing, it’s very easy to miss this bullet point (I searched the page several times for this information specifically and didn’t notice it). For another, “Use a data export” is not as clear as an example, especially for people that are new to JavaScript.

Also, if exporting a render function is not the recommended way, we should probably also change the pagination docs. I’d be happy to open a separate issue for that, or it could be kept with this one.

[zachleat]

Yeah! It’d be great to have a Named Export section at the same hierarchical level as "Function" (https://www.11ty.dev/docs/languages/javascript/#function)

A PR for this would be super swell