From 5d6eb7282a3d521e182dd39587af7a4e3a57b5e5 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 24 Nov 2024 17:16:06 +0800
Subject: [PATCH] use innerHTML property

---
 src/masto/toot.ts                       | 11 ---------
 src/profiles/Profile.tsx                | 26 +++++----------------
 src/timelines/RegularToot.tsx           | 20 ++++++-----------
 src/timelines/TootBottomSheet.tsx       |  8 +------
 src/timelines/TootComposer.tsx          | 13 ++++-------
 src/timelines/toots/TootAuthorGroup.tsx | 12 ++++------
 src/timelines/toots/TootContent.tsx     | 30 +++++++++++--------------
 src/timelines/toots/TootPoll.tsx        | 25 ++++++++-------------
 src/timelines/toots/TootPollDialog.tsx  | 13 ++++-------
 9 files changed, 48 insertions(+), 110 deletions(-)

diff --git a/src/masto/toot.ts b/src/masto/toot.ts
index 2651577..f3ea94d 100644
--- a/src/masto/toot.ts
+++ b/src/masto/toot.ts
@@ -20,17 +20,6 @@ export function resolveCustomEmoji(
   });
 }
 
-export function appliedCustomEmoji(
-  target: { innerHTML: string },
-  content: string,
-  emojis?: mastodon.v1.CustomEmoji[],
-) {
-  createRenderEffect(() => {
-    const result = emojis ? resolveCustomEmoji(content, emojis) : content;
-    target.innerHTML = result;
-  });
-}
-
 export function hasCustomEmoji(s: string) {
   return CUSTOM_EMOJI_REGEX.test(s);
 }
diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index 56f6c8e..cc29999 100644
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@@ -171,10 +171,6 @@ const Profile: Component = () => {
     ),
   );
 
