diff options
-rw-r--r-- | src/console/App.tsx | 51 | ||||
-rw-r--r-- | src/console/index.tsx | 70 |
2 files changed, 63 insertions, 58 deletions
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<any> => { + 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 <Console />; +}; + +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<any> => { - 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 <Console />; -}; - -const App: React.FC = () => ( - <AppProvider> - <ColorSchemeProvider> - <RootComponent /> - </ColorSchemeProvider> - </AppProvider> -); +import App from "./App"; +import "./index.css"; window.addEventListener("DOMContentLoaded", () => { const wrapper = document.getElementById("vimvixen-console"); - ReactDOM.render(<App />, wrapper); + ReactDOM.render( + <React.StrictMode> + <AppProvider> + <ColorSchemeProvider> + <App /> + </ColorSchemeProvider> + </AppProvider> + </React.StrictMode>, + wrapper + ); }); |