DEV Community

Honza
Honza

Posted on

1

JSDoc – destructured object literal

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?

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs