@rdyl/react-i18n-connect 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+## 0.0.1 (2025-01-10)
+
+
+

package/README.md

@@ -0,0 +1,20 @@
+## Installation
+
+```bash
+$ npm install @rdyl/react-i18n-connect
+# or
+$ yarn add @rdyl/react-i18n-connect
+```
+
+## Getting started
+
+1. 配置tsconfig.json
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@rdyl/react-i18n-connect/types/type.d.ts"
+    ],
+  },
+}
+```

package/dist/index.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useI18n = exports.LangToken = void 0;
+var react_1 = __importStar(require("react"));
+var utils_1 = require("./utils");
+var I18nCtx = (0, react_1.createContext)({});
+var I18nConnect = function (_a) {
+    var children = _a.children, i18nConfig = _a.i18nConfig, onLoad = _a.onLoad;
+    var locales = i18nConfig.locales, initialLang = i18nConfig.initialLang;
+    var _b = (0, react_1.useState)(exports.LangToken.get(initialLang)), lang = _b[0], _setLang = _b[1];
+    var _c = (0, react_1.useState)({}), loaded = _c[0], setLoaded = _c[1];
+    var title = (0, react_1.useMemo)(function () { return (locales[lang] ? locales[lang].title : ""); }, [lang]);
+    var dataSource = (0, react_1.useMemo)(function () {
+        // 异步加载
+        if (onLoad) {
+            return loaded;
+        }
+        return locales[lang] ? locales[lang].messages || {} : {};
+    }, [lang, loaded, onLoad]);
+    var t = (0, react_1.useCallback)((0, utils_1.ParserI18nFn)(dataSource), [dataSource]);
+    var setLang = (0, react_1.useCallback)(function (e) {
+        exports.LangToken.set(e);
+        _setLang(e);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (onLoad) {
+            setLoaded({});
+            onLoad(lang).then(setLoaded);
+        }
+    }, [lang, onLoad]);
+    (0, react_1.useEffect)(function () {
+        window.$t = t;
+    }, [t]);
+    return (react_1.default.createElement(I18nCtx.Provider, { value: {
+            locales: locales,
+            dataSource: dataSource,
+            title: title,
+            lang: lang,
+            t: t,
+            setLang: setLang,
+        } }, children));
+};
+exports.LangToken = {
+    name: "LANG-TOKEN",
+    value: "",
+    get: function (t) {
+        if (t === void 0) { t = ""; }
+        var lang = localStorage.getItem(this.name) || t;
+        exports.LangToken.value = lang;
+        return lang;
+    },
+    set: function (v) {
+        exports.LangToken.value = v;
+        localStorage.setItem(this.name, v);
+    },
+    remove: function () {
+        exports.LangToken.value = "";
+        localStorage.removeItem(this.name);
+    },
+};
+var useI18n = function () { return (0, react_1.useContext)(I18nCtx); };
+exports.useI18n = useI18n;
+exports.default = I18nConnect;

package/dist/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParserI18nFn = ParserI18nFn;
+function ParserI18nFn(data) {
+    return function (k, named) {
+        var text = data[k];
+        if (!text) {
+            return k;
+        }
+        if (named) {
+            for (var key in named) {
+                var varRegExp = new RegExp("{".concat(key, "}"), "g");
+                text = "".concat(text).replace(varRegExp, "".concat(named[key]));
+            }
+        }
+        return text;
+    };
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@rdyl/react-i18n-connect",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "types",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "build": "tsc && copyfiles -u 1 src/**/*.d.ts src/*.d.ts types && npm run changelog && git add CHANGELOG.md"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "copyfiles": "^2.4.1",
+    "react": "^18.3.1",
+    "typescript": "^5.6.3",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "conventional-changelog-cli": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from "react";
+declare const I18nConnect: FC<PropsWithChildren<I18nConnectProps>>;
+export interface I18nConnectValue {
+    title: string;
+    lang: string;
+    dataSource: Record<string, TRValue>;
+    locales: Record<string, I18nLangEntry>;
+    setLang(name: string): void;
+    t: TR;
+}
+type I18nConnectProps = {
+    i18nConfig: I18nConfig;
+    onLoad?(t: string): Promise<Record<string, TRValue>>;
+};
+export declare const LangToken: {
+    name: string;
+    value: string;
+    get(t?: string): string;
+    set(v: string): void;
+    remove(): void;
+};
+export declare const useI18n: () => I18nConnectValue;
+export default I18nConnect;

package/types/type.d.ts

@@ -0,0 +1,16 @@
+/** @i18n */
+interface I18nConfig {
+  locales: Record<string, I18nLangEntry>;
+  initialLang: string;
+}
+
+type TRValue = string | number | boolean;
+
+interface I18nLangEntry {
+  title: string;
+  messages?: Record<string, TRValue>;
+}
+
+type TR = (k: string, o?: Record<string, unknown>) => string;
+
+declare var $t: TR;

package/types/utils.d.ts

@@ -0,0 +1 @@
+export declare function ParserI18nFn(data: Record<string, TRValue>): (k: string, named?: Record<string, unknown>) => string;