New Twiddle

components.my-component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

  action = 'my-component';
  component = 'my-component';
  debugger = 'my-component';
  'each-in' = 'my-component';
  each = 'my-component';
  'has-block-params' = 'my-component';
  'has-block' = 'my-component';
  hasBlock = 'my-component';
  helper = 'my-component';
  if = 'my-component';
  'in-element' = 'my-component';
  let = 'my-component';
  'link-to' = 'my-component';
  log = 'my-component';
  modifier = 'my-component';
  mount = 'my-component';
  mut = 'my-component';
  outlet = 'my-component';
  'query-params' = 'my-component';
  readonly = 'my-component';
  unbound = 'my-component';
  unless = 'my-component';
  with = 'my-component';
  yield = 'my-component';

}

templates.application\.hbs

<h2>Works as this fallback</h2>

<div>action: {{component action}}</div>
<div>component: {{component component}}</div>
<div>debugger: {{component debugger}}</div>
<div>each-in: {{component each-in}}</div>
<div>each: {{component each}}</div>
<div>has-block-params: {{component has-block-params}}</div>
<div>has-block: {{component has-block}}</div>
<div>helper: {{component helper}}</div>
<div>if: {{component if}}</div>
<div>in-element: {{component in-element}}</div>
<div>let: {{component let}}</div>
<div>link-to: {{component link-to}}</div>
<div>log: {{component log}}</div>
<div>modifier: {{component modifier}}</div>
<div>mount: {{component mount}}</div>
<div>mut: {{component mut}}</div>
<div>outlet: {{component outlet}}</div>
<div>query-params: {{component query-params}}</div>
<div>readonly: {{component readonly}}</div>
<div>unbound: {{component unbound}}</div>
<div>unless: {{component unless}}</div>
<div>with: {{component with}}</div>
<div>yield: {{component yield}}</div>

<h2>Works as block param</h2>

<div>
  action:
  {{!-- {{#let (component 'my-component') as |action|}}
    {{component}}
  {{/let}} --}}
</div>
<div>
  component:
  {{!-- {{#let (component 'my-component') as |component|}}
    {{component}}
  {{/let}} --}}
</div>
<div>
  debugger:
  {{#let (component 'my-component') as |debugger|}}
    {{debugger}}
  {{/let}}
</div>
<div>
  each-in:
  {{#let (component 'my-component') as |each-in|}}
    {{each-in}}
  {{/let}}
</div>
<div>
  each:
  {{#let (component 'my-component') as |each|}}
    {{each}}
  {{/let}}
</div>
<div>
  has-block-params:
  {{#let (component 'my-component') as |has-block-params|}}
    {{has-block-params}}
  {{/let}}
</div>
<div>
  has-block:
  {{#let (component 'my-component') as |has-block|}}
    {{has-block}}
  {{/let}}
</div>
<div>
  helper:
  {{#let (component 'my-component') as |helper|}}
    {{helper}}
  {{/let}}
</div>
<div>
  if:
  {{!-- {{#let (component 'my-component') as |if|}}
    {{if}}
  {{/let}} --}}
</div>
<div>
  in-element:
  {{#let (component 'my-component') as |in-element|}}
    {{in-element}}
  {{/let}}
</div>
<div>
  let:
  {{#let (component 'my-component') as |let|}}
    {{let}}
  {{/let}}
</div>
<div>
  link-to:
  {{!-- {{#let (component 'my-component') as |link-to|}}
    {{link-to}}
  {{/let}} --}}
</div>
<div>
  log:
  {{#let (component 'my-component') as |log|}}
    {{log}}
  {{/let}}
</div>
<div>
  modifier:
  {{#let (component 'my-component') as |modifier|}}
    {{modifier}}
  {{/let}}
</div>
<div>
  mount:
  {{#let (component 'my-component') as |mount|}}
    {{mount}}
  {{/let}}
</div>
<div>
  mut:
  {{#let (component 'my-component') as |mut|}}
    {{mut}}
  {{/let}}
</div>
<div>
  outlet:
  {{#let (component 'my-component') as |outlet|}}
    {{outlet}}
  {{/let}}
</div>
<div>
  query-params:
  {{#let (component 'my-component') as |query-params|}}
    {{query-params}}
  {{/let}}
</div>
<div>
  readonly:
  {{#let (component 'my-component') as |readonly|}}
    {{readonly}}
  {{/let}}
</div>
<div>
  unbound:
  {{#let (component 'my-component') as |unbound|}}
    {{unbound}}
  {{/let}}
</div>
<div>
  unless:
  {{#let (component 'my-component') as |unless|}}
    {{unless}}
  {{/let}}
</div>
<div>
  with:
  {{#let (component 'my-component') as |with|}}
    {{with}}
  {{/let}}
</div>
<div>
  yield:
  {{#let (component 'my-component') as |yield|}}
    {{yield}}
  {{/let}}
</div>

templates.components.my-component\.hbs

Testing

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}