January 2018 (version 1.10.0-beta)

1.10.0 Update

Happy new year! 🎊 🎉

This year we are going to do our best. Keep a watchful eye on us.

We've released a 1.10.0 DeepScan service.

Keep reading for the highlights for this release.

Release Summary

This version includes a number of updates that we hope you will enjoy. The key highlights are:

Vue.js support

While we have been supporting React rules actively, we have noticed we can't ignore Vue.js by its growth.

As a first step toward Vue.js support, we enhanced our analysis targets to include .vue files. (For full listings of analysis targets, see here)

So, you can see the analysis results for the <script> code in Vue.js single file component.

As of Demo, "Vue component" configuration was added. When you paste code, select "Vue component" in Configuration combo and just analyze.

Analysis Improvements

Enhanced support for outer-scope variable

We've further enhanced the analysis to handle complex use of outer-scope variables. Let's see an example:

let readyMap, queueMap;

function consumeQueue(element) {
  const callbacks = queueMap.get(element, []) || []; // Number of arguments passed to 'WeakMap.prototype.get()' should be 1. But 2 arguments are passed.
  queueMap.delete(element);
  callbacks.forEach(callback => callback());
}

export default function contentReady(element, fn = () => {}) {
  if (readyMap === undefined) {
    readyMap = new WeakMap();
    queueMap = new WeakMap(); // queueMap is initialized here as a WeakMap type
  }

  addCallback(element, fn);

  if (isContentReady(element)) {
    consumeQueue(element);
    return;
  }
  ...
}

Now, DeepScan is aware of the type (WeakMap) of an outer variable (queueMap).

The developer might have confused the second argument of WeakMap.prototype.get() as a default value for non-existing key. But, it does not apply and the default value is actually specified by || [].

Provide the location of alarm cause by using React PropTypes declaration

To aid developers in fixing issues, we are taking a lot of effort to provide the location of alarm cause. We now support React PropTypes declaration as a cause. Let's see an example:

import React from 'react';
import PropTypes from 'prop-types';

class ProductCreate extends React.Component {
    static propTypes = {
        site: PropTypes.shape( {
            ID: PropTypes.number,
            slug: PropTypes.string,
        } ),
    };

    render() {
        const site = this.props.site;
        const isValid = 'undefined' !== site && this.isProductValid(); // Condition ''undefined' !== site' is always true at this point. The value of variable 'site' is originated from the prop type declaration at line 6.
        const isBusy = Boolean( actionList );
        const saveEnabled = isValid && ! isBusy;

        return (
            <Main className={ className } wideLayout>
                <ProductHeader
                    site={ site }
                    onSave={ saveEnabled ? this.onSave : false }
                />
            </Main>
        );
    }
}

The alarm is caused by this.props.site having an object value because of the PropTypes declaration at line 6. The developer wrongly compared it with 'undefined' string value.

Improvements for React Rules

Precise application for JSX

Previously, React rules were applied for all JSX expressions. However, JSX is also used for other frameworks such as Preact and Vue.js. Now, we apply React rules only when the file actually uses React.

And in this context, REACT_JSX_BAD_COMMENT has been changed to JSX_BAD_COMMENT.

REACT_INEFFICIENT_PURE_COMPONENT_PROP

This rule applies when newly created object is always used as a `React.PureComponent` prop. We enhanced it to detect newly created objects by the JS and React API.

New Rules

About the Pull Request Check

In the 1.8.0 release, we changed the pull request check as to be successful even when unresolved issues exist.

By some stabilization, now we restore it. So the pull request check in GitHub page will show a proper 'Failure' mark when there are unresolved issues.

Also, when there are two or more DeepScan projects for the repository, we will harmonize the pull request checks for all the projects and show a comprehensive result in GitHub page.

Miscellaneous

  • Update Open Source Report which shows the inspection results of 200 JavaScript projects in GitHub:
    • Inactive or non-impactive projects removed: naver/egjs, naver/jindojs-jindo, google/traceur-compiler, NUKnightLab/TimelineJS, Modernizr/Modernizr
    • New projects: sproutcore/sproutcore, SAP/openui5, swagger-api/swagger-ui, RocketChat/Rocket.Chat, naver/billboard.js
  • Support the analysis of the commit which is rewinded
  • Depending on the span, display a date instead of just time in Trends chart
  • Display an alarm message as multi-line instead of one-liner in the file viewer

Bug Fixes

  • Add project-wide access control for some APIs