Merge pull request #8 from oslabs-beta/exportTypescriptProject

Export typescript project

Author: Kerolos-Nesem

src/components/file_system_interface/ExportProject.vue

@@ -44,29 +44,41 @@ export default {
      *          createExport(this.componentMap['App'].children)
      *  */
     createRouter(location) {
-      fs.writeFileSync(
-        path.join(location, "src", "router.js"),
-        this.createRouterImports(this.componentMap["App"].children) +
-          this.createExport(this.componentMap["App"].children)
-      );
+      if (this.exportAsTypescript === "on") {
+        fs.writeFileSync(
+          path.join(location, "src", "router.ts"),
+          this.createRouterImports(this.componentMap["App"].children) +
+            this.createExport(this.componentMap["App"].children)
+        );
+      } else {
+        fs.writeFileSync(
+          path.join(location, "src", "router.js"),
+          this.createRouterImports(this.componentMap["App"].children) +
+            this.createExport(this.componentMap["App"].children)
+        );
+      }
     },
     /**
      * @description import routed components from the /views/ dir
      * @argument: this.componentMap['App'].children
      */
     createRouterImports(appChildren) {
-      let str = "import { createRouter, createWebHistory } from 'vue-router'\n";
+      let str = "import { createRouter, createWebHistory } from 'vue-router';\n";
       appChildren.forEach((child) => {
-        str += `import ${child} from './views/${child}.vue'\n`;
+        str += `import ${child} from './views/${child}.vue';\n`;
       });
       return str;
     },
     /**
      * @description creates the `export default` code in <script>
      */
     createExport(appChildren) {
-      let str =
-        "export default createRouter({\n\thistory: createWebHistory(),\n\tbase: process.env.BASE_URL,\n\troutes: [\n";
+      let str;
+      if (this.exportAsTypescript === 'on') {
+        str = "export default createRouter({\n\thistory: createWebHistory(process.env.BASE_URL),\n\troutes: [\n";
+      } else {
+        str = "export default createRouter({\n\thistory: createWebHistory(),\n\tbase: process.env.BASE_URL,\n\troutes: [\n";
+      }
       appChildren.forEach((child) => {
         if (child === "HomeView") {
           str += `\t\t{\n\t\t\tpath: '/',\n\t\t\tname:'${child}',\n\t\t\tcomponent:${child}\n\t\t},\n`;
@@ -211,7 +223,11 @@ export default {
             imports += "mapState, mapActions";
           } else if (currentComponent.state.length) imports += "mapState";
           else imports += "mapActions";
-          imports += ' } from "vuex"\n';
+          imports += ' } from "vuex";\n';
+        }
+        // if in Typescript mode, import defineComponent
+        if (this.exportAsTypescript === "on") {
+          imports += 'import { defineComponent } from "vue";\n';
         }
         // add imports for children
         children.forEach((name) => {
@@ -258,16 +274,25 @@ export default {
           methods += "  },\n";
         }
         // concat all code within script tags
-        let output = "\n\n<script>\n";
-        output +=
-          imports + "\nexport default {\n  name: '" + componentName + "'";
+        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;
       } else {
         let str = "";
@@ -279,6 +304,9 @@ export default {
           childrenComponentNames += `    ${name},\n`;
         });
         // eslint-disable-next-line no-useless-escape
+        if (this.exportAsTypescript === "on") {
+          return `\n\n<script lang="ts">\nimport { defineComponent } from "vue";\n ${str}\nexport default defineComponent ({\n  name: '${componentName}',\n  components: {\n${childrenComponentNames}  }\n});\n<\/script>`;
+        }
         return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n  components: {\n${childrenComponentNames}  }\n};\n<\/script>`;
       }
     },
@@ -315,15 +343,20 @@ export default {
     },
     // creates main.js boilerplate
     createMainFile(location) {
-      let str = `import { createApp } from 'vue'`;
-      str += `\nimport App from './App.vue'`;
-      str += `\nimport router from './router'`;
+      let str = `import { createApp } from 'vue';`;
+      str += `\nimport App from './App.vue';`;
+      str += `\nimport router from './router';`;
       // str += `\n\n import './index.css'`
-      str += `\n\n const app = createApp(App)`;
+      str += `\n\n const app = createApp(App);`;
       // str += `\n\trouter,
       str += `\napp.use(router);`;
       str += `\n app.mount('#app');`;
-      fs.writeFileSync(path.join(location, "src", "main.js"), str);
+      // if using typescript, export with .ts extension
+      if (this.exportAsTypescript === "on") {
+        fs.writeFileSync(path.join(location, "src", "main.ts"), str);
+      } else {
+        fs.writeFileSync(path.join(location, "src", "main.js"), str);
+      }
     },
     // create babel file
     createBabel(location) {
@@ -332,7 +365,20 @@ export default {
       str += `\n\t\t'@vue/app'`;
       str += `\n\t]`;
       str += `\n}`;
-      fs.writeFileSync(path.join(location, "babel.config.js"), str);
+      // if using typescript, export with .ts extension
+      if (this.exportAsTypescript === "on") {
+        fs.writeFileSync(path.join(location, "src", "babel.config.ts"), str);
+      } else {
+        fs.writeFileSync(path.join(location, "babel.config.js"), str);
+      }
+    },
+    createTSConfig(location) {
+      if (this.exportAsTypescript === "on") {
+        let str = `{\n\t"extends": "@vue/tsconfig/tsconfig.web.json",\n\t"include": ["src/**/*", "src/**/*.vue"],\n\t"compilerOptions": {\n\t\t"baseUrl": ".",\n\t\t"paths": {\n\t\t\t"@/*": ["./src/*"]\n\t\t}\n\t}\n}`;
+        fs.writeFileSync(path.join(location, "tsconfig.json"), str);
+      } else {
+        return;
+      }
     },
     // create package.json file
     createPackage(location) {
@@ -358,6 +404,12 @@ export default {
       str += `\n\t\t"eslint": "^6.7.2",`;
       str += `\n\t\t"eslint-plugin-vue": "^7.0.0-0",`;
       str += `\n\t\t"@vue/compiler-sfc": "^3.0.0-0"`;
+      if (this.exportAsTypescript === "on") {
+        str += `,\n\t\t"@vue/tsconfig": "^0.1.3",`;
+        str += `\n\t\t"typescript": "~4.5.5",`;
+        str += `\n\t\t"vue-tsc": "^0.31.4",`;
+        str += `\n\t\t"@babel/preset-typescript": "^7.16.7"`; // not sure we need this?
+      }
       str += `\n\t},`;
       str += `\n\t"eslintConfig": {`;
       str += `\n\t\t"root": true,`;
@@ -401,6 +453,7 @@ export default {
       this.createIndexFile(data);
       this.createMainFile(data);
       this.createBabel(data);
+      this.createTSConfig(data);
       this.createPackage(data);
       // exports images to the /assets folder
       // eslint-disable-next-line no-unused-vars
@@ -444,7 +497,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(["componentMap", "imagePath", "routes"]),
+    ...mapState(["componentMap", "imagePath", "routes", "exportAsTypescript"]),
   },
 };
 </script>