1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 | 2x 9x 2x 41x 41x 41x 41x 41x 12x 2x 2x 1x 1x 10x 10x 30x 19x 19x 19x 19x 1x 19x 30x 30x 30x 2x 2x 9x 9x 7x 7x 7x 2x 2x 2x 2x 2x 2x 35x 35x 35x 35x 35x 35x 1x 1x 3x 3x 2x 2x 4x 4x 2x 2x 1x 1x 43x 28x 15x 18x 15x 2x | import IntlPolyfill from "intl"; import React from "react"; import IntlMessageFormat from "intl-messageformat"; import escapeHtml from "escape-html"; import cookie from "cookie"; import queryParser from "querystring"; import invariant from "invariant"; import "console-polyfill"; import * as constants from "./constants"; import merge from "lodash.merge"; String.prototype.defaultMessage = String.prototype.d = function (msg) { return this || msg || ""; }; class ReactIntlUniversal { constructor() { this.options = { currentLocale: null, // Current locale such as 'en-US' urlLocaleKey: null, // URL's query Key to determine locale. Example: if URL=http://localhost?lang=en-US, then set it 'lang' cookieLocaleKey: null, // Cookie's Key to determine locale. Example: if cookie=lang:en-US, then set it 'lang' locales: {}, // app locale data like {"en-US":{"key1":"value1"},"zh-CN":{"key1":"值1"}} warningHandler: console.warn.bind(console), // ability to accumulate missing messages using third party services like Sentry escapeHtml: true, // disable escape html in variable mode // commonLocaleDataUrls: COMMON_LOCALE_DATA_URLS, fallbackLocale: null, // Locale to use if a key is not found in the current locale }; } /** * Get the formatted message by key * @param {string} key The string representing key in locale data file * @param {Object} variables Variables in message * @returns {string} message */ get(key, variables) { invariant(key, "key is required"); const { locales, currentLocale, formats } = this.options; Iif (!locales || !locales[currentLocale]) { this.options.warningHandler( `react-intl-universal locales data "${currentLocale}" not exists.` ); return ""; } let msg = this.getDescendantProp(locales[currentLocale], key); if (msg == null) { if (this.options.fallbackLocale) { msg = this.getDescendantProp(locales[this.options.fallbackLocale], key); if (msg == null) { this.options.warningHandler( `react-intl-universal key "${key}" not defined in ${currentLocale} or the fallback locale, ${this.options.fallbackLocale}` ); return ""; } } else { this.options.warningHandler( `react-intl-universal key "${key}" not defined in ${currentLocale}` ); return ""; } } if (variables) { variables = Object.assign({}, variables); // HTML message with variables. Escape it to avoid XSS attack. for (let i in variables) { let value = variables[i]; if ( this.options.escapeHtml === true && (typeof value === "string" || value instanceof String) && value.indexOf("<") >= 0 && value.indexOf(">") >= 0 ) { value = escapeHtml(value); } variables[i] = value; } } try { const msgFormatter = new IntlMessageFormat(msg, currentLocale, formats); return msgFormatter.format(variables); } catch (err) { this.options.warningHandler( `react-intl-universal format message failed for key='${key}'.`, err.message ); return msg; } } /** * Get the formatted html message by key. * @param {string} key The string representing key in locale data file * @param {Object} variables Variables in message * @returns {React.Element} message */ getHTML(key, variables) { let msg = this.get(key, variables); if (msg) { const el = React.createElement("span", { dangerouslySetInnerHTML: { __html: msg } }); // when key exists, it should still return element if there's defaultMessage() after getHTML() const defaultMessage = () => el; return Object.assign( { defaultMessage: defaultMessage, d: defaultMessage }, el ); } return ""; } /** * As same as get(...) API * @param {Object} options * @param {string} options.id * @param {string} options.defaultMessage * @param {Object} variables Variables in message * @returns {string} message */ formatMessage(messageDescriptor, variables) { const { id, defaultMessage } = messageDescriptor; return this.get(id, variables).defaultMessage(defaultMessage); } /** * As same as getHTML(...) API * @param {Object} options * @param {string} options.id * @param {React.Element} options.defaultMessage * @param {Object} variables Variables in message * @returns {React.Element} message */ formatHTMLMessage(messageDescriptor, variables) { const { id, defaultMessage } = messageDescriptor; return this.getHTML(id, variables).defaultMessage(defaultMessage); } /** * Helper: determine user's locale via URL, cookie, and browser's language. * You may not this API, if you have other rules to determine user's locale. * @param {string} options.urlLocaleKey URL's query Key to determine locale. Example: if URL=http://localhost?lang=en-US, then set it 'lang' * @param {string} options.cookieLocaleKey Cookie's Key to determine locale. Example: if cookie=lang:en-US, then set it 'lang' * @returns {string} determined locale such as 'en-US' */ determineLocale(options = {}) { return ( this.getLocaleFromURL(options) || this.getLocaleFromCookie(options) || this.getLocaleFromBrowser() ); } /** * Initialize properties and load CLDR locale data according to currentLocale * @param {Object} options * @param {string} options.currentLocale Current locale such as 'en-US' * @param {string} options.locales App locale data like {"en-US":{"key1":"value1"},"zh-CN":{"key1":"值1"}} * @returns {Promise} */ init(options = {}) { invariant(options.currentLocale, "options.currentLocale is required"); invariant(options.locales, "options.locales is required"); Object.assign(this.options, options); this.options.formats = Object.assign( {}, this.options.formats, constants.defaultFormats ); return new Promise((resolve, reject) => { // init() will not load external common locale data anymore. // But, it still return a Promise for abckward compatibility. resolve(); }); } /** * Get the inital options */ getInitOptions() { return this.options; } /** * Load more locales after init */ load(locales) { merge(this.options.locales, locales); } getLocaleFromCookie(options) { const { cookieLocaleKey } = options; if (cookieLocaleKey) { let params = cookie.parse(document.cookie); return params && params[cookieLocaleKey]; } } getLocaleFromURL(options) { const { urlLocaleKey } = options; if (urlLocaleKey) { let query = location.search.split("?"); if (query.length >= 2) { let params = queryParser.parse(query[1]); return params && params[urlLocaleKey]; } } } getDescendantProp(locale, key) { if (locale[key]) { return locale[key]; } const msg = key.split(".").reduce(function (a, b) { return (a != undefined) ? a[b] : a; }, locale); return msg; } getLocaleFromBrowser() { return navigator.language || navigator.userLanguage; } } export default ReactIntlUniversal; |