@sheet-i18n/react-client 0.1.2-canary.2 → 0.2.0-canary.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +68 -2
  2. package/dist/index.d.mts +7 -5
  3. package/dist/index.d.ts +7 -5
  4. package/dist/index.js +22 -10
  5. package/dist/index.mjs +21 -7
  6. package/package.json +5 -5
package/README.md CHANGED
@@ -1,3 +1,69 @@
1
- # React
1
+ # @sheet-i18n/react-client
2
2
 
3
- This is the `react` utility package.
3
+ A client-side package for React modules used by the `sheet-i18n` ecosystem. This package provides tools and utilities to integrate internationalization (`i18n`) into your React applications efficiently.
4
+
5
+ ## Installation
6
+
7
+ To install this package, use your preferred package manager:
8
+
9
+ ```bash
10
+ npm install @sheet-i18n/react-client
11
+ # or
12
+ yarn add @sheet-i18n/react-client
13
+ # or
14
+ pnpm add @sheet-i18n/react-client
15
+ ```
16
+
17
+ ## ✨ Features
18
+
19
+ ✅ React Hook: Use useTranslation for seamless i18n integration.
20
+
21
+ ✅ Dynamic Messages: Translate messages with runtime values and parameters.
22
+
23
+ ✅ Compatibility: Built to work perfectly with @sheet-i18n/react-core.
24
+
25
+ ## ⚠️ Peer Dependencies
26
+
27
+ This package relies on the following peer dependencies. Ensure they are installed in your project:
28
+
29
+ - react: ^19.0.0
30
+ - react-intl: ^7.0.4
31
+
32
+ ## 📜 Scripts
33
+
34
+ These scripts are available in the package:
35
+
36
+ - **build**: Builds the library using `tsup`.
37
+ - **dev**: Watches for changes and rebuilds during development.
38
+
39
+ ## 📦 Exports
40
+
41
+ The package provides the following exports:
42
+
43
+ - **CommonJS**: `./dist/index.js`
44
+ - **ES Module**: `./dist/index.mjs`
45
+
46
+ ## ⚠️ Peer Dependencies
47
+
48
+ This package relies on the following peer dependencies. Ensure they are installed in your project:
49
+
50
+ - **react**: ^19.0.0
51
+ - **react-intl**: ^7.0.4
52
+
53
+ ## 🛠️ Development Dependencies
54
+
55
+ - **@sheet-i18n/typescript-config**: Shared TypeScript configuration presets.
56
+ - **@types/react**: TypeScript definitions for React.
57
+
58
+ ## 🔑 Keywords
59
+
60
+ - `sheet-i18n`
61
+ - `react`
62
+ - `i18n`
63
+ - `client`
64
+
65
+ ## 👨‍💻 Author
66
+
67
+ - **devAnderson**
68
+ - [GitHub Profile](https://github.com/chltjdrhd777)
69
+ - 📧 [Email](mailto:chltjdrhd777@gmail.com)
package/dist/index.d.mts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { I18nStore } from '@sheet-i18n/react-core';
3
- import * as react from 'react';
4
3
  import { MessageDescriptor, IntlShape } from 'react-intl';
5
4
 
6
5
  type IntlProviderProps<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>> = {
@@ -8,21 +7,24 @@ type IntlProviderProps<TSupportedLocales extends readonly string[], TLocaleSet e
8
7
  currentLocale: TSupportedLocales[number];
9
8
  children: React.ReactNode;
10
9
  };
11
- declare function IntlProvider<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>>({ i18nStore, currentLocale, children, }: IntlProviderProps<TSupportedLocales, TLocaleSet>): react_jsx_runtime.JSX.Element;
12
10
 
13
11
  type UseIntlParams<D = MessageDescriptor> = Parameters<IntlShape['$t']> extends [D, ...infer R] ? [...R, Omit<D, 'id'>] : never;
14
12
  type $TParams = Partial<UseIntlParams>;
13
+ type BigIntExcludedValues = $TParams[0] extends Record<string, infer V> ? Record<string, Exclude<V, bigint>> : never;
14
+ type BigIntExcludedReactNode = Exclude<React.ReactNode, bigint>;
15
15
  interface UseTranslationParams<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>, TSheetTitle = keyof TLocaleSet[TSupportedLocales[number]]> {
16
16
  sheetTitle: TSheetTitle;
17
17
  i18nStore: I18nStore<TSupportedLocales, TLocaleSet>;
18
18
  }
19
19
  declare function useTranslation<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>, TSheetTitle extends keyof TLocaleSet[TSupportedLocales[number]], TMessageId extends keyof TLocaleSet[TSupportedLocales[number]][TSheetTitle]>({ sheetTitle, }: UseTranslationParams<TSupportedLocales, TLocaleSet, TSheetTitle>): {
20
- t: <TValues extends $TParams[0], TOpts extends $TParams[1], TDescriptor extends $TParams[2]>(id: TMessageId, values?: TValues, opts?: TOpts, _descriptor?: TDescriptor) => react.ReactNode | react.ReactNode[];
20
+ t: <TValues extends BigIntExcludedValues, TOpts extends $TParams[1], TDescriptor extends $TParams[2]>(id: TMessageId, values?: TValues | undefined, opts?: TOpts, _descriptor?: TDescriptor) => BigIntExcludedReactNode | BigIntExcludedReactNode[];
21
21
  };
22
22
 
23
23
  declare function createI18nContext<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>>(i18nStore: I18nStore<TSupportedLocales, TLocaleSet>): {
24
- IntlProvider: ({ currentLocale, children, }: Omit<IntlProviderProps<TSupportedLocales, TLocaleSet>, "i18nStore">) => react_jsx_runtime.JSX.Element;
24
+ IntlProvider: ({ currentLocale, children, }: Omit<IntlProviderProps<TSupportedLocales, TLocaleSet>, "currentLocale" | "i18nStore"> & {
25
+ currentLocale?: string;
26
+ }) => react_jsx_runtime.JSX.Element;
25
27
  useTranslation: <SheetTitle extends keyof TLocaleSet[TSupportedLocales[number]]>(sheetTitle: SheetTitle) => ReturnType<typeof useTranslation<TSupportedLocales, TLocaleSet, SheetTitle, keyof TLocaleSet[TSupportedLocales[number]][SheetTitle]>>;
26
28
  };
27
29
 
28
- export { IntlProvider, createI18nContext, useTranslation };
30
+ export { createI18nContext };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { I18nStore } from '@sheet-i18n/react-core';
3
- import * as react from 'react';
4
3
  import { MessageDescriptor, IntlShape } from 'react-intl';
5
4
 
6
5
  type IntlProviderProps<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>> = {
@@ -8,21 +7,24 @@ type IntlProviderProps<TSupportedLocales extends readonly string[], TLocaleSet e
8
7
  currentLocale: TSupportedLocales[number];
9
8
  children: React.ReactNode;
10
9
  };
11
- declare function IntlProvider<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>>({ i18nStore, currentLocale, children, }: IntlProviderProps<TSupportedLocales, TLocaleSet>): react_jsx_runtime.JSX.Element;
12
10
 
13
11
  type UseIntlParams<D = MessageDescriptor> = Parameters<IntlShape['$t']> extends [D, ...infer R] ? [...R, Omit<D, 'id'>] : never;
14
12
  type $TParams = Partial<UseIntlParams>;
13
+ type BigIntExcludedValues = $TParams[0] extends Record<string, infer V> ? Record<string, Exclude<V, bigint>> : never;
14
+ type BigIntExcludedReactNode = Exclude<React.ReactNode, bigint>;
15
15
  interface UseTranslationParams<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>, TSheetTitle = keyof TLocaleSet[TSupportedLocales[number]]> {
16
16
  sheetTitle: TSheetTitle;
17
17
  i18nStore: I18nStore<TSupportedLocales, TLocaleSet>;
18
18
  }
19
19
  declare function useTranslation<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>, TSheetTitle extends keyof TLocaleSet[TSupportedLocales[number]], TMessageId extends keyof TLocaleSet[TSupportedLocales[number]][TSheetTitle]>({ sheetTitle, }: UseTranslationParams<TSupportedLocales, TLocaleSet, TSheetTitle>): {
20
- t: <TValues extends $TParams[0], TOpts extends $TParams[1], TDescriptor extends $TParams[2]>(id: TMessageId, values?: TValues, opts?: TOpts, _descriptor?: TDescriptor) => react.ReactNode | react.ReactNode[];
20
+ t: <TValues extends BigIntExcludedValues, TOpts extends $TParams[1], TDescriptor extends $TParams[2]>(id: TMessageId, values?: TValues | undefined, opts?: TOpts, _descriptor?: TDescriptor) => BigIntExcludedReactNode | BigIntExcludedReactNode[];
21
21
  };
22
22
 
23
23
  declare function createI18nContext<TSupportedLocales extends readonly string[], TLocaleSet extends Record<TSupportedLocales[number], Record<string, any>>>(i18nStore: I18nStore<TSupportedLocales, TLocaleSet>): {
24
- IntlProvider: ({ currentLocale, children, }: Omit<IntlProviderProps<TSupportedLocales, TLocaleSet>, "i18nStore">) => react_jsx_runtime.JSX.Element;
24
+ IntlProvider: ({ currentLocale, children, }: Omit<IntlProviderProps<TSupportedLocales, TLocaleSet>, "currentLocale" | "i18nStore"> & {
25
+ currentLocale?: string;
26
+ }) => react_jsx_runtime.JSX.Element;
25
27
  useTranslation: <SheetTitle extends keyof TLocaleSet[TSupportedLocales[number]]>(sheetTitle: SheetTitle) => ReturnType<typeof useTranslation<TSupportedLocales, TLocaleSet, SheetTitle, keyof TLocaleSet[TSupportedLocales[number]][SheetTitle]>>;
26
28
  };
27
29
 
28
- export { IntlProvider, createI18nContext, useTranslation };
30
+ export { createI18nContext };
package/dist/index.js CHANGED
@@ -38,9 +38,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
38
38
  // src/index.ts
39
39
  var src_exports = {};
40
40
  __export(src_exports, {
41
- IntlProvider: () => IntlProvider,
42
- createI18nContext: () => createI18nContext,
43
- useTranslation: () => useTranslation
41
+ createI18nContext: () => createI18nContext
44
42
  });
45
43
  module.exports = __toCommonJS(src_exports);
46
44
 
@@ -56,17 +54,26 @@ function IntlProvider({
56
54
  currentLocale,
57
55
  children
58
56
  }) {
59
- const { defaultLocale, localeSet } = i18nStore;
60
- const locale = currentLocale != null ? currentLocale : defaultLocale;
57
+ const locale = currentLocale != null ? currentLocale : detectClientLanguage(i18nStore);
61
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
59
  import_react_intl.IntlProvider,
63
60
  {
64
61
  locale,
65
- messages: localeSet[currentLocale],
62
+ messages: i18nStore == null ? void 0 : i18nStore.localeSet[locale],
66
63
  children
67
64
  }
68
65
  );
69
66
  }
