Tracked variable not found?

Dev
1

This is my code:

import { apiInitializer } from "discourse/lib/api";
import { iconNode } from "discourse-common/lib/icon-library";
import { tracked } from "@glimmer/tracking";

export default apiInitializer((api) => {
  @tracked iconName = settings.category_lock_icon || 'lock'; // Fallback to 'lock' if setting is not defined
  @tracked lockIcon = iconNode(this.iconName);

Frustratingly, the browser console tells me that ReferenceError: iconName is not defined. Looking at the file in the browser dev tools, this is what it looks like:

iconName = settings.category_lock_icon || 'lock'; // Fallback to 'lock' if setting is not defined
lockIcon = (0, _iconLibrary.iconNode)((void 0).iconName);

This, compared to another component I made that uses tracked variables (which works):

#buttonIcon = (() => (dt7948.i(this, "buttonIcon"), void 0))();

, where the original code is

@tracked buttonIcon = localStorage.getItem('buttonIcon') != null ? localStorage.getItem('buttonIcon') : "bug";

Am I doing something wrong?

2

You don’t need to track these. They will be constant so unnecessary. You only need to track things that will be dynamic and with which you want to re-fire getters.

Use DIcon instead. eg {{icon this.myIcon}}

eg:

1 Like
3

I see. Thanks for the help; I’ll try it out.

2 Likes
4

Every time you track you use resources so keep that to minimum. It’s no big deal but good practice not to track if something won’t change during a page visit.

I don’t believe settings will be updated without a page refresh in any case.

2 Likes
5

Thanks for the advice! I’ll keep that in mind.

1 Like