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

Draft
wants to merge 61 commits into
base: main
Choose a base branch
from

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.
megothss added 4 commits May 26, 2025 19:02
Introduce a `highlightTerm` getter in `post-stream` and update `post` components to use the passed property instead of directly accessing `this.search.highlightTerm`. This ensures better encapsulation and consistent data flow between components.
…ost numbers instead of using nth-last-of-type selectors which were producing unexpected results.

Also refactored the loading indicators placement to remove them from the post-stream wrapper div
Updated `disableCloaking` to use the import path for `post-stream` components and added `disableWidgetCloaking` for widgets.
This  avoids potential test issues.
Ensure post nodes are removed from the `observedPostNodes` set before unobserving them with cloaking and viewport observers.
Comment on lines 101 to 106
// restore scroll position on browsers with aggressive BFCaches (like Safari)
window.onpageshow = function (event) {
if (event.persisted) {
DiscourseURL.routeTo(this.location.pathname);
}
};
Copy link
Member

Choose a reason for hiding this comment

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

I think this was a bugfix for old safari

davidtaylorhq and others added 24 commits May 27, 2025 18:26
Updated the CSS selector in the composer test to correctly target the last topic post. This ensures the test reliably checks the intended element.
Corrected `lastPostedAt` to `last_posted_at` to match the expected property format.
Removed unused tracking of on-screen boundaries to streamline the component logic. Replaced `if` with `unless` in template conditionals for better readability and consistency.
The sticky-avatar class is now conditionally applied in components for non-mobile views, preparing for future Glimmer integration.

Added the `widget-post-stream` class to restrict the old modifier logic to widgets.

Added TODOs to remove legacy modifiers once fully transitioned.
Converted plain properties to @Tracked in `post-stream` and `post` models for better reactivity handling. This ensures improved state management and aligns with Ember's tracked properties approach.
Marked existing `post-stream:refresh` and `post-stream:posted` calls with TODOs where the Glimmer Post Stream does not listen to these events.
Delegate the height management to Ember instead of direct DOM manipulations
Ensure all post-stream components have a unique `id` attribute by adding it to `post-stream.gjs` and removing a duplicate definition in `small-action.gjs`. This supports better DOM manipulation and improves accessibility compliance.
Simplify cloaking implementation by introducing `UNCLOAKED_STYLE` and adding explicit `active` and `style` properties to cloaking data. This improves the readability and maintainability of the code, while ensuring consistent styling logic for cloaked posts.
We need to iterate over the visible elements to ensure the cloaking boundaries are correct
Removed unused parameter and debug logs, streamlined method signatures, and updated property references for better consistency and readability. This improves maintainability and reduces unnecessary code clutter.
Reduced the SLACK_FACTOR from 5 to 1 to enhance scrolling responsiveness in the post-stream component. This change ensures smoother user interactions and reduces delays in loading new posts.
The `concat` import was no longer being utilized in the code. This cleanup reduces unnecessary imports, improving code clarity and maintainability.
Wrapping cloaking boundary updates in a requestAnimationFrame prevents performance violations logged by Chrome during fast scrolling. This ensures smoother UX and avoids unnecessary warnings in the console.
Removed the unnecessary `UNCLOAKED_STYLE` constant and directly returned an inactive state without specifying a redundant style. This improves code clarity and reduces unused definitions.
DEBUG_EYELINE was toggled off to disable eyeline position debugging. This ensures the component behaves as intended in production environments without unnecessary debugging outputs.
Extracted event listener and debug element management into reusable private methods for better code modularity and readability.
Replaces post-stream cloaking and scroll tracking implementation with the `PostStreamScrollTracker` modifier. This centralizes the related logic, simplifies observers, and improves code maintainability. Existing functions like `disableCloaking` and `preventCloaking` are preserved but adapted into the new structure.
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