Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »
live-localizer
4.0.1 • Public • Published
Live Localizer
Live Localizer widget for lit-html and i18n-element
Live Demo on webcomponents.org
Live Localizer applied to the Shop App
Sequential description of the animated screenshot above
- Browse the Shop App with Live Localizer widget at the bottom left corner as a fab icon
- Open the Live Localizer widget
- Switch to the Japanese locale with pseudo-L10N
- Save the working strings of the Shop App as a local XLIFF file
bundle.ja.xlf - Open the local XLIFF with XLIFF editor Virtaal
- Translate the local XLIFF (Actually, open the translated XLIFF
shop-bundle.ja.xlf) - Drag and drop the translated XLIFF from Windows Explorer to Live Localizer widget
- Load the dropped XLIFF to the running Shop App
- Browse the localized Shop App
- Switch to the English locale
Table of Contents
- Use Cases
- Features
- Supported Browsers
- Install
- Import
- Apply
- Firebase Setup (Optional)
- Local XLIFF Watcher (Optional)
- Build
- Plans
- License
Use Cases
- Dispatch translation tasks via the running Web app itself
- Dispatch incremental translation tasks via the running Web app itself
- Check screenshots on the running Web app
- Check translation progress in statistics view
- Submit translations to Cloud (Firebase)
- Watch Cloud to update translations in real-time
Features
- Export XLIFF from the running app to a local file
- Import XLIFF from a local file to the running app
- Save XLIFF to Browser Storage (IndexedDB)
- Load XLIFF from Browser Storage (IndexedDB)
- Upload XLIFF to Cloud Storate (Firebase)
- Download XLIFF from Cloud Storage (Firebase)
- Show translation statistics in list view
- Detect changes on Cloud Storage (Firebase) to trigger a new build
- Detect changes and load Local XLIFF
Supported Browsers
| Browsers | Supported Versions | Platforms |
|---|---|---|
| Chrome | 59+ | Windows 7+, macOS El Capitan 10.11+, Linux |
| Firefox | 54+ | Windows 7+, macOS El Capitan 10.11+, Linux |
| Safari | 10.1.1 (12603.2.4)+ | macOS Sierra 10.12+ |
Install
npm install live-localizerImport
Static Loading
<!-- required for live-localizer -->Lazy Loading
<!-- required for live-localizer -->Apply
Attach at the end of the main body element.
With Firebase Cloud Storage:
... <!-- Firebase Cloud Storage configuration with the example parameters for Live Localizer demo app: For each target app, a dedicated Firebase project has to be configured. --> Without Firebase Cloud Storage:
... Firebase Setup (Optional)
A dedicated Firebase project has to be set up for storing XLIFF files for the target application.
Supported Authentication Methods
- Anonymous
- Google (OAuth)
- GitHub (OAuth)
- Twitter (OAuth)
Firebase Security Rules
"rules": "users": ".read": "auth.uid === 'xliff-watcher'" "$uid": ".read": "$uid === auth.uid" ".write": "$uid === auth.uid" XLIFF Watcher (Optional)
XLIFF Watcher in the build system can detect XLIFF file changes in Firebase in realtime and trigger a new build.
See gulp fetch-xliff and gulp watch-xliff tasks in demo/gulpfile.js
Start Watching:
gulp watch-xliff --database https://live-localizer-demo.firebaseio.com \ --service_account ../../live-localizer-demo-service-account.json \ --on_xliff_change 'npm run fetch-xliff && npm run demo' \ >../../logfile.txt 2>&1 & tail -f ../../logfile.txtExample XLIFF Watcher processes:
$ gulp watch-xliff --database https://live-localizer-demo.firebaseio.com \> --service_account ../../live-localizer-demo-service-account.json \> --on_xliff_change 'npm run fetch-xliff && npm run demo' # fetch-xliff options have to be configured [10:03:02] Using gulpfile ~/WebComponents/components/live-localizer/demo/gulpfile.js[10:03:02] Starting 'watch-xliff'...[10:03:02] watch-xliff: Watching changes on Firebase...[10:03:02] watch-xliff: gulp unwatch-xliff to stop the taskThe 'credential' property specified in the first argument to Stop Watching:
gulp unwatch-xliffNotes on XLIFF Watcher:
- Service account credentials' JSON is required for
gulp watch-xlifftask --token=notokenoption to use the same service account credentials forgulp fetch-xlifftask asgulp watch-xlifftaskdemo/getUsers.jsscript, which usesfirebase-adminSDK, is required to use the credentials
- Otherwise,
firebase login:citoken fromfirebase-toolsis required forgulp fetch-xlifftask
Local XLIFF Watcher (Optional)
Local XLIFF file changes can be watched real-time via local HTTP server at http://localhost:8887/UPLOADED_XLIFF_FILE
Check "Watch and Load XLIFF" in the local file storage control panel to start watching the local XLIFF file
The following table shows triggered operations whenever the translator saves (overwrites) the local XLIFF file
| Components | Operations |
|---|---|
| XLIFF Editor | Save (overwrite) the uploaded XLIFF file |
http-server |
Provide Local XLIFF Watcher with the XLIFF file status |
| Local XLIFF Watcher in Live Localizer | Periodically check the XLIFF file status and fetch it on its updates |
xliff-conv in Live Localizer |
Merge the XLIFF updates into the JSON data for running UI strings |
| Target Application | Show UI with the updated strings |
| Browser Storage | Automatically save the XLIFF file if "Automatic Save" is checked |
| Firebase Storage | Automatically upload the XLIFF file if "Automatic Save" is checked |
| Firebase | Notify XLIFF Watcher of a child_changed event for the XLIFF file updates |
XLIFF Watcher (watch-xliff gulp task) in the build system |
Detect the child_changed event and trigger a new build |
| Build system | Start a new build process including fetch-xliff gulp task and I18N, and deploy a new build on the development HTTP server |
| Development HTTP server | Provide browsers for translators with the new build |
| Reload button in Live Localizer | Detect the new build in 60 seconds and show the tooltip "App Updated" |
HTTP Server for Local XLIFF Watcher Setup
- Install NodeJS on the local host of the translator
- Install the local HTTP server npm package
npm install -g http-server- For HTTP sites, start local HTTP server at http://localhost:8887 with the root folder containing the XLIFF file
http-server FOLDER_TO_CONTAIN_XLIFF -d false -c-1 -r -a localhost -p 8887 --cors=If-Modified-Since- For HTTPS sites, start local HTTPS server at https://localhost:8887 with the root folder containing the XLIFF file
Batch File to Launch local HTTPS server on Windows from Node.js command prompt: https-local-server.bat FOLDER_TO_CONTAIN_XLIFF
@echo off
if "%1"=="" echo Please specify the path to the root folder containing the target XLIFF file
if "%1"=="" echo %0 C:\Path\To\XLIFF\Folder
if "%1"=="" goto :end
if exist C:\OpenSSL-Win64 set OPENSSL_CONF=C:\OpenSSL-Win64\bin\openssl.cfg
if exist C:\OpenSSL-Win64 set PATH=%PATH%;C:\OpenSSL-Win64\bin
if exist C:\OpenSSL-Win32 set OPENSSL_CONF=C:\OpenSSL-Win32\bin\openssl.cfg
if exist C:\OpenSSL-Win32 set PATH=%PATH%;C:\OpenSSL-Win32\bin
if "%OPENSSL_CONF%"=="" echo Please install OpenSSL package for Windows from https://slproweb.com/products/Win32OpenSSL.html linked from https://wiki.openssl.org/index.php/Binaries
if "%OPENSSL_CONF%"=="" goto :end
if not exist demoCA mkdir demoCA
cd demoCA
if not exist newcerts mkdir newcerts
type nul >index.txt
echo 01 >serial
if not exist localhostCA.key openssl genrsa 2048 >localhostCA.key
if not exist localhostCA.csr openssl req -new -key localhostCA.key -subj "/C=JP/ST=Tokyo/O=i18n-behavior/OU=Live Localizer/CN=Live Localizer Localhost CA" -out localhostCA.csr
del /Q CAcreation
if not exist localhostCA.crt type nul >CAcreation
if not exist localhostCA.crt openssl x509 -days 3650 -sha256 -req -signkey localhostCA.key -in localhostCA.csr -out localhostCA.crt
if not exist localhost.key openssl genrsa 2048 >localhost.key
if exist localhost_csr.txt goto :csr
echo [req] >localhost_csr.txt
echo default_bits = 2048 >>localhost_csr.txt
echo prompt = no >>localhost_csr.txt
echo default_md = sha256 >>localhost_csr.txt
echo req_extensions = SAN >>localhost_csr.txt
echo distinguished_name = dn >>localhost_csr.txt
echo [dn] >>localhost_csr.txt
echo C=JP >>localhost_csr.txt
echo ST=Tokyo >>localhost_csr.txt
echo O=i18n-behavior >>localhost_csr.txt
echo OU=Live Localizer >>localhost_csr.txt
echo CN=localhost >>localhost_csr.txt
echo [SAN] >>localhost_csr.txt
echo subjectAltName=DNS:localhost >>localhost_csr.txt
:csr
if not exist localhost.csr openssl req -config localhost_csr.txt -new -sha256 -key localhost.key -out localhost.csr
openssl req -text -noout -in localhost.csr
cd ..
if not exist demoCA\localhost.crt openssl x509 -req -CA demoCA\localhostCA.crt -CAkey demoCA\localhostCA.key -CAcreateserial -out demoCA\localhost.crt -in demoCA\localhost.csr -sha256 -days 3650 -extfile demoCA\localhost_csr.txt -extensions SAN
if exist demoCA\CAcreation echo Please install the generated Localhost CA certificate as "Trusted Root Certification Authorities"
if exist demoCA\CAcreation demoCA\localhostCA.crt
echo http-server "%1" -d false -c-1 -r -a localhost -p 8887 --cors=If-Modified-Since --ssl --cert demoCA\localhost.crt --key demoCA\localhost.key
http-server "%1" -d false -c-1 -r -a localhost -p 8887 --cors=If-Modified-Since --ssl --cert demoCA\localhost.crt --key demoCA\localhost.key
:end
Script to Launch local HTTPS server on Mac: https-local-server.sh FOLDER_TO_CONTAIN_XLIFF
#!/bin/sh which opensslmkdir -p demoCAcd demoCAmkdir -p newcertsrm -f index.txttouch index.txtecho 01 >serialrm -f CAcreationcd ..Notes on Local XLIFF Watcher:
- The XLIFF folder should contain only the target XLIFF file(s) for the project for security.
- The HTTP server is accessible only from the localhost and disallows directory listing.
- If the XLIFF file name is prefixed with an unpredictable string, it can serve as a kind of "password" to block malicious access from other local HTTP clients.
https-local-serverscript has to be executed in the same folder as its first execution so that it can find the generated certificates in./demoCAfolder.- To work around Issue #76,
https-local-serverscript is required even for HTTP web applications.
Build
Bundle dependent components with polymer-build bundler
With lazy loader live-localizer-lazy.js, live-localizer-main.js and its dependencies are lazily loaded.
The dependent components except for region flag images can be bundled with polymer-build bundler as follows.
polymer.json with bundled live-localizer dependencies: applied to I18n-ready pwa-starter-kit
live-localizer-lazy.js has to be imported from the main shell to be bundled properly
import '@polymer/app-layout/app-toolbar/app-toolbar.js'; import { menuIcon } from './my-icons.js'; import './snack-bar.js'; +import 'live-localizer/live-localizer-lazy.js';+ class MyApp extends connect(store)(i18n(LitElement)) { static get importMeta() { return import.meta; import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js'; import '@polymer/app-layout/app-toolbar/app-toolbar.js'; import { menuIcon } from './my-icons.js'; import './snack-bar.js';+import 'live-localizer/live-localizer-lazy.js'; class MyApp extends connect(store)(i18n(LitElement)) { static get importMeta() { return import.meta;Plans
TBD
License
install
npm i live-localizer
weekly downloads
41
version
4.0.1
license
BSD-2-Clause
