snippets support both classic & angle bracket invocation (ember-learn#421)

Author: abel-n

index.js

@@ -129,8 +129,8 @@ module.exports = {
       }
     }
     includer.options.snippetRegexes = Object.assign({}, {
-      begin: /{{#(?:docs-snippet|demo.example)\sname=(?:"|')(\S+)(?:"|')/,
-      end: /{{\/(?:docs-snippet|demo.example)}}/,
+      begin: /(?:{{#|<)(?:DocsSnippet|docs-snippet|demo\.example)\s@?name=['"](\S*)['"]/,
+      end: /(?:{{|<)\/(?:DocsSnippet|docs-snippet|demo\.example)(?:}}|>)/,
     }, includer.options.snippetRegexes);
     includer.options.includehighlightJS = false;
     includer.options.includeHighlightStyle = false;

test-apps/new-addon/tests/acceptance/snippets-test.js

@@ -0,0 +1,40 @@
+import { module, test } from 'qunit';
+import { visit, fillIn } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+const snippetIds = ['your-snippet-name.hbs', 'your-angle-bracket-snippet-name.hbs'];
+
+module('Acceptance | snippets', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('snippets support both classic & angle bracket invocation', async function(assert) {
+    assert.expect(13);
+
+    await visit('/snippets');
+
+    snippetIds.forEach(id => {
+      let snippet = `[data-test-id="${id}"]`;
+
+      assert.dom(`${snippet} pre`).includesText('<div id=\'foo\'>');
+      assert.dom(`${snippet} button`).hasAttribute('data-clipboard-text', /.*<div id='foo'>.*/);
+    });
+
+    let demo = '[data-test-id="your-angle-bracket-snippet-name.hbs"] ~ *:not([data-test-id])';
+    let secondDemo = `${demo}:last-child`;
+
+    assert.dom(`${demo} input`).exists({ count: 2 });
+
+    await fillIn(`${demo} input`, '2');
+    await fillIn(`${secondDemo} input`, '2');
+
+    assert.dom(demo).includesText('The value is: 2');
+    assert.dom(`${demo} input`).hasClass('docs-border');
+    assert.dom(`${demo} pre`).includesText('{{input value=this.val class=\'docs-border\'}}');
+    assert.dom(`${demo} button`).hasAttribute('data-clipboard-text', /{{input value=this\.val class='docs-border'}}/);
+
+    assert.dom(`${secondDemo}`).includesText('The value is: 2');
+    assert.dom(`${secondDemo} input`).hasClass('docs-border');
+    assert.dom(`${secondDemo} pre`).includesText('<Input @value={{this.otherVal}} class=\'docs-border\' />');
+    assert.dom(`${secondDemo} button`).hasAttribute('data-clipboard-text', /<Input @value={{this\.otherVal}} class='docs-border' \/>/);
+  });
+});

test-apps/new-addon/tests/dummy/app/router.js

@@ -8,6 +8,7 @@ const Router = AddonDocsRouter.extend({
 
 Router.map(function() {
   this.route('route-using-compile-markdown');
+  this.route('snippets');
 
   docsRoute(this, function() {
 

test-apps/new-addon/tests/dummy/app/templates/snippets.hbs

@@ -0,0 +1,45 @@
+{{#docs-snippet name='your-snippet-name.hbs'}}
+  <div id='foo'>
+    {{#my-awesome-thing
+      some=true
+      options=false
+    }}
+      <p>Something old, something new</p>
+    {{/my-awesome-thing}}
+  </div>
+{{/docs-snippet}}
+
+<DocsSnippet @name='your-angle-bracket-snippet-name.hbs'>
+  <div id='foo'>
+    {{#my-awesome-thing
+      some=true
+      options=false
+    }}
+      <p>Something old, something new</p>
+    {{/my-awesome-thing}}
+  </div>
+</DocsSnippet>
+
+{{#docs-demo data-test-id='docs-demo-basic.hbs' as |demo|}}
+  {{#demo.example name='docs-demo-basic.hbs'}}
+    <p>I am a <strong>handlebars</strong> template!</p>
+    <p>The value is: {{this.val}}</p>
+    <div>
+      {{input value=this.val class='docs-border'}}
+    </div>
+  {{/demo.example}}
+
+  {{demo.snippet 'docs-demo-basic.hbs'}}
+{{/docs-demo}}
+
+<DocsDemo as |demo|>
+  <demo.example @name='docs-demo-angle-brackets-basic.hbs'>
+    <p>I am a <strong>handlebars</strong> template!</p>
+    <p>The value is: {{this.otherVal}}</p>
+    <div>
+      <Input @value={{this.otherVal}} class='docs-border' />
+    </div>
+  </demo.example>
+
+  <demo.snippet @name='docs-demo-angle-brackets-basic.hbs' />
+</DocsDemo>