♻️ refactor: refactor project

.editorconfig

@@ -1,19 +1,16 @@
 # http://editorconfig.org
-
 root = true
 
 [*]
 indent_style = space
 indent_size = 2
-tab_width = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-max_line_length = 100
 
 [*.md]
 trim_trailing_whitespace = false
 
 [Makefile]
-indent_style = tab
+indent_style = tab

.env

@@ -0,0 +1 @@
+VITE_CONTEXT=DEV

.env.production

@@ -0,0 +1 @@
+VITE_CONTEXT=PROD

.eslintignore

@@ -28,3 +28,4 @@ logs
 # add other ignore file below
 javascript
 style.css
+vite-env.d.ts

.eslintrc.js

@@ -1,12 +1,17 @@
+const config = require('@lobehub/lint').eslint;
+
+config.rules['indent'] = ['off', 2];
+
 module.exports = {
-    ...require('@lobehub/lint').eslint,
-    overrides: [
-        {
-            files: ['*.ts', '*.tsx'],
-            rules: {
-                'no-undef': 0,
-                'unicorn/prefer-add-event-listener': 0,
-            },
-        },
-    ],
+  ...config,
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'no-undef': 0,
+        'object-curly-spacing': 0,
+        'unicorn/prefer-add-event-listener': 0,
+      },
+    },
+  ],
 };

package.json

@@ -2,6 +2,13 @@
   "name": "sd-webui-kitchen-theme",
   "version": "1.8.3",
   "private": true,
+  "keywords": [
+    "stable-diffusion-webui"
+  ],
+  "homepage": "https://github.com/canisminor1990/sd-webui-kitchen-theme",
+  "bugs": {
+    "url": "https://github.com/canisminor1990/sd-webui-kitchen-theme/issues/new"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/canisminor1990/sd-webui-kitchen-theme.git"
@@ -10,17 +17,15 @@
   "author": "canisminor1990 <i@canisminor.cc>",
   "sideEffects": false,
   "scripts": {
-    "build": "umi build",
-    "dev": "umi build",
+    "build": "tsc && vite build",
+    "dev": "vite",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:md": "remark . --quiet --output",
     "lint:style": "stylelint \"src/**/*.{css,less,js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "prettier": "prettier -c --write \"**/**\"",
     "release": "semantic-release",
     "sd-debug": "cd ../../ && ./webui.sh",
-    "setup": "umi setup",
-    "start": "umi build",
     "test": "npm run lint",
     "type-check": "tsc -p tsconfig-check.json"
   },
@@ -49,18 +54,17 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^5",
+    "@babel/plugin-syntax-import-assertions": "^7",
     "@commitlint/cli": "^17",
     "@lobehub/lint": "latest",
     "@lobehub/ui": "latest",
     "@types/lodash-es": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
-    "@types/react-dnd": "^3",
     "@types/react-dom": "^18",
-    "@types/react-rnd": "^8",
     "@types/react-tag-input": "^6",
     "@types/styled-components": "^5",
-    "@umijs/lint": "^4",
+    "@vitejs/plugin-react": "^4",
     "ahooks": "^3",
     "antd": "^5",
     "antd-style": "latest",
@@ -70,6 +74,7 @@
     "concurrently": "^8",
     "css-minimizer-webpack-plugin": "^5",
     "eslint": "^8",
+    "fast-deep-equal": "^3",
     "husky": "^8",
     "lightningcss": "^1",
     "lint-staged": "^13",
@@ -79,10 +84,7 @@
     "polished": "^4",
     "prettier": "^2",
     "query-string": "^8",
-    "re-resizable": "^6",
     "react": "^18",
-    "react-dnd": "^16",
-    "react-dnd-html5-backend": "^16",
     "react-dom": "^18",
     "react-layout-kit": "^1",
     "react-rnd": "^10",
@@ -93,9 +95,18 @@
     "styled-components": "latest",
     "stylelint": "^15",
     "typescript": "^5",
-    "umi": "^4",
-    "use-merge-value": "^1",
+    "vite": "^4.3.9",
     "webpack-shell-plugin-next": "^2",
     "zustand": "^4"
+  },
+  "peerDependencies": {
+    "antd": ">=5",
+    "antd-style": ">=3",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   }
 }

src/App.tsx

@@ -0,0 +1,29 @@
+import { memo, useEffect, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import Layout from '@/layouts';
+import Index from '@/pages';
+import formatPrompt from '@/script/formatPrompt';
+import promptBracketChecker from '@/script/promptBracketChecker';
+import setupHead from '@/script/setupHead';
+import { useAppStore } from '@/store';
+
+const App = memo(() => {
+  const [loading, setLoading] = useState(true);
+  const setCurrentTab = useAppStore((st) => st.setCurrentTab, shallow);
+  useEffect(() => {
+    setupHead();
+    onUiLoaded(() => {
+      formatPrompt();
+      promptBracketChecker();
+      setLoading(false);
+    });
+    onUiUpdate(() => {
+      setCurrentTab();
+    });
+  }, []);
+
+  return <Layout>{!loading && <Index />}</Layout>;
+});
+
+export default App;

src/_react_refresh.js

@@ -0,0 +1,10 @@
+import RefreshRuntime from '/@react-refresh';
+
+const RefreshSig = (type) => type;
+
+RefreshRuntime.injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => RefreshSig;
+window.__vite_plugin_react_preamble_installed__ = true;
+
+console.log('🚧 Injecting React Refresh');