Source Maps?

[crisward]

Is anyone working on source maps for riot tags?

These would be really useful for code coverage, I currently do my code coverage on the compiled files but see the original source would be useful. Also debugging when all I have is large bundles.

If no one is, I may have a go. Not that I know anything about source maps...

[aMarCruz]

@crisward , I'm working in precompiled expressions and source maps is a low priority TODO. However, any PR is wellcome.

[cognitom]

👍

[tipiirai]

👍

[GianlucaGuarini]

@aMarCruz Any progress on this? May I help you here? Ping me in private so we can discuss about this feature.. I would like to roll out the new version 3.4.0 really soon

[crisward]

I made a start but don't have a lot of time to work on this at the moment. It would need to link in with the source maps for coffee,ts,babel,jade etc. Jade doesn't appear to create sourcemaps at the moment, but there are browserify jade transforms that do. ie. https://github.com/sidorares/pugify so it's not impossible.

[GianlucaGuarini]

This feature would be awesome.. at moment I would like to just make a simple version of it avoiding to chain the pre/post compiler sourcemaps

[crisward]

I've moved this a little further along, but I need to enable with a compile flag, but I'm not sure where this should be enabled

See
https://github.com/crisward/compiler/blob/master/src/core.js#L1068

I'm guessing this would be the responsibility of the riot-cli tool, so I'd need to be able to return a method which can create the sourcemap in it's various forms ie, inline base64, and .json file. and handle the case of the concatenated file option. Perhaps a flag like

riot my.tag --sourcemap=inline
riot my.tag --sourcemap=my.map.json

At the moment it's only translating the line number of the html, it'll also need to handle script and style elements.This still needs a lot of work to be useful.

[GianlucaGuarini]

@crisward cool can you make a pull request please?

[GianlucaGuarini]

@crisward any progress on this?

[crisward]

Sorry, it's more work than I first envisaged. I've never added source map support to any language before so I didn't really know what I was getting myself into. I think I'd need to somehow combine the source maps from the various compile processes to match the final output back to the source and to be honest I'm a bit out of my depth, especially with the very limited time I have to spend on open source.

If anyone in the community wants to give any help / take up the baton it would be very much appreciated.

[dogada]

I can try to add sourcemaps support. Which branch should I use: master or next?

[GianlucaGuarini]

@dogada yes of course.. I would work in the next sourcemaps support is planned for riot@3.0.0
Thanks

[dogada]

