DEV Community

loading...

JSDoc – destructured object literal

crs1138 profile image Honza ・1 min read

Here's a situation. We've got an ES6 module that we use for helper functions and constants across various other modules in the project. Within this module, I export an object literal that defines our breakpoints. So far, all is clear (however, if you see a possible improvement, please do let me know.

/**
 * # OurProject Helpers File
 *
 * This file should contain any js small script that helps other files.
 *
 * @module Helper
 * @since 1.0.0
 */

...

/**
 * Exports object literal with breakpoints matching those set in
 * `/library/scss/utils/_variables.scss` in the Rupture section. The values
 * represent screen width in pixels:
 *
 * @constant
 * @type {Object}
 * @default
 * @example
 * const breakPoints = {
 *     xs: 576,
 *     sm: 768,
 *     md: 992,
 *     lg: 1200,
 *     xl: 1400,
 * };
 */
export const breakPoints = {
    xs: 576,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1400,
};

Then I've got another ES6 module. Let's call it ScrollSlider. In this module, I need to import a couple of things from the Helper module. And use them. Amongst them is a couple of breakpoints. I define these within the module's scope and then use them in the class.

'use strict';
import { getOffsetTop, breakPoints } from './Helper';

/**
 * Parallax-like step-by-step slider used for example at `/app-builder`.
 *
 * @module ScrollSlider
 */

/**
 * ???? HOW WOULD YOU DOCUMENT THIS ????
 */
const { sm, md } = breakPoints;

/**
 * Used for creating instances of the scrolling slider.
 */
class ScrollSlider { ... }

Now the questions:

  • Is this a good way of defining the breakpoints within the ScrollSlider module?
  • I'd like the breakpoints to be mentioned on the ScrollSlider module documentation page, how do I get them there?

Discussion

pic
Editor guide