refactor: preparation for template inheritance (#5)

AriPerkkio · web-flow · commit 235bcd1403c4 · 2024-06-27T10:11:57.000+03:00
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_files/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_files/index.js
@@ -1,3 +1,3 @@
 const content = ["Initial content"];
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_solution/content.yaml b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_solution/content.yaml
@@ -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.
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_solution/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/_solution/index.js
@@ -1,3 +1,3 @@
 import content from "./content.yaml";
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/content.md b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/1-importing-yaml-files/content.md
@@ -16,7 +16,7 @@ Our goal is to be able to import `content.yaml` file in a Javascript file and us
 import content from "./content.yaml";
 
 console.log(content);
-// > [{ employees: [{ id: 1, ...}, ...], projects: { id: 101, ...}, ... }]
+// > [{  employees: [{ id: 1, ... }, ...], projects: [{ id: 101, ...}, ...] }]
 ```
 
 Try doing this in `index.js`:
@@ -25,7 +25,7 @@ Try doing this in `index.js`:
 import content from "./content.yaml";
 const content = ["Initial content"];
 
-export { content };
+export default content;
 ```
 
 At this point we should run into error when Vite fails to load `.yaml` file.&nbsp;❌
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/_files/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/_files/index.js
@@ -1,3 +1,3 @@
 import content from "./content.yaml";
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/_solution/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/2-defining-custom-plugin/_solution/index.js
@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_files/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_files/index.js
@@ -1,3 +1,3 @@
 import content from "./content.yaml";
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_solution/content.yaml b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_solution/content.yaml
@@ -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.
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_solution/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/3-defining-load-hook/_solution/index.js
@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_files/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_files/index.js
@@ -1,3 +1,3 @@
 import content from "./content.yaml";
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_solution/content.yaml b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_solution/content.yaml
@@ -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.
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_solution/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/4-processing-yaml-files/_solution/index.js
@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_files/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_files/index.js
@@ -1,3 +1,3 @@
 import content from "./content.yaml";
 
-export { content };
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/content.yaml b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/content.yaml
@@ -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.
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/index.js b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/index.js
@@ -0,0 +1,3 @@
+import content from "./content.yaml";
+
+export default content;
diff --git a/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/vite.config.ts b/src/content/tutorial/1-vite-plugin/1-yaml-plugin/5-summarize-yaml-plugin/_solution/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)}`,
+          };
+        }
+      },
+    },
+  ],
+});
diff --git a/src/content/tutorial/1-vite-plugin/2-env-plugin/1-env-vars-in-node/_solution/index.js b/src/content/tutorial/1-vite-plugin/2-env-plugin/1-env-vars-in-node/_solution/index.js
@@ -0,0 +1,3 @@
+const message = process.env.TUTORIAL_MESSAGE;
+
+console.log(`Message is ${message}`);
diff --git a/src/content/tutorial/1-vite-plugin/2-env-plugin/4-env-variables-in-load-hook/content.md b/src/content/tutorial/1-vite-plugin/2-env-plugin/4-env-variables-in-load-hook/content.md
@@ -30,7 +30,7 @@ function getTutorialEnvVariables() {
 }
 ```
 
-Let's use `getTutorialEnvVariables` in the laod hook to collect all `TUTORIAL_` prefixed environment variables and return them as a object.
+Let's use `getTutorialEnvVariables` in the `load` hook to collect all `TUTORIAL_` prefixed environment variables and return them as a object.
 
 ```ts add={3,4} del={5}
 load(id, options) {
diff --git a/src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_solution/index.js b/src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_solution/index.js
@@ -0,0 +1,4 @@
+import env from "virtual:tutorial-env";
+const output = env;
+
+export default output;
diff --git a/src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_solution/vite.config.ts b/src/content/tutorial/1-vite-plugin/2-env-plugin/5-summarize-env-plugin/_solution/vite.config.ts
@@ -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;
+}
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_solution/tutorial-example.js b/src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_solution/tutorial-example.js
@@ -0,0 +1,5 @@
+mountHTML(`
+  <div>
+    Hello world!
+  </div>
+`);
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_solution/vite.config.ts b/src/content/tutorial/1-vite-plugin/3-replace-plugin/2-defining-transform-hook/_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",
+    }),
+  ],
+});
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/3-transforming-source-code/_solution/tutorial-example.js b/src/content/tutorial/1-vite-plugin/3-replace-plugin/3-transforming-source-code/_solution/tutorial-example.js
@@ -0,0 +1,5 @@
+mountHTML(`
+  <div>
+    Hello world!
+  </div>
+`);
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/tutorial-example.js b/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/tutorial-example.js
@@ -0,0 +1,5 @@
+mountHTML(`
+  <div>
+    Hello world!
+  </div>
+`);
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/vite-plugin-replace.ts b/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/vite-plugin-replace.ts
@@ -0,0 +1,10 @@
+export default function vitePluginReplace(options) {
+  return {
+    name: "replace-plugin",
+    transform(src, id) {
+      if (id.includes("tutorial-example.js")) {
+        return { code: src.replaceAll(options.from, options.to) };
+      }
+    },
+  };
+}
diff --git a/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/vite.config.ts b/src/content/tutorial/1-vite-plugin/3-replace-plugin/4-summarize-replace-plugin/_solution/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import replacePlugin from "./vite-plugin-replace";
+
+export default defineConfig({
+  plugins: [
+    replacePlugin({
+      from: "Hello world",
+      to: "Replaced value",
+    }),
+  ],
+});
diff --git a/src/templates/default/index.js b/src/templates/default/index.js
@@ -1,3 +1,3 @@
 const content = ["Initial content"];
 
-export { content };
+export default content;
diff --git a/src/templates/default/main.js b/src/templates/default/main.js
@@ -13,7 +13,7 @@ document.querySelector("#app").innerHTML = `
 import("./index.js")
   .then((mod) => {
     document.getElementById(ID).textContent = JSON.stringify(
-      mod.content,
+      mod.default,
       null,
       2
     );
diff --git a/src/templates/default/package-lock.json b/src/templates/default/package-lock.json
diff --git a/src/templates/default/vite.config.internal.ts b/src/templates/default/vite.config.internal.ts
@@ -9,6 +9,9 @@ export default mergeConfig(
     define: {
       TUTORIAL_LOADED_VITE_PLUGINS: `"${loadedPlugins || "none"}"`,
     },
+    build: {
+      target: "esnext",
+    },
   }),
   viteConfig
 );

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`const content = ["Initial content"];`
`2`	`2`
`3`		`-export { content };`
	`3`	`+export default content;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import content from "./content.yaml";`
`2`	`2`
`3`		`-export { content };`
	`3`	`+export default content;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import content from "./content.yaml";`
	`2`	`+`
	`3`	`+export default content;`