├── .babelrc ├── .editorconfig ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── build.yml ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src └── LaravelLocalization.js └── tests └── unit └── localization.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [{*.json,.*rc,*.yml}] 12 | indent_style = space 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb-base" 4 | ], 5 | "parserOptions": { 6 | "ecmaVersion": 11, 7 | "sourceType": "module" 8 | }, 9 | "env": { 10 | "node": true, 11 | "jest": true 12 | }, 13 | "rules": { 14 | "indent": ["error", 4, { "SwitchCase": 1 }] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [10, 12, 14] 13 | 14 | steps: 15 | - name: Checkout code 16 | uses: actions/checkout@v2 17 | 18 | - name: Build using Node ${{ matrix.node-version }} 19 | uses: actions/setup-node@v1 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | 23 | - name: Install dependencies 24 | run: npm install 25 | 26 | - name: Build 27 | run: npm run build 28 | 29 | - name: Lint 30 | run: npm run lint 31 | 32 | - name: Test 33 | run: npm run test 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules/ 4 | dist/ 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Wesley Francisco 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # laravel-localization-js 2 | 3 | ![CI](https://github.com/wesleyhf/laravel-localization-js/workflows/CI/badge.svg?branch=master) 4 | 5 | Easy way to handle Laravel's lang.json in Javascript. :earth_americas: 6 | 7 | Inspired by [Ziggy](https://github.com/tightenco/ziggy) and based on Laravel way to [Retrieving Translation Strings](https://laravel.com/docs/7.x/localization#retrieving-translation-strings). 8 | 9 | ## Why 10 | 11 | Manipulating translations strings at Javascript when you are using Laravel should not be so tricky. So, why not use the `lang.json` file that is already at your back-end? 12 | 13 | ## Contents 14 | 15 | - [Installation](#installation) 16 | - [Setup](#setup) 17 | - [Usage](#usage) 18 | - [License](#license) 19 | 20 | ## Installation 21 | 22 | Just run: 23 | 24 | ```sh 25 | npm install @wesleyhf/laravel-localization-js --save 26 | 27 | # or using yarn 28 | 29 | yarn add @wesleyhf/laravel-localization-js 30 | ``` 31 | 32 | ## Setup 33 | 34 | ```js 35 | import { createLaravelLocalization } from 'laravel-localization-js'; 36 | import lang from '../../lang/pt-br.json'; 37 | 38 | const __ = createLaravelLocalization(lang); 39 | 40 | console.log(__('Hello world')); // output: Olá mundo 41 | ``` 42 | 43 | ## Usage 44 | 45 | 46 | ```js 47 | // example of lang.json 48 | { 49 | 'My name is Wesley': 'Meu nome é Wesley', 50 | 'My name is :name': 'Meu nome é :name', 51 | }; 52 | 53 | // undefined key 54 | __('Hello world'); // 'Hello world' 55 | 56 | // defined key 57 | __('My name is Wesley'); // 'Meu nome é Wesley' 58 | 59 | // peplacing parameters 60 | __('My name is :name', { 'name': 'Wesley' }); // 'Meu nome é Wesley' 61 | ``` 62 | 63 | ## License 64 | 65 | [MIT License](LICENSE) © Wesley Francisco 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wesleyhf/laravel-localization-js", 3 | "version": "0.0.2", 4 | "description": "Easy way to handle Laravel's lang.json in Javascript", 5 | "source": "src/LaravelLocalization.js", 6 | "main": "dist/LaravelLocalization.js", 7 | "umd:main": "dist/LaravelLocalization.umd.js", 8 | "unpkg": "dist/LaravelLocalization.umd.js", 9 | "module": "dist/LaravelLocalization.modern.js", 10 | "files": [ 11 | "dist" 12 | ], 13 | "repository": "git@github.com:wesleyhf/laravel-localization-js.git", 14 | "bugs": { 15 | "url": "https://github.com/wesleyhf/laravel-localization-js/issues" 16 | }, 17 | "homepage": "https://github.com/wesleyhf/laravel-localization-js/issues#readme", 18 | "keywords": [ 19 | "laravel", 20 | "localization", 21 | "laravel localization", 22 | "laravel lang" 23 | ], 24 | "author": "Wesley Francisco (@wesleyhf)", 25 | "license": "MIT", 26 | "devDependencies": { 27 | "@babel/preset-env": "^7.9.6", 28 | "eslint": "^7.0.0", 29 | "eslint-config-airbnb-base": "^14.1.0", 30 | "eslint-plugin-import": "^2.20.2", 31 | "jest": "^26.0.1", 32 | "microbundle": "^0.12.0" 33 | }, 34 | "scripts": { 35 | "build": "microbundle --name LaravelLocalization --format modern,cjs,umd", 36 | "lint": "eslint src tests", 37 | "lint:fix": "npm run lint --fix", 38 | "test": "jest", 39 | "test:watch": "jest --watch", 40 | "prepublishOnly": "npm run build" 41 | }, 42 | "jest": { 43 | "verbose": true, 44 | "testMatch": [ 45 | "**/tests/**/*.test.js" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/LaravelLocalization.js: -------------------------------------------------------------------------------- 1 | export default class LaravelLocalization { 2 | constructor(translations) { 3 | this.translations = translations; 4 | } 5 | 6 | trans(key, parameters = {}) { 7 | let translation = this.translations[key] || key; 8 | 9 | Object.entries(parameters) 10 | .forEach(([parameter, value]) => { 11 | translation = translation.replace(`:${parameter}`, value); 12 | }); 13 | 14 | return translation; 15 | } 16 | } 17 | 18 | export function createLaravelLocalization(localizations) { 19 | const Localization = new LaravelLocalization(localizations); 20 | 21 | return Localization.trans.bind(Localization); 22 | } 23 | -------------------------------------------------------------------------------- /tests/unit/localization.test.js: -------------------------------------------------------------------------------- 1 | import { createLaravelLocalization } from '../../src/LaravelLocalization'; 2 | 3 | // eslint-disable-next-line no-underscore-dangle 4 | const __ = createLaravelLocalization({ 5 | 'My name is Wesley': 'Meu nome é Wesley', 6 | 'My name is :name': 'Meu nome é :name', 7 | 'Hello :firstName, I am :secondName': 'Olá :firstName, Eu sou o :secondName', 8 | }); 9 | 10 | describe('LaravelLocalization', () => { 11 | test('should handle undefined lang key', () => { 12 | const text = __('Hello World'); 13 | expect(text).toBe('Hello World'); 14 | }); 15 | 16 | test('should handle defined lang key', () => { 17 | const text = __('My name is Wesley'); 18 | expect(text).toBe('Meu nome é Wesley'); 19 | }); 20 | 21 | test('should replace parameter on undefined lang key', () => { 22 | const text = __('I am :name', { name: 'Wesley' }); 23 | expect(text).toBe('I am Wesley'); 24 | }); 25 | 26 | test('should replace parameter on defined lang key', () => { 27 | const text = __('My name is :name', { name: 'Wesley' }); 28 | expect(text).toBe('Meu nome é Wesley'); 29 | }); 30 | 31 | test('should replace multiples parameters on defined lang key', () => { 32 | const text = __('Hello :firstName, I am :secondName', { 33 | firstName: 'Larissa', 34 | secondName: 'Wesley', 35 | }); 36 | 37 | expect(text).toBe('Olá Larissa, Eu sou o Wesley'); 38 | }); 39 | }); 40 | --------------------------------------------------------------------------------