-
Notifications
You must be signed in to change notification settings - Fork 603
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement app example using webpack #481
Changes from all commits
a5cddc2
38b5a7d
2573e2b
ef8dd29
a85966e
95f42bf
17089fb
e41c0a4
7204957
014e900
e1adbdc
7ace189
ecbfa93
c2affb6
4c8dd9c
1e442ab
77e613c
e3c17bf
a77b1ce
9f3acdc
a9643a6
15f2905
a219f72
0e9a073
092dd56
528d481
92a4bc9
d6d91a9
b612f25
9b6414a
20b49eb
cc621b9
e20b6e4
f2ef378
4e3687c
4a07c28
8be8f18
85cd21f
e2057e3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
dist/ | ||
.tmp-globalize-webpack/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
# Globalize App example using webpack | ||
|
||
This example demonstrates how to integrate Globalize with Webpack in your | ||
Application. If you already have an existing Application using Webpack stack, | ||
this example should as well provide you guidance on how to integrate Globalize. | ||
It focuses on the [Globalize Webpack Plugin][], which automates data loading | ||
(CLDR and app messages) during development and automates Globalize compilation | ||
and the usage of Globalize runtime modules for production. It assumes knowledge | ||
of Globalize, npm, and Webpack usage basics. | ||
|
||
## Requirements | ||
|
||
**1. Install app development dependencies** | ||
|
||
This example uses `npm` to download the app development dependencies (i.e., | ||
Globalize, CLDR data, Cldrjs, Webpack, [Globalize Webpack Plugin][], and | ||
others). | ||
|
||
``` | ||
npm install | ||
``` | ||
|
||
## Running the example | ||
|
||
### Development mode | ||
|
||
``` | ||
npm start | ||
``` | ||
|
||
1. Start a server by running `npm start`, which uses webpack's live reload HMR | ||
(Hot Module Replacement). See `package.json` to understand the actual shell | ||
command that is used. | ||
1. Point your browser at `http://localhost:8080`. Note that your browser will | ||
automatically reload on any changes made to the application code (`app/*.js` | ||
files). Also note that for faster page reload, formatters are created | ||
dynamically and automatically by the [Globalize Webpack Plugin][]. | ||
1. Note you can specify the development locale of your choice by setting the | ||
`developmentLocale` property of the Globalize Webpack Plugin on the Webpack | ||
config file. | ||
1. Note that CLDR data and your messages data are automatically loaded by the | ||
[Globalize Webpack Plugin][]. | ||
1. Understand the demo by reading the source code. We have comments there for | ||
you. | ||
|
||
### Production mode | ||
|
||
``` | ||
npm run build | ||
``` | ||
|
||
1. Generate the compiled bundles by running `npm run build`, which will be | ||
created at `./dist`. Note the production bundles are split into three chunks: | ||
(a) vendor, which holds third-party libraries, which in this case means | ||
Globalize Runtime modules, (b) i18n precompiled data, which means the minimum | ||
yet sufficient set of precompiled i18n data that your application needs (one | ||
file for each supported locale), and (c) app, which means your application code. | ||
Also note that all the production code is already minified using UglifyJS. See | ||
`package.json` to understand the actual shell command that is used. | ||
1. Note that your formatters are already precompiled. This is | ||
obvious, but worth emphasizing. It means your formatters are prebuilt, so no client | ||
CPU clock is wasted to generate them and no CLDR or messages data needs to be | ||
dynamically loaded. It means fast to load code (small code) and fast to run | ||
code. | ||
1. Point your browser at `./dist/index.html` to run the application using the | ||
generated production files. Edit this file to display the application using a | ||
different locale (source code has instructions). | ||
1. Understand the demo by reading the source code. We have comments there for | ||
you. | ||
|
||
For more information about the plugin, see the [Globalize Webpack Plugin][] | ||
documentation. | ||
|
||
[Globalize Webpack Plugin]: https://github.com/rxaviers/globalize-webpack-plugin |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
var currencyFormatter, dateFormatter, numberFormatter, relativeTimeFormatter, startTime, | ||
Globalize = require( "globalize" ); | ||
|
||
startTime = new Date(); | ||
|
||
currencyFormatter = Globalize.currencyFormatter( "USD" ); | ||
dateFormatter = Globalize.dateFormatter({ datetime: "medium" }); | ||
numberFormatter = Globalize.numberFormatter({ maximumFractionDigits: 2 }); | ||
relativeTimeFormatter = Globalize.relativeTimeFormatter( "second" ); | ||
|
||
document.getElementById( "intro-1" ).innerHTML = Globalize.formatMessage( "intro-1" ); | ||
|
||
// Standalone table. | ||
document.getElementById( "currency-label" ).innerHTML = Globalize.formatMessage( "currency-label" ); | ||
document.getElementById( "currency" ).innerHTML = currencyFormatter( 69900 ); | ||
|
||
document.getElementById( "date-label" ).innerHTML = Globalize.formatMessage( "date-label" ); | ||
document.getElementById( "date" ).innerHTML = dateFormatter( new Date() ); | ||
|
||
document.getElementById( "number-label" ).innerHTML = Globalize.formatMessage( "number-label" ); | ||
document.getElementById( "number" ).innerHTML = numberFormatter( 12345.6789 ); | ||
|
||
document.getElementById( "relative-time-label" ).innerHTML = Globalize.formatMessage( "relative-time-label" ); | ||
document.getElementById( "relative-time" ).innerHTML = relativeTimeFormatter( 0 ); | ||
|
||
// Messages. | ||
document.getElementById( "message-1" ).innerHTML = Globalize.formatMessage( "message-1", { | ||
currency: currencyFormatter( 69900 ), | ||
date: dateFormatter( new Date() ), | ||
number: numberFormatter( 12345.6789 ), | ||
relativeTime: relativeTimeFormatter( 0 ) | ||
}); | ||
|
||
document.getElementById( "message-2" ).innerHTML = Globalize.formatMessage( "message-2", { | ||
count: 3 | ||
}); | ||
|
||
// Display demo. | ||
document.getElementById( "requirements" ).style.display = "none"; | ||
document.getElementById( "demo" ).style.display = "block"; | ||
|
||
// Refresh elapsed time | ||
setInterval(function() { | ||
var elapsedTime = +( ( startTime - new Date() ) / 1000 ).toFixed( 0 ); | ||
document.getElementById( "date" ).innerHTML = dateFormatter( new Date() ); | ||
document.getElementById( "relative-time" ).innerHTML = relativeTimeFormatter( elapsedTime ); | ||
document.getElementById( "message-1" ).innerHTML = Globalize.formatMessage( "message-1", { | ||
currency: currencyFormatter( 69900 ), | ||
date: dateFormatter( new Date() ), | ||
number: numberFormatter( 12345.6789 ), | ||
relativeTime: relativeTimeFormatter( elapsedTime ) | ||
}); | ||
|
||
}, 1000); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. missing a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<title>Globalize App example using Webpack</title> | ||
</head> | ||
<body> | ||
|
||
<h1>Globalize App example using Webpack</h1> | ||
|
||
<div id="requirements"> | ||
<h2>Requirements</h2> | ||
<ul> | ||
<li>Read README.md for instructions on how to run the demo. | ||
</li> | ||
</ul> | ||
</div> | ||
|
||
<div id="demo" style="display: none"> | ||
<p id="intro-1">Use Globalize to internationalize your application.</p> | ||
<table border="1" style="marginBottom: 1em;"> | ||
<tbody> | ||
<tr> | ||
<td><span id="number-label">Standalone Number</span></td> | ||
<td>"<span id="number"></span>"</td> | ||
</tr> | ||
<tr> | ||
<td><span id="currency-label">Standalone Currency</span></td> | ||
<td>"<span id="currency"></span>"</td> | ||
</tr> | ||
<tr> | ||
<td><span id="date-label">Standalone Date</span></td> | ||
<td>"<span id="date"></span>"</td> | ||
</tr> | ||
<tr> | ||
<td><span id="relative-time-label">Standalone Relative Time</span></td> | ||
<td>"<span id="relative-time"></span>"</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
<p id="message-1"> | ||
An example of a message using mixed numbers "{number}", currencies "{currency}", dates "{date}", and relative time "{relativeTime}". | ||
</p> | ||
<p id="message-2"> | ||
An example of a message with pluralization support: | ||
{count, plural, | ||
one {You have one remaining task} | ||
other {You have # remaining tasks} | ||
}. | ||
</p> | ||
</div> | ||
|
||
{% | ||
var hasShownLocaleHelp; | ||
for ( var chunk in o.htmlWebpackPlugin.files.chunks ) { | ||
if ( /globalize-compiled-data-/.test( chunk ) && chunk !== "globalize-compiled-data-en" ) { | ||
if ( !hasShownLocaleHelp ) { | ||
hasShownLocaleHelp = true; | ||
%} | ||
<!-- | ||
Load support for the `en` (English) locale. | ||
|
||
For displaying the application in a different locale, replace `en` with | ||
whatever other supported locale you want, e.g., `pt` (Portuguese). | ||
|
||
For supporting additional locales simultaneously and then having your | ||
application to change it dynamically, load the multiple files here. Then, | ||
use `Globalize.locale( <locale> )` in your application to dynamically set | ||
it. | ||
--> | ||
{% } %} | ||
<!-- <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> --> | ||
{% } else { %} | ||
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> | ||
{% | ||
} | ||
} | ||
%} | ||
|
||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
{ | ||
"ar": { | ||
"intro-1": "استخدام عولمة لتدويل طلبك.", | ||
"number-label": "عدد", | ||
"currency-label": "عملة", | ||
"date-label": "تاريخ", | ||
"relative-time-label": "الوقت النسبي", | ||
"message-1": "مثال على رسالة باستخدام أرقام مختلطة \"{number}\"، \"{currency}\" العملات، يعود \"{date}\"، ووقت النسبي \"{relativeTime}\".", | ||
"message-2": [ | ||
"مثال على رسالة بدعم صيغة الجمع:", | ||
"{count, plural,", | ||
" zero {لا يوجد لديك المهام المتبقية}", | ||
" one {لديك واحد المتبقية المهام}", | ||
" two {لديك اثنين من المهام المتبقية}", | ||
" few {لديك # المهام المتبقية}", | ||
" many {لديك # المهام المتبقية}", | ||
" other {لديك # المهام المتبقية}", | ||
"}." | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"de": { | ||
"intro-1": "Verwenden Sie Globalize um Ihre Anwendung zu internationalisieren.", | ||
"number-label": "Zahl", | ||
"currency-label": "Währung", | ||
"date-label": "Datum", | ||
"relative-time-label": "Relative Zeit", | ||
"message-1": "Ein Beispieltext der eine Mischung aus Zahl \"{number}\", Währung \"{currency}\", Datum \"{date}\", und relativer Zeit \"{relativeTime}\" verwendet.", | ||
"message-2": [ | ||
"Ein Beispieltext mit Unterstützung von Plural Formen: ", | ||
"{count, plural,", | ||
" one {Sie haben noch eine Aufgabe}", | ||
" other {Sie haben noch # verbliebende Aufgaben}", | ||
"}." | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"en": { | ||
"intro-1": "Use Globalize to internationalize your application.", | ||
"number-label": "Number", | ||
"currency-label": "Currency", | ||
"date-label": "Date", | ||
"relative-time-label": "Relative Time", | ||
"message-1": "An example of a message using mixed numbers \"{number}\", currencies \"{currency}\", dates \"{date}\", and relative time \"{relativeTime}\".", | ||
"message-2": [ | ||
"An example of a message with pluralization support:", | ||
"{count, plural,", | ||
" one {You have one remaining task}", | ||
" other {You have # remaining tasks}", | ||
"}." | ||
] | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jzaefferer would you like to add support for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @isaacdurazo would you like to add support for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For the record, Jörn has provided |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"es": { | ||
"intro-1": "Usa Globalize para internacionalizar tu aplicación.", | ||
"number-label": "Número", | ||
"currency-label": "Moneda", | ||
"date-label": "Fecha", | ||
"relative-time-label": "Tiempo Relativo", | ||
"message-1": "Un ejemplo de mensaje usando números mixtos \"{number}\", monedas \"{currency}\", fechas \"{date}\", y tiempo relativo \"{relativeTime}\".", | ||
"message-2": [ | ||
"Un ejemplo de mensaje con soporte de pluralizaciónt:", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Small typo, extra There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, d317164. |
||
"{count, plural,", | ||
" one {Tienes una tarea restante}", | ||
" other {Tienes # tareas restantes}", | ||
"}." | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"pt": { | ||
"intro-1": "Use o Globalize para internacionalizar sua aplicação.", | ||
"number-label": "Número", | ||
"currency-label": "Moeda", | ||
"date-label": "Data", | ||
"relative-time-label": "Tempo relativo", | ||
"message-1": "Um exemplo de mensagem com mistura de números \"{number}\", moedas \"{currency}\", datas \"{date}\", e tempo relativo \"{relativeTime}\".", | ||
"message-2": [ | ||
"Um exemplo de message com suporte a pluralização:", | ||
"{count, plural,", | ||
" one {Você tem uma tarefa restante}", | ||
" other {Você tem # tarefas restantes}", | ||
"}." | ||
] | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"ru": { | ||
"intro-1": "Используйте Globalize для интернационализиции вашего приложения.", | ||
"number-label": "Число", | ||
"currency-label": "Валюта", | ||
"date-label": "Дата", | ||
"relative-time-label": "Относительное время", | ||
"message-1": "Пример сообщения со смешанными числами \"{number}\", валютой \"{currency}\", датами \"{date}\" и относительным временем \"{relativeTime}\".", | ||
"message-2": [ | ||
"Пример сообщения с поддержкой множественного числа:", | ||
"{count, plural,", | ||
" one {У вас осталась одна задача}", | ||
" many {У вас осталось # задач}", | ||
" few {У вас осталось # задачи}", | ||
" other {У вас осталось # задачи}", | ||
"}." | ||
] | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe for the demo purposes also increment the
count
from0
to some number and back to0
? This would demonstrate how plurals work with different values.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 should be tracked separately by #489
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, great!