mshustov/babel-plugin-transform-redux-saga-source

NOTE: plugin is still in development mode, so use it on your own risk

Babel plugin for code instrumenting by extending redux-saga code fragments with additional meta-data. Meta-data contains information about code fragment location and other details, that could be consumed by developer tools or libraries.

Example

Source:

function* saga1(){
    yield foo(1, 2, 3);
}

function* saga2(){
    yield 2;
}

Result:

var _SAGA_LOCATION = require("redux-saga").SAGA_LOCATION

function* saga1() {
    yield function reduxSagaSource() {
        var res = foo(1, 2, 3);
        res[_SAGA_LOCATION] = {
            fileName: "{{filename}}",
            lineNumber: 2,
            code: "foo(1, 2, 3)"
        };
        return res;
    }();
}

saga1[_SAGA_LOCATION] = {
    fileName: "{{filename}}",
    lineNumber: 1
};
function* saga2() {
    yield 2;
}
saga2[_SAGA_LOCATION] = {
    fileName: "{{filename}}",
    lineNumber: 5
};

Install

add to package.json

    "devDependencies": {
        ...
        "babel-plugin-transform-redux-saga-source": "github:restrry/babel-plugin-transform-redux-saga-source"
    }

Usage

1. with babel

babel.transform(content, {
    sourceMaps: true,
    plugins: [
        'babel-plugin-transform-redux-saga-source', { /* options */ }
    ],
    ...
});

2. with webpack and babel-loader:

{
    loader: 'babel-loader',
    options: {
        presets: [...],
        plugins: [
            ['babel-plugin-transform-redux-saga-source', {
                basePath: process.cwd()
            }]
        ]
    }
}

Options

All options are optional.

basePath

• Type: String or false
• Default: false

By default plugin gets absolute file paths. But for some reasons relative to some location path required. In this case basePath could be used. For example, if option is not set:

    fileName: "/Users/name/git/project/path/to/filename.js"

But if basePath is set to '/Users/name/git/project',

    fileName: "path/to/filename.js"

Problem solving

My source code became ugly, I can't read it anymore

Use source maps. It can't be set up in babel settings.

It also can be set up in your building tools setting. See webpack config for example.