I made initial implementation and it works good so far but I tested only scripts with type="es6". Babel converts es6 javascript to es5 and returns raw sourcemap that I later convert to adjust line numbers to match lines in the original tag file and resulting javascrip file (so Babel's sourcemap is double shifted then).

I didn't tried type="babel" but it also should work because it's just different version of Babel (5.8 vs 6.2).

More difficult target is default type=riotjs — it's need to manually generate source map for its transforms (https://github.com/dogada/compiler/blob/next/src/core.js#L436). What source types do folks use here? I still use type=es6 but plan to move to type=babel when Riot3.0 will be released.

To check new compiler I enabled it inside my riot using npm link and tested several my Browserify bundles from dozens of Riot tags and it seems work in both Chrome and Firefox. After minifcation Browserify bundle with uglify2 source maps still point to original Riot-tag files that is good. You can set breakpoints inside tags and etc. Bellow is screenshot from Chrome

At the moment I generate inline source maps and browsers understands them well. Node 4 doesn't understand it yet, may be it's need to switch on something.

To compile several tags into one js-file with riot --modular tags/ for example it will be need hovewer to generate one external source map instead of many inline sourcemaps. Do we need this feature?

I also plan add support of new compiler format to riot-cli, riot and riotify and then send PR.
Does someone use webpack with riot, what loaders do you use for riot files?

The current changes is here: https://github.com/dogada/compiler/tree/next

[dogada]

I also don't want to break backward compatibility with various plugins like https://github.com/jhthorsen/riotify/blob/master/index.js that expects that riot.compile returns string. So I plan to add a new riot.compileDev method that will return {code, map} like Babel itself does and then will switch old mehod to new with smth like:

riot.compile = function(content, opts, file) {
  return riot.compileDev(content, opts, file).code
}

Thoughts?

[GianlucaGuarini]

@dogada wow this a great news and I hope sourcemaps could be generated independently from babel

• sourcemaps should work with any tool used to compile our tags (jade, rollup, babel, coffeescript, typescript..)
• I am not concerned about returning {code, map} since compiler@3.0.0 will be a major release, go for it
• I guess @aMarCruz will be able to check your pull request as soon as you will be ready to publish your work

Thanks for your help

[dogada]

Source maps for less/sass have sense only when styles extracted from tag-files and then combined into an bigger css file. I didn't see such Riot projects. Can someone who extract css from tag-file point me to an configuration where you did it? Just want to better understand workflow and how to test it.

coffeescript, typescript and all other javascript code parsers should work, it's only matter of time to add it.

Not sure about source map for jade/pug... How and when it will be consumed?

[ilearnio]

Does someone use webpack with riot, what loaders do you use for riot files?

I use it with webpack (riotjs-loader) and babel. My webpack.config.js, just in case:

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const npmPackage = require(path.join(__dirname, 'package.json'))
const config = require(path.join(__dirname, 'src/server/config/env'))
const babelrc = JSON.parse(fs.readFileSync(path.join(__dirname, '.babelrc')))

module.exports = {
  entry: {
    admin: [
      'webpack-hot-middleware/client?http://localhost:3100',
      path.join(__dirname, 'src/client/apps/admin/webpack-init')
    ],
    auth: [
      'webpack-hot-middleware/client?http://localhost:3100',
      path.join(__dirname, 'src/client/apps/auth/webpack-init')
    ]
  },

  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name]/bundle.js',
    library: 'global',
    chunkFilename: '[id].bundle.js',
    publicPath: `http://${config.HOST}:${config.PORT}/`
  },

  resolve: {
    root: __dirname,
    alias: npmPackage._moduleAliases || {},
    extensions: ['', '.js', '.tag', '.riot'],
    modulesDirectories: npmPackage._moduleDirectories || []
  },

  devtool: config.NODE_ENV === 'development' ? 'cheap-module-inline-source-map' : null,

  plugins: [
    new webpack.DefinePlugin({
      IS_CLIENT: true,
      IS_SERVER: false,
      'process.env': {
        NODE_ENV: JSON.stringify(config.NODE_ENV)
      },
      ENV: JSON.stringify(config.NODE_ENV)
    }),
    new webpack.ProvidePlugin({
      riot: 'riot',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],

  module: {
    preLoaders: [
      {
        test: /\.tag$/,
        exclude: /node_modules/,
        loader: 'riotjs',
        query: {
          type: 'babel',
          compact: 'true'
        }
      },
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        loader: 'riot-plain',
        query: {
          compact: true
        }
      }
    ],

    loaders: [
      {
        test: /\.(js|tag|riot)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: babelrc
      },
      {
        test: /\.css$/,
        loaders: [ 'style', 'css?sourceMap' ]
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
      },
      {
        test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?\S*)?$/,
        loader: 'file'
      },
      {
        test: /\.json$/,
        loader: 'json'
      }
    ],

    resolve: {
      moduleDirectories: ['node_modules'],
      extensions: ['', '.js']
    }
  },

  watch: config.NODE_ENV === 'development',
  watchOptions: {
    aggregateTimeout: 30
  }
}

module.exports.devServer = {
  port: 3101,
  hot: true,
  contentBase: '/'
}

[dogada]

Thanks, Nick. Can you also mention your Babel and Webpack versions or just
share package.json? I will also suggest to upload big files to
https://gist.github.com/ rather than inline in tickets.

On Mon, Jul 25, 2016 at 8:33 PM, Nick Gavrilov notifications@github.com
wrote:

Does someone use webpack with riot, what loaders do you use for riot files?

I use it with webpack (riotjs-loader) and babel. My webpack.config.js,
just in case:

