Named Blocks

app\.js

import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

// 	const callback = Ember.__loader.registry['@ember/canary-features/index'].callback;
//   Ember.__loader.registry['@ember/canary-features/index'].callback = function() {
//     const features = callback(...arguments);
//     features.EMBER_NAMED_BLOCKS = true;
//     // debugger
//     return features;
//   }

// const features = Ember.__loader.require('@ember/canary-features');
// debugger

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

components.loading-state\.hbs

{{#if this.isLoading}}
  {{yield to="loading"}}
{{#/if}}
{{#if this.isTakingAWhile}}
  {{yield to="taking-a-while"}}
{{/if}}
{{#if this.isLoaded}}
  {{yield this.loadedModel to="content"}} 
{{/if}}
{{#if this.hasFailed}}
  {{yield this.error to="error"}}
{{/if}}

components.loading-state\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { later } from '@ember/runloop';
import { registerDestructor } from '@ember/destroyable';

export default class LoadingStateComponent extends Component {
  @tracked
  isLoading = false;

  @tracked
  loadedModel;

  @tracked
  error;

  @tracked
  isTakingAWhile = false;

  get didComplete() {
    return !this.isLoading;
  }

  get hasFailed() {
    return !!this.error;
  }

  get hasLoaded() {
    return !!this.loadedModel;
  }

  get nothingFound() {
    return this.didComplete && !this.loadedModel && !this.error;
  }
  
  constructor() {
    super(...arguments);
    this.loadModel();
  }

  async loadModel() {
    try {
      this.isLoading = true;
      const timer = later(() => this.isTakingAWhile = true, 10000);
      registerDestructor(this, () => cancel(timer));
      this.loadedModel = await this.model;
    } catch (error) {
      this.error = error;
    } finally {
      this.didComplete = true;
      this.isLoading = false;
    }
  }
}

initializers.named-blocks\.js

function initialize() {
// 	const callback = Ember.__loader.registry['@ember/canary-features/index'].callback;

//   Ember.__loader.registry['@ember/canary-features/index'].callback = function() {
//     const features = callback(...arguments);
//     features.EMBER_NAMED_BLOCKS = true;
//     // debugger
//     return features;
//   }
}

export default { 
  initialize
};

routes.application\.js

import Route from '@ember/routing/route';
import { cancel, later } from '@ember/runloop';
// import { registerDestructor } from '@ember/destroyable';

export default class ApplicationRoute extends Route {
  model() {
    return {
      promise: new Promise(resolve => {
        const timer = later(() => resolve({
          message: 'Loaded!'
        }), 15000);
        // registerDestructor(this, () => {
        //   cancel(timer);
        //   resolve();
        // });
      })
    };
  }
}

templates.application\.hbs

<LoadingState @model={{this.model.promise}}>
  <:loading>
    <p>Loading...</p>
  </:loading>
  <:taking-a-while>
    <p>Be patient.  Almost there!</p>
  </:taking-a-while>
  <:loaded as |content|>
  	<p>{{content.message}}</p>
  </:loaded>
  <:not-found>
    <p>Hmmm... we didn't find anything!</p>
  </:not-found>
  <:error as |message|>
    <p>{{message}}</p>
  </:error>
</LoadingState>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1",
    "@ember/canary-features": "3.21.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-named-blocks-polyfill": "0.2.3"
  }
}