feat($interpolate): MessageFormat extensions #11152

chirayuk · 2015-02-23T20:13:19Z

Extend interpolation with MessageFormat like syntax.

Ref: https://docs.google.com/a/google.com/document/d/1pbtW2yvtmFBikfRrJd8VAsabiFkKezmYZ_PbgdjQOVU/edit

Example:

{{recipients.length, plural, offset:1
    =0 {You gave no gifts}
    =1 { {{ recipients[0].gender, select,
              male {You gave him a gift.}
              female {You gave her a gift.}
              other {You gave them a gift.}
          }}
       }
    one { {{ recipients[0].gender, select,
              male {You gave him and one other person a gift.}
              female {You gave her and one other person a gift.}
              other {You gave them and one other person a gift.}
          }}
       }
    other {You gave {{recipients[0].gender}} and # other people gifts. }
}}

This is a SEPARATE module so you MUST include
angular-messageformat.min.js. In addition, your application module
should depend on the "ngMessageFormat".
(e.g. angular.module('myApp', ['ngMessageFormat']);)

$interpolate automatically gets the new behavior.

Quick note on syntax differences from MessageFormat:

MessageFormat directives are always inside {{ }} instead of
single { }. This ensures a consistent interpolation syntax (else you
could interpolate in more than one way and have to pick one based on
feature availability for that syntax.)
The first word inside such syntax can be an arbitrary Angular
expression instead of a single identifier.
You can nest them as deep as you want. As mentioned earlier, you
would use {{ }} to start the nested interpolation that may optionally
include select/plural extensions.
Only "select" and "plural" keywords are currently recognized.
Quoting support is coming in a future commit.
Positional arguments/placeholders are not supported. They don't make
sense in Angular templates anyway (they are only helpful when using
API calls from a programming language.)
Redefining of the startSymbol and endSymbol used for interpolation is
not currently supported yet.

0x-r4bbit · 2015-02-23T21:45:10Z

@chirayuk thank you for implementing this! Where can I start helping out for the docs?

chirayuk · 2015-03-05T00:51:22Z

Changes since the last time:

Separate self contained module. Use angular-messageformat.js and depend on ngMessageFormat.
NO changes to existing $interpolate or $parse. I did a major refactor and the core no longer knows or cares about this. However, this is a private service and relies on core implementation.
Full $interpolate replacement
Supports mustHaveExpression, trustedContext and allOrNothing.
Escaping compatible with $interpolate.
Includes the entire contents of interpolateSpec.js to test the replacement behavior. See https://github.com/angular/angular.js/pull/11152/files#diff-3746da2fc13376182459459ead442464R229
Support for # symbol to mean (number-offset) inside plural messages. (For compatibility with messageformat.)
Escaping support inside MessageFormat expressions.
Accurate recognition of angular expressions—understands subexpressions, strings/string escapes, etc.
Compilation with Closure's ADVANCED_OPTIMIZATIONS mode.
And other stuff I can't remember. :)

petebacondarwin · 2015-03-05T09:47:17Z

src/ngMessageFormat/messageformat.js

+
+var noop = angular['noop'],
+    isFunction = angular['isFunction'],
+    toJson = angular['toJson'];


Why use lookup (angular['noop']) rather than property (angular.noop) syntax here. Is it because of the Google Closure compilation optimizations?

Yes. I'm using the ADVANCED_OPTIMIZATIONS mode of the Closure compiler which will rewrite angular.noop into something like angular.x. This module has limited interaction with outside code (and injection has existing array syntax to guard against minification) so there aren't too many places that do this kind of explicit lookup.

petebacondarwin · 2015-03-05T09:59:52Z

There are a bunch of jshint and jscs errors. Can you ensure that grunt ci-checks passes?

petebacondarwin · 2015-03-05T10:00:21Z

I think that the filenames should be messageFormat.js and messageFormatSpec.js for consistency with other angular files.

petebacondarwin · 2015-03-05T10:06:49Z

src/ngMessageFormat/messageformat.js

+    return cachedFn;
+  }
+  function parsedFn(context) { return text; };
+  var unwatch;


Why is this unwatch variable declared outside the watchDelegate function?

Removed. It was cruft from a refactor.

petebacondarwin · 2015-03-05T11:51:14Z

I think it would make it easier to grok this module if it was broken up into a few smaller src files. For instance you have message selector stuff, parsing rules, decorating $interpolate.

