Update types and move extensions to component editor

All Activities, DM Favorites, Platform Icons

package.json

@@ -17,6 +17,6 @@
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "@moonlight-mod/types": "^1.3.5"
+    "@moonlight-mod/types": "^1.3.6"
   }
 }

src/allActivities/index.ts

@@ -26,17 +26,6 @@ export const patches: Patch[] = [
       match: /\(0,\i\.uniqWith\)/,
       replacement: "((inp)=>inp)"
     }
-  },
-
-  // Icons
-  {
-    find: ".lostPermission",
-    replace: {
-      match: /name:null==\i\?(\(0,\i\.jsx\))\("span"/,
-      replacement: (orig, createElement) =>
-        `children:${createElement}(require("allActivities_icons").default,{user:arguments[0].user}),${orig}`
-    },
-    prerequisite: () => moonlight.getConfigOption<boolean>("allActivities", "icons") ?? true
   }
 ];
 
@@ -45,12 +34,14 @@ export const webpackModules: Record<string, ExtensionWebpackModule> = {
     dependencies: [{ id: "react" }, { ext: "spacepack", id: "spacepack" }]
   },
   icons: {
+    entrypoint: true,
     dependencies: [
       { ext: "spacepack", id: "spacepack" },
       { id: "react" },
       { ext: "common", id: "stores" },
       { id: "discord/Constants" },
       { id: "discord/components/common/index" },
+      { ext: "componentEditor", id: "memberList" },
       'applicationStreamingPreviewWrapper:"applicationStreamingPreviewWrapper_'
     ]
   }

src/allActivities/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "allActivities",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "meta": {
     "name": "All Activities",
     "tagline": "Shows all activities in user popouts, and optionally icons in the member list",
@@ -17,6 +17,6 @@
       "advice": "reload"
     }
   },
-  "dependencies": ["spacepack", "common"],
+  "dependencies": ["spacepack", "common", "componentEditor"],
   "apiLevel": 2
 }

src/allActivities/webpackModules/icons.tsx

@@ -3,6 +3,7 @@ import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import { Tooltip } from "@moonlight-mod/wp/discord/components/common/index";
 import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
 import { ApplicationStore, GameStore, UserStore } from "@moonlight-mod/wp/common_stores";
+import MemberList from "@moonlight-mod/wp/componentEditor_memberList";
 
 // FIXME: mappings
 const { ActivityTypes, PlatformTypes } = spacepack.require("discord/Constants");
@@ -33,7 +34,12 @@ type ActivityIconIconProps = {
 
 function ActivityIconIcon({ card, icon }: ActivityIconIconProps) {
   return (
-    <Tooltip text={card} position="left" tooltipClassName="allActivities-iconTooltip">
+    <Tooltip
+      // @ts-expect-error needs mappings update
+      text={card}
+      position="left"
+      tooltipClassName="allActivities-iconTooltip"
+    >
       {(tooltipProps: any) => <img {...tooltipProps} className={ActivityClasses.headerIcon} src={icon} />}
     </Tooltip>
   );
@@ -78,7 +84,7 @@ function ActivityIcon({ user, currentUser, activity }: ActivityIconProps) {
   return null;
 }
 
-export default function ActivityIcons({ user }: ActivityIconsProps) {
+function ActivityIcons({ user }: ActivityIconsProps) {
   const currentUser = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
   const { live } = useUserProfileActivity(user.id);
 
@@ -90,3 +96,6 @@ export default function ActivityIcons({ user }: ActivityIconsProps) {
     </div>
   );
 }
+
+if (moonlight.getConfigOption<boolean>("allActivities", "icons") ?? true)
+  MemberList.addItem("activityIcons", ActivityIcons);

src/dmFavorites/index.ts

@@ -8,16 +8,6 @@ export const patches: Patch[] = [
       match: "isFavorite:!1,",
       replacement: `isFavorite:((require("common_stores").UserGuildSettingsStore.getChannelOverrides("null")[arguments[0].id]??{}).flags&2048)!==0,`
     }
-  },
-
-  // icon indicator
-  {
-    find: ".interactiveSystemDM]:",
-    replace: {
-      match: /:null,((\(0,(\i)\.jsx\))\(\i,{"aria-label":)/,
-      replacement: (_, orig, createElement, ReactJSX) =>
-        `:null,${createElement}(require("dmFavorites_icon")?.default??${ReactJSX}.Fragment,arguments[0]),${orig}`
-    }
   }
 ];
 
@@ -34,11 +24,13 @@ export const webpackModules: Record<string, ExtensionWebpackModule> = {
     ]
   },
   icon: {
+    entrypoint: true,
     dependencies: [
       { id: "react" },
       { ext: "spacepack", id: "spacepack" },
       { ext: "common", id: "stores" },
-      { id: "discord/components/common/index" }
+      { id: "discord/components/common/index" },
+      { ext: "componentEditor", id: "dmList" }
     ]
   }
 };

src/dmFavorites/manifest.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "dmFavorites",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "meta": {
     "name": "DM Favorites",
     "tagline": "Implements favorited direct messages from mobile",
     "authors": ["Cynosphere"],
     "tags": ["chat", "qol"],
     "source": "https://github.com/Cynosphere/moonlight-extensions"
   },
-  "dependencies": ["common", "spacepack", "contextMenu"],
+  "dependencies": ["common", "spacepack", "contextMenu", "componentEditor"],
   "apiLevel": 2
 }

src/dmFavorites/webpackModules/icon.tsx

@@ -2,12 +2,15 @@ import React from "@moonlight-mod/wp/react";
 import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import { UserGuildSettingsStore } from "@moonlight-mod/wp/common_stores";
 
