feat: summary for env plugin

Author: AriPerkkio

src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/vite.config.ts

@@ -47,3 +47,5 @@ Next let's open up the terminal and start Vite server while providing an environ
 ```sh
 TUTORIAL_MY_MESSAGE="Hello world" npm run dev
 ```
+
+The passed environment variable should now appear in the preview tab. ✅

src/content/tutorial/1-vite-plugin/2-env-plugin/4-env-variables-in-load-hook/content.md

@@ -0,0 +1,4 @@
+import env from "virtual:tutorial-env";
+const output = env;
+
+export default output;

src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_files/index.js

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "env-plugin",
+      resolveId(id) {
+        if (id === "virtual:tutorial-env") {
+          return "\0virtual:tutorial-env";
+        }
+      },
+      load(id, options) {
+        if (id === "\0virtual:tutorial-env") {
+          const envVars = getTutorialEnvVariables();
+          return `export default ${JSON.stringify(envVars)}`;
+        }
+      },
+    },
+  ],
+});
+
+function getTutorialEnvVariables() {
+  const output = {};
+  const names = Object.keys(process.env);
+
+  for (const name of names) {
+    if (name.startsWith("TUTORIAL_")) {
+      output[name] = process.env[name];
+    }
+  }
+
+  return output;
+}

src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_files/vite.config.ts

@@ -0,0 +1,32 @@
+---
+type: lesson
+title: Summary
+focus: /vite.config.ts
+mainCommand: ""
+terminal:
+  activePanel: 1
+  panels:
+    - ["terminal", "Terminal"]
+---
+
+# Summarize
+
+We've now built a plugin for providing entrypoint for virtual modules. Let's summarize the process:
+
+<ol>
+  <li>Source code requests virtual module: <code class="whitespace-nowrap">import env from "virtual:tutorial-env"</code>
+
+  <li class="mt2">Vite plugin's <code>resolveId()</code> is called to ask an internal id for the file. Hook returns an id and prefixes it with <code>\0</code>.</li>
+
+  <li class="mt2">Vite plugin's <code>load()</code> is called with the internal id. Our custom plugin recognizes this id.</li>
+
+  <li class="mt2">Other Vite plugins see <code>\0</code> prefix and know to skip this module</li>
+
+  <li class="mt2">Custom plugin reads host machine's environment variables from <code>process.end</code> and collects the <code>TUTORIAL_</code> prefixed variables.</li>
+
+  <li class="mt2">Javascript object is serialized into text using <code>JSON.stringify()</code> and returned as default export from <code>load()</code> hook</li>
+
+  <li class="mt2">Source code successfully loads the virtual module&nbsp;✅</li>
+</ol>
+
+📚 Homework: Build a Vite plugin that provides virtual module for importing version of your package - `import { version } from "virtual:tutorial-assignment"`. It should read the `"version"` field from `package.json` and return it as named export.