Skip to content

Commit b080e04

Browse files
deanfchungdeanfchung
committed
added exportprojectbutton
1 parent 6ddb744 commit b080e04

File tree

1 file changed

+369
-2
lines changed

1 file changed

+369
-2
lines changed

‎src/components/ExportProject.vue

Lines changed: 369 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,376 @@
33
</template>
44

55
<script>
6+
// // Where all of the boilerplate is exported
7+
// import { mapState } from 'vuex';
8+
// //const { remote } = require('electron');
9+
// import fs from 'fs-extra';
10+
// import path from 'path';
11+
// const ipc = require('electron').ipcRenderer;
612
export default {
7-
name: 'ExportProjectComponent'
8-
}
13+
name: 'ExportProjectComponent'
14+
// methods: {
15+
// exportProject: function() {
16+
// ipc.send('show-export-dialog');
17+
// },
18+
// /**
19+
// * @description creates the router.js file
20+
// * input: path to dir
21+
// * invokes: createRouterImports(this.componentMap['App'].children),
22+
// * createExport(this.componentMap['App'].children)
23+
// * bug: this.componentMap['App'].children might have bad reference to state..
24+
// * */
25+
// createRouter(location) {
26+
// fs.writeFileSync(
27+
// path.join(location, 'src', 'router.js'),
28+
// this.createRouterImports(this.componentMap['App'].children) +
29+
// '\nVue.use(Router);\n' +
30+
// this.createExport(this.componentMap['App'].children)
31+
// );
32+
// },
33+
// /**
34+
// * @description import routed components from the /views/ dir
35+
// * @argument: this.componentMap['App'].children
36+
// * bug: showing undefined in the import routes
37+
// * fix: changing the child.componentName to child
38+
// */
39+
// createRouterImports(appChildren) {
40+
// let str = "import Vue from 'vue'\nimport Router from 'vue-router'\n";
41+
// appChildren.forEach(child => {
42+
// // console.log(`createRouterImports child: ${child}`);
43+
// str += `import ${
44+
// // child.componentName
45+
// child
46+
// } from './views/${
47+
// // this reference to store state is buggy, returns undefined
48+
// // import undefined from './views/undefined.vue'
49+
// // child.componentName
50+
// child
51+
// }.vue'\n`;
52+
// });
53+
// return str;
54+
// },
55+
// /**
56+
// * @description creates the `export default`
57+
// * bug: path: '/undefined', name: 'undefined', component: undefined
58+
// * issue: child.componentName returning undefined
59+
// */
60+
// createExport(appChildren) {
61+
// let str =
62+
// "export default new Router({\n\tmode: 'history',\n\tbase: process.env.BASE_URL,\n\troutes: [\n";
63+
// appChildren.forEach(child => {
64+
// // console.log(`createExport child: ${child}`);
65+
// // changed if/else: `child.componentName` to `name`
66+
// if (child === 'HomeView') {
67+
// // console.log(`if createExport addChildren child.componentName${child.componentName}`);
68+
// str += `\t\t{\n\t\t\tpath: '/',\n\t\t\tname:'${child}',\n\t\t\tcomponent:${child}\n\t\t},\n`;
69+
// } else {
70+
// // console.log(`else createExport addChildren child.componentName${child}`);
71+
// str += `\t\t{\n\t\t\tpath: '/${child}',\n\t\t\tname:'${child}',\n\t\t\tcomponent: ${child}\n\t\t},\n`;
72+
// }
73+
// });
74+
// str += `\t]\n})\n`;
75+
// return str;
76+
// },
77+
// /**
78+
// * @description
79+
// * invokes: writeTemplate, writeScript, writeStyle
80+
// * bug: name.componentName
81+
// */
82+
// /*
83+
// createComponentCode(
84+
// componentLocation = path.join(data, 'src', 'views', componentName),
85+
// componentName = componentName,
86+
// children = this.componentMap[componentName].children
87+
// )
88+
// */
89+
// createComponentCode(componentLocation, componentName, children) {
90+
// if (componentName === 'App') {
91+
// fs.writeFileSync(
92+
// componentLocation + '.vue',
93+
// this.writeTemplate(componentName, children) +
94+
// this.writeStyle(componentName)
95+
// );
96+
// } else {
97+
// fs.writeFileSync(
98+
// componentLocation + '.vue',
99+
// this.writeTemplate(componentName, children) +
100+
// this.writeScript(componentName, children) +
101+
// this.writeStyle(componentName)
102+
// );
103+
// }
104+
// },
105+
// /**
106+
// * @description helper function for writeTemplate
107+
// * @name writeTemplateTag
108+
// * - gets objects from htmlList from appropriate component and adds them to the template string, then inserts into writeTemplate return str
109+
// * @input: componentMap['component'].htmlList[tag elements]
110+
// */
111+
// writeTemplateTag(compName) {
112+
// console.log('writeTemplateTag invoked!');
113+
// // create reference object
114+
// const htmlElementMap = {
115+
// div: ['<div>', '</div>'],
116+
// button: ['<button>', '</button>'],
117+
// form: ['<form>', '</form>'],
118+
// img: ['<img>', ''],
119+
// link: ['<a href="#"/>', ''],
120+
// list: ['<li>', '</li>'],
121+
// paragraph: ['<p>', '</p>'],
122+
// 'list-ol': ['<ol>', '</ol>'],
123+
// 'list-ul': ['<ul>', '</ul>'],
124+
// input: ['<input />', ''],
125+
// navbar: ['<nav>', '</nav>']
126+
// };
127+
// // loop to iterate through compName arr
128+
// let htmlArr = this.componentMap[compName].htmlList;
129+
// let outputStr = '';
130+
// for (let el of htmlArr) {
131+
// outputStr += '\t\t';
132+
// outputStr += htmlElementMap[el.text][0];
133+
// outputStr += htmlElementMap[el.text][1];
134+
// outputStr += `\n`;
135+
// }
136+
// console.log(`outputStr from writeTemplateTag: ${outputStr}`);
137+
// return outputStr;
138+
// },
139+
// /*
140+
// * @description creates the <router-link> boilerplate for /views/components
141+
// * also creates the <template></template> tag for each component
142+
// * changed name.componentName to name, name is the reference to the object name(?)
143+
// * bug: name.componentName is a bad reference, something is wrong with it
144+
// */
145+
// writeTemplate(compName, children) {
146+
// let str = '';
147+
// let htmlArr = this.componentMap[compName].htmlList;
148+
// // for (let el of htmlArr) {
149+
// // console.log(`el of htmlArr: ${el.text}`);
150+
// // }
151+
// if (compName === 'App') {
152+
// // console.log(`form if compName === 'App'`);
153+
// // console.log(`children: ${children}`)
154+
// str += `<div id="app">\n\t\t<div id="nav">\n`;
155+
// children.forEach(name => {
156+
// if (name === 'HomeView') {
157+
// // console.log(`HomeView if statement invoked!`);
158+
// // console.log(`name: ${name}`);
159+
// // console.log(`name.componentName: ${
160+
// // // name.componentName
161+
// // name
162+
// // }`);
163+
// str += `\t\t\t<router-link to="/">${
164+
// // name.componentName
165+
// name
166+
// }</router-link>\n`;
167+
// } else {
168+
// // console.log(`else invoked`);
169+
// // console.log(`name: ${name}`);
170+
// str += `\t\t\t<router-link to="/${
171+
// // name.componentName
172+
// name
173+
// }">${
174+
// // name.componentName
175+
// name
176+
// }</router-link>\n`;
177+
// }
178+
// });
179+
// str += '\t\t\t<router-view></router-view>\n\t\t</div>\n';
180+
// } else {
181+
// // console.log(`else (if compName === 'App'`);
182+
// str += `<div>\n`;
183+
// children.forEach(name => {
184+
// str += `\t\t<${
185+
// // name.componentName
186+
// name
187+
// }>\n\t\t</${
188+
// // name.componentName
189+
// name
190+
// }>\n`;
191+
// });
192+
// }
193+
// // writes the html tag boilerplate
194+
// let templateTagStr = this.writeTemplateTag(compName);
195+
// console.log(`templateTagStr: ${templateTagStr}`);
196+
// let testStr = `<template>\n\t<div>\n${templateTagStr}\t</div>\n</template>`;
197+
// console.log(`testStr: \n${testStr}`);
198+
// return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
199+
// },
200+
// /**
201+
// * changed name.componentName = name
202+
// * @description imports child components into style
203+
// */
204+
// writeScript(componentName, children) {
205+
// let str = '';
206+
// children.forEach(name => {
207+
// str += `import ${name} from '@/components/${name}.vue';\n`;
208+
// });
209+
// let childrenComponentNames = '';
210+
// children.forEach(name => {
211+
// childrenComponentNames += `\t\t${name},\n`;
212+
// });
213+
// return `\n\n<script>\n${str}\nexport default {\n\tname: '${componentName}',\n\tcomponents: {\n${childrenComponentNames}\t}\n};\n<\/script>`;
214+
// },
215+
// /**
216+
// * @description writes the <style> in vue component, if component is 'App', writes a shitton of css, else returns <style scoped
217+
// */
218+
// writeStyle(componentName) {
219+
// let style =
220+
// componentName !== 'App'
221+
// ? ''
222+
// : `#app {\n\tfont-family: 'Avenir', Helvetica, Arial, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\ttext-align: center;\n\tcolor: #2c3e50;\n\tmargin-top: 60px;\n}\n`;
223+
// return `\n\n<style scoped>\n${style}</style>`;
224+
// },
225+
// // creates index html
226+
// createIndexFile(location) {
227+
// let str = `<!DOCTYPE html>\n<html lang="en">\n\n<head>`;
228+
// str += `\n\t<meta charset="utf-8">`;
229+
// str += `\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge">`;
230+
// str += `\n\t<meta name="viewport" content="width=device-width,initial-scale=1.0">`;
231+
// str += `\n\t<link rel="icon" href="<%= BASE_URL %>favicon.ico">`;
232+
// str += `\n\t<title>vue-boiler-plate-routes</title>`;
233+
// str += `\n</head>\n\n`;
234+
// str += `<body>`;
235+
// str += `\n\t<noscript>`;
236+
// str += `\n\t\t<strong>We're sorry but vue-boiler-plate-routes doesn't work properly without JavaScript enabled. Please enable it
237+
// to continue.</strong>`;
238+
// str += `\n\t</noscript>`;
239+
// str += `\n\t<div id="app"></div>`;
240+
// str += `\n\t<!-- built files will be auto injected -->`;
241+
// str += `\n</body>\n\n`;
242+
// str += `</html>\n`;
243+
// fs.writeFileSync(path.join(location, 'public', 'index.html'), str);
244+
// },
245+
// // creates main.js boilerplate
246+
// createMainFile(location) {
247+
// let str = `import Vue from 'vue'`;
248+
// str += `\nimport App from './App.vue'`;
249+
// str += `\nimport router from './router'`;
250+
// str += `\n\nVue.config.productionTip = false`;
251+
// str += `\n\nnew Vue({`;
252+
// str += `\n\trouter,`;
253+
// str += `\n\trender: h => h(App)`;
254+
// str += `\n}).$mount('#app')`;
255+
// fs.writeFileSync(path.join(location, 'src', 'main.js'), str);
256+
// },
257+
// // create babel file
258+
// createBabel(location) {
259+
// let str = `module.exports = {`;
260+
// str += `\n\tpresets: [`;
261+
// str += `\n\t\t'@vue/app'`;
262+
// str += `\n\t]`;
263+
// str += `\n}`;
264+
// fs.writeFileSync(path.join(location, 'babel.config.js'), str);
265+
// },
266+
// // create package.json file
267+
// createPackage(location) {
268+
// let str = `{`;
269+
// str += `\n\t"name": "vue-boiler-plate-routes",`;
270+
// str += `\n\t"version": "0.1.0",`;
271+
// str += `\n\t"private": true,`;
272+
// str += `\n\t"scripts": {`;
273+
// str += `\n\t\t"start": "vue-cli-service serve",`;
274+
// str += `\n\t\t"build": "vue-cli-service build",`;
275+
// str += `\n\t\t"lint": "vue-cli-service lint"`;
276+
// str += `\n\t},`;
277+
// str += `\n\t"dependencies": {`;
278+
// str += `\n\t\t"vue": "^2.6.6",`;
279+
// str += `\n\t\t"vue-router": "^3.0.1"`;
280+
// str += `\n\t},`;
281+
// str += `\n\t"devDependencies": {`;
282+
// str += `\n\t\t"@vue/cli-plugin-babel": "^3.5.0",`;
283+
// str += `\n\t\t"@vue/cli-plugin-eslint": "^3.5.0",`;
284+
// str += `\n\t\t"@vue/cli-service": "^3.5.0",`;
285+
// str += `\n\t\t"babel-eslint": "^10.0.1",`;
286+
// str += `\n\t\t"eslint": "^5.8.0",`;
287+
// str += `\n\t\t"eslint-plugin-vue": "^5.0.0",`;
288+
// str += `\n\t\t"vue-template-compiler": "^2.5.21"`;
289+
// str += `\n\t},`;
290+
// str += `\n\t"eslintConfig": {`;
291+
// str += `\n\t\t"root": true,`;
292+
// str += `\n\t\t"env": {`;
293+
// str += `\n\t\t\t"node": true`;
294+
// str += `\n\t\t},`;
295+
// str += `\n\t\t"extends": [`;
296+
// str += `\n\t\t\t"plugin:vue/essential",`;
297+
// str += `\n\t\t\t"eslint:recommended"`;
298+
// str += `\n\t\t],`;
299+
// str += `\n\t\t"rules": {},`;
300+
// str += `\n\t\t"parserOptions": {`;
301+
// str += `\n\t\t\t"parser": "babel-eslint"`;
302+
// str += `\n\t\t}`;
303+
// str += `\n\t},`;
304+
// str += `\n\t"postcss": {`;
305+
// str += `\n\t\t"plugins": {`;
306+
// str += `\n\t\t\t"autoprefixer": {}`;
307+
// str += `\n\t\t}`;
308+
// str += `\n\t},`;
309+
// str += `\n\t"browserslist": [`;
310+
// str += `\n\t\t"> 1%",`;
311+
// str += `\n\t\t"last 2 versions",`;
312+
// str += `\n\t\t"not ie <= 8"`;
313+
// str += `\n\t]`;
314+
// str += `\n}`;
315+
// fs.writeFileSync(path.join(location, 'package.json'), str);
316+
// }
317+
// },
318+
// computed: {
319+
// ...mapState(['componentMap'])
320+
// },
321+
// mounted() {
322+
// // executed when export button is clicked
323+
// // allows user to pick a path to export their vue prototype
324+
// ipc.on('export-project-location', (event, data) => {
325+
// if (!fs.existsSync(data)) {
326+
// fs.mkdirSync(data);
327+
// console.log('FOLDER CREATED!');
328+
// // console.log(`data: ${data}`); // displays the directory path
329+
// fs.mkdirSync(path.join(data, 'public'));
330+
// fs.mkdirSync(path.join(data, 'src'));
331+
// fs.mkdirSync(path.join(data, 'src', 'assets'));
332+
// fs.mkdirSync(path.join(data, 'src', 'components'));
333+
// fs.mkdirSync(path.join(data, 'src', 'views'));
334+
// }
335+
// /*
336+
// fs.copySync(
337+
// path.join(remote.app.getAppPath(), '../vue-boiler-plate-routes/'),
338+
// data
339+
// );
340+
// .then(() => console.log('success!'))
341+
// .catch(err => console.err(err));
342+
// */
343+
// // creating basic boilerplate for vue app
344+
// this.createIndexFile(data);
345+
// this.createMainFile(data);
346+
// this.createBabel(data);
347+
// this.createPackage(data);
348+
// // main logic below for creating components?
349+
// this.createRouter(data);
350+
// for (let componentName in this.componentMap) {
351+
// if (componentName !== 'App') {
352+
// if (this.$store.state.routes[componentName]) {
353+
// this.createComponentCode(
354+
// path.join(data, 'src', 'views', componentName),
355+
// componentName,
356+
// this.componentMap[componentName].children
357+
// );
358+
// } else {
359+
// this.createComponentCode(
360+
// path.join(data, 'src', 'components', componentName),
361+
// componentName,
362+
// this.componentMap[componentName].children
363+
// );
364+
// }
365+
// } else {
366+
// this.createComponentCode(
367+
// path.join(data, 'src', componentName),
368+
// componentName,
369+
// this.componentMap[componentName].children
370+
// );
371+
// }
372+
// }
373+
// });
374+
// }
375+
};
9376
</script>
10377

11378
<style>

0 commit comments

Comments
 (0)