putout icon indicating copy to clipboard operation
putout copied to clipboard

Using async functions in replacer

Open jhpbipsync opened this issue 1 year ago โ€ข 3 comments

Hey, I'm working on a custom plugin to transform some legacy code using a replacer. The replacer looks something like the example below:

export const replace = () => ({
    'app.definitions[__a] = __b': ({__a, __b}, path) => {
}

I'd like to use an async function to resolve some file paths dynamically base on the value of __a Is this possible? Thanks!

jhpbipsync avatar May 03 '24 16:05 jhpbipsync

Replacer is sync only because ๐ŸŠPutout can also be used as plugin for ESLint which works on IDE. Could you please provide more details, I donโ€™t think that it will be a problem if you use sync versions resolve files paths. Also please tell me how do you want to run transformations, are you going to use ๐ŸŠPutout CLI for this purpose?

Also keep in mind that is better when your plugins is "clean" in this case is much simpler to write plugins using ๐ŸŠPutout Editor and also test them.

If you need to dial with FileSystem and you want test + write fast drafts in editor - use Scanner + Replacer. Take a look to nodejs/mjs-file for example.

Also take a look on RedPut to generate tests for your code mods and RedLint to run filesystem-based rules easily.

If you have any questions - ask, Iโ€™ll try to help.

coderaiser avatar May 03 '24 16:05 coderaiser

Hey @coderaiser thanks for the reply. I am using the module itself in JS, as an example it looks like:

// index.js
import putout from 'putout';
import * as convert from './plugins/convert.js'

// example of some code that would be loaded
let currentCode = `app.definitions[ 'app.view.context.entity.FilterMenu' ] = {

    extend : 'app.view.filter.FilterMenu',

    className : 'selectButton hasForm filter nonLinkList needsEntities',

    attributes : {
        'data-integration' : 'entity-filter'
    },

    intialize() {
        console.log('initialize');
    },

    loadData : function() {
        console.log('loadData');
    }
}`;

const code = putout(currentCode, {
    plugins: [
        ['modernise', convert],
    ],
});

I have a large legacy codebase that I want to convert from our custom module implementation to standard ES modules and classes.

So far I've found using the custom plugin has worked pretty well for this, but perhaps this is not the best way to implement it. If there is a more appropriate way I can look in to that, but using some async functions would be useful.

For now I have gotten around it by using some sync functions as you mentioned.

jhpbipsync avatar May 03 '24 20:05 jhpbipsync

How convert looks like right now? I donโ€™t quit understand why you need async functions? What is final result of transformation?

If you provide more details Iโ€™ll suggest you best way to implement what you want.

Take a look at @putout/operator-match-files, here is usage example and way to run it programmatically. This is for cases when you need to dial with File System, and still have simple, easy testable code (with autogenerated tests).

coderaiser avatar May 04 '24 05:05 coderaiser

Hey @coderaiser sorry for taking a while to reply. The code im converting has a custom loader that I'm trying to convert to standard module imports so for example one file might contain

requires: [
   'app.view.List'
]

and the file it requires has the following:

app.definitions[ 'app.view.List' ] = {
    ....
}

Im converting this so we end up with:

import AppViewList from 'FILE PATH HERE'

To do this I need to know the file path for app.view.List.

I was hoping to this asynchronously as there could be lots of files to resolve. For now Im using child.execSync and a grep command which is reasonably fast but it would be useful if I could do this when the plugin runs async. My alternative is to generate a lookup of all the paths in advanced and use in my custom plugin, either way I am unblocked for now so I will close the issue.

Thanks for creating this library!

jhpbipsync avatar May 09 '24 13:05 jhpbipsync

So it something like this:

// App.js
requires: [
   'app.view.List'
];

// AppViewList.js
app.definitions[ 'app.view.List' ] = {
}

And you want:

// App.js
import AppViewList from './AppViewList.js';

// AppViewList.js
export default () = {
}

The idea is good, but we blocked by https://github.com/eslint/eslint/issues/15394, (and this is really hard to support all IDEโ€™s without ESLint, it should be made beforehand) when unblocked we can implement this, but thereโ€™s a couple things to remember anyways:

  • Scanner was done to dial with file system API in a simplest possible way;
  • If you dial with filesystem in another way, it will be hard to test things, you need lots of mocking, and it will not work in ๐ŸŠPutout Editor, so itโ€™s preferred to write plugins as clean functions. You can write code in any way you like, of course, but this is preferred way that helps you to not shoot in your feet.

If you will have any questions related rules, Iโ€™ll be glad to help :).

coderaiser avatar May 09 '24 17:05 coderaiser

Here is how it can look like https://putout.cloudcmd.io/#/gist/9c145612c7f7f7fb6b8906c766346957/2a84c80ceec6e56e7d853d7ceb3e4ce5396443b6

The idea is: you traversing filesystem tree, received from redlint, and run regular ๐ŸŠPutout rule that does transformation you need. It is easy to test and develop, since there is no writing to file system, and when you are ready and tests passes you run on real file system.

coderaiser avatar May 11 '24 13:05 coderaiser