Remove our ember-template-tag TS workaround

[Windvis]

In #492 we added a workaround for a .gts issue but a fix for this has now landed in @embroider/compat.

https://github.com/embroider-build/embroider/blob/stable/CHANGELOG.md#bug-bug-fix-3

[Windvis]

Hmm, I'm running into issues when I test this out in loket which uses the latest embroider packages.

It throws a runtime error:

Uncaught (in promise) ReferenceError: fn is not defined

Which points to the au-toaster component.

The rewritten file looks like this:

var _class, _descriptor, _AuToaster;
/* eslint-disable no-undef -- This is a workaround for a false-positive bug: https://github.com/ember-cli/eslint-plugin-ember/issues/1747 */
function _initializerDefineProperty(e, i, r, l) { r && Object.defineProperty(e, i, { enumerable: r.enumerable, configurable: r.configurable, writable: r.writable, value: r.initializer ? r.initializer.call(l) : void 0 }); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _applyDecoratedDescriptor(i, e, r, n, l) { var a = {}; return Object.keys(n).forEach(function (i) { a[i] = n[i]; }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function (r, n) { return n(i, e, r) || r; }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a; }
function _initializerWarningHelper(r, e) { throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform."); }
import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { precompileTemplate } from "@ember/template-compilation";
import { setComponentTemplate } from "@ember/component";
let AuToaster = (_class = (_AuToaster = class AuToaster extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "toaster", _descriptor, this);
    _defineProperty(this, "closeToast", toast => {
      this.toaster.close(toast);
    });
  }
  get position() {
    if (this.args.position == 'bottom') return 'au-c-toaster--bottom';else return 'au-c-toaster--top';
  }
}, setComponentTemplate(precompileTemplate("\n    {{#if this.toaster.toasts.length}}\n      <div class=\"au-c-toaster {{this.position}}\" ...attributes>\n        {{#each this.toaster.toasts as |toast|}}\n          {{#if toast.component}}\n            <toast.component @options={{toast.options}} @close={{fn this.closeToast toast}} />\n          {{else}}\n            <AuAlert @title={{toast.title}} @skin={{toast.options.type}} @icon={{toast.options.icon}} @size=\"small\" @closable={{toast.options.closable}} @onClose={{fn this.closeToast toast}} data-test-toast>\n              {{#if toast.message}}\n                <p>{{toast.message}}</p>\n              {{/if}}\n            </AuAlert>\n          {{/if}}\n        {{/each}}\n      </div>\n    {{/if}}\n  ", {
  scope: () => ({
    fn,
    AuAlert
  }),
  strictMode: true
}), _AuToaster), _AuToaster), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "toaster", [service], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class);
export { AuToaster as default };

Where import { fn } from '@ember/helper'; is indeed missing..

The same file, compiled with the master branch of Appuniversum

var _class, _descriptor, _AuToaster;
/* eslint-disable no-undef -- This is a workaround for a false-positive bug: https://github.com/ember-cli/eslint-plugin-ember/issues/1747 */
function _initializerDefineProperty(e, i, r, l) { r && Object.defineProperty(e, i, { enumerable: r.enumerable, configurable: r.configurable, writable: r.writable, value: r.initializer ? r.initializer.call(l) : void 0 }); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _applyDecoratedDescriptor(i, e, r, n, l) { var a = {}; return Object.keys(n).forEach(function (i) { a[i] = n[i]; }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function (r, n) { return n(i, e, r) || r; }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a; }
function _initializerWarningHelper(r, e) { throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform."); }
import { AuAlert } from '@appuniversum/ember-appuniversum';
import { fn } from '@ember/helper';
import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { precompileTemplate } from "@ember/template-compilation";
import { setComponentTemplate } from "@ember/component";
let AuToaster = (_class = (_AuToaster = class AuToaster extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "toaster", _descriptor, this);
    _defineProperty(this, "closeToast", toast => {
      this.toaster.close(toast);
    });
  }
  get position() {
    if (this.args.position == 'bottom') return 'au-c-toaster--bottom';else return 'au-c-toaster--top';
  }
}, setComponentTemplate(precompileTemplate("\n    {{#if this.toaster.toasts.length}}\n      <div class=\"au-c-toaster {{this.position}}\" ...attributes>\n        {{#each this.toaster.toasts as |toast|}}\n          {{#if toast.component}}\n            <toast.component @options={{toast.options}} @close={{fn this.closeToast toast}} />\n          {{else}}\n            <AuAlert @title={{toast.title}} @skin={{toast.options.type}} @icon={{toast.options.icon}} @size=\"small\" @closable={{toast.options.closable}} @onClose={{fn this.closeToast toast}} data-test-toast>\n              {{#if toast.message}}\n                <p>{{toast.message}}</p>\n              {{/if}}\n            </AuAlert>\n          {{/if}}\n        {{/each}}\n      </div>\n    {{/if}}\n  ", {
  scope: () => ({
    fn,
    AuAlert
  }),
  strictMode: true
}), _AuToaster), _AuToaster), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "toaster", [service], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class);
export { AuToaster as default };

Here the import is present.

The strange part is that it is still a .gjs file, not a .gts one 🤔

CI didn't complain either, and we do have some tests for the AuToaster component.

