Clean up `name` argument usage in docs-demo component

Couple of issues I’m having with the name argument for the docs-demo:

1. I get Attempted to register a view with an id already in use: example-undefined a lot, because I forget to add a name. If a name is required, we should assert that it exists when the component is rendered.

2. It seems very verbose to require a name, and then (generally) require each snippet to set its names as well. Could we use the name argument to infer the snippets for the demo? Possibly allowing us to just pass in type to each snippet?

[samselikoff]

How about as a first step for some sugar, docs.example can get named automatically (it will need some sort of key) and it automatically adds a demo.snippet to the list of snippets, with that name. But it’s all implicitly wired up.

That means the simplest version of docs-demo could be

{{#docs-demo as |demo|}}
  {{#demo.example}}
    <p>Hello, {{name}}!</p>
  {{/demo.example}}
{{/docs-demo}}

and that would automatically render the snippet for the example. (We could add a showSnippet=false option to demo.example.) Then, you could render the other demo.snippets as normal.

Would that be an improvement?

[savvymas]

While trying to use two demos without the name argument like so:

{{#docs-demo as |demo|}}
    {{#demo.example}}
      {{bind-example}}
    {{/demo.example}}

    {{demo.snippet 'bind-snippet.hbs'}}
    {{demo.snippet 'bind-snippet.js'}}
    {{demo.snippet 'bind-snippet.css'}}
{{/docs-demo}}

{{#docs-demo as |demo|}}
    {{#demo.example}}
      {{two-lists-example}}
    {{/demo.example}}

    {{demo.snippet 'two-lists-snippet.hbs'}}
    {{demo.snippet 'two-lists-snippet.js'}}
{{/docs-demo}}

I got this error:

Uncaught TypeError: Cannot read property 'commit' of null
    at Environment.commit (runtime.js:6407)
    at Environment.commit (environment.js:266)
    at InteractiveRenderer._renderRootsTransaction (renderer.js:359)
    at InteractiveRenderer._renderRoot (renderer.js:289)
    at InteractiveRenderer._appendDefinition (renderer.js:214)
    at InteractiveRenderer.appendOutletView (renderer.js:202)
    at invoke (backburner.js:207)
    at Queue.flush (backburner.js:125)
    at DeferredActionQueues.flush (backburner.js:278)
    at Backburner.end (backburner.js:410)

This is a super confusing failure mode. I’m sharing this stack trace in case other people run into the same problem. It goes away by setting names to each example.