[don't merge] Source maps on server.js

[matteofigus]

Fixes #440

Still a WIP because I want to do some manual QA. Let's pair on this next week @nickbalestra

[nickbalestra]

why not cheap-module-eval-source-map? https://webpack.js.org/configuration/devtool/#devtool

[matteofigus]

I managed to spend some time on this and I think I made some progress, but still a wip.

In general, there are a couple of things that I had to change:

• node's vm, when in dev mode, needs the _package/server.js filename in order to attach vscode's debugger into the correct file. Now it seems to find the file.
• another thing is full source maps are needed with absolute file paths. Now when something throws, it seems to get to the right place and I see the original code.

There are 2 more blockers in order to fully make debugging in vscode work:

1. Babili source maps are broken. At the moment, in fact, it is disabled. An issue has been opened for months and unfortunately nobody is working on it :(
2. Another little problem is related to attaching the real server.js to the debugger when working on the _package/server.js. More specifically, being the watched dir containing the source in a subfolder with the same filename, vscode seems to not jump to the right file. So, breakpoints work, but instead of stopping inside the "real" file, they stop into a new "generated" tab called "read-only inlined content from sourcemaps" (look at the screenshot). The problem is this file is actually the already babel transpiled file, so the source code is a bit different. Still a huge progress, I would say, but not quite what I have in mind.

For reference, this is the launch.json that I am using:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Magic",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/../oc/src/oc-cli.js", // this is my local experimental oc
            "outFiles": ["${workspaceRoot}/error-page/_package/*.js" ],
            "cwd": "${workspaceRoot}/",
            "args": [ "dev", ".", "3030" ],
            "stopOnEntry": false,
            "sourceMaps": true
        }
    ]
}

It is worth noting that according to the docs I should use runtimeExecutable and runtimeArgs instead of program and args, but that seems not to work :( This should be equivalent and it works, despite less elegant 💃

I'll keep digging :)

[matteofigus]

Another update! I think I fixed blocker n.2.
Apparently, the infinite-loop-loader has some issues on not preserving source-maps. By just putting it after the babel loader, all worked. In addition, I added the retainLines option to the babel loader.
Now, I can correctly put a breakpoint on the server.js, and it stops inside the original code!

Said that, it looks like the only remaining blocker is babili plugin. By enabling it back, I can't get anything working.

[matteofigus]

I got a local copy that tackles 1. by running babili as preset instead of plugin. The downside is that the final dimension is slightly bigger, but it all works well with the debugger, so I think it is acceptable.

[nickbalestra]

For #1 are you replacing babili with the provided webpack uglify plugin? I think we might want to just set the env preset to target es2015 and safely use the uglify plugin on that.

[matteofigus]

Yes, that's the plan.

That's definitely another option. The thing we need to ensure, is that the final source map allows us to get back to the very initial structure for allowing debugging - which I understand is complicated.

[nickbalestra]

Yes. Actually I was thinking that perhaps we should minify/optimize only upon publishing, no need for that while on oc dev

[matteofigus]

As discussed with @nickbalestra this is now very close to be ready.
A bug I found involves the infinite-loop loader wrapper. When used, being that not handling sourcemaps, the line references don't match. Opened an issue and parking this until we figure that out: nickbalestra/infinite-loop-loader#3

[matteofigus]

Closing because of a newly branch and PR: #825