feat: Support for keyPrefix in some libraries (#24)

Author: nabekou29

.gitignore

@@ -1,7 +1,9 @@
 .tests
+.tmp_projects
 .repro*
 
 demo/*.mp4
+demo/*.png
 
 node_modules
 package-lock.json

Makefile

@@ -9,3 +9,8 @@ clean-test:
 	@echo "Cleaning up test files..."
 	rm -rf .tests
 	rm -rf tests/.tmp_projects
+
+.PHONY: format
+format:
+	@echo "Formatting files..."
+	stylua -g '*.lua' .

README-ja.md

@@ -7,12 +7,17 @@
 [![GitHub Release](https://img.shields.io/github/release/nabekou29/js-i18n.nvim?style=flat)](https://github.com/nabekou29/js-i18n.nvim/releases/latest)
 [![tests](https://github.com/nabekou29/js-i18n.nvim/actions/workflows/test.yaml/badge.svg)](https://github.com/nabekou29/js-i18n.nvim/actions/workflows/test.yaml)
 
-js-i18n.nvim は、JavaScript のライブラリである i18next のための Neovim プラグインです。
+js-i18n.nvim は、JavaScript の i18n ライブラリをサポートする Neovim プラグインです。
 
 <div>
   <video src="https://github.com/user-attachments/assets/abcd728d-42d1-46d2-8d18-072102b1cf71" type="video/mp4" />
 </div>
 
+## 🚧 ステータス
+
+> [!WARNING]
+> このプラグインはまだ開発中であり、開発者の利用ケースに最適化しています。
+
 ## ✨ 機能
 
 - 翻訳をバーチャルテキストとして表示
@@ -22,11 +27,17 @@ js-i18n.nvim は、JavaScript のライブラリである i18next のための N
 - ホバーによる翻訳の表示
 - キーの補完
 - モノレポ のサポート
+- いくつかのライブラリのサポート (i18next, react-i18next, next-intl)
 
-## 🚧 ステータス
+### サポートしているライブラリ
 
-> [!WARNING]
-> このプラグインはまだ開発中であり、開発者の利用ケースに最適化しています。
+#### [i18next](https://www.i18next.com/), [react-i18next](https://react.i18next.com/)
+
+![i18next-screenshot](https://github.com/user-attachments/assets/349f5242-f717-4af9-9790-623ddad0492f)
+
+#### [next-intl](https://next-intl-docs.vercel.app/)
+
+![next-intl-screenshot](https://github.com/user-attachments/assets/e6873336-5161-40b1-9bcc-c845ca750860)
 
 ## ✅ 必須条件
 
@@ -100,10 +111,6 @@ js-i18n.nvim は、JavaScript のライブラリである i18next のための N
 
 ## ⬆️ ロードマップ
 
-今後もいくつかの機能の追加を予定しています。
-
-- i18next のサポートの強化
-  - react-i18next や、i18next の高度な利用についてもサポートする予定です。
-    - `namespace` や `keyPrefix` のサポート
-    - `Trans` コンポーネントのサポート
-- i18next 以外のライブラリのサポート
+- ライブラリサポートの強化
+  - namespace のサポート
+- 今より賢い翻訳リソースの検出

README.md

@@ -13,12 +13,17 @@ _⚠︎ This file is translated and updated by ChatGPT based on the original tex
 [![GitHub Release](https://img.shields.io/github/release/nabekou29/js-i18n.nvim?style=flat)](https://github.com/nabekou29/js-i18n.nvim/releases/latest)
 [![tests](https://github.com/nabekou29/js-i18n.nvim/actions/workflows/test.yaml/badge.svg)](https://github.com/nabekou29/js-i18n.nvim/actions/workflows/test.yaml)
 
-js-i18n.nvim is a Neovim plugin for the JavaScript library i18next.
+js-i18n.nvim is a Neovim plugin that supports JavaScript i18n libraries.
 
 <div>
   <video src="https://github.com/user-attachments/assets/abcd728d-42d1-46d2-8d18-072102b1cf71" type="video/mp4" />
 </div>
 
+## 🚧 Status
+
+> [!WARNING]
+> This plugin is still under development and is optimized for the developer's use cases.
+
 ## ✨ Features
 
 - Display translations as virtual text
@@ -28,11 +33,17 @@ js-i18n.nvim is a Neovim plugin for the JavaScript library i18next.
 - Display translations for each language on hover
 - Key completion
 - Support for monorepos
+- Support for multiple libraries (i18next, react-i18next, next-intl)
 
-## 🚧 Status
+### Supported Libraries
 
-> [!WARNING]
-> This plugin is still under development and is optimized for the developer's use cases.
+#### [i18next](https://www.i18next.com/), [react-i18next](https://react.i18next.com/)
+
+![i18next-screenshot](https://github.com/user-attachments/assets/349f5242-f717-4af9-9790-623ddad0492f)
+
+#### [next-intl](https://next-intl-docs.vercel.app/)
+
+![next-intl-screenshot](https://github.com/user-attachments/assets/e6873336-5161-40b1-9bcc-c845ca750860)
 
 ## ✅ Requirements
 
@@ -105,10 +116,6 @@ The default settings are as follows. For omitted parts, refer to [config.lua](./
 
 ## ⬆️ Roadmap
 
-We plan to add several features in the future.
-
-- Enhanced support for i18next
-  - Planning to support advanced usage of i18next and react-i18next.
-    - `namespace` and `keySeparator` options support
-    - `Trans` component support
-- Support for libraries other than i18next
+- Enhanced support for libraries
+  - Namespace support
+- Smarter translation resource detection

demo/concept.tape

@@ -11,7 +11,7 @@ Set TypingSpeed 0.2
 
 Hide
 
-Type@0 "nvim -u config.lua projects/i18next/index.jsx" Enter
+Type@0 "nvim -u config.lua projects/i18next/concept.jsx" Enter
 
 Sleep 5 # load lazy.nvim
 # Type q # lazy.nvim がエラーになるので閉じる

demo/projects/i18next/index.jsx renamed to demo/projects/i18next/concept.jsx

@@ -4,5 +4,9 @@
     "part-1": "This is a demo of js-i18next.nvim .",
     "part-2": "You can check the text in each language by hovering.",
     "part-3": "You can also use the completion."
+  },
+  "key": "Key",
+  "nested": {
+    "key": "Nested Key"
   }
 }

demo/projects/i18next/locales/en/translation.json

@@ -4,5 +4,9 @@
     "part-1": "これは js-i18next.nvim のデモです。",
     "part-2": "ホバーで各言語の文言を確認できます。",
     "part-3": "補完機能も使えます。"
+  },
+  "key": "Key",
+  "nested": {
+    "key": "Nested Key"
   }
 }

demo/projects/i18next/locales/ja/translation.json

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+
+export const Component1 = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <p>{t("key")}</p>
+      <p>{t("nested.key")}</p>
+      <Trans i18nKey={"key"} t={t} />
+    </div>
+  );
+};
+
+export const Component2 = () => {
+  const { t } = useTranslation("translation", { keyPrefix: "nested" });
+
+  return (
+    <div>
+      <p>{t("key")}</p>
+    </div>
+  );
+};

demo/projects/i18next/screenshot.js

@@ -0,0 +1,7 @@
+{
+  "nested": {
+    "key": "Nested Key"
+  },
+  "key": "Key",
+  "rich-key": "<highlight>Rich Key</highlight>"
+}