From 65ddd365e407989f3c1722a3ba811492b32e692f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Wed, 24 Nov 2021 13:18:03 +0000 Subject: Use React.StrictMode --- src/console/App.tsx | 51 +++++++++++++++++++++++++++++++++++++ src/console/index.tsx | 70 +++++++++------------------------------------------ 2 files changed, 63 insertions(+), 58 deletions(-) create mode 100644 src/console/App.tsx (limited to 'src/console') diff --git a/src/console/App.tsx b/src/console/App.tsx new file mode 100644 index 0000000..6b45418 --- /dev/null +++ b/src/console/App.tsx @@ -0,0 +1,51 @@ +import * as messages from "../shared/messages"; +import Console from "./components/Console"; +import React from "react"; +import { + useCommandMode, + useFindMode, + useInfoMessage, + useErrorMessage, + useHide, +} from "./app/hooks"; + +const App: React.FC = () => { + const hide = useHide(); + const { show: showCommand } = useCommandMode(); + const { show: showFind } = useFindMode(); + const { show: showError } = useErrorMessage(); + const { show: showInfo } = useInfoMessage(); + + React.useEffect(() => { + const onMessage = async (message: any): Promise => { + const msg = messages.valueOf(message); + switch (msg.type) { + case messages.CONSOLE_SHOW_COMMAND: + showCommand(msg.command); + break; + case messages.CONSOLE_SHOW_FIND: + showFind(); + break; + case messages.CONSOLE_SHOW_ERROR: + showError(msg.text); + break; + case messages.CONSOLE_SHOW_INFO: + showInfo(msg.text); + break; + case messages.CONSOLE_HIDE: + hide(); + break; + } + }; + + browser.runtime.onMessage.addListener(onMessage); + const port = browser.runtime.connect(undefined, { + name: "vimvixen-console", + }); + port.onMessage.addListener(onMessage); + }, []); + + return ; +}; + +export default App; diff --git a/src/console/index.tsx b/src/console/index.tsx index 29fa11f..5b97917 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -1,66 +1,20 @@ -import * as messages from "../shared/messages"; -import Console from "./components/Console"; -import "./index.css"; import React from "react"; import ReactDOM from "react-dom"; import ColorSchemeProvider from "./colorscheme/providers"; import { AppProvider } from "./app/provider"; -import { - useCommandMode, - useFindMode, - useInfoMessage, - useErrorMessage, - useHide, -} from "./app/hooks"; - -const RootComponent: React.FC = () => { - const hide = useHide(); - const { show: showCommand } = useCommandMode(); - const { show: showFind } = useFindMode(); - const { show: showError } = useErrorMessage(); - const { show: showInfo } = useInfoMessage(); - - React.useEffect(() => { - const onMessage = async (message: any): Promise => { - const msg = messages.valueOf(message); - switch (msg.type) { - case messages.CONSOLE_SHOW_COMMAND: - showCommand(msg.command); - break; - case messages.CONSOLE_SHOW_FIND: - showFind(); - break; - case messages.CONSOLE_SHOW_ERROR: - showError(msg.text); - break; - case messages.CONSOLE_SHOW_INFO: - showInfo(msg.text); - break; - case messages.CONSOLE_HIDE: - hide(); - break; - } - }; - - browser.runtime.onMessage.addListener(onMessage); - const port = browser.runtime.connect(undefined, { - name: "vimvixen-console", - }); - port.onMessage.addListener(onMessage); - }, []); - - return ; -}; - -const App: React.FC = () => ( - - - - - -); +import App from "./App"; +import "./index.css"; window.addEventListener("DOMContentLoaded", () => { const wrapper = document.getElementById("vimvixen-console"); - ReactDOM.render(, wrapper); + ReactDOM.render( + + + + + + + , + wrapper + ); }); -- cgit v1.2.3