globalize-rpk 1.7.1 → 1.7.2

package/examples/globalize-compiler/README.md

@@ -0,0 +1,45 @@
+# Basic Globalize Compiler example
+
+This example focuses on the Globalize Compiler and the Globalize runtime
+modules. It assumes knowledge of Globalize usage basics.
+
+## Requirements
+
+**1. Install Globalize dependencies and Globalize Compiler**
+
+This example uses `npm` to download Globalize dependencies (i.e., CLDR data and
+the Cldrjs library) and the [Globalize Compiler][].
+
+```
+npm install
+```
+
+[Globalize Compiler]: https://github.com/globalizejs/globalize-compiler
+
+## Running the example
+
+### Development mode
+
+1. Start a server by running `python -m SimpleHTTPServer` or other alternative
+servers such as [http-server][], [nginx][], [apache][].
+1. Point your browser at `http://localhost:8000/development.html`. Note that the
+formatters are created dynamically. Therefore, Cldrjs and CLDR data are
+required.
+1. Understand the demo by reading the source code. We have comments there for
+you.
+
+[http-server]: https://github.com/nodeapps/http-server
+[nginx]: http://nginx.org/en/docs/
+[apache]: http://httpd.apache.org/docs/trunk/
+
+### Production mode
+
+1. Compile the application formatters by running `npm run build`. See
+`package.json` to understand the actual shell command that is used. For more
+information about the compiler, see the [Globalize Compiler documentation][].
+1. Point your browser at `./production.html`. Note that we don't need Cldrjs nor
+CLDR data in production here.
+1. Understand the demo by reading the source code. We have comments there for
+you.
+
+[Globalize Compiler documentation]: https://github.com/globalizejs/globalize-compiler#README

package/examples/globalize-compiler/app.js

@@ -0,0 +1,58 @@
+var like, number;
+
+// Use Globalize to format dates.
+document.getElementById( "date" ).textContent = Globalize.formatDate( new Date(), {
+	datetime: "medium"
+});
+
+// Use Globalize to format dates on specific time zone.
+document.getElementById( "zonedDate" ).textContent = Globalize.formatDate( new Date(), {
+	datetime: "full",
+	timeZone: "America/Sao_Paulo"
+});
+
+// Use Globalize to format dates to parts.
+document.getElementById( "dateToParts" ).innerHTML = Globalize.formatDateToParts( new Date(), {
+	datetime: "medium"
+}).map(function( part ) {
+	switch(part.type) {
+		case "month": return "<strong>" + part.value + "</strong>";
+		default: return part.value;
+	}
+}).reduce(function( memo, value ) {
+	return memo + value;
+});
+
+// Use Globalize to format numbers.
+number = Globalize.numberFormatter();
+document.getElementById( "number" ).textContent = number( 12345.6789 );
+document.getElementById( "number-compact" ).textContent = Globalize.formatNumber( 12345.6789, {
+	compact: "short",
+	minimumSignificantDigits: 1,
+	maximumSignificantDigits: 3
+});
+
+// Use Globalize to format currencies.
+document.getElementById( "currency" ).textContent = Globalize.formatCurrency( 69900, "USD" );
+
+// Use Globalize to get the plural form of a numeric value.
+document.getElementById( "plural-number" ).textContent = number( 12345.6789 );
+document.getElementById( "plural-form" ).textContent = Globalize.plural( 12345.6789 );
+
+// Use Globalize to format a message with plural inflection.
+like = Globalize.messageFormatter( "like" );
+document.getElementById( "message-0" ).textContent = like( 0 );
+document.getElementById( "message-1" ).textContent = like( 1 );
+document.getElementById( "message-2" ).textContent = like( 2 );
+document.getElementById( "message-3" ).textContent = like( 3 );
+
+// Use Globalize to format a relative time.
+document.getElementById( "relative-time" ).textContent = Globalize.formatRelativeTime( -35, "second" );
+
+// Use Globalize to format a unit.
+document.getElementById( "unit" ).textContent = Globalize.formatUnit( 60, "mile/hour", {
+	form: "short"
+});
+
+document.getElementById( "requirements" ).style.display = "none";
+document.getElementById( "demo" ).style.display = "block";

