Named Args and Named Blocks Syntax

lib/pegjs/html/boolean-attr.pegjs

@@ -1,4 +1,4 @@
-@import "../key.pegjs" as key
+@import "../non-glimmer-key.pegjs" as key
 
 start = booleanAttribute
 

lib/pegjs/html/tag-string.pegjs

@@ -4,4 +4,4 @@ start = tagString
 
 tagString
   = c:$tagChar+
-tagChar = [_a-zA-Z0-9-] / nonSeparatorColon
+tagChar = [_a-zA-Z0-9-] / nonSeparatorColon / '@'

lib/pegjs/key.pegjs

@@ -3,4 +3,4 @@
 start = key
 
 key "Key"
-  = $((nmchar / ':' / '.')*)
+  = $((nmchar / ':' / '.' / '@')*)

lib/pegjs/mustache/attr-statement.pegjs

@@ -36,6 +36,7 @@ closeBracket = DEDENT? _ ']'
   - key/value pair
   - subexpression
   - a mustache value (i.e. positional params)
+  - positional params
 */
 mustacheAttr = mustacheKeyValue / subexpression / mustacheAttrValue
 

lib/pegjs/mustache/name-character.pegjs

@@ -1,7 +1,7 @@
 start = newMustacheNameChar
 
 // a character that can be in a mustache name
-newMustacheNameChar = [-_/A-Za-z0-9] / arrayIndex / '.'
+newMustacheNameChar = [-_/A-Za-z0-9] / arrayIndex / '.' / '@'
 
 // Ember requires that array indexes have a . before them
 arrayIndex = '.[' newMustacheNameChar* ']'

lib/pegjs/non-glimmer-key.pegjs

@@ -0,0 +1,6 @@
+@import "./nmchar.pegjs" as nmchar
+
+start = key
+
+key "Key"
+  = $((nmchar / ':' / '.')*)

tests/integration/glimmer-component-test.js

@@ -7,10 +7,10 @@ QUnit.module("glimmer-components");
 
 test("basic syntax", function(){
   var emblem = w(
-    "% my-component value=foo data-hint='not-my-component%%::'"
+    "% my-component @value=foo data-hint='not-my-component%%::'"
   );
   compilesTo(emblem,
-    '<my-component value={{foo}} data-hint=\"not-my-component%%::\"></my-component>');
+    '<my-component @value={{foo}} data-hint=\"not-my-component%%::\"></my-component>');
 });
 
 test("basic syntax with legacy quoting", function(){
@@ -23,33 +23,41 @@ test("basic syntax with legacy quoting", function(){
     });
 });
 
+test("boolean attribute passed in as component input", function() {
+  var emblem = w(
+    "% my-component @multiselect=false"
+  );
+  compilesTo(emblem,
+    '<my-component @multiselect={{false}}></my-component>');
+});
+
 test("names with :", function(){
   var emblem = w(
-    "% inputs:my-component value=foo"
+    "% inputs:my-component @value=foo"
   );
   compilesTo(emblem,
-    '<inputs:my-component value={{foo}}></inputs:my-component>');
+    '<inputs:my-component @value={{foo}}></inputs:my-component>');
 });
 
 // @TODO
 // test("names with / turn into :")
 
 test("Blocks", function() {
   var emblem = w(
-    "% my-component value=foo",
+    "% my-component @value=foo",
     "  |Hi!"
   );
   compilesTo(emblem,
-    '<my-component value={{foo}}>Hi!</my-component>');
+    '<my-component @value={{foo}}>Hi!</my-component>');
 });
 
 test("Block params", function() {
   var emblem = w(
-    "% my-component value=foo as |comp1 comp2|",
+    "% my-component @value=foo as |comp1 comp2|",
     "  = comp.name"
   );
   compilesTo(emblem,
-    '<my-component value={{foo}} as |comp1 comp2|>{{comp.name}}</my-component>');
+    '<my-component @value={{foo}} as |comp1 comp2|>{{comp.name}}</my-component>');
 });
 
 // @TODO: What should the result of this be?
@@ -58,10 +66,10 @@ test("Block params", function() {
 test('brackets with string', function(){
   var emblem = w('',
                  '%my-component [',
-                 '  foo=bar',
-                 '  baz=\'food\' ]');
+                 '  @foo=bar',
+                 '  @baz=\'food\' ]');
   compilesTo(
-    emblem, '<my-component foo={{bar}} baz=\"food\"></my-component>');
+    emblem, '<my-component @foo={{bar}} @baz=\"food\"></my-component>');
 });
 
 // Invalid
@@ -70,30 +78,30 @@ test('brackets with string', function(){
 test('bracketed nested block', function(){
   var emblem = w('',
                  '%my-component [',
-                 '  something="false" ]',
+                 '  @something="false" ]',
                  '  p Bracketed helper attrs!');
   compilesTo(
-    emblem, '<my-component something=\"false\"><p>Bracketed helper attrs!</p></my-component>');
+    emblem, '<my-component @something=\"false\"><p>Bracketed helper attrs!</p></my-component>');
 });
 
 test('bracketed nested with actions', function(){
   var emblem = w('',
                  '%my-component [',
                  '  onclick={ action \'doSometing\' foo bar }',
                  '  change=\'otherAction\'',
-                 '  something="false" ]',
+                 '  @something="false" ]',
                  '  p Bracketed helper attrs!');
   compilesTo(
-    emblem, '<my-component onclick={{action \'doSometing\' foo bar}} {{action \"otherAction\" on=\"change\"}} something=\"false\"><p>Bracketed helper attrs!</p></my-component>');
+    emblem, '<my-component onclick={{action \'doSometing\' foo bar}} {{action \"otherAction\" on=\"change\"}} @something=\"false\"><p>Bracketed helper attrs!</p></my-component>');
 });
 
 // @TODO: should these support mustache-like syntax?  (i.e. %my-component value=(foo) )
 test("Sub-expressions", function() {
   var emblem = w(
-    "% my-component value={ (or (eq foo 'bar') (eq foo 'baz')) }"
+    "% my-component @value={ (or (eq foo 'bar') (eq foo 'baz')) }"
   );
   compilesTo(emblem,
-    '<my-component value={{(or (eq foo \'bar\') (eq foo \'baz\'))}}></my-component>');
+    '<my-component @value={{(or (eq foo \'bar\') (eq foo \'baz\'))}}></my-component>');
 });
 
 test('recursive nesting part 2', function(){
@@ -103,3 +111,17 @@ test('recursive nesting part 2', function(){
                  '    p Hello');
   compilesTo(emblem, '<my-comp-1><my-comp-2><p>Hello</p></my-comp-2></my-comp-1>');
 });
+
+test('named block support', function() {
+  var emblem = w(
+    '% x-modal',
+    '  % @header as |@title|',
+    '    |Header #{title}',
+    '  % @body',
+    '    |Body',
+    '  % @footer',
+    '    |Footer'
+  )
+
+  compilesTo(emblem, '<x-modal><@header as |@title|>Header {{title}}</@header><@body>Body</@body><@footer>Footer</@footer></x-modal>');
+});

tests/integration/mustaches-test.js

@@ -17,6 +17,9 @@ test("various one-liners", function(){
     '{{foo}}{{arf}}<p>{{foo}}</p><span class="foo"></span><p data-foo="yes">{{goo}}</p>');
 });
 
+test('named argument syntax', function() {
+  compilesTo('= @bar', '{{@bar}}');
+});
 
 test("double =='s un-escape", function(){
   var emblem = w(
@@ -526,3 +529,27 @@ test('mustache with else if and complex statements', function() {
   compilesTo(emblem,
     '{{#if foo}}<p>Hi!</p>{{else if (eq 1 (and-or a=b showHidden=(eq 1 2)))}}<p>Wow what was that?</p>{{/if}}');
 });
+
+test('named block support', function() {
+  var emblem = w(
+    '= x-modal',
+    '  % @header as |@title|',
+    '    |Header #{title}',
+    '  % @body',
+    '    |Body',
+    '  % @footer',
+    '    |Footer'
+  )
+
+  compilesTo(emblem, '{{#x-modal}}<@header as |@title|>Header {{title}}</@header><@body>Body</@body><@footer>Footer</@footer>{{/x-modal}}');
+});
+
+test('named block with block param', function() {
+  var emblem = w(
+    '= x-layout as |@widget|',
+    '  = @widget as |a b c|',
+    '    |Hi.'
+  )
+
+  compilesTo(emblem, '{{#x-layout as |@widget|}}{{#@widget as |a b c|}}Hi.{{/@widget}}{{/x-layout}}');
+});