Skip to content

Commit 10ad3f7

Browse files
alpanayotovalpanayotov
authored
Migrate to Vitejs (#2244)
1 parent c5cf51e commit 10ad3f7

Some content is hidden

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

67 files changed

+2556
-3756
lines changed

‎.env

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,2 @@
1-
# PWA configuration settings
2-
APP_NAME=React Template
3-
APP_SHORT_NAME=React TPL
4-
APP_DESCRIPTION=A React application!
5-
APP_BACKGROUND_COLOR=#cccccc
6-
APP_THEME_COLOR=#333333
7-
APP_ICON=src/assets/icon-512x512.png
8-
9-
# Comma separated paths to SCSS files which will be included in each SCSS file
10-
SCSS_IMPORTS=./src/assets/styles/settings.scss,./src/assets/styles/functions.scss,./src/assets/styles/mixins.scss
1+
# ENV Variable must be prefixed with VITE_ in order to be accessible
2+
# for reference https://vitejs.dev/guide/env-and-mode.html#env-files

‎.env.example

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# ENV Variable must be prefixed with VITE_ in order to be accessible
2+
# for reference https://vitejs.dev/guide/env-and-mode.html#env-files

‎.gitignore

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ node_modules/
1616
.Trashes
1717
ehthumbs.db
1818
Thumbs.db
19+
.env
1920

2021
# Build
21-
/dist
22+
dist/
2223

2324
# Coverage
24-
/coverage
25+
coverage/
2526

2627
# Project specific
27-
/src/utilities/enums.js
28+
.vscode/

‎.vscode/settings.json

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ npm run test
106106
┃ ┃ ┃ ┗ 📜 enums.ts - Each branch has its own enums
107107
┃ ┃ ┃ ┗ 📜 interfaces.ts - Each branch has its own interfaces
108108
┃ ┃ ┃ ┗ 📜 reducer.ts - The branch reducer
109+
┃ ┃ ┃ ┗ 📜 selectors.ts - The branch selectors (hooks)
109110
┃ ┃ ┃ ┗ 📜 sagas.ts - The branch sagas
110111
┃ ┗ 📜 enums.ts - Store's enums
111112
┃ ┗ 📜 index.ts - Application's main store
@@ -127,19 +128,18 @@ npm run test
127128
- Minification of the bundled file
128129
- Source maps
129130
130-
3. Webpack aliases: Checkout the aliases property in the `webpack.config.ts` file.
131+
3. Aliases: Checkout the aliases property in the `vite.config.ts` and `tsconfig.json` files.
131132
4. SCSS usage.
132133
5. Lint your files: ESLint (with TypeScript ESLint installed and configured) and Stylelint included
133-
6. Tests using Jest and Enzyme. The Test environment has been configured so you don't have to
134-
7. Offline first - using Offline Plugin to cache important files and assets
135-
8. PWA ready - Install as a native app on Android and iOS
136-
9. Code splitting and lazy loading
137-
10. i18n included:
134+
6. Tests using Jest and React testing library. The Test environment has been configured so you don't have to
135+
7. PWA ready - Install as a native app on Android and iOS
136+
8. Code splitting and lazy loading
137+
9. i18n included:
138138
1. add your locales in `/src/i18n/locales`
139139
2. add your po files which are based on the `translations.pot` file located in `/src/assets/locale`
140140
3. run `yarn locale` to generate `${locale}.json` file from your `${locale}.po` file.
141141
4. update your UI to reflect the newly added locale
142-
11. Prerendering - All pages are prerendered based on defined routes. This is included in the build step and needs **no additional configuration**.
142+
10. Prerendering - All pages are prerendered based on defined routes. This is included in the build step and needs **no additional configuration**.
143143
144144
## Supported Browsers
145145

‎src/index.html renamed to ‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="mobile-web-app-capable" content="yes" />
77

8-
<link rel="icon" href="assets/favicon.ico" />
8+
<link rel="icon" href="/favicon.ico" />
99

1010
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" />
1111

1212
<title>React Template</title>
1313
</head>
1414
<body>
1515
<div id="app"></div>
16+
<script type="module" src="./src/index.tsx"></script>
1617
</body>
1718
</html>

‎package.json

Lines changed: 25 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
{
22
"name": "create-react-app-ts",
3-
"version": "1.10.2",
3+
"version": "2.0.0",
44
"description": "Scalable starter boilerplate for React applications",
55
"main": "./src/index.tsx",
66
"bin": {
77
"create-react-app-ts": "./bin/cli.js"
88
},
99
"scripts": {
1010
"svg": "svgo-viewbox -i ./src/assets",
11-
"start": "yarn tsc:enums && webpack serve --mode development --hot",
12-
"build": "yarn tsc:enums && webpack --mode production",
11+
"start": "vite --open",
12+
"build": "vite build",
1313
"tsc": "tsc --noEmit --skipLibCheck",
14-
"tsc:enums": "rm -rf ./dist && tsc --project tsconfig-enums.json --skipLibCheck",
1514
"lint": "yarn lint:ts && yarn lint:scss",
1615
"lint:ts": "eslint 'src/**/*.{ts,tsx}'",
1716
"lint:scss": "stylelint './src/**/*.scss' --config .stylelintrc",
18-
"test": "jest",
19-
"test:coverage": "jest --coverage",
17+
"test": "jest --config=./test-config/jest.config.js --runInBand --coverage --env jsdom",
18+
"test:coverage": "yarn test --coverage",
2019
"locale:scan": "i18next-scanner --config ./src/i18n/scanner-config.js './src/**/*.{ts,tsx}'",
2120
"locale:pot": "node ./src/i18n/gettext-converter.mjs jsonToPot",
2221
"locale:po": "node ./src/i18n/gettext-converter.mjs poToJson",
@@ -59,142 +58,74 @@
5958
"homepage": "https://github.com/three11/react-template#readme",
6059
"dependencies": {
6160
"@loadable/component": "5.15.2",
61+
"@redux-devtools/extension": "3.2.3",
6262
"axios": "1.2.1",
63-
"connected-react-router": "6.9.3",
6463
"date-fns": "2.29.3",
65-
"history": "4.10.1",
66-
"i18next": "22.4.5",
64+
"i18next": "22.4.6",
6765
"i18next-browser-languagedetector": "7.0.1",
6866
"normalize.css": "8.0.1",
6967
"react": "18.2.0",
7068
"react-dom": "18.2.0",
7169
"react-hook-form": "7.41.0",
72-
"react-i18next": "11.18.6",
70+
"react-i18next": "12.1.1",
7371
"react-inlinesvg": "3.0.1",
7472
"react-redux": "8.0.5",
75-
"react-router": "5.3.4",
76-
"react-router-dom": "5.3.4",
73+
"react-router": "6.5.0",
74+
"react-router-dom": "6.5.0",
7775
"redux": "4.2.0",
78-
"redux-devtools-extension": "2.13.9",
7976
"redux-saga": "1.2.2",
8077
"scss-goodies": "2.2.0"
8178
},
8279
"devDependencies": {
83-
"@dreysolano/prerender-spa-plugin": "1.0.3",
84-
"@loadable/webpack-plugin": "5.15.2",
85-
"@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
86-
"@types/enzyme": "3.10.12",
80+
"@rollup/plugin-alias": "4.0.2",
81+
"@testing-library/jest-dom": "5.16.5",
82+
"@testing-library/react": "13.4.0",
8783
"@types/jest": "29.2.4",
8884
"@types/loadable__component": "5.13.4",
8985
"@types/node": "18.11.17",
86+
"@types/postcss-flexbugs-fixes": "4.2.1",
9087
"@types/react": "18.0.26",
9188
"@types/react-dom": "18.0.9",
9289
"@types/react-loadable": "5.5.6",
9390
"@types/react-redux": "7.1.24",
9491
"@types/react-router": "5.1.19",
9592
"@types/react-router-dom": "5.3.3",
93+
"@types/redux-mock-store": "1.0.3",
9694
"@typescript-eslint/eslint-plugin": "5.46.1",
9795
"@typescript-eslint/parser": "5.46.1",
98-
"@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
96+
"@vitejs/plugin-react": "3.0.0",
9997
"autoprefixer": "10.4.13",
100-
"copy-webpack-plugin": "11.0.0",
101-
"css-hot-loader": "1.4.4",
102-
"css-loader": "6.7.3",
10398
"cssnano": "5.1.14",
104-
"dotenv": "16.0.3",
105-
"enzyme": "3.11.0",
106-
"enzyme-to-json": "3.6.2",
10799
"eslint": "8.30.0",
108100
"eslint-config-prettier": "8.5.0",
109101
"eslint-plugin-jest": "27.1.7",
110102
"eslint-plugin-react": "7.31.11",
111-
"html-loader": "4.2.0",
112-
"html-webpack-plugin": "5.5.0",
113103
"i18next-conv": "13.1.0",
114104
"i18next-scanner": "4.1.0",
115105
"jest": "29.3.1",
116-
"mini-css-extract-plugin": "2.7.2",
106+
"jest-environment-jsdom": "29.3.1",
107+
"jest-localstorage-mock": "2.4.25",
117108
"postcss": "8.4.20",
118-
"postcss-easy-import": "4.0.0",
119109
"postcss-flexbugs-fixes": "5.0.2",
120-
"postcss-loader": "7.0.2",
121-
"postcss-url": "10.1.3",
122-
"postcss-utilities": "0.8.4",
123-
"prerender-spa-plugin": "3.4.0",
124-
"react-refresh": "0.14.0",
125-
"react-refresh-typescript": "2.0.7",
110+
"redux-mock-store": "1.5.4",
126111
"sass": "1.57.0",
127-
"sass-loader": "13.2.0",
128-
"sass-resources-loader": "2.2.5",
129-
"style-loader": "3.3.1",
130112
"stylelint": "14.16.0",
131113
"stylelint-config-recommended": "9.0.0",
132114
"stylelint-config-standard-scss": "6.1.0",
133115
"stylelint-no-unsupported-browser-features": "6.0.1",
134116
"stylelint-scss": "4.3.0",
135117
"svgo-viewbox": "2.1.0",
136-
"terser-webpack-plugin": "5.3.6",
137118
"ts-jest": "29.0.3",
138-
"ts-loader": "9.4.2",
119+
"ts-node": "10.9.1",
139120
"tslib": "2.4.1",
140121
"typescript": "4.9.4",
141-
"url": "0.11.0",
142-
"webpack": "5.75.0",
143-
"webpack-cli": "5.0.1",
144-
"webpack-dev-server": "4.11.1",
145-
"webpack-hot-middleware": "2.25.3",
146-
"webpack-pwa-manifest": "4.3.0",
147-
"workbox-cli": "6.5.4",
148-
"yargs": "17.6.2"
122+
"vite": "4.0.2",
123+
"vite-plugin-prerender": "1.0.8",
124+
"vite-plugin-pwa": "0.14.0",
125+
"workbox-cli": "6.5.4"
149126
},
150127
"browserslist": [
151128
"> 1%",
152129
"last 2 versions"
153-
],
154-
"jest": {
155-
"moduleDirectories": [
156-
"node_modules",
157-
"src"
158-
],
159-
"moduleFileExtensions": [
160-
"ts",
161-
"tsx",
162-
"js",
163-
"jsx",
164-
"json",
165-
"node"
166-
],
167-
"moduleNameMapper": {
168-
"^@src/(.*)$": "<rootDir>/src/$1",
169-
"^@root/(.*)$": "<rootDir>/$1",
170-
"^@i18n": "<rootDir>/src/i18n",
171-
"^@store/(.*)$": "<rootDir>/src/store/$1",
172-
"^@assets/(.*)$": "<rootDir>/src/assets/$1",
173-
"^@utilities": "<rootDir>/src/utilities",
174-
"^@utilities/(.*)$": "<rootDir>/src/utilities/$1",
175-
"^@components": "<rootDir>/src/components",
176-
"^@containers/(.*)$": "<rootDir>/src/containers/$1",
177-
"\\.(css|less|sass|scss)$": "<rootDir>/test-config/StyleMock.js",
178-
"\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test-config/FileMock.js"
179-
},
180-
"setupFiles": [
181-
"<rootDir>/test-config/index.js",
182-
"<rootDir>/test-config/LocalStorageMock.js"
183-
],
184-
"snapshotSerializers": [
185-
"enzyme-to-json/serializer"
186-
],
187-
"transform": {
188-
"^.+\\.tsx?$": "ts-jest",
189-
"\\.(css|less|sass|scss)$": "<rootDir>/test-config/StyleMock.js",
190-
"\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test-config/FileMock.js"
191-
},
192-
"verbose": false,
193-
"testRegex": ".*\\.(test|spec)\\.(j|tsx?)$",
194-
"testPathIgnorePatterns": [
195-
"<rootDir>/node_modules/",
196-
"<rootDir>/dist/",
197-
"<rootDir>/test-config/"
198-
]
199-
}
130+
]
200131
}

‎src/assets/favicon.ico renamed to ‎public/favicon.ico

File renamed without changes.

‎src/assets/icon-512x512.png renamed to ‎public/icon-512x512.png

File renamed without changes.

‎src/app.tsx

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,17 @@
11
import * as React from 'react';
2-
import { Route } from 'react-router-dom';
3-
import { Switch, Redirect } from 'react-router';
2+
import { Routes, Route } from 'react-router-dom';
43

54
import * as Loadables from './loadables';
6-
import { Routes, isLoggedIn } from '@utilities';
5+
import { Routes as AppRoutes, isLoggedIn } from '@utilities';
76

87
import './assets/styles/app.scss';
98

10-
interface Props {
11-
readonly component: React.ComponentType;
12-
readonly [x: string]: any;
13-
}
14-
15-
export const PrivateRoute = ({ component: Component, ...rest }: Props): JSX.Element => (
16-
<Route
17-
{...rest}
18-
render={(props: any): React.ReactNode =>
19-
isLoggedIn() ? <Component {...props} {...rest} /> : <Redirect to={Routes.LOGIN} />
20-
}
21-
/>
22-
);
23-
24-
export const GuestRoute = ({ component: Component, ...rest }: Props): JSX.Element => (
25-
<Route
26-
{...rest}
27-
render={(props: any): React.ReactNode =>
28-
!isLoggedIn() ? <Component {...props} {...rest} /> : <Redirect to={Routes.BASE} />
29-
}
30-
/>
31-
);
32-
339
export const App = () => (
34-
<Switch>
35-
<Route path={Routes.BASE} exact={true} component={Loadables.Home} />
36-
<GuestRoute path={Routes.LOGIN} exact={true} component={Loadables.Login} />
37-
<GuestRoute path={Routes.SIGNUP} exact={true} component={Loadables.Signup} />
38-
<GuestRoute path={Routes.PASSWORD_RESET} exact={true} component={Loadables.PasswordReset} />
39-
<Route component={Loadables.NotFound} />
40-
</Switch>
10+
<Routes>
11+
<Route path={AppRoutes.BASE} element={<Loadables.Home />} />
12+
{!isLoggedIn() ? <Route path={AppRoutes.LOGIN} element={<Loadables.Login />} /> : null}
13+
{!isLoggedIn() ? <Route path={AppRoutes.SIGNUP} element={<Loadables.Signup />} /> : null}
14+
{!isLoggedIn() ? <Route path={AppRoutes.PASSWORD_RESET} element={<Loadables.PasswordReset />} /> : null}
15+
<Route path="*" element={<Loadables.NotFound />} />
16+
</Routes>
4117
);

‎src/assets/react.svg renamed to ‎src/assets/images/react.svg

File renamed without changes.

‎src/assets/styles/settings.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:list';
2-
@use 'sass:color';
3-
@use 'sass:string';
1+
@import 'mixins';
42

53
$color-base: #333;
64
$color-white: #fff;

‎src/components/button/__snapshots__/index.test.tsx.snap

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Button component should render successfully 1`] = `
4-
<button
5-
className="c-btn "
6-
/>
3+
exports[`should render successfully 1`] = `
4+
<DocumentFragment>
5+
<button
6+
class="c-btn "
7+
/>
8+
</DocumentFragment>
79
`;

‎src/components/button/index.test.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import * as React from 'react';
2-
import { shallow } from 'enzyme';
2+
import { render } from '@testing-library/react';
33

44
import { Button } from '.';
55

6-
describe('Button component', () => {
7-
it('should render successfully', () => {
8-
const tree = shallow(<Button />);
6+
test('should render successfully', () => {
7+
const { asFragment } = render(<Button />);
98

10-
expect(tree).toMatchSnapshot();
11-
});
9+
expect(asFragment()).toMatchSnapshot();
10+
expect(true).toBeTruthy();
1211
});

0 commit comments

Comments
 (0)