Merge pull request #12 from snyk/decorate-package.json

feat: display vulns on dependencies in package.json

CHANGELOG.md

@@ -20,3 +20,4 @@ Readme update
 - feat: adds support for ajax.aspnet.com
 - test: adds CDNjs scenario
 - fix: do not scan local modules
+- feat: decorate dependencies in package.json

package.json

@@ -26,7 +26,8 @@
     "onLanguage:javascriptreact",
     "onLanguage:typescript",
     "onLanguage:typescriptreact",
-    "onLanguage:html"
+    "onLanguage:html",
+    "onLanguage:json"
   ],
   "keywords": [
     "import",

src/extension.js

@@ -4,6 +4,7 @@ import {
   JAVASCRIPT,
   TYPESCRIPT,
   HTML,
+  PJSON,
 } from './getImports';
 import * as vscode from 'vscode';
 import { calculated, flushDecorations, clearDecorations, clearShown} from './decorator';
@@ -30,7 +31,7 @@ export function activate(context) {
       logger.log('🔓 Using anonymous API');
     }
 
-    [JAVASCRIPT, TYPESCRIPT, HTML].forEach(language => {
+    [JAVASCRIPT, TYPESCRIPT, HTML, PJSON].forEach(language => {
       context.subscriptions.push(
         vscode.languages.registerCodeActionsProvider(
           language,
@@ -219,5 +220,9 @@ function language({ fileName, languageId }) {
     return HTML;
   }
 
+  if (languageId === 'json' && fileName.endsWith('package.json')) {
+    return PJSON;
+  }
+
   return undefined;
 }

src/getImports/index.js

@@ -3,6 +3,7 @@ import {
   TYPESCRIPT as TYPESCRIPT_LANG,
   JAVASCRIPT as JAVASCRIPT_LANG,
   HTML as HTML_LANG,
+  PJSON as PJSON_LANG,
 } from './parser';
 import nativePackages from './native';
 import {
@@ -16,6 +17,7 @@ import validate from 'validate-npm-package-name';
 export const TYPESCRIPT = TYPESCRIPT_LANG;
 export const JAVASCRIPT = JAVASCRIPT_LANG;
 export const HTML = HTML_LANG;
+export const PJSON = PJSON_LANG;
 export const clearPackageCache = _clearPackageCache; // this is weird…
 
 export function getImports(fileName, text, language) {

src/getImports/packageJsonParser.js

@@ -0,0 +1,37 @@
+export function getPackages(fileName, source) {
+  const packages = [];
+
+  const lines = [];
+  source.split(/\r?\n/).forEach(function(line) {
+    lines.push(line);
+  });
+
+  const pjson = JSON.parse(source);
+
+  for (var dep in pjson.dependencies) {
+    var p = {};
+    p.fileName = fileName;
+    p.name = dep;
+    p.loc = findLoc(dep, lines);
+    p.line = p.loc.start.line;
+    packages.push(p);
+  }
+
+  return packages;
+}
+
+function findLoc(dep, lines) {
+  const line = lines.find(x => x.includes('"' + dep + '"'));
+  const index = lines.indexOf(line) + 1;
+
+  var loc = {
+    start: {},
+    end: {},
+  };
+
+  loc.start.line = index;
+  loc.start.column = line.indexOf('"');
+  loc.end.line = index;
+  loc.end.column = line.length - 1;
+  return loc;
+}

src/getImports/parser.js

@@ -1,16 +1,20 @@
 import { getPackages as getPackagesFromJS } from './babelParser';
 import { getPackages as getPackagesFromHTML } from './htmlParser';
+import { getPackages as getPackagesFromPJSON } from './packageJsonParser';
 
 export const TYPESCRIPT = 'typescript';
 export const JAVASCRIPT = 'javascript';
 export const HTML = 'html';
+export const PJSON = 'json';
 
 export function getPackages(fileName, source, language) {
   if ([TYPESCRIPT, JAVASCRIPT].includes(language)) {
     return getPackagesFromJS(fileName, source, language);
   } else if ([HTML].includes(language)) {
     // could be === but maybe we'll expand?
     return getPackagesFromHTML(fileName, source);
+  } else if ([PJSON].includes(language)) {
+    return getPackagesFromPJSON(fileName, source);
   } else {
     return [];
   }