Merge pull request #794 from Lemoncode/chore/update-vite-demos

[chore] Update Vite demos to v6

Author: fjcalzado

03-bundling/06-vite/01-basic/README.md

@@ -64,7 +64,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
 
   ```diff
     "scripts": {
-  +   "build": "vite build",
+  +   "build": "vite build"
   -   "test": "echo \"Error: no test specified\" && exit 1"
     },
   ```
@@ -80,11 +80,11 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
   ```text
   dist
   ├── assets
-  │   └── index.<hash>.js
+  │   └── index-<hash>.js
   └── index.html
   ```
 
-  If we inspect `assets/index.<hash>.js` we can notice the file is production ready because:
+  If we inspect `assets/index-<hash>.js` we can notice the file is production ready because:
 
   - It's already hashed (cache-busting strategy to bypass the browser cache completely).
   - File is minified.
@@ -189,10 +189,10 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
 
     ```diff
     - console.log("This app is using Vite");
-    + console.log("New code update, it will to defeat cache !!!");
+    + console.log("New code update, it will bypass the cache!");
     ```
 
-  - Check again the last request for `index.js`, now the URL changed, cache busting has been applied and a new hash in the form of a query param has been added to the URL with the purpose of defeating browser cache and force a download of this modified module. This hash is just a timestamp in `ms` with the date and time of the change (compilation timestamp).You can convert it back to `Date` to check it out by doing:
+  - Check again the last request for `index.js`, now the URL changed, cache busting has been applied and a new hash in the form of a query param has been added to the URL with the purpose of bypassing browser cache and force a download of this modified module. This hash is just a timestamp in `ms` with the date and time of the change (compilation timestamp).You can convert it back to `Date` to check it out by doing:
 
     ```js
     console.log(new Date(t));

03-bundling/06-vite/01-basic/package.json

@@ -4,11 +4,11 @@
   "version": "0.0.0",
   "description": "Let's start with a very basic sample, just add an html plus a simple console log (E5). This is what you can find in the getting started tutorial.",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.3.3"
+    "vite": "^6.0.3"
   }
 }

03-bundling/06-vite/02-custom-css/README.md

@@ -75,7 +75,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
   🔍 Open file `dist/index.html` and notice how there is a new `<link>` tag created for us to reference the CSS file:
 
   ```html
-  <link rel="stylesheet" href="/assets/index.29b4e7b8.css" />
+  <link rel="stylesheet" href="/assets/index-29b4e7b8.css" />
   ```
 
-  🔍 Also notice our CSS file has been renamed to `index.<hash>.css` and its content has been minified.
+  🔍 Also notice our CSS file has been renamed to `index-<hash>.css` and its content has been minified.

03-bundling/06-vite/02-custom-css/package.json

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.3.3"
+    "vite": "^6.0.3"
   }
 }

03-bundling/06-vite/03-sass/README.md

@@ -56,16 +56,18 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
   💥 Notice we got an error here:
 
   ```cmd
-  [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
+  [vite] Internal server error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.
     Plugin: vite:css
   ```
 
-  👍🏼 In fact is a `vite` reminder to install `sass` preprocessor dependency. We forgot to do it!
+  👍🏼 In fact is a `vite` reminder to install `sass-embedded` preprocessor dependency. We forgot to do it!
 
-- Let's go then! Just add `sass` to our project as development dependency. First, stop the server and then run:
+  > Note `sass-embedded` has same API that `sass` package but it's faster.
+
+- Let's go then! Just add `sass-embedded` to our project as development dependency. First, stop the server and then run:
 
   ```bash
-  npm install sass --save-dev
+  npm install sass-embedded --save-dev
   ```
 
 - Now run the dev server again:
@@ -82,12 +84,10 @@ Install [Node.js and npm](https://nodejs.org/en/) (18 / 20+) if they are not alr
   npm run build
   ```
 
-  🔍 Notice in `dist/assets/index.<hash>.css` the file has been transpiled correctly.
+  🔍 Notice in `dist/assets/index-<hash>.css` the file has been transpiled correctly.
 
   ```css
-  .red-background {
-    background-color: teal;
-  }
+  .red-background{background-color:teal}
   ```
 
   👍🏼 `vite` supports `sass` with not as much hassle.

03-bundling/06-vite/03-sass/package.json

@@ -4,12 +4,12 @@
   "version": "0.0.0",
   "description": "Let's start with a very basic sample, just add an html plus a simple console log (E5). This is what you can find in the getting started tutorial.",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "sass": "^1.77.6",
-    "vite": "^5.3.3"
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.0.3"
   }
 }

