Warning: Add a preview of the incriminated code during mouse over

[fraxken]

One of the current problem of the warning popup is that it is difficult to find the exact location of the code with unpkg (because there is no line count on unpkg). So most of the time we have to search for the github (but sometimes we are looking at a old version so this it can become very annoying to retrieve the code).

The goal of this feature would be to show the code when the mouse go over the line (or maybe just a given column). It reminds me a little bit of the github feature

A little div with the code in it (with no syntax highlight at first.. step by step). The code can be retrieved on unpkg.

[tony-go]

Hi 👋 Thomas

So the idea could be:

• Add the line of code in the warnings property items (nsecure-result.json)
• Use it in the openWarningsModal/warningModal function to display it

Sounds good ?

I think this line is a good starting point?

Do you think js-x-ray will provide us the line of code? (I'll dig otherwise)

[fraxken]

Hey,

Each warnings has a SourceLocation (except parsing-error because it mean the AST parser has failed on the given file so this is out of the scope for this feature).

https://github.com/fraxken/js-x-ray/blob/master/index.d.ts#L42
[[start line, start column], [end line, end column]]

And this is what "position" column show on the UI.

This feature is about fetching and displaying the code from unpkg with this information on the front-end. Nothing has to be updated on the back-end.

[tony-go]

Thanks, @fraxken for the answer ^^

Yeah, it's pretty obvious for the parsing errors (I hope that packages don't contains code with an invalid AST ahhahah 😭)

I better understand now ^^When I read the issue at first the sentence "(because there is no line count on unpkg)" let me think that we could find an alternative to unpkg. My bad :)

I try to send request to UNPGK (unpkg.com/:package@:version/:file) with a fetch and they did not send me a JSON or something usable. After few tries I found that this request:

fetch("https://unpkg.com//content-disposition@0.5.3/index.js")
    .then(res => res.body)
    .then(body => body.getReader()) // streams love ❤️ 
    .then(reader => reader.read()
        .then(res => console.log(new TextDecoder("utf-8").decode(res.value)))
    )

Send me back a big string with all the code:

/*!
 * content-disposition
 * Copyright(c) 2014-2017 Douglas Christopher Wilson
 * MIT Licensed
 */

'use strict'

/**
 * Module exports.
 * @public
 */

module.exports = contentDisposition
module.exports.parse = parse
...

Im feeling weird about the fact that we get back the all file for a line 😩 . I'm probably wrong, tell me so ^^

[fraxken]

You can test on the UI too by clicking on the table "file" column. Check:

• https://github.com/ES-Community/nsecure/blob/master/public/js/popup.js#L35
• https://github.com/ES-Community/nsecure/blob/master/public/js/popup.js#L52

So the idea is to fetch the code only when we need it on the UI. And yeah we have to fetch the whole code just to retrieve few lines (finding a better solution is not excluded..).

[tony-go]

Okay :) I'll try to submit a first shot in the next days 🤟🏼🤟🏼🤟🏼