Merge branch 'typescript' of https://github.com/oslabs-beta/OverVue into typescript

Author: Ji Kim

src/App.vue

@@ -9,12 +9,6 @@
   />
 </template>
 
-<script>
-export default {
-  name: "App",
-};
-</script>
-
 <script setup>
 // import { defineComponent } from "vue";
 // import ElementPlus from 'element-plus'; // importing element plus component library

src/components/Canvas.vue

@@ -516,7 +516,9 @@ import { useStore } from "../store/main.js";
 import { ref, computed, onMounted, watch } from "vue";
 import * as fs from "fs";
 import { ResizePayload, Component } from "../../types";
-const { ipcRenderer } = window;
+// @ts-ignore
+// const { ipcRenderer } = window;
+// ipcRenderer is not used
 
 const cloneDeep = require("lodash.clonedeep");
 

src/components/left-sidebar/ComponentTab/CreateMenuHTMLQueue.vue

@@ -147,7 +147,7 @@ const setLayer = (element: { text: string; id: string }) => {
 
 const setParentLayer = () => {
   if (activeLayer.value.id !== "") {
-    upOneLayer(activeLayer.value.id);
+    upOneLayer(activeLayer.value.id as string);
   }
 };
 
@@ -183,13 +183,13 @@ const endDrag = (event: Event) => {
   else dragDropSortHtmlElements();
 };
 
-watch(activeComponent, () => {
-  if (activeComponent.value !== "") {
-    (store.componentMap[activeComponent.value] as Component).isActive = true;
-  } else {
-    (store.componentMap[activeComponent.value] as Component).isActive = false;
-  }
-});
+// watch(activeComponent, () => {
+//   if (activeComponent.value !== "") {
+//     (store.componentMap[activeComponent.value] as Component).isActive = true;
+//   } else {
+//     (store.componentMap[activeComponent.value] as Component).isActive = false;
+//   }
+// });
 </script>
 
 <!-- <script>

src/components/left-sidebar/ComponentTab/ImportComponent.vue

@@ -13,9 +13,10 @@
 import { computed } from "vue";
 import { useStore } from "../../../store/main.js";
 import { useCreateComponent } from "../../composables/useCreateComponent.js";
-import * as fs from "fs";
+// import * as fs from "fs";
 import { Component, HtmlElement, HtmlElementMap } from "../../../../types";
-const { ipcRenderer } = window.require("electron");
+// @ts-ignore
+const { fs, ipcRenderer } = window as any;
 const store = useStore();
 
 const props = defineProps(["title"]);
@@ -71,7 +72,7 @@ const importComponent = () => {
         },
       ],
     })
