🔧

i18n-wrapper

Automatically wrap Korean text with t() and add imports

Overview

i18n-wrapperis a CLI tool that automatically detects hardcoded Korean text in your code, wraps it with the t() function, and adds necessary import statements.

✓Auto-detect Korean text within JSX elements

✓Supports string literals and template literals

✓Automatically skip already wrapped text

✓Automatically add useTranslation import

✓Preserve code formatting

Installation

Install globally (recommended):

npm install -g i18nexus-tools

Or run directly with npx:

npx i18n-wrapper

Basic Usage

Process the entire app directory

npx i18n-wrapper --pattern "app/**/*.tsx"

Wraps Korean text in all .tsx files within the 'app' directory.

Preview Mode

npx i18n-wrapper --dry-run

Previews what changes will be made without modifying files.

Process specific files only

npx i18n-wrapper --pattern "app/page.tsx"

Processes only a single file.

Conversion Example

📝

Before

export default function Welcome() {
  return (
    <div>
      <h1>환영합니다</h1>
      <p>i18nexus 사용법</p>
      <button>시작하기</button>
    </div>
  );
}

✨

After

import { useTranslation } from "i18nexus";

export default function Welcome() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("환영합니다")}</h1>
      <p>{t("i18nexus 사용법")}</p>
      <button>{t("시작하기")}</button>
    </div>
  );
}

Complex Example

Before:

const title = "제목";
const msg = \`안녕하세요 \${name}님\`;

return (
  <div title="툴팁 텍스트">
    <p>{"문자열"}</p>
  </div>
);

After:

const { t } = useTranslation();
const title = t("제목");
const msg = t(\`안녕하세요 \${name}님\`);

return (
  <div title={t("툴팁 텍스트")}>
    <p>{t("문자열")}</p>
  </div>
);

Command Options

--pattern, -pString

Specifies the glob pattern for files to process.

--pattern "app/**/*.{ts,tsx}"

--dry-runFlags

Previews changes without actually modifying files.

--help, -hFlags

Displays the help message.

Smart Detection

Cases that are automatically processed:

✓

JSX Text Node

<div>Korean text</div> → <div>{t("Korean text")}</div>

✓

JSX Attribute Value

<div title="Title"> → <div title={t("Title")}>

✓

String Literal

const text = "안녕"; → const text = t("안녕");

✓

Template Literal

const msg = \`안녕 \${name}\`; → const msg = t(\`안녕 \${name}\`);

Cases that are automatically skipped:

⊗Text already wrapped with t()
⊗Text containing only English
⊗Text containing only numbers or special characters
⊗Text inside comments

Best Practices

✅Check with dry-run first

Check changes with the --dry-run option before actually modifying files.

npx i18n-wrapper --dry-run

✅Use a version control system

Use version control like Git to be prepared to revert changes.

✅Start with a small scope

Start with a single file or small directory first to check the results.

⚠️Manual review needed

After automatic conversion, always review the changed files to ensure there are no unintended changes.