From 48ead03629a4dcbb3600e35b23222b83fe3014a8 Mon Sep 17 00:00:00 2001 From: heimoshuiyu Date: Fri, 27 Dec 2024 15:43:48 +0800 Subject: [PATCH] upgrade react 19, remove preact usage --- src/addImage.tsx | 2 +- src/components/Settings.tsx | 14 ++++---------- src/components/WhisperButton.tsx | 8 ++++---- src/components/ui/calendar.tsx | 12 ++++++++---- src/editMessage.tsx | 4 ++-- src/main.tsx | 6 +++--- src/message.tsx | 6 ++++-- src/pages/AddToolMsg.tsx | 5 ++--- src/pages/App.tsx | 2 +- src/pages/Chatbox.tsx | 16 +++++++++------- src/search.tsx | 4 ++-- src/translate/index.tsx | 2 +- src/tts.tsx | 2 +- vite.config.ts | 3 +-- 14 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/addImage.tsx b/src/addImage.tsx index 78259d2..ad2a196 100644 --- a/src/addImage.tsx +++ b/src/addImage.tsx @@ -1,4 +1,4 @@ -import { useState } from "preact/hooks"; +import { useState } from "react"; import { ChatStore } from "@/types/chatstore"; import { MessageDetail } from "@/chatgpt"; import { Tr } from "@/translate"; diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index f590220..7efa558 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -1,13 +1,7 @@ import { themeChange } from "theme-change"; -import { createRef } from "preact"; -import { - StateUpdater, - useContext, - useEffect, - useState, - Dispatch, -} from "preact/hooks"; +import { useRef } from "react"; +import { useContext, useEffect, useState, Dispatch } from "react"; import { clearTotalCost, getTotalCost } from "@/utils/totalCost"; import { ChatStore, @@ -484,7 +478,7 @@ const Choice = (props: { export default (props: { chatStore: ChatStore; setChatStore: (cs: ChatStore) => void; - setShow: Dispatch>; + setShow: Dispatch; selectedChatStoreIndex: number; templates: TemplateChatStore[]; setTemplates: (templates: TemplateChatStore[]) => void; @@ -515,7 +509,7 @@ export default (props: { link = link + `&dev=true`; } - const importFileRef = createRef(); + const importFileRef = useRef(null); const [totalCost, setTotalCost] = useState(getTotalCost()); // @ts-ignore const { langCode, setLangCode } = useContext(langCodeContext); diff --git a/src/components/WhisperButton.tsx b/src/components/WhisperButton.tsx index 1bc838c..e002214 100644 --- a/src/components/WhisperButton.tsx +++ b/src/components/WhisperButton.tsx @@ -1,7 +1,7 @@ -import { createRef } from "preact"; +import { createRef } from "react"; import { ChatStore } from "@/types/chatstore"; -import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks"; +import { useEffect, useState, Dispatch } from "react"; import { Button } from "@/components/ui/button"; import { AudioWaveform, @@ -14,7 +14,7 @@ import { const WhisperButton = (props: { chatStore: ChatStore; inputMsg: string; - setInputMsg: Dispatch>; + setInputMsg: Dispatch; }) => { const { chatStore, inputMsg, setInputMsg } = props; const mediaRef = createRef(); @@ -25,7 +25,7 @@ const WhisperButton = (props: { size="icon" className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`} disabled={isRecording === "Transcribing"} - ref={mediaRef} + ref={mediaRef as any} onClick={async (event) => { event.preventDefault(); // Prevent the default behavior diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 959afde..df18227 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -57,14 +57,18 @@ function Calendar({ day_hidden: "invisible", ...classNames, }} - components={{ - IconLeft: ({ className, ...props }) => ( + components={ + { + /* + IconLeft: ({ className, ...props }: any) => ( ), - IconRight: ({ className, ...props }) => ( + IconRight: ({ className, ...props }: any) => ( ), - }} + */ + } + } {...props} /> ); diff --git a/src/editMessage.tsx b/src/editMessage.tsx index 17e2b10..170d572 100644 --- a/src/editMessage.tsx +++ b/src/editMessage.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, StateUpdater, Dispatch } from "preact/hooks"; +import { useState, useEffect, Dispatch } from "react"; import { Tr, langCodeContext, LANG_OPTIONS, tr } from "@/translate"; import { ChatStore, ChatStoreMessage } from "@/types/chatstore"; import { EditMessageString } from "@/editMessageString"; @@ -18,7 +18,7 @@ interface EditMessageProps { chat: ChatStoreMessage; chatStore: ChatStore; showEdit: boolean; - setShowEdit: Dispatch>; + setShowEdit: Dispatch; setChatStore: (cs: ChatStore) => void; } export function EditMessage(props: EditMessageProps) { diff --git a/src/main.tsx b/src/main.tsx index ba96249..9b2301f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import { themeChange } from "theme-change"; -import { render } from "preact"; -import { useState, useEffect } from "preact/hooks"; +import { createRoot } from "react-dom/client"; +import { useState, useEffect } from "react"; import { App } from "@/pages/App"; import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate"; import { SidebarProvider } from "@/components/ui/sidebar"; @@ -60,4 +60,4 @@ function Base() { ); } -render(, document.getElementById("app") as HTMLElement); +createRoot(document.getElementById("app") as HTMLElement).render(); diff --git a/src/message.tsx b/src/message.tsx index 4555a71..87b81b0 100644 --- a/src/message.tsx +++ b/src/message.tsx @@ -1,6 +1,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline"; import Markdown from "react-markdown"; -import { useState, useEffect, StateUpdater } from "preact/hooks"; +import { useState } from "react"; import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate"; import { ChatStore, ChatStoreMessage } from "@/types/chatstore"; @@ -156,7 +156,9 @@ export default function Message(props: Props) { ) : chat.role === "tool" ? ( ) : renderMarkdown ? ( - {getMessageText(chat)} + // [TODO] It is happening https://github.com/remarkjs/react-markdown/pull/879 + // {getMessageText(chat)} + <> ) : (
{chat.content && diff --git a/src/pages/AddToolMsg.tsx b/src/pages/AddToolMsg.tsx index ac76c4e..71aec42 100644 --- a/src/pages/AddToolMsg.tsx +++ b/src/pages/AddToolMsg.tsx @@ -1,12 +1,11 @@ -import { useState } from "preact/hooks"; -import { Dispatch, StateUpdater } from "preact/hooks"; +import { Dispatch, useState } from "react"; import { Tr } from "@/translate"; import { calculate_token_length } from "@/chatgpt"; import { ChatStore } from "@/types/chatstore"; const AddToolMsg = (props: { - setShowAddToolMsg: Dispatch>; + setShowAddToolMsg: Dispatch; chatStore: ChatStore; setChatStore: (cs: ChatStore) => void; }) => { diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 00519e8..0068d22 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,5 +1,5 @@ import { openDB } from "idb"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useState } from "react"; import "@/global.css"; import { calculate_token_length } from "@/chatgpt"; diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx index 705de43..e70afaa 100644 --- a/src/pages/Chatbox.tsx +++ b/src/pages/Chatbox.tsx @@ -1,6 +1,6 @@ import { IDBPDatabase } from "idb"; -import { createRef } from "preact"; -import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks"; +import { useRef } from "react"; +import { useEffect, useState, Dispatch } from "react"; import { Tr, langCodeContext, LANG_OPTIONS } from "@/translate"; import { STORAGE_NAME_TEMPLATE, @@ -84,7 +84,7 @@ export default function ChatBOX(props: { chatStore: ChatStore; setChatStore: (cs: ChatStore) => void; selectedChatIndex: number; - setSelectedChatIndex: Dispatch>; + setSelectedChatIndex: Dispatch; }) { const { chatStore, setChatStore } = props; // prevent error @@ -109,9 +109,10 @@ export default function ChatBOX(props: { _setFollow(follow); }; - const messagesEndRef = createRef(); + const messagesEndRef = useRef(null); useEffect(() => { if (follow) { + if (messagesEndRef.current === null) return; messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [showRetry, showGenerating, generatingMessage]); @@ -470,7 +471,7 @@ export default function ChatBOX(props: { ); _setToolsTemplates(templateTools); }; - const userInputRef = createRef(); + const userInputRef = useRef(null); return ( <> @@ -746,7 +747,7 @@ export default function ChatBOX(props: {

)} -
+
{images.length > 0 && (
@@ -780,7 +781,7 @@ export default function ChatBOX(props: {
{ setInputMsg(event.target.value); @@ -828,6 +829,7 @@ export default function ChatBOX(props: { disabled={showGenerating} onClick={() => { send(inputMsg, true); + if (userInputRef.current === null) return; userInputRef.current.value = ""; autoHeight(userInputRef.current); }} diff --git a/src/search.tsx b/src/search.tsx index e6b9470..ec5fb18 100644 --- a/src/search.tsx +++ b/src/search.tsx @@ -1,5 +1,5 @@ import { IDBPDatabase } from "idb"; -import { StateUpdater, useRef, useState, Dispatch } from "preact/hooks"; +import { useRef, useState, Dispatch } from "react"; import { ChatStore } from "@/types/chatstore"; import { MessageDetail } from "./chatgpt"; @@ -34,7 +34,7 @@ interface ChatStoreSearchResult { export default function Search(props: { db: Promise>; - setSelectedChatIndex: Dispatch>; + setSelectedChatIndex: Dispatch; chatStore: ChatStore; show: boolean; setShow: (show: boolean) => void; diff --git a/src/translate/index.tsx b/src/translate/index.tsx index 98efa16..b6af9f1 100644 --- a/src/translate/index.tsx +++ b/src/translate/index.tsx @@ -1,4 +1,4 @@ -import { createContext } from "preact"; +import { createContext } from "react"; import MAP_zh_CN from "@/translate/zh_CN"; interface LangOption { diff --git a/src/tts.tsx b/src/tts.tsx index 903c96c..66e7c9b 100644 --- a/src/tts.tsx +++ b/src/tts.tsx @@ -1,5 +1,5 @@ import { SpeakerWaveIcon } from "@heroicons/react/24/outline"; -import { useMemo, useState } from "preact/hooks"; +import { useMemo, useState } from "react"; import { addTotalCost } from "@/utils/totalCost"; import { ChatStore, ChatStoreMessage } from "@/types/chatstore"; diff --git a/vite.config.ts b/vite.config.ts index c615f1a..3e77ffd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,9 @@ import { defineConfig } from "vite"; -import preact from "@preact/preset-vite"; import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [preact()], + plugins: [], base: "./", resolve: { alias: {