[PLAYER-92] refacto components #163

jparez · 2026-01-05T14:31:19Z

Description

Migrate legacy custom components to Web Components.

This PR refactors the legacy component pattern to native Web Components, improving maintainability and leveraging browser standards.

New Web Components

GmTextInput: Text input component with validation, min/max constraints, and error messaging
- Replaces createTextInput factory
- Supports regexFilter for input blocking and regexValidField for validation
- Min/max validation with optional blocking via block-invalid attribute
- Automatic error message generation from constraints
GmSlider: Range slider component
- Replaces createSlider factory
- Dispatches gm-slider-input and gm-slider-change events
GmSwitch: Toggle switch component
- Replaces createSwitch factory
- Dispatches gm-switch-change event
GmDropdown: Select dropdown component
- Replaces createDropDown factory
- Supports dynamic option updates and keyboard navigation
GmChip: Chip tag

Updated Plugins

GPS: Migrated to use for latitude, longitude, altitude, and speed inputs with min/max validation
Battery: Migrated to use with blocking validation for charge level (0-100)
Network, IOThrottling, Identifiers, Phone, BasebandRIL: Updated to use new web components

Technical Details

All components are registered as custom elements (e.g., customElements.define('gm-text-input', GmTextInput))
Maintains backward compatibility with existing plugin APIs via legacy methods (getValue(), setValue(), etc.)
Uses native HTML attributes and properties for configuration
Custom events follow naming convention: gm-* (e.g., gm-input, gm-blur, gm-slider-change)

Migration Benefits

Standards-based: Uses native browser APIs instead of custom factories
Encapsulation: Better component isolation and lifecycle management
Declarative: Components can be used directly in HTML with attributes
Maintainability: Clearer structure with class-based components
Performance: Leverages native browser optimizations

Copilot

Pull request overview

This pull request migrates legacy custom component factories to native Web Components, improving maintainability and leveraging browser standards. The refactor introduces six new custom elements (GmTextInput, GmSlider, GmSwitch, GmDropdown, GmChip, GmProgressBar) and updates all consuming plugins to use these components.

Changes:

Introduced 6 new Web Components as custom elements replacing factory pattern components
Migrated 10+ plugins (GPS, Battery, Network, Phone, Identifiers, IOThrottling, BasebandRIL, FingerPrint, Clipboard, GAPPSInstall) to use new components
Updated test files to work with new event-based component APIs
Added Babel parser configuration for ESLint to support private class fields
Updated README with improved token authentication documentation

Reviewed changes

Copilot reviewed 38 out of 40 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/components/GmTextInput.js	New text input Web Component with validation and min/max constraints
src/components/GmSlider.js	New range slider Web Component
src/components/GmSwitch.js	New toggle switch Web Component
src/components/GmDropdown.js	New select dropdown Web Component
src/components/GmChip.js	New chip/tag Web Component
src/components/GmProgressBar.js	New progress bar Web Component
src/plugins/*.js	Updated plugins to use new Web Components
tests/unit/*.test.js	Updated tests to use new event-driven API
package.json	Added Babel dependencies for ESLint
.eslintrc.json	Configured Babel parser for private class fields
vitest.config.mjs	Added path alias for imports
src/scss/components/*.scss	Updated styles for new components
README.md	Enhanced token authentication documentation

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

src/components/GmSwitch.js

src/plugins/Battery.js

src/components/GmTextInput.js

src/plugins/Battery.js

src/components/GmTextInput.js

src/components/GmDropdown.js

src/components/GmSlider.js

src/components/GmSwitch.js

src/plugins/GAPPSInstall.js

src/components/GmProgressBar.js

src/components/GmSlider.js

src/components/GmSwitch.js

tests/unit/fingerprint.test.js

tests/unit/network.test.js

src/components/GmDropdown.js

src/components/GmChip.js

src/components/GmTextInput.js

tests/unit/phone.test.js

src/plugins/Battery.js

Co-authored-by: Julien Maneyrol <45173285+jmaneyrol69@users.noreply.github.com>

In order, to address PR comments - **GmSlider**: Improve min/max attribute validation and value clamping logic. - **GmSwitch**: Fix infinite loop in checked setter, correctly handle 'disabled' attribute, and refactor using #updateUI pattern. - **GmDropdown**: - Extract rendering logic to #render method. - Simplify items setting logic (remove redundant length check). - Clarify supported item types in JSDoc. - **GmChip**: - Remove default 'success' type fallback to preventing masking issues. - Implement #updateUI pattern to fix attribute/setter recursion risks. - **GmTextInput**: - Split #updateUI into specific #updateAppendText and #updateUnitText methods. - Simplify 'strict-range' logic to be more generic. - **Battery Plugin**: Remove redundant bounds checking (Math.min/max) in favor of GmTextInput internal validation. - **Docs**: Correct API categorization in README.md.

Event send after each keystroke was 'change' instead of 'input' - **GmTextInput**: Stop dispatching 'change' event on every keystroke. It now correctly dispatches 'input' on keystroke and 'change' only on commit (blur/enter). - **Plugins**: Update all plugins relying on real-time feedback (Battery, GPS, Phone, Identifiers, IOThrottling, BasebandRIL) to listen to 'gm-text-input-input' instead of 'gm-text-input-change'. This separates the concerns of real-time validation (input) vs committed value (change) and eliminates duplicate event firing.

…om events µIn order to make integration test instead of unit test

caarmen

Cool to see this standardization of the different components! 🧩

Huge thanks to you Jeremy for the time you invested in the pair review 🙏🏻

chore: migrate ESLint to @babel/eslint-parser

2313060

jparez requested a review from caarmen January 5, 2026 14:31

jparez marked this pull request as draft January 12, 2026 17:23

refactor(GmProgressBar): migrate to standard properties and cleanup

1722c02

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch 2 times, most recently from bc3b049 to 7386fee Compare January 13, 2026 08:27

refactor(GmSlider): migrate to standard properties and cleanup

990bd06

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch from 7386fee to c40ae3f Compare January 13, 2026 08:30

jparez requested a review from Copilot January 13, 2026 08:31

Copilot started reviewing on behalf of jparez January 13, 2026 08:31 View session

jparez marked this pull request as ready for review January 13, 2026 08:34

Copilot AI reviewed Jan 13, 2026

View reviewed changes

jparez marked this pull request as draft January 13, 2026 09:17

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch 2 times, most recently from b4ea2dc to 353b8f9 Compare January 13, 2026 10:44

jparez added 2 commits January 13, 2026 12:09

refactor(GmSwitch): migrate to standard properties and cleanup

ae78e3c

refactor(GmDropdown): migrate to standard properties and cleanup

0c6aa7c

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch from 353b8f9 to 68c7a82 Compare January 13, 2026 11:09

jparez marked this pull request as ready for review January 13, 2026 11:13

caarmen reviewed Jan 14, 2026

View reviewed changes

caarmen reviewed Jan 15, 2026

View reviewed changes

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch 3 times, most recently from 9ee7468 to b3fea28 Compare January 19, 2026 12:40

jparez and others added 5 commits January 21, 2026 17:44

refactor(GmChip): migrate to standard properties and cleanup

d1e4261

refactor(GmTextInput): migrate to standard properties and cleanup

35451c4

chore: delete remaining custom component file

209b826

docs(README): enhance SaaS token flow documentation

4c47b73

docs(readme): clarify wording and improve readability

398828f

Co-authored-by: Julien Maneyrol <45173285+jmaneyrol69@users.noreply.github.com>

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch from b3fea28 to b7d73c5 Compare January 21, 2026 16:44

jparez added 3 commits January 22, 2026 10:31

test: update to simulate click and keystroke instead of dispatch cust…

7371ded

…om events µIn order to make integration test instead of unit test

jparez force-pushed the dev/PLAYER-92-refacto-components-2 branch from b7d73c5 to 7371ded Compare January 22, 2026 09:32

caarmen approved these changes Jan 22, 2026

View reviewed changes

jparez merged commit 4c545c9 into epic/player-90-91-92-50 Jan 22, 2026
1 check passed

jparez deleted the dev/PLAYER-92-refacto-components-2 branch January 22, 2026 09:39

[PLAYER-92] refacto components #163

[PLAYER-92] refacto components #163

Uh oh!

Conversation

jparez commented Jan 5, 2026

Description

New Web Components

Updated Plugins

Technical Details

Migration Benefits

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caarmen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants