Skip to content

DEV: Modernize the remaining of the post stream to Glimmer components #32653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 90 commits into from
Jun 5, 2025

Conversation

megothss
Copy link
Contributor

@megothss megothss commented May 8, 2025

No description provided.

megothss added 30 commits May 8, 2025 17:11
Replaced the old scrolling post stream with a new `PostStream` Glimmer component when `useGlimmerPostStream` is enabled. Added conditional rendering for loading indicators and integrated the actions for post loading.

Loading more posts above and below is working, although the scroll tracking is not implemented yet.
The topic route template now checks which version of the PostStream is enabled in the settings and uses the correct component.
Replaced private method prefixes and streamlined debounce calls for improved clarity. Introduced private fields for better encapsulation and removed unused properties to reduce clutter. Adjusted SLACK_FACTOR and updated relevant calculations for more precise screen tracking.
Reorganized method placements, renamed a method for clarity, and corrected parameter usage in the `updateIntersectionObservers` function. These changes improve code readability and maintainability while preserving existing functionality.
Ensure methods properly handle cases where there are no visible posts. Prevents errors by adding null checks and skipping unnecessary observer updates. Improves resilience of post tracking logic during edge cases.
Introduce bottom eyeline tracking for improved scroll position monitoring for the posts in the bottom of the page in the post-stream component. Added a debug mode for visualizing the eyeline position, along with various cleanup and restructuring to support this feature. Updated event handling, intersection observers, and DOM manipulation accordingly.
Fixes an issue where the post observer was not properly re-attached when bottom eyeline tracking was disabled. Ensures the observer's state is correctly updated to avoid inconsistent behavior during scroll events.
Debugging `console.log` statements used for development purposes have been removed to clean up the code.
This change ensures touchmove events trigger the same scroll logic across devices, improving consistency in user interactions. The corresponding cleanup logic for touchmove was also added to ensure proper event listener removal.
Adjusted the scrollable area and progress calculation to handle scenarios where the viewport height exceeds the document height or results in a non-scrollable area. This ensures accurate progress tracking and prevents division by zero errors.
This commit introduces logic to enable bottom eyeline tracking only when the current post's height exceeds the viewport height. It also optimizes the scrolling tracking behavior by removing unnecessary debounce usage, improving performance and clarity. These changes ensure better handling of large posts and enhance user experience during scrolling.
This commit introduces a more robust system for eyeline tracking, ensuring proper handling when the current post height exceeds the viewport. The changes streamline debounce logic, improve observer interactions, and make the code more modular for maintainability.
Replaced `&&` with `||` to ensure the condition checks each boundary independently. This prevents incorrect behavior when only one of the boundaries changes.
Ensure the current post remains tracked only if it is visible on screen. Adds a check to confirm the current post is within on-screen boundaries, improving accuracy during scrolling.
Updated event listeners to use new handler methods `#postedTriggered` and `#scrollTriggered`. This improves readability and ensures consistent handling of post stream actions like jumping to posts and responding to refresh events.
@github-actions github-actions bot removed chat PRs which include a change to Chat plugin i18n PRs which update English locale files or i18n related code migrations-tooling PR which includes changes to migrations tooling labels Jun 3, 2025
megothss and others added 15 commits June 3, 2025 20:47
This update ensures the topic ID is passed and tracked in post-stream viewport-related modifiers. The implementation consumes tracked arguments to handle cleanup when their values change, improving stability and memory management. Additional clean-up steps for instance properties and collections have been added for robustness.
Update `preventCloak` API to support enabling/disabling cloaking for posts dynamically. Refactor `cloakingPrevented` structure to reset its state when the topic changes, ensuring cleanup on topic transitions
Replaced Symbol-based approach with a WeakMap to store post model references. This prevents memory leaks by ensuring references are automatically cleaned up when DOM elements are removed. Updated all relevant methods to use the new WeakMap implementation.
Refined comments and naming to enhance code clarity and maintainability. Fixed typographical errors and extended functionality in the intersection observer callback to better track eyeline position and update the visible post state effectively.
Co-authored-by: David Taylor <david@taylorhq.com>
The touchmove event listener was unnecessary as scrolling is already handled by the scroll event. This simplification reduces event registration overhead and improves code maintainability.
Introduce a new `@trackedArray` decorator to enable seamless integration with `TrackedArray`. Added comprehensive tests ensuring proper behavior, including initialization, setting, and tracking changes to arrays. This improves reactivity and ensures robust handling of array mutations.
Replace manual and legacy state management of `selectedPostIds` with `@trackedArray` for improved reactivity and performance. Simplifies the code by removing unnecessary `set` calls and ensures better integration with tracked properties.
This modifier is no longer necessary as the Glimmer and widget post stream now handles the application of the `sticky-avatar` class directly.

Cleanup includes deleting the modifier implementation and removing its usage in topic templates.
This commit introduces an acceptance test to verify the reactivity of the `topicPageQueryParams` property in the post stream component. The tests ensure that filtering replies updates the `replies_to_post_number` parameter correctly. Removed outdated TODO comment as tests are now implemented.
@megothss megothss requested a review from davidtaylorhq June 4, 2025 20:47
@@ -73,6 +74,10 @@ export default class TopicController extends Controller {

@tracked model;

@tracked multiSelect = false;
@tracked hasScrolled = null;
@trackedArray selectedPostIds = [];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this array is reassigned, but never mutated?

If that's true, then the field can just be @tracked. No need for the extra cost of making it a TrackedArray instance.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is mutated when selecting posts.

togglePostSelection(post) {
const selected = this.selectedPostIds;
selected.includes(post.id)
? selected.removeObject(post.id)
: selected.addObject(post.id);
}

I thought I was crazy. 😆

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting! Since we're converting to a TrackedArray, can we also change this place to use native array functions instead of the (deprecated) Ember array prototype extensions?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reverted the PR changing this because the computed properties referencing this.selectedPostIds.length are not updated when the array changes.

I'll open a follow-up PR converting them to native getters

megothss added 5 commits June 5, 2025 17:09
Extracted common logic for handling array conversions into a new helper function `ensureTrackedArray`. This improves readability, reduces duplication, and centralizes error handling for consistent behavior across the codebase.
Moved the addition of the "codeblock-buttons" class earlier in the code to ensure it is applied before the wrapper element is inserted. This may prevent potential layout or rendering issues caused by the order of operations.
…ing indicator is displayed

Updated the sticky timeline's top offset for better alignment. Replaced hardcoded variable `$topic-avatar-width` with CSS variable for consistency and adjusted the loader width to account for transparent borders, ensuring layout accuracy.
Replaced Ember-specific methods with standard JavaScript array methods for better readability and consistency. This improves maintainability and aligns the code with modern JavaScript practices.
@megothss megothss merged commit efd01c1 into main Jun 5, 2025
16 checks passed
@megothss megothss deleted the dev/glimmer-post-stream-phase-2 branch June 5, 2025 22:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants