Incompatible types on yielded block

[MichalBryxi]

Assuming following code:

import Component from '@glimmer/component';
import { service } from '@ember/service';
import type SettingsService from 'the-mountains-are-calling/services/settings';
import { firebaseQuery } from 'the-mountains-are-calling/builders/firebase';
import { use, cell, resource, type Reactive } from 'ember-resources';
import { Cell } from '@starbeam/universal';

export type ClockNakedSignature = {
  percentage: Cell<number>;
  counter: Cell<number>;
};

export type ClockSignature = Reactive<ClockNakedSignature>;

interface Signature {
  Args: {};
  Blocks: {
    default: [ClockNakedSignature];
  };
  Element: HTMLDivElement;
}

const Clock = resource(({ on }) => {
  const counter = cell(0);
  const percentage = cell(0);

  return { percentage, counter };
});

export default class Refresher extends Component<Signature> {
  clock = use(this, Clock);

  <template>{{yield this.clock}}</template>
}

The line clock = use(this, Clock); reports following error:

Public property 'clock' of exported class has or is using name 'CURRENT' from external module "/Users/michal/pudr.com/the-mountains-are-calling/node_modules/.pnpm/ember-resources@7.0.0_@glimmer+component@1.1.2_@glimmer+tracking@1.1.2_@glint+template@1.4.0_ember-source@5.6.0/node_modules/ember-resources/declarations/index" but cannot be named.glint(4029)

And line <template>{{yield this.clock}}</template> reports following error:

Argument of type 'Reactive<{ percentage: Cell<number>; counter: Cell<number>; }>' is not assignable to parameter of type 'ClockNakedSignature'.
  Type 'Reactive<{ percentage: Cell<number>; counter: Cell<number>; }>' is missing the following properties from type 'ClockNakedSignature': percentage, counterglint(2345)

[MichalBryxi]

One more note that might be important: With the signatures above, the use of the propert is also complicated. TS hints that:

    <Refresher as |r|>
      {{log r.current.percentage.current}}
    </Refresher>

is incorrect because:

But the .current is IMO correct. The code above holds the correct value I'd expect, for the .percentage property.

[NullVoxPopuli]

Some questions:

• why use a class component if in gjs? you can {{yield Clock}} (is this sample code simplifying a bigger problem?)

As I look in to this, of note, you may find the @use decorator better for classes and yielding, as the use function does return a Reactive, and I was confused when responding on my phone in Discord.

I've made a PR for fixes here: #1129 -- questions and review would be most appreciated!

[MichalBryxi]

Yes, I cut out non-interesting parts. The clock itself needed access to a service, so I believe it needs to live inside a component?