03-bundling/06-vite/04-bootstrap/README.md

@@ -43,12 +43,15 @@ Install [Node.js and npm](https://nodejs.org/en/) (14.18+ / 16+) if they are not
 
   ```diff
   ...
+  - <body>
   + <body class="m-3">
       <h1>Check the console log</h1>
   +   <div class="card" style="width: 18rem">
   +     <div class="card-body">
   +       <h5 class="card-title">Card title</h5>
-  +       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  +       <p class="card-text">
+  +         Some quick example text to build on the card title and make up the bulk of the card's content.
+  +       </p>
   +       <a href="#" class="btn btn-primary">Go somewhere</a>
   +     </div>
   +   </div>
@@ -65,7 +68,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (14.18+ / 16+) if they are not
 
   🔎 Verify `bootstrap` styles work properly and you see the new component.
 
-  > Important: we have not added a depencency (in vite context) yet, even if the css is comming from `node_modules` and it won't change frequently. CSS files are not pre-bundled but treated as source modules, unless we adjust under-the-hood `esbuild` options and add a plugin for bundling css. See [this issue](https://github.com/vitejs/vite/issues/7719).
+  > Important: we have not added a dependency (in vite context) yet, even if the css is coming from `node_modules` and it won't change frequently. CSS files are not pre-bundled but treated as source modules, unless we adjust under-the-hood `esbuild` options and add a plugin for bundling css. See [this issue](https://github.com/vitejs/vite/issues/7719).
 
 - ⚙ As an alternative, we could also import bootstrap from `index.html`. Let's first remove the `import` clause from `index.js`:
 
@@ -99,4 +102,4 @@ Install [Node.js and npm](https://nodejs.org/en/) (14.18+ / 16+) if they are not
   npm run build
   ```
 
-  Notice in `dist/assets/index.<hash>.css` Bootstrap's CSS is included.
+  Notice in `dist/assets/index-<hash>.css` Bootstrap's CSS is included.

03-bundling/06-vite/04-bootstrap/index.html

@@ -13,8 +13,7 @@ <h1>Check the console log</h1>
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">
-          Some quick example text to build on the card title and make up the
-          bulk of the card's content.
+          Some quick example text to build on the card title and make up the bulk of the card's content.
         </p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>

03-bundling/06-vite/04-bootstrap/package.json

@@ -4,15 +4,15 @@
   "version": "0.0.0",
   "description": "Let's start with a very basic sample, just add an html plus a simple console log (E5). This is what you can find in the getting started tutorial.",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "sass": "^1.69.5",
-    "vite": "^4.5.0"
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.0.3"
   },
   "dependencies": {
-    "bootstrap": "^5.3.2"
+    "bootstrap": "^5.3.3"
   }
 }

03-bundling/06-vite/05-images/README.md

@@ -113,15 +113,15 @@ Install [Node.js and npm](https://nodejs.org/en/) (14.18+ / 16+) if they are not
   ```bash
   dist
   ├── assets
-  │   ├── index.269d697a.css
-  │   ├── index.78986298.js
-  │   ├── logo_1.6bb1b83d.png
-  │   └── logo_2.cce7736d.png
+  │   ├── index-269d697a.css
+  │   ├── index-78986298.js
+  │   ├── logo_1-6bb1b83d.png
+  │   └── logo_2-cce7736d.png
   └── index.html
   ```
 
   🔎 Also notice in `dist/index.html` how `logo_2.png` source path has been added with its corresponding hash:
 
   ```html
-  <img src="/assets/logo_2.cce7736d.png" alt="logo lemoncode" />
+  <img src="/assets/logo_2-cce7736d.png" alt="logo lemoncode" />
   ```