@bgscore/react-i18n 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Andry Dharmawan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# @bgscore/react-i18n 🚀
+
+Vite plugin to automatically generate TypeScript-safe i18n namespaces and translation keys from JSON files in React projects.
+
+## Main Features
+
+* 🌐 Auto-detects i18n JSON files in your project
+* 🔧 Generates `I18nNamespaceMap` interface automatically
+* ⚡ Fully TypeScript-safe translation keys
+* 🔄 Supports nested JSON objects (`a.b.c`) flattened for keys
+* 💡 HMR support during development
+
+## Installation
+
+```bash
+npm install @bgscore/react-i18n
+# or
+pnpm add @bgscore/react-i18n
+```
+
+## Usage
+
+### Vite Configuration
+
+Add this plugin to your Vite configuration (`vite.config.js` or `vite.config.ts`):
+
+```ts
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
+import reactI18n from "@bgscore/react-i18n/plugin";
+
+export default defineConfig({
+    plugins: [
+        react(),
+        reactI18n({
+            i18nDirName: "i18n",
+            outputFileName: "i18n.types.ts",
+            namespaceInterfaceName: "I18nNamespaceMap"
+        }),
+    ],
+})
+```
+
+### Folder Structure
+
+The plugin automatically generates TypeScript types from your JSON files. Example structure:
+
+```
+src/
+├── components/
+│   ├── home/
+│   │   ├── i18n/
+│   │   │   ├── id.json
+│   │   │   └── en.json
+│   │   └── Home.tsx
+│   ├── dashboard/
+│   │   ├── i18n/
+│   │   │   └── id.json
+│   │   └── Dashboard.tsx
+```
+
+### Generated Output
+
+For each `i18n` folder, a `i18n.types.ts` file will be generated containing a `I18nNamespaceMap` interface:
+
+```ts
+declare global {
+    interface I18nNamespaceMap {
+        "components.home": "title" | "desc" | "a.b";
+        "components.dashboard": "title" | "subtitle";
+    }
+}
+
+export {};
+```
+
+### Using `useTranslation` Hook
+
+```ts
+import useTranslation from "hooks/useTranslation";
+
+export default function Home() {
+    const { t, ns } = useTranslation("components.home");
+
+    return (
+        <div>
+            <h1>{t("title")}</h1>
+            <p>{t("desc")}</p>
+        </div>
+    );
+}
+```
+
+The hook provides:
+
+* **t(key: string, options?)**: Type-safe translation function
+* **ns**: Current namespace
+* All keys are inferred from the generated `I18nNamespaceMap` for autocomplete
+
+### Example JSON (id.json)
+
+```json
+{
+  "title": "Beranda",
+  "desc": "Selamat datang",
+  "a": {
+    "b": "Nested key example"
+  }
+}
+```
+
+This will generate TypeScript keys:
+
+```ts
+"title" | "desc" | "a.b"
+```
+
+### Configuration Options
+
+* **i18nDirName**: The folder name where i18n JSON files are stored. Default: `"i18n"`.
+* **outputFileName**: Name of the generated TypeScript file. Default: `"i18n.types.ts"`.
+* **namespaceInterfaceName**: Name of the global interface for namespaces. Default: `"I18nNamespaceMap"`.
+
+### Development Workflow
+
+* Any changes, addition, or deletion of JSON files in `i18n` folders will automatically regenerate TypeScript types.
+* HMR ensures type updates are available immediately during development.
+
+### Contribution
+
+If you want to contribute to this project, please fork the repository and create a pull request.
+
+### License
+
+This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.

