diff --git a/examples/app-npm-webpack/.gitignore b/examples/app-npm-webpack/.gitignore new file mode 100644 index 000000000..3dfc3690d --- /dev/null +++ b/examples/app-npm-webpack/.gitignore @@ -0,0 +1,2 @@ +dist/ +.tmp-globalize-webpack/ diff --git a/examples/app-npm-webpack/app/another-module.js b/examples/app-npm-webpack/app/another-module.js new file mode 100644 index 000000000..88722bace --- /dev/null +++ b/examples/app-npm-webpack/app/another-module.js @@ -0,0 +1,6 @@ +var Globalize = require( "globalize" ); + +// Use Globalize to format dates. +document.getElementById( "date" ).innerHTML = Globalize.formatDate( new Date(), { + datetime: "medium" +}); diff --git a/examples/app-npm-webpack/app/index.js b/examples/app-npm-webpack/app/index.js new file mode 100644 index 000000000..ba6c8d4a3 --- /dev/null +++ b/examples/app-npm-webpack/app/index.js @@ -0,0 +1,28 @@ +var like, number; +var Globalize = require( "globalize" ); + +require("./another-module"); + +// Use Globalize to format numbers. +number = Globalize.numberFormatter(); +document.getElementById( "number" ).innerHTML = number( 12345.6789 ); + +// Use Globalize to format currencies. +document.getElementById( "currency" ).innerHTML = Globalize.formatCurrency( 69900, "USD" ); + +// Use Globalize to get the plural form of a numeric value. +document.getElementById( "plural-number" ).innerHTML = number( 12345.6789 ); +document.getElementById( "plural-form" ).innerHTML = Globalize.plural( 12345.6789 ); + +// Use Globalize to format a message with plural inflection. +like = Globalize.messageFormatter( "like" ); +document.getElementById( "message-0" ).innerHTML = like( 0 ); +document.getElementById( "message-1" ).innerHTML = like( 1 ); +document.getElementById( "message-2" ).innerHTML = like( 2 ); +document.getElementById( "message-3" ).innerHTML = like( 3 ); + +// Use Globalize to format a relative time. +document.getElementById( "relative-time" ).innerText = Globalize.formatRelativeTime( -35, "second" ); + +document.getElementById( "requirements" ).style.display = "none"; +document.getElementById( "demo" ).style.display = "block"; diff --git a/examples/app-npm-webpack/index-template.html b/examples/app-npm-webpack/index-template.html new file mode 100644 index 000000000..082d23ceb --- /dev/null +++ b/examples/app-npm-webpack/index-template.html @@ -0,0 +1,39 @@ + + + + + Globalize App example using Webpack + + +

Globalize App example using Webpack

+ +
+

Requirements

+ +
+ + + + {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} + + {% } %} + + + diff --git a/examples/app-npm-webpack/messages/en.json b/examples/app-npm-webpack/messages/en.json new file mode 100644 index 000000000..4a5f1f488 --- /dev/null +++ b/examples/app-npm-webpack/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}", + "}" + ] + } +} diff --git a/examples/app-npm-webpack/messages/es.json b/examples/app-npm-webpack/messages/es.json new file mode 100644 index 000000000..6b82b5dbb --- /dev/null +++ b/examples/app-npm-webpack/messages/es.json @@ -0,0 +1,12 @@ +{ + "es": { + "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}", + "}" + ] + } +} diff --git a/examples/app-npm-webpack/messages/zh.json b/examples/app-npm-webpack/messages/zh.json new file mode 100644 index 000000000..5b9757075 --- /dev/null +++ b/examples/app-npm-webpack/messages/zh.json @@ -0,0 +1,12 @@ +{ + "zh": { + "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}", + "}" + ] + } +} diff --git a/examples/app-npm-webpack/package.json b/examples/app-npm-webpack/package.json new file mode 100644 index 000000000..805ea6728 --- /dev/null +++ b/examples/app-npm-webpack/package.json @@ -0,0 +1,18 @@ +{ + "name": "globalize-full-app-npm-webpack", + "private": true, + "devDependencies": { + "cldr-data": ">=25", + "globalize": "1.1.0-alpha - 1.1.x", + "extract-text-webpack-plugin": "^0.8.2", + "globalize-webpack-plugin": "git://github.com/rxaviers/globalize-webpack-plugin#master", + "html-webpack-plugin": "^1.1.0", + "nopt": "^3.0.3", + "webpack": "^1.9.0", + "webpack-dev-server": "^1.9.0" + }, + "scripts": { + "start": "./node_modules/.bin/webpack-dev-server --config webpack-config.js --hot --progress --colors --inline", + "build": "./node_modules/.bin/webpack --production --config webpack-config.js" + } +} diff --git a/examples/app-npm-webpack/webpack-config.js b/examples/app-npm-webpack/webpack-config.js new file mode 100644 index 000000000..8791e6f0c --- /dev/null +++ b/examples/app-npm-webpack/webpack-config.js @@ -0,0 +1,50 @@ +var webpack = require( "webpack" ); +var CommonsChunkPlugin = require( "webpack/lib/optimize/CommonsChunkPlugin" ); +var HtmlWebpackPlugin = require( "html-webpack-plugin" ); +var globalizePlugin = require( "globalize-webpack-plugin" ); +var nopt = require( "nopt" ); + +var options = nopt({ + production: Boolean +}); + +module.exports = { + entry: options.production ? { + main: "./app/index.js", + vendor: [ + "globalize", + "globalize/dist/globalize-runtime/number", + "globalize/dist/globalize-runtime/plural", + "globalize/dist/globalize-runtime/message", + "globalize/dist/globalize-runtime/currency", + "globalize/dist/globalize-runtime/date", + "globalize/dist/globalize-runtime/relative-time" + ] + } : "./app/index.js", + debug: !options.production, + output: { + path: options.production ? "./dist" : "./tmp", + publicPath: options.production ? "" : "http://localhost:8080/", + filename: options.production ? "app.[hash].js" : "app.js", + }, + resolve: { + extensions: [ "", ".js" ], + }, + plugins: [ + new HtmlWebpackPlugin({ + production: options.production, + template: "./index-template.html", + }), + new globalizePlugin({ + production: options.production, + developmentLocale: "en", + supportedLocales: [ "en", "es", "zh" ], + messages: "messages/[locale].json", + output: "globalize-compiled-data-[locale].[hash].js" + }) + + ].concat( options.production ? [ + new webpack.optimize.DedupePlugin(), + new CommonsChunkPlugin( "vendor", "vendor.[hash].js" ) + ] : [] ) +};