Skip to content

Commit 672e340

Browse files
v-borregov-borrego
authored
Merge pull request #827 from Lemoncode/refactor/architecture-vite-react-19
update react architecture with vite and react 19
2 parents 2723811 + a8e76b8 commit 672e340

File tree

84 files changed

+469
-1098
lines changed

Some content is hidden

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

84 files changed

+469
-1098
lines changed

‎04-frameworks/01-react/05-architecture/01-routes/.babelrc‎

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

‎04-frameworks/01-react/05-architecture/02-layout/src/index.html‎ renamed to ‎04-frameworks/01-react/05-architecture/01-routes/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<title>My App Example</title>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Architecture</title>
87
</head>
8+
99
<body>
1010
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
1112
</body>
1213
</html>

‎04-frameworks/01-react/05-architecture/01-routes/package.json‎

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,25 @@
11
{
2-
"name": "react-example",
3-
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
2+
"name": "react-architecture",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
66
"scripts": {
7-
"start": "run-p -l type-check:watch start:dev",
8-
"type-check": "tsc --noEmit",
9-
"type-check:watch": "npm run type-check -- --watch",
10-
"start:dev": "webpack-dev-server --mode development --open",
11-
"build": "rimraf dist && webpack --mode development"
7+
"start": "vite --host",
8+
"build": "vite build",
9+
"preview": "vite preview"
1210
},
13-
"author": "",
14-
"license": "ISC",
1511
"devDependencies": {
16-
"@babel/cli": "^7.17.10",
17-
"@babel/core": "^7.17.10",
18-
"@babel/preset-env": "^7.17.10",
19-
"@babel/preset-react": "^7.17.12",
20-
"@babel/preset-typescript": "^7.16.7",
21-
"@types/react": "^18.0.9",
22-
"@types/react-dom": "^18.0.4",
23-
"babel-loader": "^8.2.5",
24-
"css-loader": "^6.7.1",
25-
"html-loader": "^3.1.0",
26-
"html-webpack-plugin": "^5.5.0",
27-
"npm-run-all": "^4.1.5",
28-
"rimraf": "^3.0.2",
29-
"style-loader": "^3.3.1",
30-
"tsconfig-paths-webpack-plugin": "^3.5.2",
31-
"typescript": "^4.6.4",
32-
"webpack": "^5.72.1",
33-
"webpack-cli": "^4.9.2",
34-
"webpack-dev-server": "^4.9.0"
12+
"@types/react": "^19.1.8",
13+
"@types/react-dom": "^19.1.6",
14+
"@vitejs/plugin-react": "^5.0.2",
15+
"typescript": "^5.8.3",
16+
"vite": "^7.0.4",
17+
"vite-plugin-checker": "^0.10.0",
18+
"vite-tsconfig-paths": "^5.1.4"
3519
},
3620
"dependencies": {
37-
"react": "^18.1.0",
38-
"react-dom": "^18.1.0",
39-
"react-router-dom": "^6.3.0"
21+
"react": "^19.1.0",
22+
"react-dom": "^19.1.0",
23+
"react-router-dom": "^7.8.2"
4024
}
4125
}

‎04-frameworks/01-react/05-architecture/01-routes/readme.md‎

Lines changed: 16 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ But if were importing this scene from a subfolder we would start having the
5454
dot dot hell, we could end up with imports like _../../../scenes/login_, why
5555
not creating aliases for the root folders that could be accessed in a simple way?
5656

57-
We can defined paths in _tsconfig_ and aliases in _webpack_ uuh wait but then
57+
We can defined paths in _tsconfig_ and aliases in _vite_ uuh wait but then
5858
we have to define similar stuff in two places, let's provide a solution that
5959
would avoid this, first of all we are going to define and _@_ alias in our
6060
_tsconfig.json_:
@@ -63,58 +63,32 @@ _tsconfig.json_
6363

6464
```diff
6565
"esModuleInterop": true,
66-
+ "baseUrl": "src",
66+
+ "baseUrl": "./src",
6767
+ "paths": {
6868
+ "@/*": ["*"]
6969
+ }
70-
},
7170
```
7271

