feat: summary

Author: AriPerkkio

package.json

@@ -30,7 +30,8 @@
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "yaml": "^2.4.5"
   },
   "packageManager": "[email protected]+sha512.d1a029e1a447ad90bc96cd58b0fad486d2993d531856396f7babf2d83eb1823bb83c5a3d0fc18f675b2d10321d49eb161fece36fe8134aa5823ecd215feed392"
 }

pnpm-lock.yaml

@@ -6,7 +6,7 @@ focus: /vite.config.ts
 
 # Defining load hook
 
-Let's start by adding a [`load`](https://rollupjs.org/plugin-development/#load) hook in our Vite plugin.
+Next we'll need to intercept loading of `.yaml` files. Let's start by adding a [`load`](https://rollupjs.org/plugin-development/#load) hook in our Vite plugin.
 
 ```js
 {
@@ -16,14 +16,14 @@ Let's start by adding a [`load`](https://rollupjs.org/plugin-development/#load)
 }
 ```
 
-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.
+Vite will call this hook with all the 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
+      // id === "/home/tutorial/content.yaml"
     }
   }
 }

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

@@ -0,0 +1,22 @@
+employees:
+  - id: 1
+    name: John Doe
+    job: Developer
+    skills:
+      - JavaScript
+      - Python
+      - C++
+  - id: 2
+    name: Jane Doe
+    job: Designer
+    skills:
+      - Photoshop
+      - Illustrator
+      - InDesign
+projects:
+  - id: 101
+    name: Project Alpha
+    description: This is the first project.
+  - id: 102
+    name: Project Beta
+    description: This is the second project.

src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_files/content.yaml

@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export { content };

src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_files/index.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "yaml-plugin",
+      load(id, options) {
+        if (id.endsWith(".yaml")) {
+          return {
+            code: `export default "Trying to load '${id}' file.";`,
+          };
+        }
+      },
+    },
+  ],
+});

src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_files/vite.config.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { parse } from "yaml";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "yaml-plugin",
+      load(id, options) {
+        if (id.endsWith(".yaml")) {
+          const content = readFileSync(id, "utf8");
+          const yaml = parse(content);
+
+          return {
+            code: `export default ${JSON.stringify(yaml)}`,
+          };
+        }
+      },
+    },
+  ],
+});

src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_solution/vite.config.ts

@@ -0,0 +1,37 @@
+---
+type: lesson
+title: Processing YAML files
+focus: /vite.config.ts
+---
+
+# Processing YAML files
+
+Our Vite plugin can now recognize `.yaml` files that are being loaded. Next we'll need to add logic for converting the `.yaml` files into Javascript and pass the output from `load` hook.
+
+To get the content of loaded file we'll need to use [`readFileSync`](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options) method from `node:fs`.
+We can convert the YAML content into Javascript using [`yaml`](https://www.npmjs.com/package/yaml) package. It has a `parse()` function that takes YAML content as `string`.
+
+```ts
+import { readFileSync } from "node:fs";
+import { parse } from "yaml";
+
+const content = readFileSync("./content.yaml", "utf8");
+const yaml = parse(content);
+//    ^^^^ [{ employees: [{ id: 1, ...}, ...], projects: { id: 101, ...}, ... }]
+```
+
+The `yaml` variable now holds a Javascript object that represents our `content.yaml` contents. To return this from `load` hook, we'll need to serialize it to string with `JSON.stringify`:
+
+```ts
+return {
+  code: `export default ${JSON.stringify(yaml)}`,
+};
+```
+
+Add required logic to Vite plugin's load hook:
+
+- Read requested file from file system using `readFileSync` (filename is in `id` variable)
+- Convert contents of `.yaml` file into Javascript using `parse` from `yaml` package
+- Serialize the Javascript object into `string` and return it as default export from the `load` hook
+
+Contents of `content.yaml` should appear in preview as JSON. ✅

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

@@ -0,0 +1,22 @@
+employees:
+  - id: 1
+    name: John Doe
+    job: Developer
+    skills:
+      - JavaScript
+      - Python
+      - C++
+  - id: 2
+    name: Jane Doe
+    job: Designer
+    skills:
+      - Photoshop
+      - Illustrator
+      - InDesign
+projects:
+  - id: 101
+    name: Project Alpha
+    description: This is the first project.
+  - id: 102
+    name: Project Beta
+    description: This is the second project.

src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_files/content.yaml

@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export { content };