Use mixins and decorators for scroll restoration and tippy cleanup (#…

…2415)

* Enable @babel/plugin-proposal-decorators

Dependency already exists

* Use tippy.js delegate addon, cleanup tippy instances from a mixin.

The delegate addon creates tippy instances from mouse and touch events
with a matching `event.target`. This is initially significantly cheaper
than creating all instances at once. The addon keeps all created tippy
instances alive until it is destroyed itself.

`tippyMixin` destroys the addon instance after every render, as long as
all instances are hidden. This drops some tippy instances that may have
to be recreated later (e.g when the mouse moves over the trigger again),
but is otherwise fairly cheap (creates one tippy instance).

* Restore scroll positions when resource loading settles.

The history module generates a random string (`location.key`) for every
browser history entry. The names for saved positions include this key.
The position is saved before a route component unmounts or before the
`location.key` changes.

The `scrollMixin` tires to restore the scroll position after every
change of `location.key`. It only does so after the first render for
which the route components `loadingSettled()` returns true.

Things like `scrollToComments` should only scroll when `history.action`
is not "POP".

* Drop individual scrollTo calls

* Scroll to comments without reloading post

---------

Co-authored-by: SleeplessOne1917 <[email protected]>

.babelrc

@@ -13,7 +13,12 @@
     ["@babel/typescript", { "isTSX": true, "allExtensions": true }]
   ],
   "plugins": [
-    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
+    [
+      "@babel/plugin-transform-runtime",
+      // version defaults to 7.0.0 for which non-legacy decorators produce duplicate code
+      { "version": "^7.24.3" }
+    ],
     ["babel-plugin-inferno", { "imports": true }],
     ["@babel/plugin-transform-class-properties", { "loose": true }]
   ]

.eslintrc.json

@@ -21,6 +21,10 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
     "arrow-body-style": 0,
     "curly": 0,
     "eol-last": 0,

src/client/index.tsx

@@ -16,6 +16,8 @@ async function startClient() {
     verifyDynamicImports(true).then(x => console.log(x));
   };
 
+  window.history.scrollRestoration = "manual";
+
   initializeSite(window.isoData.site_res);
 
   lazyHighlightjs.enableLazyLoading();

src/shared/components/app/app.tsx

@@ -13,15 +13,25 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
+import { destroyTippy, setupTippy } from "../../tippy";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
+  private readonly rootRef = createRef<HTMLDivElement>();
   constructor(props: any, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
   }
 
+  componentDidMount(): void {
+    setupTippy(this.rootRef);
+  }
+
+  componentWillUnmount(): void {
+    destroyTippy();
+  }
+
   handleJumpToContent(event) {
     event.preventDefault();
     this.mainContentRef.current?.focus();
@@ -34,7 +44,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site">
+          <div id="app" className="lemmy-site" ref={this.rootRef}>
             <button
               type="button"
               className="btn skip-link bg-light position-absolute start-0 z-3"

src/shared/components/app/navbar.tsx

@@ -15,6 +15,7 @@ import { toast } from "../../toast";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
 import { Subscription } from "rxjs";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface NavbarProps {
   siteRes?: GetSiteResponse;
@@ -42,6 +43,7 @@ function handleLogOut(i: Navbar) {
   handleCollapseClick(i);
 }
 
+@tippyMixin
 export class Navbar extends Component<NavbarProps, NavbarState> {
   collapseButtonRef = createRef<HTMLButtonElement>();
   mobileMenuRef = createRef<HTMLDivElement>();

src/shared/components/comment/comment-node.tsx

@@ -42,7 +42,7 @@ import {
 } from "../../interfaces";
 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { UserBadges } from "../common/user-badges";
@@ -117,6 +117,7 @@ function handleToggleViewSource(i: CommentNode) {
   }));
 }
 
+@tippyMixin
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   state: CommentNodeState = {
     showReply: false,
@@ -607,12 +608,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   handleCommentCollapse(i: CommentNode) {
     i.setState({ collapsed: !i.state.collapsed });
-    setupTippy();
   }
 
   handleShowAdvanced(i: CommentNode) {
     i.setState({ showAdvanced: !i.state.showAdvanced });
-    setupTippy();
   }
 
   async handleSaveComment() {

src/shared/components/comment/comment-report.tsx

@@ -11,6 +11,7 @@ import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { CommentNode } from "./comment-node";
 import { EMPTY_REQUEST } from "../../services/HttpService";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CommentReportProps {
   report: CommentReportView;
@@ -21,6 +22,7 @@ interface CommentReportState {
   loading: boolean;
 }
 
+@tippyMixin
 export class CommentReport extends Component<
   CommentReportProps,
   CommentReportState

src/shared/components/common/content-actions/action-button.tsx

@@ -1,6 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { Icon, Spinner } from "../icon";
 import classNames from "classnames";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ActionButtonPropsBase {
   label: string;
@@ -34,6 +35,7 @@ async function handleClick(i: ActionButton) {
   i.setState({ loading: false });
 }
 
+@tippyMixin
 export default class ActionButton extends Component<
   ActionButtonProps,
   ActionButtonState

src/shared/components/common/content-actions/content-action-dropdown.tsx

@@ -20,6 +20,7 @@ import ViewVotesModal from "../view-votes-modal";
 import ModActionFormModal, { BanUpdateForm } from "../mod-action-form-modal";
 import { BanType, CommentNodeView, PurgeType } from "../../../interfaces";
 import { getApubName, hostname } from "@utils/helpers";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ContentActionDropdownPropsBase {
   onSave: () => Promise<void>;
@@ -76,6 +77,7 @@ type ContentActionDropdownState = {
   mounted: boolean;
 } & { [key in DialogType]: boolean };
 
+@tippyMixin
 export default class ContentActionDropdown extends Component<
   ContentActionDropdownProps,
   ContentActionDropdownState

src/shared/components/common/emoji-picker.tsx

@@ -2,6 +2,7 @@ import { Component, linkEvent } from "inferno";
 import { I18NextService } from "../../services";
 import { EmojiMart } from "./emoji-mart";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface EmojiPickerProps {
   onEmojiClick?(val: any): any;
@@ -16,6 +17,7 @@ function closeEmojiMartOnEsc(i, event): void {
   event.key === "Escape" && i.setState({ showPicker: false });
 }
 
+@tippyMixin
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   private emptyState: EmojiPickerState = {
     showPicker: false,

src/shared/components/common/markdown-textarea.tsx

@@ -3,7 +3,7 @@ import { numToSI, randomStr } from "@utils/helpers";
 import autosize from "autosize";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import { Language } from "lemmy-js-client";
 import {
@@ -15,7 +15,7 @@ import {
 } from "../../config";
 import { customEmojisLookup, mdToHtml, setupTribute } from "../../markdown";
 import { HttpService, I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
@@ -68,6 +68,7 @@ interface MarkdownTextAreaState {
   submitted: boolean;
 }
 
+@tippyMixin
 export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
@@ -111,13 +112,12 @@ export class MarkdownTextArea extends Component<
       if (this.props.focus) {
         textarea.focus();
       }
-
-      // TODO this is slow for some reason
-      setupTippy();
     }
   }
 
-  componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
+  componentWillReceiveProps(
+    nextProps: MarkdownTextAreaProps & { children?: InfernoNode },
+  ) {
     if (nextProps.finished) {
       this.setState({
         previewMode: false,

src/shared/components/common/moment-time.tsx

@@ -3,6 +3,7 @@ import { format, parseISO } from "date-fns";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface MomentTimeProps {
   published: string;
@@ -16,6 +17,7 @@ function formatDate(input: string) {
   return format(parsed, "PPPPpppp");
 }
 
+@tippyMixin
 export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);

src/shared/components/common/password-input.tsx

@@ -5,6 +5,7 @@ import { Component, FormEventHandler, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PasswordInputProps {
   id: string;
@@ -55,6 +56,7 @@ function handleToggleShow(i: PasswordInput) {
   }));
 }
 
+@tippyMixin
 class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
   state: PasswordInputState = {
     show: false,

src/shared/components/common/user-badges.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface UserBadgesProps {
   isBanned?: boolean;
@@ -12,7 +13,7 @@ interface UserBadgesProps {
   classNames?: string;
 }
 
-export function getRoleLabelPill({
+function getRoleLabelPill({
   label,
   tooltip,
   classes,
@@ -34,6 +35,7 @@ export function getRoleLabelPill({
   );
 }
 
+@tippyMixin
 export class UserBadges extends Component<UserBadgesProps> {
   render() {
     return (

src/shared/components/common/vote-buttons.tsx

@@ -1,7 +1,7 @@
 import { newVote, showScores } from "@utils/app";
 import { numToSI } from "@utils/helpers";
 import classNames from "classnames";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import {
   CommentAggregates,
   CreateCommentLike,
@@ -11,6 +11,7 @@ import {
 import { VoteContentType, VoteType } from "../../interfaces";
 import { I18NextService, UserService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface VoteButtonsProps {
   voteContentType: VoteContentType;
@@ -82,6 +83,7 @@ const handleDownvote = (i: VoteButtons) => {
   }
 };
 
+@tippyMixin
 export class VoteButtonsCompact extends Component<
   VoteButtonsProps,
   VoteButtonsState
@@ -95,7 +97,9 @@ export class VoteButtonsCompact extends Component<
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,
@@ -166,6 +170,7 @@ export class VoteButtonsCompact extends Component<
   }
 }
 
+@tippyMixin
 export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
   state: VoteButtonsState = {
     upvoteLoading: false,
@@ -176,7 +181,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,

src/shared/components/community/communities.tsx

@@ -4,6 +4,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  resourcesSettled,
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
@@ -38,6 +39,7 @@ import { SubscribeButton } from "../common/subscribe-button";
 import { getHttpBaseInternal } from "../../utils/env";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { scrollMixin } from "../mixins/scroll-mixin";
 
 type CommunitiesData = RouteDataResponse<{
   listCommunitiesResponse: ListCommunitiesResponse;
@@ -84,6 +86,7 @@ export type CommunitiesFetchConfig = IRoutePropsWithFetch<
   CommunitiesProps
 >;
 
+@scrollMixin
 export class Communities extends Component<
   CommunitiesRouteProps,
   CommunitiesState
@@ -96,6 +99,10 @@ export class Communities extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.listCommunitiesResponse]);
+  }
+
   constructor(props: CommunitiesRouteProps, context: any) {
     super(props, context);
     this.handlePageChange = this.handlePageChange.bind(this);
@@ -374,8 +381,6 @@ export class Communities extends Component<
         page,
       }),
     });
-
-    window.scrollTo(0, 0);
   }
 
   findAndUpdateCommunity(res: RequestState<CommunityResponse>) {

src/shared/components/community/community-form.tsx

@@ -13,6 +13,7 @@ import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CommunityFormProps {
   community_view?: CommunityView; // If a community is given, that means this is an edit
@@ -40,6 +41,7 @@ interface CommunityFormState {
   submitted: boolean;
 }
 
+@tippyMixin
 export class CommunityForm extends Component<
   CommunityFormProps,
   CommunityFormState