I noticed the app was still using ember-template-imports v3, but upgrading to v4 didn't change anything here.

[Windvis]

It seems it's not only an issue with the AuToaster component.

AuMainHeader has a similar issue:

var _class, _descriptor, _NavigationNarrator, _class2, _AuMainHeader;
function _initializerDefineProperty(e, i, r, l) { r && Object.defineProperty(e, i, { enumerable: r.enumerable, configurable: r.configurable, writable: r.writable, value: r.initializer ? r.initializer.call(l) : void 0 }); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _applyDecoratedDescriptor(i, e, r, n, l) { var a = {}; return Object.keys(n).forEach(function (i) { a[i] = n[i]; }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function (r, n) { return n(i, e, r) || r; }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a; }
function _initializerWarningHelper(r, e) { throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform."); }
import { action } from '@ember/object';
import { service } from '@ember/service';
import Component from '@glimmer/component';
import { precompileTemplate } from "@ember/template-compilation";
import { setComponentTemplate } from "@ember/component";
let AuMainHeader = (_class2 = (_AuMainHeader = class AuMainHeader extends Component {
  get contactLabel() {
    if (this.args.contactLabel) return this.args.contactLabel;else return 'Contacteer ons';
  }
  get navigationAriaLabel() {
    if (this.args.navigationAriaLabel) return this.args.navigationAriaLabel;else return 'Informatie en instellingen';
  }
  headerLinkFocus() {
    document.querySelector('#main')?.focus();
  }
}, setComponentTemplate(precompileTemplate("\n    <header class=\"au-c-main-header\" ...attributes>\n      <div class=\"au-c-main-header__title-group\">\n        <NavigationNarrator />\n        <AuBrand @link=\"{{@brandLink}}\" />\n        {{#if @homeRoute}}\n          <LinkTo @route={{@homeRoute}} class=\"au-c-main-header__title au-c-main-header__title--link\" {{on \"click\" this.headerLinkFocus}}>\n            {{@appTitle}}\n          </LinkTo>\n        {{else}}\n          <p class=\"au-c-main-header__title\">\n            {{@appTitle}}\n          </p>\n        {{/if}}\n        <a href=\"#content\" class=\"au-c-main-header__skiplink\">\n          Naar de hoofdinhoud\n        </a>\n      </div>\n      <nav aria-label={{this.navigationAriaLabel}} class=\"au-c-main-header__actions\">\n        <ul class=\"au-c-list-horizontal\">\n          {{#if @contactRoute}}\n            <li class=\"au-c-list-horizontal__item\">\n              <AuLink @route={{@contactRoute}} @skin=\"secondary\" @icon={{QuestionCircleIcon}}>\n                {{this.contactLabel}}\n              </AuLink>\n            </li>\n          {{/if}}\n          <li class=\"au-c-list-horizontal__item\">\n            {{yield}}\n          </li>\n        </ul>\n      </nav>\n    </header>\n  ", {
  scope: () => ({
    NavigationNarrator,
    AuBrand,
    LinkTo,
    on,
    AuLink,
    QuestionCircleIcon
  }),
  strictMode: true
}), _AuMainHeader), _AuMainHeader), (_applyDecoratedDescriptor(_class2.prototype, "headerLinkFocus", [action], Object.getOwnPropertyDescriptor(_class2.prototype, "headerLinkFocus"), _class2.prototype)), _class2);
export { AuMainHeader as default };
let NavigationNarrator = (_class = (_NavigationNarrator = class NavigationNarrator extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "router", _descriptor, this);
  }
  get activeRoute() {
    return 'Nieuwe pagina: ' + this.router.currentRouteName;
  }
}, setComponentTemplate(precompileTemplate("\n    <div aria-live=\"assertive\" aria-atomic=\"true\" aria-relevant=\"all\">\n      <span class=\"au-u-hidden-visually\">\n        {{this.activeRoute}}\n      </span>\n    </div>\n  ", {
  strictMode: true
}), _NavigationNarrator), _NavigationNarrator), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "router", [service], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class);

[ef4]

The presence of TS in the addon (even if not this file) would cause the typescript transform to get added to babel. So this is almost certainly another example of babel-plugin-transform-typescript removing the import before we can put it into scope: () => ({ fn }).

The expectation after embroider-build/embroider#2120 would be that both babel-plugin-ember-template-compilation and babel-plugin-transform-typescript should be running together when the v1 addon is rewritten to v2, and babel-plugin-ember-template-compilation is designed to run everything in pre so that it can go first.

Does the bug go away if you convert this component from gjs to gts?

[ef4]

Also, double-check what's different in the dependencies between the working test app here in the embroider scenarios vs your real app that's failing. Any of @embroider/compat or babel-plugin-ember-template-compilation or ember-template-imports being older in the app would explain this.

[Windvis]

Also, double-check what's different in the dependencies between the working test app here in the embroider scenarios vs your real app that's failing. Any of @embroider/compat or babel-plugin-ember-template-compilation or ember-template-imports being older in the app would explain this.

@ef4 Thanks, I forgot about babel-plugin-ember-template-compilation. It seems our app's lock file still contained v2.2.0 even after updating the embroider and ember-template-tag deps to latest. Updating to v2.3.0 seems to have resolved the issue 🎉.