Added support for non-block components definitions with `%my-comp/ @v…

…alue=foo`.

Also glimmer component will be non-blocked if it's not contain nested nodes.
resolved machty#338

lib/ast-builder.js

@@ -120,6 +120,10 @@ var builder = {
     return node;
   },
 
+  setVoid: function(){
+    this.currentNode.isVoid = true;
+  },
+
   enter: function(node){
     this.previousNodes.push(this.currentNode);
     this.currentNode = node;

lib/parser.pegjs

@@ -244,12 +244,13 @@ colonContent = ': ' _ c:contentStatement { return c; }
 // and any nested content inside of it.
 htmlElement = h:inHtmlTag nested:htmlTerminator
 {
-  const isDoubleExit = parseInHtml(...h);
+  const [isHtmlComponent, isDoubleExit] = parseInHtml(...h);
   if (nested && nested.length > 0) {
     nested = castStringsToTextNodes(nested);
     builder.add('childNodes', nested);
   }
   if (isDoubleExit) builder.add('childNodes', [builder.exit()])
+  if (isHtmlComponent && !isDoubleExit && !nested) builder.setVoid()
   return [builder.exit()];
 }
 

lib/pegjs/html/in-tag.pegjs

@@ -2,14 +2,16 @@
 @import "./tag-component.pegjs" as tagComponent
 
 {
-  function parseInHtml(h, inTagMustaches, fullAttributes, blockParams) {
+  function parseInHtml(h, inTagMustaches, fullAttributes, blockParams, isHtmlComponent) {
     var tagName = h[0] || 'div',
         shorthandAttributes = h[1] || [],
+        isVoid = h[2],
         id = shorthandAttributes[0],
         classes = shorthandAttributes[1] || [];
     var i, l;
 
-    var elementNode = builder.generateElement(tagName);
+    const elementNode = builder.generateElement(tagName);
+    if (isVoid) elementNode.isVoid = isVoid
     builder.enter(elementNode);
 
     for (i=0, l=classes.length;i<l;i++) {
@@ -65,10 +67,10 @@
 
       if (destructuredParams.length) {
         createDestructuringBlock(destructuredParams)
-        return true;
+        return [isHtmlComponent, true];
       }
     }
-    return false;
+    return [isHtmlComponent, false];
   }
 
   function isKnownTag(tag) {

lib/pegjs/html/tag-component.pegjs

@@ -48,7 +48,7 @@ inHtmlTag
     ? [].concat(blockParamsStart || []).concat(blockParamsEnd || [])
     : null
   const inTagMustaches = startingInTagMustaches.concat(modifiers)
-  return [h, inTagMustaches, fullAttributes, blockParams]
+  return [h, inTagMustaches, fullAttributes, blockParams, true]
 }
 / h:htmlStart inTagMustaches:inTagMustache* shorthands:inlineShorthands? blockParamsStart:blockParams? fullAttributes:attribute* blockParamsEnd:blockParams?
 {
@@ -65,13 +65,15 @@ inHtmlTag
   const blockParams = (blockParamsStart || blockParamsEnd)
     ? [].concat(blockParamsStart || []).concat(blockParamsEnd || [])
     : null
-  return [h, inTagMustaches, fullAttributes, blockParams]
+  return [h, inTagMustaches, fullAttributes, blockParams, true]
 }
 
 htmlStart
-  = h:componentTag? s:shorthandAttributes? '/'?
+  = h:componentTag? s:shorthandAttributes? isVoid:'/'?
 &{
   return h || s;
+} {
+  return [h, s, isVoid === '/']
 }
 
 inlineShorthands

lib/pegjs/html/tag-html.pegjs

@@ -52,7 +52,7 @@ tagHtml
   }
 
   const inTagMustaches = startingInTagMustaches.concat(modifiers)
-  return [h, inTagMustaches, fullAttributes]
+  return [h, inTagMustaches, fullAttributes, false]
 }
 / h:htmlStart inTagMustaches:inTagMustache* shorthands:inlineShorthands? fullAttributes:attribute*
 {
@@ -65,7 +65,7 @@ tagHtml
     if (classes && classes.length) firstShorthandAttrs[1] = mainClasses.concat(classes)
     h[1] = firstShorthandAttrs
   }
-  return [h, inTagMustaches, fullAttributes]
+  return [h, inTagMustaches, fullAttributes, false]
 }
 
 
