diff --git a/compiler.js b/compiler.js new file mode 100644 index 0000000..8ba0bc4 --- /dev/null +++ b/compiler.js @@ -0,0 +1,17 @@ +var React = require("react"); +var Globalize = require("globalize"); +var GlobalizeCompiler = require("globalize/tool/compiler"); + +function compiler() { + var components = [].slice.call(arguments, 0); + + // Have react to render all passed components, therefore any formatters in use will be created. + components.forEach(function(component) { + React.renderToString(component); + }); + + // Compile all generated formatters. + return GlobalizeCompiler(Globalize.cache); +} + +module.exports = compiler; diff --git a/examples/README.md b/examples/README.md deleted file mode 100644 index 4a72102..0000000 --- a/examples/README.md +++ /dev/null @@ -1,10 +0,0 @@ -Example -======= - -Install -------- -These instructions assume you have node and npm installed. For help, see the [npm docs](https://docs.npmjs.com/getting-started/installing-node) - -1. Run `npm install` -2. Run `npm run-script build` to generate the built JS file -3. Open browser and navigate to `react-globalize/examples/index.html` diff --git a/examples/amd/.bowerrc b/examples/amd/.bowerrc new file mode 100644 index 0000000..38ac4f2 --- /dev/null +++ b/examples/amd/.bowerrc @@ -0,0 +1,7 @@ +{ + "scripts": { + "preinstall": "npm install cldr-data-downloader@0.2.x", + "postinstall": "node ./node_modules/cldr-data-downloader/bin/download.js -i bower_components/cldr-data/index.json -o bower_components/cldr-data/" + } +} + diff --git a/examples/amd/README.md b/examples/amd/README.md new file mode 100644 index 0000000..c8be5b5 --- /dev/null +++ b/examples/amd/README.md @@ -0,0 +1,17 @@ +Example +======= + +Development mode +------- +These instructions assume you have node and npm installed. For help, see the [npm docs](https://docs.npmjs.com/getting-started/installing-node) + +1. Run `npm install` once. +3. Open browser and navigate to `react-globalize/examples/development.html`. + +Production mode +------- + +1. Run `npm install` once. +2. Run `npm run-script build` to generate the built JS file. +3. Open browser and navigate to `react-globalize/examples/production.html`. + diff --git a/examples/amd/bower.json b/examples/amd/bower.json new file mode 100644 index 0000000..10476ef --- /dev/null +++ b/examples/amd/bower.json @@ -0,0 +1,14 @@ +{ + "name": "react-globalize-example", + "devDependencies": { + "almond": "~0.3.1", + "cldr-data": "27.x", + "globalize": "jquery/globalize#fix-398-runtime", + "react": "0.13.1", + "react-globalize": "rxaviers/react-globalize#addons", + "requirejs": "2.1.x", + "requirejs-plugins": "1.0.2", + "requirejs-react-jsx": "0.13.1", + "requirejs-text": "2.0.x" + } +} diff --git a/examples/amd/build b/examples/amd/build new file mode 100755 index 0000000..d731a2d --- /dev/null +++ b/examples/amd/build @@ -0,0 +1,41 @@ +#! /usr/bin/env node + +var requirejs = require("requirejs"); +var util = require("util"); + +var config = require("./src/config"); +config.paths.almond = "../bower_components/almond/almond"; +config.paths["globalize-precompiled-formatters"] = "../tmp/globalize-precompiled-formatters"; +config.paths["globalize-runtime"] = "../bower_components/globalize/dist/globalize-runtime"; +config.map = { + "*": { + "globalize": "globalize-runtime" + } +}; +delete config.paths["cldr-data"]; + +util._extend(config, { + dir: "tmp/.build", + appDir: "src", + baseUrl: ".", + optimize: "none", + skipDirOptimize: true, + skipSemiColonInsertion: true, + skipModuleInsertion: true, + findNestedDependencies: true, + stubModules : ["text"], + onBuildWrite: function (id, path, contents) { + return contents + .replace(/"globalize"/g, "\"globalize-runtime\"") + .replace(/"globalize\//g, "\"globalize-runtime\/") + .replace(/jsx!/g, ""); + }, + modules: [{ + name: "app", + include: ["almond", "jsx!production"], + exclude: ["jsx"], + create: true + }] +}); + +requirejs.optimize(config, function(){}, console.error); diff --git a/examples/amd/development.html b/examples/amd/development.html new file mode 100644 index 0000000..b30a228 --- /dev/null +++ b/examples/amd/development.html @@ -0,0 +1,14 @@ + + + + + Examples + + + + + + + diff --git a/examples/amd/globalize-compiler b/examples/amd/globalize-compiler new file mode 100755 index 0000000..a63dc35 --- /dev/null +++ b/examples/amd/globalize-compiler @@ -0,0 +1,21 @@ +#! /usr/bin/env node + +var GlobalizeCompiler = require("globalize/tool/compiler"); +var React = require("react"); +var requirejs = require("requirejs"); +var config = require("./src/config"); + +config.nodeRequire = require; +config.baseUrl = __dirname + "/src"; +requirejs.config(config); + +Globalize = requirejs("globalize"); +requirejs("load-globalize-i18n-data"); +var App = requirejs("jsx!app"); + +// Have react to render all passed components, therefore any formatters in use will be created. +React.renderToString(React.createElement(App, {locale: "en"})); +React.renderToString(React.createElement(App, {locale: "pt"})); + +// Compile all generated formatters. +console.log(GlobalizeCompiler(Globalize.cache)); diff --git a/examples/amd/package.json b/examples/amd/package.json new file mode 100644 index 0000000..118526a --- /dev/null +++ b/examples/amd/package.json @@ -0,0 +1,15 @@ +{ + "name": "react-globalize-example", + "description": "Examples demonstrating use of the components", + "main": "app.js", + "devDependencies": { + "react": "~0.13.0", + "react-tools": "^0.13.2", + "requirejs": "^2.1.17", + "uglify-js": "^2.4.20" + }, + "scripts": { + "clean": "for DIR in tmp dist; do ( test -d $DIR && rm -rf $DIR ); mkdir $DIR; done", + "build": "npm run-script clean && ./globalize-compiler > tmp/globalize-precompiled-formatters.js && ./build && cp tmp/.build/app.js dist/production.js && uglifyjs dist/production.js > dist/production.min.js" + } +} diff --git a/examples/amd/production.html b/examples/amd/production.html new file mode 100644 index 0000000..b2802ef --- /dev/null +++ b/examples/amd/production.html @@ -0,0 +1,10 @@ + + + + + Examples + + + + + diff --git a/examples/amd/src/app.jsx b/examples/amd/src/app.jsx new file mode 100644 index 0000000..d423f2d --- /dev/null +++ b/examples/amd/src/app.jsx @@ -0,0 +1,49 @@ +define([ + "globalize", + "react", + "jsx!./components/currency", + "jsx!./components/dates", + "jsx!./components/messages", + "jsx!./components/numbers" +], function(Globalize, React, LocalizedCurrencies, LocalizedDates, LocalizedMessages, LocalizedNumbers) { + +var App = React.createClass({ + getInitialState: function() { + return { + locale: this.props.locale + }; + }, + changeLocale: function( event ) { + this.setState({ + locale: event.target.value + }); + }, + render: function() { + Globalize.locale(this.state.locale); + return ( +
+

Select a locale:

+ + +

Currency

+ + +

Dates

+ + +

Messages

+ + +

Numbers

+ +
+ ); + } +}); + +return App; + +}); diff --git a/examples/amd/src/components/currency.jsx b/examples/amd/src/components/currency.jsx new file mode 100644 index 0000000..fed05a6 --- /dev/null +++ b/examples/amd/src/components/currency.jsx @@ -0,0 +1,38 @@ +define([ + "react", + "react-globalize" +], function(React, ReactGlobalize) { + +var FormatCurrency = ReactGlobalize.FormatCurrency; + +var LocalizedCurrencies = React.createClass({ + render: function() { + return ( +
+ USD, 150, default - +
+ USD, -150, style: "accounting" - +
+ USD, 150, style: "name" - +
+ USD, 150, style: "code" - +
+ USD, 1.491, round: "ceil" - +
+ EUR, 150, default - +
+ EUR, -150, style: "accounting" - +
+ EUR, 150, style: "name" - +
+ EUR, 150, style: "code" - +
+ EUR, 1.491, round: "ceil" - +
+ ); + } +}); + +return LocalizedCurrencies; + +}); diff --git a/examples/amd/src/components/dates.jsx b/examples/amd/src/components/dates.jsx new file mode 100644 index 0000000..f792578 --- /dev/null +++ b/examples/amd/src/components/dates.jsx @@ -0,0 +1,28 @@ +define([ + "react", + "react-globalize" +], function(React, ReactGlobalize) { + +var FormatDate = ReactGlobalize.FormatDate; + +var LocalizedDates = React.createClass({ + render: function() { + return ( +
+ default - +
+ skeleton: "GyMMMd" - +
+ date: "medium" - +
+ time: "medium" - +
+ datetime: "medium" - +
+ ); + } +}); + +return LocalizedDates; + +}); diff --git a/examples/amd/src/components/messages.jsx b/examples/amd/src/components/messages.jsx new file mode 100644 index 0000000..d170b06 --- /dev/null +++ b/examples/amd/src/components/messages.jsx @@ -0,0 +1,55 @@ +define([ + "react", + "react-globalize" +], function(React, ReactGlobalize) { + +var FormatMessage = ReactGlobalize.FormatMessage; +var FormatNumber = ReactGlobalize.FormatNumber; + +var LocalizedMessages = React.createClass({ + render: function() { + return ( +
+

Simple Salutation

+ hi - +
+ bye - +

Variable Replacement

+ ["Wolfgang", "Amadeus", "Mozart"] - +
+ {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - +

Gender Inflection

+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Mendelssohn", hostGender:"female"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"other"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"male"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"other"})} - +

Plural Inflection

+ task count 1 - +
+ task count 0 - +
+ task count 1000 formatted - + }} /> +
+ like count 0 with offset:1 - +
+ like count 1 with offset:1 - +
+ like count 2 with offset:1 - +
+ like count 3 with offset:1 - +
+ ); + } +}); + +return LocalizedMessages; + +}); diff --git a/examples/amd/src/components/numbers.jsx b/examples/amd/src/components/numbers.jsx new file mode 100644 index 0000000..53c5fdd --- /dev/null +++ b/examples/amd/src/components/numbers.jsx @@ -0,0 +1,28 @@ +define([ + "react", + "react-globalize" +], function(React, ReactGlobalize) { + +var FormatNumber = ReactGlobalize.FormatNumber; + +var LocalizedNumbers = React.createClass({ + render: function() { + return ( +
+ pi, no options - +
+ pi, maximumFractionDigits: 5 - +
+ pi, round: "floor" - +
+ 10000, minimumFractionDigits: 2 - +
+ 0.5, style: "percent" - +
+ ); + } +}); + +return LocalizedNumbers; + +}); diff --git a/examples/amd/src/config.js b/examples/amd/src/config.js new file mode 100644 index 0000000..beed6b8 --- /dev/null +++ b/examples/amd/src/config.js @@ -0,0 +1,43 @@ +(function(root, factory) { + + // Node, CommonJS + if (typeof exports === "object") { + module.exports = factory(); + + // Global + } else { + root.requirejs = factory(); + } +}(this, function() { + + +return { + paths: { + "cldr": "../bower_components/cldrjs/dist/cldr", + "cldr-data": "../bower_components/cldr-data/", + "globalize": "../bower_components/globalize/dist/globalize", + "react-globalize": "../bower_components/react-globalize/index", + "json": "../bower_components/requirejs-plugins/src/json", + "jsx": "../bower_components/requirejs-react-jsx/jsx", + "JSXTransformer": "../bower_components/react/JSXTransformer", + "react": "../bower_components/react/react-with-addons", + "text": "../bower_components/requirejs-text/text" + }, + shim: { + "react": { + "exports": "React" + }, + "JSXTransformer": "JSXTransformer" + }, + jsx: { + fileExtension: ".jsx", + transformOptions: { + harmony: false, + stripTypes: false, + inlineSourceMap: false + }, + usePragma: false + } +}; + +})); diff --git a/examples/amd/src/development.jsx b/examples/amd/src/development.jsx new file mode 100644 index 0000000..e6fd793 --- /dev/null +++ b/examples/amd/src/development.jsx @@ -0,0 +1,9 @@ +define([ + "react", + "jsx!./app", + "./load-globalize-i18n-data" +], function(React, App) { + +React.render( , document.body ); + +}); diff --git a/examples/amd/src/load-globalize-i18n-data.js b/examples/amd/src/load-globalize-i18n-data.js new file mode 100644 index 0000000..09bb1cf --- /dev/null +++ b/examples/amd/src/load-globalize-i18n-data.js @@ -0,0 +1,102 @@ +define([ + "cldr", + "globalize", + "json!cldr-data/main/en/ca-gregorian.json", + "json!cldr-data/main/en/timeZoneNames.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/main/en/currencies.json", + "json!cldr-data/main/pt/ca-gregorian.json", + "json!cldr-data/main/pt/timeZoneNames.json", + "json!cldr-data/main/pt/numbers.json", + "json!cldr-data/main/pt/currencies.json", + "json!cldr-data/supplemental/currencyData.json", + "json!cldr-data/supplemental/plurals.json", + "json!cldr-data/supplemental/likelySubtags.json", + "json!cldr-data/supplemental/timeData.json", + "json!cldr-data/supplemental/weekData.json", + "globalize/message" +], function(Cldr, Globalize, enCaGregorian, enTimeZoneNames, enNumbers, enCurrencies, ptCaGregorian, ptTimeZoneNames, ptNumbers, ptCurrencies, currencyData, plurals, likelySubtags, timeData, weekData) { + +var messages = { + en: { + salutations: { + hi: "Hi", + bye: "Bye" + }, + variables: { + hello: "Hello, {0} {1} {2}", + hey: "Hey, {first} {middle} {last}" + }, + party: [ + "{hostGender, select,", + " female {{host} invites {guest} to her party}", + " male {{host} invites {guest} to his party}", + " other {{host} invites {guest} to their party}", + "}" + ], + task: [ + "You have {count, plural,", + " =0 {no tasks}", + " one {one task}", + " other {{formattedCount} tasks}", + "} remaining" + ], + likeIncludingMe: [ + "{count, 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}", + "}" + ] + }, + "pt": { + salutations: { + hi: "Oi", + bye: "Tchau" + }, + variables: { + hello: "Olá, {0} {1} {2}", + hey: "Ei, {first} {middle} {last}" + }, + party: [ + "{hostGender, select,", + " female {{guestGender, select,", + " female {A {host} convida a {guest} para sua festa}", + " male {A {host} convida o {guest} para sua festa}", + " other {A {host} convida {guest} para sua festa}", + " }}", + " male {{guestGender, select,", + " female {O {host} convida a {guest} para sua festa}", + " male {O {host} convida o {guest} para sua festa}", + " other {O {host} convida {guest} para sua festa}", + " }}", + " other {{guestGender, select,", + " female {{host} convidam a {guest} para sua festa}", + " male {{host} convidam o {guest} para sua festa}", + " other {{host} convidam {guest} para sua festa}", + " }}", + "}" + ], + task: [ + "{count, plural,", + " =0 {Você não tem nenhuma tarefa restante}", + " one {Você tem uma tarefa restante}", + " other {Você tem {formattedCount} tarefas restantes}", + "}" + ], + likeIncludingMe: [ + "{count, plural, offset:1", + " =0 {Seja o primeiro a curtir isto}", + " =1 {Você curtiu isto}", + " one {Você e alguém mais curtiu isto}", + " other {Você e # outros curtiram isto}", + "}" + ] + } +}; + +Globalize.load(enCaGregorian, enTimeZoneNames, enNumbers, enCurrencies, ptCaGregorian, ptTimeZoneNames, ptNumbers, ptCurrencies, currencyData, plurals, likelySubtags, timeData, weekData); +Globalize.loadMessages(messages); + +}); diff --git a/examples/amd/src/production.jsx b/examples/amd/src/production.jsx new file mode 100644 index 0000000..d69c2f5 --- /dev/null +++ b/examples/amd/src/production.jsx @@ -0,0 +1,9 @@ +require([ + "react", + "jsx!./app", + "globalize-precompiled-formatters" +], function(React, App) { + +React.render( , document.body ); + +}); diff --git a/examples/cjs/README.md b/examples/cjs/README.md new file mode 100644 index 0000000..c8be5b5 --- /dev/null +++ b/examples/cjs/README.md @@ -0,0 +1,17 @@ +Example +======= + +Development mode +------- +These instructions assume you have node and npm installed. For help, see the [npm docs](https://docs.npmjs.com/getting-started/installing-node) + +1. Run `npm install` once. +3. Open browser and navigate to `react-globalize/examples/development.html`. + +Production mode +------- + +1. Run `npm install` once. +2. Run `npm run-script build` to generate the built JS file. +3. Open browser and navigate to `react-globalize/examples/production.html`. + diff --git a/examples/cjs/app.jsx b/examples/cjs/app.jsx new file mode 100644 index 0000000..314df28 --- /dev/null +++ b/examples/cjs/app.jsx @@ -0,0 +1,45 @@ +var React = require("react"); +var Globalize = require("globalize"); +var LocalizedCurrencies = require("./components/currency"); +var LocalizedDates = require("./components/dates"); +var LocalizedMessages = require("./components/messages"); +var LocalizedNumbers = require("./components/numbers"); + +var App = React.createClass({ + getInitialState: function() { + return { + locale: this.props.locale + }; + }, + changeLocale: function( event ) { + this.setState({ + locale: event.target.value + }); + }, + render: function() { + Globalize.locale(this.state.locale); + return ( +
+

Select a locale:

+ + +

Currency

+ + +

Dates

+ + +

Messages

+ + +

Numbers

+ +
+ ); + } +}); + +module.exports = App; diff --git a/examples/cjs/components/currency.jsx b/examples/cjs/components/currency.jsx new file mode 100644 index 0000000..e6e57b9 --- /dev/null +++ b/examples/cjs/components/currency.jsx @@ -0,0 +1,32 @@ +var React = require("react"); +var FormatCurrency = require("react-globalize").FormatCurrency; + +var LocalizedCurrencies = React.createClass({ + render: function() { + return ( +
+ USD, 150, default - +
+ USD, -150, style: "accounting" - +
+ USD, 150, style: "name" - +
+ USD, 150, style: "code" - +
+ USD, 1.491, round: "ceil" - +
+ EUR, 150, default - +
+ EUR, -150, style: "accounting" - +
+ EUR, 150, style: "name" - +
+ EUR, 150, style: "code" - +
+ EUR, 1.491, round: "ceil" - +
+ ); + } +}); + +module.exports = LocalizedCurrencies; diff --git a/examples/cjs/components/dates.jsx b/examples/cjs/components/dates.jsx new file mode 100644 index 0000000..36111f9 --- /dev/null +++ b/examples/cjs/components/dates.jsx @@ -0,0 +1,22 @@ +var React = require("react"); +var FormatDate = require("react-globalize").FormatDate; + +var LocalizedDates = React.createClass({ + render: function() { + return ( +
+ default - +
+ skeleton: "GyMMMd" - +
+ date: "medium" - +
+ time: "medium" - +
+ datetime: "medium" - +
+ ); + } +}); + +module.exports = LocalizedDates; diff --git a/examples/cjs/components/messages.jsx b/examples/cjs/components/messages.jsx new file mode 100644 index 0000000..99ca734 --- /dev/null +++ b/examples/cjs/components/messages.jsx @@ -0,0 +1,50 @@ +var React = require("react"); +var ReactGlobalize = require("react-globalize"); +var FormatMessage = ReactGlobalize.FormatMessage; +var FormatNumber = ReactGlobalize.FormatNumber; + +var LocalizedMessages = React.createClass({ + render: function() { + return ( +
+

Simple Salutation

+ hi - +
+ bye - +

Variable Replacement

+ ["Wolfgang", "Amadeus", "Mozart"] - +
+ {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - +

Gender Inflection

+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Mendelssohn", hostGender:"female"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"other"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"male"})} - +
+ {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"other"})} - +

Plural Inflection

+ task count 1 - +
+ task count 0 - +
+ task count 1000 formatted - + }} /> +
+ like count 0 with offset:1 - +
+ like count 1 with offset:1 - +
+ like count 2 with offset:1 - +
+ like count 3 with offset:1 - +
+ ); + } +}); + +module.exports = LocalizedMessages; diff --git a/examples/cjs/components/numbers.jsx b/examples/cjs/components/numbers.jsx new file mode 100644 index 0000000..6d254d6 --- /dev/null +++ b/examples/cjs/components/numbers.jsx @@ -0,0 +1,22 @@ +var React = require("react"); +var FormatNumber = require("react-globalize").FormatNumber; + +var LocalizedNumbers = React.createClass({ + render: function() { + return ( +
+ pi, no options - +
+ pi, maximumFractionDigits: 5 - +
+ pi, round: "floor" - +
+ 10000, minimumFractionDigits: 2 - +
+ 0.5, style: "percent" - +
+ ); + } +}); + +module.exports = LocalizedNumbers; diff --git a/examples/cjs/development.html b/examples/cjs/development.html new file mode 100644 index 0000000..b07a24a --- /dev/null +++ b/examples/cjs/development.html @@ -0,0 +1,10 @@ + + + + + Examples + + + + + diff --git a/examples/cjs/development.jsx b/examples/cjs/development.jsx new file mode 100644 index 0000000..8d6f728 --- /dev/null +++ b/examples/cjs/development.jsx @@ -0,0 +1,5 @@ +var React = require("react"); +var App = require("./app"); + +require("./load-globalize-i18n-data.js"); +React.render( , document.body ); diff --git a/examples/cjs/globalize-compiler b/examples/cjs/globalize-compiler new file mode 100755 index 0000000..884175b --- /dev/null +++ b/examples/cjs/globalize-compiler @@ -0,0 +1,15 @@ +#! /usr/bin/env node + +require("node-jsx").install({extension: ".jsx"}); +var React = require("react"); +var ReactGlobalizeCompiler = require("react-globalize/compiler"); + +require("./load-globalize-i18n-data"); +var App = require("./app"); + +console.log( + ReactGlobalizeCompiler( + React.createElement(App,{locale:"en"}), + React.createElement(App,{locale:"pt"}) + ) +); diff --git a/examples/index.js b/examples/cjs/load-globalize-i18n-data.js similarity index 85% rename from examples/index.js rename to examples/cjs/load-globalize-i18n-data.js index 12e1b83..2b128ed 100644 --- a/examples/index.js +++ b/examples/cjs/load-globalize-i18n-data.js @@ -1,9 +1,4 @@ -var React = require('react'); var Globalize = require('globalize'); -var LocalizedCurrencies = require('./modules/currency'); -var LocalizedDates = require('./modules/dates'); -var LocalizedMessages = require('./modules/messages'); -var LocalizedNumbers = require('./modules/numbers'); var messages = { en: { @@ -38,7 +33,7 @@ var messages = { "}" ] }, - "pt-BR": { + pt: { salutations: { hi: "Oi", bye: "Tchau" @@ -100,16 +95,3 @@ Globalize.load( require( 'cldr-data/supplemental/weekData' ) ); Globalize.loadMessages(messages); - -React.render( - , document.getElementById('currency') -); -React.render( - , document.getElementById('dates') -); -React.render( - , document.getElementById('messages') -); -React.render( - , document.getElementById('numbers') -); diff --git a/examples/cjs/package.json b/examples/cjs/package.json new file mode 100644 index 0000000..7ab4f53 --- /dev/null +++ b/examples/cjs/package.json @@ -0,0 +1,23 @@ +{ + "name": "react-globalize-example", + "description": "Examples demonstrating use of the components", + "main": "app.js", + "devDependencies": { + "browserify": "^6.3.3", + "node-jsx": "^0.12.4", + "reactify": "^0.17.1", + "uglify-js": "^2.4.20" + }, + "dependencies": { + "cldr-data": "27.x", + "react": "~0.13.0", + "react-globalize": "rxaviers/react-globalize#addons", + "globalize": "jquery/globalize#fix-398-runtime" + }, + "scripts": { + "clean": "for DIR in tmp dist; do ( test -d $DIR && rm -rf $DIR ) && mkdir $DIR; done", + "build": "npm run-script clean && npm run-script build-development && npm run-script build-production", + "build-development": "browserify --debug --extension=.jsx --transform reactify development.jsx > tmp/development.js", + "build-production": "./globalize-compiler > tmp/globalize-precompiled-formatters.js && browserify --extension=.jsx --transform reactify --exclude globalize production.jsx > dist/production.js && uglifyjs dist/production.js > dist/production.min.js" + } +} diff --git a/examples/cjs/production.html b/examples/cjs/production.html new file mode 100644 index 0000000..b2802ef --- /dev/null +++ b/examples/cjs/production.html @@ -0,0 +1,10 @@ + + + + + Examples + + + + + diff --git a/examples/cjs/production.jsx b/examples/cjs/production.jsx new file mode 100644 index 0000000..93e6e27 --- /dev/null +++ b/examples/cjs/production.jsx @@ -0,0 +1,9 @@ +var React = require("react"); +if ( window ) { + window.Globalize = require("./tmp/globalize-precompiled-formatters"); +} else { + GLOBAL.Globalize = require("./tmp/globalize-precompiled-formatters"); +} +var App = require("./app"); + +React.render( , document.body ); diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index e3b5ff2..0000000 --- a/examples/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Examples - - -

