| author | |
| committer | |
| log | bcf8b14f3834aea98824f8b4688e2cdf5fbb6672 |
| tree | 1512c1dde43ef8938c3fd459a0686e84a071ca43 |
| parent | fe69e9694252e56eec676c1858dbfeadccaab8da |
5 files changed, 68 insertions(+), 73 deletions(-)
apps/web/src/App.tsx deleted-22| ... | @@ -1,22 +0,0 @@ | ||
| 1 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; | ||
| 2 | import { RouterProvider } from "@tanstack/react-router"; | ||
| 3 | |||
| 4 | import { AnchoredToastProvider, ToastProvider } from "./components/ui/toast"; | ||
| 5 | import { router } from "./router"; | ||
| 6 | import { StoreProvider } from "./store"; | ||
| 7 | |||
| 8 | const queryClient = new QueryClient(); | ||
| 9 | |||
| 10 | export default function App() { | ||
| 11 | return ( | ||
| 12 | <QueryClientProvider client={queryClient}> | ||
| 13 | <StoreProvider> | ||
| 14 | <ToastProvider> | ||
| 15 | <AnchoredToastProvider> | ||
| 16 | <RouterProvider router={router} /> | ||
| 17 | </AnchoredToastProvider> | ||
| 18 | </ToastProvider> | ||
| 19 | </StoreProvider> | ||
| 20 | </QueryClientProvider> | ||
| 21 | ); | ||
| 22 | } | ||
apps/web/src/main.tsx+35-2| ... | @@ -1,11 +1,44 @@ | ... | @@ -1,11 +1,44 @@ |
| 1 | import React from "react"; | 1 | import React from "react"; |
| 2 | import ReactDOM from "react-dom/client"; | 2 | import ReactDOM from "react-dom/client"; |
| 3 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; | ||
| 4 | import { RouterProvider } from "@tanstack/react-router"; | ||
| 5 | import { AnchoredToastProvider, ToastProvider } from "./components/ui/toast"; | ||
| 6 | import { createHashHistory, createRouter, createBrowserHistory } from "@tanstack/react-router"; | ||
| 7 | import { StoreProvider } from "./store"; | ||
| 8 | |||
| 3 | import "@xterm/xterm/css/xterm.css"; | 9 | import "@xterm/xterm/css/xterm.css"; |
| 4 | import "highlight.js/styles/github-dark.css"; | 10 | import "highlight.js/styles/github-dark.css"; |
| 5 | |||
| 6 | import App from "./App"; | ||
| 7 | import "./index.css"; | 11 | import "./index.css"; |
| 8 | 12 | ||
| 13 | import { isElectron } from "./env"; | ||
| 14 | import { routeTree } from "./routeTree.gen"; | ||
| 15 | |||
| 16 | const history = isElectron ? createHashHistory() : createBrowserHistory(); | ||
| 17 | |||
| 18 | const queryClient = new QueryClient(); | ||
| 19 | |||
| 20 | const router = createRouter({ | ||
| 21 | routeTree, | ||
| 22 | history, | ||
| 23 | context: { | ||
| 24 | queryClient, | ||
| 25 | }, | ||
| 26 | }); | ||
| 27 | |||
| 28 | function App() { | ||
| 29 | return ( | ||
| 30 | <QueryClientProvider client={queryClient}> | ||
| 31 | <StoreProvider> | ||
| 32 | <ToastProvider> | ||
| 33 | <AnchoredToastProvider> | ||
| 34 | <RouterProvider router={router} /> | ||
| 35 | </AnchoredToastProvider> | ||
| 36 | </ToastProvider> | ||
| 37 | </StoreProvider> | ||
| 38 | </QueryClientProvider> | ||
| 39 | ); | ||
| 40 | } | ||
| 41 | |||
| 9 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( | 42 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( |
| 10 | <React.StrictMode> | 43 | <React.StrictMode> |
| 11 | <App /> | 44 | <App /> |
apps/web/src/router.tsx deleted-18| ... | @@ -1,18 +0,0 @@ | ||
| 1 | import { createHashHistory, createRouter } from "@tanstack/react-router"; | ||
| 2 | |||
| 3 | import { isElectron } from "./env"; | ||
| 4 | import { routeTree } from "./routeTree.gen"; | ||
| 5 | |||
| 6 | const useHashHistory = | ||
| 7 | isElectron && typeof window !== "undefined" && window.location.protocol === "file:"; | ||
| 8 | |||
| 9 | export const router = createRouter({ | ||
| 10 | routeTree, | ||
| 11 | ...(useHashHistory ? { history: createHashHistory() } : {}), | ||
| 12 | }); | ||
| 13 | |||
| 14 | declare module "@tanstack/react-router" { | ||
| 15 | interface Register { | ||
| 16 | router: typeof router; | ||
| 17 | } | ||
| 18 | } | ||
apps/web/src/routes/__root.tsx+31-29| ... | @@ -1,6 +1,6 @@ | ... | @@ -1,6 +1,6 @@ |
| 1 | import { Outlet, createRootRoute } from "@tanstack/react-router"; | 1 | import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"; |
| 2 | import { useEffect, useRef } from "react"; | 2 | import { useEffect, useRef } from "react"; |
| 3 | import { useQueryClient } from "@tanstack/react-query"; | 3 | import { QueryClient, useQueryClient } from "@tanstack/react-query"; |
| 4 | 4 | ||
| 5 | import { isElectron } from "../env"; | 5 | import { isElectron } from "../env"; |
| 6 | import { useNativeApi } from "../hooks/useNativeApi"; | 6 | import { useNativeApi } from "../hooks/useNativeApi"; |
| ... | @@ -10,6 +10,35 @@ import { createThread } from "../threadFactory"; | ... | @@ -10,6 +10,35 @@ import { createThread } from "../threadFactory"; |
| 10 | import { useStore } from "../store"; | 10 | import { useStore } from "../store"; |
| 11 | import { onServerWelcome } from "../wsNativeApi"; | 11 | import { onServerWelcome } from "../wsNativeApi"; |
| 12 | 12 | ||
| 13 | export const Route = createRootRouteWithContext<{ | ||
| 14 | queryClient: QueryClient; | ||
| 15 | }>()({ | ||
| 16 | component: RootRouteView, | ||
| 17 | }); | ||
| 18 | |||
| 19 | function RootRouteView() { | ||
| 20 | const api = useNativeApi(); | ||
| 21 | |||
| 22 | if (!api) { | ||
| 23 | return ( | ||
| 24 | <div className="flex h-screen flex-col bg-background text-foreground"> | ||
| 25 | <div className="flex flex-1 items-center justify-center"> | ||
| 26 | <p className="text-sm text-muted-foreground">Connecting to T3 Code server...</p> | ||
| 27 | </div> | ||
| 28 | </div> | ||
| 29 | ); | ||
| 30 | } | ||
| 31 | |||
| 32 | return ( | ||
| 33 | <> | ||
| 34 | <EventRouter /> | ||
| 35 | <AutoProjectBootstrap /> | ||
| 36 | <DesktopProjectBootstrap /> | ||
| 37 | <Outlet /> | ||
| 38 | </> | ||
| 39 | ); | ||
| 40 | } | ||
| 41 | |||
| 13 | function EventRouter() { | 42 | function EventRouter() { |
| 14 | const api = useNativeApi(); | 43 | const api = useNativeApi(); |
| 15 | const { dispatch } = useStore(); | 44 | const { dispatch } = useStore(); |
| ... | @@ -148,30 +177,3 @@ function DesktopProjectBootstrap() { | ... | @@ -148,30 +177,3 @@ function DesktopProjectBootstrap() { |
| 148 | 177 | ||
| 149 | return null; | 178 | return null; |
| 150 | } | 179 | } |
| 151 | |||
| 152 | function RootRouteView() { | ||
| 153 | const api = useNativeApi(); | ||
| 154 | |||
| 155 | if (!api) { | ||
| 156 | return ( | ||
| 157 | <div className="flex h-screen flex-col bg-background text-foreground"> | ||
| 158 | <div className="flex flex-1 items-center justify-center"> | ||
| 159 | <p className="text-sm text-muted-foreground">Connecting to T3 Code server...</p> | ||
| 160 | </div> | ||
| 161 | </div> | ||
| 162 | ); | ||
| 163 | } | ||
| 164 | |||
| 165 | return ( | ||
| 166 | <> | ||
| 167 | <EventRouter /> | ||
| 168 | <AutoProjectBootstrap /> | ||
| 169 | <DesktopProjectBootstrap /> | ||
| 170 | <Outlet /> | ||
| 171 | </> | ||
| 172 | ); | ||
| 173 | } | ||
| 174 | |||
| 175 | export const Route = createRootRoute({ | ||
| 176 | component: RootRouteView, | ||
| 177 | }); |
apps/web/vite.config.ts+2-2| ... | @@ -1,13 +1,13 @@ | ... | @@ -1,13 +1,13 @@ |
| 1 | import tailwindcss from "@tailwindcss/vite"; | 1 | import tailwindcss from "@tailwindcss/vite"; |
| 2 | import react from "@vitejs/plugin-react"; | 2 | import react from "@vitejs/plugin-react"; |
| 3 | import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; | 3 | import { tanstackRouter } from "@tanstack/router-plugin/vite"; |
| 4 | import { defineConfig } from "vite"; | 4 | import { defineConfig } from "vite"; |
| 5 | 5 | ||
| 6 | const port = Number(process.env.PORT ?? 5173); | 6 | const port = Number(process.env.PORT ?? 5173); |
| 7 | 7 | ||
| 8 | export default defineConfig({ | 8 | export default defineConfig({ |
| 9 | plugins: [ | 9 | plugins: [ |
| 10 | TanStackRouterVite(), | 10 | tanstackRouter(), |
| 11 | react({ | 11 | react({ |
| 12 | babel: { | 12 | babel: { |
| 13 | plugins: [["babel-plugin-react-compiler", { target: "19" }]], | 13 | plugins: [["babel-plugin-react-compiler", { target: "19" }]], |