Is there any way to use useLocalizedStringFormatter without @internationlized/string-compiler?

[tuananhlai]

Hi 👋

I'm trying to use useLocalizedStringFormatter with custom messages for my design system library. It seems like I need to use @internationlized/string-compiler with my bundler for that hook to work properly. Since I'm unsure how to get string-compiler to work with my bundler (tsup), is it possible to use useLocalizedStringFormatter without it?

Thank you in advance for your help.

[alexasselin008]

👋 If you simply want to use useLocalizedStringFormatter to use hardcoded localized string without formatting options, you can do so without the string-compiler.

If you want to use formatting options following the These files follow the ICU Message Format standard, you must include the @internationlized/string-compiler with tsup. Tsup is powered by esbuild, so you can write a esbuild plugin.

Heres a sample of code that i use for this:

import { compileStrings } from "@internationalized/string-compiler";
import { readFile } from "fs/promises";

export function createIntlEsbuildPlugin() {
    return {
        name: "intl-plugin",
        setup(build) {
            build.onLoad({ filter: /(intl).*\.json$/ }, async args => {
                const content = await readFile(args.path, "utf8");
                const json = JSON.parse(content);
                const code = compileStrings(json);

                return { contents: code };
            });
        }
    };
}

and then in my tsup config:

esbuildPlugins: [
    createIntlEsbuildPlugin()
]