Merge pull request #819 from Lemoncode/chore/vite-update

Update vite examples

Author: fjcalzado

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

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   }
 }

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

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   }
 }

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

@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "sass-embedded": "^1.89.2",
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   }
 }

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

@@ -10,9 +10,9 @@
   },
   "devDependencies": {
     "sass-embedded": "^1.89.2",
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   },
   "dependencies": {
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.7"
   }
 }

03-bundling/06-vite/05-images/package.json

@@ -10,9 +10,9 @@
   },
   "devDependencies": {
     "sass-embedded": "^1.89.2",
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   },
   "dependencies": {
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.7"
   }
 }

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

@@ -76,7 +76,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
 
   The rest is just a starting boilerplate configuration you can tweak based on your needs.
 
-- Let's simplify our `index.html` file just to focus on TS:
+- ⚠️ It's time to do a bit of cleanup. Let's simplify our `index.html` file just to focus on TS:
 
   _index.html_
 
@@ -145,6 +145,19 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
 
   🔎 Notice we didn't need to add module syntax like `export {}` because TS already understands it's a module since we added `"type": "module"` in `package.json` file.
 
+- ⚠️ Finally, now that we removed the usage of `SASS`, `bootstrap` and `images` let's delete related files to keep project tidy:
+
+  ```bash
+  DELETE src/content/
+  DELETE src/mystyles.scss
+  ```
+
+  and also uninstall dependencies:
+
+  ```bash
+  npm uninstall bootstrap sass-embedded
+  ```
+
 - Time to start the project!
 
   ```bash
@@ -226,32 +239,18 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
 
   🔎 Check how we also get error feedback in the console.
 
-- Unfortunately, it doesn't prevent us from generating the production bundle, eventhough the `build` script apparently failed. Actually you can run it with:
+- We can see thank to `vite-plugin-checker` it is preventing us from generating the production bundle, with errors.
 
-  ```bash
-  npm run preview
-  ```
-
-- But there are a couple of alternatives we can do:
+  ```text
+  vite v7.0.4 building for production...
+  ✓ 2 modules transformed.
+  src/index.ts:2:7 - error TS2322: Type 'number' is not assignable to type 'string'.
 
-### Alternative 1
+  2 const numberB: string = 3;
+          ~~~~~~~
 
-- Let's update the `package.json` to run `tsc` before production build:
 
-  ```diff
-    "scripts": {
-      "start": "vite",
-  +   "type-check": "tsc --noEmit",
-  +   "prebuild": "npm run type-check",
-      "build": "vite build",
-      "preview": "vite preview"
-    },
-  ```
-
-  🔎 Let's check we cannot build for production until all compilation errors are cleared:
-
-  ```bash
-  npm run build
+  Found 1 error in src/index.ts:2
   ```
 
 - So, we can only fix the issue to continue:
@@ -265,32 +264,3 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
   ```
 
   🔎 Run now a production build and check how it goes smoothly.
-
-### Alternative 2
-
-- Let's tweak `rollup`, which is run under the hood for bundling in production, and let's configure its typescript plugin to prevent emitting any artifact if transpilation fails. First, install the plugin and a required `tslib` dependency:
-
-  ```bash
-  npm install @rollup/plugin-typescript tslib --save-dev
-  ```
-
-- Then, add the following to `vite` config file:
-
-  _vite.config.ts_
-
-  ```diff
-    import { defineConfig } from "vite";
-    import checker from "vite-plugin-checker";
-  + import typescript from "@rollup/plugin-typescript";
-
-    export default defineConfig({
-      plugins: [checker({ typescript: true })],
-  +   build: {
-  +     rollupOptions: {
-  +       plugins: [typescript()],
-  +     },
-  +   },
-    });
-  ```
-
-  > By default it takes our `tsconfig.json` as reference.

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

@@ -1,25 +1,17 @@
 {
   "name": "hello-vite",
   "private": true,
-  "type": "module",
   "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 --host",
-    "type-check": "tsc --noEmit",
-    "prebuild": "npm run type-check",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^12.1.4",
-    "sass-embedded": "^1.89.2",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "vite": "^7.0.2",
-    "vite-plugin-checker": "^0.9.3"
-  },
-  "dependencies": {
-    "bootstrap": "^5.3.3"
+    "vite": "^7.0.4",
+    "vite-plugin-checker": "^0.10.0"
   }
 }