DEV Community

Honza
Honza

Posted on

JSDoc – destructured object literal

#javascript #jsdoc #es6 #help

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, };
Enter fullscreen mode Exit fullscreen mode

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 { ... }
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (0)