67
+ function detectClientLanguage(i18nStore) {
68
+ const { defaultLocale, supportedLocales } = i18nStore;
69
+ if (typeof navigator !== "undefined" && (navigator == null ? void 0 : navigator.languages)) {
70
+ const preferredLocale = navigator.languages.find(
71
+ (lang) => supportedLocales.includes(lang)
72
+ );
73
+ return preferredLocale != null ? preferredLocale : defaultLocale;
74
+ }
75
+ return defaultLocale != null ? defaultLocale : "";
76
+ }
70
77
 
71
78
  // src/useTranslation.ts
72
79
  var import_react_intl2 = require("react-intl");
@@ -111,7 +118,14 @@ function createI18nContext(i18nStore) {
111
118
  const IntlProviderImpl = ({
112
119
  currentLocale,
113
120
  children
114
- }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IntlProvider, { currentLocale, i18nStore, children });
121
+ }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
122
+ IntlProvider,
123
+ {
124
+ currentLocale,
125
+ i18nStore,
126
+ children
127
+ }
128
+ );
115
129
  const useTranslationImpl = (sheetTitle) => useTranslation({ sheetTitle, i18nStore });
116
130
  return {
117
131
  IntlProvider: IntlProviderImpl,
@@ -120,7 +134,5 @@ function createI18nContext(i18nStore) {
120
134
  }
121
135
  // Annotate the CommonJS export names for ESM import in node:
122
136
  0 && (module.exports = {
123
- IntlProvider,
124
- createI18nContext,
125
- useTranslation
137
+ createI18nContext
126
138
  });
package/dist/index.mjs CHANGED
@@ -31,17 +31,26 @@ function IntlProvider({
31
31
  currentLocale,
32
32
  children
33
33
  }) {
34
- const { defaultLocale, localeSet } = i18nStore;
35
- const locale = currentLocale != null ? currentLocale : defaultLocale;
34
+ const locale = currentLocale != null ? currentLocale : detectClientLanguage(i18nStore);
36
35
  return /* @__PURE__ */ jsx(
37
36
  ReactIntlProvider,
38
37
  {
39
38
  locale,
40
- messages: localeSet[currentLocale],
39
+ messages: i18nStore == null ? void 0 : i18nStore.localeSet[locale],
41
40
  children
42
41
  }
43
42
  );
44
43
  }
44
+ function detectClientLanguage(i18nStore) {
45
+ const { defaultLocale, supportedLocales } = i18nStore;
46
+ if (typeof navigator !== "undefined" && (navigator == null ? void 0 : navigator.languages)) {
47
+ const preferredLocale = navigator.languages.find(
48
+ (lang) => supportedLocales.includes(lang)
49
+ );
50
+ return preferredLocale != null ? preferredLocale : defaultLocale;
51
+ }
52
+ return defaultLocale != null ? defaultLocale : "";
53
+ }
45
54
 
46
55
  // src/useTranslation.ts
47
56
  import {
@@ -90,7 +99,14 @@ function createI18nContext(i18nStore) {
90
99
  const IntlProviderImpl = ({
91
100
  currentLocale,
92
101
  children
93
- }) => /* @__PURE__ */ jsx2(IntlProvider, { currentLocale, i18nStore, children });
102
+ }) => /* @__PURE__ */ jsx2(
103
+ IntlProvider,
104
+ {
105
+ currentLocale,
106
+ i18nStore,
107
+ children
108
+ }
109
+ );
94
110
  const useTranslationImpl = (sheetTitle) => useTranslation({ sheetTitle, i18nStore });
95
111
  return {
96
112
  IntlProvider: IntlProviderImpl,
@@ -98,7 +114,5 @@ function createI18nContext(i18nStore) {
98
114
  };
99
115
  }
100
116
  export {
101
- IntlProvider,
102
- createI18nContext,
103
- useTranslation
117
+ createI18nContext
104
118
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheet-i18n/react-client",
3
- "version": "0.1.2-canary.2",
3
+ "version": "0.2.0-canary.3",
4
4
  "description": "a client package for react modules used by sheet-i18n",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -27,14 +27,14 @@
27
27
  "dependencies": {
28
28
  "react": "^19.0.0",
29
29
  "react-intl": "^7.0.4",
30
- "@sheet-i18n/shared-utils": "0.2.3-canary.0",
31
- "@sheet-i18n/errors": "0.2.3-canary.0",
32
- "@sheet-i18n/react-core": "0.1.2-canary.0"
30
+ "@sheet-i18n/errors": "0.3.0-canary.1",
31
+ "@sheet-i18n/shared-utils": "0.3.0-canary.1",
32
+ "@sheet-i18n/react-core": "0.2.0-canary.1"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@types/react": "^19.0.2",
36
36
  "@types/react-dom": "^19.0.2",
37
- "@sheet-i18n/typescript-config": "0.2.3-canary.0"
37
+ "@sheet-i18n/typescript-config": "0.3.0-canary.1"
38
38
  },
39
39
  "scripts": {
40
40
  "build": "tsup",