Upgrade from Ember.js 3.24 to 6.4 (current LTS) #303
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Replace deprecated htmlbars-inline-precompile with ember-cli-htmlbars import in all test files
Remove @Tracked decorator from array properties and convert EmberArray methods to standard JavaScript for better compatibility with modern Ember reactivity
Remove @Tracked from arrays and convert EmberArray methods (sortBy, mapBy, uniq, filterBy, findBy, pushObject, removeObject) to standard JavaScript methods
Convert remaining EmberArray lastObject calls to standard JavaScript array.at(-1) method
Convert findBy calls to standard find() for properties that were changed from EmberArray to standard arrays (sockethubChannelId, sockethubPersonId, server.hostname, account, name, id)
Replace filterBy, findBy, and pushObject with standard array methods in components and routes. Keep EmberArray in space.js model as it doesn't conflict with reactivity.
Ember 6 requires explicit template-only component registration for components that previously had only templates
Remove 'new' keyword - htmlSafe is a function, not a constructor in modern Ember
Replace deprecated TextField import with Glimmer component and native input element. Convert from class-based to modern component pattern with template.
Add explicit template-only component registration for flash-message-error, notification-topic-change, and settings-container components for Ember 6 compatibility
Update createComponent helper to work with modern Glimmer components by directly instantiating component class. Update test calls to wrap arguments in args object as expected by Glimmer components.
…vaScript - Replace pushObject() with push() - Replace findBy() with find() - Replace filterBy() with filter() - Replace lastObject with at(-1) All unit tests for coms, base-channel, and sockethub-xmpp now pass.
…to chore/upgrade_ember
XMPP accounts currently don't have a "server" property
raucao
changed the title
We should get rid of Sass entirely soon
Fixes JS deprecation errors
- Created 6 custom modifiers to handle different use cases: * keyboard-shortcuts: Manages keyboard shortcut binding/unbinding * intersection-observer: Replaces scrolling-observer logic * periodic-update: Handles scheduled updates with cleanup * on-render: Executes callbacks after element renders * on-channel-change: Reacts to channel prop changes * on-users-change: Reacts to users prop changes - Refactored components to use new modifiers: * channel-nav: Uses keyboard-shortcuts modifier * message-input: Removed will-destroy, uses event handlers * scrolling-observer: Now thin wrapper around intersection-observer * date-headline: Uses periodic-update modifier * channel-container: Uses on-render and on-channel-change * user-list: Uses on-users-change modifier - All deprecated did-insert, did-update, will-destroy modifiers removed - Proper lifecycle management with cleanup functions - All tests passing
- Added *.js, *.mjs, *.cjs to .prettierignore - ESLint handles JavaScript formatting with space-before-function-paren rule - Fixed SCSS file formatting with Prettier
- Removed unused channel/users/messageDate arguments from modifier calls - Changed scrolling-observer to use templateOnly() component - Modifiers now only receive the parameters they actually use
- Document Ember run loop migration to native browser APIs - Document built-in form components migration with on-update modifier - Document render modifiers migration to custom modifiers - Document code formatting configuration changes - Update test status: all tests now passing - Add notes on modern Ember patterns used
- Removed completed items (no deprecation warnings, gestures re-added, pod cleanup done) - Focus on future maintenance and monitoring
|
Ready for review! Just FYI, this branch includes the fix from #301. Let's see if GitHub picks up on it once merged. |
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the Ember.js framework from version 3.24 to 6.4 LTS, modernizing the application's dependencies and codebase to align with current Ember standards. The upgrade includes refactoring components to use modern Glimmer patterns, replacing deprecated APIs, and updating development tooling.
Key Changes:
- Modernized component architecture by migrating from classic Ember components to Glimmer components with template-only components where appropriate
- Updated service injection syntax from
inject as serviceto the newerservicedecorator - Replaced deprecated Ember array methods (
pushObject,filterBy) with native JavaScript equivalents - Updated build configuration and tooling (ESLint, Prettier, Stylelint, CI workflows)
Reviewed Changes
Copilot reviewed 32 out of 447 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/components/flash-message-error.js | Added new template-only component definition |
| app/components/date-headline/component.js | Removed old component file as part of restructuring |
| app/components/date-headline.js | Simplified component by removing scheduled updates and config dependency |
| app/components/date-headline.hbs | Updated to use new custom modifier for periodic updates |
| app/components/channel-nav.js | Modernized service injection and replaced array helpers with native methods |
| app/components/channel-nav.hbs | Simplified keyboard shortcuts binding and updated icon component references |
| app/components/channel-input-field.js | Converted from TextField extension to standard Glimmer component |
| app/components/channel-input-field.hbs | Added explicit template for input field with event handling |
| app/components/channel-container.js | Updated to use ember-lifeline utilities and Hammer.js import |
| app/components/channel-container.hbs | Replaced lifecycle modifiers with custom modifiers |
| app/components/button-submit.js | Added new template-only component definition |
| app/components/add-chat-account*.js | Updated service injection and array methods |
| app/components/add-chat-account*.hbs | Replaced Input helper with native HTML inputs and custom modifiers |
| app/components/account-list.js | Updated service injection syntax |
| app/components/account-list.hbs | Updated icon component reference |
| app/app.js | Added deprecation workflow configuration for development |
| README.md | Updated documentation to reflect current Ember CLI standards |
| Configuration files | Updated linting, formatting, and CI configuration |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
🤣 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I think I have everything working with Ember 6 now. See doc/ folder for some documentation about the upgrades.
I'll refactor some more code, so that all legacy API usage is eliminated before merging:
closes #302