feat: source map support to replace plugin

package.json

@@ -28,6 +28,7 @@
     "@unocss/transformer-directives": "^0.59.4",
     "astro": "^4.8.6",
     "fast-glob": "^3.3.2",
+    "magic-string": "^0.30.10",
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/_files/tutorial-example.js

@@ -0,0 +1,5 @@
+mountHTML(`
+  <div>
+    Hello world!
+  </div>
+`);

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/_files/vite-plugin-replace.ts

@@ -0,0 +1,10 @@
+export default function vitePluginReplace(options) {
+  return {
+    name: "replace-plugin",
+    transform(src, id) {
+      if (id.includes("tutorial-example.js")) {
+        return { code: src.replaceAll(options.from, options.to) };
+      }
+    },
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/_files/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import Inspect from "vite-plugin-inspect";
+import replacePlugin from "./vite-plugin-replace";
+
+export default defineConfig({
+  plugins: [
+    Inspect({
+      build: true,
+      outputDir: ".vite-inspect",
+    }),
+
+    replacePlugin({
+      from: "Initial value",
+      to: "Replaced value",
+    }),
+  ],
+});

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/_solution/vite-plugin-replace.ts

@@ -0,0 +1,18 @@
+import MagicString from "magic-string";
+
+export default function vitePluginReplace(options) {
+  return {
+    name: "replace-plugin",
+    transform(src, id) {
+      if (id.includes("tutorial-example.js")) {
+        const s = new MagicString(src);
+        s.replaceAll(options.from, options.to);
+
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: "boundary" }),
+        };
+      }
+    },
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/_solution/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import Inspect from "vite-plugin-inspect";
+import replacePlugin from "./vite-plugin-replace";
+
+export default defineConfig({
+  plugins: [
+    Inspect({
+      build: true,
+      outputDir: ".vite-inspect",
+    }),
+
+    replacePlugin({
+      from: "Initial value",
+      to: "Replaced value",
+    }),
+  ],
+});

src/content/tutorial/1-vite-plugin/3-replace-plugin/5-source-map-support/content.md

@@ -0,0 +1,13 @@
+---
+type: lesson
+title: Extra - Source map support
+focus: /vite.config.ts
+previews:
+  - [3000, "Vite plugin inspect"]
+mainCommand: ["pnpm run /inspect/", "Inspect Vite build"]
+prepareCommands:
+  - ["npm install", "Installing dependencies"]
+  - ["npm run build", "Pre-build"]
+---
+
+# Source map support