started more typescript to begin with

Author: Koregano73

.eslintrc.js

@@ -8,9 +8,13 @@ module.exports = {
     'vue/no-deprecated-slot-attribute': 'off',
   },
 
+  "parser": "vue-eslint-parser",
   parserOptions: {
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-    parser: '@babel/eslint-parser',
+    parser: { //attempt to speed up runtime using TS when coding
+      "ts":'@typescript-eslint/parser',
+      "<template>": "espree"
+    },
     requireConfigFile: false,
     sourceType: 'module', // Allows for the use of imports
   },

src/components/nav-buttons/ExportMenu.vue

@@ -18,15 +18,17 @@ Description:
   </q-btn>
 </template>
 
-<script>
+<script lang="ts">
+import * as types from "types";
 import { useExportComponent } from "../composables/useExportComponent.js";
 import { mapState } from "vuex";
+import { defineComponent } from "vue";
 const { fs, ipcRenderer } = window;
 
 import writeNested from "../../mixins/writeNested";
 
 
-export default {
+export default defineComponent({
   name: "ExportProjectComponent",
   mixins: [writeNested],
   methods: {
@@ -40,11 +42,11 @@ export default {
           message: "Choose location to save folder in",
           nameFieldLabel: "Application Name",
         })
-        .then((result) => {
+        .then((result:any) => {
           this.exportFile(result.filePath)
           alert('Successfully Exported')
         })
-        .catch((err) => console.log(err));
+        .catch((err:string) => console.log(err));
     },
     exportProject: function () {
 
@@ -56,7 +58,7 @@ export default {
      * invokes: createRouterImports(this.componentMap['App'].children),
      *          createExport(this.componentMap['App'].children)
      *  */
-    createRouter(location) {
+    createRouter(location:string) {
       if (this.exportAsTypescript === "on") {
         fs.writeFileSync(
           path.join(location, "src", "router", "index.ts"),
@@ -75,8 +77,8 @@ export default {
      * @description import routed components from the /views/ dir
      * @argument: this.componentMap['App'].children
      */
-    createRouterImports(routes) {
-      let str = "import { createRouter, createWebHistory } from 'vue-router';\n";
+    createRouterImports(routes):string {
+      let str:string = "import { createRouter, createWebHistory } from 'vue-router';\n";
       for(let view in routes) {
           str += `import ${view} from '../views/${view}.vue';\n`;
       }
@@ -85,8 +87,8 @@ export default {
     /**
      * @description creates the `export default` code in <script>
      */
-    createExport(routes) {
-      let str = "export default createRouter({\n\thistory: createWebHistory(import.meta.env.BASE_URL),\n\troutes: [\n";
+    createExport(routes):string {
+      let str:string = "export default createRouter({\n\thistory: createWebHistory(import.meta.env.BASE_URL),\n\troutes: [\n";
       for(let view in routes) {
           // HomeView route is initialized to "localhost:3000/" url
           if (view === "HomeView") {
@@ -105,7 +107,7 @@ export default {
      * @description: creates component code <template>, <script>, <style>
      * invokes writeTemplate, writeScript, writeStyle
      */
-    createComponentCode(componentLocation, componentName, children, routes) {
+    createComponentCode(componentLocation, componentName, children, routes):void {
       if (componentName === "App") {
         fs.writeFileSync(
           componentLocation + ".vue",
@@ -123,14 +125,14 @@ export default {
       }
     },
     // creates assets folder
-    createAssetFile(targetLocation, assetLocation) {
+    createAssetFile(targetLocation:string, assetLocation):void {
       let saved = remote.nativeImage.createFromPath(assetLocation);
       let urlData = saved.toPNG();
       fs.writeFileSync(targetLocation + ".png", urlData);
     },
-    writeTemplateTag(componentName) {
-      // create reference object
-      const htmlElementMap = {
+    writeTemplateTag(componentName:string):string {
+      // create reference object - replace later
+      const htmlElementMap:types.HtmlElementMap = {
         div: ["<div", "</div>"],
         button: ["<button", "</button>"],
         form: ["<form", "</form>"],
@@ -268,7 +270,7 @@ export default {
     /**
      * @description imports child components into <script>
      */
-    writeScript(componentName, children) {
+    writeScript(componentName: string, children) {
       // add import mapstate and mapactions if they exist
       const currentComponent = this.componentMap[componentName];
       const routes = Object.keys(this.routes);
@@ -399,7 +401,7 @@ export default {
      */
     /* UPDATE THIS TO GRAB INFORMATION FROM this.componentMap NOT this.routes*/
     /* this.componentMap does not have x-y positioning stored */
-    writeStyle(componentName) {
+    writeStyle(componentName:string) {
       let htmlArray = this.componentMap[componentName].htmlList;
       let styleString = "";
       console.log(componentName);
@@ -510,7 +512,7 @@ export default {
       }
     },
     createESLintRC(location) {
-      let str;
+      let str:string;
       if (this.exportAsTypescript === "on") {
         str += `require("@rushstack/eslint-patch/modern-module-resolution");\n\n`;
       }
@@ -548,14 +550,14 @@ export default {
     },
     createTSDeclaration(location) {
       if (this.exportAsTypescript === "on") {
-        let str = `/// <reference types="vite/client" />`;
+        let str:string = `/// <reference types="vite/client" />`;
         fs.writeFileSync(path.join(location, "env.d.ts"), str);
       } else {
         return;
       }
     },
     createStore(location) {
-      let str = `import { createStore } from 'vuex';\n`;
+      let str:string = `import { createStore } from 'vuex';\n`;
       str += `\nconst store = createStore({`;
       str += `\n\tstate () {`;
       str += `\n\t\treturn {`;
@@ -600,7 +602,7 @@ export default {
     },
     // create package.json file
     createPackage(location) {
-      let str = `{`;
+      let str:string = `{`;
       str += `\n\t"name": "My-OverVue-Project",`;
       str += `\n\t"version": "0.0.0",`;
       str += `\n\t"scripts": {`;
@@ -715,7 +717,7 @@ export default {
     "containerH"
     ]),
   },
-};
+});
 </script>
 
 <style scoped>

src/components/nav-buttons/GridDensity.vue

@@ -1,3 +1,8 @@
+<!--
+Description:
+  Displays Grid Density Buttons
+  Functionality includes: drop down menu for both height and width to increase or decrease grid lines by a set amount
+-->
 <template>
   <div id="gridDensity">
     <q-btn-dropdown class="q-btn" color="purple" label="Width">

src/components/nav-buttons/ImportMenu.vue

@@ -17,21 +17,22 @@ Description:
   </q-btn>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions } from "vuex";
 import ImportComponent from "../left-sidebar/ComponentTab/ImportComponent.vue"
 const Mousetrap = require("mousetrap");
 const { fs, ipcRenderer } = window;
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
   name: "ImportMenu",
   components: {
     ImportComponent
   },
   methods: {
     ...mapActions(["openProject"]),
     // opens project
-    openJSONFile(data) {
+    openJSONFile(data:string) {
       if (data === undefined) return;
       const jsonFile = JSON.parse(fs.readFileSync(data[0], "utf8"));
       this.openProject(jsonFile);
@@ -47,8 +48,8 @@ export default {
             },
           ],
         })
-        .then((res) => this.openJSONFile(res.filePaths))
-        .catch((err) => console.log(err));
+        .then((res:any) => this.openJSONFile(res.filePaths))
+        .catch((err:string) => console.log(err));
     },
 
     openProjectJSON() {
@@ -61,7 +62,7 @@ export default {
       this.openProjectJSON();
     });
   },
-};
+});
 </script>
 
 <style scoped>

src/components/right-sidebar/GetStarted.vue

@@ -33,13 +33,14 @@
   </q-card>
 </template>
 
-<script>
+<script lang="ts">
 import BasicFunctions from './tutorial/BasicFunctions.vue'
 import AdvancedFunctions from './tutorial/AdvancedFunctions.vue'
 import Landing from './tutorial/Landing.vue'
 import NewVersionInfo from './tutorial/NewVersionInfo.vue'
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
   components: {
     BasicFunctions,
     AdvancedFunctions,
@@ -48,11 +49,10 @@ export default {
   },
   data() {
     return {
-      tutorialPage: 'landing'
+      tutorialPage: 'landing' as string,
     }
   }
-}
-
+});
 </script>
 
 <style lang="scss" scoped>

src/layouts/MyLayout.vue

@@ -138,7 +138,7 @@ Description:
   </q-layout>
 </template>
 
-<script>
+<script lang="ts">
 // HomeSideDropDown contains RouteDisplay, VuexForm and Edit but we'll be separating these components across different tabs
 import RightSidebar from "../components/right-sidebar/RightSidebar.vue";
 import ExportMenu from "../components/nav-buttons/ExportMenu.vue";
@@ -149,19 +149,19 @@ import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 import ComponentTab from "../components/left-sidebar/ComponentTab/ComponentTab.vue";
 import StoreTab from "../components/left-sidebar/StoreTab/StoreTab.vue";
 import { mapState, mapActions } from "vuex";
+import { defineComponent } from "vue";
 
-
-export default {
+export default defineComponent({
   // Passed down from App.vue
   props: ["doneAction", "undoneAction", "undoTrigger", "redoTrigger"],
   data() {
     return {
-      tab: "component",
-      left: true,
-      right: true,
-      dashWidth: 950,
-      originalWidth: 400,
-      originalLeft: 400,
+      tab: "component" as string,
+      left: true as boolean,
+      right: true as boolean,
+      dashWidth: 950 as number,
+      originalWidth: 400 as number,
+      originalLeft: 400 as number,
       timer: null,
     };
   },
@@ -174,7 +174,7 @@ export default {
     ComponentTab,
     StoreTab,
     GridDensity
-},
+  },
   computed: {
     ...mapState(["exportAsTypescript"]),
   },
@@ -237,14 +237,8 @@ export default {
       this.$emit('redo')
     }
   },
-};
+});
 
-function check (a){
-  if(a === true){
-    return checked
-  }
-  return
-}
 </script>
 
 <style lang="scss">
@@ -262,10 +256,6 @@ function check (a){
   margin-right: 95px;
 }
 
-// .text-white {
-//   color: $menutext;
-// }
-
 q-btn > i {
   color: $menutext;
 }
@@ -285,7 +275,6 @@ q-btn > i {
   border: 1px solid rgba($primary, .5);
 }
 
-// Must change style lang='scss'
 .fa-undo,
 .fa-redo {
   padding: 0 5px;

src/store/state/icons.js renamed to src/store/state/icons.ts

@@ -1,4 +1,5 @@
-const icons = {
+import { Icons } from "types"
+const icons: Icons = {
   div: 'far fa-square fa-lg',
   button: 'fas fa-toggle-off fa-lg',
   form: 'fab fa-wpforms fa-lg',
@@ -20,7 +21,6 @@ const icons = {
   h5:['fa-regular fa-5'],
   h6:['fa-regular fa-6'],
   // element:['fas fa-toggle-on fa-lg']
-}
+};
 
-
-export default icons
+export default icons;

src/store/state/styleClassMap.js

@@ -0,0 +1,8 @@
+//add different style options here like background or font
+import { StyleClassMap } from "types"
+
+const styleClassMap:StyleClassMap = {
+  
+};
+
+export default styleClassMap;

src/store/state/styleClassMap.ts

@@ -99,4 +99,13 @@ export type Component = {
     id: string,
     gridArea: [number, number, number, number],
   },
+};
+
+export type Icons = {
+  [type: string]: string | string[];
+};
+
+export type StyleClassMap = {
+  // insert here for style class map when implenting more
+
 };