Init() method not being called when Component gets rendered?

Question

Im trying to migrate from ember classic syntax to more modern syntax, but struggling to understand why my init() method call does not get called?

template:

<HomeCard>
  {{#if this.loadThemeEditorDeepLink.lastSuccessful}}
    <PolarisBanner
      @status="critical"
      @action={{hash
        text="Turn on"
        onAction=(route-action "openUrl" this.themeEditorAppEmbedUrl)
      }}
      @secondaryAction={{hash
        text="Watch quick tutorial"
        onAction=(fn (mut this.showModal) true)
      }}
    />
  {{/if}}
</HomeCard>

{{#if this.showModal}}
  <PolarisModal
    @onClose={{fn (mut this.showModal) false}}
  />
{{/if}}

counter .js component file:

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';
export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  @dropTask
  loadThemeEditorDeepLink = function* loadThemeEditorDeepLink() {
    let url = yield this.fetchThemeSettingsAppEmbedDeepLink();
    this.themeEditorAppEmbedUrl = url;
  };

  async fetchThemeSettingsAppEmbedDeepLink() {
    try {
      let result = await this.ajax.request(
        `apiUrl`
      );
      return result.theme_editor_deep_link_url;
    } catch (err) {
      this.errorHandler.handle(err);
    }
  }

  init() {
    console.log('testing');
    super.init(...arguments);
    this.loadThemeEditorDeepLink.perform();
  }
}

Even tough my component gets rendered just fine, the init() call does not happen, thus my component malfunctions

Any idea on what I might be missing?

Answer 1

glimmer components do not have an init method. They are mostly "basic classes", so you'd want to use the constructor instead.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { dropTask } from 'ember-concurrency-decorators';
import { tracked } from '@glimmer/tracking';

export default class CheckComponent extends Component {
  @service ajax;

  @tracked themeEditorAppEmbedUrl = '';
  showModal = false;

  constructor(owner, args) {
    super(owner, args);
    
    this.loadThemeEditorDeepLink.perform();
  }

  // ...
}

for more information:

• https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent#constructor

this may be helpful as well: https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/