chore: replace create-react-app with vite

F-star · Jan 20, 2024 · fd37252 · fd37252
1 parent f3746af
commit fd37252
Show file tree

Hide file tree

Showing 24 changed files with 2,914 additions and 825 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "minimist": "^1.2.8",
     "npm-run-all": "^4.1.5",
     "prettier": "2.8.7",
-    "typescript": "^4.9.3"
+    "typescript": "^5.2.2"
   },
   "dependencies": {
     "react": "^18.2.0",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -41,8 +41,8 @@
     "@storybook/react": "^7.0.6",
     "@storybook/react-vite": "^7.0.6",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react-swc": "^3.0.0",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -22,8 +22,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "vite": "^4.2.0",
     "@rollup/plugin-typescript": "^11.1.0",

diff --git a/packages/suika/global.d.ts b/packages/suika/global.d.ts
diff --git a/packages/suika/index.html b/packages/suika/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>suika</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/suika/package.json b/packages/suika/package.json
@@ -3,65 +3,53 @@
   "version": "0.0.1",
   "description": "a graph editor.",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@floating-ui/react": "^0.22.3",
-    "@suika/components": "workspace:^",
     "@suika/common": "workspace:^",
-    "@suika/icons": "workspace:^",
+    "@suika/components": "workspace:^",
     "@suika/geo": "workspace:^",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@suika/icons": "workspace:^",
     "ahooks": "^3.7.4",
     "classnames": "^2.3.2",
-    "immer": "^10.0.3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "rbush": "^3.0.1",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.2",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
-    "uuid": "^9.0.0",
-    "web-vitals": "^2.1.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "stats.js": "^0.17.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/rbush": "^3.0.0",
+    "@types/react": "^18.2.25",
     "@types/react-color": "^3.0.6",
-    "@types/stats.js": "^0.17.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/stats.js": "^0.17.3",
     "@types/uuid": "^9.0.2",
-    "stats.js": "^0.17.0"
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "sass": "^1.70.0",
+    "vite": "^5.0.8"
   }
 }
diff --git a/packages/suika/public/favicon.ico b/packages/suika/public/favicon.ico
diff --git a/packages/suika/public/index.html b/packages/suika/public/index.html
diff --git a/packages/suika/public/logo192.png b/packages/suika/public/logo192.png
diff --git a/packages/suika/public/logo512.png b/packages/suika/public/logo512.png
diff --git a/packages/suika/public/manifest.json b/packages/suika/public/manifest.json
diff --git a/packages/suika/public/robots.txt b/packages/suika/public/robots.txt
diff --git a/packages/suika/public/vite.svg b/packages/suika/public/vite.svg
diff --git a/packages/suika/src/App.tsx b/packages/suika/src/App.tsx
@@ -6,11 +6,6 @@ import { useEffect, useState } from 'react';
 import { appEventEmitter } from './events';
 import { SupportedLocale } from './locale';
 
-// FIXME: terrible code
-if (process.env.NODE_ENV !== 'development') {
-  require('@suika/components/dist/style.css');
-}
-
 const messageMap = {
   zh,
   en,

diff --git a/packages/suika/src/components/Cards/TextureCard/TextureCard.tsx b/packages/suika/src/components/Cards/TextureCard/TextureCard.tsx
@@ -18,6 +18,7 @@ import { IconButton, Popover } from '@suika/components';
 import { ColorHexInput } from '../../input/ColorHexInput';
 import { AddOutlined, RemoveOutlined } from '@suika/icons';
 import { arrMapRevert } from '../../../utils/array_util';
+import { FormattedMessage } from 'react-intl';
 
 const isNearWhite = (rgba: IRGBA, threshold = 85) => {
   const { r, g, b } = rgba;
@@ -79,9 +80,7 @@ export const TextureCard: FC<IProps> = ({
         }
       >
         {/* TODO: different types with empty and different types with filled */}
-        {/* <div style={{ marginLeft: 16 }}>
-          <FormattedMessage id="mixed" />
-        </div> */}
+        <></>
       </BaseCard>
     );
   }

diff --git a/packages/suika/src/index.tsx b/packages/suika/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
@@ -12,8 +11,3 @@ root.render(
     <App />
   </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/packages/suika/src/react-app-env.d.ts b/packages/suika/src/react-app-env.d.ts
diff --git a/packages/suika/src/reportWebVitals.ts b/packages/suika/src/reportWebVitals.ts
diff --git a/packages/suika/src/setupTests.ts b/packages/suika/src/setupTests.ts
diff --git a/packages/suika/src/vite-env.d.ts b/packages/suika/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/suika/tsconfig.json b/packages/suika/tsconfig.json
@@ -22,5 +22,7 @@
       "@suika/components": ["../components/src"],
       "@suika/geo": ["../geo/src"]
     }
-  }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/suika/tsconfig.node.json b/packages/suika/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/suika/vite.config.ts b/packages/suika/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build',
+  },
+});