Use vite

4 files changed, 27 insertions, 36 deletions

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index f65fd03..d0cc1f1 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -69,7 +69,9 @@ const routes = [
   { path: '/proxies', element: <Proxies /> },
   { path: '/rules', element: <Rules /> },
   { path: '/about', element: <About /> },
-  __DEV__ ? { path: '/style', element: <StyleGuide /> } : false,
+  process.env.NODE_ENV === 'development'
+    ? { path: '/style', element: <StyleGuide /> }
+    : false,
 ].filter(Boolean) as PartialRouteObject[];
 
 function RouteInnerApp() {
diff --git a/src/components/Selection.tsx b/src/components/Selection.tsx
index 27e5e0e..f0b6080 100644
--- a/src/components/Selection.tsx
+++ b/src/components/Selection.tsx
@@ -43,22 +43,3 @@ export function Selection2({
     </fieldset>
   );
 }
-
-// for test
-// @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
-export function Option({ title }) {
-  // eslint-disable-next-line no-undef
-  if (__DEV__) {
-    return (
-      <div
-        style={{
-          width: 100,
-          height: 60,
-          backgroundColor: '#eee',
-        }}
-      >
-        {title}
-      </div>
-    );
-  }
-}
diff --git a/src/components/SwitchThemed.tsx b/src/components/SwitchThemed.tsx
index 5c528f4..7121acb 100644
--- a/src/components/SwitchThemed.tsx
+++ b/src/components/SwitchThemed.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import Switch from 'react-switch';
+import S from 'react-switch';
 
 import { getTheme } from '../store/app';
 import { connect } from './StateProvider';
 
+// workaround https://github.com/vitejs/vite/issues/2139#issuecomment-802981228
+const Switch = S.default ? S.default : S;
+
 function SwitchThemed({ checked = false, onChange, theme, name }) {
   const offColor = theme === 'dark' ? '#393939' : '#e9e9e9';
 
diff --git a/src/components/shared/Head.tsx b/src/components/shared/Head.tsx
index 3f2e966..1622473 100644
--- a/src/components/shared/Head.tsx
+++ b/src/components/shared/Head.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { connect } from 'src/components/StateProvider';
 import { getClashAPIConfig, getClashAPIConfigs } from 'src/store/app';
 
@@ -8,21 +7,27 @@ const mapState = (s) => ({
   apiConfigs: getClashAPIConfigs(s),
 });
 
-function HeadImpl({ apiConfig, apiConfigs }: { apiConfig: { baseURL: string }, apiConfigs: any[] }) {
-  let title = 'yacd';
-  if (apiConfigs.length > 1) {
-    try {
-      const host = new URL(apiConfig.baseURL).host;
-      title = `${host} - yacd`;
-    } catch (e) {
-      // ignore
+function HeadImpl({
+  apiConfig,
+  apiConfigs,
+}: {
+  apiConfig: { baseURL: string };
+  apiConfigs: any[];
+}) {
+  React.useEffect(() => {
+    let title = 'yacd';
+    if (apiConfigs.length > 1) {
+      try {
+        const host = new URL(apiConfig.baseURL).host;
+        title = `${host} - yacd`;
+      } catch (e) {
+        // ignore
+      }
     }
-  }
-  return (
-    <Helmet>
-      <title>{title}</title>
-    </Helmet>
-  );
+    document.title = title;
+  });
+
+  return <></>;
 }
 
 export const Head = connect(mapState)(HeadImpl);