-  const useSessionDisplayName = (e: HTMLElement) => {
-    createRenderEffect(() => (e.innerHTML = sessionDisplayName()));
-  };
-
   const toggleSubscribeHome = async (event: Event) => {
     const client = session().client;
     if (!session().account) return;
@@ -218,9 +214,7 @@ const Profile: Component = () => {
               style={{
                 visibility: scrolledPastBanner() ? undefined : "hidden",
               }}
-              ref={(e: HTMLElement) =>
-                createRenderEffect(() => (e.innerHTML = displayName()))
-              }
+              innerHTML={displayName()}
             ></Title>
 
             <IconButton
@@ -253,7 +247,7 @@ const Profile: Component = () => {
                 <Avatar src={session().account?.inf?.avatar} />
               </ListItemAvatar>
               <ListItemText secondary={"Default account"}>
-                <span ref={useSessionDisplayName}></span>
+                <span innerHTML={sessionDisplayName()}></span>
               </ListItemText>
               {/* <ArrowRight /> // for future */}
             </MenuItem>
@@ -384,7 +378,7 @@ const Profile: Component = () => {
                     : undefined
               }
             >
-              <span ref={useSessionDisplayName}></span>
+              <span innerHTML={sessionDisplayName()}></span>
               <span>'s Home</span>
             </ListItemText>
 
@@ -419,9 +413,7 @@ const Profile: Component = () => {
                 </Show>
                 <Body2
                   component="span"
-                  ref={(e: HTMLElement) =>
-                    createRenderEffect(() => (e.innerHTML = displayName()))
-                  }
+                  innerHTML={displayName()}
                   aria-label="Display name"
                 ></Body2>
               </div>
@@ -464,9 +456,7 @@ const Profile: Component = () => {
           <section
             class="description"
             aria-label={`${profile()?.displayName || "the user"}'s description`}
-            ref={(e) =>
-              createRenderEffect(() => (e.innerHTML = description() || ""))
-            }
+            innerHTML={description() || ""}
           ></section>
 
           <table
@@ -484,11 +474,7 @@ const Profile: Component = () => {
                           <Verified />
                         </Show>
                       </td>
-                      <td
-                        ref={(e) => {
-                          createRenderEffect(() => (e.innerHTML = item.value));
-                        }}
-                      ></td>
+                      <td innerHTML={item.value}></td>
                     </tr>
                   );
                 }}
diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx
index 76a0704..63ef7c1 100644
--- a/src/timelines/RegularToot.tsx
+++ b/src/timelines/RegularToot.tsx
@@ -66,9 +66,7 @@ export function findRootToot(element: HTMLElement) {
     current = current.parentElement;
   }
   if (!current) {
-    throw Error(
-      `the element must be placed under a element with .RegularToot`,
-    );
+    throw Error(`the element must be placed under a element with .RegularToot`);
   }
   return current;
 }
@@ -145,8 +143,8 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
     <>
       <article
         classList={{
-          "RegularToot": true,
-          "expanded": props.evaluated,
+          RegularToot: true,
+          expanded: props.evaluated,
           "thread-top": props.thread === "top",
           "thread-mid": props.thread === "middle",
           "thread-btm": props.thread === "bottom",
@@ -160,14 +158,10 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           <div class="retoot-grp">
             <BoostIcon />
             <Body2
-              ref={(e: { innerHTML: string }) => {
-                createRenderEffect(() => {
-                  e.innerHTML = resolveCustomEmoji(
-                    status().account.displayName,
-                    toot().emojis,
-                  );
-                });
-              }}
+              innerHTML={resolveCustomEmoji(
+                status().account.displayName,
+                toot().emojis,
+              )}
             ></Body2>
             <span>boosts</span>
           </div>
diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx
index 09465db..065a754 100644
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@@ -261,13 +261,7 @@ const TootBottomSheet: Component = (props) => {
           >
             <BackButton color="inherit" />
             <Title component="div" class="name" use:solid-styled>
-              <span
-                ref={(e: HTMLElement) =>
-                  createRenderEffect(
-                    () => (e.innerHTML = tootDisplayName() ?? "Someone"),
-                  )
-                }
-              ></span>
+              <span innerHTML={tootDisplayName() ?? "Someone"}></span>
               <span>'s toot</span>
             </Title>
           </Toolbar>
diff --git a/src/timelines/TootComposer.tsx b/src/timelines/TootComposer.tsx
index 773d0b8..450f9ad 100644
--- a/src/timelines/TootComposer.tsx
+++ b/src/timelines/TootComposer.tsx
@@ -349,15 +349,10 @@ const TootComposer: Component<{
               </ListItemAvatar>
               <ListItemText secondary={"Default account"}>
                 <span
-                  ref={(e) => {
-                    createRenderEffect(() => {
-                      const inf = session()?.account.inf;
-                      return (e.innerHTML = resolveCustomEmoji(
-                        inf?.displayName || "",
-                        inf?.emojis ?? [],
-                      ));
-                    });
-                  }}
+                  innerHTML={resolveCustomEmoji(
+                    session()?.account.inf?.displayName || "",
+                    session()?.account.inf?.emojis ?? [],
+                  )}
                 ></span>
               </ListItemText>
             </MenuItem>
diff --git a/src/timelines/toots/TootAuthorGroup.tsx b/src/timelines/toots/TootAuthorGroup.tsx
index 798c9b7..121b2c5 100644
--- a/src/timelines/toots/TootAuthorGroup.tsx
+++ b/src/timelines/toots/TootAuthorGroup.tsx
@@ -31,14 +31,10 @@ function TootAuthorGroup(
           </Show>
           <Body2
             component="span"
-            ref={(e: { innerHTML: string }) => {
-              createRenderEffect(() => {
-                e.innerHTML = resolveCustomEmoji(
-                  toot().account.displayName,
-                  toot().account.emojis,
-                );
-              });
-            }}
+            innerHTML={resolveCustomEmoji(
+              toot().account.displayName,
+              toot().account.emojis,
+            )}
           />
         </div>
         <time datetime={toot().createdAt}>
diff --git a/src/timelines/toots/TootContent.tsx b/src/timelines/toots/TootContent.tsx
index a4643a2..2960794 100644
--- a/src/timelines/toots/TootContent.tsx
+++ b/src/timelines/toots/TootContent.tsx
@@ -81,15 +81,13 @@ const TootContent: Component<TootContentProps> = (oprops) => {
       <Show when={props.sensitive}>
         <div>
           <span
-            ref={(ref) => {
-              createRenderEffect(() => {
-                ref.innerHTML = props.spoilerText
-                  ? props.emojis
-                    ? resolveCustomEmoji(props.spoilerText, props.emojis)
-                    : props.spoilerText
-                  : "";
-              });
-            }}
+            innerHTML={
+              props.spoilerText
+                ? props.emojis
+                  ? resolveCustomEmoji(props.spoilerText, props.emojis)
+                  : props.spoilerText
+                : ""
+            }
           ></span>
           <Button onClick={props.onToggleReveal}>{t("cw")}</Button>
         </div>
@@ -97,14 +95,12 @@ const TootContent: Component<TootContentProps> = (oprops) => {
       <Show when={shouldRevealContent()}>
         <div
           class="content"
-          ref={(ref) =>
-            createRenderEffect(() => {
-              ref.innerHTML = props.source
-                ? props.emojis
-                  ? resolveCustomEmoji(props.source, props.emojis)
-                  : props.source
-                : "";
-            })
+          innerHTML={
+            props.source
+              ? props.emojis
+                ? resolveCustomEmoji(props.source, props.emojis)
+                : props.source
+              : ""
           }
         ></div>
       </Show>
diff --git a/src/timelines/toots/TootPoll.tsx b/src/timelines/toots/TootPoll.tsx
index a148fcb..a2b9dc6 100644
--- a/src/timelines/toots/TootPoll.tsx
+++ b/src/timelines/toots/TootPoll.tsx
@@ -20,10 +20,7 @@ import {
   ListItemText,
   Radio,
 } from "@suid/material";
-import {
-  formatDistance,
-  isBefore,
-} from "date-fns";
+import { formatDistance, isBefore } from "date-fns";
 import { useTimeSource } from "~platform/timesrc";
 import { useDateFnLocale } from "~platform/i18n";
 import TootPollDialog from "./TootPollDialog";
@@ -31,13 +28,13 @@ import { ANIM_CURVE_STD } from "~material/theme";
 import { useTootEnv } from "../RegularToot";
 
 type TootPollProps = {
-  value: mastodon.v1.Poll
-  status: mastodon.v1.Status
+  value: mastodon.v1.Poll;
+  status: mastodon.v1.Status;
 };
 
 const TootPoll: Component<TootPollProps> = (props) => {
   let list: HTMLUListElement;
-  const {vote}= useTootEnv()
+  const { vote } = useTootEnv();
 
   const now = useTimeSource();
   const dateFnLocale = useDateFnLocale();
@@ -46,7 +43,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
   const [initialVote, setInitialVote] = createSignal(0);
 
-  const poll = () => props.value
+  const poll = () => props.value;
 
   const isShowResult = () => {
     const n = mustShowResult();
@@ -118,14 +115,10 @@ const TootPoll: Component<TootPollProps> = (props) => {
                 >
                   <ListItemText>
                     <span
-                      ref={(e) =>
-                        createRenderEffect(() => {
-                          e.innerHTML = resolveCustomEmoji(
-                            option().title,
-                            option().emojis,
-                          );
-                        })
-                      }
+                      innerHTML={resolveCustomEmoji(
+                        option().title,
+                        option().emojis,
+                      )}
                     ></span>
                   </ListItemText>
 
diff --git a/src/timelines/toots/TootPollDialog.tsx b/src/timelines/toots/TootPollDialog.tsx
index 7374b0c..f63d204 100644
--- a/src/timelines/toots/TootPollDialog.tsx
+++ b/src/timelines/toots/TootPollDialog.tsx
@@ -96,15 +96,10 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
                 >
                   <ListItemText>
                     <span
-                      ref={(e) =>
-                        createRenderEffect(
-                          () =>
-                            (e.innerHTML = resolveCustomEmoji(
-                              option().title,
-                              option().emojis,
-                            )),
-                        )
-                      }
+                      innerHTML={resolveCustomEmoji(
+                        option().title,
+                        option().emojis,
+                      )}
                     ></span>
                   </ListItemText>