Welcome to lang2js 👋

A package that provides an easy way to export and sync Laravel localization files for JavaScript use

Problem

I have a Laravel project/website, while thinking of how to sync my localization and translation files from the app for JavaScript usage; my first approach was to have the localization content stored in the localStorage of the browser when a user first visits the app. While this was a goto solution, I realized this wasn't efficient enough, because it meant that the first page the user visits might not have its strings translated until the localization is available already in the localStorage. Another solution, was to inject the localization content directly into a DOMElement: <data id='lang' value="{{getAllLangContent()}}" />, clearly there was a trade-off as this drastically increased the page load time but solves the problem of the translations not being available.

Final Solution

My final solution which is currently in use was to have a package periodically sync the localization files for JavaScript use. The package reads the following files:

resources
├── lang
│   ├── en
│   │   ├── auth.php
│   │   └── dashboard.php
│   ├── fr
│   │   ├── auth.php
│   │   └── dashboard.php

and converts it to minified js files

public
├── js
│   ├── locales
│   │   ├── en.min.js
│   │   ├── fr.min.js
│   │   └── lang2js.min.js

So each locale that needs to be used is imported into my blade component

...
<footer>
    <script src="{{assets('js/locales/en.min.js')}}"></script>
    <script src="{{assets('js/locales/fr.min.js')}}"></script>
    <script src="{{assets('js/locales/lang2js.min.js')}}"></script>
    <script>
       let helloText = __("index.TEST_2", 'en') // this function is provided by `lang2js.min.js`
       document.getElementById("hellotext").innerHTML = helloText
    </script>
</footer>
...

Install

composer require developersunesis/lang2js

Usage

You can simply run a command

php artisan lang2js:export exportDir=:exportDir

The command above reads the translation files from Laravel default lang folder.

But if you have a custom location you want the translation files to be read from, you can use the following

php artisan lang2js:export exportDir=:exportPath localesDir=:localesPath

The two commands above uses the base path of the app and the path you specified as their absolute path.
Example:

php artisan lang2js:export exportDir=/public/js/locales localesDir=/resources/lang

# Uses full path
# exportDir == {YOUR_CURRENT_APP_LOCATION}/public/js/locales
# localesDir == {YOUR_CURRENT_APP_LOCATION}/public/resources/lang

To disable to command from using your base app file, you can add an option to the command as below

php artisan lang2js:export exportDir=C:/manners/Documents/public/js/locales localesDir=C:/manners/Documents/resources/lang --useBasePath=false

There are various use cases, one of which is to create a schedule for the package to resync the JavaScript translations periodically, this is very useful if you make use of laravel localizations that can be dynamically changed

$command = "php artisan lang2js:export exportDir=/public/js/locales"
$schedule->command($command)
          ->weekdays()
          ->daily();

# or through a facade function call
$schedule->call(function () {
    $lang2js = new Lang2js();
    $lang2js->setExportsDir("resources/exports");
    $lang2js->export();
})->weekly()->daily();

# or through a facade function call
$schedule->call(function () {
    L2J::setExportsDir("/public/js/locales")->export();
})->weekly()->daily();

Author

👤 Uche Emmanuel

• Website: https://developersunesis.com
• Twitter: @developrsunesis
• Github: @developersunesis
• LinkedIn: @developersunesis

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator