New Twiddle

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-component2.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.example {
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

pre {
  color: #666;
  font-weight: bold;
  margin-bottom: 1rem;
  white-space: pre-wrap;
}

pre code[name], pre code[value], pre code[where] {
  font-weight: normal;
}

pre p {
  margin-top: 0.5rem;
}

pre code[name] {
  color: #c66;
}

pre code[value] {
  color: #66c;
}

.output {
  color: #393;  
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

{{#with (component "my-component" comp=(component 'my-component2')) as |my-comp|}}
  {{#with "hello" as |x-y|}}
    {{#with my-comp as |comp|}}
      <div class="example">
        <pre>\{{x-y}} <code where>where</code> <code name>x-y=</code><code value>"hello"</code></pre>
        <div class="output">{{x-y}}</div>
      </div>

      <div class="example">
        <pre>\{{my-component}} <code where>where</code> <code name>my-component=</code><code value>valid component</code></pre>
        <div class="output">{{my-component}}</div>
      </div>

      <div class="example">
      	<pre>\{{my-comp}} <code where>where</code> <code name>my-comp=</code>
<p>  <code value>(component "my-component" comp=(component 'my-component2'))</code></p></pre>
        <div class="output">{{my-comp}}</div>
      </div>

      <div class="example">
      	<pre>\{{comp}} <code where>where</code> <code name>comp=</code>
<p>  <code value>(component "my-component" comp=(component 'my-component2'))</code></p></pre>
        <div class="output">{{comp}}</div>
      </div>

			<div class="example">
        <pre>\{{this.appName}}</pre>
				<div class="output">{{this.appName}}</div>
      </div>
    {{/with}}
  {{/with}}
{{/with}}

templates.components.my-component.hbs

<div class="example">
  <pre>\{{this.comp}} <code where>where</code> <code name>this.comp=</code><code value>passed in component</code></pre>
	<div class="output">{{this.comp}}</div>
</div>

<div class="example">
  <pre>\{{comp}} <code where>where</code> <code name>comp=</code><code value>passed in component</code></pre>
	<div class="output">{{comp}}</div>
</div>

templates.components.my-component2.hbs

Inside my-component2

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}