'Is there a detailed documentation on how to create own jsdoc templates?

Short version: If I wanted to develop a completely new jsDoc template from scratch, what would I have to read to understand what jsDoc does, what interface my template must provide and what data I get to work with?

Long version: I've been using jsDoc for a while now and have come across some tags that I would like to add and overview pages that I would like to have generated out of my documentation. Up to now I solved all my "user problems" with usejsdoc.org. I even managed to add a new jsdoc plugin that adds some tags. However, I can't find any developer documentation on how to create templates for jsdoc. I use ink-docstrap so I clicked my way through the template-folder (publish.js, /tmpl, etc.) and somehow got the idea of how everything works. But its very very time consuming.

What should I read to become a jsDoc template pro?

jsdocjsdoc3


Solution 1:[1]

These instructions are the closest I could find:

To create or use your own template:

  1. Create a folder with the same name as your template (for example, mycooltemplate).
  2. Within the template folder, create a file named publish.js. This file must be a CommonJS module that exports a method named publish.

For example:

/** @module publish */

/**
 * Generate documentation output.
 *
 * @param {TAFFY} data - A TaffyDB collection representing
 *                       all the symbols documented in your code.
 * @param {object} opts - An object with options information.
 */
exports.publish = function(data, opts) {
    // do stuff here to generate your output files
};

To invoke JSDoc 3 with your own template, use the -t command line option, and specify the path to your template folder:

./jsdoc mycode.js -t /path/to/mycooltemplate

Failing that, you can read the source code!

Solution 2:[2]

I am running into a similar difficulty with lack of documentation. There is a GitHub issue that has been open for 7 years on this: Provide docs that explain how templates work.

The only example I've found so far of a custom template that doesn't look like just a modified version of the default is Ramda's documentation. It looks like they use a completely custom publish.js script that uses handlebars.js instead of underscore.js templates, constructs a non-hierarchical nav, pulls info from @sig and @category tags, and uses links to github for 'view source' instead of rendering its own html pages for source code.

Some of their code will be difficult to understand unless you are familiar with Ramda and functional programming (they use Ramda itself in their version of publish.js) but dumping out the values of data and docs during execution should help provide insight into what is going on.

It is helpful as well that their template is a single file so you don't have to jump between a lot of partial template files to follow how the doc is constructed.

Solution 3:[3]

I've just published my own new jsdoc theme. What I did is I simply copied the default template: https://github.com/jsdoc3/jsdoc/tree/master/templates/default, and worked on that.

I also managed to add grunt with the following features: * transcompile + minify js files * parse sass styles and minify them * refresh the docs when you change something

You can see how it works here: https://github.com/SoftwareBrothers/better-docs

Solution 4:[4]

you can customize one of existing templates (default, haruki or silent):

  • go into node_modules/jsdoc/template and grab on of them into your app directory outside node_modules.

  • feel free to rename the dir ex: jsdoc-template.

  • open jsdoc-template update/customize the content as you want.
    ex: open publish.js find Home and replace My Js App.

  • update jsdoc.json by adding:

"opts": {
  "template": "jsdoc-template"
}

another option to use one of those templates too: jsdoc3 template list examples

Solution 5:[5]

Followup to my previous comment about Ramda's JSDoc template. I've since created a customized version of it and published it on GitHub at https://github.com/eluv-io/elv-ramdoc

This is tailored for my company's projects, but it may be helpful as another learning tool. It adds a 'Show private' checkbox, updates Bootstrap to v5.13, replaces Handlebars with Pug, adds JSDoc comments to the publish.js script itself, and supports setting an environment variable to dump data to console during doc generation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Michael Parker
Solution 3 wojtekk
Solution 4 Muhammed Moussa
Solution 5 Michael Parker

Related Questions