SourceMap Support

[robertlong]

The stack trace for each command is really useful, it'd be even better if it used sourcemaps. Maybe this library could be of some use? https://github.com/evanw/node-source-map-support I'm not certain, but it may be as simple as including the library and calling install().

[sebavan]

Nice, I really like the idea, I ll check over the weekend :-)

[sebavan]

@robertlong, I started to play with it, it is pretty promising. I am currently moving to modules and React. I ll integrate it in first thing after that step as a test of the new archi.

[NathanBWaters]

+1 on this idea! It would be extremely useful!

[leavittx]

Hi there! Any updates on this?

[sebavan]

I had perf issues when using it :-( and currently pretty stuffed with normal work. Happy to guide anybody who would like to make a PR for it ???

[prophetw]

Just use the webpack development to build your code and easy to debug

 mode: isProd ? "development" : "development",
optimization: {
            minimize: false,
            // moduleIds: "size",
            // usedExports: true,
            mangleExports: false,
        },

webpack.config.js below

Spector.js/tools/webpack.config.js
var path = require("path");

var MAIN_DIR = path.resolve(__dirname, "../");
var BUILD_DIR = path.resolve(MAIN_DIR, "./dist");
var DEV_DIR = path.resolve(MAIN_DIR, "./.temp");

var buildConfig = function (env) {
    var isProd = env.prod;

    var config = {
        watch: !isProd,
        context: MAIN_DIR,
        entry: [
            "./vendors/ace.js",
            "./vendors/ace-mode-glsl.js",
            "./vendors/ace-theme-monokai.js",
            "./vendors/ace-theme-override.css",
            "./vendors/ace-ext-searchbox.js",
            "./src/spector.ts"
        ],
        output: {
            path: isProd ? BUILD_DIR : DEV_DIR,
            publicPath: "/",
            filename: "spector.bundle.js",
            libraryTarget: "umd",
            library: "SPECTOR",
            umdNamedDefine: true
        },
        optimization: {
            minimize: false,
            // moduleIds: "size",
            // usedExports: true,
            mangleExports: false,
        },
        performance: {
            hints: false
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".css", ".sass"]
        },
        // devtool: false,
        devtool: 'source-map',
        mode: isProd ? "development" : "development",
        module: {
            rules: [{
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    configFile: "src/tsconfig.json"
                }
            }, {
                test: /\.scss$/,
                use: ["style-loader?insert=html", "css-loader", "sass-loader"]
            }, {
                test: /\.css$/,
                use: ["style-loader?insert=html", "css-loader"]
            }, {
                test: /ace.js$/,
                // use: [ "exports-loader?ace" ]
                loader: "exports-loader",
                options: {
                    type: "commonjs",
                    exports: "ace",
                },
            }, {
                test: /spector.js$/,
                use: ["exports-loader?SPECTOR"]
            }]
        }
    };

    if (!isProd) {
        config.devtool = "nosources-source-map";

        // Source Map Remapping for dev tools.
        config.output.devtoolModuleFilenameTemplate = (info) => {
            info.resourcePath = path.normalize(info.resourcePath);

            console.error(info.resourcePath);

            // if (!path.isAbsolute(info.resourcePath)) {
            //     info.resourcePath = path.join(DEV_DIR, info.resourcePath);
            // }

            return `../${info.resourcePath.replace(/\\/g, "/")}`;
        };
    }
    return config;
}

module.exports = buildConfig;