Enable source maps for debugging

[Asim-Tahir]

Hi @jerosoler, thx for this library,

When I try to debug the internal properties or methods of the drawflow library at runtime with breakpoints, I have difficulty in the debugging phase because the source map is not enabled. Since the JavaScript output is minified to a single line, I cannot put specific breakpoints in the internal properties and methods.

Can we enable external or inline source maps?

[jerosoler]

It's just a javascript file, you can try importing it manually.

This file:
https://github.com/jerosoler/Drawflow/blob/master/src/drawflow.js

[Asim-Tahir]

Yep, I was previously trying to debug the drawflow.js file by including it in the source code, but this solution was not sustainable to me. Because I have to revert this before every commit 😞.

I'm not sure if it makes sense, but;

• I think it would be useful to include the external source map(.map) file in the npm package if we don't have to worry about the file size of the npm package. (Increase bundle size by adding drawflow.min.js.map source map +137 KiB)

  // webpack.config.js
  /** @type {import('webpack').Configuration} */
  module.exports = {
    entry: './src/drawflow.js',
  + devtool: 'source-map',
    output: {
      library: 'Drawflow',
      libraryTarget: 'umd',
      libraryExport: 'default',
      filename: 'drawflow.min.js',
      globalObject: `(typeof self !== 'undefined' ? self : this)`
    }
  };

  ❯ npm run build # with devtool: 'source-map'
  
  > drawflow@0.0.60 build
  > webpack --mode=production && gulp
  
  Hash: a8dc79497b81c82fe50f
  Version: webpack 4.47.0
  Time: 329ms
  Built at: 11/22/2024 9:09:35 AM
                Asset      Size  Chunks                   Chunk Names
      drawflow.min.js  45.1 KiB       0  [emitted]        main
  drawflow.min.js.map   137 KiB       0  [emitted] [dev]  main
  Entrypoint main = drawflow.min.js drawflow.min.js.map
  [0] ./src/drawflow.js 79.5 KiB {0} [built]

• Or can we add a separate file in the dist folder with minimize optimization disabled that contains the inline or external source map, for example dist/drawflow.dev.js.

• Or can we disable default webpack minimize optimization for dist/drawflow.min.js (increase bundle size +38.6 KiB)

  // webpack.config.js
  /** @type {import('webpack').Configuration} */
  module.exports = {
    entry: './src/drawflow.js',
  + optimization: {
  +   minimize: false
  + },
    output: {
      library: 'Drawflow',
      libraryTarget: 'umd',
      libraryExport: 'default',
      filename: 'drawflow.min.js',
      globalObject: `(typeof self !== 'undefined' ? self : this)`
    }
  };

  ❯ npm run build # with disable webpack default minimize optimization
  
  > drawflow@0.0.60 build
  > webpack --mode=production && gulp
  
  Hash: 90d5907ee074e5d47de6
  Version: webpack 4.47.0
  Time: 137ms
  Built at: 11/22/2024 9:13:49 AM
            Asset      Size  Chunks             Chunk Names
  drawflow.min.js  83.7 KiB       0  [emitted]  main
  Entrypoint main = drawflow.min.js
  [0] ./src/drawflow.js 79.5 KiB {0} [built]

[jerosoler]

I'll take a look at it when I have time.