Enable source-mapping

[SzaboMate90]

Hello Guys!

Is there any way to enable source-mapping in lasso?
The problem is with the debugging, because there is only 1 page.browser.js file, that contains every js code, therefore, if a console error occurs, I cannot see from which file does it come.

Thank you in advance for your reply!

[patrick-steele-idem]

Hey @SzaboMate90,

Adding support sourcemap support is on our list of things to do, but the reason it is not a high priority is that in development you can easily disable bundling:

require('lasso').configure({
  bundlingEnabled: false,
  ...
});

This will result in each JavaScript and CSS file being in its own file and the HTML markup that gets generated to include the required JavaScript and CSS will not includes lots of <script> and <link> tags. In addition, the Lasso.js JavaScript module bundler maintains line numbers.

Let me know if you are having issues disabling bundling in development.

[SzaboMate90]

Hello Patrick!

Thank you for your quick replay, this what I was looking for :)

Thanks,
Mate

[scttdavs]

I'd also like to see sourcemaps added. If you use Less or Sass, it would be very helpful, as well as compiled-to-js languages (typescript, coffeescript, clojurescript, elm).

I think a good implemetation could look something like this (from a lasso plugin):

read: function(context, callback) {
    var path = this.path;

    fs.readFile(path, {encoding: 'utf8'}, function(err, src) {
        if (err) {
            return callback(err);
        }

        var compiledCode = coffee.compile(src, {
            bare: true,
            map: true
        });

        callback(null, {
            code: compiledCode.js,
            sourceMap: compiledCode.sourceMap
        });
    });
}

[patrick-steele-idem]

@scttdavs we're currently working on refactoring parts of Lasso.js (mostly related to the JavaScript module bundler) and I plan on investigating source maps at this time. Thanks for sharing the code snippet.

[yomed]

Another use case for this would be in calculating accurate code coverage. Mapping client code coverage to the original files in the code (before lasso compilation) is difficult without source maps. There are tools like https://github.com/SitePen/remap-istanbul which allows this as long as you have source maps available.

[CestDiego]

This would be a great feature. And not only useful for javascript but also for less,sass, etc as scttfavs pointed out

[patrick-steele-idem]

This is definitely one of the higher priority features that we plan on supporting in the near future.

[abiyasa]

Hi, is there any plan to support sourcemap in lasso? Would be nice to have since we're using Typescript and the compiler produces source map files. Unfortunately, can't find a way for lasso to include these sourcemap files to the static folder.

[maxmilton]

I'm surprised this isn't already a thing... how did you guys go so long without source maps?!

Source maps for production builds are super useful for debuging 🌟

Paired together with a service like sentry they're amazingly powerfull. Cool thing with sentry is you don't even have to make your source maps public — for high profile client sites we generate them but programatically put them in a secure place and link them to our sentry tracking. I'm sure other error tracking services have similar functionality.

Even in development they're very useful for projects which use some type of code preprocessors.

[StarpTech]

No progress for years. What's the status? @patrick-steele-idem

[DylanPiercey]

@StarpTech Lasso is currently in maintenance mode. We will continue to support lasso however there is no current plans to add any additional features.

For Marko users we plan to improve our tooling and samples with other bundlers such as web pack and rollup during this year.

[StarpTech]

Hi @DylanPiercey what are the reasons for this change? Is eBay migrating to webpack? Therefore there is no need for source maps ar eBay?

Lasso is currently in maintenance mode

I recommend to mention it in the readme before newcomers will invest in it.

[DylanPiercey]

@StarpTech the main value add of Lasso from our perspective is dynamic runtime builds and its great integration with the Marko ecosystem.

The runtime builds worked well for us when there was less going on at compile time. However with tools like babel, typescript and others being added to this pipeline chain it simply isn't scaling as well. The prebuild support is a step in the right direction but there are many other features Lasso would require to catch up with other bundlers. (Eg source maps, dynamic imports, tree shaking, etc).

I recommend to mention it in the readme before newcomers will invest in it.

We are not yet deprecating Lasso. It is still the simplest way to deploy Marko applications and we will continue to support that. However we want to make this just as easy with other bundlers. Once we have done this, and we have a sane migration strategy for existing Marko users, we will consider deprecating Lasso.

[StarpTech]

@DylanPiercey does exist a fully working boilerplate with markojs + webpack? That should include sourcemaps, css-preprocessor, hot-reload, multi-entrys (bundle for page-1, page-x) etc.. ? When yes, it would be awesome if you can share it or send me via email.

[DylanPiercey]

@StarpTech not currently but it is something that we are actively thinking about and beginning work on now. We will likely have a setup as you described available, followed shortly after by Marko 5.

[tigt]

@StarpTech there is now a Webpack + Marko example repo at marko-js-samples/marko-webpack