package/examples/globalize-compiler/development.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Basic Globalize Compiler example (development mode)</title>
+</head>
+<body>
+    <h1>Basic Globalize Compiler example (development mode)</h1>
+
+    <div id="requirements">
+        <h2>Requirements</h2>
+        <ul>
+            <li>Read README.md for instructions.</li>
+        </ul>
+    </div>
+
+    <div id="demo" style="display: none">
+        <h2>Demo output</h2>
+        <p>Now: <span id="date"></span></p>
+        <p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
+        <p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
+        <p>A number: <span id="number"></span></p>
+        <p>A number (compact form): <span id="number-compact"></span></p>
+        <p>A currency: <span id="currency"></span></p>
+        <p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
+        <p>Messages:</p>
+        <ul>
+            <li><span id="message-0"></span></li>
+            <li><span id="message-1"></span></li>
+            <li><span id="message-2"></span></li>
+            <li><span id="message-3"></span></li>
+        </ul>
+        <p>Something happened: <span id="relative-time"></span></p>
+        <p>Speed limit: <span id="unit"></span></p>
+    </div>
+
+    <!--
+    First, we load Globalize's dependencies (`cldrjs` and its supplemental
+    module).
+    -->
+    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr.js"></script>
+    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/event.js"></script>
+    <script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/supplemental.js"></script>
+    <!--
+    npm@3 installs flat by default differently from npm@1 and npm@2, so either
+    the below or the above will work. Don't do this at your application, pick
+    one.
+    -->
+    <script src="node_modules/cldrjs/dist/cldr.js"></script>
+    <script src="node_modules/cldrjs/dist/cldr/event.js"></script>
+    <script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>
+
+    <!--
+    Next, we load Globalize and its modules. Note they are already available on
+    this repository. If it's not, read Usage on Getting Started on the root's
+    README.md.
+    -->
+    <script src="node_modules/globalize/dist/globalize.js"></script>
+    <script src="node_modules/globalize/dist/globalize/message.js"></script>
+    <script src="node_modules/globalize/dist/globalize/number.js"></script>
+    <script src="node_modules/globalize/dist/globalize/plural.js"></script>
+
+    <!-- Load after globalize/number.js -->
+    <script src="node_modules/globalize/dist/globalize/date.js"></script>
+    <script src="node_modules/globalize/dist/globalize/currency.js"></script>
+
+    <!-- Load after globalize/number.js and globalize/plural.js-->
+    <script src="node_modules/globalize/dist/globalize/relative-time.js"></script>
+    <script src="node_modules/globalize/dist/globalize/unit.js"></script>
+
+    <!-- Load jQuery to fetch the CLDR and message JSONs -->
+    <script src="node_modules/jquery/dist/jquery.js"></script>
+
+    <script>
+
+    // At this point, we have Globalize loaded. But, before we can use it, we
+    // need to feed it on the appropriate I18n content (Unicode CLDR). In order
+    // to do so, we use `Globalize.load()` and pass the content. On this demo,
+    // we made the things a little easier for you: we've embedded static JSON
+    // into the demo. So, you don't need to actually fetch it elsewhere.
+    $.when(
+      $.getJSON( "node_modules/cldr-data/main/en/ca-gregorian.json" ),
+      $.getJSON( "node_modules/cldr-data/main/en/currencies.json" ),
+      $.getJSON( "node_modules/cldr-data/main/en/dateFields.json" ),
+      $.getJSON( "node_modules/cldr-data/main/en/numbers.json" ),
+      $.getJSON( "node_modules/cldr-data/main/en/timeZoneNames.json" ),
+      $.getJSON( "node_modules/cldr-data/main/en/units.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/currencyData.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/likelySubtags.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/metaZones.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/plurals.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/timeData.json" ),
+      $.getJSON( "node_modules/cldr-data/supplemental/weekData.json" ),
+      $.getJSON( "messages.json" ),
+      $.getJSON( "node_modules/iana-tz-data/iana-tz-data.json" )
+    ).then(function( enCaGregorian, enCurrencies, enDateFields, enNumbers, enTimeZoneNames, enUnits,
+      currencyData, likelySubtags, metaZones, plurals, timeData, weekData, messages, ianaTzData ) {
+
+      Globalize.load( enCaGregorian[ 0 ] );
+      Globalize.load( enCurrencies[ 0 ] );
+      Globalize.load( enDateFields[ 0 ] );
+      Globalize.load( enNumbers[ 0 ] );
+      Globalize.load( enTimeZoneNames[ 0 ] );
+      Globalize.load( enUnits[ 0 ] );
+      Globalize.load( currencyData[ 0 ] );
+      Globalize.load( likelySubtags[ 0 ] );
+      Globalize.load( metaZones[ 0 ] );
+      Globalize.load( plurals[ 0 ] );
+      Globalize.load( timeData[ 0 ] );
+      Globalize.load( weekData[ 0 ] );
+      Globalize.loadMessages( messages[ 0 ] );
+      Globalize.loadTimeZone( ianaTzData[ 0 ] );
+      Globalize.locale("en");
+
+      // Load and execute our App.
+      $.getScript( "app.js" );
+    })
+    </script>
+
+</body>
+</html>