const fs = require('fs')const path = require('path')const webpack = require('webpack')const ExtractTextPlugin = require('extract-text-webpack-plugin')const npmPackage = require(path.join(__dirname, 'package.json'))const config = require(path.join(__dirname, 'src/server/config/env'))const babelrc = JSON.parse(fs.readFileSync(path.join(__dirname, '.babelrc')))
module.exports = {
entry: {
admin: [
'webpack-hot-middleware/client?http://localhost:3100',
path.join(__dirname, 'src/client/apps/admin/webpack-init')
],
auth: [
'webpack-hot-middleware/client?http://localhost:3100',
path.join(__dirname, 'src/client/apps/auth/webpack-init')
]
},

output: {
path: path.join(__dirname, 'public'),
filename: '[name]/bundle.js',
library: 'global',
chunkFilename: '[id].bundle.js',
publicPath: http://${config.HOST}:${config.PORT}/
},

resolve: {
root: __dirname,
alias: npmPackage._moduleAliases || {},
extensions: ['', '.js', '.tag', '.riot'],
modulesDirectories: npmPackage._moduleDirectories || []
},

devtool: config.NODE_ENV === 'development' ? 'cheap-module-inline-source-map' : null,

plugins: [
new webpack.DefinePlugin({
IS_CLIENT: true,
IS_SERVER: false,
'process.env': {
NODE_ENV: JSON.stringify(config.NODE_ENV)
},
ENV: JSON.stringify(config.NODE_ENV)
}),
new webpack.ProvidePlugin({
riot: 'riot',
fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],

module: {
preLoaders: [
{
test: /.tag$/,
exclude: /node_modules/,
loader: 'riotjs',
query: {
type: 'babel',
compact: 'true'
}
},
{
test: /.riot$/,
exclude: /node_modules/,
loader: 'riot-plain',
query: {
compact: true
}
}
],

loaders: [
  {
    test: /\.(js|tag|riot)$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: babelrc
  },
  {
    test: /\.css$/,
    loaders: [ 'style', 'css?sourceMap' ]
  },
  {
    test: /\.scss$/,
    loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
  },
  {
    test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?\S*)?$/,
    loader: 'file'
  },
  {
    test: /\.json$/,
    loader: 'json'
  }
],

resolve: {
  moduleDirectories: ['node_modules'],
  extensions: ['', '.js']
}

},

watch: config.NODE_ENV === 'development',
watchOptions: {
aggregateTimeout: 30
}
}
module.exports.devServer = {
port: 3101,
hot: true,
contentBase: '/'
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#56 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABtBWTUDjCgbAUaDp32AIW-RVDnv6z2cks5qZPNogaJpZM4Hke7h
.

[ilearnio]

Ok, sure.

babel-core@6.9.1
babel-loader@6.2.4
webpack@1.13.0

package.json
.babelrc
$ npm ls

[GianlucaGuarini]

Guys any progress on this? @dogada could you make a pull request please?

[dogada]

Sorry, was really buzy. my branxh works but need to ne polished. Will try
to find time for it next week
On Aug 20, 2016 6:40 PM, "Gianluca Guarini" notifications@github.com
wrote:

Guys any progress on this? @dogada https://github.com/dogada could you
make a pull request please?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#56 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABtBWYViXJG-yifDx5vvMYy1c4PdRq0Zks5qhx_XgaJpZM4Hke7h
.

[aMarCruz]

jade/pug does not have sourceMaps, but handlebars have this feature in Handlebars.precompile. I will take a look to the code.

Edit:
Working yet on this.

[gnimmelf]

What is the status on this? Really annoying issue to tackle in a pipeline. I have really red eyes now.

[GianlucaGuarini]

@gnimmelf source maps are already working in chrome since probably riot@2 you can enable them in our official riot-tag-loader.
For your red eyes you can use chamomile, just put a wet wadding on them this should really help good luck and let us know if you will feel better

[gnimmelf]

@GianlucaGuarini Dah, I went for rollup with this project due to simplicity. Guess I'll try the chamomille soon ;-)

[gnimmelf]

Ok, so I made a gulp webpack task to compile. Still, sourcemaps are one transform off from the tag-files. Is this the status quo, or can it be made to point to the tag-files themselves?

[GianlucaGuarini]

Steps to see the riot sourcempas:

1. Clone our examples repo and go in this folder
2. trigger npm install && npm start
3. use chrome to browse the output files

You should see something like this:

You could try to throw a fake error in one of the components to see the right error position in the source file.

[gnimmelf]

Ah, then all is ok, your screenshot example is what I have allready; I was under the assumption that the sourcemapping would reveal the the uncompiled tag-files. Thank you for clarifying.

[GianlucaGuarini]

ok it's months that we don't have any update on this issue. I assigned this task to me and it will be the next thing I will do on riot. Once we will have a parser (using the current codebase) with sourcemaps we can finally focus on riot 4

[GianlucaGuarini]

The new riot-compiler@3.3.0 has experimental sourcemaps support. Sourcemaps can be generated via sourcemap: true option. Unfortunately sourcemaps will not be 100% precise due to the lack of "real parser" but we will fix it with the new major release