11Jul24 dynamically generate examples in folders

Author: vchan14

src/ReplFactory.js

@@ -1,18 +1,6 @@
 // createReplComponent.js
 import { defineComponent, h } from "vue";
-import ReplWrapper from "@/components/ReplWrapper.vue"; // Adjust the path accordingly
-
-// Props
-import DeclaringPropsAppVue from "@/views/props/declaringprops/DeclaringPropsView.vue?raw";
-import DeclaringPropsNestedVue from "@/views/props/declaringprops/NestedView.vue?raw";
-
-import DefaultValuesAppVue from "@/views/props/defaultvalues/DefaultValuesView.vue?raw";
-import DefaultValuesNestedVue from "@/views/props/defaultvalues/NestedView.vue?raw";
-
-import SpreadPropsAppVue from "@/views/props/spreadprops/SpreadPropsView.vue?raw";
-import SpreadPropsNestedVue from "@/views/props/spreadprops/InfoView.vue?raw";
-
-
+import ReplWrapper from "@/components/ReplWrapper.vue";
 
 export function createReplComponent(codeString, files = {}) {
   return defineComponent({
@@ -22,15 +10,4 @@ export function createReplComponent(codeString, files = {}) {
   });
 }
 
-// Props
-export const DeclaringPropsVue = createReplComponent(DeclaringPropsAppVue, {
-  "NestedView.vue": DeclaringPropsNestedVue,
-});
-export const DefaultValuesVue = createReplComponent(DefaultValuesAppVue, {
-  "NestedView.vue": DefaultValuesNestedVue,
-});
-export const SpreadPropsVue = createReplComponent(SpreadPropsAppVue, {
-  "InfoView.vue": SpreadPropsNestedVue,
-});
-
 

src/components/ReplWrapper.vue

@@ -6,7 +6,8 @@ import CodeMirror from "@vue/repl/codemirror-editor";
 const props = defineProps({
   codeString: {
     type: String,
-    required: true,
+    required: false,
+    default: ""
   },
   files: {
     type: Object,
@@ -15,12 +16,19 @@ const props = defineProps({
 });
 
 const store = new useStore({});
+if (props.codeString) {
+  store.setFiles({
+    ...store.getFiles(),
+    "App.vue": props.codeString,
+    ...props.files,
+  });
+} else {
+  store.setFiles({
+    ...store.getFiles(),
+    ...props.files,
+  });
+}
 
-store.setFiles({
-  ...store.getFiles(),
-  "App.vue": props.codeString,
-  ...props.files,
-});
 </script>
 
 <template>

src/components/RouterButton.vue

@@ -15,8 +15,6 @@ const props = defineProps({
 
 const route = useRoute();
 const isSelected = computed(() => {
-  console.log(props.toPath)
-
   return route.path === props.toPath
 });
 </script>

src/exampleButtons.js

@@ -3,32 +3,15 @@ import { IntroductionButtonExamples } from "@/factory/IntroductionFactory.js";
 import { StyleButtonExamples } from "@/factory/StylesFactory.js";
 import { RenderingButtonExamples } from "@/factory/RenderingFactory.js";
 import { EventHandlingButtonExamples } from "@/factory/EventHandlingFactory.js";
-
-const propExamples = {
-  name: "Props",
-  examples: [
-    {
-      name: "Declaring Props",
-      path: "/declaringprops",
-    },
-    {
-      name: "Default Values",
-      path: "/defaultvalues",
-    },
-    {
-      name: "Spread Props",
-      path: "/spreadprops",
-    },
-  ],
-  link: "https://vuejs.org/guide/components/props.html",
-};
-
+import {OthersButtonExamples} from "@/factory/OthersFactory.js";
+import {PropsButtonExamples} from "@/factory/PropsFactory.js";
 
 export const ALL_EXAMPLES = [
   IntroductionButtonExamples,
   ReactivityButtonExamples,
   StyleButtonExamples,
   RenderingButtonExamples,
   EventHandlingButtonExamples,
-  propExamples,
+  PropsButtonExamples,
+  OthersButtonExamples,
 ];

src/factory/OthersFactory.js

@@ -0,0 +1,62 @@
+import {
+  createExample,
+  createRouterObj,
+  createRouterObjAdvanced,
+  extractUniqueFolderNames,
+  organizeFilesByFolder,
+  sortExamples
+} from "@/util.js";
+import { createReplComponent } from "@/ReplFactory.js";
+
+const path = "/src/views/others/";
+
+// Import single file components
+const singleFileComponents = import.meta.glob('/src/views/others/*.vue', {
+  eager: true,
+  query: "?raw",
+  import: "default",
+});
+
+// Generate examples and router objects for single file components
+let exampleList = Object.keys(singleFileComponents).map(key => {
+  const filename = key.replace(path, "").replace(".vue", "");
+  return createExample(filename);
+});
+
+let othersRouterList = exampleList.map(({ name }) => createRouterObj(name, singleFileComponents, path));
+
+// Import components from folders
+const folderComponents = import.meta.glob('/src/views/others/*/*.vue', {
+  eager: true,
+  query: "?raw",
+  import: "default",
+});
+
+// Extract folder names and generate examples for them
+const folderNames = extractUniqueFolderNames(folderComponents);
+exampleList = [...exampleList, ...folderNames.map(createExample)];
+
+// Organize folder components and generate router objects
+const organizedFolders = organizeFilesByFolder(folderComponents);
+Object.entries(organizedFolders).forEach(([folderName, folderFiles]) => {
+  // Rename `${folderName}.vue` to `App.vue` if exists
+  const folderVue = `${folderName}.vue`;
+  if (folderFiles[folderVue]) {
+    folderFiles["App.vue"] = folderFiles[folderVue];
+    delete folderFiles[folderVue];
+  }
+  const component = createReplComponent(null, folderFiles);
+  othersRouterList.push(createRouterObjAdvanced(folderName, component));
+});
+
+// Sort examples if needed
+const orderedList = [];
+exampleList = sortExamples(orderedList, exampleList);
+
+export const OthersButtonExamples = {
+  name: "Others",
+  examples: exampleList,
+  link: "https://vuejs.org/guide/essentials/class-and-style.html",
+};
+
+export { othersRouterList };

src/factory/PropsFactory.js

@@ -0,0 +1,28 @@
+import {generateButtonExamplesAndRouterList} from "@/factoryUtil.js";
+
+const path = "/src/views/props/";
+const sectionName = "Props";
+const link = "https://vuejs.org/guide/components/props.html";
+
+const singleFileComponents = import.meta.glob('/src/views/props/*.vue', {
+  eager: true,
+  query: "?raw",
+  import: "default",
+});
+
+const folderComponents = import.meta.glob('/src/views/props/*/*.vue', {
+  eager: true,
+  query: "?raw",
+  import: "default",
+});
+
+
+const {
+  ButtonExamples: PropsButtonExamples,
+  RouterList: PropsRouterList
+} = generateButtonExamplesAndRouterList(path, singleFileComponents,
+  folderComponents, sectionName, link);
+
+
+export { PropsButtonExamples, PropsRouterList };
+

src/factoryUtil.js

@@ -0,0 +1,63 @@
+import {
+  createExample,
+  createRouterObj,
+  createRouterObjAdvanced,
+  extractUniqueFolderNames,
+  organizeFilesByFolder,
+  sortExamples
+} from "@/util.js";
+import { createReplComponent } from "@/ReplFactory.js";
+
+/**
+ * Generates button examples and router list for a given path.
+ *
+ * @param {string} basePath - The base path to the Vue components.
+ * @param {string[]} orderedList - An optional array to sort the examples.
+ * @param {string} sectionName - The name of the section.
+ * @returns {{ ButtonExamples: Object, RouterList: Object[] }}
+ */
+export function generateButtonExamplesAndRouterList(basePath,
+                                                    singleFileComponents,
+                                                    folderComponents,
+                                                    sectionName,
+                                                    link,
+                                                    orderedList = []) {
+
+
+  // Generate examples and router objects for single file components
+  let exampleList = Object.keys(singleFileComponents).map(key => {
+    const filename = key.replace(basePath, "").replace(".vue", "");
+    return createExample(filename);
+  });
+
+  let routerList = exampleList.map(({ name }) => createRouterObj(name, singleFileComponents, basePath));
+
+  // Extract folder names and generate examples for them
+  const folderNames = extractUniqueFolderNames(folderComponents);
+  exampleList = [...exampleList, ...folderNames.map(createExample)];
+
+  // Organize folder components and generate router objects
+  const organizedFolders = organizeFilesByFolder(folderComponents);
+  Object.entries(organizedFolders).forEach(([folderName, folderFiles]) => {
+    // Rename `${folderName}.vue` to `App.vue` if exists
+    const folderVue = `${folderName}.vue`;
+    if (folderFiles[folderVue]) {
+      folderFiles["App.vue"] = folderFiles[folderVue];
+      delete folderFiles[folderVue];
+    }
+    const component = createReplComponent(null, folderFiles);
+    routerList.push(createRouterObjAdvanced(folderName, component));
+  });
+
+  // Sort examples if an ordered list is provided
+  exampleList = sortExamples(orderedList, exampleList);
+
+  return {
+    ButtonExamples: {
+      name: sectionName,
+      examples: exampleList,
+      link: link
+    },
+    RouterList: routerList,
+  };
+}

src/router/index.js

@@ -1,11 +1,12 @@
 import {createRouter, createWebHistory} from "vue-router";
-import {DeclaringPropsVue, DefaultValuesVue, SpreadPropsVue,} from "@/ReplFactory.js";
 import {ReactivityRouterList} from "@/factory/ReativityFactory.js";
 import {IntroductionRouterList} from "@/factory/IntroductionFactory.js";
 import {StyleRouterList} from "@/factory/StylesFactory.js";
 import {RenderingRouterList} from "@/factory/RenderingFactory.js";
 import {EventHandlingRouterList} from "@/factory/EventHandlingFactory.js";
 import TestView from "@/views/TestView.vue";
+import {othersRouterList} from "@/factory/OthersFactory.js";
+import {PropsRouterList} from "@/factory/PropsFactory.js";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,21 +15,6 @@ const router = createRouter({
       path: "/",
       redirect: "/HelloWorld",
     },
-    {
-      path: "/declaringprops",
-      name: "declaringprops",
-      component: DeclaringPropsVue,
-    },
-    {
-      path: "/defaultvalues",
-      name: "defaultvalues",
-      component: DefaultValuesVue,
-    },
-    {
-      path: "/spreadprops",
-      name: "spreadprops",
-      component: SpreadPropsVue,
-    },
     {
       path: "/test",
       name: "testme",
@@ -40,6 +26,8 @@ const router = createRouter({
     ...StyleRouterList,
     ...RenderingRouterList,
     ...EventHandlingRouterList,
+    ...PropsRouterList,
+    ...othersRouterList,
   ],
 });
 

src/util.js

@@ -37,3 +37,48 @@ export const sortExamples = (orderedList, exampleList) => {
     return orderedList.indexOf(a.name) - orderedList.indexOf(b.name);
   });
 };
+
+/**
+ * Extracts unique folder names from a given object's keys, where each key represents a file path.
+ * This function assumes that the file paths are structured such that the folder name is the second-to-last segment
+ * when the path is split by "/".
+ *
+ * @param {Object} filesObject - An object with keys as file paths.
+ * @returns {string[]} An array of unique folder names extracted from the file paths.
+ */
+export const extractUniqueFolderNames = (filesObject) => {
+  const folderNames = new Set();
+  for (const key in filesObject) {
+    const folderName = key.split("/").slice(-2)[0];
+    folderNames.add(folderName);
+  }
+  return [...folderNames];
+};
+
+
+/**
+ * Organizes files into a structured object based on their folder paths.
+ *
+ * This function takes an object where keys represent file paths and values represent file contents.
+ * It then organizes these files into a nested object structure, where each key is a folder name,
+ * and its value is an object containing file names (as keys) and their contents (as values).
+ *
+ * @param {Object} filesObject - The object containing file paths as keys and file contents as values.
+ * @returns {Object} An organized object with folder names as keys and objects of file names and contents as values.
+ */
+export const organizeFilesByFolder = (filesObject) => {
+  const organized = {};
+  for (const [path, content] of Object.entries(filesObject)) {
+    const parts = path.split('/');
+    const fileName = parts.pop(); // Get the file name
+    const folderName = parts.pop(); // Get the folder name
+
+    if (!organized[folderName]) {
+      organized[folderName] = {}; // Initialize the folder object if it doesn't exist
+    }
+
+    organized[folderName][fileName] = content; // Add the file object to the folder
+  };
+
+  return organized;
+};