Implement this-fallback-plugin

[gitKrystan]

How It Works

The addon registers an ember-cli-htmlbars plugin that traverses the nodes in your Ember templates and transforms them using the following logic:

For each PathExpression with a VarHead that is NOT in the local template scope:

• If it is within node.params or a node.hash value for a CallNode (MustacheStatement | BlockStatement | ElementModifierStatement | SubExpression):

  Prefix the head with this, making it a ThisHead ("expression fallback").

  For example:

  {{! before }}
  {{global-helper property}}
  
  {{! after }}
  {{global-helper this.property}}

• If is the path for a MustacheStatement with NO params or hash:

  • If there is a tail:

    Prefix the head with this, making it a ThisHead ("expression fallback").

    {{! before }}
    {{property.value}}
    
    {{! after }}
    {{this.property.value}}

  • If there is NO tail:

    • If the MustacheStatement is the child of an AttrNode with a name NOT starting with @:

      Wrap the invocation with the tryLookupHelper helper to determine if it is a helper at runtime and fall back to the this property if not ("ambiguous attribute fallback").

      {{! before }}
      <Parent id={{property}} />
      
      {{! after }}
      {{#let (hash property=(tryLookupHelper "property")) as |maybeHelpers|}}
        <Parent
          id={{(if
            maybeHelpers.property (maybeHelpers.property) this.property
          )}}
        />
      {{/let}}

    • Otherwise:

      Wrap the invocation with the isComponent helper to determine if it is a component at runtime and invoke it as a component if so. If not, wrap the invocation with the tryLookupHelper helper to determine if it is a helper ad runtime and fall back to the this property if not ("ambiguous statement fallback").

      {{! before }}
      {{property}}
      
      {{! after }}
      {{#if (isComponent "property")}}
        <Property />
      {{else}}
        {{#let (hash property=(tryLookupHelper "property")) as |maybeHelpers|}}
          {{(if maybeHelpers.property (maybeHelpers.property) this.property)}}
        {{/let}}
      {{/if}}

Caveats

Runtime implications

The isComponent and tryLookupHelper helpers have runtime implications that may have performance impacts. Thus, we recommend relying on this addon only temporarily to unblock 4.0+ upgrades while continuing to migrate away from reliance on the Property Fallback Lookup feature.

Embroider compatibility

In the "ambiguous attribute fallback" and "ambiguous statement fallback" cases shown above, we fall back to dynamic resolution at runtime to determine if the contents of the mustache statement point to a helper, a component, or a property on this. This technique is fundamentally incompatible with Embroider "optimized" mode, specifically the staticHelpers and staticComponents configs (and thus, splitAtRoutes), which requires that helpers are resolvable at build-time.

Thus, in these cases, we log a warning to ember-this-fallback-plugin.log. If you wish to use Embroider's "optimized" mode, we recommend manually updating the code in these cases to either:

{{! For a known property on `this`. }}
{{this.property}}

or

{{! For a known global helper. }}
{{(property)}}

or

{{! For a known global component. }}
<Property />

In the future, we could resolve this incompatibility if we had access to Embroider's static resolution.

[gitKrystan]

I tried vitest first but the types in the current version are whack and I got impatient waiting for them to fix it.

[wycats]

Interesting! You found the types in jest to be better than vitest?

[gitKrystan]

Not really. The latest vitest version had a bunch of type bugs in it (I found related issues but don't remember what it was now) and rather than wait for them to fix and ship, I just switched to jest since the API is basically the same. Might be fixed now. I just put this comment here bc I knew you were going to suggest trying vitest. :-P

[gitKrystan]

I'm not sure if these re-exports are:

1. used, or
2. correct

[gitKrystan]

IDK how I would have tested this w/o ember-template-imports...fun stuff

[gitKrystan]

I only use this for types. devDependency?

[gitKrystan]

only used in tests