Add example & update readme (#3)

Author: eemeli

.gitignore

@@ -11,3 +11,6 @@ node_modules
 
 # Optional REPL history
 .node_repl_history
+
+example/dist/bundle.js
+example/package-lock.json

README.md

@@ -1,20 +1,35 @@
-# messageformat.js loader for webpack
+# ICU MessageFormat loader for webpack
 
-## Dependencies
 
-* Requires [messageformat.js](https://github.com/messageformat/messageformat.js) 1.0.0 or higher
-
-## Install
+## Installation
 
 ```
-npm install messageformat-loader
+npm install messageformat messageformat-loader
 ```
 
+
 ## Usage
 
-[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/#using-loaders)
+For a working demo of the loader, run `npm install` in the `example/` directory, and then open `example/dist/index.html` in a browser.
+
+### webpack.config.js
+
+```js
+{
+  test: /\bmessages\.json$/,
+  loader: require.resolve('messageformat-loader'),
+  options: {
+    biDiSupport: false,
+    disablePluralKeyChecks: false,
+    formatters: null,
+    intlSupport: false,
+    locale: ['en'],
+    strictNumberSign: false
+  }
+}
+```
 
-[Documentation: messageformat.js](https://messageformat.github.io/)
+The default option values are shown, and are not required. [See below](#options) for more information on them. As Webpack v1 does not support loader options, you should instead pass the options as query parameters in that environment; `locale` will accept a comma-delimited set of values.
 
 ### messages.json
 
@@ -30,22 +45,39 @@ npm install messageformat-loader
 
 ### example.js
 
-``` javascript
+ES6, with configuration:
+```js
+import messages from './messages.json'
+messages['ordinal-example']({ N: 1 })
+// => 'The 1st message.'
+```
+
+ES5, without configuration:
+```js
 var messages = require('messageformat-loader?locale=en!./messages.json');
 messages['ordinal-example']({ N: 1 });
 // => 'The 1st message.'
 ```
 
+
 ## Options
 
-* [`locale`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#MessageFormat) The [CLDR language code](http://www.unicode.org/cldr/charts/29/supplemental/language_territory_information.html) to pass to [messageformat.js](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html). Defaults to `en`.
+* [`locale`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#MessageFormat) The [CLDR language code](http://www.unicode.org/cldr/charts/29/supplemental/language_territory_information.html) or codes to pass to [messageformat.js](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html). If using multiple locales at the same time, exact matches to a locale code in the data structure keys will select that locale within it (as in [`example/src/messages.json`](example/src/messages.json)). Defaults to `en`.
 * [`disablePluralKeyChecks`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#disablePluralKeyChecks) By default, messageformat.js throws an error when a statement uses a non-numerical key that will never be matched as a pluralization category for the current locale. Use this argument to disable the validation and allow unused plural keys. Defaults to `false`.
 * [`intlSupport`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#setIntlSupport) Enable or disable support for the default formatters, which require the Intl object. Defaults to `false`.
 * [`biDiSupport`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#setBiDiSupport) Enable or disable the addition of Unicode control characters to all input to preserve the integrity of the output when mixing LTR and RTL text. Defaults to `false`.
 * [`formatters`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#addFormatters) Add custom formatter functions to this MessageFormat instance.
 * [`strictNumberSign`](https://messageformat.github.io/messageformat.js/doc/MessageFormat.html#setStrictNumberSign) Follow the stricter ICU MessageFormat spec and throw a runtime error if # is used with non-numeric input. Defaults to `false`.
 
 
+## Links
+
+- [messageformat](https://messageformat.github.io/)
+- Loaders:
+  - [Webpack v1](https://webpack.github.io/docs/using-loaders.html)
+  - [Webpack v2/3](https://webpack.js.org/concepts/loaders/)
+
+
 ## License
 
 MIT

example/dist/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Getting Started</title>
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>

example/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "messageformat-loader-example",
+  "version": "0.1.0",
+  "description": "Small example for messageformat-loader",
+  "scripts": {
+    "build": "webpack",
+    "postinstall": "cd .. && npm install --no-save messageformat",
+    "prepare": "npm run build"
+  },
+  "main": "src/index.js",
+  "repository": "https://github.com/eemeli/messageformat-loader",
+  "author": "Eemeli Aro <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "messageformat": "^1.0.2",
+    "messageformat-loader": "file:../",
+    "webpack": "^3.8.1"
+  }
+}

example/src/index.js

@@ -0,0 +1,13 @@
+import messages from './messages.json'
+
+function component() {
+  const element = document.createElement('div')
+  element.innerHTML = [
+    'In English: ' + messages.en.select({ GENDER: 'female' }),
+    'Suomeksi: ' + messages.fi.select({ GENDER: 'female' })
+  ].join('<br/>')
+  return element
+}
+
+console.log('messages', messages)
+document.body.appendChild(component())

example/src/messages.json

@@ -0,0 +1,16 @@
+{
+  "en": {
+    "simple": "A simple message.",
+    "var": "Message with {X}.",
+    "plural": "You have {N, plural, =0{no messages} one{1 message} other{# messages}}.",
+    "select": "{GENDER, select, male{He has} female{She has} other{They have}} sent you a message.",
+    "ordinal": "The {N, selectordinal, one{1st} two{2nd} few{3rd} other{#th}} message."
+  },
+  "fi": {
+    "simple": "Yksinkertainen viesti.",
+    "var": "Viesti jossa {X}.",
+    "plural": "Sinulla {N, plural, =0{ei ole viestejä} one{on 1 viesti} other{on # viestiä}}.",
+    "select": "{GENDER, select, other{Hän}} lähetti sinulle viestin.",
+    "ordinal": "{N, selectordinal, other{#.}} viesti."
+  }
+}

example/webpack.config.js

@@ -0,0 +1,27 @@
+const path = require('path')
+
+const locale = ['en', 'fi']
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\bmessages\.json$/,
+        loader: require.resolve('messageformat-loader'),
+        options: {
+          biDiSupport: false,
+          disablePluralKeyChecks: false,
+          formatters: null,
+          intlSupport: false,
+          locale,
+          strictNumberSign: false
+        }
+      }
+    ]
+  }
+}