@@ -77,7 +77,9 @@ tagHtml
 // span.combo#of.stuff
 // NOTE: this returns a 2 element array of [h,s].
 // The return is used to reject a when both h an s are falsy.
-htmlStart = h:knownTagName? s:shorthandAttributes? '/'? &{ return h || s; }
+htmlStart = h:knownTagName? s:shorthandAttributes? '/'? &{ return h || s; } {
+  return [h, s]
+}
 
 inlineShorthands
 =  _ shorthands:shorthandAttributes { return shorthands }

lib/template-compiler.js

@@ -98,8 +98,12 @@ var compiler = {
     pushContent(this, '<'+tagName);
   },
 
-  openElementEnd: function(){
-    pushContent(this, '>');
+  openElementEnd: function(isVoid = false){
+    if (isVoid) {
+      pushContent(this, '/>');
+    } else {
+      pushContent(this, '>');
+    }
     this._insideElement = false;
   },
 

lib/template-visitor.js

@@ -73,13 +73,13 @@ var visitor = {
 
     visitArray(node.inTagText, opcodes);
 
-    opcodes.push(['openElementEnd']);
-
     if (node.isVoid) {
       if (node.childNodes.length) {
         throw new Error('Cannot nest under void element ' + node.tagName);
       }
+      opcodes.push(['openElementEnd', [node.isVoid]]);
     } else {
+      opcodes.push(['openElementEnd']);
       visitArray(node.childNodes, opcodes);
       opcodes.push(['closeElement', [node.tagName]]);
     }

tests/integration/basic-syntax/html-attributes-test.js

@@ -11,7 +11,7 @@ module('basic syntax: html-attributes', function (hooks) {
     });
 
     test('numbers in shorthand', function (assert) {
-      assert.compilesTo('%4', '<4></4>');
+      assert.compilesTo('%4', '<4/>');
       assert.compilesTo('%4 ermagerd', '<4>ermagerd</4>');
       assert.compilesTo('%4#4.4 ermagerd', '<4 id="4" class="4">ermagerd</4>');
     });

tests/integration/basic-syntax/plain-text-test.js

@@ -623,7 +623,7 @@ module('basic syntax: plain-text', function (hooks) {
     test("self closing tag with forward slash", function (assert) {
       const emblem = 'hr/';
 
-      assert.compilesTo(emblem, '<hr>');
+      assert.compilesTo(emblem, '<hr/>');
     });
 
     test("non-void elements are still closed correctly", function (assert) {

tests/integration/basic-syntax/tags-test.js

@@ -82,25 +82,25 @@ module('basic syntax: tags', function (hooks) {
     test("br", function (assert) {
       const emblem = "br";
 
-      assert.compilesTo(emblem, '<br>');
+      assert.compilesTo(emblem, '<br/>');
     });
 
     test("hr", function (assert) {
       const emblem = "hr";
 
-      assert.compilesTo(emblem, '<hr>');
+      assert.compilesTo(emblem, '<hr/>');
     });
 
     test("br paragraph example", function (assert) {
       const emblem = "p\n  | LOL!\n  br\n  | BORF!";
 
-      assert.compilesTo(emblem, '<p>LOL!<br>BORF!</p>');
+      assert.compilesTo(emblem, '<p>LOL!<br/>BORF!</p>');
     });
 
     test("input", function (assert) {
       const emblem = "input type=\"text\"";
 
-      assert.compilesTo(emblem, '<input type="text">');
+      assert.compilesTo(emblem, '<input type="text"/>');
     });
 
     test("nested content under self-closing tag should fail", function (assert) {
@@ -114,7 +114,7 @@ module('basic syntax: tags', function (hooks) {
     test("basic", function (assert) {
       const emblem = "%borf";
 
-      assert.compilesTo(emblem, '<borf></borf>');
+      assert.compilesTo(emblem, '<borf/>');
     });
 
     test("nested", function (assert) {
@@ -126,14 +126,14 @@ module('basic syntax: tags', function (hooks) {
     test("capitalized", function (assert) {
       const emblem = "%Alex alex\n%Alex\n  %Woot";
 
-      assert.compilesTo(emblem, '<Alex>alex</Alex><Alex><Woot></Woot></Alex>');
+      assert.compilesTo(emblem, '<Alex>alex</Alex><Alex><Woot/></Alex>');
     });
 
     test("funky chars", function (assert) {
       const emblem = "%borf:narf\n%borf:narf Hello, {{foo}}.\n%alex = foo";
 
       assert.compilesTo(emblem,
-        '<borf:narf></borf:narf><borf:narf>Hello, {{foo}}.</borf:narf><alex>{{foo}}</alex>');
+        '<borf:narf/><borf:narf>Hello, {{foo}}.</borf:narf><alex>{{foo}}</alex>');
     });
   });
 });

tests/integration/ember/attribute-bindings-test.js

@@ -129,7 +129,7 @@ module('ember: attribute bindings', function (hooks) {
     test('mustache in attribute', function (assert) {
       const emblem = 'img src="{{unbound post.showLogoUrl}}" onerror="this.src=\'{{unbound orgSettings.onErrorBlankLogoImage}}\'"';
 
-      assert.compilesTo(emblem, '<img src="{{unbound post.showLogoUrl}}" onerror="this.src=\'{{unbound orgSettings.onErrorBlankLogoImage}}\'">');
+      assert.compilesTo(emblem, '<img src="{{unbound post.showLogoUrl}}" onerror="this.src=\'{{unbound orgSettings.onErrorBlankLogoImage}}\'"/>');
     });
 
     test('mustache in attribute with exclamation point', function (assert) {

tests/integration/ember/ember-input-helper-test.js

@@ -5,7 +5,7 @@ module('ember: input helper test', function (hooks) {
   test('example 1', function (assert) {
     const emblem = "input value=name oninput={ action (mut myValue) value='target.value' }";
 
-    assert.compilesTo(emblem, "<input value={{name}} oninput={{action (mut myValue) value='target.value'}}>");
+    assert.compilesTo(emblem, "<input value={{name}} oninput={{action (mut myValue) value='target.value'}}/>");
   });
 
   test('example 2', function (assert) {

tests/integration/glimmer/basic-syntax-test.js

@@ -15,11 +15,11 @@ module('glimmer: basic syntax', function (hooks) {
   });
 
   test('basic syntax for shorthands 1', function (assert) {
-    assert.compilesTo("%my-comp#hello .woot @value=foo data-hint=\"not-my-component%%::\"", '<my-comp id="hello" @value={{foo}} data-hint=\"not-my-component%%::\" class="woot"></my-comp>');
-    assert.compilesTo("%MyComp.woot #hello @value=foo", '<MyComp id="hello" @value={{foo}} class="woot"></MyComp>');
-    assert.compilesTo("%my-comp#id.woot #hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot"></my-comp>');
-    assert.compilesTo("%my-comp .woot#hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot"></my-comp>');
-    assert.compilesTo("%my-comp .woot.loot#hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot loot"></my-comp>');
+    assert.compilesTo("%my-comp#hello .woot @value=foo data-hint=\"not-my-component%%::\"", '<my-comp id="hello" @value={{foo}} data-hint=\"not-my-component%%::\" class="woot"/>');
+    assert.compilesTo("%MyComp.woot #hello @value=foo", '<MyComp id="hello" @value={{foo}} class="woot"/>');
+    assert.compilesTo("%my-comp#id.woot #hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot"/>');
+    assert.compilesTo("%my-comp .woot#hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot"/>');
+    assert.compilesTo("%my-comp .woot.loot#hello @value=foo", '<my-comp id="hello" @value={{foo}} class="woot loot"/>');
   });
 
   test('basic syntax 1', function (assert) {
@@ -28,19 +28,19 @@ module('glimmer: basic syntax', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @value={{foo}} data-hint=\"not-my-component%%::\"></MyComponent>');
+      '<MyComponent @value={{foo}} data-hint=\"not-my-component%%::\"/>');
   });
 
   test('basic syntax 2', function (assert) {
     const emblem = "% my-component @value=fooValue data-hint='My special component'";
 
-    assert.compilesTo(emblem, '<my-component @value={{fooValue}} data-hint="My special component"></my-component>');
+    assert.compilesTo(emblem, '<my-component @value={{fooValue}} data-hint="My special component"/>');
   });
 
   test('basic syntax 3', function (assert) {
     const emblem = "% modal-popup @onClose={ action 'modalClosed' }";
 
-    assert.compilesTo(emblem, "<modal-popup @onClose={{action 'modalClosed'}}></modal-popup>");
+    assert.compilesTo(emblem, "<modal-popup @onClose={{action 'modalClosed'}}/>");
   });
 
   test("basic syntax with legacy quoting", function (assert) {
@@ -49,7 +49,7 @@ module('glimmer: basic syntax', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent value=\"{{foo}}\" data-hint=\"not-my-component%%::\"></MyComponent>', null, {
+      '<MyComponent value=\"{{foo}}\" data-hint=\"not-my-component%%::\"/>', null, {
         legacyAttributeQuoting: true
       });
   });
@@ -60,7 +60,7 @@ module('glimmer: basic syntax', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @multiselect={{false}}></MyComponent>');
+      '<MyComponent @multiselect={{false}}/>');
   });
 
   test("...attributes", function (assert) {
@@ -69,7 +69,7 @@ module('glimmer: basic syntax', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent ...attributes type={{@post.type}}></MyComponent>');
+      '<MyComponent ...attributes type={{@post.type}}/>');
   });
 
   test("Sub-expressions", function (assert) {
@@ -78,7 +78,7 @@ module('glimmer: basic syntax', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @value={{(or (eq foo \'bar\') (eq foo \'baz\'))}}></MyComponent>');
+      '<MyComponent @value={{(or (eq foo \'bar\') (eq foo \'baz\'))}}/>');
   });
 
   test("nested glimmer components with colon", function (assert) {

tests/integration/glimmer/blocks-test.js

@@ -12,6 +12,24 @@ module('glimmer: blocks', function (hooks) {
       '<MyComponent @value={{foo}}>Hi!</MyComponent>');
   });
 
+  test("basic without block", function (assert) {
+    const emblem = w(
+      "%MyComponent/ @value=foo"
+    );
+
+    assert.compilesTo(emblem,
+      '<MyComponent @value={{foo}}/>');
+  });
+
+  test("basic without block - case 2", function (assert) {
+    const emblem = w(
+      "%MyComponent @value=foo"
+    );
+
+    assert.compilesTo(emblem,
+      '<MyComponent @value={{foo}}/>');
+  });
+
   test("block params", function (assert) {
     const emblem = w(
       "%MyComponent @value=foo as |comp1 @comp2|",
@@ -29,7 +47,7 @@ module('glimmer: blocks', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @value={{foo}} as |comp|><comp.subcomp @value={{foo}}></comp.subcomp></MyComponent>');
+      '<MyComponent @value={{foo}} as |comp|><comp.subcomp @value={{foo}}/></MyComponent>');
   });
 
   test('recursive nesting part 2', function (assert) {

tests/integration/glimmer/brackets-test.js

@@ -11,7 +11,7 @@ module('glimmer: brackets', function (hooks) {
       ']'
     );
 
-    assert.compilesTo(emblem, '<MyComponent @foo={{bar}} @baz=\"food\"></MyComponent>');
+    assert.compilesTo(emblem, '<MyComponent @foo={{bar}} @baz=\"food\"/>');
   });
 
   test('brackets with block params in the start', function (assert) {
@@ -49,7 +49,7 @@ module('glimmer: brackets', function (hooks) {
       ']'
     );
 
-    assert.compilesTo(emblem, '<MyComponent @foo={{bar}} @baz=\"food\"></MyComponent>');
+    assert.compilesTo(emblem, '<MyComponent @foo={{bar}} @baz=\"food\"/>');
   });
 
   test('bracketed nested block 1', function (assert) {
@@ -186,7 +186,7 @@ module('glimmer: brackets', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @onClose={{action (queue (action this.closeWizard) (transition-to "home"))}}></MyComponent>');
+      '<MyComponent @onClose={{action (queue (action this.closeWizard) (transition-to "home"))}}/>');
   });
 
   test("bracketed from first with Sub-expressions", function (assert) {
@@ -200,6 +200,6 @@ module('glimmer: brackets', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<MyComponent @onClose={{coop (action this.closeWizard) (transition-to "home")}}></MyComponent>');
+      '<MyComponent @onClose={{coop (action this.closeWizard) (transition-to "home")}}/>');
   });
 });

tests/integration/glimmer/namespacing-test.js

@@ -8,14 +8,14 @@ module('glimmer: namespacing', function (hooks) {
     );
 
     assert.compilesTo(emblem,
-      '<inputs:MyComponent @value={{foo}}></inputs:MyComponent>');
+      '<inputs:MyComponent @value={{foo}}/>');
   });
 
   test('module namespaces', function (assert) {
     const emblem = w(
       '% my-addon::foo'
     );
 
-    assert.compilesTo(emblem, '<my-addon::foo></my-addon::foo>');
+    assert.compilesTo(emblem, '<my-addon::foo/>');
   });
 });