Fix Lazy Initialization

[NullVoxPopuli]

Problem: @tracked is eagerly consumed when we don't want it to be

Broken:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

let _id = 0;

function id() {
  return _id++;
}

/**
  *
  * Expected: 1, 2, 3, 4, 3, 4, 5, 6, 7
  * Actual: 1, 2, 3, 4, <Error>
  *
  * Observation:
  *  - Sub's constructor may be entangled with Outer#collection
  *
  */

class Sub extends Component {
  constructor(...args) {
    super(...args);
    console.log(3);
    this.args.register(id());
  }
  <template></template>
}

class Outer extends Component {
  @tracked collection = [];

  register = (id) => {
    console.log(4);
    this.collection.push(id);
    this.collection = this.collection;
  };

  <template>
    {{log 1}}
    {{yield (component Sub register=this.register)}}
    {{log 6}}

    {{! (read collection the first time) }}
    {{log 7}}
    {{#each this.collection as |item|}}
      {{item}}
    {{/each}}
  </template>
}

<template>
  <Outer as |Sub|>
    {{log 2}}
    <Sub />
    <Sub />
    {{log 5}}
  </Outer>
</template>

Works:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import {
  createStorage,
  getValue,
  setValue,
} from 'ember-tracked-storage-polyfill';

let _id = 0;

function id() {
  return _id++;
}

/**
  *
  * Expected: 1, 2, 3, 4, 3, 4, 5, 6, 7
  * Actual: 1, 2, 3, 4, 5, 6, 7
  *
  */

class Sub extends Component {
  constructor(...args) {
    super(...args);
    console.log(3);
    this.args.register(id());
  }
  <template></template>
}

class Outer extends Component {
  _collection;
  get collection() {
    if (!this._collection) {
      this._collection = createStorage([]);
    }

    return getValue(this._collection);
  }
  set collection(value) {
    setValue(this._collection, value);
  }

  register = (id) => {
    console.log(4);
    this.collection.push(id);
    this.collection = this.collection;
  };

  <template>
    {{log 1}}
    {{yield (component Sub register=this.register)}}
    {{log 6}}

    {{! (read collection the first time) }}
    {{log 7}}
    {{#each this.collection as |item|}}
      {{item}}
    {{/each}}
  </template>
}

<template>
  <Outer as |Sub|>
    {{log 2}}
    <Sub />
    <Sub />
    {{log 5}}
  </Outer>
</template>

[NullVoxPopuli]

using TrackedArray solves:

  collection = new TrackedArray([]);

  register = (id) => {
    console.log(4);
    this.collection.push(id);
  };

I suspect because TrackedArray also uses createStorage.