feat: replace plugin (#2)

Author: AriPerkkio

src/content/tutorial/1-vite-plugin/3-replace-plugin/1-transforming-code/_files/vite-plugin-replace.ts

@@ -0,0 +1,5 @@
+export default function vitePluginReplace() {
+  return {
+    name: "replace-plugin",
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/1-transforming-code/_files/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+
+});

src/content/tutorial/1-vite-plugin/3-replace-plugin/1-transforming-code/_solution/vite-plugin-replace.ts

@@ -0,0 +1,5 @@
+export default function vitePluginReplace() {
+  return {
+    name: "replace-plugin",
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/1-transforming-code/_solution/vite.config.ts

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

src/content/tutorial/1-vite-plugin/3-replace-plugin/1-transforming-code/content.md

@@ -0,0 +1,39 @@
+---
+type: lesson
+title: Import plugin from file
+focus: /vite.config.ts
+---
+
+# Vite Replace plugin
+
+In this part we'll create a plugin that modifies our source code. This plugin will look for specific patterns in the source files and replace those with the configured value.
+
+For example, with configuration of `{ from: "Initial value", to: "Replaced value" }` this plugin should replace all occurences of `"Initial value"` with `"Replaced value"`.
+
+The plugin will also be in a separate file from our `vite.config.ts`.
+
+```
+├── vite-plugin-replace.ts
+└── vite.config.ts
+```
+
+To use this plugin we'll be importing it from the `vite-plugin-replace.ts` and passing it's return value to our Vite configuration's `plugins`.
+
+```ts
+import replacePlugin from "./vite-plugin-replace";
+```
+
+Options are passed to the plugin as function argument.
+
+```ts
+replacePlugin({
+  from: "Initial value",
+  to: "Replaced value",
+});
+```
+
+Import the plugin in `vite.config.ts` and pass it in `plugins`. The `vite-plugin-replace.ts` contains minimal plugin already.
+
+Preview tab should indicate successful load of the plugin:
+
+> Loaded Vite plugins: replace-plugin ✅

src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_files/tutorial-example.js

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

src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_files/vite-plugin-replace.ts

@@ -0,0 +1,5 @@
+export default function vitePluginReplace() {
+  return {
+    name: "replace-plugin",
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_files/vite.config.ts

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

src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_solution/vite-plugin-replace.ts

@@ -0,0 +1,10 @@
+export default function vitePluginReplace() {
+  return {
+    name: "replace-plugin",
+    transform(src, id) {
+      if (id.includes("tutorial-example.js")) {
+        return { code: "mountHTML('<h1>Changed!</h1>')" };
+      }
+    },
+  };
+}

src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/content.md

@@ -0,0 +1,37 @@
+---
+type: lesson
+title: Defining transform hook
+focus: /vite-plugin-replace.ts
+---
+
+# Transform hook
+
+Modifying contents of a source code file is called **transforming** in Vite. To do this in a Vite plugin, we'll need to use `transform` hook.
+
+```ts add={3}
+{
+  name: "replace-plugin",
+  transform(code, id) { }
+}
+```
+
+This hooks is called with two options:
+
+- `src` is the source code of the file, or the result of previous Vite plugin's transform
+- `id` is the name of the module
+
+As return value Vite expects an object with various properties.
+In this tutorial we'll skip most of them and focus only on `code` property. This property should contain the transformed code that the plugin produces.
+
+```ts
+{
+  name: "replace-plugin",
+  transform(src, id) {
+    return { code: <transformed Javascript code> }
+  }
+}
+```
+
+In `tutorial-example.js` we have a helper function `mountHTML()`. It can be used to modify the page on preview tab. Try changing the contents of `tutorial-example.js` using `transform` hook so that `mountHTML` is called with `<h1>Changed!</h1>` instead.
+
+> 💡 Note that `transform` hook is called for every single file that Vite processes. Make sure to specifically transform only `tutorial-example.js`. This can be detected by checking `id` for matches exactly as we did with the `load` hook.