msgfmt:react@2.0.0-meteor12 for the laggers :) #212

gadicc · gadicc · commit dd0d30f2b3d5 · 2016-03-14T21:51:17.000+02:00
diff --git a/README.md b/README.md
@@ -19,7 +19,9 @@ the stable release; consider backing up your database before upgrading):
 meteor add msgfmt:core@2.0.0-preview.19         # 2016-03-09
 meteor add msgfmt:extract@2.0.0-preview.13      # 2016-03-09
 meteor add msgfmt:ui@2.0.0-preview.9            # 2016-01-27
-meteor add msgfmt:react                         # 2016-03-14 (v2.0.0)
+
+meteor add msgfmt:react                         # 2016-03-14 (v2.0.0) - Meteor 1.3+
+meteor add msgfmt:react@2.0.0-meteor12          # 2016-03-14 (v2.0.0) - Meteor 1.2
 ```
 
 If you don't want the UI translator on production (i.e. no crowd translation),
diff --git a/meteor12-react-test/.meteor/.finished-upgraders b/meteor12-react-test/.meteor/.finished-upgraders
@@ -0,0 +1,12 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
diff --git a/meteor12-react-test/.meteor/.gitignore b/meteor12-react-test/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/meteor12-react-test/.meteor/.id b/meteor12-react-test/.meteor/.id
@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+3knrvvkivic714o3fuf
diff --git a/meteor12-react-test/.meteor/packages b/meteor12-react-test/.meteor/packages
@@ -0,0 +1,24 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base             # Packages every Meteor app needs to have
+mobile-experience       # Packages for a great mobile UX
+mongo                   # The database Meteor supports right now
+blaze-html-templates    # Compile .html files into Meteor Blaze views
+session                 # Client-side reactive dictionary for your app
+jquery                  # Helpful client-side library
+tracker                 # Meteor's client-side reactive programming library
+
+standard-minifiers      # JS/CSS minifiers run for production mode
+es5-shim                # ECMAScript 5 compatibility for older browsers.
+ecmascript              # Enable ECMAScript2015+ syntax in app code
+
+#autopublish             # Publish all data to the clients (for prototyping)
+#insecure                # Allow all DB writes from clients (for prototyping)
+
+react
+msgfmt:core
+msgfmt:react
diff --git a/meteor12-react-test/.meteor/platforms b/meteor12-react-test/.meteor/platforms
@@ -0,0 +1,2 @@
+server
+browser
diff --git a/meteor12-react-test/.meteor/release b/meteor12-react-test/.meteor/release
@@ -0,0 +1 @@
+METEOR@1.2.1
diff --git a/meteor12-react-test/.meteor/versions b/meteor12-react-test/.meteor/versions
@@ -0,0 +1,80 @@
+amplify@1.0.0
+autoupdate@1.2.4
+babel-compiler@5.8.24_1
+babel-runtime@0.1.4
+base64@1.0.4
+binary-heap@1.0.4
+blaze@2.1.3
+blaze-html-templates@1.0.1
+blaze-tools@1.0.4
+boilerplate-generator@1.0.4
+caching-compiler@1.0.0
+caching-html-compiler@1.0.2
+callback-hook@1.0.4
+check@1.1.0
+coffeescript@1.0.11
+cosmos:browserify@0.9.4
+ddp@1.2.2
+ddp-client@1.2.1
+ddp-common@1.2.2
+ddp-server@1.2.2
+deps@1.0.9
+diff-sequence@1.0.1
+djedi:sanitize-html@1.11.2
+djedi:sanitize-html-client@1.11.2
+ecmascript@0.1.6
+ecmascript-runtime@0.2.6
+ejson@1.0.7
+es5-shim@4.1.14
+fastclick@1.0.7
+geojson-utils@1.0.4
+hot-code-push@1.0.0
+html-tools@1.0.5
+htmljs@1.0.5
+http@1.1.1
+id-map@1.0.4
+jag:pince@0.0.6
+jquery@1.11.4
+jsx@0.2.3
+launch-screen@1.0.4
+livedata@1.0.15
+logging@1.0.8
+meteor@1.1.10
+meteor-base@1.0.1
+meteorhacks:inject-initial@1.0.3
+minifiers@1.1.7
+minimongo@1.0.10
+mobile-experience@1.0.1
+mobile-status-bar@1.0.6
+mongo@1.1.3
+mongo-id@1.0.1
+msgfmt:core@2.0.0-preview.19
+msgfmt:react@2.0.0-meteor12
+npm-mongo@1.4.39_1
+observe-sequence@1.0.7
+ordered-dict@1.0.4
+promise@0.5.1
+raix:eventemitter@0.1.3
+random@1.0.5
+react@0.14.3
+react-meteor-data@0.2.4
+react-runtime@0.14.4
+react-runtime-dev@0.14.4
+react-runtime-prod@0.14.4
+reactive-dict@1.1.3
+reactive-var@1.0.6
+reload@1.1.4
+retry@1.0.4
+routepolicy@1.0.6
+session@1.1.1
+spacebars@1.0.7
+spacebars-compiler@1.0.7
+standard-minifiers@1.0.2
+templating@1.1.5
+templating-tools@1.0.0
+tracker@1.0.9
+ui@1.0.8
+underscore@1.0.4
+url@1.0.5
+webapp@1.2.3
+webapp-hashing@1.0.5
diff --git a/meteor12-react-test/meteor12-test.css b/meteor12-react-test/meteor12-test.css
@@ -0,0 +1 @@
+/* CSS declarations go here */
diff --git a/meteor12-react-test/meteor12-test.html b/meteor12-react-test/meteor12-test.html
@@ -0,0 +1,7 @@
+<head>
+  <title>meteor12-test</title>
+</head>
+
+<body>
+  <div id="render-target"></div>
+</body>
diff --git a/meteor12-react-test/meteor12-test.jsx b/meteor12-react-test/meteor12-test.jsx
@@ -0,0 +1,20 @@
+if (Meteor.isClient) {
+  // This code is executed on the client only
+ 
+  Meteor.startup(function () {
+    // Use Meteor.startup to render the component after the page is ready
+    ReactDOM.render(<App />, document.getElementById("render-target"));
+  });
+}
+
+App = React.createClass({
+  render() {
+    return (
+      <MF KEY="count" COUNT={1}>{`
+        {COUNT, number} {COUNT, plural, one { widget } other { widgets }}
+      `}</MF>
+    );
+  }
+});
+
+msgfmt.init('en');
diff --git a/meteor12-react-test/packages/msgfmt:core b/meteor12-react-test/packages/msgfmt:core
@@ -0,0 +1 @@
+../../msgfmt:core
diff --git a/meteor12-react-test/packages/msgfmt:react12 b/meteor12-react-test/packages/msgfmt:react12
@@ -0,0 +1 @@
+../../msgfmt:react12
diff --git a/msgfmt:react12/.versions b/msgfmt:react12/.versions
@@ -0,0 +1,66 @@
+amplify@1.0.0
+babel-compiler@5.8.24_1
+babel-runtime@0.1.4
+base64@1.0.4
+binary-heap@1.0.4
+blaze@2.1.3
+blaze-tools@1.0.4
+boilerplate-generator@1.0.4
+caching-compiler@1.0.0
+caching-html-compiler@1.0.2
+callback-hook@1.0.4
+check@1.1.0
+coffeescript@1.0.11
+cosmos:browserify@0.9.4
+ddp@1.2.2
+ddp-client@1.2.1
+ddp-common@1.2.2
+ddp-server@1.2.2
+deps@1.0.9
+diff-sequence@1.0.1
+ecmascript@0.1.6
+ecmascript-runtime@0.2.6
+ejson@1.0.7
+geojson-utils@1.0.4
+html-tools@1.0.5
+htmljs@1.0.5
+id-map@1.0.4
+jag:pince@0.0.6
+jquery@1.11.4
+jsx@0.2.3
+local-test:msgfmt:react@2.0.0-meteor12
+logging@1.0.8
+meteor@1.1.10
+meteorhacks:inject-initial@1.0.3
+minifiers@1.1.7
+minimongo@1.0.10
+mongo@1.1.3
+mongo-id@1.0.1
+msgfmt:core@2.0.0-preview.19
+msgfmt:react@2.0.0-meteor12
+npm-mongo@1.4.39_1
+observe-sequence@1.0.7
+ordered-dict@1.0.4
+promise@0.5.1
+raix:eventemitter@0.1.3
+random@1.0.5
+react@0.14.3
+react-meteor-data@0.2.4
+react-runtime@0.14.3
+react-runtime-dev@0.14.3
+react-runtime-prod@0.14.3
+reactive-dict@1.1.3
+reactive-var@1.0.6
+retry@1.0.4
+routepolicy@1.0.6
+session@1.1.1
+spacebars@1.0.7
+spacebars-compiler@1.0.7
+templating@1.1.5
+templating-tools@1.0.0
+tinytest@1.0.6
+tracker@1.0.9
+ui@1.0.8
+underscore@1.0.4
+webapp@1.2.3
+webapp-hashing@1.0.5
diff --git a/msgfmt:react12/CHANGELOG.md b/msgfmt:react12/CHANGELOG.md
@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## vNEXT
+
+## v2.0.0 (2016-03-14)
+
+* Initial release.
diff --git a/msgfmt:react12/README.md b/msgfmt:react12/README.md
@@ -0,0 +1,53 @@
+# MF react component
+
+Usage:
+
+```html
+<!-- Locale is reactively watched via msgfmt.locale() -->
+<MF KEY="keyName">My text...</MF>
+
+<!-- But you can supply your own when required -->
+<MF LOCALE={locale} KEY="keyName">
+
+<!-- Use backticks to escape braces -->
+<MF KEY="likeCount" COUNT={count}>{`
+  {COUNT, number}
+`}</MF>
+
+<!-- Use _HTML={true} to allow (auto sanitized) HTML -->
+<MF KEY="hello" NAME={name} _HTML={true}>{`
+  Hi, <b>{NAME}</b>.
+`}</MF>
+
+```
+
+Features:
+
+* If `LOCALE` is not specified, we reactively use msgfmt.locale().
+* In the future, these tags will serve as the basis for inline translation.
+* Supports _HTML={true} to allow HTML in the translation, using
+  `msgfmt.sanitizeHTML()` - see msgfmt docs for custom tags / sanitizers.
+
+Notes:
+
+* If the text contains braces (for messageformat), you'll need to escape
+using backticks (`` ` ``).
+
+## Alternative (without this package)
+
+Before this package, the common pattern was to simply use the JS function:
+
+```jsx
+render() {
+  return ( <div>{mf('mkKey' 'myText')}</div> )
+}
+```
+
+That works fine, of course, with the caveat that you need to re-render
+your entire tree on locale change (most commonly by putting a LOCALE
+prop on your root component).
+
+This package will track the locale for you, rerender only what's
+necessary on locale change, allow for inline translation in the future,
+and generally provides a clearer structure (especially in React dev
+tools) for what's going on in your app.
diff --git a/msgfmt:react12/package.js b/msgfmt:react12/package.js
@@ -0,0 +1,23 @@
+Package.describe({
+  name: 'msgfmt:react',
+  version: '2.0.0-meteor12',
+  summary: 'An MF react component for use with msgfmt',
+  git: 'https://github.com/gadicc/meteor-messageformat',
+  documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom('1.2.1');
+  api.use('ecmascript');
+  api.use('msgfmt:core@2.0.0-preview.18');
+  api.use('react@0.14.3');
+  api.addFiles('react.jsx', 'client');
+  api.export('MF');
+});
+
+Package.onTest(function(api) {
+  api.use('ecmascript');
+  api.use('tinytest');
+  api.use('msgfmt:react');
+  api.addFiles('react-tests.js');
+});
diff --git a/msgfmt:react12/react-tests.js b/msgfmt:react12/react-tests.js
@@ -0,0 +1,5 @@
+// Write your tests here!
+// Here is an example.
+Tinytest.add('example', function (test) {
+  test.equal(true, true);
+});
diff --git a/msgfmt:react12/react.jsx b/msgfmt:react12/react.jsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +<head>
 +  <title>meteor12-test</title>
 +</head>
++
 +<body>
 +  <div id="render-target"></div>
 +</body>