How to use @hint/utils-i18n - 7 common examples

/**
 * This will create a get-message.js that will be used by the browser
 * to show localized strings.
 *
 * The formatter-html will use this file in the CLI and in the online
 * service.
 *
 * The generated file will use `window.localeStrings` which is initialize
 * for the `messages.js` generated by `compile-locales.js`.
 */
const content = `// Autogenerated by scripts/create-get-message.js

(function () {

    /* eslint-disable padding-line-between-statements, no-var, prefer-arrow-callback */
    var format = ${format.toString().split('\n')
        .map((line, index) => {
            if (index === 0) {
                return line;
            }

            return `    ${line}`;
        })
        .join('\n')};
    /* eslint-enable padding-line-between-statements */

    window.getMessage = function (key, substitutions) {
        var localeString = window.localeStrings && window.localeStrings[key];

        if (!localeString) {
            return key;
        }

public constructor(name: string, url: string, isScanner: boolean, language?: string) {
        this.hints = [];
        this.passed = [];
        this.name = name;
        this.localizedName = getCategoryName(name.toLowerCase() as Category, language);

        this.hintsCount = 0;

        this.image = categoryImages[name.toLowerCase()];
        this.isScanner = isScanner;

        if (this.image && !isScanner) {
            this.image = this.image.substr(1);
        }

        this.status = 'finished';
        this.url = url;
    }

useEffect(() => {
        const disabledCategories = config.disabledCategories || [];
        const browserslists = config.browserslist || '';
        const ignoredUrls = config.ignoredUrls;

        let body = template
            .replace('__webhint version:__', `__webhint version:__ ${version}`)
            .replace('__Browser version:__', `__Browser version:__ ${navigator.userAgent}`)
            .replace('[x] Recommended settings', `[${!browserslists ? 'x' : ' '}] Recommended settings`)
            .replace('[ ] Custom: ', `[${browserslists ? 'x' : ' '}] Custom: ${browserslists ? browserslists : ''} `);

        for (const category of categories) {
            body = body.replace(`[x] ${getCategoryName(category)}`, `[${disabledCategories.includes(category) ? ' ' : 'x'}] ${getCategoryName(category)}`);
        }

        if (error) {
            body = body.replace('', `${error.message}\n${error.stack}`);
        }

        const getLocation = async () => {
            const loc = await evaluate('window.location');
            const origin = loc.origin;
            const noIgnored = ignoredUrls === undefined;
            const isSameOrigin = !noIgnored && (ignoredUrls === '--webhint-third-party' || ignoredUrls === `^(?!${escapeRegExp(origin)})`);
            const isCustom = !noIgnored && !isSameOrigin;

            body = body.replace('[x] None', `* [${noIgnored ? 'x' : ' '}] None`)
                .replace('[ ] Different origin', `* [${isSameOrigin ? 'x' : ' '}] Different origin`)
                .replace('[ ] Custom: ', `* [${isCustom ? 'x' : ' '}] Custom: ${isCustom ? ignoredUrls : ''} `);

const categoryInputs = categories.map((category) => {
        const isDisabled = disabled && disabled.includes(category);

        return (
            
                
                
                    {getCategoryName(category)}
                
            
        );
    });

const Category = ({ name, hints, showPassed }: Props) => {
    const shownHints = hints.filter((hint) => {
        return showPassed || hint.problems.length > 0;
    });

    return (
        <div>
            <div id="{`results-category-${name}`}">
                <span>
                    {getCategoryName(name)}
                </span>
            </div>
            <div>
                {shownHints.map((hint) =&gt; {
                    return ;
                })}
            </div>
        </div>
    );
};

const CategorySummary = ({ name, hints, passed }: CategoryResults) => {
    let statusStyle = '';

    if (passed < hints.length) {
        statusStyle = hasError(hints) ? styles.error : styles.warn;
    }

    return (
        <a data-icon="{name}" href="{`#results-category-${name}`}">
            {getCategoryName(name)}
            <span>{hints.length - passed}</span>
        </a>
    );
};

return (key, substitutions) => {
        return getMessageUtils(key, formatterHTMLPath, {
            language,
            substitutions
        });
    };
};