[FEATURE array-helper] Implement array helper RFC #318

[josemarluedke]

This implements the array helper.
RFC: emberjs/rfcs#318

Closes #17052.

[rwjblue]

Looking good! I left some pretty nit-picky comments inline (sorry about that), but also would like to see a few more tests:

• Confirming that passing an array result into a component invocation, and that component using {{#each properly rerenders/updates as items change
• Checking that the output of array follows the "immutable" style by having a component that we control which is passed an array and we inspect it for === equality.

[josemarluedke]

@rwjblue I have applied the requested changes as well added a few more tests.

Please take another round of review.

[rwjblue]

LGTM, I also pinged @mmun for review...

[chancancode]

Should we debug freeze the array? The empty case is frozen like hashes iirc

[rwjblue]

Should we debug freeze the array? The empty case is frozen like hashes iirc

Yes, probably.

[chancancode]

Unfortunately debug freezing is not going to be super easy. We can merge this as-is and do a follow up PR for that. I also just realized that the current version of the glimmer code seems to always return a new array/object even for the empty case.

We can do something like:

class DebugFreezeReference<T> implements PathReference<T> {
  constructor(private inner: PathReference<T>) {
    this.tag = inner.tag;
  }

  value(): T {
    return Object.freeze(this.inner.value());
  }

  get(path: string): PathReference<Opaque> {
    return this.inner.get(path); // or should this be `new DebugFreezeReference(this.inner.get(path))`?
  }
}

function array(_vm: VM, args: Arguments): PathReference<Opaque[]> {
  return new DebugFreezeReference(args.positional.capture());
}

function hash(_vm: VM, args: Arguments): PathReference<Dict<Opaque>> {
  return new DebugFreezeReference(args.named.capture());
}

[chancancode]

Looking good. Probably should have a few more test testing "capturing" the array into JS values and make sure it is correct. Something like this:

let captured;

this.registerHelper('capture', function([array]) {
  captured = array;
  return "captured";
});

this.render(`{{capture (array ...)}}`);

assert.deepEqual(captured, [...]);

this.runTask(this.set(...));

assert.deepEqual(captured, [...]);

...

Basically what you already did in the last test, but more coverage around the actual values, and that it updates correctly, etc. You can probably just merge that into your last test since it's already doing similar things.

[josemarluedke]

I have addressed the last few comments from @chancancode. This should be ready for another review.

[chancancode]

@josemarluedke have you tried the indentation style in #17054 (comment)? If the linter prefer you write it like this, it's nbd

[josemarluedke]

@chancancode Yes I did, I changed most of the code to that indentation style. I did not change all because some already had a line break due to component args. But if you do think I should change that as well, I'm happy to do so.

[rwjblue]

Thank you!