Merge pull request #5 from oslabs-beta/exportTypescript

Export typescript

Author: MrBeeAreWhy

TestExport/Test.vue

@@ -158,6 +158,7 @@ export default {
       "componentChildrenMultiselectValue",
       "imagePath",
       "activeComponentObj",
+      "exportAsTypescript",
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {

TestExport2/Test.vue

@@ -116,6 +116,10 @@ export default {
         else imports += "mapActions";
         imports += ' } from "vuex"\n';
       }
+    // if Typescript toggle is on, import defineComponent
+      if (this.exportAsTypescript === "on") {
+        imports += 'import { defineComponent } from "vue";\n';
+      }
       // add imports for children
       children.forEach((name) => {
         imports += `import ${name} from '@/components/${name}.vue';\n`;
@@ -161,15 +165,27 @@ export default {
         methods += "  },\n";
       }
       // concat all code within script tags
-      let output = "\n\n<script>\n";
-      output += imports + "\nexport default {\n  name: '" + componentName + "'";
+      // if exportAsTypescript is on, out should be <script lang="ts">
+      let output;
+      if (this.exportAsTypescript === 'on') {
+        output = "\n\n<script lang='ts'>\n";
+        output += imports + "\nexport default defineComponent ({\n  name: '" + componentName + "'";
+      } else {
+        output = "\n\n<script>\n";
+        output += imports + "\nexport default {\n  name: '" + componentName + "'";
+      }
       output += ",\n  components: {\n";
       output += childrenComponentNames + "  },\n";
       output += data;
       output += computed;
       output += methods;
       // eslint-disable-next-line no-useless-escape
-      output += "};\n<\/script>";
+      if (this.exportAsTypescript === 'on') {
+        output += "});\n<\/script>";
+
+      } else {
+        output += "};\n<\/script>";
+      }
       return output;
     },
     /**

TestExport3/Test.vue

@@ -45,7 +45,7 @@ export default {
   },
   computed: {
     // needs access to current component aka activeComponent
-    ...mapState(["componentMap", "activeComponent", "activeComponentObj"]),
+    ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
     code: function () {
       let computedCode = "Your component boilerplate will be displayed here.";
       if (this.activeComponent) {
@@ -172,7 +172,12 @@ export default {
           imports += "mapState, mapActions";
         } else if (this.activeComponentObj.state.length) imports += "mapState";
         else imports += "mapActions";
-        imports += ' } from "vuex"\n';
+        imports += ' } from "vuex";\n';
+      }
+
+       // if Typescript toggle is on, import defineComponent
+      if (this.exportAsTypescript === "on") {
+        imports += 'import { defineComponent } from "vue";\n';
       }
 
       // add imports for children
@@ -223,15 +228,28 @@ export default {
       }
 
       // concat all code within script tags
-      let output = "\n\n<script>\n";
-      output += imports + "\nexport default {\n  name: " + componentName;
+      // if exportAsTypescript is on, out should be <script lang="ts">
+      let output;
+      if (this.exportAsTypescript === 'on') {
+        output = "\n\n<script lang='ts'>\n";
+        output += imports + "\nexport default defineComponent ({\n  name: '" + componentName + "';";
+      } else {
+        output = "\n\n<script>\n";
+        output += imports + "\nexport default {\n  name: '" + componentName + "';";
+      }
       output += ",\n  components: {\n";
       output += childrenComponentNames + "  },\n";
       output += data;
       output += computed;
       output += methods;
+
+      if (this.exportAsTypescript === 'on') {
+        output += "});\n<\/script>\n\n<style scoped>\n</style>"
+
+      } else {
+        output += "};\n<\/script>\n\n<style scoped>\n</style>"
+      }
       // eslint-disable-next-line no-useless-escape
-      output += "};\n<\/script>\n\n<style scoped>\n</style>";
       // add props/data
 
       // eslint-disable-next-line no-useless-escape

src/components/ComponentDisplay.vue

@@ -98,7 +98,7 @@ export default {
     ]),
     // Prevent Delete on changes to searchable multiselet
     stopDelete(e) {
-      if (e.code === "Backspce") e.stopPropogation();
+      if (e.code === "Backspace") e.stopPropogation();
     },
     // adds a state to the currently selected component
     addStateToComp() {

src/components/ExportComponentMixin.vue

@@ -186,6 +186,7 @@ export default {
       "activeComponent",
       "activeComponentObj",
       "componentMap",
+      "exportAsTypescript",
     ]),
 
     activeRouteDisplay() {
@@ -274,6 +275,11 @@ export default {
       }
     },
 
+    // Delete prop
+    deleteProp(prop) {
+      this.$store.dispatch('deletePropsFromComponent', prop);
+    },
+
     // changes layer of active component
     handleLayer(e) {
       e.preventDefault();

src/components/dashboard_items/CodeSnippet.vue

@@ -17,6 +17,10 @@ Description:
           ></i>
         </q-btn>
         <q-toolbar-title> OverVue </q-toolbar-title>
+        <label for="typescript" style="margin-right: 10px;"> 
+          <input type="checkbox" name="typescript" id="typescript" :value="exportAsTypescript" @change="syncTypescriptFlag" />
+          Use Typescript
+        </label>
         <SlackLoginWindow />
         <div></div>
         <i
@@ -113,6 +117,7 @@ import OpenProjectComponent from "../components/file_system_interface/OpenProjec
 import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 import ComponentTab from "../components/home_sidebar_items/ComponentTab/ComponentTab.vue";
 import StoreTab from "../components/home_sidebar_items/StoreTab/StoreTab.vue";
+import { mapState } from "vuex";
 
 export default {
   // Passed down from App.vue
@@ -133,6 +138,11 @@ export default {
     ComponentTab,
     StoreTab,
   },
+  computed: {
+    ...mapState([
+      "exportAsTypescript"
+    ]),
+  },
   methods: {
     undo() {
       // this.$router.app.$children[0].undo();
@@ -142,6 +152,15 @@ export default {
     redo() {
       this.$emit("redo");
     },
+    syncTypescriptFlag(e) {
+      let checkboxValue;
+      if (e.target.value === "off") {
+        checkboxValue = "on"
+      } else {
+        checkboxValue = "off"
+      }
+      this.$store.commit('EXPORT_AS_TYPESCRIPT', checkboxValue);
+    },
   },
 };
 </script>

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -89,6 +89,11 @@ const mutations = {
 
   // *** VUEX *** //////////////////////////////////////////////
 
+
+  [types.EXPORT_AS_TYPESCRIPT]: (state, payload) => {
+    state.exportAsTypescript = payload; 
+  },
+
   [types.CREATE_ACTION]: (state, payload) => {
     state.userActions.push(payload);
     state.userActions.sort();
@@ -99,7 +104,7 @@ const mutations = {
   },
 
   [types.ADD_ACTION_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!active.actions) {
       active.actions = payload;
@@ -133,7 +138,7 @@ const mutations = {
   },
 
   [types.ADD_PROPS_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!active.props) {
       active.props = payload;
@@ -164,7 +169,8 @@ const mutations = {
   },
 
   [types.ADD_STATE_TO_COMPONENT]: (state, payload) => {
-    const active = state.activeComponentObj;
+    // const active = state.activeComponentObj;
+    const active = state.componentMap[state.activeComponent];
 
     if (!state.activeComponentObj.state) {
       state.activeComponentObj.state = payload;
@@ -187,7 +193,7 @@ const mutations = {
   },
 
   [types.DELETE_ACTION_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.actions.forEach((element) => {
       if (element !== payload) newArray.push(element);
@@ -198,7 +204,7 @@ const mutations = {
   },
 
   [types.DELETE_PROPS_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.props.forEach((element) => {
       if (element !== payload) newArray.push(element);
@@ -209,7 +215,7 @@ const mutations = {
   },
 
   [types.DELETE_STATE_FROM_COMPONENT]: (state, payload) => {
-    const temp = state.activeComponentObj;
+    const temp = state.componentMap[state.activeComponent];
     const newArray = [];
     temp.state.forEach((element) => {
       if (element !== payload) newArray.push(element);