Currency

-
-

Dates

-
-

Messages

-
-

Numbers

-
- - - \ No newline at end of file diff --git a/examples/modules/currency.js b/examples/modules/currency.js deleted file mode 100644 index 4d5012b..0000000 --- a/examples/modules/currency.js +++ /dev/null @@ -1,57 +0,0 @@ -var ReactGlobalize = require('../react-globalize'); -var React = require('react'); - -var FormatCurrency = React.createClass({ - mixins: [ReactGlobalize.formatCurrency], - render: function() { - return ( - {this.state.formattedValue} - ); - } -}); - -module.exports = React.createClass({ - getInitialState: function() { - return { - locale: "en" - }; - }, - handleChange: function( event ) { - this.setState({ - locale: event.target.value - }); - }, - render: function() { - return ( -
-
- Select a locale: - -
-
- USD, 150, locale default - -
- USD, -150, style: "accounting" - -
- USD, 150, style: "name" - -
- USD, 150, style: "code" - -
- USD, 1.491, round: "ceil" - -
- EUR, 150, locale default - -
- EUR, -150, style: "accounting" - -
- EUR, 150, style: "name" - -
- EUR, 150, style: "code" - -
- EUR, 1.491, round: "ceil" - -
- ); - } -}); diff --git a/examples/modules/dates.js b/examples/modules/dates.js deleted file mode 100644 index b00722f..0000000 --- a/examples/modules/dates.js +++ /dev/null @@ -1,45 +0,0 @@ -var ReactGlobalize = require('../react-globalize'); -var React = require('react'); - -var FormatDate = React.createClass({ - mixins: [ReactGlobalize.formatDate], - render: function() { - return ( - {this.state.formattedValue} - ); - } -}); - -module.exports = React.createClass({ - getInitialState: function() { - return { - locale: "en" - }; - }, - handleChange: function( event ) { - this.setState({ - locale: event.target.value - }); - }, - render: function() { - return ( -
-
- Select a locale: - -
-
- "GyMMMd" - -
- date: "medium" - -
- time: "medium" - -
- datetime: "medium" - -
- ); - } -}); diff --git a/examples/modules/messages.js b/examples/modules/messages.js deleted file mode 100644 index fb0908f..0000000 --- a/examples/modules/messages.js +++ /dev/null @@ -1,70 +0,0 @@ -var ReactGlobalize = require('../react-globalize'); -var React = require('react'); -var Globalize = require('globalize'); - -var FormatMessage = React.createClass({ - mixins: [ReactGlobalize.formatMessage], - render: function() { - return ( - {this.state.formattedValue} - ); - } -}); - -module.exports = React.createClass({ - getInitialState: function() { - return { - locale: "en" - }; - }, - handleChange: function( event ) { - this.setState({ - locale: event.target.value - }); - }, - render: function() { - return ( -
-
- Select a locale: - -
-

Simple Salutation

- hi - -
- bye - -

Variable Replacement

- ["Wolfgang", "Amadeus", "Mozart"] - -
- {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - -

Gender Inflection

- {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} - -
- {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Mendelssohn", hostGender:"female"})} - -
- {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"other"})} - -
- {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"male"})} - -
- {JSON.stringify({guest:"Mozart", guestGender:"other", host:"Beethoven", hostGender:"other"})} - -

Plural Inflection

- task count 1 - -
- task count 0 - -
- task count 1000 formatted - -
- like count 0 with offset:1 - -
- like count 1 with offset:1 - -
- like count 2 with offset:1 - -
- like count 3 with offset:1 - -
- ); - } -}); diff --git a/examples/modules/numbers.js b/examples/modules/numbers.js deleted file mode 100644 index 91ede01..0000000 --- a/examples/modules/numbers.js +++ /dev/null @@ -1,47 +0,0 @@ -var ReactGlobalize = require('../react-globalize'); -var React = require('react'); - -var FormatNumber = React.createClass({ - mixins: [ReactGlobalize.formatNumber], - render: function() { - return ( - {this.state.formattedValue} - ); - } -}); - -module.exports = React.createClass({ - getInitialState: function() { - return { - locale: "en" - }; - }, - handleChange: function( event ) { - this.setState({ - locale: event.target.value - }); - }, - render: function() { - return ( -
-
- Select a locale: - -
-
- pi, no options - -
- pi, maximumFractionDigits: 5 - -
- pi, round: 'floor' - -
- 10000, minimumFractionDigits: 2 - -
- 0.5, style: 'percent' - -
- ); - } -}); diff --git a/examples/package.json b/examples/package.json deleted file mode 100644 index 6e263f1..0000000 --- a/examples/package.json +++ /dev/null @@ -1,18 +0,0 @@ - -{ - "name": "react-globalize-example", - "description": "Examples demonstrating use of the components", - "main": "index.js", - "devDependencies": { - "browserify": "^6.3.3", - "reactify": "^0.17.1" - }, - "dependencies": { - "cldr-data": "~26.0.9", - "react": "~0.13.1", - "globalize": "~1.0.0-alpha.18" - }, - "scripts": { - "build": "cp -f ../index.js react-globalize.js && browserify --debug --transform reactify index.js > app.js" - } -} diff --git a/index.js b/index.js index 01bb1f3..23eefdd 100644 --- a/index.js +++ b/index.js @@ -1,34 +1,81 @@ -var Globalize = require("globalize"); -var mixins = {}; +(function(root, factory) { + + // UMD returnExports + if (typeof define === "function" && define.amd) { + // AMD + define([ + "globalize", + "react", + "globalize/currency", + "globalize/date", + "globalize/message", + "globalize/number", + "globalize/plural", + "globalize/relative-time" + ], factory ); + } else if ( typeof exports === "object" ) { + // Node, CommonJS + module.exports = factory(require("globalize"), require("react")); + } else { + // Global + root.ReactGlobalize = factory(root.Global, root.React); + } +}(this, function(Globalize, React) { + +var ReactGlobalize = {}; + +function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} + +function isPlainObject(value) { + return value && typeof value === "object" && + !(value.constructor && + !value.constructor.prototype.hasOwnProperty("isPrototypeOf")) && + !React.isValidElement(value); +} + +function supportReactElements(value) { + if (isPlainObject(value)) { + return Object.keys(value).reduce(function(sum, i) { + sum[i] = supportReactElements(value[i]); + return sum; + }, {}); + } else if (React.isValidElement(value)) { + value = new ReactGlobalize[value.type.displayName](value._store.props).render()._store.props.children; + } + return value; +} Object.getOwnPropertyNames(Globalize).forEach(function(fn) { if (fn.indexOf("format") === 0) { + var Fn = capitalizeFirstLetter(fn); var fnString = Globalize[fn].toString(); var argString = fnString.substr(fnString.indexOf("(")+1, fnString.indexOf(")")-(fnString.indexOf("(")+1)).trim(); var argArray = argString.split(", "); - (function(currentFn, currentArgs) { - var formatter = function(nextProps) { + ReactGlobalize[Fn] = React.createClass({ + displayName: Fn, + render: function() { + var formatted; + var componentProps = this.props; var instance = Globalize; - var componentProps = nextProps || this.props; - var propArgs = currentArgs.map(function(element) { - return componentProps[element.replace(/(\s\/\*|\*\/)/,"").trim()]; - }); + var propArgs = argArray.map(function(element) { + return componentProps[element.replace(/(\s\/\*|\*\/)/,"").trim()]; + }).map(supportReactElements); if (componentProps["locale"]) { instance = Globalize(componentProps["locale"]); } - this.setState({ - formattedValue: instance[currentFn].apply(instance, propArgs) - }); - }; - - mixins[currentFn] = { - componentWillMount: formatter, - componentWillReceiveProps: formatter - }; - })(fn, argArray); + + formatted = instance[fn].apply(instance, propArgs); + + return React.DOM.span(null, formatted); + } + }); } }); -module.exports = mixins; +return ReactGlobalize; + +}));