@absolutesight/react-gettext 1.0.5 → 1.0.7

package/README.md

@@ -1,8 +1,27 @@
 # @absolutesight/react-gettext
 
-A tiny React library that helps to implement internalization in your application using gettext functions. It uses [React Context API](https://reactjs.org/docs/context.html) to expose gettext functions to children components.
-
-## Instalation
+> [!WARNING]
+> ### ⚠️ DEPRECATION NOTICE: This package is obsolete and no longer maintained
+>
+> **`@absolutesight/react-gettext` has been replaced by [**`@absolutesight/gettext`**](https://www.npmjs.com/package/@absolutesight/gettext).**
+>
+> Please migrate to the new package:
+>
+> ```bash
+> npm install @absolutesight/gettext
+> ```
+>
+> #### Why switch to [`@absolutesight/gettext`](https://www.npmjs.com/package/@absolutesight/gettext)?
+> - 🌐 **Universal Framework Support**: While this old library only supported React.js and Next.js, the new package works across **all JavaScript frameworks and environments** — React, Next.js (App & Pages Router), Vue, Svelte, Node.js, and vanilla JavaScript.
+> - ⚡ **High Performance & Zero Dependencies**: Lightweight, tree-shakeable, and built with modern TypeScript.
+> - 🧩 **Full WordPress Parity**: Complete implementation of WordPress-standard gettext functions (`__()`, `_n()`, `_x()`, `_nx()`, `_noop()`, `sprintf()`), PO/MO/JSON file parsing, and JSX interpolation.
+> - 🔒 **Safe Plural Evaluation**: Secure AST-based plural evaluator replacing insecure `eval()`.
+>
+> 👉 **Documentation & Migration Guide:** [https://www.npmjs.com/package/@absolutesight/gettext](https://www.npmjs.com/package/@absolutesight/gettext)
+
+---
+
+## Legacy Overview (Archived)
 
 > **Note:** This library requires **React 16.3 or later**
 
@@ -22,12 +41,12 @@ Let's take a closer look at each step. First of all, you to create translation c
 
 The translation catalog is an object that contains key/value pairs where keys are original singular messages and values are translations. If you have a message that can have plural forms, the value for it should be an array with translations where each translation corresponds to appropriate plural form. Finally, if you want to use a context with your messages, then it should be prepended to the message itself and separated by using `\u0004` (end of transition) character. Here is an example:
 
-```javascript
+```json
 {
-	"Hello world!": "¡Hola Mundo!", // regular message
-	"article": ["artículo", "artículos"], // plural version
-	"Logo link\u0004Homepage": "Página principal", // single message with "Logo link" contex
-	"Search results count\u0004article": ["artículo", "artículos"], // plural version with "Search results count" context
+	"Hello world!": "¡Hola Mundo!",
+	"article": ["artículo", "artículos"],
+	"Logo link\u0004Homepage": "Página principal",
+	"Search results count\u0004article": ["artículo", "artículos"]
 }
 ```
 
@@ -49,7 +68,7 @@ class MyApp extends Component {
 
     constructor(props) {
         super(props);
-        this.state = { textDomain: buildTextDomain(...) };
+        this.state = { textDomain: buildTextDomain("...") };
     }
 
     render() {
@@ -57,8 +76,7 @@ class MyApp extends Component {
             <div>
                 <TextDomainContext.Provider value={this.state.textDomain}>
                     <ComponentA />
-                    ...
-                </TextDomainContext>
+                </TextDomainContext.Provider>
             </div>
         );
     }
@@ -306,7 +324,7 @@ As an alternative you can pass translations and plural form as properties to hig
 function getTranslations() {
     return {
         'Some text': 'Some translated text',
-        ...
+        // ...
     };
 }
 
@@ -316,9 +334,9 @@ function getPluralForms(n) {
 
 const HOC = withGettext()(App);
 
-...
+// ...
 
-ReactDOM.render(<HOC translations={getTranslations} plural={getPluralForms}>...</HOC>, ...);
+ReactDOM.render(<HOC translations={getTranslations} plural={getPluralForms}>...</HOC>, /* ... */);
 ```
 
 One more alternative is to not create HOC, but use TextDomain component directly. You can import it using `import { Textdomain } from '@absolutesight/react-gettext'` and use it as a regular component which will provide context functions to translate your messages. Just don't forget to pass `translations` and `plural` props to this component when you render it.
@@ -352,8 +370,56 @@ msgstr ""
 
 If you prefer using npm scripts, then you can add the following command to your `package.json` file to extract static copy and generate POT file using CLI commands. Make sure, you have correct `project` and `output` paths.
 
+```json
+{
+  "scripts": {
+    "gettext:convert": "gettextjs --json ./",
+    "gettext:compile": "find ./languages/LC_MESSAGES -name \\*.po -execdir sh -c 'msgfmt \"$0\" -o `basename $0 .po`.mo' '{}' \\;",
+    "gettext": "npm run gettext:compile && npm run gettext:convert",
+    "gettext:extract": "find /path/to/project -name \"*.js\" -not -path './node_modules/*' -not -path './node_modules/*' | xargs xgettext --from-code=UTF-8 --language=JavaScript --keyword=gettext --keyword=gettext_next --keyword=ngettext:1,2 --keyword=xgettext:1,2c --keyword=nxgettext:1,2,4c --output=./location/top/pot/file/example.pot --sort-by-file --package-name=\"My Project Name\" --package-version=\"0.1.0\""
+  }
+}
+```
+
+## Requirements
+### For Ubuntu
+```
+sudo apt update && sudo apt install gettext -y
+```
+
+### For macOS (using Homebrew):
+```
+brew install gettext
+brew link --force gettext
+```
+
+### For Arch Linux:
+```
+sudo pacman -S gettext
+```
+
+### For Windows (using Chocolatey):
 ```
-"gettext:extract": "find /path/to/project -name \"*.js\" | xargs xgettext --from-code=UTF-8 --language=JavaScript --keyword=gettext --keyword=ngettext:1,2 --keyword=xgettext:1,2c --keyword=nxgettext:1,2,4c --output=/path/to/project/projectname.pot --sort-by-file --package-name=\"My Project Name\" --package-version=\"1.0.0\""
+choco install gettext
+```
+
+# Information Related to next.js
+I have added the next.js support in my code. For this you need to use `gettext_next` function instead of `gettext`.
+If you see that some text is not translating properly. You can define variable with `gettext_next` function and then use that variable in your JSX.
+
+```javascript
+import * as ProtoTypes from "prop-types";
+import {GetText} from "@/components";
+
+export const gettext_next = (text) => {
+  text = text.replace("%%", "%");
+  return <GetText>{text}</GetText>;
+};
+
+gettext_next.protoTypes = {
+  text: ProtoTypes.string
+};
+
 ```
 
 ## Contribute

package/package.json

@@ -7,7 +7,7 @@
   "bugs": {
     "url": "https://absolutesight.com"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "src/index.js",
   "files": [
     "*.md",
@@ -33,7 +33,7 @@
     "build:umd": "webpack --output-filename=react-gettext.js",
     "build:umd:min": "NODE_ENV=production webpack --output-filename=react-gettext.min.js",
     "build:umd:min:win": "set NODE_ENV=production webpack --output-filename=react-gettext.min.js",
-    "test": "BABEL_ENV=test jest",
+    "test": "BABEL_ENV=test jest --passWithNoTests",
     "prepublish": "npm run build",
     "lint": "eslint src --fix --max-warnings=0"
   },
@@ -57,7 +57,7 @@
     "jest-enzyme": "^7.1.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "webpack": "^5.90.3",
@@ -69,12 +69,9 @@
   "peerDependencies": {
     "hoist-non-react-statics": "^1.2.0 || ^2.0.0-0 || ^3.0.0-0",
     "prop-types": "^15.0.0-0 || ^16.0.0-0",
-    "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+    "react": "^19.0.0"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/__tests__/__setup.js"
-    ],
     "testMatch": [
       "<rootDir>/__tests__/**/[^_]*.js"
     ],