5to6 / 5to6-codemod

A collection of codemods that allow you to transform your js code from ES5 to ES6.
https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb
302 stars 36 forks source link

Given an Object with multiple requires of the same Key, map to correct Requires. #50

Closed mpelham closed 6 years ago

mpelham commented 6 years ago

Input:

import fetch from 'fetch';

var Routes = {
    route1: {
        component: require('Foo')
    },
    route2: {
        component: require('Bar')
    },
    route3: {
        component: require('Baz')
    },
    route4: {
        component: require('Foo')
    },
    route5: {
        component: require('Redesign/Foo')
    },
    route6: {
        component: require('Redesign/Bar')
    },
};

module.exports = Routes;

5to6-codemod's current output:

import fetch from 'fetch';
import component from 'Foo';
import component from 'Bar';
import component from 'Baz';
import component from 'Foo';
import component from 'Redesign/Foo';
import component from 'Redesign/Bar';

var Routes = {
    route1: {
        component
    },
    route2: {
        component
    },
    route3: {
        component
    },
    route4: {
        component
    },
    route5: {
        component
    },
    route6: {
        component
    }
};

module.exports = Routes;

This Branch:

Warnings: Could not map: Redesign/Foo in file: codeModExample.js, skipping. Could not map: Redesign/Bar in file: codeModExample.js, skipping.

Output:

import fetch from 'fetch';

import Foo from 'Foo';
import Bar from 'Bar';
import Baz from 'Baz';

var Routes = {
    route1: {
        component: Foo
    },
    route2: {
        component: Bar
    },
    route3: {
        component: Baz
    },
    route4: {
        component: Foo
    },
    route5: {
        component: require('Redesign/Foo')
    },
    route6: {
        component: require('Redesign/Bar')
    },
};

module.exports = Routes;

I started looking into recursively handling subdirectories when Module Names clashed, but this is a relatively tricky problem.

Would probably have to do a second foreach function that handles all module names that occurs before we actually create the Import Statement.

This example may explain why in a bit of a better way:

import fetch from 'fetch';

var Routes = {
    route5: {
        component: require('Redesign/Foo')
    },
    route1: {
        component: require('Foo')
    },
    route2: {
        component: require('Bar')
    },
    route3: {
        component: require('Baz')
    },
    route4: {
        component: require('Foo')
    },
    route6: {
        component: require('Redesign/Bar')
    },
};
module.exports = Routes;

Warnings:

Could not map: Foo in file: codeModExample.js, skipping.
Could not map: Foo in file: codeModExample.js, skipping.
Could not map: Redesign/Bar in file: codeModExample.js, skipping.

Output:

import fetch from 'fetch';

import Foo from 'Redesign/Foo';
import Bar from 'Bar';
import Baz from 'Baz';

var Routes = {
    route5: {
        component: Foo
    },
    route1: {
        component: require('Foo')
    },
    route2: {
        component: Bar
    },
    route3: {
        component: Baz
    },
    route4: {
        component: require('Foo')
    },
    route6: {
        component: require('Redesign/Bar')
    },
};

module.exports = Routes;