Why are fetures `| undefined` ?

[NullVoxPopuli]

I'm using ember-container-query v4-beta.1

file text here

// @ts-ignore
import { hash } from '@ember/helper';

import { ContainerQuery, aspectRatio } from 'ember-container-query';

import constrainVertically from 'limber/modifiers/constrain-vertically';

import type { TOC } from '@ember/component/template-only';

interface Signature {
  Blocks: {
    default: [boolean];
  }
}

export const Orientation: TOC<Signature> =
<template>
  <ContainerQuery
    @features={{hash isVertical=(aspectRatio max=1.2)}}
    {{! grid forces all the contents to take up all available vertical space }}
    class='grid'
    {{constrainVertically}}
    as |query|
  >

    {{#let query.features.isVertical as |isVertical|}}

      {{yield isVertical}}

    {{/let}}

  </ContainerQuery>
</template>;

I would assume that because isVertical is defined and passed to @features, that it would always be present in the yielded value?

[NullVoxPopuli]

This seems like a reasonable work-around:

        {{yield (Boolean isVertical)}}

but 🤷

[ijlee2]

I think it's safer (i.e. this addon would depend less on the implementation details of a modifier and Ember's rendering cycle) if we define the type of each query result (which I also called "feature") as boolean | undefined.

Initially, the tracked property queryResults is undefined. After the {{container-query}} modifier does its computations, the tracked property is updated and takes on the type of QueryResults. In short, there's a brief moment where isVertical (in your example) is undefined.

I checked that this brief moment exists by creating a helper to log the value:

/* app/helpers/track-query-results.js */

const TrackQueryResultsHelper = helper((positional) => {
  console.log('Query result: ' + positional[0]);
});

export default TrackQueryResultsHelper;

<ContainerQuery
  ...
>
  {{track-query-results isVertical}}
</ContainerQuery>

[NullVoxPopuli]

Excellent! Thanks for the explanation!