package/examples/globalize-compiler/messages.json

@@ -0,0 +1,12 @@
+{
+	"en": {
+		"like": [
+			"{0, plural, offset:1",
+			"     =0 {Be the first to like this}",
+			"     =1 {You liked this}",
+			"    one {You and someone else liked this}",
+			"  other {You and # others liked this}",
+			"}"
+		]
+	}
+}

package/examples/globalize-compiler/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "basic-globalize-compiler",
+  "private": true,
+  "scripts": {
+    "build": "globalize-compiler -l en -m messages.json -o compiled-formatters.js app.js"
+  },
+  "devDependencies": {
+    "cldr-data": ">=25",
+    "globalize": "^1.5.0",
+    "globalize-compiler": "^1.1.1",
+    "iana-tz-data": "^2017.1.0",
+    "jquery": "latest"
+  },
+  "cldr-data-urls-filter": "(core|dates|numbers|units)"
+}

package/examples/globalize-compiler/production.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Basic Globalize Compiler example (production mode)</title>
+</head>
+<body>
+    <h1>Basic Globalize Compiler example (production mode)</h1>
+
+    <div id="requirements">
+        <h2>Requirements</h2>
+        <ul>
+            <li>You need to build the `compiled-formatters.js`. Read README.md for instructions.
+            </li>
+        </ul>
+    </div>
+
+    <div id="demo" style="display: none">
+        <h2>Demo output</h2>
+        <p>Now: <span id="date"></span></p>
+        <p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
+        <p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
+        <p>A number: <span id="number"></span></p>
+        <p>A number (compact form): <span id="number-compact"></span></p>
+        <p>A currency: <span id="currency"></span></p>
+        <p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
+        <p>Messages:</p>
+        <ul>
+            <li><span id="message-0"></span></li>
+            <li><span id="message-1"></span></li>
+            <li><span id="message-2"></span></li>
+            <li><span id="message-3"></span></li>
+        </ul>
+        <p>Something happened: <span id="relative-time"></span></p>
+        <p>Speed limit: <span id="unit"></span></p>
+    </div>
+
+    <!--
+    Note, we don't need cldrjs library anymore because the formatters have
+    already been created by the compilation step. More info below.
+    -->
+
+    <!-- Load Globalize runtime and its runtime modules -->
+    <script src="node_modules/globalize/dist/globalize-runtime.js"></script>
+    <script src="node_modules/globalize/dist/globalize-runtime/message.js"></script>
+    <script src="node_modules/globalize/dist/globalize-runtime/number.js"></script>
+    <script src="node_modules/globalize/dist/globalize-runtime/plural.js"></script>
+
+    <!-- Load after globalize-runtime/number.js -->
+    <script src="node_modules/globalize/dist/globalize-runtime/date.js"></script>
+    <script src="node_modules/globalize/dist/globalize-runtime/currency.js"></script>
+
+    <!--
+    Load after globalize-runtime/number.js and globalize-runtime/plural.js
+    -->
+    <script src="node_modules/globalize/dist/globalize-runtime/relative-time.js"></script>
+    <script src="node_modules/globalize/dist/globalize-runtime/unit.js"></script>
+
+    <!--
+    Then, load the compiled formatters.
+
+    Note, we don't need to feed Globalize on CLDR data anymore because the
+    formatters have already been created by the compilation step and their
+    "snapshots" are available below.
+    -->
+    <script src="compiled-formatters.js"></script>
+
+    <!-- Our App -->
+    <script>
+    Globalize.locale("en");
+    </script>
+    <script src="app.js"></script>
+
+</body>
+</html>