-    .then((res: { filePaths: fs.PathOrFileDescriptor }) => {
+    .then((res: { filePaths }) => {
       openVueFile(res.filePaths);
       alert("Successfully Imported");
     })
@@ -80,7 +81,7 @@ const importComponent = () => {
 
 //parses script tag string for props
 const parsingStringToProps = (str: string) => {
-  let props = [];
+  let props: string[] = [];
   let split = str.split(" ");
   for (let i = 0; i < split.length; i++) {
     if (
@@ -140,6 +141,7 @@ const parsingStringToState = (str: string) => {
 };
 
 //the bulk of the work for this component
+// @ts-ignore
 const openVueFile = (data) => {
   if (data === undefined) return;
 
@@ -265,8 +267,8 @@ const openVueFile = (data) => {
   //OverVue adds a <div></div> wrapper to all components. remove this before importing.
 
   let groupings = findGroupings(htmlList);
-  let groupingObj: { [key: string]: string[] } = objectGenerator(groupings);
-  let groupingArray = [];
+  let groupingObj: { [key: string]: HtmlElement } = objectGenerator(groupings);
+  let groupingArray: HtmlElement[] = [];
   for (const key in groupingObj) {
     groupingArray.push(groupingObj[key]);
   }
@@ -336,7 +338,7 @@ const openVueFile = (data) => {
 
   function findGroupings(array: string[]) {
     let count = 0; //tracks where the parent ends
-    let stopIndexes = []; //an array that will be used to slice out the parent/child relationships
+    let stopIndexes: number[] = []; //an array that will be used to slice out the parent/child relationships
     for (let i = 0; i < array.length; i++) {
       if (array[i][1] !== "/") {
         if (
@@ -358,7 +360,7 @@ const openVueFile = (data) => {
         stopIndexes.push(i);
       }
     }
-    let groupings = [];
+    let groupings: string[][] = [];
     let startIndex = 0;
     for (let i = 0; i < stopIndexes.length; i++) {
       groupings.push(array.slice(startIndex, stopIndexes[i] + 1));
@@ -388,7 +390,7 @@ const openVueFile = (data) => {
       if (array[i].length > 0) {
         const childGroupings = findGroupings(array[i]);
         const childrenObj = objectGenerator(childGroupings);
-        const childrenArray = [];
+        const childrenArray: any[] = [];
         for (const key in childrenObj) {
           childrenArray.push(childrenObj[key]);
         }

src/components/nav-buttons/ExportMenu.vue

@@ -34,8 +34,8 @@ Description:
 import { computed } from "vue";
 import { useStore } from "../../store/main";
 import { useExportComponent } from "../composables/useExportComponent";
-import * as fs from "fs";
-import path from "path";
+// import * as fs from "fs";
+// import path from "path";
 import {
   Component,
   HtmlElement,
@@ -44,7 +44,8 @@ import {
 } from "../../../types";
 
 const store = useStore();
-const { ipcRenderer } = window;
+// @ts-ignore
+const { fs, ipcRenderer, path } = window;
 
 const componentMap = computed(() => store.componentMap);
 const imagePath = computed(() => store.imagePath);

src/components/nav-buttons/ImportMenu.vue

@@ -31,9 +31,10 @@ Description:
 import { useStore } from "../../store/main";
 import ImportComponent from "../left-sidebar/ComponentTab/ImportComponent.vue";
 import { Component } from "../../../types";
-import * as fs from "fs";
+// import * as fs from "fs";
 const Mousetrap = require("mousetrap");
-const { ipcRenderer } = window;
+// @ts-ignore
+const { fs, ipcRenderer } = window;
 
 const store = useStore();
 

src/components/nav-buttons/SaveProject.vue

@@ -21,10 +21,10 @@ import localforage from "localforage";
 import { useStore } from "../../store/main";
 import { computed } from "vue";
 import { HtmlElement } from "app/types";
-import * as fs from "fs";
+// import * as fs from "fs";
 const Mousetrap = require("mousetrap");
 // @ts-ignore
-const { ipcRenderer } = window;
+const { fs, ipcRenderer } = window;
 
 const store = useStore();
 

src/components/right-sidebar/HTMLQueue.vue

@@ -136,8 +136,8 @@ const moreExceptions = () => {
   return childComponent;
 };
 
-const parentSelected: typeof store.parentSelected = (payload: any) =>
-  store.parentSelected(payload);
+// const parentSelected: typeof store.parentSelected = (payload: any) =>
+//   store.parentSelected(payload);
 
 const setActiveHTML: typeof store.setActiveHTML = (payload) =>
   store.setActiveHTML(payload);
@@ -187,12 +187,12 @@ const setActiveElement = (element: string[]) => {
 
 const setLayer = (element: { text: string; id: string }) => {
   setActiveLayer(element);
-  element.id = activeHTML.value;
+  element.id = activeHTML.value as string;
 };
 
 const setParentLayer = () => {
   if (activeLayer.value.id !== "") {
-    upOneLayer(activeLayer.value.id);
+    upOneLayer(activeLayer.value.id as string);
   }
 };
 
@@ -228,7 +228,7 @@ const endDrag = (event: MouseEvent) => {
   else dragDropSortHtmlElements();
 };
 
-const submitClass = (element: string, idNum: string) => {
+const submitClass = (element: string, idNum: number) => {
   if (element === "") {
     return;
   }
@@ -237,6 +237,7 @@ const submitClass = (element: string, idNum: string) => {
     class: element,
     id: idNum,
   };
+
   addActiveComponentClass(payload);
   classText.value = "";
 };

src/components/right-sidebar/Tree.vue

@@ -36,6 +36,7 @@ import VueTree from "@ssthouse/vue3-tree-chart";
 import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
 import { useStore } from "../../store/main.js";
 import { ref, computed, watch } from "vue";
+import { Component, RouteComponentMap } from "../../../types";
 
 const store = useStore();
 
@@ -118,7 +119,7 @@ const activateNode = (nodeToActivate: string) => {
 
 const buildTree = (componentData: typeof VueTree.treeData) => {
   //App is always the root of the tree.
-  const treeData = {
+  const treeData : {value: string; children:{value: string; children: string[]}[]} = {
     value: "App",
     children: [],
   };
@@ -152,7 +153,7 @@ function buildTreeChildren(array: string[]) {
           }
         }
       }
-      outputArray.push(outputObj);
+      (outputArray as { value: string; children: string[]}[]).push(outputObj);
     });
     return outputArray;
   }

src/components/right-sidebar/tutorial/Landing.vue

@@ -33,7 +33,10 @@
 
 <!-- COMPOSITION API SYNTAX -->
 <script setup lang="ts">
+// @ts-nocheck
+// No check for the shell
 import { useStore } from "../../../store/main.js";
+
 const { shell } = window;
 
 const store = useStore();