73-
Cool now we could add this configuration to webpack (WAIT do not do that):
74-
75-
_webpack.config.json_
76-
77-
```diff
78-
resolve: {
79-
extensions: [".js", ".ts", ".tsx"],
80-
+ alias: {
81-
+ '@': path.resolve(__dirname, 'src'),
82-
+ },
83-
},
84-
```
85-
86-
But since we don't want to repeat code, let's see if somebody has
87-
implemented some magic to allow webpack read this configuration from
88-
the _tsconfig_
89-
90-
We have two approaches:
91-
92-
- Gist source code: https://gist.github.com/nerdyman/2f97b24ab826623bff9202750013f99e
93-
94-
- Webpack plugin: https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
95-
96-
Let's go for the webpack plugin option:
72+
Let's install the library to allow Vite infer the aliases from the Typescript configuration:
9773

9874
```bash
99-
npm install tsconfig-paths-webpack-plugin --save-dev
75+
npm i vite-tsconfig-paths -D
10076
```
10177

10278
Now let's consume this plugin:
10379

104-
_./webpack.config.js_
80+
_./vite.config.ts_
10581

10682
```diff
107-
const HtmlWebpackPlugin = require("html-webpack-plugin");
108-
+ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
109-
const path = require("path");
110-
const basePath = __dirname;
111-
112-
module.exports = {
113-
context: path.join(basePath, "src"),
114-
resolve: {
115-
extensions: [".js", ".ts", ".tsx"],
116-
+ plugins: [new TsconfigPathsPlugin()]
117-
},
83+
import { defineConfig } from "vite";
84+
import checker from "vite-plugin-checker";
85+
import react from "@vitejs/plugin-react";
86+
+ import tsconfigPaths from "vite-tsconfig-paths";
87+
88+
export default defineConfig({
89+
- plugins: [checker({ typescript: true }), react()],
90+
+ plugins: [tsconfigPaths(), checker({ typescript: true }), react()],
91+
});
11892
```
11993

12094
Now we can update the imports to use the new _@_ alias.
@@ -317,12 +291,12 @@ _./src/scenes/list.tsx_
317291
// (...)
318292

319293
{members.map((member) => (
320-
<>
294+
<React.Fragment key={member.id}>
321295
<img src={member.avatar_url} />
322296
<span>{member.id}</span>
323297
- <Link to={`/detail/${member.login}`}>{member.login}</Link>
324298
+ <Link to={routes.details(member.login)}>{member.login}</Link>
325-
</>
299+
</React.Fragment>
326300
))}
327301
</div>
328302
- <Link to="/detail">Navigate to detail page</Link>

‎04-frameworks/01-react/05-architecture/01-routes/readme_es.md‎

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Pero si estuviéramos importando esta escena desde una subcarpeta empezaríamos
5454
infierno de los puntos suspendidos, podríamos acabar con importaciones como _../../../escenas/inicio de sesión_, ¿por qué
5555
no crear alias para las carpetas raíz a las que se pueda acceder de forma sencilla?
5656

57-
Podemos definir rutas en _tsconfig_ y alias en _webpack_ uuh espera pero entonces
57+
Podemos definir rutas en _tsconfig_ y alias en _vite_ uuh espera pero entonces
5858
tenemos que definir cosas similares en dos lugares, vamos a dar una solución que
5959
que evite esto, en primer lugar vamos a definir un alias _@_ en nuestro
6060
_tsconfig.json_:
@@ -63,58 +63,32 @@ _tsconfig.json_
6363

6464
```diff
6565
"esModuleInterop": true,
66-
+ "baseUrl": "src",
66+
+ "baseUrl": "./src",
6767
+ "paths": {
6868
+ "@/*": ["*"]
6969
+ }
70-
},
7170
```
7271

73-
Genial, ahora podríamos añadir esta configuración a webpack (ESPERA no lo hagas):
74-
75-
_webpack.config.json_
76-
77-
```diff
78-
resolve: {
79-
extensions: [".js", ".ts", ".tsx"],
80-
+ alias: {
81-
+ '@': path.resolve(__dirname, 'src'),
82-
+ },
83-
},
84-
```
85-
86-
Pero como no queremos repetir código, vamos a ver si alguien ha
87-
implementado alguna magia que permita a webpack leer esta configuración desde
88-
el _tsconfig_
89-
90-
Tenemos dos enfoques:
91-
92-
- Código fuente de Gist: https://gist.github.com/nerdyman/2f97b24ab826623bff9202750013f99e
93-
94-
- Plugin de webpack: https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
95-
96-
Vamos a optar por la opción del plugin de webpack:
72+
Instalamos la librería para permitir que Vite extraiga los alias de la cofiguración de typescript:
9773

