Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Commit

Permalink
refactor: replace bundler from react-script to Vite
Browse files Browse the repository at this point in the history
  • Loading branch information
therealemjy committed Jun 24, 2024
1 parent a2faba6 commit e934dfd
Show file tree
Hide file tree
Showing 22 changed files with 4,102 additions and 6,165 deletions.
8 changes: 1 addition & 7 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,7 @@ module.exports = {
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
'**/*.stories.tsx',
'**/*.stories.ts',
'src/stories/**',
'**/*.spec.tsx',
'src/setupTests.ts',
],
devDependencies: true,
},
],
// Custom
Expand Down
8 changes: 4 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
.idea

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Generated subgraph (GraphQL) client
src/subgraph/client
8 changes: 5 additions & 3 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@
-->
<link rel="manifest" href="https://venus.io/manifest.json" />
<!--
Notice the use of https://venus.io in the tags above.
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "https://venus.io/favicon.ico" will
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
Expand All @@ -67,7 +67,7 @@
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://venus.io/share.png" />
<meta name="twitter:image:src" content="https://venus.io/share.png" />
<meta name="theme-color" content="#3A78FF" />

<meta property="og:title" content="Venus Protocol" />
Expand All @@ -94,5 +94,7 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->

<script type="module" src="/src/index.tsx"></script>
</body>
</html>
44 changes: 26 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,29 @@
"homepage": "https://venus.io/",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@tanstack/react-query": "^5.40.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.7.13",
"@types/react": "^17.0.40",
"@types/react-dom": "^17.0.13",
"axios": "^0.26.1",
"classnames": "^2.3.1",
"normalize.css": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-particles": "2.9.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-scrolllock": "^5.0.1",
"tsparticles": "2.9.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"predeploy": "npm run build",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"lint:fix": "yarn lint --fix && yarn pretty --write",
"lint": "eslint .",
"lint": "yarn run eslint .",
"pretty": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,html,json,md}\" public/**/*.html --check"
},
"browserslist": {
Expand All @@ -46,12 +41,22 @@
]
},
"devDependencies": {
"@types/jest": "^29.5.12",
"@types/node": "^20.12.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^9.0.0",
"eslint": "^8",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.2",
"husky": "^7.0.4",
"lint-staged": "^12.3.5",
"postcss": "^8.4.8",
Expand All @@ -64,7 +69,10 @@
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewired": "^2.2.1",
"react-snap": "^1.23.0",
"typescript": "^4.6.2"
"typescript": "^5.4.5",
"vite": "^5.3.1",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.3.2"
},
"resolutions": {
"postcss": "^8.4.8"
Expand Down
2 changes: 1 addition & 1 deletion src/api/constants.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const getTokenPublicUrl = (filePath: string) =>
`${process.env.PUBLIC_URL}/coins/${filePath}`;
`/coins/${filePath}`;

export const tokenIconUrls = {
UNI: getTokenPublicUrl('uni.svg'),
Expand Down
19 changes: 12 additions & 7 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MainContent from './MainContent/MainContent';
import Footer from './Footer/Footer';
import s from './App.module.css';
Expand All @@ -13,6 +14,8 @@ function Main() {
);
}

const queryClient = new QueryClient();

function App() {
useEffect(() => {
if (window.location.pathname.startsWith('/discord')) {
Expand All @@ -21,13 +24,15 @@ function App() {
}, [window.location.pathname]);

return (
<BrowserRouter>
<Routes>
{['/', '/discord'].map(path => (
<Route path={path} element={<Main />} key={path} />
))}
</Routes>
</BrowserRouter>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
{['/', '/discord'].map(path => (
<Route path={path} element={<Main />} key={path} />
))}
</Routes>
</BrowserRouter>
</QueryClientProvider>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import cn from 'classnames';
import s from './Banner.module.css';
import { ReactComponent as Close } from './assets/close.svg';
import Close from './assets/close.svg?react';

interface IBannerProps {
className?: string;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Benefits/Benefits.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import cn from 'classnames';
import { ReactComponent as Octahedron } from './assets/1.svg';
import { ReactComponent as Shield } from './assets/2.svg';
import { ReactComponent as Dots } from './assets/3.svg';
import Octahedron from './assets/1.svg?react';
import Shield from './assets/2.svg?react';
import Dots from './assets/3.svg?react';
import Container from '../Container/Container';
import s from './Benefits.module.css';

Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import cn from 'classnames';
import Container from '../Container/Container';
import NavigationLinks from '../NavigationLinks/NavigationLinks';
import { ReactComponent as Logo } from '../Header/assets/logo.svg';
import { ReactComponent as LogoMobile } from './assets/logoSmall.svg';
import Logo from '../Header/assets/logo.svg?react';
import LogoMobile from './assets/logoSmall.svg?react';
import SocialLinks from './SocialLinks';
import s from './Footer.module.css';
import Link from '../Link/Link';
Expand Down
8 changes: 4 additions & 4 deletions src/components/Footer/SocialLinks.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import cn from 'classnames';
import { ReactComponent as IconTelegram } from './assets/telegram.svg';
import { ReactComponent as IconDiscord } from './assets/discord.svg';
import { ReactComponent as IconTwitter } from './assets/twitter.svg';
import { ReactComponent as IconGithub } from './assets/github.svg';
import IconTelegram from './assets/telegram.svg?react';
import IconDiscord from './assets/discord.svg?react';
import IconTwitter from './assets/twitter.svg?react';
import IconGithub from './assets/github.svg?react';
import s from './SocialLinks.module.css';

interface ISocialLinksProps {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import ScrollLock from 'react-scrolllock';
import cn from 'classnames';
import { ReactComponent as Logo } from './assets/logo.svg';
import Logo from './assets/logo.svg?react';
import NavigationLinks from '../NavigationLinks/NavigationLinks';
import MenuMobile from './MenuMobile';
import LinkLaunchApp from '../Link/LinkLaunchApp';
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainContent/Intro.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Container from '../Container/Container';
import { ReactComponent as IconArrow } from './assets/arrow.svg';
import IconArrow from './assets/arrow.svg?react';
import LinkLaunchApp from '../Link/LinkLaunchApp';
import Link from '../Link/Link';
import s from './Intro.module.css';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Safety/Auditor.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import s from './Safety.module.css';
import { ReactComponent as Arrow } from './assets/arrow.svg';
import Arrow from './assets/arrow.svg?react';

interface ISafetyProps {
className?: string;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Safety/SafetyScore.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import s from './Safety.module.css';
import { ReactComponent as Score90 } from './assets/score90.svg';
import Score90 from './assets/score90.svg?react';

interface ISafetyProps {
className?: string;
Expand Down
30 changes: 15 additions & 15 deletions src/components/Safety/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import React from 'react';
import cn from 'classnames';
import Container from '../Container/Container';
import { ReactComponent as PessimisticLogo } from './assets/pessimisticLogo.svg';
import { ReactComponent as PessimisticLogoGray } from './assets/pessimisticLogoGray.svg';
import { ReactComponent as CantinaLogo } from './assets/cantinaLogo.svg';
import { ReactComponent as CantinaLogoGray } from './assets/cantinaLogoGray.svg';
import { ReactComponent as PeckShieldLogo } from './assets/peckShieldLogo.svg';
import { ReactComponent as PeckShieldLogoGray } from './assets/peckShieldLogoGray.svg';
import { ReactComponent as CertikLogo } from './assets/certikLogo.svg';
import { ReactComponent as CertikLogoGray } from './assets/certikLogoGray.svg';
import { ReactComponent as OpenZeppelinLogo } from './assets/openZeppelinLogo.svg';
import { ReactComponent as OpenZeppelinLogoGray } from './assets/openZeppelinLogoGray.svg';
import { ReactComponent as QuantstampLogo } from './assets/quantstampLogo.svg';
import { ReactComponent as QuantstampLogoGray } from './assets/quantstampLogoGray.svg';
import { ReactComponent as Code4renaLogo } from './assets/code4renaLogo.svg';
import { ReactComponent as Code4renaLogoGray } from './assets/code4renaLogoGray.svg';
import PessimisticLogo from './assets/pessimisticLogo.svg?react';
import PessimisticLogoGray from './assets/pessimisticLogoGray.svg?react';
import CantinaLogo from './assets/cantinaLogo.svg?react';
import CantinaLogoGray from './assets/cantinaLogoGray.svg?react';
import PeckShieldLogo from './assets/peckShieldLogo.svg?react';
import PeckShieldLogoGray from './assets/peckShieldLogoGray.svg?react';
import CertikLogo from './assets/certikLogo.svg?react';
import CertikLogoGray from './assets/certikLogoGray.svg?react';
import OpenZeppelinLogo from './assets/openZeppelinLogo.svg?react';
import OpenZeppelinLogoGray from './assets/openZeppelinLogoGray.svg?react';
import QuantstampLogo from './assets/quantstampLogo.svg?react';
import QuantstampLogoGray from './assets/quantstampLogoGray.svg?react';
import Code4renaLogo from './assets/code4renaLogo.svg?react';
import Code4renaLogoGray from './assets/code4renaLogoGray.svg?react';
import s from './Safety.module.css';
import SafetyScore from './SafetyScore';
import Auditor from './Auditor';
Expand Down Expand Up @@ -80,7 +80,7 @@ const Safety: React.FC<ISafetyProps> = ({ className }) => (
<SafetyScore className={s.safetyScoreMobile} />
<div className={s.logos}>
{auditors.map(a => (
<Auditor auditor={a} />
<Auditor key={`${a.href}-${a.audits}`} auditor={a} />
))}
<OtherAuditors />
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import { hydrate, render } from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import 'normalize.css';
import './assets/styles/index.css';

const rootElement = document.getElementById('root');
if (rootElement?.hasChildNodes()) {
hydrate(<App />, rootElement);
} else {
render(<App />, rootElement);
}
// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app')!);
root.render(<App />);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
Expand Down
1 change: 0 additions & 1 deletion src/react-app-env.d.ts

This file was deleted.

7 changes: 7 additions & 0 deletions src/types/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
declare module '*.svg' {
import React = require('react');

export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
11 changes: 5 additions & 6 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"moduleResolution": "bundler",
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"types": ["vite/client"]
},
"include": [
"src"
]
"exclude": ["node_modules"]
}

2 changes: 2 additions & 0 deletions vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />
12 changes: 12 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
plugins: [react(), viteTsconfigPaths(), svgr()],
build: {
sourcemap: true,
outDir: 'build',
},
});
Loading

0 comments on commit e934dfd

Please sign in to comment.