DevExtreme - SCSS, ES6 Modules, and Enhanced TypeScript Support (v20.2-v21.1)

In this blogpost, we’ll review important changes introduced to DevExtreme over our last two major release cycles, including style sheet migration to SCSS, introduction of ES6 modules, and TypeScript enhancements. Should you have any questions on these changes, please comment below or submit a support ticket via the DevExpress Support Center.

SCSS Support

As you know, most front-end developers prefer CSS language extensions (such as Less or Sass) versus pure CSS. These extensions support variables, reusable styles, modular design, and allow developers to write styles as if they were writing code.

DevExtreme has been using CSS language extensions since day one. Previously, our style sheets were written in Less. However, over the last couple of years Sass (specifically, the SCSS syntax of Sass) has gained popularity among the front-end community and major projects, such as Bootstrap and Material. Unfortunately, Less and Sass style sheets are incompatible with one another. Said simply, our Less style sheets could not be used in a Sass project. Based on usage and internal metrics, we decided to migrate DevExtreme style sheets to Sass.

Since v20.2, the devextreme npm package includes SCSS sources. You can modify SCSS variables and imports to create custom themes as needs dictate. Because our style sheets are modular, you can compile only those styles that you actively use within your project.

Please refer to the following discussion page to learn more: DevExtreme Style Sheets - Migration to Sass.

ES6 Modules

In our v21.1 release cycle, we added a set of ES6 modules to our npm package. ES6 modules allow DevExtreme code to be optimized via Tree Shaking and compatible with modern JS bundlers.

Note that the npm package also contains the old CommonJS version of DevExtreme modules for backward compatibility. In most instances, your bundler will switch to the ES6 version automatically.

Although the introduction of ES6 modules is a big step toward bundle size optimization, there’s still room for improvement. Our goal for upcoming releases is to further split the modules into smaller and more independent segments. You can track our progress and leave your feedback in the following discussion page: ES6 Modules.

TypeScript Enhancements

Also in our v21.1 major release, we enhanced event argument typings and separated jQuery types. Every event argument now includes a named type that you can use within your code:

import { AppointmentUpdatingEvent } from 'devextreme/ui/ scheduler;

function handleAppointmentUpdating (e: AppointmentUpdatingEvent): void {
       // ...
}

These types contain information about optional and read-only properties for an event object:

type AppointmentUpdatingEvent = EventInfo<dxScheduler> & {
  readonly oldData: any;
  readonly newData: any;
  cancel?: boolean | PromiseLike<boolean>;
}

We also separated jQuery types to ensure that they are used only with jQuery. For example, there were properties that previously had the following type: Promise<T> & JQueryPromise<T>. You could assign a jQuery promise to these properties even if your project did not use jQuery. From v21.1 onward, the properties accept JQueryPromise<T> only when jQuery is used, and Promise<T> otherwise.

In addition, we continue to expand our TS definitions. You can expect the following enhancements in future release cycles:

• Stricter typings (no any)
• Enhanced data layer typings
• More reusable types

Feel free to join the discussion on GitHub and share your specific requirements with us in this regard.

Your Feedback Matters

As always, should you have specific needs or wish to share your opinions with us, please post a comment below or engage us via our dedicated DevExtreme discussion pages.