Move off of CreateElement

This commit is contained in:
thororen1234 2025-11-09 09:43:09 -05:00
parent 0a0bc42d09
commit f48b7f3702
No known key found for this signature in database
4 changed files with 40 additions and 32 deletions

View file

@ -11,7 +11,7 @@ import { openPluginModal } from "@components/settings/tabs";
import type { Plugin } from "@utils/types";
import { changes, checkForUpdates } from "@utils/updater";
import { findByPropsLazy, findStoreLazy } from "@webpack";
import { ChannelActionCreators, ChannelRouter, ChannelStore, ComponentDispatch, FluxDispatcher, GuildStore, MediaEngineStore, React, ReadStateUtils, SelectedChannelStore, SelectedGuildStore, SettingsRouter, StreamerModeStore, Toasts, UserStore, VoiceActions } from "@webpack/common";
import { ChannelActionCreators, ChannelRouter, ChannelStore, ComponentDispatch, FluxDispatcher, GuildStore, MediaEngineStore, React, ReadStateUtils, SelectedChannelStore, SelectedGuildStore, SettingsRouter, StreamerModeStore, Toasts, useEffect, UserStore, VoiceActions } from "@webpack/common";
import type { FC, ReactElement, ReactNode } from "react";
import { Settings } from "Vencord";
@ -110,20 +110,10 @@ const TAG_SESSION = "Session";
const TAG_CONTEXT = "Context";
const TAG_CUSTOM = "Custom";
const debugLogs: Array<unknown[]> = [];
function debugLog(...args: unknown[]) {
debugLogs.push(args);
if (debugLogs.length > 100) debugLogs.shift();
(window as unknown as Record<string, unknown>).__CommandPaletteDebug = debugLogs;
console.debug("CommandPalette", ...args);
}
export function normalizeTag(tag: string): string {
return tag.trim().toLowerCase();
}
export function wrapChatBarChildren(children: ReactNode): ReactNode {
if (!Array.isArray(children) || children.length === 0) return children;
@ -145,7 +135,9 @@ export function wrapChatBarChildren(children: ReactNode): ReactNode {
key: existingKey ?? buttonKey
};
return React.createElement(ChatBarCommandBridge, bridgeProps);
return (
<ChatBarCommandBridge key={existingKey} {...bridgeProps} />
);
});
if (!hasChanges) return children;
@ -171,7 +163,7 @@ export const ChatBarCommandBridge: FC<ChatBarCommandBridgeProps> = ({ element, b
const latestElementRef = React.useRef(element);
latestElementRef.current = element;
React.useEffect(() => {
useEffect(() => {
let cancelled = false;
let cleanup: (() => void) | null = null;
let timeoutId: number | null = null;
@ -212,7 +204,7 @@ export const ChatBarCommandBridge: FC<ChatBarCommandBridgeProps> = ({ element, b
};
}, [buttonKey]);
React.useEffect(() => {
useEffect(() => {
const container = containerRef.current;
if (!container) return;
const state = chatBarCommandStates.get(buttonKey);
@ -223,10 +215,11 @@ export const ChatBarCommandBridge: FC<ChatBarCommandBridgeProps> = ({ element, b
ensureChatBarCommandState(buttonKey, label);
}, [element, buttonKey]);
return React.createElement("div", {
ref: containerRef,
style: { display: "contents" }
}, element);
return (
<div ref={containerRef} style={{ display: "contents" }}>
{element}
</div>
);
};
export function resolveChatBarElementFromContainer(container: HTMLElement): HTMLElement | null {

View file

@ -69,19 +69,18 @@ const settings = definePluginSettings({
clearRdms: {
type: OptionType.COMPONENT,
description: "Testing utility: Clear RDMS list",
component: () => React.createElement(
Button,
{
color: Button.Colors.RED,
onClick: async () => {
component: () => (
<Button
color={Button.Colors.RED}
onClick={async () => {
rmdsDmChannelIds = [];
cycleSnapshot = [];
cycleIndex = -1;
await DataStore.set(STORAGE_KEY, []);
Toasts.show({ id: Toasts.genId(), type: Toasts.Type.SUCCESS, message: "Cleared RDMS history" });
}
},
"Clear RDMS History"
}}>
"Clear RDMS History
</Button>
)
}
});

View file

@ -475,7 +475,7 @@ export default definePlugin({
document.body.appendChild(container);
snowRoot = createRoot(container);
snowRoot.render(React.createElement(SnowfallManager));
snowRoot.render(<SnowfallManager />);
},
stop() {

View file

@ -175,7 +175,9 @@ function applyAggregatedCustomContent(message: Message, key: string, nodes: Reac
const payload = {
__messageloggerDiff: true,
__messageloggerDiffKey: key,
content: React.createElement(React.Fragment, { key }, nodes),
content: <React.Fragment key={key}>
{nodes}
</React.Fragment>
};
const existingKey = (message as any).customRenderedContent?.__messageloggerDiffKey;
@ -228,7 +230,11 @@ function createDiffSegment(part: DiffPart, message: Message, key: React.Key, hig
}
}
return React.createElement("span", { key, className }, parsedContent);
return (
<span key={key} className={className}>
{parsedContent}
</span>
);
}
function renderDiffParts(diffParts: DiffPart[], message: Message) {
@ -277,9 +283,19 @@ export function parseEditContent(content: string, message: Message, previousCont
clearCustomRenderedContent(message);
}
return React.createElement("div", { className: "messagelogger-diff-view" },
originalSegments.length ? React.createElement("div", { className: "messagelogger-diff-original" }, renderDiffParts(originalSegments, message)) : null,
!highlightCurrent && updatedSegments.length ? React.createElement("div", { className: "messagelogger-diff-updated" }, renderDiffParts(updatedSegments, message)) : null,
return (
<div className="messagelogger-diff-view" >
{originalSegments.length ? (
<div className="messagelogger-diff-original">
{renderDiffParts(originalSegments, message)}
</div>
) : null}
{!highlightCurrent && updatedSegments.length ? (
<div className="messagelogger-diff-updated">
{renderDiffParts(updatedSegments, message)}
</div>
) : null}
</div>
);
}