Sync component

components.projects-list.js

// https://discuss.emberjs.com/t/ember-component-creation-error-in-2-10/12087/7

import Ember from 'ember';
import layout from '../templates/components/projects-list';
import { later } from '@ember/runloop'; 

function getProject(name = 'Software Engineer') { 
    return new Promise((resolve) => { 
      later(this, () => { 
        resolve({ 
          name, 
          favorite: true,
          time: Date.now() 
        }); 
      }, 1000); 
    }); 
 }

const InternalComponent = Ember.Component.extend({
  layout,
  init() {
    this._super(...arguments);
    console.log('In init', this.get('projectId'), this.get('project'));
    
    // promise[1].then((project) => {
    //   this.set('project', project);
    // })
  },

  actions: {
    starProject() {
      const project = this.get('project');
      // should probably be a whole another module
      project.favorite = !project.favorite;
      console.log('project saved');
    }
  }
});

export const projectListComponent = (projectId) => {
  let promise = {};

  const fetchProject = (owner) => {
    if(promise[projectId]) {
      return promise;
    }
 
    const pro = getProject().then((project) => {
      const renderer = owner.lookup('renderer:-dom');
      Ember.setOwner(InternalComponent, owner);
      const promiseComponent = InternalComponent.create({ 
        renderer, projectId, project
      });
 
      return promiseComponent;
    });

    promise[projectId] = pro;

    return pro;
  }
    
  return {
    fetchProject
  }
};

export default InternalComponent;

controllers.application.js

import Ember from 'ember';

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

routes.application.js

import Ember from 'ember';
import { projectListComponent } from '../components/projects-list';
import layout from '../templates/components/projects-list';

export default Ember.Route.extend({
  model(params) {
    const projectList = projectListComponent(1)
		const owner = Ember.getOwner(this);
    return Ember.RSVP.hash({
      projectComponent: projectList.fetchProject(owner)
    }).then((model) => {
      console.log('projectComponent', model.projectComponent);
      
      return model;
    });
  }
});

templates.application.hbs

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

{{model.projectComponent}}
<br>
<br>

templates.components.projects-list.hbs

{{log "hello"}}

<h1>Hello bar</h1>
{{project.name}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}