Vanilla state management for language chooser

[gmjgeek]

A framework-agnostic view model for a language chooser.

The goal of this project is to make it easy to create a language chooser in any reactive framework (React, Svelte, Vue, etc).

TODO:

• Support custom language options
• Expose "ready to submit" field
• Implement Svelte adaptor for Field class
• Build a demo Svelte app

---

This change is 

[imnasnainaec]

Reviewable status: 0 of 19 files reviewed, all discussions resolved

---

components/language-chooser/common/language-chooser-controller/src/state-management/field.ts line 14 at r1 (raw file):

   * Callback to update the UI when the field changes
   */
  onUpdate: ((newValue: T) => void) | null = null;

What is onUpdate for? It's never set within this class (or even within this pr). Should it be explicitly public? Or made private and added to the constructor analogously to onUpdateRequested?

---

components/language-chooser/common/language-chooser-controller/src/selectable.ts line 10 at r1 (raw file):

  for (let i = 0; i < items.length; i++) {
    items[i].isSelected.value = i === index;
  }

What about something like

items.forEach((item, i) => {
  item.isSelected.value = i === index;
});

[gmjgeek]

@imnasnainaec Thanks for the feedback. Field.onUpdate is now explicitly public. This callback is a mechanism for updating the UI, which I'm now starting to implement.

[imnasnainaec]

@imnasnainaec reviewed 3 of 34 files at r2, all commit messages.
Reviewable status: 3 of 54 files reviewed, all discussions resolved

---

components/language-chooser/common/language-chooser-controller/src/view-models/language-card.ts line 17 at r3 (raw file):

      if (onSelect) {
        onSelect(isSelected);
      }

This can be shortened to onSelect?.(isSelected);, though that's a stylistic choice.

---

components/language-chooser/common/language-chooser-controller/src/view-models/script-card.ts line 17 at r3 (raw file):

      if (onSelect) {
        onSelect(isSelected);
      }

This can be shortened to onSelect?.(isSelected);, though that's a stylistic choice.

---

components/state-management/state-management-core/src/field.ts line 29 at r3 (raw file):

    if (this._onUpdateRequested) {
      this._onUpdateRequested(value, oldValue);
    }

This can be shortened to this._onUpdateRequested?.(value, oldValue);, though that's a stylistic choice.

---

components/state-management/state-management-core/src/field.ts line 41 at r3 (raw file):

  public set value(value: T) {
    try {
      if (this.onUpdate) this.onUpdate(value);

This can be shortened to this.onUpdate?.(value);, though that's a stylistic choice.

[gmjgeek]

The Svelte demo app is now functional and almost bug-free when run on the Vite development server. However, minification will likely break the app in production. Still making some changes.