9874
```bash
99-
npm install tsconfig-paths-webpack-plugin --save-dev
75+
npm i vite-tsconfig-paths -D
10076
```
10177

102-
Ahora consumamos este plugin:
78+
Usamos el plugin en Vite:
10379

104-
_./webpack.config.js_
80+
_./vite.config.ts_
10581

10682
```diff
107-
const HtmlWebpackPlugin = require("html-webpack-plugin");
108-
+ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
109-
const path = require("path");
110-
const basePath = __dirname;
111-
112-
module.exports = {
113-
context: path.join(basePath, "src"),
114-
resolve: {
115-
extensions: [".js", ".ts", ".tsx"],
116-
+ plugins: [new TsconfigPathsPlugin()]
117-
},
83+
import { defineConfig } from "vite";
84+
import checker from "vite-plugin-checker";
85+
import react from "@vitejs/plugin-react";
86+
+ import tsconfigPaths from "vite-tsconfig-paths";
87+
88+
export default defineConfig({
89+
- plugins: [checker({ typescript: true }), react()],
90+
+ plugins: [tsconfigPaths(), checker({ typescript: true }), react()],
91+
});
11892
```
11993

12094
Ahora podemos actualizar las importaciones para utilizar el nuevo alias _@_.
@@ -317,12 +291,12 @@ _./src/scenes/list.tsx_
317291
// (...)
318292

319293
{members.map((member) => (
320-
<>
294+
<React.Fragment key={member.id}>
321295
<img src={member.avatar_url} />
322296
<span>{member.id}</span>
323297
- <Link to={`/detail/${member.login}`}>{member.login}</Link>
324298
+ <Link to={routes.details(member.login)}>{member.login}</Link>
325-
</>
299+
</React.Fragment>
326300
))}
327301
</div>
328302
- <Link to="/detail">Navigate to detail page</Link>

‎04-frameworks/01-react/05-architecture/01-routes/src/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { createRoot } from "react-dom/client";
33
import { App } from "./app";
4+
import "./styles.css";
45

56
const container = document.getElementById("root");
67
const root = createRoot(container);

‎04-frameworks/01-react/05-architecture/01-routes/src/scenes/list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ export const ListPage: React.FC = () => {
2525
<span className="list-header">Id</span>
2626
<span className="list-header">Name</span>
2727
{members.map((member) => (
28-
<>
28+
<React.Fragment key={member.id}>
2929
<img src={member.avatar_url} />
3030
<span>{member.id}</span>
3131
<Link to={routes.details(member.login)}>{member.login}</Link>
32-
</>
32+
</React.Fragment>
3333
))}
3434
</div>
3535
<Link to="/detail">Navigate to detail page</Link>

‎04-frameworks/01-react/05-architecture/01-routes/tsconfig.json‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
22
"compilerOptions": {
3-
"target": "es6",
4-
"module": "es6",
5-
"moduleResolution": "node",
6-
"declaration": false,
3+
"esModuleInterop": true,
4+
"isolatedModules": true,
5+
"jsx": "react-jsx",
6+
"lib": ["ESNext", "DOM"],
7+
"module": "ESNext",
8+
"moduleResolution": "bundler",
9+
"noEmit": true,
710
"noImplicitAny": false,
8-
"allowSyntheticDefaultImports": true,
9-
"sourceMap": true,
10-
"jsx": "react",
11-
"noLib": false,
12-
"suppressImplicitAnyIndexErrors": true,
11+
"noImplicitReturns": true,
12+
"resolveJsonModule": true,
1313
"skipLibCheck": true,
14-
"esModuleInterop": true,
15-
"baseUrl": "src",
14+
"sourceMap": true,
15+
"target": "ESNext",
16+
"useDefineForClassFields": true,
17+
"baseUrl": "./src",
1618
"paths": {
1719
"@/*": ["*"]
1820
}
1921
},
20-
"include": ["src/**/*"],
21-
"exclude": ["node_modules"]
22+
"include": ["src"]
2223
}

‎04-frameworks/01-react/05-architecture/01-routes/vite.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from "vite";
2+
import checker from "vite-plugin-checker";
3+
import react from "@vitejs/plugin-react";
4+
import tsconfigPaths from "vite-tsconfig-paths";
5+
6+
export default defineConfig({
7+
plugins: [tsconfigPaths(), checker({ typescript: true }), react()],
8+
});

0 commit comments

Comments
 (0)