Added functionality to export entire project in Typescript. Need to address minor syntax bugs.

Author: Julia Bakerink

src/components/file_system_interface/ExportProject.vue

@@ -44,11 +44,19 @@ 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
@@ -211,7 +219,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 +270,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 +300,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>`;
       }
     },
@@ -323,7 +347,12 @@ export default {
       // 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 +361,27 @@ 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",
+        "include": ["src/**/*", "src/**/*.vue"],
+        "compilerOptions": {
+          "baseUrl": ".",
+          "paths": {
+            "@/*": ["./src/*"]
+          }
+        },\n}`;
+        fs.writeFileSync(path.join(location, "tsconfig.json"), str);
+      } else {
+        return;
+      }
     },
     // create package.json file
     createPackage(location) {
@@ -357,7 +406,13 @@ export default {
       str += `\n\t\t"babel-eslint": "^10.0.1",`;
       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"`;
+      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 +456,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 +500,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(["componentMap", "imagePath", "routes"]),
+    ...mapState(["componentMap", "imagePath", "routes", "exportAsTypescript"]),
   },
 };
 </script>

testExportProject/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	presets: [
+		'@vue/app'
+	]
+}

testExportProject/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "vue-boiler-plate-routes",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"start": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"vue": "^3.2.26",
+		"vue-router": "^4.0.12",
+		"vuex": "^4.0.2"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "~4.5.0",
+		"@vue/cli-plugin-eslint": "~4.5.0",
+		"@vue/cli-service": "~4.5.0",
+		"babel-eslint": "^10.0.1",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^7.0.0-0",
+		"@vue/compiler-sfc": "^3.0.0-0"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/essential",
+			"eslint:recommended"
+		],
+		"rules": {},
+		"parserOptions": {
+			"parser": "babel-eslint"
+		}
+	},
+	"postcss": {
+		"plugins": {
+			"autoprefixer": {}
+		}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not ie <= 8"
+	]
+}

testExportProject/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+	<title>New Vue Project</title>
+</head>
+
+<body>
+	<noscript>
+		<strong>We're sorry but vue-boiler-plate-routes doesn't work properly without JavaScript enabled. Please enable it
+      to continue.</strong>
+	</noscript>
+	<div id="app"></div>
+	<!-- built files will be auto injected -->
+</body>
+
+</html>

testExportProject/src/App.vue

@@ -0,0 +1,20 @@
+<template>
+	<div id="app">
+		<div id="nav">
+			<router-link to="/">HomeView</router-link>
+			<router-link to="/routeTest">routeTest</router-link>
+			<router-view></router-view>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+#app {
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2C3E50;
+	margin-top: 60px;
+}
+</style>

testExportProject/src/components/Child1.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+    <img>
+	</div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex"
+
+export default {
+  name: 'Child1',
+  components: {
+  },
+  data () {
+    return {
+      testProp: "PLACEHOLDER FOR VALUE",
+    }
+  },
+  computed: {
+    ...mapState([
+      "state",
+    ]),
+  },
+  methods: {
+    ...mapActions([
+      "action",
+    ]),
+  },
+};
+</script>
+
+<style scoped>
+</style>

testExportProject/src/components/Child2.vue

@@ -0,0 +1,17 @@
+<template>
+	<div>
+    <button></button>
+	</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Child2',
+  components: {
+  },
+};
+</script>
+
+<style scoped>
+</style>

testExportProject/src/components/Test.vue

@@ -0,0 +1,21 @@
+<template>
+	<div>
+    <div></div>
+	</div>
+</template>
+
+<script>
+import Child1 from '@/components/Child1.vue';
+import Child2 from '@/components/Child2.vue';
+
+export default {
+  name: 'Test',
+  components: {
+    Child1,
+    Child2,
+  },
+};
+</script>
+
+<style scoped>
+</style>

testExportProject/src/components/routeDiv.vue

@@ -0,0 +1,17 @@
+<template>
+	<div>
+    <div></div>
+	</div>
+</template>
+
+<script>
+
+export default {
+  name: 'routeDiv',
+  components: {
+  },
+};
+</script>
+
+<style scoped>
+</style>

testExportProject/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+ const app = createApp(App)
+app.use(router);
+ app.mount('#app');