Merge pull request #231 from frost768/exclude-dev-routes

Exclude dev routes from production

src/setup/App.tsx

@@ -1,3 +1,4 @@
+import { lazy } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { BookmarkContextProvider } from "@/state/bookmark";
 import { WatchedContextProvider } from "@/state/watched";
@@ -8,13 +9,8 @@ import { MediaView } from "@/views/media/MediaView";
 import { SearchView } from "@/views/search/SearchView";
 import { MWMediaType } from "@/backend/metadata/types";
 import { V2MigrationView } from "@/views/other/v2Migration";
-import { DeveloperView } from "@/views/developer/DeveloperView";
-import { VideoTesterView } from "@/views/developer/VideoTesterView";
-import { ProviderTesterView } from "@/views/developer/ProviderTesterView";
-import { EmbedTesterView } from "@/views/developer/EmbedTesterView";
 import { BannerContextProvider } from "@/hooks/useBanner";
 import { Layout } from "@/setup/Layout";
-import { TestView } from "@/views/developer/TestView";
 
 function App() {
   return (
@@ -44,15 +40,45 @@ function App() {
                 />
 
                 {/* other */}
-                <Route exact path="/dev" component={DeveloperView} />
-                <Route exact path="/dev/test" component={TestView} />
-                <Route exact path="/dev/video" component={VideoTesterView} />
-                <Route
-                  exact
-                  path="/dev/providers"
-                  component={ProviderTesterView}
-                />
-                <Route exact path="/dev/embeds" component={EmbedTesterView} />
+                {process.env.NODE_ENV === "development" ? (
+                  <>
+                    <Route
+                      exact
+                      path="/dev"
+                      component={lazy(
+                        () => import("@/views/developer/DeveloperView")
+                      )}
+                    />
+                    <Route
+                      exact
+                      path="/dev/test"
+                      component={lazy(
+                        () => import("@/views/developer/TestView")
+                      )}
+                    />
+                    <Route
+                      exact
+                      path="/dev/video"
+                      component={lazy(
+                        () => import("@/views/developer/VideoTesterView")
+                      )}
+                    />
+                    <Route
+                      exact
+                      path="/dev/providers"
+                      component={lazy(
+                        () => import("@/views/developer/ProviderTesterView")
+                      )}
+                    />
+                    <Route
+                      exact
+                      path="/dev/embeds"
+                      component={lazy(
+                        () => import("@/views/developer/EmbedTesterView")
+                      )}
+                    />
+                  </>
+                ) : null}
                 <Route path="*" component={NotFoundPage} />
               </Switch>
             </Layout>

src/views/developer/DeveloperView.tsx

@@ -3,7 +3,7 @@ import { ThinContainer } from "@/components/layout/ThinContainer";
 import { ArrowLink } from "@/components/text/ArrowLink";
 import { Title } from "@/components/text/Title";
 
-export function DeveloperView() {
+export default function DeveloperView() {
   return (
     <div className="py-48">
       <Navigation />

src/views/developer/EmbedTesterView.tsx

@@ -105,7 +105,7 @@ function EmbedScraperSelector(props: EmbedScraperSelectorProps) {
   );
 }
 
-export function EmbedTesterView() {
+export default function EmbedTesterView() {
   const [embed, setEmbed] = useState<MWEmbed | null>(null);
   const [embedScraperId, setEmbedScraperId] = useState<string | null>(null);
   const embedScraper = useMemo(

src/views/developer/ProviderTesterView.tsx

@@ -96,7 +96,7 @@ function ProviderSelector(props: ProviderSelectorProps) {
   );
 }
 
-export function ProviderTesterView() {
+export default function ProviderTesterView() {
   const [media, setMedia] = useState<DetailedMeta | null>(null);
   const [providerId, setProviderId] = useState<string | null>(null);
 

src/views/developer/TestView.tsx

@@ -1,4 +1,4 @@
 // simple empty view, perfect for putting in tests
-export function TestView() {
+export default function TestView() {
   return <div />;
 }

src/views/developer/VideoTesterView.tsx

@@ -33,7 +33,7 @@ const testMeta: DetailedMeta = {
   },
 };
 
-export function VideoTesterView() {
+export default function VideoTesterView() {
   const [video, setVideo] = useState<VideoData | null>(null);
   const [videoType, setVideoType] = useState<MWStreamType>(MWStreamType.MP4);
   const [url, setUrl] = useState("");