I can see that the code is generally structured as classes. In the theme of writing stuff that will run the same code base in V2 as V1, perhaps this code could be written as ES6 classes and then transpiled down for this V1 ngMessageFormat module?

petebacondarwin · 2015-03-05T11:54:32Z

src/ngMessageFormat/messageformat.js

+    case "(": return ")";
+    default: return null;
+  }
+}


Would this (and getBeginOperator) benefit from being written as:

var END_OPERATORS { '{': '}', '[': ']', '(': ')' }; function getEndOperator(opBegin) { return END_OPERATORS[opBegin]; }

A jsperf I wrote a little while back strongly favors the switch statement. (https://jsperf.com/map-vs-switch-vs-if) I don't particularly think one reads any clearer than the other so I went with the switch statement.

petebacondarwin · 2015-03-05T12:57:55Z

A few nitpicks and questions but generally looking good. It would be nice to see a state diagram of the parser somewhere for good measure.

chirayuk · 2015-03-12T04:15:57Z

ensure that grunt ci-checks passes
filenames should be messageFormat.js and messageFormatSpec.js
split into multiple files
add error docs
expand guide/i18n documentation
show state diagram
This is a good idea. I will do this in a follow up commit.
Use ES6 classes and transpile
This is out of scope for this commit. I intend to do so in a future commit via some mechanical refactoring changes.

chirayuk · 2015-03-12T04:16:24Z

@petebacondarwin @IgorMinar ready for another review.

petebacondarwin · 2015-03-12T10:20:24Z

docs/content/error/$interpolate/dupvalue.ngdoc

+@description
+
+You have repeated a match selection for your plural or select MessageFormat
+extension in your interpolation interpolation expression.  The different


interpolation interpolation?

Fixed. Thanks!

petebacondarwin · 2015-03-12T11:03:43Z

Nice one @chirayuk - this looks even better!

The only serious concern I have is with the bindingInfo bits.

Other than that it looks good to merge, once the few docs fixes are in place.

chirayuk · 2015-03-16T17:55:08Z

Other than the bindingInfo bits—that are easy to fix—the other comments have been addressed. I'll address the bindingInfo bit this after after I get back from the Japanese Consulate. Thanks for all the comments!

Extend interpolation with MessageFormat like syntax. Ref: <https://docs.google.com/a/google.com/document/d/1pbtW2yvtmFBikfRrJd8VAsabiFkKezmYZ_PbgdjQOVU/edit> Example: ```html {{recipients.length, plural, offset:1 =0 {You gave no gifts} =1 { {{ recipients[0].gender, select, male {You gave him a gift.} female {You gave her a gift.} other {You gave them a gift.} }} } one { {{ recipients[0].gender, select, male {You gave him and one other person a gift.} female {You gave her and one other person a gift.} other {You gave them and one other person a gift.} }} } other {You gave {{recipients[0].gender}} and # other people gifts. } }} ``` This is a SEPARATE module so you MUST include angular-messageformat.min.js. In addition, your application module should depend on the "ngMessageFormat". (e.g. angular.module('myApp', ['ngMessageFormat']);) $interpolate automatically gets the new behavior. Quick note on syntax differences from MessageFormat: - MessageFormat directives are always inside {{ }} instead of single { }. This ensures a consistent interpolation syntax (else you could interpolate in more than one way and have to pick one based on feature availability for that syntax.) - The first word inside such syntax can be an arbitrary Angular expression instead of a single identifier. - You can nest them as deep as you want. As mentioned earlier, you would use {{ }} to start the nested interpolation that may optionally include select/plural extensions. - Only "select" and "plural" keywords are currently recognized. - Quoting support is coming in a future commit. - Positional arguments/placeholders are not supported. They don't make sense in Angular templates anyway (they are only helpful when using API calls from a programming language.) - Redefining of the startSymbol and endSymbol used for interpolation is not currently supported yet.

For more detailed information refer to this document: https://docs.google.com/a/google.com/document/d/1pbtW2yvtmFBikfRrJd8VAsabiFkKezmYZ_PbgdjQOVU/edit **Example:** ```html {{recipients.length, plural, offset:1 =0 {You gave no gifts} =1 { {{ recipients[0].gender, select, male {You gave him a gift.} female {You gave her a gift.} other {You gave them a gift.} }} } one { {{ recipients[0].gender, select, male {You gave him and one other person a gift.} female {You gave her and one other person a gift.} other {You gave them and one other person a gift.} }} } other {You gave {{recipients[0].gender}} and # other people gifts. } }} ``` This is a SEPARATE module so you MUST include `angular-messageformat.js` or `angular-messageformat.min.js`. In addition, your application module should depend on the "ngMessageFormat" (e.g. angular.module('myApp', ['ngMessageFormat']);) When you use the `ngMessageFormat`, the $interpolate gets overridden with a new service that adds the new MessageFormat behavior. **Syntax differences from MessageFormat:** - MessageFormat directives are always inside `{{ }}` instead of single `{ }`. This ensures a consistent interpolation syntax (else you could interpolate in more than one way and have to pick one based on the features availability for that syntax.) - The first part of such a syntax can be an arbitrary Angular expression instead of a single identifier. - You can nest them as deep as you want. As mentioned earlier, you would use `{{ }}` to start the nested interpolation that may optionally include select/plural extensions. - Only `select` and `plural` keywords are currently recognized. - Quoting support is coming in a future commit. - Positional arguments/placeholders are not supported. They don't make sense in Angular templates anyway (they are only helpful when using API calls from a programming language.) - Redefining of the startSymbol (`{{`) and endSymbol (`}}`) used for interpolation is not yet supported. Closes angular#11152

googlebot added the cla: yes label Feb 23, 2015

chirayuk force-pushed the msgFmtService branch from d9c80a2 to 453486b Compare February 23, 2015 21:42

chirayuk force-pushed the msgFmtService branch 2 times, most recently from 250781a to d91e802 Compare March 5, 2015 00:40

petebacondarwin reviewed Mar 5, 2015
View reviewed changes

petebacondarwin added this to the 1.4.0-beta.6 / 1.3.15 milestone Mar 11, 2015

chirayuk force-pushed the msgFmtService branch 5 times, most recently from 62c0849 to 2aaaaa6 Compare March 12, 2015 02:48

chirayuk force-pushed the msgFmtService branch from 84322be to ffda4f6 Compare March 12, 2015 04:14

chirayuk force-pushed the msgFmtService branch 2 times, most recently from 9c2d3b3 to 3507e6f Compare March 12, 2015 06:37

petebacondarwin reviewed Mar 12, 2015
View reviewed changes

chirayuk force-pushed the msgFmtService branch from 3507e6f to 0c4be63 Compare March 16, 2015 17:34

chirayuk force-pushed the msgFmtService branch from 0c4be63 to c37f18d Compare March 16, 2015 20:29

chirayuk force-pushed the msgFmtService branch from c37f18d to cbfd8f6 Compare March 16, 2015 20:30

brycecr mentioned this pull request Mar 17, 2015

Status of declarative plurals in 1.4 beta? #11338

Closed

petebacondarwin modified the milestones: 1.4.0-beta.6 / 1.3.15, 1.4.0-beta.7 / 1.3.16 Mar 17, 2015

chirayuk closed this in 1e58488 Mar 17, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat($interpolate): MessageFormat extensions #11152

feat($interpolate): MessageFormat extensions #11152

chirayuk commented Feb 23, 2015

0x-r4bbit commented Feb 23, 2015

chirayuk commented Mar 5, 2015

petebacondarwin Mar 5, 2015

chirayuk Mar 11, 2015

petebacondarwin commented Mar 5, 2015

petebacondarwin commented Mar 5, 2015

petebacondarwin Mar 5, 2015

chirayuk Mar 11, 2015

petebacondarwin commented Mar 5, 2015

petebacondarwin Mar 5, 2015

chirayuk Mar 11, 2015

petebacondarwin commented Mar 5, 2015

chirayuk commented Mar 12, 2015

chirayuk commented Mar 12, 2015

petebacondarwin Mar 12, 2015

chirayuk Mar 16, 2015

petebacondarwin commented Mar 12, 2015

chirayuk commented Mar 16, 2015

feat($interpolate): MessageFormat extensions #11152

feat($interpolate): MessageFormat extensions #11152

Conversation

chirayuk commented Feb 23, 2015

0x-r4bbit commented Feb 23, 2015

chirayuk commented Mar 5, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin commented Mar 5, 2015

petebacondarwin commented Mar 5, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin commented Mar 5, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin commented Mar 5, 2015

chirayuk commented Mar 12, 2015

chirayuk commented Mar 12, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin commented Mar 12, 2015

chirayuk commented Mar 16, 2015