Skip to content

Commit 9fec3d2

Browse files
committed
⚒️ Migrate to Vite
1 parent 26daf2c commit 9fec3d2

File tree

94 files changed

+11360
-482
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+11360
-482
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules/
2+
.env
23
.env.prod
34
.env.dev
45
dist/

404.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
<body>
1313
<div id="app"></div>
14+
15+
<script type="module" src="/src/index.jsx"></script>
1416
</body>
1517

1618
</html>

index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
<body>
1313
<div id="app"></div>
14+
15+
<script type="module" src="/src/index.jsx"></script>
1416
</body>
1517

1618
</html>

jsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
"noUnusedParameters": true
77
},
88
"include": [
9-
"src"
9+
"./src"
1010
]
1111
}

package.json

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,13 @@
1111
],
1212
"license": "MIT",
1313
"scripts": {
14-
"serve": "live-server dist/",
15-
"build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js",
16-
"dev-server": "webpack serve --config webpack/dev.config.js",
14+
"dev": "vite",
15+
"build": "vite build && cd dist && cp index.html 404.html",
16+
"serve": "vite preview",
1717
"test": "cross-env NODE_ENV=test jest --config=jest.config.json"
1818
},
1919
"devDependencies": {
20-
"@babel/core": "^7.14.0",
21-
"@babel/plugin-proposal-class-properties": "^7.13.0",
22-
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
23-
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
24-
"@babel/polyfill": "^7.11.5",
25-
"@babel/preset-env": "^7.14.0",
26-
"@babel/preset-react": "^7.13.13",
27-
"babel-eslint": "^10.1.0",
28-
"babel-loader": "^8.2.2",
29-
"clean-webpack-plugin": "^3.0.0",
20+
"@vitejs/plugin-react": "^2.0.0",
3021
"copy-webpack-plugin": "^8.1.1",
3122
"cross-env": "^7.0.3",
3223
"css-loader": "^5.2.4",
@@ -48,12 +39,13 @@
4839
"jest": "^26.6.3",
4940
"live-server": "^1.2.1",
5041
"mini-css-extract-plugin": "^1.6.0",
51-
"node-sass": "^5.0.0",
5242
"optimize-css-assets-webpack-plugin": "^5.0.4",
5343
"raf": "^3.4.1",
44+
"sass": "^1.53.0",
5445
"sass-loader": "^11.0.1",
5546
"uglifyjs-webpack-plugin": "^2.2.0",
5647
"url-loader": "^4.1.1",
48+
"vite": "^3.0.2",
5749
"webpack": "^5.36.2",
5850
"webpack-cli": "^4.6.0",
5951
"webpack-dev-server": "^3.11.2",

src/App.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* eslint-disable react/forbid-prop-types */
2-
import { Preloader } from 'components/common';
2+
import { Preloader } from '@/components/common';
33
import PropType from 'prop-types';
44
import React, { StrictMode } from 'react';
55
import { Provider } from 'react-redux';
66
import { PersistGate } from 'redux-persist/integration/react';
7-
import AppRouter from 'routers/AppRouter';
7+
import AppRouter from '@/routers/AppRouter';
88

99
const App = ({ store, persistor }) => (
1010
<StrictMode>

src/components/basket/Basket.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* eslint-disable max-len */
2-
import { BasketItem, BasketToggle } from 'components/basket';
3-
import { Boundary, Modal } from 'components/common';
4-
import { CHECKOUT_STEP_1 } from 'constants/routes';
2+
import { BasketItem, BasketToggle } from '@/components/basket';
3+
import { Boundary, Modal } from '@/components/common';
4+
import { CHECKOUT_STEP_1 } from '@/constants/routes';
55
import firebase from 'firebase/firebase';
6-
import { calculateTotal, displayMoney } from 'helpers/utils';
7-
import { useDidMount, useModal } from 'hooks';
6+
import { calculateTotal, displayMoney } from '@/helpers/utils';
7+
import { useDidMount, useModal } from '@/hooks';
88
import React, { useEffect } from 'react';
99
import { useDispatch, useSelector } from 'react-redux';
1010
import { useHistory, useLocation } from 'react-router-dom';
11-
import { clearBasket } from 'redux/actions/basketActions';
11+
import { clearBasket } from '@/redux/actions/basketActions';
1212

1313
const Basket = () => {
1414
const { isOpenModal, onOpenModal, onCloseModal } = useModal();

src/components/basket/BasketItem.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { CloseOutlined } from '@ant-design/icons';
2-
import { BasketItemControl } from 'components/basket';
3-
import { ImageLoader } from 'components/common';
4-
import { displayMoney } from 'helpers/utils';
2+
import { BasketItemControl } from '@/components/basket';
3+
import { ImageLoader } from '@/components/common';
4+
import { displayMoney } from '@/helpers/utils';
55
import PropType from 'prop-types';
66
import React from 'react';
77
import { useDispatch } from 'react-redux';
88
import { Link } from 'react-router-dom';
9-
import { removeFromBasket } from 'redux/actions/basketActions';
9+
import { removeFromBasket } from '@/redux/actions/basketActions';
1010

1111
const BasketItem = ({ product }) => {
1212
const dispatch = useDispatch();

src/components/basket/BasketItemControl.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
22
import PropType from 'prop-types';
33
import React from 'react';
44
import { useDispatch } from 'react-redux';
5-
import { addQtyItem, minusQtyItem } from 'redux/actions/basketActions';
5+
import { addQtyItem, minusQtyItem } from '@/redux/actions/basketActions';
66

77
const BasketItemControl = ({ product }) => {
88
const dispatch = useDispatch();

src/components/common/AdminNavigation.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ADMIN_DASHBOARD } from 'constants/routes';
2-
import logo from 'images/logo-full.png';
1+
import { ADMIN_DASHBOARD } from '@/constants/routes';
2+
import logo from '@/images/logo-full.png';
33
import React from 'react';
44
import { useSelector } from 'react-redux';
55
import { Link } from 'react-router-dom';
6-
import UserAvatar from 'views/account/components/UserAvatar';
6+
import UserAvatar from '@/views/account/components/UserAvatar';
77

88
const AdminNavigation = () => {
99
const { isAuthenticating, profile } = useSelector((state) => ({

src/components/common/AdminSidePanel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ADMIN_PRODUCTS } from 'constants/routes';
1+
import { ADMIN_PRODUCTS } from '@/constants/routes';
22
import React from 'react';
33
import { NavLink } from 'react-router-dom';
44

src/components/common/Filters.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/* eslint-disable no-nested-ternary */
2-
import { useDidMount } from 'hooks';
2+
import { useDidMount } from '@/hooks';
33
import PropType from 'prop-types';
44
import React, { useEffect, useState } from 'react';
55
import { useDispatch, useSelector } from 'react-redux';
66
import { useHistory, withRouter } from 'react-router-dom';
7-
import { applyFilter, resetFilter } from 'redux/actions/filterActions';
8-
import { selectMax, selectMin } from 'selectors/selector';
7+
import { applyFilter, resetFilter } from '@/redux/actions/filterActions';
8+
import { selectMax, selectMin } from '@/selectors/selector';
99
import PriceRange from './PriceRange';
1010

1111
const Filters = ({ closeModal }) => {

src/components/common/FiltersToggle.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useModal } from 'hooks';
1+
import { useModal } from '@/hooks';
22
import PropType from 'prop-types';
33
import React from 'react';
44
import Filters from './Filters';

src/components/common/Footer.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as Route from 'constants/routes';
2-
import logo from 'images/logo-full.png';
1+
import * as Route from '@/constants/routes';
2+
import logo from '@/images/logo-full.png';
33
import React from 'react';
44
import { useLocation } from 'react-router-dom';
55

src/components/common/ImageLoader.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ ImageLoader.defaultProps = {
3535

3636
ImageLoader.propTypes = {
3737
src: PropType.string.isRequired,
38-
alt: PropType.string.isRequired,
38+
alt: PropType.string,
3939
className: PropType.string
4040
};
4141

src/components/common/MobileNavigation.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { BasketToggle } from 'components/basket';
2-
import { HOME, SIGNIN } from 'constants/routes';
1+
import { BasketToggle } from '@/components/basket';
2+
import { HOME, SIGNIN } from '@/constants/routes';
33
import PropType from 'prop-types';
44
import React from 'react';
55
import { Link, useLocation } from 'react-router-dom';
6-
import UserNav from 'views/account/components/UserAvatar';
6+
import UserNav from '@/views/account/components/UserAvatar';
77
import Badge from './Badge';
88
import FiltersToggle from './FiltersToggle';
99
import SearchBar from './SearchBar';

src/components/common/Navigation.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable indent */
22
import { FilterOutlined, ShoppingOutlined } from '@ant-design/icons';
3-
import * as ROUTE from 'constants/routes';
4-
import logo from 'images/logo-full.png';
3+
import * as ROUTE from '@/constants/routes';
4+
import logo from '@/images/logo-full.png';
55
import React, { useEffect, useRef } from 'react';
66
import { useSelector } from 'react-redux';
77
import {
88
Link, NavLink, useLocation
99
} from 'react-router-dom';
10-
import UserAvatar from 'views/account/components/UserAvatar';
10+
import UserAvatar from '@/views/account/components/UserAvatar';
1111
import BasketToggle from '../basket/BasketToggle';
1212
import Badge from './Badge';
1313
import FiltersToggle from './FiltersToggle';

src/components/common/SearchBar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { SearchOutlined } from '@ant-design/icons';
33
import React, { useRef, useState } from 'react';
44
import { useDispatch, useSelector } from 'react-redux';
55
import { useHistory } from 'react-router-dom';
6-
import { clearRecentSearch, removeSelectedRecent } from 'redux/actions/filterActions';
6+
import { clearRecentSearch, removeSelectedRecent } from '@/redux/actions/filterActions';
77

88
const SearchBar = () => {
99
const [searchInput, setSearchInput] = useState('');

src/components/common/SocialLogin.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FacebookOutlined, GithubFilled, GoogleOutlined } from '@ant-design/icon
22
import PropType from 'prop-types';
33
import React from 'react';
44
import { useDispatch } from 'react-redux';
5-
import { signInWithFacebook, signInWithGithub, signInWithGoogle } from 'redux/actions/authActions';
5+
import { signInWithFacebook, signInWithGithub, signInWithGoogle } from '@/redux/actions/authActions';
66

77
const SocialLogin = ({ isLoading }) => {
88
const dispatch = useDispatch();

src/components/product/ProductAppliedFilters.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
33
import PropType from 'prop-types';
44
import React from 'react';
55
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
6-
import { applyFilter } from 'redux/actions/filterActions';
6+
import { applyFilter } from '@/redux/actions/filterActions';
77

88
const ProductAppliedFilters = ({ filteredProductsCount }) => {
99
const filter = useSelector((state) => state.filter, shallowEqual);

src/components/product/ProductFeatured.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ImageLoader } from 'components/common';
1+
import { ImageLoader } from '@/components/common';
22
import PropType from 'prop-types';
33
import React from 'react';
44
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

src/components/product/ProductGrid.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useBasket } from 'hooks';
1+
import { useBasket } from '@/hooks';
22
import PropType from 'prop-types';
33
import React from 'react';
44
import ProductItem from './ProductItem';

src/components/product/ProductItem.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CheckOutlined } from '@ant-design/icons';
2-
import { ImageLoader } from 'components/common';
3-
import { displayMoney } from 'helpers/utils';
2+
import { ImageLoader } from '@/components/common';
3+
import { displayMoney } from '@/helpers/utils';
44
import PropType from 'prop-types';
55
import React from 'react';
66
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

src/components/product/ProductList.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* eslint-disable react/forbid-prop-types */
2-
import { Boundary, MessageDisplay } from 'components/common';
2+
import { Boundary, MessageDisplay } from '@/components/common';
33
import PropType from 'prop-types';
44
import React, { useEffect, useState } from 'react';
55
import { useDispatch } from 'react-redux';
6-
import { setLoading } from 'redux/actions/miscActions';
7-
import { getProducts } from 'redux/actions/productActions';
6+
import { setLoading } from '@/redux/actions/miscActions';
7+
import { getProducts } from '@/redux/actions/productActions';
88

99
const ProductList = (props) => {
1010
const {

src/components/product/ProductSearch.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Filters } from 'components/common';
1+
import { Filters } from '@/components/common';
22
import React, { useEffect, useRef } from 'react';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { useHistory } from 'react-router-dom';
5-
import { clearRecentSearch, removeSelectedRecent, setTextFilter } from 'redux/actions/filterActions';
5+
import { clearRecentSearch, removeSelectedRecent, setTextFilter } from '@/redux/actions/filterActions';
66

77
const ProductSearch = () => {
88
const history = useHistory();

src/components/product/ProductShowcaseGrid.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react/forbid-prop-types */
2-
import { FeaturedProduct } from 'components/product';
2+
import { FeaturedProduct } from '@/components/product';
33
import PropType from 'prop-types';
44
import React from 'react';
55

src/hooks/useBasket.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { displayActionMessage } from 'helpers/utils';
1+
import { displayActionMessage } from '@/helpers/utils';
22
import { useDispatch, useSelector } from 'react-redux';
3-
import { addToBasket as dispatchAddToBasket, removeFromBasket } from 'redux/actions/basketActions';
3+
import { addToBasket as dispatchAddToBasket, removeFromBasket } from '@/redux/actions/basketActions';
44

55
const useBasket = () => {
66
const { basket } = useSelector((state) => ({ basket: state.basket }));

src/hooks/useFeaturedProducts.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useDidMount } from 'hooks';
1+
import { useDidMount } from '@/hooks';
22
import { useEffect, useState } from 'react';
3-
import firebase from 'services/firebase';
3+
import firebase from '@/services/firebase';
44

55
const useFeaturedProducts = (itemsCount) => {
66
const [featuredProducts, setFeaturedProducts] = useState([]);

src/hooks/useProduct.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useDidMount } from 'hooks';
1+
import { useDidMount } from '@/hooks';
22
import { useEffect, useState } from 'react';
33
import { useSelector } from 'react-redux';
4-
import firebase from 'services/firebase';
4+
import firebase from '@/services/firebase';
55

66
const useProduct = (id) => {
77
// get and check if product exists in store

src/hooks/useRecommendedProducts.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useDidMount } from 'hooks';
1+
import { useDidMount } from '@/hooks';
22
import { useEffect, useState } from 'react';
3-
import firebase from '../services/firebase';
3+
import firebase from '@/services/firebase';
44

55
const useRecommendedProducts = (itemsCount) => {
66
const [recommendedProducts, setRecommendedProducts] = useState([]);

src/index.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Preloader } from 'components/common';
1+
import { Preloader } from '@/components/common';
22
import 'normalize.css/normalize.css';
33
import React from 'react';
44
import { render } from 'react-dom';
55
import 'react-phone-input-2/lib/style.css';
6-
import { onAuthStateFail, onAuthStateSuccess } from 'redux/actions/authActions';
7-
import configureStore from 'redux/store/store';
8-
import 'styles/style.scss';
6+
import { onAuthStateFail, onAuthStateSuccess } from '@/redux/actions/authActions';
7+
import configureStore from '@/redux/store/store';
8+
import '@/styles/style.scss';
99
import WebFont from 'webfontloader';
1010
import App from './App';
11-
import firebase from './services/firebase';
11+
import firebase from '@/services/firebase';
1212

1313
WebFont.load({
1414
google: {

src/redux/actions/authActions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as type from 'constants/constants';
1+
import * as type from '@/constants/constants';
22

33
export const signIn = (email, password) => ({
44
type: type.SIGNIN,

src/redux/actions/basketActions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
CLEAR_BASKET,
44
MINUS_QTY_ITEM, REMOVE_FROM_BASKET,
55
SET_BASKET_ITEMS
6-
} from 'constants/constants';
6+
} from '@/constants/constants';
77

88
export const setBasketItems = (items = []) => ({
99
type: SET_BASKET_ITEMS,

src/redux/actions/checkoutActions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
RESET_CHECKOUT, SET_CHECKOUT_PAYMENT_DETAILS, SET_CHECKOUT_SHIPPING_DETAILS
3-
} from 'constants/constants';
3+
} from '@/constants/constants';
44

55
export const setShippingDetails = (details) => ({
66
type: SET_CHECKOUT_SHIPPING_DETAILS,

src/redux/actions/filterActions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
REMOVE_SELECTED_RECENT, RESET_FILTER, SET_BRAND_FILTER,
55
SET_MAX_PRICE_FILTER,
66
SET_MIN_PRICE_FILTER, SET_TEXT_FILTER
7-
} from 'constants/constants';
7+
} from '@/constants/constants';
88

99
export const setTextFilter = (keyword) => ({
1010
type: SET_TEXT_FILTER,

0 commit comments

Comments
 (0)