sukima

Ember-intl uses the format.js library under the hood which uses the ICU Message Syntax. This syntax has many provisions for handling different types of interpolated data such as plural and select. But it lacks list formatting. Deep in the ICU Documentation it hints at the correct course of action:

Format the parameters separately (recommended)

You can format the parameter as you need before calling MessageFormat, and then passing the resulting string as a parameter to MessageFormat.

— ICU Messages § Argument formatting

Luckily, JavaScript has a solution for this in the specs with [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc

sukima

/*******************************************/
/* Version 1.0.0                           */
/* License MIT                             */
/* Copyright (C) 2022 Devin Weaver         */
/* https://tritarget.org/cdn/simple-dom.js */
/*******************************************/

/**
 * This micro lib is a compact and simple method to interact with the DOM. It
 * facilitates the query mechanisms that querySelector and querySelectorAll use

sukima

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  flat = {
  	'some.nested.keys': 'flat'
	};
	
	nested = {
    some: {
      nested: {

sukima

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked selected = 2;

  get isSelected() {
    // The {{get}} helper will coerce values to strings. Thus
    // an POJO lookup works even if the type is a number.

sukima

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

export default class extends Component {
  @tracked counter = 0;
  constructor() {
    super(...arguments);
    this.startPolling();
  }
  willDestroy() {

sukima

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

export default class extends Component {
  @tracked counter = 0;
  constructor() {
    super(...arguments);
    this.startPolling();
  }
  willDestroy() {

sukima

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { all, task } from 'ember-concurrency';

export default class ApplicationController extends Controller {
  @task({ maxConcurrency: 10, enqueue: true })
  *fetchCollection(item) {
    return yield fakeResponse({ filename: item.filename });
  }

sukima

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

const tasks = new WeakMap();

class Task {
  @tracked isLoading = true;
  @tracked lastError;
  @tracked result;

sukima

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

export default class extends Component {
  @tracked trackedValue = '';

  get getterResult() {
    return `Working '${this.trackedValue}' as expected.`;
  }
}

sukima

import Controller from '@ember/controller';
import { task, timeout } from 'ember-concurrency';

export default class ApplicationController extends Controller {
  @(task(function * () {
    yield timeout(1000);
  }))
  fooTask;
  
  get isLoading() {