Use vite

9 files changed, 35 insertions, 66 deletions

diff --git a/src/app.tsx b/src/app.tsx
index 5d2f226..94ee328 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -12,8 +12,12 @@ const rootEl = document.getElementById('app');
 
 Modal.setAppElement(rootEl);
 
-const root = ReactDOM.unstable_createRoot(rootEl);
-root.render(<Root />);
+ReactDOM.render(
+  <React.StrictMode>
+    <Root />
+  </React.StrictMode>,
+  rootEl
+);
 
 swRegistration.register();
 
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);
diff --git a/src/custom.d.ts b/src/custom.d.ts
index 9aa0b72..86d348f 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -13,7 +13,6 @@ interface Window {
 
 // webpack definePlugin replacing variables
 declare const __VERSION__: string;
-declare const __DEV__: string;
 declare const process = {
   env: {
     NODE_ENV: string,
diff --git a/src/hooks/useLineChart.ts b/src/hooks/useLineChart.ts
index 3bfd7d7..2757ee1 100644
--- a/src/hooks/useLineChart.ts
+++ b/src/hooks/useLineChart.ts
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { commonChartOptions } from '../misc/chart';
+import { commonChartOptions } from 'src/misc/chart';
 
 const { useEffect } = React;
 const options = commonChartOptions;
@@ -13,7 +12,6 @@ export default function useLineChart(
   extraChartOptions = {}
 ) {
   useEffect(() => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'getContext' does not exist on type 'HTML... Remove this comment to see the full error message
     const ctx = document.getElementById(elementId).getContext('2d');
     const c = new Chart(ctx, {
       type: 'line',
diff --git a/src/index.template.ejs b/src/index.template.ejs
deleted file mode 100644
index 4604b0a..0000000
--- a/src/index.template.ejs
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="shortcut icon" href="yacd.ico" />
-    <link rel="icon" type="image/png" sizes="64x64" href="yacd-64.png" />
-    <link rel="icon" type="image/png" sizes="128x128" href="yacd-128.png" />
-    <link
-      rel="apple-touch-icon-precomposed"
-      href="apple-touch-icon-precomposed.png"
-    />
-    <meta name="apple-mobile-web-app-title" content="yacd">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="application-name" content="yacd" />
-    <meta name="description" content="Yet Another Clash Dashboard" />
-    <meta name="theme-color" content="#202020" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <div id="app" data-base-url="http://127.0.0.1:9090"></div>
-  </body>
-</html>
diff --git a/src/sw.ts b/src/sw.ts
index a197f1d..bdc663c 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -46,7 +46,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL('index.html')
 );
 
 // An example runtime caching route for requests that aren't handled by the