+const DMList = spacepack.require("componentEditor_dmList").default;
 const { StarIcon } = spacepack.require("discord/components/common/index");
 
-export default function FavoritedIcon(props: any) {
+function FavoritedIcon(props: any) {
   const id = props.channel.id;
   const override = UserGuildSettingsStore.getChannelOverrides("null")[id] ?? {};
   const isFavorite = (override.flags & 2048) !== 0;
 
   return isFavorite ? <StarIcon color="currentColor" size="xxs" style={{ marginRight: "8px" }} /> : null;
 }
+
+DMList.addItem("dmFavorites", FavoritedIcon, "close-button", true);

src/platformIcons/index.ts

@@ -3,39 +3,6 @@ import { Patch, ExtensionWebpackModule } from "@moonlight-mod/types";
 const alwaysShowMobile = () => moonlight.getConfigOption<boolean>("platformIcons", "alwaysShowMobile") ?? true;
 
 export const patches: Patch[] = [
-  // Messages
-  // TODO: probably api-ify this
-  {
-    find: '},"new-member")),',
-    replace: {
-      match: /(?<=(\(0,\i\.jsx\)).+?)\.BADGES]=(.);/,
-      replacement: (_, createElement, badges) =>
-        `.BADGES]=[${createElement}(require("platformIcons_icons").default,{user:arguments[0].message.author,configKey:"messages",extraClasses:["platform-icons-message"],size:"sm"}),...${badges}];`
-    }
-  },
-
-  // Member list
-  // TODO: api-ify
-  {
-    find: ".lostPermission",
-    replace: {
-      match: /(\(0,\i\.jsxs\))\(\i\.Fragment,{children:\[\i\(\),/,
-      replacement: (orig: string, createElement) =>
-        `${orig}${createElement}(require("platformIcons_icons").default,{user:arguments[0].user,configKey:"memberList",extraClasses:["platform-icons-member-list"]}),`
-    }
-  },
-
-  // DM list
-  // TODO: api-ify
-  {
-    find: ".interactiveSystemDM]:",
-    replace: {
-      match: /decorators:(\i\.isSystemDM\(\)\?(\(0,\i\.jsx\))\(.+?verified:!0}\):null)/,
-      replacement: (_, orig, createElement) =>
-        `decorators:[${orig},${createElement}(require("platformIcons_icons").default,{user:arguments[0].user,configKey:"directMessages",extraClasses:["platform-icons-private-message"]})]`
-    }
-  },
-
   // Profile
   // TODO: api-ify
   {
@@ -103,12 +70,16 @@ export const patches: Patch[] = [
 
 export const webpackModules: Record<string, ExtensionWebpackModule> = {
   icons: {
+    entrypoint: true,
     dependencies: [
       { ext: "spacepack", id: "spacepack" },
       { id: "react" },
       { id: "discord/packages/flux" },
       { id: "discord/components/common/index" },
       { ext: "common", id: "stores" },
+      { ext: "componentEditor", id: "dmList" },
+      { ext: "componentEditor", id: "memberList" },
+      { ext: "componentEditor", id: "messages" },
       "humanizeStatus:"
     ]
   },

src/platformIcons/manifest.json

@@ -1,15 +1,15 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "platformIcons",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "meta": {
     "name": "Platform Icons",
     "tagline": "Shows what platform(s) a user is on",
     "authors": ["Cynosphere"],
     "tags": ["qol", "chat"],
     "source": "https://github.com/Cynosphere/moonlight-extensions"
   },
-  "dependencies": ["spacepack"],
+  "dependencies": ["spacepack", "common", "componentEditor"],
   "settings": {
     "self": {
       "displayName": "Show own platforms",

src/platformIcons/webpackModules/icons.tsx

@@ -1,6 +1,9 @@
 import React from "@moonlight-mod/wp/react";
 import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
+import MemberList from "@moonlight-mod/wp/componentEditor_memberList";
+import DMList from "@moonlight-mod/wp/componentEditor_dmList";
+import Messages from "@moonlight-mod/wp/componentEditor_messages";
 
 import { AuthenticationStore, PresenceStore, SessionsStore } from "@moonlight-mod/wp/common_stores";
 import * as Components from "@moonlight-mod/wp/discord/components/common/index";
@@ -28,7 +31,7 @@ type IconsProps = {
   user: any;
   extraClasses: string[];
   configKey: string;
-  size: "xxs" | "xs" | "sm" | "md" | "lg" | "custom" | "refresh_sm";
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "custom" | "refresh_sm";
   width?: number;
   height?: number;
 };
@@ -93,3 +96,26 @@ export default function PlatformIcons({ user, extraClasses, configKey, size = "x
     <div className={["platform-icons-wrapper", ...extraClasses].join(" ")}>{elements}</div>
   );
 }
+
+DMList.addDecorator("platformIcons", (props: any) => (
+  <PlatformIcons user={props.user} configKey="directMessages" extraClasses={["platform-icons-private-message"]} />
+));
+MemberList.addDecorator(
+  "platformIcons",
+  (props: any) => (
+    <PlatformIcons user={props.user} configKey="memberList" extraClasses={["platform-icons-member-list"]} />
+  ),
+  "bot-tag"
+);
+Messages.addUsernameBadge(
+  "platformIcons",
+  (props: any) => (
+    <PlatformIcons
+      user={props.message.author}
+      configKey="messages"
+      extraClasses={["platform-icons-message"]}
+      size="sm"
+    />
+  ),
+  "role-icon"
+);