package/dist/plugin.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"t",{value:!0});var n=require("fs"),e=require("path");const t=e.resolve(process.cwd(),"src");function r(t,o){for(const c of n.readdirSync(t,{withFileTypes:!0})){const n=e.join(t,c.name);c.isDirectory()&&(o(n),r(n,o))}}function o(n,e="",t=new Set){for(const[r,c]of Object.entries(n)){const n=e?`${e}.${r}`:r;null===c||"object"!=typeof c||Array.isArray(c)?t.add(n):o(c,n,t)}return t}function c(c,s,f){r(t,r=>{e.basename(r)===c&&function(r,c,s,f){const i=n.readdirSync(r).filter(n=>n.endsWith(".json"));if(!i.length)return;const u=new Set;for(const t of i){const c=e.join(r,t),s=JSON.parse(n.readFileSync(c,"utf-8"));"object"!=typeof s||Array.isArray(s)||o(s).forEach(n=>u.add(n))}if(!u.size)return;const a=function(n,r){return e.relative(t,n).replace(/\\/g,"/").replace(`/${r}`,"").replace(/\//g,".")}(r,c),l=`\ndeclare global {\n    interface ${f} {\n        "${a}": ${Array.from(u).sort().map(n=>`"${n}"`).join(" | ")};\n    }\n}\n\nexport {};\n`,p=e.join(r,s);n.existsSync(p)&&n.readFileSync(p,"utf-8").trim()===l.trim()||n.writeFileSync(p,l,"utf-8")}(r,c,s,f)})}exports.default=(n={})=>{const e=n.i18nDirName??"i18n",t=n.outputFileName??"i18n.types.ts",r=n.namespaceInterfaceName??"I18nNamespaceMap",o=()=>{c(e,t,r)};return{name:"bgs-react-i18n",enforce:"pre",configResolved(){o()},buildStart(){o()},configureServer(n){o(),n.watcher.on("add",o).on("change",o).on("unlink",o).on("addDir",o).on("unlinkDir",o)}}};

package/dist/plugin.d.ts

@@ -0,0 +1,8 @@
+import type { PluginOption } from "vite";
+interface Options {
+    i18nDirName?: string;
+    outputFileName?: string;
+    namespaceInterfaceName?: string;
+}
+declare const reactI18n: (options?: Options) => PluginOption;
+export default reactI18n;

package/dist/plugin.mjs

@@ -0,0 +1 @@
+import n from"fs";import t from"path";const o=t.resolve(process.cwd(),"src");function e(o,r){for(const c of n.readdirSync(o,{withFileTypes:!0})){const n=t.join(o,c.name);c.isDirectory()&&(r(n),e(n,r))}}function r(n,t="",o=new Set){for(const[e,c]of Object.entries(n)){const n=t?`${t}.${e}`:e;null===c||"object"!=typeof c||Array.isArray(c)?o.add(n):r(c,n,o)}return o}function c(c,f,s){e(o,e=>{t.basename(e)===c&&function(e,c,f,s){const i=n.readdirSync(e).filter(n=>n.endsWith(".json"));if(!i.length)return;const u=new Set;for(const o of i){const c=t.join(e,o),f=JSON.parse(n.readFileSync(c,"utf-8"));"object"!=typeof f||Array.isArray(f)||r(f).forEach(n=>u.add(n))}if(!u.size)return;const a=function(n,e){return t.relative(o,n).replace(/\\/g,"/").replace(`/${e}`,"").replace(/\//g,".")}(e,c),p=`\ndeclare global {\n    interface ${s} {\n        "${a}": ${Array.from(u).sort().map(n=>`"${n}"`).join(" | ")};\n    }\n}\n\nexport {};\n`,l=t.join(e,f);n.existsSync(l)&&n.readFileSync(l,"utf-8").trim()===p.trim()||n.writeFileSync(l,p,"utf-8")}(e,c,f,s)})}const f=(n={})=>{const t=n.i18nDirName??"i18n",o=n.outputFileName??"i18n.types.ts",e=n.namespaceInterfaceName??"I18nNamespaceMap",r=()=>{c(t,o,e)};return{name:"bgs-react-i18n",enforce:"pre",configResolved(){r()},buildStart(){r()},configureServer(n){r(),n.watcher.on("add",r).on("change",r).on("unlink",r).on("addDir",r).on("unlinkDir",r)}}};export{f as default};

package/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@bgscore/react-i18n",
+    "version": "0.0.1",
+    "description": "Vite plugin for React that automatically generates TypeScript-safe i18n namespaces and translation keys from JSON files",
+    "author": "Andry Bagus Dharmawan",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/andrydharmawan/react-i18n.git"
+    },
+    "main": "dist/index.cjs",
+    "module": "dist/index.mjs",
+    "type": "module",
+    "exports": {
+        "./plugin": {
+            "import": "./dist/plugin.mjs",
+            "require": "./dist/plugin.cjs",
+            "types": "./dist/plugin.d.ts",
+            "default": "./dist/plugin.mjs"
+        }
+    },
+    "typesVersions": {
+        "*": {
+            "plugin": [
+                "./dist/plugin.d.ts"
+            ]
+        }
+    },
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "clean": "rimraf dist",
+        "build": "npm run clean && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-router-dom": ">=6.22.0",
+        "vite": ">=5.1.0"
+    },
+    "dependencies": {
+        "lodash-es": "^4.17.21",
+        "qs": "^6.12.1"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.6",
+        "@types/lodash-es": "^4.17.12",
+        "@types/node": "^20.11.0",
+        "@types/react": "^18.2.0",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.12.0",
+        "rollup-plugin-cleanup": "^3.2.1",
+        "tslib": "^2.6.2",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.0"
+    },
+    "keywords": [
+        "react",
+        "vite",
+        "i18n",
+        "internationalization",
+        "localization",
+        "react-i18n",
+        "vite-plugin",
+        "typescript",
+        "types",
+        "type-safety",
+        "json",
+        "translation",
+        "auto-generate",
+        "codegen",
+        "developer-experience"
+    ]
+}