AI prompt for modifying function invocations

modifying-function-invocations.txt

# Prompt

Can you write a jscodeshift transformer that will change a file like this

```
import { DS_SPACING_UNITS } from '@calm/evexia-design-tokens';
import { Heading } from '@rhg/components/heading';
import { useTranslation } from '@rhg/libs/i18n';
import { getTimeOfDay } from '@rhg/utils/date-time';
import { HomePaddedContainer } from '../layout';

const styleHeading = {
    mb: DS_SPACING_UNITS.CONTENT,
};

export function HomeDtcRecommendationsHeading() {
    const { t } = useTranslation();
    const isEvening = getTimeOfDay() === 'evening';

    return (
        <HomePaddedContainer sx={styleHeading}>
            <Heading
                title={
                    isEvening
                        ? t('home:sleep_stories_title')
                        : t('home:dailies_title')
                }
                titleVariant="h5"
                titleComponent="h2"
                subtitle={
                    isEvening
                        ? t('home:sleep_stories_subtitle')
                        : t('home:dailies_subtitle')
                }
            />
        </HomePaddedContainer>
    );
}
```


into something like this?

```
import { DS_SPACING_UNITS } from '@calm/evexia-design-tokens';
import { Heading } from '@rhg/components/heading';
import { getTimeOfDay } from '@rhg/utils/date-time';
import { useIntl } from 'react-intl';
import homeMessages from '@rhg/lang/messages/home'
import recentMessages from '@rhg/lang/messages/recent'
import { HomePaddedContainer } from '../layout';

const styleHeading = {
    mb: DS_SPACING_UNITS.CONTENT,
};

export function HomeDtcRecommendationsHeading() {
    const { formatMessage } = useIntl();
    const isEvening = getTimeOfDay() === 'evening';

    return (
        <HomePaddedContainer sx={styleHeading}>
            <Heading
                title={
                    isEvening
                        ? formatMessage(homeMessages['sleep_stories_title'])
                        : formatMessage(recentMessages['dailies_title'])
                }
                titleVariant="h5"
                titleComponent="h2"
                subtitle={
                    isEvening
                        ? formatMessage(homeMessages['sleep_stories_subtitle'])
                        : formatMessage(recentMessages['dailies_subtitle'])
                }
            />
        </HomePaddedContainer>
    );
}
```


The important things are

- Change the import of import { useTranslation } from '@rhg/libs/i18n'; to import { useIntl } from 'react-intl';
- Change const { t } = useTranslation(); to const { formatMessage } = useIntl();
- Change the function t to formatMessage
- Change 'home:sleep_stories_title' to homeMessages['sleep_stories_title']
- Make sure to import any relevant messages files
- home and recent could be any word, not just those two
Can you also make sure that Can you change that it replaces both `useTranslation` and `useLazyTranslation`, and so that it removes any args those functions might have?

# Response

Sure! Below is a jscodeshift transformer that performs the required transformations:

```javascript
module.exports = function (fileInfo, api, options) {
    const j = api.jscodeshift;
    const root = j(fileInfo.source);

    // Replace useTranslation or useLazyTranslation import with useIntl
    root.find(j.ImportDeclaration)
        .filter(path => path.node.source.value === '@rhg/libs/i18n')
        .forEach(path => {
            const specifiers = path.node.specifiers;
            specifiers.forEach((specifier, index) => {
                if (specifier.imported.name === 'useTranslation' || specifier.imported.name === 'useLazyTranslation') {
                    specifiers[index] = j.importSpecifier(j.identifier('useIntl'));
                }
            });
            if (specifiers.length === 0) {
                j(path).remove();
            }
        });

    // Add import for messages
    const messagesImport = j.importDeclaration(
        [
            j.importDefaultSpecifier(j.identifier('homeMessages')),
            j.importDefaultSpecifier(j.identifier('recentMessages'))
        ],
        j.literal('@rhg/lang/messages/home')
    );
    root.find(j.ImportDeclaration).at(-1).insertAfter(messagesImport);

    // Replace useTranslation or useLazyTranslation with useIntl and remove any args
    root.find(j.VariableDeclaration)
        .filter(path => {
            const declaration = path.node.declarations[0];
            return (
                declaration.init &&
                (declaration.init.callee.name === 'useTranslation' || declaration.init.callee.name === 'useLazyTranslation')
            );
        })
        .forEach(path => {
            const declaration = path.node.declarations[0];
            declaration.init.callee.name = 'useIntl';
            declaration.init.arguments = [];
            declaration.id.properties[0].key.name = 'formatMessage';
            declaration.id.properties[0].value.name = 'formatMessage';
        });

    // Replace t function calls with formatMessage and update message keys
    root.find(j.CallExpression)
        .filter(path => path.node.callee.name === 't')
        .forEach(path => {
            path.node.callee.name = 'formatMessage';
            const arg = path.node.arguments[0];
            if (arg.type === 'Literal') {
                const [namespace, key] = arg.value.split(':');
                path.node.arguments[0] = j.memberExpression(
                    j.identifier(`${namespace}Messages`),
                    j.literal(key),
                    true
                );
            }
        });

    return root.toSource();
};
```

This transformer script will:
1. Replace the import of `useTranslation` or `useLazyTranslation` from `@rhg/libs/i18n` with `useIntl` from `react-intl`.
2. Add imports for `homeMessages` and `recentMessages` from `@rhg/lang/messages/home`.
3. Replace the usage of `useTranslation` or `useLazyTranslation` with `useIntl` and remove any arguments.
4. Replace the `t` function calls with `formatMessage` and update the message keys accordingly.

You can run this transformer using jscodeshift with the following command:
```sh
jscodeshift -t path/to/transformer.js path/to/your/code.js
```

Make sure to adjust the paths as necessary.