package/examples/node-npm/README.md

@@ -0,0 +1,57 @@
+# Hello World (Node.js + npm)
+
+We assume you know what [Node.js](http://nodejs.org/) and
+[npm](https://www.npmjs.org/) is.
+
+The demo contains one single file:
+
+```
+.
+└── main.js
+```
+
+Before running it, execute the requirements below.
+
+
+## Requirements
+
+**1. Install Globalize**
+
+Let's use npm to download Globalize. For more information on regard of
+installation, please read [Getting Started](../../README.md#installation).
+
+```
+npm install
+```
+
+Then, you'll get this:
+
+```
+.
+├── node_modules/
+│   ├── globalize/ 
+│   │   └── dist/
+│   │       ├── globalize
+│   │       │   ├── date.js
+│   │       │   └── ...
+│   │       └── globalize.js
+│   └── ...
+└── main.js
+```
+
+**2. Dependencies**
+
+No action needed, because npm has already handled that for us.
+
+**3. CLDR content**
+
+No action needed, because npm has already handled that for us. For more
+information, see [npm's cldr-data](https://github.com/rxaviers/cldr-data-npm).
+
+
+## Running the demo
+
+Once you've completed the requirements above:
+
+1. Run `node main.js`.
+1. Understand the demo by reading the source code. We have comments there for you.

package/examples/node-npm/main.js

@@ -0,0 +1,65 @@
+var like;
+var Globalize = require( "globalize" );
+
+// Before we can use Globalize, we need to feed it on the appropriate I18n content (Unicode CLDR). Read Requirements on Getting Started on the root's README.md for more information.
+Globalize.load(
+	require( "cldr-data/main/en/ca-gregorian" ),
+	require( "cldr-data/main/en/currencies" ),
+	require( "cldr-data/main/en/dateFields" ),
+	require( "cldr-data/main/en/numbers" ),
+	require( "cldr-data/main/en/timeZoneNames" ),
+	require( "cldr-data/main/en/units" ),
+	require( "cldr-data/supplemental/currencyData" ),
+	require( "cldr-data/supplemental/likelySubtags" ),
+	require( "cldr-data/supplemental/metaZones" ),
+	require( "cldr-data/supplemental/plurals" ),
+	require( "cldr-data/supplemental/timeData" ),
+	require( "cldr-data/supplemental/weekData" )
+);
+Globalize.loadMessages( require( "./messages/en" ) );
+
+Globalize.loadTimeZone( require( "iana-tz-data" ) );
+
+// Set "en" as our default locale.
+Globalize.locale( "en" );
+
+// Use Globalize to format dates.
+console.log( Globalize.formatDate( new Date(), { datetime: "medium" } ) );
+
+// Use Globalize to format dates in specific time zones.
+console.log( Globalize.formatDate( new Date(), {
+	datetime: "full",
+	timeZone: "America/Sao_Paulo"
+}));
+
+// Use Globalize to format dates to parts.
+console.log( Globalize.formatDateToParts( new Date(), { datetime: "medium" } ) );
+
+// Use Globalize to format numbers.
+console.log( Globalize.formatNumber( 12345.6789 ) );
+
+// Use Globalize to format numbers (compact form).
+console.log( Globalize.formatNumber( 12345.6789, {
+	compact: "short",
+	minimumSignificantDigits: 1,
+	maximumSignificantDigits: 3
+}));
+
+// Use Globalize to format currencies.
+console.log( Globalize.formatCurrency( 69900, "USD" ) );
+
+// Use Globalize to get the plural form of a numeric value.
+console.log( Globalize.plural( 12345.6789 ) );
+
+// Use Globalize to format a message with plural inflection.
+like = Globalize.messageFormatter( "like" );
+console.log( like( 0 ) );
+console.log( like( 1 ) );
+console.log( like( 2 ) );
+console.log( like( 3 ) );
+
+// Use Globalize to format relative time.
+console.log( Globalize.formatRelativeTime( -35, "second" ) );
+
+// Use Globalize to format unit.
+console.log( Globalize.formatUnit( 60, "mile/hour", { form: "short" } ) );

package/examples/node-npm/messages/en.json

@@ -0,0 +1,12 @@
+{
+	"en": {
+		"like": [
+				"{0, plural, offset:1",
+				"     =0 {Be the first to like this}",
+				"     =1 {You liked this}",
+				"    one {You and someone else liked this}",
+				"  other {You and # others liked this}",
+				"}"
+			]
+	}
+}

package/examples/node-npm/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "globalize-hello-world-node-npm",
+  "private": true,
+  "dependencies": {
+    "cldr-data": "latest",
+    "globalize": "^1.3.0",
+    "iana-tz-data": ">=2017.0.0"
+  },
+  "cldr-data-urls-filter": "(core|dates|numbers|units)"
+}

package/examples/plain-javascript/README.md

@@ -0,0 +1,81 @@
+# Hello World (plain javascript)
+
+The demo contains one single file:
+
+```
+.
+└── index.html
+```
+
+Before running it, execute the requirements below.
+
+
+## Requirements
+
+**1. Dependencies**
+
+The demo requires Globalize and its dependencies. Globalize's dependencies are listed on [Getting
+Started](../../README.md#dependencies), and the only one is
+[cldrjs](https://github.com/rxaviers/cldrjs). You are free to fetch it the way you want. But, as an
+exercise of this demo, we'll download it ourselves. So:
+
+1. Click at [Globalize releases tab](https://github.com/globalizejs/globalize/releases).
+1. Download the latest package.
+1. Unzip it.
+1. Rename the extracted directory `globalize` and move it alongside `index.html` and `README.md`.
+1. Click at [cldrjs releases tab](https://github.com/rxaviers/cldrjs/releases).
+1. Download the latest package.
+1. Unzip it.
+1. Rename the extracted directory `cldrjs` and move it alongside `index.html` and `README.md`.
+
+Then, you'll get this:
+
+```
+.
+├── cldrjs
+│   └── dist
+│       ├── cldr.js
+│       ├── ...
+│       └── cldr
+│           ├── event.js
+│           ├── supplemental.js
+│           └── ...
+├── globalize
+│   └── dist
+│       ├── globalize.js
+│       ├── ...
+│       └── globalize
+│           ├── currency.js
+│           ├── date.js
+│           └── ...
+├── index.html
+└── README.md
+```
+
+For more information read [cldrjs' usage and
+installation](https://github.com/rxaviers/cldrjs#usage-and-installation) docs.
+
+**2. CLDR content**
+
+Another typical Globalize requirement is to fetch CLDR content yourself. But, on
+this demo we made the things a little easier for you: we've embedded static JSON
+into the demo. So, you don't need to actually fetch it anywhere. For more
+information about fetching Unicode CLDR JSON data, see [How do I get CLDR
+data?](../../doc/cldr.md).
+
+No action needed here.
+
+**3. Globalize `dist` files**
+
+*This step only applies if you are building the source files. If you have downloaded a ZIP or a TAR.GZ or are using a package manager (such as bower or npm) to install then you can ignore this step.*
+
+[Install the development external dependencies](../../README.md#install-development-external-dependencies) and [build the distribution files](../../README.md#build).
+
+## Running the demo
+
+Once you've completed the requirements above:
+
+1. Point your browser at `./index.html`.
+1. Open your JavaScript console to see the demo output.
+1. Understand the demo by reading the source code. We have comments there for
+you.