Move off of CreateElement
This commit is contained in:
parent
0a0bc42d09
commit
f48b7f3702
4 changed files with 40 additions and 32 deletions
|
|
@ -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 {
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ export default definePlugin({
|
|||
document.body.appendChild(container);
|
||||
|
||||
snowRoot = createRoot(container);
|
||||
snowRoot.render(React.createElement(SnowfallManager));
|
||||
snowRoot.render(<SnowfallManager />);
|
||||
},
|
||||
|
||||
stop() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue