11Jul24 update prettier.json config

Author: vchan14

.prettierrc.json

@@ -1,8 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
+  "printWidth": 120
 }

src/App.vue

@@ -9,36 +9,36 @@ import questionIcon from "@/assets/question.svg";
 const route = useRoute();
 const title = useTitle();
 watch(
-    () => route.path,
-    (newPath) => {
-      title.value = `VueEx${newPath}` || 'VueEx';
-    },
+  () => route.path,
+  (newPath) => {
+    title.value = `VueEx${newPath}` || "VueEx";
+  },
 );
 </script>
 
 <template>
   <div class="flex h-full w-full flex-row gap-x-2">
     <div
-        class="scrollable-area flex h-full w-64 flex-col gap-y-4 overflow-y-auto rounded bg-green-300 px-3 py-2"
+      class="scrollable-area flex h-full w-64 flex-col gap-y-4 overflow-y-auto rounded bg-green-300 px-3 py-2"
     >
       <div class="sticky text-3xl font-semibold">Vue 3 Examples</div>
       <div
-          v-for="{ name, examples, link } in ALL_EXAMPLES"
-          :key="name"
-          class="flex flex-col gap-y-2"
+        v-for="{ name, examples, link } in ALL_EXAMPLES"
+        :key="name"
+        class="flex flex-col gap-y-2"
       >
-        <p
-            class="text-xl font-bold"
-        >{{ name }} <a :href="link" target="_blank">
-          <img class="w-4 inline" :src="questionIcon" alt="Question" />
-        </a>
+        <p class="text-xl font-bold">
+          {{ name }}
+          <a :href="link" target="_blank">
+            <img class="inline w-4" :src="questionIcon" alt="Question" />
+          </a>
         </p>
 
         <RouterButton
-            v-for="example in examples"
-            :key="example.name"
-            :to-path="example.path"
-            :name="example.name"
+          v-for="example in examples"
+          :key="example.name"
+          :to-path="example.path"
+          :name="example.name"
         />
       </div>
       <RouterButton to-path="/test" name="test me" />
@@ -58,4 +58,4 @@ watch(
 .scrollable-area:hover::-webkit-scrollbar-thumb {
   background: #999; /* darker gray color on hover */
 }
-</style>
+</style>

src/ReplFactory.js

@@ -9,5 +9,3 @@ export function createReplComponent(codeString, files = {}) {
     },
   });
 }
-
-

src/components/ReplWrapper.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   codeString: {
     type: String,
     required: false,
-    default: ""
+    default: "",
   },
   files: {
     type: Object,
@@ -28,7 +28,6 @@ if (props.codeString) {
     ...props.files,
   });
 }
-
 </script>
 
 <template>

src/components/RouterButton.vue

@@ -1,6 +1,6 @@
 <script setup>
-import {computed, defineProps} from "vue";
-import {useRoute} from "vue-router";
+import { computed, defineProps } from "vue";
+import { useRoute } from "vue-router";
 
 const props = defineProps({
   toPath: {
@@ -15,7 +15,7 @@ const props = defineProps({
 
 const route = useRoute();
 const isSelected = computed(() => {
-  return route.path === props.toPath
+  return route.path === props.toPath;
 });
 </script>
 

src/exampleButtons.js

@@ -3,8 +3,8 @@ import { IntroductionButtonExamples } from "@/factory/IntroductionFactory.js";
 import { StyleButtonExamples } from "@/factory/StylesFactory.js";
 import { RenderingButtonExamples } from "@/factory/RenderingFactory.js";
 import { EventHandlingButtonExamples } from "@/factory/EventHandlingFactory.js";
-import {OthersButtonExamples} from "@/factory/OthersFactory.js";
-import {PropsButtonExamples} from "@/factory/PropsFactory.js";
+import { OthersButtonExamples } from "@/factory/OthersFactory.js";
+import { PropsButtonExamples } from "@/factory/PropsFactory.js";
 
 export const ALL_EXAMPLES = [
   IntroductionButtonExamples,

src/factory/EventHandling2Factory.js

@@ -1,7 +1,3 @@
-
-
-
-
 // Events
 import ComponentEventsAppVue from "@/views/eventhandling/componentevents/AppView.vue?raw";
 import ComponentEventsInnerVue from "@/views/eventhandling/componentevents/InnerView.vue?raw";
@@ -10,43 +6,37 @@ import DomEventForwardingInnerVue from "@/views/eventhandling/domeventforwarding
 import EventForwardingAppVue from "@/views/eventhandling/eventforwarding/GrandParentView.vue?raw";
 import EventForwardingChildVue from "@/views/eventhandling/eventforwarding/ChildView.vue?raw";
 import EventForwardingParentVue from "@/views/eventhandling/eventforwarding/ParentView.vue?raw";
-import {createReplComponent} from "@/ReplFactory.js";
-import {createExample, createRouterObjAdvanced} from "@/util.js";
-
-
+import { createReplComponent } from "@/ReplFactory.js";
+import { createExample, createRouterObjAdvanced } from "@/util.js";
 
 const ComponentEventsVue = {
   name: "Component Events",
-  component:  createReplComponent(ComponentEventsAppVue, {
+  component: createReplComponent(ComponentEventsAppVue, {
     "InnerView.vue": ComponentEventsInnerVue,
-  })
-}
-
+  }),
+};
 
 const DomEventForwardingVue = {
   name: "Dom Event Forwarding",
   component: createReplComponent(DomEventForwardingAppVue, {
     "InnerView.vue": DomEventForwardingInnerVue,
-  })
-}
+  }),
+};
 
 const EventForwardingVue = {
   name: "Event Forwarding",
   component: createReplComponent(EventForwardingAppVue, {
     "ChildView.vue": EventForwardingChildVue,
     "ParentView.vue": EventForwardingParentVue,
-  })
-
-}
-
-const list = [
-  ComponentEventsVue,
-  DomEventForwardingVue,
-  EventForwardingVue,
-]
-
-export const EventHandling2Router = list.map((component) => createRouterObjAdvanced(component.name, component.component));
+  }),
+};
 
+const list = [ComponentEventsVue, DomEventForwardingVue, EventForwardingVue];
 
+export const EventHandling2Router = list.map((component) =>
+  createRouterObjAdvanced(component.name, component.component),
+);
 
-export const EventHandling2ButtonExamples =  list.map((component) => createExample(component.name));
+export const EventHandling2ButtonExamples = list.map((component) =>
+  createExample(component.name),
+);

src/factory/EventHandlingFactory.js

@@ -1,5 +1,8 @@
 import { createExample, createRouterObj, sortExamples } from "@/util.js";
-import {EventHandling2ButtonExamples, EventHandling2Router} from "@/factory/EventHandling2Factory.js";
+import {
+  EventHandling2ButtonExamples,
+  EventHandling2Router,
+} from "@/factory/EventHandling2Factory.js";
 
 const path = "/src/views/eventhandling/";
 
@@ -15,12 +18,12 @@ const fileNames = Object.keys(modules).map((key) =>
 );
 
 let exampleList = fileNames.map((filename) => createExample(filename));
-exampleList = [...exampleList, ...EventHandling2ButtonExamples]
+exampleList = [...exampleList, ...EventHandling2ButtonExamples];
 
 let EventHandlingRouterList = fileNames.map((filename) =>
   createRouterObj(filename, modules, path),
 );
-EventHandlingRouterList = [...EventHandlingRouterList, ...EventHandling2Router]
+EventHandlingRouterList = [...EventHandlingRouterList, ...EventHandling2Router];
 
 const orderedList = [
   "If Conditional",

src/factory/IntroductionFactory.js

@@ -1,8 +1,4 @@
-import {
-  createExample,
-  createRouterObj,
-  sortExamples,
-} from "@/util.js";
+import { createExample, createRouterObj, sortExamples } from "@/util.js";
 
 const path = "/src/views/introduction/";
 
@@ -29,7 +25,7 @@ const orderedList = [
   "Dynamic Attributes",
   "Text Input",
   "Checkbox Input",
-  "Numeric Input"
+  "Numeric Input",
 ];
 
 // write a util method given to sort exampleList based on orderedList

src/factory/OthersFactory.js

@@ -4,29 +4,31 @@ import {
   createRouterObjAdvanced,
   extractUniqueFolderNames,
   organizeFilesByFolder,
-  sortExamples
+  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', {
+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 => {
+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));
+let othersRouterList = exampleList.map(({ name }) =>
+  createRouterObj(name, singleFileComponents, path),
+);
 
 // Import components from folders
-const folderComponents = import.meta.glob('/src/views/others/*/*.vue', {
+const folderComponents = import.meta.glob("/src/views/others/*/*.vue", {
   eager: true,
   query: "?raw",
   import: "default",
@@ -59,4 +61,4 @@ export const OthersButtonExamples = {
   link: "https://vuejs.org/guide/essentials/class-and-style.html",
 };
 
-export { othersRouterList };
+export { othersRouterList };

src/factory/PropsFactory.js

@@ -1,28 +1,28 @@
-import {generateButtonExamplesAndRouterList} from "@/factoryUtil.js";
+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', {
+const singleFileComponents = import.meta.glob("/src/views/props/*.vue", {
   eager: true,
   query: "?raw",
   import: "default",
 });
 
-const folderComponents = import.meta.glob('/src/views/props/*/*.vue', {
+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);
-
+const { ButtonExamples: PropsButtonExamples, RouterList: PropsRouterList } =
+  generateButtonExamplesAndRouterList(
+    path,
+    singleFileComponents,
+    folderComponents,
+    sectionName,
+    link,
+  );
 
 export { PropsButtonExamples, PropsRouterList };
-

src/factoryUtil.js

@@ -4,7 +4,7 @@ import {
   createRouterObjAdvanced,
   extractUniqueFolderNames,
   organizeFilesByFolder,
-  sortExamples
+  sortExamples,
 } from "@/util.js";
 import { createReplComponent } from "@/ReplFactory.js";
 
@@ -16,21 +16,23 @@ import { createReplComponent } from "@/ReplFactory.js";
  * @param {string} sectionName - The name of the section.
  * @returns {{ ButtonExamples: Object, RouterList: Object[] }}
  */
-export function generateButtonExamplesAndRouterList(basePath,
-                                                    singleFileComponents,
-                                                    folderComponents,
-                                                    sectionName,
-                                                    link,
-                                                    orderedList = []) {
-
-
+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 => {
+  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));
+  let routerList = exampleList.map(({ name }) =>
+    createRouterObj(name, singleFileComponents, basePath),
+  );
 
   // Extract folder names and generate examples for them
   const folderNames = extractUniqueFolderNames(folderComponents);
@@ -56,8 +58,8 @@ export function generateButtonExamplesAndRouterList(basePath,
     ButtonExamples: {
       name: sectionName,
       examples: exampleList,
-      link: link
+      link: link,
     },
     RouterList: routerList,
   };
-}
+}