Remove unnecessary providers (#379)

app/src/App.tsx

@@ -1,7 +1,5 @@
 import { TooltipProvider } from '@/components/ui/tooltip';
 import AppBar from './components/AppBar';
-import AuthProvider from './components/AuthProvider';
-import RouteProvider from './components/RouteProvider';
 import { ThemeProvider } from './components/ThemeProvider';
 import { Toaster } from './components/ui/toaster';
 import Routes from './routes';
@@ -10,13 +8,9 @@ function App() {
     return (
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <TooltipProvider>
-                <AuthProvider>
-                    <RouteProvider>
-                        <AppBar />
-                        <Routes />
-                        <Toaster />
-                    </RouteProvider>
-                </AuthProvider>
+                <AppBar />
+                <Routes />
+                <Toaster />
             </TooltipProvider>
         </ThemeProvider>
     );

app/src/components/AppBar/index.tsx

@@ -1,4 +1,4 @@
-import { useRouteManager } from '@/components/RouteProvider';
+import { useRouteManager } from '@/components/Context/Route';
 import { Route } from '@/lib/routes';
 import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';

app/src/components/Context/Auth.tsx

@@ -0,0 +1,5 @@
+import { AuthManager } from '@/lib/auth';
+import { createContext, useContext } from 'react';
+
+const AuthContext = createContext(new AuthManager());
+export const useAuthManager = () => useContext(AuthContext);

app/src/components/Context/Editor.tsx

@@ -0,0 +1,5 @@
+import { EditorEngine } from '@/lib/editor/engine';
+import { createContext, useContext } from 'react';
+
+const EditorEngineContext = createContext(new EditorEngine());
+export const useEditorEngine = () => useContext(EditorEngineContext);

app/src/components/Context/Route.tsx

@@ -0,0 +1,5 @@
+import { RouteManager } from '@/lib/routes';
+import { createContext, useContext } from 'react';
+
+const RouteContext = createContext(new RouteManager());
+export const useRouteManager = () => useContext(RouteContext);

app/src/routes/editor/Canvas/HotkeysArea.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { EditorMode } from '@/lib/models';
 import { ReactNode } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useEditorEngine } from '..';
 import { DefaultSettings } from '/common/constants';
 import { Hotkey } from '/common/hotkeys';
 

app/src/routes/editor/Canvas/PanOverlay.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { EditorMode } from '@/lib/models';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { useEditorEngine } from '..';
 
 interface PanOverlayProps {
     setPosition: React.Dispatch<

app/src/routes/editor/Canvas/index.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { EditorMode } from '@/lib/models';
 import { observer } from 'mobx-react-lite';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import { useEditorEngine } from '..';
 import HotkeysArea from './HotkeysArea';
 import PanOverlay from './PanOverlay';
 

app/src/routes/editor/EditPanel/ManualTab.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import {
     Accordion,
     AccordionContent,
@@ -6,7 +7,6 @@ import {
 } from '@/components/ui/accordion';
 import { ElementStyle, ElementStyleSubGroup, ElementStyleType } from '@/lib/editor/styles/models';
 import { observer } from 'mobx-react-lite';
-import { useEditorEngine } from '..';
 import AutoLayoutInput from './inputs/AutoLayoutInput';
 import BorderInput from './inputs/BorderInput';
 import DisplayInput from './inputs/DisplayInput';

app/src/routes/editor/EditPanel/index.tsx

@@ -1,11 +1,11 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { EditorMode } from '@/lib/models';
 import { MagicWandIcon, PinLeftIcon, PinRightIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { useEditorEngine } from '..';
 import ManualTab from './ManualTab';
 
 const EditPanel = observer(() => {

app/src/routes/editor/EditPanel/inputs/AutoLayoutInput.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import {
     getAutolayoutStyles,
     getInputValues,
@@ -11,7 +12,6 @@ import { appendCssUnit } from '@/lib/editor/styles/units';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 
 const OPTION_OVERRIDES: Record<string, string> = {
     Fit: 'Hug',

app/src/routes/editor/EditPanel/inputs/BorderInput.tsx

@@ -1,8 +1,8 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { ElementStyle, ElementStyleType } from '@/lib/editor/styles/models';
 import { motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 import ColorInput from './primitives/ColorInput';
 import NumberUnitInput from './primitives/NumberUnitInput';
 import SelectInput from './primitives/SelectInput';

app/src/routes/editor/EditPanel/inputs/GridRowColInput.tsx

@@ -1,9 +1,9 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { generateRowColumnTemplate, getRowColumnCount } from '@/lib/editor/styles/autolayout';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 
 const GridRowColInput = observer(({ elementStyle }: { elementStyle: ElementStyle }) => {
     const editorEngine = useEditorEngine();

app/src/routes/editor/EditPanel/inputs/NestedInputs.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
@@ -16,7 +17,6 @@ import {
 import { motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 import TextInput from './primitives/TextInput';
 
 const DISPLAY_NAME_OVERRIDE: Record<string, any> = {

app/src/routes/editor/EditPanel/inputs/TagDetails.tsx

@@ -1,8 +1,8 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { TAG_INFO } from '@/lib/editor/styles/tag';
 import { motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 
 type TagInfo = {
     title: string;

app/src/routes/editor/EditPanel/inputs/TailwindInput.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Textarea } from '@/components/ui/textarea';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 
 interface Props {
     appendedClass: string[];

app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/PopoverColorPicker.tsx

@@ -1,4 +1,4 @@
-import { useEditorEngine } from '@/routes/editor';
+import { useEditorEngine } from '@/components/Context/Editor';
 import { useEffect } from 'react';
 import { HexAlphaColorPicker } from 'react-colorful';
 import { Popover } from 'react-tiny-popover';

app/src/routes/editor/EditPanel/inputs/primitives/ColorInput/index.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { formatColorInput, stringToHex } from '@/lib/editor/styles/colors';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
-import { useEditorEngine } from '@/routes/editor';
 import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';

app/src/routes/editor/EditPanel/inputs/primitives/NumberUnitInput.tsx

@@ -1,10 +1,10 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import { parsedValueToString, stringToParsedValue } from '@/lib/editor/styles/numberUnit';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import React, { ChangeEvent, useEffect, useState } from 'react';
-import { useEditorEngine } from '../../..';
 
 const NumberUnitInput = observer(
     ({

app/src/routes/editor/EditPanel/inputs/primitives/SelectInput.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
@@ -14,7 +15,6 @@ import {
 } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../../..';
 
 const OVERRIDE_OPTIONS: Record<string, string> = {
     'flex-start': 'start',

app/src/routes/editor/EditPanel/inputs/primitives/TextInput.tsx

@@ -1,8 +1,8 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { constructChangeCurried } from '@/lib/editor/styles/inputs';
 import { ElementStyle } from '@/lib/editor/styles/models';
 import { parsedValueToString, stringToParsedValue } from '@/lib/editor/styles/numberUnit';
 import { appendCssUnit } from '@/lib/editor/styles/units';
-import { useEditorEngine } from '@/routes/editor';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 

app/src/routes/editor/LayersPanel/ComponentsTab.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Button } from '@/components/ui/button';
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
-import { useEditorEngine } from '..';
 import { MainChannels } from '/common/constants';
 import { ReactComponentDescriptor } from '/electron/main/code/components';
 

app/src/routes/editor/LayersPanel/LayersTab.tsx

@@ -1,8 +1,8 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef, useState } from 'react';
 import { Tree, TreeApi } from 'react-arborist';
 import useResizeObserver from 'use-resize-observer';
-import { useEditorEngine } from '..';
 import RightClickMenu from '../RightClickMenu';
 import TreeNode from './Tree/TreeNode';
 import TreeRow from './Tree/TreeRow';

app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/components/ui/tooltip';
 import { ChevronRightIcon, Component1Icon } from '@radix-ui/react-icons';
 import { TooltipArrow } from '@radix-ui/react-tooltip';
@@ -7,7 +8,6 @@ import { observer } from 'mobx-react-lite';
 import { useEffect, useRef, useState } from 'react';
 import { NodeApi } from 'react-arborist';
 import { twMerge } from 'tailwind-merge';
-import { useEditorEngine } from '../..';
 import NodeIcon from './NodeIcon';
 import { escapeSelector } from '/common/helpers';
 import { MouseAction } from '/common/models';

app/src/routes/editor/LayersPanel/index.tsx

@@ -1,11 +1,11 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { EditorMode } from '@/lib/models';
 import { PinLeftIcon, PinRightIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { useEditorEngine } from '..';
 import ComponentsTab from './ComponentsTab';
 import LayersTab from './LayersTab';
 import { capitalizeFirstLetter } from '/common/helpers';

app/src/routes/editor/RightClickMenu/index.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import {
     ContextMenu,
     ContextMenuContent,
@@ -7,7 +8,6 @@ import {
 import { Kbd } from '@/components/ui/kbd';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '..';
 import { Hotkey } from '/common/hotkeys';
 import { WebViewElement } from '/common/models/element';
 import { TemplateNode } from '/common/models/element/templateNode';

app/src/routes/editor/Toolbar/index.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { HotKeyLabel } from '@/components/ui/hotkeys-label';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -6,7 +7,6 @@ import { CursorArrowIcon, HandIcon, SquareIcon, TextIcon } from '@radix-ui/react
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '..';
 import { Hotkey } from '/common/hotkeys';
 
 const TOOLBAR_ITEMS: {

app/src/routes/editor/TopBar/ModeToggle/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import { useEditorEngine } from '@/components/Context/Editor';
 import { HotKeyLabel } from '@/components/ui/hotkeys-label';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { EditorMode } from '@/lib/models';
+import { motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
-import { useEditorEngine } from '../..';
+import { useEffect, useState } from 'react';
 import { capitalizeFirstLetter } from '/common/helpers';
 import { Hotkey } from '/common/hotkeys';
 

app/src/routes/editor/TopBar/OpenCode/index.tsx

@@ -1,5 +1,6 @@
 import CursorIcon from '@/assets/cursor.svg';
 import VsCodeIcon from '@/assets/vscode.svg';
+import { useEditorEngine } from '@/components/Context/Editor';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -15,7 +16,6 @@ import {
 } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 import { MainChannels } from '/common/constants';
 import { IDE, IdeType } from '/common/ide';
 import { WebViewElement } from '/common/models/element';

app/src/routes/editor/TopBar/PublishModal/index.tsx

@@ -1,3 +1,4 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -14,7 +15,6 @@ import { CodeIcon, ExternalLinkIcon, ShadowIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
-import { useEditorEngine } from '../..';
 import { MainChannels, WebviewChannels } from '/common/constants';
 import { CodeDiff } from '/common/models/code';
 import { TemplateNode } from '/common/models/element/templateNode';

app/src/routes/editor/TopBar/SharePopover/index.tsx

@@ -1,9 +1,9 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { GlobeIcon, Share2Icon } from '@radix-ui/react-icons';
 import { useEffect, useState } from 'react';
-import { useEditorEngine } from '../..';
 import { MainChannels } from '/common/constants';
 import { TunnelResult } from '/common/models/tunnel';
 

app/src/routes/editor/TopBar/index.tsx

@@ -1,9 +1,9 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Button } from '@/components/ui/button';
 import { HotKeyLabel } from '@/components/ui/hotkeys-label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ResetIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
-import { useEditorEngine } from '..';
 import ModeToggle from './ModeToggle';
 import OpenCode from './OpenCode';
 import PublishModal from './PublishModal';

app/src/routes/editor/WebviewArea/Frame.tsx

@@ -1,11 +1,11 @@
 import { WebviewMessageBridge } from '@/lib/editor/messageBridge';
 
+import { useEditorEngine } from '@/components/Context/Editor';
 import { Button } from '@/components/ui/button';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef, useState } from 'react';
-import { useEditorEngine } from '..';
 import BrowserControls from './BrowserControl';
 import GestureScreen from './GestureScreen';
 import ResizeHandles from './ResizeHandles';

app/src/routes/editor/WebviewArea/GestureScreen.tsx

@@ -1,7 +1,7 @@
+import { useEditorEngine } from '@/components/Context/Editor';
 import { EditorMode } from '@/lib/models';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { useEditorEngine } from '..';
 import RightClickMenu from '../RightClickMenu';
 import { MouseAction } from '/common/models';
 import { DomElement, ElementPosition } from '/common/models/element';