Merge branch 'feature/migrate-vite' of https://github.com/msdio/skill-set-generator

msdio · msdio · commit 8d5934f2d369 · 2023-04-19T16:52:19.000+09:00
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 /.pnp
@@ -10,6 +8,9 @@
 
 # production
 /build
+dist
+dist-ssr
+*.local
 
 # misc
 .DS_Store
@@ -18,8 +19,12 @@
 .env.test.local
 .env.production.local
 
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 .env
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0066FF" />
+    <meta name="description" content="Create skill set for project" />
+    <meta property="og:title" content="stackticon" />
+    <meta
+      property="og:image"
+      content="https://user-images.githubusercontent.com/59170680/224671255-09ba02cd-873e-4559-bf08-4d48040f6c14.png"
+    />
+    <meta property="og:description" content="Create skill set for project" />
+
+    <link rel="apple-touch-icon" href="/favicon.png" />
+
+    <link rel="manifest" href="/manifest.json" />
+
+    <title>Stackticon</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
   "license": "MIT",
   "homepage": ".",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --watchAll",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "jest --watchAll",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build"
   },
@@ -49,9 +49,7 @@
     "react-dom": "^18.2.0",
     "react-ga4": "^2.0.0",
     "react-router-dom": "^6.8.1",
-    "react-scripts": "5.0.1",
-    "simple-icons": "^8.5.0",
-    "web-vitals": "^2.1.0"
+    "simple-icons": "^8.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
@@ -64,6 +62,7 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-react": "^1.1.7",
@@ -75,6 +74,8 @@
     "jest": "^29.5.0",
     "prettier": "2.8.4",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^4.2.1",
+    "vite-tsconfig-paths": "^4.2.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Stackticon",
+  "name": "Stackticon App",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -1,11 +1,13 @@
 import Loading from 'components/loading';
 import RequireState from 'components/requireState';
-import BackgroundColors from 'pages/background-colors';
-import Home from 'pages/home';
 import Cute404 from 'pages/page404/Cute404';
-import Result from 'pages/result';
+import { lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+const Home = lazy(() => import('pages/home'));
+const BackgroundColors = lazy(() => import('pages/background-colors'));
+const Result = lazy(() => import('pages/result'));
+
 const Router = () => (
   <Routes>
     <Route path='/' element={<Home />} />
diff --git a/src/RouterContainer.tsx b/src/RouterContainer.tsx
@@ -1,13 +1,18 @@
 import { Box } from '@mui/material';
+import { Suspense } from 'react';
 import Router from 'Router';
 import GoogleAnalyticsTracker from 'services/google-analytics/GoogleAnalyticsTracker';
 
+const loading = <div>Assembling UIs...</div>;
+
 const RouterContainer = () => {
   GoogleAnalyticsTracker();
 
   return (
     <Box bgcolor='background.default' width='100vw' height='fit-content' minHeight='100vh'>
-      <Router />
+      <Suspense fallback={loading}>
+        <Router />
+      </Suspense>
     </Box>
   );
 };
diff --git a/src/assets/icons/logoWithBackground.tsx b/src/assets/icons/logoWithBackground.tsx
@@ -1,5 +1,7 @@
 import { Box } from '@mui/material';
 
+import Logo from '../images/logo.png';
+
 interface LogoProps {
   width: number;
   height: number;
@@ -17,12 +19,7 @@ const LogoWithBackground = ({ width, height }: LogoProps) => {
       height={`${height}px`}
       gap='9.6px'
     >
-      <img
-        src={require('../images/logo.png')}
-        alt='logo'
-        width={`${width - 2}px)`}
-        height={`calc(${height - 2}px)`}
-      />
+      <img src={Logo} alt='logo' width={`${width - 2}px)`} height={`calc(${height - 2}px)`} />
     </Box>
   );
 };
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -3,7 +3,7 @@ import { Box, Link, Stack, SvgIcon, Typography } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LogoWithBackground from 'assets/icons/logoWithBackground';
 import { APP_NAME, GITHUB_LINK } from 'constants/constants';
-import { Svg } from 'constants/Svg';
+import { Svg } from 'constants/svgs';
 import { Link as RLink } from 'react-router-dom';
 
 const Container = styled.header`
diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx
@@ -6,6 +6,9 @@ import { JavascriptIcon, NodeJSIcon, ReactIcon, SpringIcon } from 'constants/ico
 import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import LandingImage from '../../assets/images/landing-image.png';
+import LandingLabel from '../../assets/images/landing-label.png';
+
 const Landing = ({ isMobile }: { isMobile: boolean }) => {
   const [skills, setSkills] = useState<string[]>([]);
   const [buttonClicked, setButtonClicked] = useState(false);
@@ -46,14 +49,9 @@ const Landing = ({ isMobile }: { isMobile: boolean }) => {
           scale: isMobile ? '0.7' : '1',
         }}
       >
+        <img src={LandingImage} alt='landing-image' width='406px' height='144px' />
         <img
-          src={require('../../assets/images/landing-image.png')}
-          alt='landing-image'
-          width='406px'
-          height='144px'
-        />
-        <img
-          src={require('../../assets/images/landing-label.png')}
+          src={LandingLabel}
           alt='landing-label'
           width='312px'
           height='52px'
diff --git a/src/constants/icons.tsx b/src/constants/icons.tsx
@@ -1,6 +1,6 @@
 import { SvgIcon } from '@mui/material';
 
-import { Svg } from './Svg';
+import { Svg } from './svgs';
 
 export const JavascriptIcon = () => (
   <SvgIcon viewBox='0 0 24 24' fontSize='inherit'>
diff --git a/src/constants/svgs.ts b/src/constants/svgs.ts
diff --git a/src/pages/result/Result.tsx b/src/pages/result/Result.tsx
@@ -6,6 +6,8 @@ import ButtonOptions from 'components/button-options/ButtonOptions';
 import Header from 'components/header';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
+import LandingLabel from '../../assets/images/landing-label.png';
+
 const Container = styled.div`
   position: absolute;
   top: 50%;
@@ -43,7 +45,7 @@ const Result = () => {
       <Header />
       <Container>
         <img
-          src={require('../../assets/images/landing-label.png')}
+          src={LandingLabel}
           alt='landing-label'
           width='312px'
           height='52px'
diff --git a/src/services/firebase/initialize.ts b/src/services/firebase/initialize.ts
@@ -2,13 +2,13 @@ import { initializeApp } from 'firebase/app';
 import { getStorage } from 'firebase/storage';
 
 const firebaseConfig = {
-  apiKey: process.env.REACT_APP_API_KEY,
-  authDomain: process.env.REACT_APP_AUTHDOMAIN,
-  projectId: process.env.REACT_APP_PROJECT_ID,
-  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-  appId: process.env.REACT_APP_APP_ID,
-  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
+  apiKey: import.meta.env.VITE_API_KEY,
+  authDomain: import.meta.env.VITE_AUTHDOMAIN,
+  projectId: import.meta.env.VITE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_APP_ID,
+  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
 };
 
 const app = initializeApp(firebaseConfig);
diff --git a/src/services/google-analytics/GoogleAnalyticsTracker.tsx b/src/services/google-analytics/GoogleAnalyticsTracker.tsx
@@ -8,7 +8,7 @@ const GoogleAnalyticsTracker = () => {
 
   useEffect(() => {
     if (!window.location.href.includes('localhost')) {
-      ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID as string);
+      ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID as string);
     }
     setInitialized(true);
   }, []);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,21 +1,22 @@
 {
   "compilerOptions": {
     "baseUrl": "src",
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock
