Implement Trans component

.eslintrc.json

@@ -8,7 +8,6 @@
       "modules": true
     }
   },
-  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,

.gitignore

@@ -1,4 +1,6 @@
 /node_modules
 /dist
 /coverage
-/docs
+/docs
+/.yarn
+/yarn-error.log

.npmignore

@@ -2,4 +2,10 @@
 /docs
 /src
 /.vscode
-/types
+/types
+/tests
+/CNAME
+/CODE_OF_CONDUCT.md
+/.yarn
+/public
+/yarn-error.log

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
+### Added
+- Trans component for interpolating translations and parsing HTML tags.
 
 ## [2.4.0] - 2023-02-07
 ### Fixed

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Mike Eling
+Copyright (c) 2023 Assembless
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -93,7 +93,7 @@ Here we have two options:
 -   **Hooks** (recommended)
 -   **HOC** (deprecated)
 
-#### Hooks Example
+#### Hooks
 
 ##### Basic
 ```javascript
@@ -184,7 +184,7 @@ const ExampleComponent = () => {
 export default ExampleComponent;
 ```
 
-#### HOC Example
+#### HOC
 
 ```javascript
 import React from "react";
@@ -217,6 +217,84 @@ class ExampleComponent extends React.Component {
 export default withLittera(translation)(ExampleComponent);
 ```
 
+#### Trans Component
+
+The Trans component is a custom translation component that can interpolate variables and parse HTML elements.
+
+:warning: If possible, avoid using the component. It is slower and will drastically decrease performance when nesting components. Use the `useLittera` hook, take a look at the variable translations example above.
+
+##### Props
+The Trans component takes the following props:
+
+ **`children` (required)**
+The children prop is the translation string to be rendered. It should be a string or a React element. You can pass a translated string directly to the component from `useLittera`.
+
+**`values` (optional)**
+The values prop is an object containing values to be interpolated in the translation string. The keys of the object should match the variable names in the translation string, and the values should be the values to be substituted. It should be an object where the keys are strings and the values are either strings or React elements.
+
+**`components` (optional)**
+The components prop is an object containing custom React components or HTML tags to be parsed and rendered. The keys of the object should match the HTML tag names, and the values should be the React components to be used instead. It should be an object where the keys are strings and the values are either strings or React elements.
+
+##### Examples
+Here's an example of how to use the Trans component:
+
+```jsx
+import React from "react";
+import { Trans, useLittera } from "@assembless/react-littera";
+
+const translations = {
+  welcome: {
+    en_US: "Welcome <strong>{name}</strong>!",
+    de_DE: "Willkommen <strong>{name}</strong>!",
+    pl_PL: "Witaj <strong>{name}</strong>!",
+  },
+};
+
+function App() {
+  const translated = useLittera(translations);
+
+  return <Trans values={{ name: "Jack" }}>{translated.welcome}</Trans>;
+}
+```
+In this example, the `useLittera` hook is used to get the translated string. The values prop is used to interpolate the name variable in the translated string, and the Trans component is used to parse and render the HTML tags.
+
+Here's another example with custom components:
+
+```jsx
+import React from "react";
+import { Trans, useLittera } from "@assembless/react-littera";
+
+const translations = {
+  welcome: {
+    en_US: "Welcome <strong>{name}</strong> to <magic>{town}</magic>!",
+    de_DE: "Willkommen <strong>{name}</strong> in <magic>{town}</magic>!",
+    pl_PL: "Witaj <strong>{name}</strong> w <magic>{town}</magic>!",
+  },
+  warsaw: {
+    en_US: "Warsaw",
+    de_DE: "Warschau",
+    pl_PL: "Warszawa",
+  },
+};
+
+function App() {
+  const translated = useLittera(translations);
+
+  return (
+    <Trans
+      values={{ name: "Jack", town: translated.warsaw }}
+      components={{ magic: MagicComponent }}
+    >
+      {translated.welcome}
+    </Trans>
+  );
+}
+
+function MagicComponent({ children }) {
+  return <span style={{ color: "red" }}>{children}</span>;
+}
+```
+
 ## API
 
  #### LitteraProvider
@@ -404,13 +482,13 @@ const { locale, setLocale, pattern, setPattern, validateLocale } = useLitteraMet
 
 ## FAQ
 
-#### Will I need to type all the translations by myself?
+#### Do I have to type all the translations by myself?
 Yes, we have not implemented a translator to keep this package simple and lightweight also providing the translations manually guarantees a better user experience.
 
 #### Does react-littera work with React Native?
 React Native compatibility has not been tested but the community reported 100% usability.
 
-#### You can easily transfer translations with a component.
+#### You can easily transport translations with a component.
 Just define the translations object in your components file or directory. It will travel with your component, just remember to add @assembless/react-littera as a dependency!
 
 ## License

jest.config.json

@@ -11,14 +11,12 @@
   },
   "testMatch": ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
   "transform": {
-    "^.+\\.(ts|tsx)?$": "ts-jest",
-    ".*": "babel-jest",
-    "^.+\\.(ts|tsx)$": "<rootDir>/tests/preprocessor.js"
+    "^.+\\.(ts|tsx)?$": "ts-jest"
   },
+  "testEnvironment": "jest-environment-jsdom",
   "modulePathIgnorePatterns": ["docs/"],
   "setupFiles": [
-    "<rootDir>/tests/shim.js",
-    "<rootDir>/tests/setup.js"
+    "<rootDir>/tests/setupTests.ts"
   ],
   "moduleFileExtensions": [
     "ts",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assembless/react-littera",
-  "version": "2.4.0",
+  "version": "2.5.0-nightly.26",
   "description": "🌐 Modern react library for robust translations.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,29 +15,16 @@
     "deploy": "yarn build && npm publish",
     "typecheck": "tsc --noEmit"
   },
-  "peerDependencies": {},
   "devDependencies": {
-    "@babel/compat-data": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.0.0-beta.33",
-    "@babel/preset-env": "^7.0.0-beta.33",
-    "@babel/preset-es2015": "^7.0.0-beta.53",
-    "@babel/preset-react": "^7.7.0",
-    "@babel/register": "^7.0.0-beta.33",
-    "@babel/runtime": "^7.0.0-beta.33",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^24.0.22",
     "@types/node": "^14.6.4",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-root-import": "^6.4.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
     "better-docs": "^2.3.0",
     "copy-webpack-plugin": "^5.0.3",
     "coveralls": "^3.0.3",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.11.2",
     "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.16.0",
@@ -47,15 +34,17 @@
     "jest": "^26.1.0",
     "jsdoc": "^3.6.4",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
     "source-map-loader": "^0.2.4",
     "ts-jest": "^24.1.0",
     "typescript": "^3.9.6",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack-dev-server": "^3.2.1",
+    "react-test-renderer": "^18.2.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "repository": {
     "type": "git",
@@ -83,5 +72,5 @@
       "modules": true
     }
   },
-  "dependencies": {}
+  "packageManager": "yarn@1.22.1"
 }

public/index.d.ts

@@ -1 +1 @@
-declare module "react-littera";
+declare module "@assembless/react-littera";

src/LitteraProvider.tsx

@@ -54,7 +54,7 @@ export function LitteraProvider({
         setLocale: handleLocale,
         pattern,
         locales
-      }}
+      }} 
     >
       {children}
     </LitteraContext.Provider>