feat: virtual file plugin tutorial (#1)

* fix: lesson title incorrect

* feat: env plugin, env vars in node

* feat: importing virtual module

* feat: resolve id of virtual module

* feat: env variables in load hook

Author: AriPerkkio

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

@@ -1,6 +1,6 @@
 ---
 type: lesson
-title: importing-yaml-files
+title: Importing YAML files
 focus: /index.js
 ---
 

src/content/tutorial/1-vite-plugin/2-env-plugin/1-env-vars-in-node/_files/index.js

@@ -0,0 +1,3 @@
+const message = process.env.TUTORIAL_MESSAGE;
+
+console.log(`Message is ${message}`);

src/content/tutorial/1-vite-plugin/2-env-plugin/1-env-vars-in-node/content.md

@@ -0,0 +1,42 @@
+---
+type: lesson
+title: Environment Variables in Node
+focus: /index.js
+previews: false
+template: empty
+mainCommand: ""
+prepareCommands: []
+terminal:
+  activePanel: 1
+  panels:
+    - ["terminal", "Terminal"]
+---
+
+# Vite Env plugin
+
+In this part we'll be creating a plugin that allows us to use environment variables from virtual module.
+By "virtual" we mean a module that doesn't really exist on file system but is provided by a Vite plugin in runtime.
+
+We'll be defining a module entrypoint for `"virtual:tutorial-env"`. Note that `virtual:` is a [convention of Vite virtual modules](https://vitejs.dev/guide/api-plugin#virtual-modules-convention).
+
+```ts
+import env from "virtual:tutorial-env";
+```
+
+But first let's take a look at how environment variables work in Node.
+
+- On Unix systems environment variables can be passed to commands by defining them before command itself
+
+  ```sh
+  TUTORIAL_MESSAGE=Hello node index.js
+  ```
+
+<br aria-hidden />
+
+- Environments variables are available in [`process.env`](https://nodejs.org/api/process.html#processenv)
+  ```js
+  console.log(process.env.TUTORIAL_MESSAGE);
+  // Hello
+  ```
+
+Try passing a different value to `node ./index.js` in the terminal.

src/content/tutorial/1-vite-plugin/2-env-plugin/2-importing-virtual-module/_files/index.js

@@ -0,0 +1,3 @@
+const output = "Initial output";
+
+export default output;

src/content/tutorial/1-vite-plugin/2-env-plugin/2-importing-virtual-module/_files/vite.config.ts

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

src/content/tutorial/1-vite-plugin/2-env-plugin/2-importing-virtual-module/_solution/index.js

@@ -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/2-importing-virtual-module/_solution/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "env-plugin",
+      load(id, options) {
+        if (id === "virtual:tutorial-env") {
+          return "export default 'This should work 🤔'";
+        }
+      },
+    },
+  ],
+});

src/content/tutorial/1-vite-plugin/2-env-plugin/2-importing-virtual-module/content.md

@@ -0,0 +1,51 @@
+---
+type: lesson
+title: Importing virtual module
+focus: /index.js
+---
+
+# Importing virtual module
+
+Now that we know how environment variables work, let's continue with our custom plugin!
+
+Add an import for the virtual module in `index.js`. At this point it should break our Vite setup but that's fine!
+
+```ts add={1,2} del={3}
+import env from "virtual:tutorial-env";
+const output = env;
+const output = "Initial output";
+
+export default output;
+```
+
+To fix the loading error we'll need to create a Vite plugin that can handle this special `virtual:tutorial-env` import.
+Let's add a new plugin with the name `env-plugin`.
+
+```ts
+export default defineConfig({
+  plugins: [
+    {
+      name: "env-plugin",
+    },
+  ],
+});
+```
+
+In the previous lessons we saw that a plugin can intercept module request in the `load()` hook. Let's try using the same trick here.
+
+```ts
+{
+  name: "env-plugin",
+  load(id, options) {
+    if (id === "virtual:tutorial-env") {
+      return "export default 'This should work 🤔'";
+    }
+  },
+},
+```
+
+Even when we are handling the loading of the file, Vite keeps showing an error. Note how this error is thrown by another Vite plugin - Vite's internal `plugin:vite:import-analysis`.
+
+> [plugin:vite:import-analysis] Failed to resolve import "virtual:tutorial-env" from "index.js". Does the file exist?
+
+Let's look at this error more in the next lesson!

src/content/tutorial/1-vite-plugin/2-env-plugin/3-resolve-id-of-virtual-module/_files/index.js

@@ -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/3-resolve-id-of-virtual-module/_files/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "env-plugin",
+      load(id, options) {
+        if (id === "virtual:tutorial-env") {
+          return "export default 'This should work 🤔'";
+        }
+      },
+    },
+  ],
+});