Merge pull request #11 from qDanik/setup/vite

Move react to cdn using vite

Author: Daniil Yankouski

.vite/plugins.ts

@@ -2,8 +2,15 @@ import reactRefresh from '@vitejs/plugin-react-refresh';
 import viteCompression from 'vite-plugin-compression';
 import reactSvgPlugin from 'vite-plugin-react-svg';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
 
 const BasePlugins = [
+  importToCDN({
+      modules: [
+          autoComplete('react'),
+          autoComplete('react-dom')
+      ],
+  }),
   tsconfigPaths(),
   reactSvgPlugin({
     defaultExport: 'component',
@@ -22,11 +29,11 @@ const BasePlugins = [
   }),
 ];
 
-export const DevPlugins = [reactRefresh(), ...BasePlugins];
+export const DevPlugins = [...BasePlugins, reactRefresh()];
 
 export const BuildPlugins = [
+  ...BasePlugins,
   viteCompression({
     filter: (file: string): boolean => file.includes('.js'),
   }),
-  ...BasePlugins,
 ];

README.md

@@ -150,20 +150,21 @@ In the project directory, you can run:
 
 ### Namings
 
-`Folder Namings`: Use `kebab-case` format
-`File Namings`: Alls files should include target name like (auth) and implementation responsibility like (component, helper, styles) as result we should receive (auth.component.ts, auth.store.ts, auth.styles.ts and etc.)
-`Hooks`: Starting with keyword `use` and using format `camelCase` (useSomeHook)
-`Constants`: CONSTANT_CASE, SCREAMING_KEBAB_CASE
+- `Folder Namings`: Use `kebab-case` format
+- `File Namings`: Alls files should include target name like (auth) and implementation responsibility like (component, helper, styles) as result we should receive (auth.component.ts, auth.store.ts, auth.styles.ts and etc.)
+- `Hooks`: Starting with keyword `use` and using format `camelCase` (useSomeHook)
+- `Constants`: CONSTANT_CASE, SCREAMING_KEBAB_CASE
 `Functions, Variables, class Methods or Properties`: camelCase (token, userName, getUser, findUser)
-`Classes, Types, Interfaces, Enums`: PascalCase (AuthService, AuthRepository, UserMapper, AppStore)
-`Private Properties or Methods`: Starting with `underline` and using format `camelCase` (\_userName, \_email, \_someDataName)
+- `Classes, Types, Interfaces, Enums`: PascalCase (AuthService, AuthRepository, UserMapper, AppStore)
+- `Private Properties or Methods`: Starting with `underline` and using format `camelCase` (\_userName, \_email, \_someDataName)
 
 ### App Layers
 
-`Domain Layer`: Shouldn't has intersections with UI layer. How we should communicate with Domain? We should include our domain implementations into our Containers and inject these implementations into our components using `useInjection` hook from `IoC`. All containers type must be declared in implementation file using generic `ServiceIdentifier<T>` from containers/typings. (ex. const AuthServiceType: ServiceIdentifier<AuthUseCase> = Symbol('AuthService')) we do not have dependencies on `implementations` like (AuthService or AuthUseCaseImpl), only on the `interfaces` (AuthUseCase).
-`Core layer`: Contains main part of application which can will be included in container layer. `Store` also should be included in container as `singleton`.
-`Container Layer`: It is 'bridge' between all layers
-`UI Layer`: Is responsible for the UI part, for everything that user can see in his browser
+- `Domain Layer`: Shouldn't has intersections with UI layer. How we should communicate with Domain? We should include our domain implementations into our Containers and inject these implementations into our components using `useInjection` hook from `IoC`. All containers type must be declared in implementation file using generic `ServiceIdentifier<T>` from containers/typings. (ex. const AuthServiceType: ServiceIdentifier<AuthUseCase> = Symbol('AuthService')) we do not have dependencies on `implementations` like (AuthService or AuthUseCaseImpl), only on the `interfaces` (AuthUseCase).
+- `Core layer`: Contains main part of application which can will be included in container layer. `Store` also should be included in container as `singleton`.
+- `Container Layer`: It is 'bridge' between all layers
+- `UI Layer`: Is responsible for the UI part, for everything that user can see in his browser
+### Folder Describes
 
 - `.husky/` - husky config files.
 - `.webpack/` - webpack config files.

package.json

@@ -24,6 +24,7 @@
     "@types/react-dom": "17.0.0",
     "@types/react-router": "5.1.11",
     "@types/react-router-dom": "5.1.7",
+    "@vanilla-extract/css": "^1.0.0",
     "@types/styled-components": "5.1.7",
     "axios": "0.21.1",
     "date-fns": "2.17.0",
@@ -49,6 +50,7 @@
     "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "4.14.2",
     "@typescript-eslint/parser": "4.14.2",
+    "@vanilla-extract/vite-plugin": "^1.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.3",
     "dotenv": "^8.2.0",
     "esbuild": "^0.11.20",
@@ -72,6 +74,8 @@
     "ts-node": "^9.1.1",
     "typescript": "4.1.3",
     "vite": "^2.3.7",
+    "vite-plugin-cdn-import": "^0.3.2",
+    "vite-plugin-compress": "^2.1.0",
     "vite-plugin-compression": "^0.2.5",
     "vite-plugin-react-svg": "^0.2.0",
     "vite-tsconfig-paths": "^3.3.13"