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 - We added support to analyze
.vue
file. - Analysis improvements - Enhanced support for outer-scope variable.
- Improvements for React rules - Support React rules more precisely.
- New rules - New rules for common pitfalls.
- About the pull request check - Changes in the pull request check.
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
- MISSING_ELSE_KEYWORD - Check for missing
else
keyword inelse if
sequence
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