feat: define load hook

Author: AriPerkkio

src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/content.md

@@ -28,4 +28,4 @@ const content = ["Initial content"];
 export { content };
 ```
 
-At this point we should run into error when Vite fails to load `.yaml` file.
+At this point we should run into error when Vite fails to load `.yaml` file. ❌

src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/content.md

@@ -6,4 +6,8 @@ focus: /vite.config.ts
 
 # Defining custom plugin
 
-Let's start by adding a custom plugin in our Vite configuration.
+Plugins can have various properties that are listed in [Plugin API | Vite](https://vitejs.dev/guide/api-plugin.html) documentation. The only **required property** is `name`.
+
+Let's start by adding a custom plugin in our Vite configuration. To do this, add a new `plugins` property into the Vite configuration. The `plugins` should be an array.
+
+Inside the `plugins` array, define a new object with `name` `'yaml-plugin'`.

src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_solution/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
       load(id, options) {
         if (id.endsWith(".yaml")) {
           return {
-            code: `export default 'Loaded ${id}';`,
+            code: `export default "Trying to load '${id}' file.";`,
           };
         }
       },

src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/content.md

@@ -6,4 +6,40 @@ focus: /vite.config.ts
 
 # Defining load hook
 
-Let's start by adding a load hook in our Vite configuration.
+Let's start by adding a [`load`](https://rollupjs.org/plugin-development/#load) hook in our Vite plugin.
+
+```js
+{
+  name: "yaml-plugin",
+  load(id, options) {
+  }
+}
+```
+
+Vite will call this hook with all loaded files. As our plugin is only interested in `.yaml` files, we can check `id` for this extension.
+
+```js
+{
+  name: "yaml-plugin",
+  load(id, options) {
+    if(id.endsWith('.yaml')) {
+      // YAML related logic comes here
+    }
+  }
+}
+```
+
+Our `load` function should return an object with `code` property. This property should contain the actual code that importing this specific `.yaml` file should produce. As we don't yet know how to convert `.yaml` files into Javascript, we can return something simpler here.
+
+```js
+{
+  name: "yaml-plugin",
+  load(id, options) {
+    if(id.endsWith('.yaml')) {
+      return {
+        code: `export default "Trying to load '${id}' file.";`,
+      };
+    }
+  }
+}
+```

src/templates/default/main.js

@@ -5,6 +5,7 @@ const ID = "vite-plugin-content";
 document.querySelector("#app").innerHTML = `
   <div>
     <h1>Hello Vite Plugin tutorial!</h1>
+    <p>Loaded Vite plugins: ${window.TUTORIAL_LOADED_VITE_PLUGINS || "none"}</p>
     <pre id="${ID}"></pre>
   </div>
 `;
@@ -18,6 +19,8 @@ import("./index.js")
     );
   })
   .catch((error) => {
-    const message = `Failed to load index.js: "${error instanceof Error ? error.message : String(error)}"`;
-    document.getElementById(ID).textContent = message;
+    const element = document.getElementById(ID);
+    const message = `Failed to load index.js: "${error instanceof Error ? error.message : String(error)}" ❌`;
+    element.textContent = message;
+    element.classList.add("error");
   });

src/templates/default/style.css

@@ -106,3 +106,11 @@ pre {
   border-radius: 5px;
   padding: 16px;
 }
+
+.error {
+  font-weight: 600;
+  color: red;
+  background-color: white;
+  border: 2px dashed red;
+  outline: 2px dashed red;
+}

src/templates/default/vite.config.internal.ts

@@ -1,10 +1,27 @@
-import { defineConfig, mergeConfig } from "vite";
+import {
+  defineConfig,
+  mergeConfig,
+  type Plugin,
+  type PluginOption,
+} from "vite";
 
 import viteConfig from "./vite.config";
 
+const loadedPlugins = viteConfig.plugins?.map(getName).filter(Boolean).join();
+
 export default mergeConfig(
   defineConfig({
-    // More options here?
+    define: {
+      TUTORIAL_LOADED_VITE_PLUGINS: `"${loadedPlugins || "none"}"`,
+    },
   }),
   viteConfig
 );
+
+function getName(plugin: PluginOption) {
+  if (plugin && "name" in plugin && plugin.name.length > 0) {
+    return `${plugin.name} ✅`;
+  }
+
+  return null;
+}