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
• Highlight search results
• Support translation through Crowdin
• Add warning/info icons

---

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.

[Copilot]

Pull request overview

This PR introduces a framework-agnostic state management system for a language chooser component, including a core library, Svelte adapter, controller logic, and a demo application using DaisyUI.

Key Changes:

• New state management core library with a Field class for reactive data binding
• Svelte adapter that transforms vanilla view models into Svelte-compatible reactive properties
• Language chooser controller with view models for language selection, script selection, and customization
• Complete Svelte+DaisyUI implementation with demo application

Reviewed changes

Copilot reviewed 63 out of 64 changed files in this pull request and generated 22 comments.

Show a summary per file

File	Description
package.json	Added new workspace entries for state-management and svelte packages
nx.json	Updated project list to include new packages in alphabetical order
eslint.config.mjs	Added ignore patterns for vite/vitest timestamp files and fixed trailing comma
components/state-management/state-management-core/*	Core state management library with Field class, tests, and documentation
components/state-management/state-management-svelte/*	Svelte adapter for transforming view models with reactive fields
components/language-chooser/common/language-chooser-controller/*	Framework-agnostic view models and logic for language selection
components/language-chooser/svelte/language-chooser-svelte-daisyui/*	Svelte components and demo app using DaisyUI for styling
.vscode/extensions.json	Added Prettier extension recommendation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The library name in the vite config should be "@ethnolib/state-management-svelte" but it's currently set to "@ethnolib/find-language". This will cause incorrect naming in the built output.

[Copilot]

Typo in function name: "useLanguageChardViewModel" should be "useLanguageCardViewModel" (missing 'a' in "Card"). This should match the corrected spelling in the function definition.

[Copilot]

Typo in "scipt" should be "script" (note: there's a typo in the test description).

Suggested change

	it("should match scipt selection", () => {
	it("should match script selection", () => {

[Copilot]

Typo in "framworks" should be "frameworks" (note: there's a typo in the README documentation).

[Copilot]

The library name in the vite config should be "@ethnolib/state-management-core" but it's currently set to "@ethnolib/find-language". This will cause incorrect naming in the built output.

[Copilot]

Typo in function name: "useLanguageChardViewModel" should be "useLanguageCardViewModel" (missing 'a' in "Card"). This should match the corrected spelling in the function definition.

[Copilot]

Typo in function name: "submitCustomizeLangaugeModal" should be "submitCustomizeLanguageModal" (missing 'a' in "Language").

Suggested change

	function submitCustomizeLangaugeModal({
	function submitCustomizeLanguageModal({

[Copilot]

Missing dependency: The package depends on "@ethnolib/state-management-core" but this is not listed in the dependencies or devDependencies. Add it to ensure the package can be properly installed and used.

[Copilot]

Missing dependencies: The package depends on "@ethnolib/find-language" and "@ethnolib/state-management-core" but these are not listed in the dependencies or devDependencies. Add them to ensure the package can be properly installed and used.

[Copilot]

Missing dependencies: The package depends on "@ethnolib/find-language", "@ethnolib/language-chooser-controller", and "@ethnolib/state-management-svelte" but these are not listed in the dependencies or devDependencies. Add them to ensure the package can be properly installed and used.